Move quickstart resources

iwsy/resources/help/iwsy.md

@@ -10,7 +10,7 @@ I Wanna Show You (~iwsy~, pronounced "You-zee" as an approximation to the initia
 
 ## An example
 
-Here is a simple show that forms the basis of our ~page:quickstart:quickstart tutorial~:
+Our ~page:quickstart:quickstart tutorial~ is a simplified version of the following demo:
 
 ~embed:/resources/users/2020/160/1/scripts/demo.json~
 

iwsy/resources/help/quickstart.md

@@ -12,11 +12,11 @@ The first thing to do is define a _block_. This is an area of the screen having
 
 Click the **Blocks** button over in the right-hand panel, then click the ~img:/resources/icon/plus.png:icon~ at the right-hand end of the title row. Now click the button titled "New Block". You should get this:
 
-~img:resources/users/2020/160/1/images/quickstart/newblock.png:100%~
+~img:resources/help/quickstart/newblock.png:100%~
 
 Most of these default values are fine as they are; they describe a block that occupies the whole window area. Let's just change the ~m:name~ property to ~m:background~ and the ~m:background~ property to ~m:url('resources/img/quickstart/SemoigoDawn.jpg')~. When the presentation runs, the effect will be to display a full-size image. This is what the panel should look like now:
 
-~img:resources/users/2020/160/1/images/quickstart/first-block.png:100%~
+~img:resources/help/quickstart/first-block.png:100%~
 
 Now let's save our work. There's a **Save** button in the editor panel but this just anchors your changes and updates titles etc. You really need to save the entire project. If you are registered it will go to the ~iwsy~ website, but if not it will be saved to your browser's own storage space. Type the name ~m:quickstart~ in the **Script name** box under the main button bar, then click the ~img:/resources/icon/save.png:icon~ icon in the button bar. It's highly recommended that you click this button regularly so you don't lose your work in the event of something going wrong.
 
@@ -26,33 +26,33 @@ The effect I want to create is for the image to fade up out of the screen backgr
 
 The ~m:init~ step provides information about the container to be used for the show. Its default values are fine so there's no need to make any changes here. So we'll add a second step. Click the ~img:/resources/icon/plus.png:icon~ to add the new step, then click the **New step** button. You should see this:
 
-~img:resources/users/2020/160/1/images/quickstart/newstep.png:100%~
+~img:resources/help/quickstart/newstep.png:100%~
 
 Click in the Action box and a drop-down list appears of all the available step types:
 
-~img:resources/users/2020/160/1/images/quickstart/actions.png:100%~
+~img:resources/help/quickstart/actions.png:100%~
 
 We'll start with a short pause. When the browser switches to full-screen mode it displays a message for a couple of seconds so we'd like to wait for this to disappear before starting our show. Choose ~m:pause~, then set the ~m:Name~ property to ~m:pause before starting~. We'll have a 2-second pause so set the duration to 2 then click **Save**.
 
 Now click ~img:/resources/icon/plus.png:icon~ again to add another step. It too starts as **New Step** so click that. As before, click to open the ~m:Action~ list. We want to set up (initialize) our background block,so choose ~m:set~ ~m:content~. Set the ~m:Name~ property to ~m:set up background~, then click **Save**. It should now look like this:
 
-~img:resources/users/2020/160/1/images/quickstart/setup-background.png:100%~
+~img:resources/help/quickstart/setup-background.png:100%~
 
 The ~m:set~ ~m:content~ action lets you set up any number of blocks at the same time, though here we only have one. Click the ~img:/resources/icon/plus.png:icon~ in the **Blocks** row, then click the empty selector under the **Blocks** title. A drop-down list appears with the name of the block we created earlier:
 
-~img:resources/users/2020/160/1/images/quickstart/select-background-block.png:100%~
+~img:resources/help/quickstart/select-background-block.png:100%~
 
 so select that. The block has no text, just the background defined in the block itself, so leave the **Content** drop-down list empty. Click the **Save** button for this step, then click the ~img:/resources/icon/save.png:icon~ icon in the button bar.
 
 ## Fading up
 
 Now we have a block with a background, so let's fade it up. Click ~img:/resources/icon/plus.png:icon~ again or click the **Add step after** button. In the new step, open the editor, select the **fade up** action and give it the name ~m:fade up background~. It should look like this:
 
-~img:resources/users/2020/160/1/images/quickstart/fade-up-background.png:100%~
+~img:resources/help/quickstart/fade-up-background.png:100%~
 
 This action lets you fade up as many blocks as you like simultaneously, so it provides you with the means to add a list. Here we only have a single block so we'll add that. Click the ~img:/resources/icon/plus.png:icon~ in the **Blocks** row, then click the empty selector in the new row and choose **background** again. Finally set the duration of the fade to a suitable value; say 2 (seconds). You can use decimal fractions here if you need to. It should now look like this:
 
-~img:resources/users/2020/160/1/images/quickstart/fade-up-background2.png:100%~
+~img:resources/help/quickstart/fade-up-background2.png:100%~
 
 If you haven't saved your project recently, do it now.
 

iwsy/resources/help/quickstart2.md

@@ -8,7 +8,7 @@ After the background has appeared, let's hold it on the screen for a couple of s
 
 We're going to bring up some text in the center of the screen, zooming it from a point below the center line. This presentation is to be some slides about villages in Liguria, the region of Italy that borders the northern Mediterranean, so let's create our first content item. Click the **Content** button and then the ~img:/resources/icon/plus.png:icon~ icon. Open the editor for the new item; it should look like this:
 
-~img:resources/users/2020/160/1/images/quickstart/new-content.png:100%~
+~img:resources/help/quickstart/new-content.png:100%~
 
 Set the name to ~m:Ligurian villages~ then put the same text into the empty box. As usual, save your work.
 
@@ -18,11 +18,11 @@ The title will end up in the middle of the screen, but to make it more challengi
 
 Click the **Blocks** button and create 2 new blocks (I'm assuming you know how to do that; we covered it in ~page:quickstart:Part 1~). Make the first one look like this:
 
-~img:resources/users/2020/160/1/images/quickstart/main-title.png:100%~
+~img:resources/help/quickstart/main-title.png:100%~
 
 and the other like this:
 
-~img:resources/users/2020/160/1/images/quickstart/center-title.png:100%~
+~img:resources/help/quickstart/center-title.png:100%~
 
 The differences are in the ~m:top~, ~m:height~ and ~m:fontSize~ values. The transition effect you'll be using animates the text as it moves from the first to the second state. It can also change the color of the text as it goes, but we're not doing that here.
 
@@ -32,23 +32,23 @@ You may like to note that in the **Blocks** panel each block has a ~img:resource
 
 Now go to the **Steps** panel. The first thing to do is to initialize the **main title** block by adding it to the set of blocks that are initialized in the **set up background** step, so click this step to open its editor:
 
-~img:resources/users/2020/160/1/images/quickstart/setup-background.png:100%~
+~img:resources/help/quickstart/setup-background.png:100%~
 
 Click the ~img:resources/icon/plus.png:icon~ in the **Blocks** row to add a new block. Select the **main title** block and then select **Ligurian villages** from the **Content** drop-down list. Change the name of the step to **set up blocks** and the result should be:
 
-~img:resources/users/2020/160/1/images/quickstart/setup-blocks-2.png:100%~
+~img:resources/help/quickstart/setup-blocks-2.png:100%~
 
 If you prefer, you can add a separate step to initialize each block, but in this case we'll do them all at the same time, in one place.
 
 The animated text effect is done with a **transition** action. Add a new step to your presentation, choose the action type **transition** and call it **zoom up title**. Set **block** to **main title** and **target** to **center title**:
 
-~img:resources/users/2020/160/1/images/quickstart/zoom-title.png:100%~
+~img:resources/help/quickstart/zoom-title.png:100%~
 
 Now you can run your presentation again. The background will fade up first, then after a couple of seconds the text will zoom up.
 
 Add another pause, say 3 seconds, then another action, selecting **fade down**. Call it **fade down title and background**. Add 2 blocks, picking **main title** and **background**. Set the duration to 2 seconds. You should have this:
 
-~img:resources/users/2020/160/1/images/quickstart/fade-down.png:100%~
+~img:resources/help/quickstart/fade-down.png:100%~
 
 Finally, add another pause of a second.
 

iwsy/resources/help/quickstart3.md

@@ -9,58 +9,58 @@ Click the **Content** button opposite, then click ~img:resources/icon/plus.png:i
 > ~m:Cinque Terre - Manarola~
 > ~m:Romantic Manarola – a hamlet of Riomaggiore – spills down a ravine to the wild and rugged Cinque Terre coastline. Besides its natural beauty, the village is also famous for its sweet Sciacchetrà wine, celebrated by Gabriele D'Annunzio in one of his amazing poems. Manarola has brightly painted houses, priceless medieval relics and a tiny harbour that features a boat ramp and a swimming hole; to the north, on the way to Corniglia, there's a stunning viewpoint (Punta Bonfiglio) where visitors can enjoy a drink in a bar between the village’s cemetery and the sea. Everywhere is the scent of the lemon trees, thyme, rosemary and Mediterranean maquis; the grapevines – grown on terraces – embrace the village in a tight hug.~
 
-~img:resources/users/2020/160/1/images/quickstart/manarola-content.png:100%~
+~img:resources/help/quickstart/manarola-content.png:100%~
 
 As usual, save your work, then click the **Blocks** button. We'll have a 2-column layout with text on one side and a photo on the other. Create 2 new blocks and edit them so they look like this:
 
-~img:resources/users/2020/160/1/images/quickstart/manarola-text.png:100%~
+~img:resources/help/quickstart/manarola-text.png:100%~
 
-~img:resources/users/2020/160/1/images/quickstart/manarola-photo.jpg:100%~
+~img:resources/help/quickstart/manarola-photo.jpg:100%~
 
 Now Click the **Steps** button. We need a **set content** step; we could add to the one we created at the start but sometimes it makes more sense to do it where it will be used. Add a new step; pick the **set content** action, call it **setup manarola** then add a block; pick **manarola text** and for its content pick **manarola**. Make the step look like this:
 
-~img:resources/users/2020/160/1/images/quickstart/setup-manarola.png:100%~
+~img:resources/help/quickstart/setup-manarola.png:100%~
 
 This operation may need time to complete, so let's do it before the block is visible. Add a **pause** of 1 second.
 
 Now add another new step and get it looking like this:
 
-~img:resources/users/2020/160/1/images/quickstart/fade-up-manarola.png:100%~
+~img:resources/help/quickstart/fade-up-manarola.png:100%~
 
 This step operates on a pair of blocks, which will fade up concurrently. Note that the fade animation will not wait for the content to be ready before starting. Where text has embedded images it takes time to download and render them; this is done at the **set content** step so it's always best to have a pause just after to allow the processing work to complete.
 
 Now run your presentation. If everything is correct it should end up like this:
 
-~img:resources/users/2020/160/1/images/quickstart/manarola-1.jpg:100%~
+~img:resources/help/quickstart/manarola-1.jpg:100%~
 
 This is OK but obviously needs a little tweaking here and there. Start with the **manarola text** block and adjust it a little, adding a text margin on the left (which also adds the same on the right):
 
-~img:resources/users/2020/160/1/images/quickstart/manarola-text-2.png:100%~
+~img:resources/help/quickstart/manarola-text-2.png:100%~
 
 Next, go to the **Content**, select the **Manarola** item and put `"## "` - that's 2 # characters and a space - in front of the first word (CINQUE). Then put a line break after MANAROLA. This will turn the first line into a level 2 header.
 
 Finally, add the following just in front of the word Romantic, at the start of the text:
 
-~m:~img:resources/users/2020/160/1/images/quickstart/cinqueterre.jpg:left 50%~~
+~m:~img:resources/help/quickstart/cinqueterre.jpg:left 50%~~
 
 This adds an image into the text, using a custom addition to the MarkDown syntax. Everything between the 2 tildes (~) is treated as a special command. It starts with **img:**, which signifies it's an image tag. The URL of the image then follows, after which is another colon then some special tags, in this case one to force the image to "float" to the left and the other being to give it 50% of its container width. Those who are familar with CSS should have little trouble seeing what's happening here. The markup causes HTML to be generated to perform the desired task, but you can in fact insert HTML directly into the file if you need some feature we don't offer. (Though this somewhat negates the purpose of using MarkDown in the first place.)
 
 Run the presentation again:
 
-~img:resources/users/2020/160/1/images/quickstart/manarola-2.jpg:100%~
+~img:resources/help/quickstart/manarola-2.jpg:100%~
 
 Ah, this is a lot better. You may want to adjust the size of the font (in the **manarola text** block) so it fills the screen better, but you'll find you get different results on different browsers. For some reason, Chrome gives smaller text than Firefox does for the same numerical value.
 
 The rest of the items are similar to what we already have. Create another **Content** item called **Apricale**, with this content:
 
 > ~m:## Provincia di Imperia - Apricale~
-> ~m:~img:resources/users/2020/160/1/images/quickstart/imperia.jpg:left 50%~Apricale is a picturesque small village to the north-east of Dolceacqua in western Liguria and surrounded by forested hills, included on the list of the 'most beautiful villages in Italy'.~
+> ~m:~img:resources/help/quickstart/imperia.jpg:left 50%~Apricale is a picturesque small village to the north-east of Dolceacqua in western Liguria and surrounded by forested hills, included on the list of the 'most beautiful villages in Italy'.~
 > ~m:Just one of several attractive hill villages in this region, Apricale is compact and easy to explore. Most of the sights of interest are on or very close to the square in the centre of the village, although of course you will also want to follow the main street along the ridge to enjoy more views and to appreciate the medieval character of Apricale."~
 
 Create a third village **Content** item called **Noli**:
 
 > ~m:## ## Provincia di Savona - Noli~
-> ~m:~img:resources/users/2020/160/1/images/quickstart/savona.jpg:left 50%~The seaside village of Noli lies a few km west of Savona, in the central part of Liguria. Although popular with Italians it's scarcely known to anyone else outside of the area. It's a beautiful quiet and relatively unspoiled gem, with a good beach and right behind it the old town with pedestrian-only streets and a sprinkling of shops and restaurants, all preserving the ancient architecture and topped by a small castle. Although it lies on the main "Via Aurelia" coast road, all the through traffic now goes on the Autostrada, leaving Noli free from noisy vehicles. The coast road is also spectacular and it's well worth forsaking the motorway to explore the coastline between Savona and the busy resorts of Finale Ligure and Loano."~
+> ~m:~img:resources/help/quickstart/savona.jpg:left 50%~The seaside village of Noli lies a few km west of Savona, in the central part of Liguria. Although popular with Italians it's scarcely known to anyone else outside of the area. It's a beautiful quiet and relatively unspoiled gem, with a good beach and right behind it the old town with pedestrian-only streets and a sprinkling of shops and restaurants, all preserving the ancient architecture and topped by a small castle. Although it lies on the main "Via Aurelia" coast road, all the through traffic now goes on the Autostrada, leaving Noli free from noisy vehicles. The coast road is also spectacular and it's well worth forsaking the motorway to explore the coastline between Savona and the busy resorts of Finale Ligure and Loano."~
 
 Then create 2 more pairs of **Blocks** similar to the ones for **Manarola**, calling them **apricale text**, **apricale photo**, **noli text** and **noli photo**. The 3 text blocks are in fact identical; the photo blocks only differ by the name of the image file; these 2 are **apricale.jpg** and **noli.jpg**.