Commits: 11
Remove config parameter from the ui function of Examples.AnimatedTree.
The model parameter already contains config. No need to pass it as a separate parameter to ui.
Co-Authored-By: Tadeusz Łazurski tadeusz@lazurski.pl
index f6efba1..cdfa56d 100644
--- a/src/Examples/AnimatedTree.elm
+++ b/src/Examples/AnimatedTree.elm
@@ -51,8 +51,8 @@ init flags =
= )
=
=
-ui : Examples.Tree.Config -> Model -> Element Msg
-ui config model =
+ui : Model -> Element Msg
+ui model =
= let
= tree =
= { config | axiom = { axiom | age = model.age } }
@@ -64,6 +64,9 @@ ui config model =
= else
= playButton
=
+ config =
+ model.config
+
= axiom =
= config.axiom
=
@@ -95,7 +98,7 @@ type Msg
=view : Model -> Html Msg
=view model =
= model
- |> ui Examples.Tree.defaults
+ |> ui
= |> Element.layout
= [ Element.width Element.fill
= , Element.height Element.fillMerge branch 'master' into rewrite-content-ellie
Add resetButton to Animated tree.
index cdfa56d..c315a72 100644
--- a/src/Examples/AnimatedTree.elm
+++ b/src/Examples/AnimatedTree.elm
@@ -58,11 +58,14 @@ ui model =
= { config | axiom = { axiom | age = model.age } }
=
= controls =
- if model.play then
- pauseButton
+ Element.row []
+ [ if model.play then
+ pauseButton
=
- else
- playButton
+ else
+ playButton
+ , resetButton
+ ]
=
= config =
= model.config
@@ -81,6 +84,12 @@ ui model =
= { onPress = Just Pause
= , label = Element.text "Pause"
= }
+
+ resetButton =
+ Input.button []
+ { onPress = Just Reset
+ , label = Element.text "Reset"
+ }
= in
= Element.column
= [ Element.width Element.fill, Element.height Element.fill ]
@@ -93,6 +102,7 @@ type Msg
= = Play
= | Pause
= | Animate Float
+ | Reset
=
=
=view : Model -> Html Msg
@@ -132,6 +142,11 @@ update msg model =
= , Cmd.none
= )
=
+ Reset ->
+ ( { model | age = model.minAge }
+ , Cmd.none
+ )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =Change default Editor path to Elm
This is how it's presented in Ellie.
index a25c922..a9a249a 100644
--- a/src/Editor.elm
+++ b/src/Editor.elm
@@ -38,7 +38,7 @@ type alias Colors =
=
=defaults : Config
=defaults =
- { path = "src/Main.elm"
+ { path = "Elm"
= , colors =
= { primary = Element.rgb 0 0 0
= , secondary = Element.rgb 0.8 0.8 0.8Edits to preparation page
index e2d25b1..41bf6c6 100644
--- a/content/preparation.txt
+++ b/content/preparation.txt
@@ -1,14 +1,31 @@
=| Title
= Before the course begins
=
-During the workshop you will learn how to write and publish a computer program running in a web browser. Computer Programs are represented as text, so the text editor is the most fundamental tool of a programmer. We are going to use the Elm live editor called Ellie {Link|ellie-app.com|url=https://ellie-app.com} to write our code. When you open Ellie there will be a code, but you don't need that and please delete it. On Ellie, you write your codes on the left side (black screen) and the result is displayed on the right side (white screen). On the top left side of the black screen there are two buttons. {Icon|name=package} is for installing packages and {Icon|name=settings} is for adjusting settings. On the top right side of the black screen there is {Icon|name=align-left} we will use to format and make our code look pretty. After finishing writing a code we click {Key|COMPILE} (on the top right side of the white screen) to see the output.
+Hello! We are glad you are here. Let's get you set up for the workshop.
+
+| Header
+ Setup
+
+You will need
+
+| List
+ - a laptop computer;
+ - a web browser: {Link|Mozilla Firefox|url=https://www.mozilla.org/en-US/firefox/} or {Link|Google Chrome|url=https://www.google.com/chrome/}.
+
+During the workshop you will learn how to write and publish a computer program running in a web browser. Computer Programs are represented as text, so the text editor is the most fundamental tool of a programmer. We are going to use the Elm live editor called Ellie. It's free to use and requires no registration. All you need to do to write and run our code is open this address: {Link|ellie-app.com|url=https://ellie-app.com}.
+
+On Ellie, you write your codes on the left side (in the dark area of the screen) and the result is displayed on the right side (white area of the screen). The dark area is divided in two parts: *Elm* and *HTML*. During the workshop we will only modify the Elm code. You can use small downward arrow {Icon|name=chevron-down} to hide the HTML part and get some more space for your Elm code.
+
+When you open Ellie there will already be some code in Elm part. You don't need it so please delete it. We will write our own code together.
+
+On the top left side of the screen there are two buttons: {Icon|name=package} is for installing packages and {Icon|name=settings} is for adjusting settings. On the top right side of the dark area of the screen there is {Icon|name=align-left} button. We can use to format our code (make it look pretty). After finishing writing a code we click {Key|COMPILE} (on the top right side of the white area). This will run and display our program.
=
=Go to {Icon|name=settings} to give your project a name. Insert any name you wish. To save your work first click {Key|SAVE} and then bookmark it in your browser.
=
=| Header
= Our First Program!
=
-We are going to write "Hello Tree", but first let's install html package. Go to {Icon|name=package} and install html. Write the code as shown below.
+First we are going to create a very simple program that just writes "Hello Tree" on the screen. Write the code as shown below in the Elm part of the Ellie app.
=
=| Editor
= | Annotations
@@ -23,22 +40,23 @@ We are going to write "Hello Tree", but first let's install html package. Go to
= main =
= Html.text "Hello, Tree"
=
-Click {Icon|name=align-left} and then {Key|COMPILE} you should see something like this:
+Click {Icon|name=align-left} to make sure it's formatted nicely and then {Key|COMPILE}. You should see something like this:
=
=| Window
= Hello, Tree!
=
-This was a warmup. Let's try something more challenging on day 1.
=
-| Header
- Setup
=
-You will need
+| Emphasize
+ Did it work? Congratulations!
=
-| List
- - A Laptop
- - Mozilla firefox or Chrome browser
- - Internet connection
+ {Icon|name=check-circle}
+
+ You are all set and ready for {Link|Day 1|url=/day-1.html}!
=
=| Emphasize
- Congratulations! We are all set and you are ready for {Link|Day 1|url=/day-1.html}!
+ Got questions? Got Stuck?
+
+ {Icon|name=help-circle}
+
+ Please reach out to {Link|fana@software.garden|url= mailto:fana@software.garden}.Remove setting up an Elm program from the list of things to be learned on Day 1
With Ellie it's not necessary.
index 3ddc2f7..21102a2 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -9,7 +9,6 @@
= Today we are going to learn about
=
= | List
- -> Setting up an Elm program
= -> Scalable Vector Graphics
= -> Cartesian coordinates systems
= -> Layouts with Elm UIAdd rewind and forward button to Animated Tree.
index c315a72..42a14cb 100644
--- a/src/Examples/AnimatedTree.elm
+++ b/src/Examples/AnimatedTree.elm
@@ -65,6 +65,8 @@ ui model =
= else
= playButton
= , resetButton
+ , rewindButton
+ , forwardButton
= ]
=
= config =
@@ -90,6 +92,18 @@ ui model =
= { onPress = Just Reset
= , label = Element.text "Reset"
= }
+
+ rewindButton =
+ Input.button []
+ { onPress = Just Rewind
+ , label = Element.text "Rewind"
+ }
+
+ forwardButton =
+ Input.button []
+ { onPress = Just Forward
+ , label = Element.text "Forward"
+ }
= in
= Element.column
= [ Element.width Element.fill, Element.height Element.fill ]
@@ -103,6 +117,8 @@ type Msg
= | Pause
= | Animate Float
= | Reset
+ | Rewind
+ | Forward
=
=
=view : Model -> Html Msg
@@ -147,6 +163,16 @@ update msg model =
= , Cmd.none
= )
=
+ Rewind ->
+ ( { model | age = model.age - 1 }
+ , Cmd.none
+ )
+
+ Forward ->
+ ( { model | age = model.age + 1 }
+ , Cmd.none
+ )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =Correct the complete code on day 1
index 21102a2..2a8aba1 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -51,13 +51,13 @@ Below is the complete code to draw a dot like this, but don't type it in your ed
=
= main =
= Svg.svg
- [ Svg.Attributes.viewBox "-100 -100 200 200"
+ [ Svg.Attributes.viewBox "-300 -300 600 600"
= ]
= [ Svg.circle
= [ Svg.Attributes.r "10"
= , Svg.Attributes.cx "0"
= , Svg.Attributes.cy "0"
- , Svg.Attributes.color "skyblue"
+ , Svg.Attributes.fill "skyblue"
= ]
= []
= ]Elaborate on the installation of elm/svg
index 2a8aba1..a984b66 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -67,7 +67,7 @@ Below is the complete code to draw a dot like this, but don't type it in your ed
= , Element.height Element.fill
= ]
=
-We are going to use a technology called *SVG (Scalable Vector Graphics)*. It's all about drawing shapes on the screen. Let's install an Elm Package to help us work with SVG. Go to {Icon|name=package} to install svg.
+We are going to use a technology called *SVG (Scalable Vector Graphics)*. It's all about drawing shapes on the screen. Let's install an Elm Package to help us work with SVG. Go to {Icon|name=package} and type {Code|elm//svg} in the search box. After a short while a list of suggested packages should show up. Install the one called simply {Code|svg}.
=
=Now that we have {Code|elm//svg} installed, we can write the code that will draw a dot for us. Change the code to look like this:
=Edits to Day 1
index a984b66..2dce2cb 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -225,7 +225,7 @@ One method is to use the *cartesian coordinates system*. To get some intuition a
=| Note
= TODO: Image of the table, the flower pot and the villain
=
-However, if you had a ruler, you could say: "it's 63.3cm from the top edge and 27.1cm from the left edge". To do that you would have previously agree which edge is left and which is top - not so obvious in case of a table. Fortunately in SVG we have this sort of agreement made for us. We always measure from the top and left edge of the viewport.
+However, if you had a ruler, you could say: "it's 63.3cm from the top edge and 27.1cm from the left edge". To do that you would need to previously agree which edge is left and which is top - not so obvious in case of a table. Fortunately in SVG we have this sort of agreement made for us. We always measure from the top and left edge of the viewport.
=
=The distance from the left edge is called {Code|x} and the distance from the top is called {Code|y}. The bigger the {Code|x} the more to the right goes the element. The bigger the {Code|y} the more it goes down. Try it out:
=
@@ -238,7 +238,7 @@ The distance from the left edge is called {Code|x} and the distance from the top
=
=Adjust the sliders below to change the {Code|x} and {Code|y} coordinates of the dot. It's like moving the flower pot on the table by describing how far left, right, up or down it should be.
=
-Initially the center of the dot is at a point called /the origin/ or {Code|\{ x = 0, y = 0\\}}. The origin is in the top left corner of the viewport. That's why only a quarter of the dot is visible. If we want to help our dot get out of hiding, we'll have to place the center of the dot at a point with positive {Code|x} and {Code|y} values.
+Initially the center of the dot is at a point called /the origin/: {Code|\{ x = 0, y = 0\\}}. The origin is in the top left corner of the viewport. That's why only a quarter of the dot is visible. If we want to help our dot get out of hiding, we'll have to place the center of the dot at a point with positive {Code|x} and {Code|y} values.
=
=To change the position of the dot, we can use the {Code|cx} and {Code|cy} attributes of the {Code|circle} element, like this:
=
@@ -405,7 +405,7 @@ You can also remove line 19 to remove the pink background, or set it to some oth
=| Header
= Color
=
-Speaking of colors, now that we've centered our dot, it's time to give it a color! We do it by adding a {Code|fill} attribute to the {Code|circle} element, like that:
+Speaking of colors, now that we've centered our dot, it's time to give it a color! We do it by adding a {Code|fill} attribute to the {Code|circle} element, like this:
=
=| Editor
= | Annotations
@@ -474,6 +474,8 @@ The only change is on line 13. Reload the browser and see this:
=
=That's exactly what we were trying to achieve. Scroll up to the problem section to compare.
=
+Please remember to save your code using the {Key|save} button in Ellie. When saved, copy the address and send it to us.
+
=| Emphasize
= Congratulations!
=Restyle the ending of Day 1
index 2dce2cb..533e942 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -468,19 +468,15 @@ The only change is on line 13. Reload the browser and see this:
= x = 0
= y = 0
=
-| Emphasize
- Wow!
-
-
=That's exactly what we were trying to achieve. Scroll up to the problem section to compare.
=
-Please remember to save your code using the {Key|save} button in Ellie. When saved, copy the address and send it to us.
+| Note
+ Please remember to save your code using the {Key|save} button in Ellie. When saved, copy the address and send it to us.
+
=
=| Emphasize
= Congratulations!
=
-| Emphasize
= {Icon|name=award}
=
-| Emphasize
= We really hope you enjoyed this first day of our workshop. See you at {Link|Day 2|url=/day-2.html}!