{"id":20376,"date":"2016-11-23T16:06:33","date_gmt":"2016-11-23T16:06:33","guid":{"rendered":"https:\/\/legacy.livecode.com\/?p=20376"},"modified":"2016-11-23T16:39:11","modified_gmt":"2016-11-23T16:39:11","slug":"control-your-webpage-with-livecode-html5","status":"publish","type":"post","link":"https:\/\/legacy.livecode.com\/control-your-webpage-with-livecode-html5\/","title":{"rendered":"Control your webpage with LiveCode HTML5"},"content":{"rendered":"<p>When you deploy a LiveCode 9 app to the web with HTML5 deployment, you can now call into JavaScript and integrate your app with the surrounding web page. Deploy your app with LiveCode 9 Developer Preview 2 and try it out.<\/p>\n<p><!--more--><\/p>\n<p>One of the most requested features for LiveCode HTML5 applications\u00a0has been to add the ability to interact with the browser&#8217;s JavaScript APIs. \u00a0In the <a href=\"https:\/\/legacy.livecode.com\/whats-new-in-livecode-9-0-dp-2\/\">latest Developer Preview release of LiveCode 9<\/a>, we&#8217;ve added this capability!<\/p>\n<h3>You can &#8220;do&#8221; it<\/h3>\n<p>For a long time, the LiveCode <strong>do<\/strong> command has had a form which runs the script you give it as a different programming language. \u00a0The languages available are listed in\u00a0<strong>the alternateLanguages<\/strong>, depending\u00a0on which operating system you&#8217;re running. \u00a0For example, you might do some arithmetic using VBScript on Windows with:<\/p>\n<pre><code>do \"result = 1 + 1\" as \"vbscript\"\r\n<\/code><\/pre>\n<p>We have now added &#8220;JavaScript&#8221; as one of the possible alternate languages in LiveCode HTML5 applications. \u00a0You can evaluate\u00a0a snippet of JavaScript code with the\u00a0<strong>do<\/strong> command, and\u00a0<strong>the result<\/strong> will be set to whatever the result of the JavaScript computation was.<\/p>\n<h3>The colours of the rainbow<\/h3>\n<p>It&#8217;s pretty easy to use this new capability to manipulate the webpage surrounding an HTML5 standalone stack. \u00a0As a simple example, you can easily build an app that changes the background colour of the part of the page surrounding it, using the JavaScript DOM (Document Object Model) APIs and some CSS.<\/p>\n<p>First, try out the JavaScript snippet that your app is going to run. \u00a0Open an existing HTML5 standalone in a browser, and go to the JavaScript developer console. \u00a0Run:<\/p>\n<pre>Module.canvas.parentNode.setAttribute(\"style\", \"background: hsl(80, 100%, 50%)\")\r\n<\/pre>\n<p>Explanation:<\/p>\n<ul>\n<li>The <tt>Module<\/tt>\u00a0global variable contains all the information about your app<\/li>\n<li>It has a <tt>canvas<\/tt> field, which is the\u00a0HTML element where the app is displayed.<\/li>\n<li>The canvas has a\u00a0<tt>parentNode<\/tt>\u00a0field, which its parent HTML element.<\/li>\n<li>We set the <tt>style<\/tt> attribute on the element to a CSS snippet that changes its background colour, specifying the colour using a hue, saturation and luminance (HSL) triple.<\/li>\n<\/ul>\n<p>Your app should now be surrounded by a beautiful green colour!<\/p>\n<p>Jump into LiveCode and create a new stack, and drag a button onto it. \u00a0When the button is clicked, the app will animate the web page by cycling through different colours, and when you click it again, it&#8217;ll stop.<\/p>\n<div id=\"attachment_20377\" style=\"width: 651px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/legacy.livecode.com\/wp-content\/uploads\/2016\/11\/html5-do-rainbows.png\" rel=\"attachment wp-att-20377\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-20377\" class=\"size-full wp-image-20377\" src=\"https:\/\/legacy.livecode.com\/wp-content\/uploads\/2016\/11\/html5-do-rainbows.png\" alt=\"HTML5 apps can call into JavaScript to change the surrounding web page.\" width=\"641\" height=\"177\" srcset=\"https:\/\/legacy.livecode.com\/wp-content\/uploads\/2016\/11\/html5-do-rainbows.png 641w, https:\/\/legacy.livecode.com\/wp-content\/uploads\/2016\/11\/html5-do-rainbows-300x83.png 300w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/a><p id=\"caption-attachment-20377\" class=\"wp-caption-text\">HTML5 apps can call into JavaScript to change the surrounding web page.<\/p><\/div>\n<p>Edit the script of the button. \u00a0The script needs some static variables (to hold the animation state), a\u00a0<strong>mouseUp<\/strong> handler to deal with starting and stopping, and a\u00a0<strong>doUpdate<\/strong> handler to do the colour animation by running JavaScript.<\/p>\n<pre><code>\r\nlocal sCycleEnabled\r\nlocal sHue\r\n\r\n-- When the button is clicked, it toggles the\r\n-- animation on or off and updates its label to match\r\non mouseUp\r\n   put not sCycleEnabled into sCycleEnabled\r\n\r\n   if sCycleEnabled then\r\n      set the label of me to \"Stop\"\r\n      doUpdate\r\n   else\r\n      set the label of me to \"Start\"\r\n   end if\r\nend mouseUp\r\n\r\n-- Each animation tick, gradually cycle through the\r\n-- colours by modifying the colour hue\r\non doUpdate\r\n   -- The hue is actually an angle in degrees\r\n   put (1 + sHue) mod 360 into sHue\r\n\r\n   -- Prepare and run the JavaScript snippet\r\n   local tScript\r\n   put \"Module.canvas.parentNode.setAttribute\" after tScript\r\n   put \"(\" &amp; quote &amp; \"style\" &amp; quote &amp; \", \" after tScript\r\n   put quote &amp; \r\n         merge(\"background: hsl([[sHue]],100%,50%)\") &amp; \r\n         quote &amp; \")\" after tScript\r\n\r\n   if the platform is \"html5\" then\r\n      do tScript as \"JavaScript\"\r\n   end if\r\n\r\n   -- Continue the animation\r\n   if sCycleEnabled then\r\n      send \"doUpdate\" to me in 100 millisecs\r\n   end if\r\nend doUpdate\r\n<\/code><\/pre>\n<p>If you like, you can check that clicking the button starts and stops as you expect, and possibly add a field to show the JavaScript that the app is executing.<\/p>\n<p>And that&#8217;s it. Deploy your app as an HTML5 standalone, open it in a browser, click &#8220;Start&#8221; and enjoy the pretty colours.<\/p>\n<p>This is just one of the exciting new features coming in LiveCode 9. Try it out now! You\u00a0can get\u00a0LiveCode 9 DP 2 via automatic updates from within the IDE (\u2018Help\u00a0\u2192 Check For Updates\u2019), or <a href=\"https:\/\/legacy.livecode.com\/download\/\">download an installer<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you deploy a LiveCode 9 app to the web with HTML5 deployment, you can now call into JavaScript and integrate your app with the surrounding web page. Deploy your app with LiveCode 9 Developer Preview 2 and try it out.<\/p>\n","protected":false},"author":27,"featured_media":20423,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[46],"tags":[104,304,177],"class_list":["post-20376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-whats-new","tag-html5","tag-livecode-9","tag-tech"],"acf":[],"_links":{"self":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/20376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/comments?post=20376"}],"version-history":[{"count":4,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/20376\/revisions"}],"predecessor-version":[{"id":20419,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/20376\/revisions\/20419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/media\/20423"}],"wp:attachment":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/media?parent=20376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/categories?post=20376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/tags?post=20376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}