Add "Pan and Zoom"

Author: graham-trott

properties.txt

@@ -0,0 +1 @@
+password=$2y$10$AQBbicv40Z3t232trs13/OdOfPBhz9w/uA3J0Nz9txPwEWTXSgkgO

resources/codex/code/step16.ecs

@@ -29,7 +29,7 @@
     set the style of MapPanel to `width:100%;flex:1`
 
     create Map in  MapPanel
-    set the key of Map to reverse `QyqunMJgsVvObUg7Rc5TpE0M_9IHWnFLBySazIA`
+    set the key of Map to reverse `QvJu1ytaD1igrbEsRX69Okgkgyoh5eWTDySazIA`
     set the latitude of Map to Latitude
     set the longitude of Map to Longitude
     set the zoom of Map to Zoom

resources/codex/code/step17.escs renamed to resources/codex/code/step17.ecs

@@ -0,0 +1,103 @@
+!	Pan and Zoom
+
+    div Div
+    img Image
+    variable AspectW
+    variable AspectH
+    variable Width
+    variable Height
+    variable StartW
+    variable EndW
+    variable StartL
+    variable EndL
+    variable StartT
+    variable EndT
+    variable StepL
+    variable StepW
+    variable StepT
+    variable W
+    variable L
+    variable T
+    variable N
+    variable Steps
+    
+!	Set the aspect ratio of the container
+    put 16 into AspectW
+    put 9 into AspectH
+
+!	Create the container
+    create Div
+    set the style `position` of Div to `relative`
+    set style `margin` of Div to `1em 0 0 5%`
+    set style `width` of Div to `90%`
+    put the width of Div into Width
+    multiply Width by AspectH giving Height
+    divide Height by AspectW
+    set style `height` of Div to Height cat `px`
+    set style `overflow` of Div to `hidden`
+
+!	Test values
+	put 0 into StartL
+    put -120 into EndL
+    put 0 into StartT
+    put -140 into EndT
+    put 100 into StartW
+    put 460 into EndW
+	put 200 into Steps
+
+!	Prepare to do the pan/zoom
+    take StartL from EndL giving L
+    multiply L by 1000
+    divide L by Steps giving StepL
+    take StartT from EndT giving T
+    multiply T by 1000
+    divide T by Steps giving StepT
+    take StartW from EndW giving W
+    multiply W by 1000
+    divide W by Steps giving StepW
+
+!	Create the image
+	create Image in Div
+    set style `position` of Image to `absolute`
+    set attribute `src` of Image to `/resources/img/demo0.jpg`
+    set style `left` of Image to StartL cat `%`
+    set style `top` of Image to StartT cat `%`
+    set style `width` of Image to StartW cat `%`
+    
+    put StartL into L
+    multiply L by 1000
+    put StartT into T
+    multiply T by 1000
+    put StartW into W
+    multiply W by 1000
+
+    wait 1
+
+	while true
+    begin
+        wait 1
+        put 0 into N
+        while N is less than Steps
+        begin
+            add StepL to L
+            add StepT to T
+            add StepW to W
+            set style `left` of Image to `calc(` cat L cat `% / 1000)`
+            set style `top` of Image to `calc(` cat T cat `% / 1000)`
+            set style `width` of Image to `calc(` cat W cat `% / 1000)`
+            add 1 to N
+            wait 2 ticks
+        end
+        wait 1
+        while N is greater than 0
+        begin
+            take 1 from N
+            take StepL from L
+            take StepT from T
+            take StepW from W
+            set style `left` of Image to `calc(` cat L cat `% / 1000)`
+            set style `top` of Image to `calc(` cat T cat `% / 1000)`
+            set style `width` of Image to `calc(` cat W cat `% / 1000)`
+            wait 2 ticks
+        end
+    end

resources/codex/code/step19.ecs

@@ -1,4 +1,5 @@
 # Solitaire #
+
 Solitaire is a generic name for a number of different activities/games/exercises for a single player. The most common variants are probably card games, but one of the most traditional is a game played on a wooden board having an array of holes initially filled with pegs. One hole is initially left empty and the rules are very simple; when you take a peg and jump over its neighbor into an empty space the neighbor is removed from the board. The challenge is to remove all but one peg. It's surprisingly difficult.
 
 Here we have an electronic version of Solitaire. Pegs are moved using drag and drop, as outlined in the previous page, but here it gets somewhat more complicated. Note: Although this script will run on a mobile device it is less than ideal as a finger tends to obscure the view of where the peg is being dragged, and there seems to be no reliable way to stop the browser dragging the entire screen contents along with the item picked. There is a version of this script at [https://easycoder.software/solitaire/](https://easycoder.software/solitaire/) that uses selection instead of dragging and is better suited to mobile browsers.
@@ -25,4 +26,4 @@ All that remains to be done is to check if there are any more possible moves, an
 
 Eagle-eyed programmers might notice that the algorithms for finding valid moves are implemented twice but differently. This is largely because the script is a derivative of an earler version (that didn't use drag and drop). The technique used to test if a given peg can be moved is more concise but I decided to leave as it was the code that checks if there are any moves available. Each technique uses a number of arithmetical calculations and it demonstrates how there are often 2 or more ways to achieve any given goal.
 
-~next:...~
+~next:Pan and Zoom~

resources/codex/md/step18.md

@@ -0,0 +1,21 @@
+# Pan and Zoom #
+
+When TV programmes show a series of images they often apply something called the "Ken Burns" Effect. This causes each image to slowly pan and/or zoom before dissolving into the next, giving a sense of movement. The effect was extensively used by the American documentarian after whom it was named.
+
+In this tutorial step we'll just deal with the pan and zoom; the dissolve can wait till later.
+
+~copy~
+
+The code here is designed to work with any size of image container, so all dimensions are calculated as a percentage of the parent element. ~ec~ only works with integers so we deal with floating point values by exploiting the fact that each one is just one integer divided by another. So the first thing is to define the aspect ratio of the main container as a width and a height component. Then we create the container, giving it 90% of the width of its parent. We can immediately ask the system how wide this is in pixels, then we calculate the corresponding height and set it. We also get it to hide any content that falls outside its boundary.
+
+Next we set up some test values. All except the last one are percentages of the width or height of the container and they define the values at the start of the animatuion and at the finish. L is "left", T is "top" and W is "width". The final value is the number of steps in the animation.
+
+Next we calculate the sizes of each step for the left, top and width. Because these are actually fractional values we scale everything by a large value (1000) to maintain precision in the division operations. You'll see shortly how this is used to achieve a smooth pan or zoom.
+
+Now we can create the image, give it a source URL and set its size and position to the initial values in the test data. The position style attribute is ~code:absolute~ so we can use specific dimensions inside the container.
+
+Next we create high-precision working variables L, T and W, initialised to the starting values.
+
+~code:while true~ ensures that the animation will run forever. Inside, each step of the animation adds the step values to the working variables and uses these to set the location and size of the image. Here we exploit a very clever feature of the browser's style processing engine, by giving it a calculation to do. To explain: if we ask for a position or size value using a calculation such as ~code:calc(142581px / 1000)~ the actual value used will be 142.581 pixels; a fractional value. The amazing thing is that the browser actually uses this value to position the image. If it were to just use the nearest integer the image would jitter badly as it moves or scales, but with the fractional value the jitter disappears and the movement is smooth. This technique works on all the browsers I've tested.
+
+~next:...~

resources/codex/md/step19.md

@@ -808,7 +808,7 @@ Decorate:
   end
   else if left 5 of Payload is `code:`
   begin
-  	put `<span style="font-family:mono;font-size:90%;color:darkred">`
+  	put `<span style="font-family:Courier New;color:darkred">`
   	cat from 5 of Payload into Payload
     put Payload cat `</span>` into Payload
   end
@@ -988,5 +988,5 @@ GetPassword:
   return
 
 SetPasswordValid:
-	set PasswordValid
+  set PasswordValid
   return

resources/ecs/codex.ecs

@@ -128,7 +128,14 @@
     	"index":19,
         "file":"step18",
         "title":"Solitaire",
-        "prev":"step17"
+        "prev":"step17",
+        "next":"step19"
+    },
+	"step19": {
+    	"index":20,
+        "file":"step19",
+        "title":"Pan and Zoom",
+        "prev":"step18"
     },
 	"gap": {
     	"index":50,

resources/ecs/pages.json

@@ -26,5 +26,4 @@ Also look at  some of our examples (/SIDEBAR/). These are complete web pages you
 
 After that it's time to add an ~ec~ script to your web page. The links /SIDEBAR/ include examples that should help you understand what you need to add to your website. If you need further help you can contact us in our [Slack](https://easycoder-software.slack.com/) channel. Don't be afraid to ask; everybody was a beginner once.
 
-All the source code for EasyCoder is in our repository. Go to [Github](https://github.com) and search for "easycoder".
-
+All of the source code of this website can be found in the [EasyCoder Repository](https:github.com/easycoder/easycoder.github.io).

resources/md/home.md

@@ -0,0 +1,13 @@
+!	Select
+
+debug step
+	variable List
+    select Select
+	set List to array
+    append `One` to List
+    append `Two` to List
+    append `Three` to List
+    print List
+    create Select
+    set Select from List
+    stop

resources/scripts/select

@@ -0,0 +1,7 @@
+!	Test
+
+	variable V
+
+	set V to array
+	print V
+	exit