easycoder · easycoder · Jun 23, 2020 · Jun 23, 2020
diff --git a/iwsy/demo.html b/iwsy/demo.html
@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/iwsy.js'></script>
+	<script src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/iwsystart.js'></script>
+  </head>
+
+  <body style="margin:0;padding:0">
+
+    <div id="iwsy-container" style="position:absolute;top:0;left:0;width:100%;height:100%;background:black">
+    <img src="https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/resources/img/fullscreen.png" style="width:50%;height:50%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)"/>
+    </div>
+    <pre id="iwsy-script" style="display:none">https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/resources/scripts/demo.json</pre>
+
+  </body>
+</html>
diff --git a/iwsy/iwsy.js b/iwsy/iwsy.js
@@ -595,11 +595,6 @@ const IWSY = (playerElement, scriptObject) => {
         }
     };
 
-    // Embed another script
-    const embed = step => {
-        step.next();
-    };
-
     // Restore the cursor
     const restoreCursor = () => {
         player.style.cursor = `pointer`;
@@ -821,8 +816,7 @@ const IWSY = (playerElement, scriptObject) => {
         crossfade,
         transition,
         goto,
-        load,
-        embed
+        load
     };
 
     // Process a single step

diff --git a/iwsy/resources/ecs/content.txt b/iwsy/resources/ecs/content.txt
@@ -69,7 +69,6 @@ Restart:
     set attribute `src` of AddItem to `resources/icon/plus.png`
     on click AddItem
     begin
-!    	put prompt `Name of new content item:` with `new content` into ItemName
         set Item to object
         set property `name` of Item to `New content`
         set property `content` of Item to empty

diff --git a/iwsy/resources/ecs/help.txt b/iwsy/resources/ecs/help.txt
@@ -85,7 +85,7 @@ GetPage:
     begin
     	attach Player to `iwsy-embed`
         put attribute `data-url` of Player into Data
-        rest get Embed from Data
+        rest get Embed from Data cat `?v=` cat now
         put the position of the last `/` in Data into N
         add 1 to N
         put left N of Data into Data
@@ -101,7 +101,7 @@ GetPage:
 !	Decorate is called for every occurrence of ~...~ in the topic data
 Decorate:
     put the payload of DecoratorCallback into Payload
-    if Payload is `iwsy` put `<img src="resources/icon/iwsy.png" `
+    if Payload is `iwsy` put `<img src="resources/icon/iwsy.png?v=` cat now cat `" `
     	cat `style="height:0.8em;position:relative;top:0.1em" />` into Payload
     else if Payload is `clear` put `<div style="height:1px;clear:both"></div>` into Payload
     else
@@ -127,7 +127,7 @@ ProcessImage:
 	put the position of `:` in Data into N
     if N is -1
     begin
-        put `<img id="ec-image-` cat ImageCount cat `" src="` cat Data cat `" />` into Payload
+        put `<img id="ec-image-` cat ImageCount cat `" src="` cat Data cat `?v=` cat now cat `" />` into Payload
         add 1 to ImageCount
         return
     end
@@ -161,7 +161,7 @@ ProcessImage:
     	add 1 to N
     end
     put `<img id="ec-image-` cat ImageCount cat `" src="` cat Source
-    	cat `" style="` cat Style cat `" />` into Payload
+    	cat `?v=` cat now cat `" style="` cat Style cat `" />` into Payload
     add 1 to ImageCount
     return
 

diff --git a/iwsy/resources/ecs/steps.txt b/iwsy/resources/ecs/steps.txt
@@ -360,9 +360,8 @@ ASA2:
         take 1 from N
     end
     gosub to CreateNewStep
-    set element N of Steps to CurrentStep
+    set element SelectedStep of Steps to CurrentStep
 ASA3:
-    put -1 into SelectedStep
     set property `steps` of Presentation to Steps
     go to Restart
 

diff --git a/iwsy/resources/help/about.md b/iwsy/resources/help/about.md
@@ -6,12 +6,12 @@
 
 ## Contact us
 
-
+All enquiries should be sent to [info@iwannashowyou.com](mailto:info@iwannashowyou.com).
 
 ## Technical stuff
 
-The ~iwsy~ user interface is coded entirely in [EasyCoder](https://easycoder.github.io) scripts, which download, compile and run as they are needed. Everything is done in the browser; there is no build process for the web app. A small server-side REST module handles user registration and login and manages files created by users and stored on the server.
+The ~iwsy~ user interface is coded entirely in [EasyCoder](https://easycoder.github.io) scripts, which download, compile and run as they are needed. Everything is done in the browser; there is no build process for the web app. A small server-side REST module handles user registration and login and manages files created by users that are stored on the server.
 
-There are a little over 3000 lines of code in total. The largest code module (that runs the **Steps** panel opposite) is just over 1000 lines long and typically takes under 50ms to compile. Modules are loaded when they are first needed, so the load time of the web app is around 1.5 seconds (Pingdom Tools). The web app uses about 15MB of heap space while running.
+There are a little over 3000 lines of code in total. The largest code module (that runs the **Steps** panel opposite) is just over 1000 lines long and typically takes under 50ms to compile. Modules are loaded when they are first needed and the load time of the web app is around 1.5 seconds (Pingdom Tools). The web app uses about 15MB of heap space while running.
 
 We are keen to collaborate with anyone who may have ideas for improving the website and the range of features it provides. Enquiries should be made in the first instance to the email address given above.
diff --git a/iwsy/resources/help/action-chain.md b/iwsy/resources/help/action-chain.md
@@ -0,0 +1,7 @@
+~page:contents:Contents~
+
+# The `chain` action
+
+Large, dynamic presentations or slideshows may have dozens or even hundreds of steps, making then increasingly difficult to manage or even to visualize. However, presentations are linear entities that usually comprise a number of independent sections, one following another. If you are working on the introduction part of your show, the rest of it is of little immediate interest - it may as well be another presentation completely.
+
+To take advantage of this structual feature of the average presentation, ~iwsy~ provides the ~m:chain~ action, which terminates the current show, loads a new one and starts it running. As long as you provide a suitable "bridge" the effect is seamless. Each of the sections can be a full presentation in its own right and can be developed independently of all the others.
diff --git a/iwsy/resources/help/action-fade.md b/iwsy/resources/help/action-fade.md
@@ -18,4 +18,4 @@ When this action runs the blocks referenced are all faded at the same time. You
 
 Fades and other animated effects run at 25 frames/sec, as a compromise between visual smoothness and processing requirements.
 
-Next: ~page:action-crossfade:Crossfade block content~
+Next: ~page:action-crossfade:Crossfade~
diff --git a/iwsy/resources/help/action-pause.md b/iwsy/resources/help/action-pause.md
@@ -9,3 +9,5 @@ This action pauses the presentation for a given nmber of seconds.
 The **Action**, **Name** and **Label** properties are present for all actions.
 
 The **Duration** property is the time in seconds the pause should take.
+
+Next: ~page:action-chain:Chain~
diff --git a/iwsy/resources/help/contents.md b/iwsy/resources/help/contents.md
@@ -2,7 +2,11 @@
 
 # ~iwsy~ Help - Contents
 
-~page:quickstart:Quick-start tutorial~ **Beginners start here!**
+~page:quickstart:Quickstart tutorial~ **Beginners start here!**
+
+~page:quickstart2:Quickstart tutorial, part 2~
+
+~page:quickstart3:Quickstart tutorial, part 3~
 
 ~page:users:User registration and login~
 
@@ -14,16 +18,24 @@
 
 ## Actions
 
-~page:action-init:The **init** action~
+~page:action-init:The "init" action~
+
+~page:action-set-content:The "set content" action~
+
+~page:action-show-hide:The "show" and "hide" actions~
+
+~page:action-fade:The "fade up" and "fade down" actions~
+
+~page:action-crossfade:The "crossfade" action~
 
-~page:action-set-content:The **set content** action~
+~page:action-transition:The "transition" action~
 
-~page:action-show-hide:The **show** and **hide** actions~
+~page:action-pause:The "pause" action~
 
-~page:action-fade:The **fade up** and **fade down** actions~
+~page:action-chain:The "chain" action~
 
-~page:action-crossfade:The **crossfade** action~
+## Technical
 
-~page:action-transition:The **transition** action~
+~page:embed:How to embed a presentation~
 
-~page:action-pause:The **pause** action~
+~page:technical:Other technical stuff, statistics etc.~
diff --git a/iwsy/resources/help/embed.md b/iwsy/resources/help/embed.md
@@ -0,0 +1,36 @@
+~page:contents:Contents~
+
+# How to embed a presentation
+
+To embed a presentation in your own web page you just need the ~iwsy~ runtime engine and a presentation script. The best place to start is with a stand-alone web page, which is coded like this:
+<hr>
+```
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<script src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/iwsy.js'></script>
+	<script src='https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/iwsystart.js'></script>
+  </head>
+
+  <body style="margin:0;padding:0">
+
+    <div id="iwsy-container" style="position:absolute;top:0;left:0;width:100%;height:100%;background:black">
+    <img src="https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/resources/img/fullscreen.png" style="width:50%;height:50%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)"/>
+    </div>
+    <pre id="iwsy-script" style="display:none">https://cdn.jsdelivr.net/gh/easycoder/easycoder.github.io/iwsy/resources/scripts/demo.json</pre>
+
+  </body>
+</html>
+</html>
+```
+<hr>
+All of the resources in this demo are loaded on demand from the CDN attached to the GitHub repository for ~iwsy~, which is part of [EasyCoder](https://easycoder.github.io).
+
+The ~m:head~ of the document requests 2 scripts. One is the ~iwsy~ runtime engine; the other is a launcher for the presentation, which waits for the page to load then starts things up.
+
+The ~m:body~ contains a ~m:&lt;div&gt;~ with an ID that is specific to ~iwsy~. Inside this is a graphic that holds instructions on how to run the presentation. Then finally there's a hidden ~&lt;pre&gt;~ element that holds the URL of the presentation script.
+
+## Doing your own embedding
+
+When you want to embed a presentation, some of the same things are needed. The ~iwsy~ engine is always required but the launcher function will be probably be provided by your own page code. You will need to study the code in ~m:iwsystart.js~ to see how to do this, but it should be no more than a single page of vanilla JavaScript. The container is the ~m:&lt;div&gt;~ on your page in which you want the show to run. The script can be provided in any way you like; it's just a text file that is passed to ~iwsy~ on startup.
diff --git a/iwsy/resources/help/iwsy.md b/iwsy/resources/help/iwsy.md
@@ -1,15 +1,27 @@
 ~page:contents:Contents~
 
+**Beginners** - See our ~page:quickstart:quickstart tutorial~
+
 # ~iwsy~ - I Wanna Show You 
 
-I Wanna Show You (~iwsy~, pronounced "You-zee" as an approximation to the initials) is an online presentation package built to deliver slideshows that either run under manual control or unattended. Instead of being a PC application that's tied to the desktop, ~iwsy~ is entirely browser-based. ~iwsy~ presentations can run here in this web app, they can be embedded in other web pages or they can run as independent web pages.
+I Wanna Show You (~iwsy~, pronounced "You-zee" as an approximation to the initials) is a web app you can use to create slideshows that run under either manual control or unattended. Instead of being a PC application that's tied to the desktop, ~iwsy~ is entirely browser-based. ~iwsy~ presentations can run here in this web app, they can be embedded in other web pages or they can run as independent web pages.
+
+## An example
+
+Here is a simple show that forms the basis of our ~page:quickstart:quickstart tutorial~:
+
+~embed:/resources/users/2020/160/1/scripts/demo.json~
 
 ## Quickstart tutorial
 
-These help pages contain everything there is to know about ~iwsy~, but there's a lot to read. Most people just want to get started quickly, so we have a built-in ~page:quickstart:quick-start tutorial~ where you can create a simple presentation - a few slides with text and pictures - in just a few minutes. Once you've completed this first step you'll have a pretty good idea of what ~iwsy~ is all about, and the rest of the help pages won't be nearly as intimidating.
+These help pages contain everything there is to know about ~iwsy~, but there's a lot to read. Most people just want to get started quickly so we built a ~page:quickstart:quickstart tutorial~ where you can create a simple presentation - some slides with text and pictures - in an hour or so. Once you've completed this first step you'll have a pretty good idea of what ~iwsy~ is all about, and the rest of the help pages won't be nearly as intimidating.
 
 ## Feature summary
 
+There are many slideshow/presentation packages, most being quite similar to PowerPoint. The aim here is not to create another identical one but to tackle one or two of the things the others don't do so well. Top of the list is the ability to embed a show into another web page in a seamless manner. The development of ~iwsy~ is driven by the desire to meet this need rather than to excel at formal presentations.
+
+We are also working on a range of features for making the pages themselves dynamic. This covers a number of areas such as transitions, "Ken Burns" effects and the use of audio.
+
 The basic features of ~iwsy~ are:
 
  - A step editor, where you create a set of steps that together form your presentation
@@ -24,16 +36,6 @@ The basic features of ~iwsy~ are:
 
 ## Background
 
-~iwsy~ started with a need to embed a slide show in a web page, but rather than just a sequence of pictures I wanted something between that and a video. Videos are time-consuming to make and almost impossible to alter when changes happen to the things being described. Presentation packages such as PowerPoint, on the other hand, lack extensive animation features and are hard to embed in a web page. It seemed to me there was room between the two for a new type of product, and once the idea took hold it was hard to put down. It coincided with the Coronoavirus pandemic, which enforced solitude at home and provided the time for development to take place.
-
-Much of my previous work in recent years has been in building websites, often of a specialized nature with unusual interactive needs. Not having an exceptional intellect I have difficulty with complexity and this has become something of an obsession over the years. Rather than face the issue directly I devised a programming language suited to those who, like myself, regard excessive complexity as something to be avoided at all costs. The language, called EasyCoder, is itself written in JavaScript and has been applied to a number of web projects. I have yet to find a user interface that it cannot handle.
-
-EasyCoder takes plain text scripts and compiles them in the browser. This is very quick, typically taking less than 50ms for a 1000-line script. EasyCoder scripts tend to be much shorter than their JavaScript equivalents, though by how much depends on the work being done. More importantly, they are readable by any intelligent person who understands the target domain. The basics of the language can be picked up in a day, which compares with the 3 or 4 months needed to learn React or Angular on top of JavaScript itself. So the long term maintenance prospects of an EasyCoder website such as ~iwsy~ are good as there will always be someone around who can learn it quickly.
-
-The other main advantage of EasyCoder is that it doesn't have a build process. Scripts are loaded directly into the browser and compiled there. The only build tool needed is a text editor.
-
-So that's the environment for ~iwsy~. All of the website UI is coded in EasyCoder. The presentation engine itself is just under 1000 lines of vanilla JavaScript and can be used independently of the ~iwsy~ website. This ensures performance is as good as it can get without moving to WebAssembly, though the latter is always an option.
-
-The project is hosted on GitHub as part of EasyCoder and enquiries are welcome from other programmers who are interested in contributing. The range of transition effects is currently limited so there is considerable scope for extension. An outline plug-in mechanism is also present so it should be possible to enhance the system without major disruption each time.
+~iwsy~ started at the beginning of May 2020 with a need to embed a slide show in a web page, but rather than just a sequence of pictures I wanted something between that and a video. Videos are time-consuming to make and almost impossible to alter when changes happen to the things being described. Presentation packages such as PowerPoint, on the other hand, are very flexible when it comes to making changes but lack extensive animation features and are hard to embed in a web page. It seemed to me there was room between the two for a new type of product, and once the idea took hold it was hard to put down. It coincided with the Coronoavirus pandemic, which enforced solitude at home and provided the time for development to take place.
 
 ~page:contents:Contents~
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,4 +18,4 @@ When this action runs the blocks referenced are all faded at the same time. You

		Fades and other animated effects run at 25 frames/sec, as a compromise between visual smoothness and processing requirements.

		Next: ~page:action-crossfade:Crossfade block content~
		Next: ~page:action-crossfade:Crossfade~
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,5 @@ This action pauses the presentation for a given nmber of seconds.
		The Action, Name and Label properties are present for all actions.

		The Duration property is the time in seconds the pause should take.

		Next: ~page:action-chain:Chain~