So, the next step is adding the HashTagChanged event to the Session object of our example project, writing the following snippet of code in the associated Code Editor: Dim data As String = DecodeBase64(Hashtag.NthField(",",2) ) // We retrieve the information saved in the Hash, but just the relevant data for the image and not the URL part. Why we do this? Well, because we can add the HashTagChanged Event Handler to the Session object so it will fire every time we change the value of the Hash property and we will be able to retrieve the data from that property. However, we will use this property as a temporary storage container for passing the data between the HTML/JavaScript side of the web page and the Xojo side of our code. This is the property that allows us to jump to other page sections previously tagged. Then, we assign the data to the document Hash property. The trick here is that we retrieve that information in its URL format and, thus, encoded as Base64 data that we can assign to other document properties without losing its original meaning. Once we get the reference to our Canvas instance, the following line of code retrieves the picture content itself and assigns it to the img variable. For that, we use the ControlID property on our WebCanvas instance, adding the “canvas” appended by Xojo to all these kind of objects when generating the source code for the page. Js.Append "=img" // We assign that data to the document Hash property, so we can retrieve it from the Xojo sideĮxecuteJavaScript execute // Finally, we execute the JavaScript codeĪs you can see, the first line of the JavaScript code is in charge of retrieving the cCanvas reference from the DOM (document object model) of the Web Page. Js.Append "var img = canvas.toDataURL(""image/png base64 "") " // We access to the image data, encoded as a base64 string Js.Append "var canvas = document.getElementById('" + cCanvas.ControlID + "_canvas') " // We get the item reference based on its ID Once the WebButton has been added to the WebPage from the Library, put the following code in its Action Event Handler: Dim js() As String In fact, this will be the button in charge of calling the process to save the image as a picture file on the user disk. This is the process we will execute from the Action Event Handler of a WebButton added to the Web from the Library. The first interesting step is retrieving the underlying image represented by the WebCanvas and that is something we can get using a fragment of JavaScript code executed from the Xojo side. For example, we can draw a picture added to our project (with the filename “landscape”), using this line of code in the Paint event of our cCanvas instance: g.DrawPicture landscape, 0, 0, g.Width, g.Height Retrieving the WebCanvas image data Obviously, you can draw anything you want in the WebCanvas or even paint a picture on it. Use the following code to draw a black colored rectangle: g.FillRect 0, 0, g.Width, g.Height With the WebCanvas selected in the Navigator, change its name to cCanvas using the Inspector and add the Paint Event Handler to it using the Insert > Event Handler option from the menu. In order to follow this tutorial, create a new Web project and add a new WebCanvas control from the Library to the default Web Page added to the project: Web. However, by using a little JavaScript you can easily add this capability to Xojo. Sometimes is can be useful to be able to save the graphics drawn in the WebCanvas to an image file, but unfortunately there is no built-in Xojo method to do this. It takes advantage of the HTML5 Canvas making it fast and powerful. The WebCanvas control is used for drawing graphics in web apps.
0 Comments
Leave a Reply. |