Using the New Web Features in LiveCode 10-dp-1

Our Vision for the Web in LiveCode 10

We’re really excited to bring Web up to a first class citizen in LiveCode 10. Our goal is that you’ll be able to use cards, stacks and the LiveCode language almost anywhere you might previously have needed JavaScript. We’ve learned from past incarnations of LiveCode on the web what we need to do so you can quickly create an amazing experience with your web apps.

Some of the changes here will have major benefits for LiveCode on all platforms. We’ll come back and talk about some of that in a moment. First though, I want to highlight a number of things you can do in our first developer preview of 10 on the Web, today.

Things you can Try in LiveCode 10-dp-1

Interacting with JavaScript

When running in a web page, LiveCode has the ability to interact directly with JavaScript. In this example, I’m going to show you how to play an audio clip from a URL using JavaScript. NOTE: You will NOT need to use JavaScript to play audio in LiveCode 10 as we will be implementing media playback that works the same as on other platforms using native LiveCode syntax. However I thought this would be a good example of how to call JavaScript. You can apply it to other places where you might want to interact with something in the JavaScript world. (Or use this example while you wait for audio playback in a future DP.)

Create a stack with one button “Play Audio” and a field called “URL”. I’ve pasted into the field a URL to an mp3

https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

In the button script we will call a custom handler to do the playback:

on mouseUp
   playAudio field "URL"
end mouseUp

In the stack script, implement the handler to play the clip. Firstly we are going to register a handler on the stack “audioEnded” so that JavaScript can call back to our stack when the sound clip is finished. Next, we use “do as javascript” to create a new sound clip ready to play the mp3 at our URL. Then we tell JavaScript to send our “audioEnded” message when the clip is finished. Finally, we send the instruction to play the clip. The clip will play. Once it is finished, our audioEnded handled will pop up a dialog will pop up saying that it is done.

on playAudio pUrl
  /* Ensure the browser can call the audioEnded handler */
  set the cJavascriptHandlers of this stack to "audioEnded"
  
  /* Create an audio clip object as a property of the document */
  do merge("document.myAudioClip = new Audio('[[pUrl]]')") as "javascript"
  
  /* Add an event handler for when the audio finishes */
  do "document.myAudioClip.addEventListener('ended', () => { document.liveCode.findStackWithName('PlayAudioWeb').audioEnded() })" as "javascript"
  
  /* Play the audio clip */
  do "document.myAudioClip.play()" as "javascript"
end playAudio

/* This handler is called by JS when the audio has finished. */
on audioEnded
  answer "The audio clip has finished!"
end audioEnded

Here is the stack all set up. Load it up in LiveCode 10-dp-1 and press “Test” on the far right of the toolbar to try it in your browser. (Note, this will only work if you have Web deployment and are using LiveCode 10 dp-1).

“Wait” now Works

The LiveCode engine internally uses “wait” in quite a number of places. With that working in DP 1 the vast majority of scripts now run. Here are some examples of things that didn’t work before that work now.

Visual Effects

Visual effects now work on the web. You can try things like:

on mouseUp
  visual effect dissolve slow
  go next card
end mouseUp

on mouseUp
  hide me
  show me with visual effect “iris” close slow
end mouseUp

Setting Images from URLs

Setting an image to contain content at a given URL now works. Use this feature to keep your stack size small and only load images on demand as a user needs to see them.

on mouseUp
  set the filename of image 1 to "https://quartzadmin.on-rev.com/newdarklogo.png"
end mouseUp

Note that by default you’ll need to host the image on the same domain as you upload your web app to as there is a security setting in most browsers that prevents you making a request like that across domains. If you’re testing locally you may want to set up your hosted images not to have that policy so it is easier to work with them. The image above has been set up so it will work anywhere so you can try it out.

The Move Command

While “move without waiting” worked in the previous incarnation, LiveCode 10 now supports all forms of the “move” command. For example:

  move last button to the points of graphic 1

Now works as expected.

Coming in Future DPs

Hello CSS. (Goodbye, Motif.)

Those of you that have used LiveCode for a while know that deep in the engine there is an old default theme called “Motif”, which harks back to the days of the engine’s first incarnation on Unix. The engine uses it as a fallback when it doesn’t have a newer theme for a given control. In LiveCode 10 this capability will be retired.

The engine is moving to a CSS model to render controls. That will allow us to readily adopt great CSS for rendering objects. This has a number of benefits, not least that Web and Mobile controls will look the same as in the IDE, or render using either their own platform specific CSS theme (which will also be viewable in the IDE obviously). It will also tie with the move to native in-browser rendering.

In Progress

We’re currently working on making the player, map, browser and camera controls work properly within a browser and without changes to your LiveCode code. Audio recording is also coming (and will work the same on all platforms in 10).

On a non-web-related note, M1 Mac support is still planned in the 10 DP series. We’ve also fixed a number of your top-rated bugs, including a patch for the Script Editor Performance issues some of you have reported, and working in the IDE on multiple monitors. And we’re almost ready to include the new Chart widget.

Web Camp

We’ll be exploring all the features that work today and are coming in a series of Web Camp webinar workshops in the coming months. We’ve just published the schedule for this, view it and sign up here.

Stay tuned to this blog for more on LiveCode 10 shortly.