Commits: 12
Add a little dot at the end of the progress bar
index 3f0ebba..4051617 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -613,23 +613,41 @@ contentNavigationBar { location, scroll, viewport } =
= progressBar total done progress =
= Element.row [ Element.width Element.fill ]
= [ Element.el
+ -- Previous days
= [ Element.width (Element.fillPortion done)
= , Element.height (Element.px 4)
= , Background.color Mark.Custom.colors.green
= ]
= Element.none
= , Element.row
+ -- Current day
= [ Element.width (Element.fillPortion 1)
= , Element.height (Element.px 4)
= ]
= [ Element.el
+ -- Done
= [ Element.width
= (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
= , Background.color Mark.Custom.colors.green
+ , Element.onRight
+ (Element.el
+ -- A dot at the end of the progress bar
+ [ Element.width (Element.px 10)
+ , Element.height (Element.px 10)
+ , Element.moveUp 3
+ , Border.rounded 10
+ , Border.color Mark.Custom.colors.green
+ , Border.width 3
+ , Element.moveLeft 5
+ , Background.color Mark.Custom.colors.white
+ ]
+ Element.none
+ )
= ]
= Element.none
= , Element.el
+ -- Ahead
= [ Element.width
= (Element.fillPortion (1000 - round (progress * 1000)))
= , Element.height (Element.px 4)
@@ -637,6 +655,7 @@ contentNavigationBar { location, scroll, viewport } =
= Element.none
= ]
= , Element.el
+ -- Days ahead
= [ Element.width (Element.fillPortion (total - done - 1))
= , Element.height (Element.px 4)
= ]Create Motivation page
index 732e725..79e54bd 100644
--- a/content/index.txt
+++ b/content/index.txt
@@ -13,7 +13,7 @@ Hello! We are running a workshop that will give you a glimpse into the way softw
=
= or drop us a note at {Link|fana@software.garden|url= mailto:fana@software.garden}
=
-Below is material through which we will be going during the workshop. Only the first section is a required read before you come, but feel free to read more to get more prepared.
+You can learn more about {Link|our motivation|url=/motivation.html}. Below is material through which we will be going during the workshop. Only the first section is a required read before you come, but feel free to read more to get more prepared.
=
=| Link
= url = /preparation.htmlnew file mode 100644
index 0000000..d982bad
--- /dev/null
+++ b/content/motivation.txt
@@ -0,0 +1,13 @@
+| Title
+ Why are we doing this?
+
+More and more of the world around us is driven by computer programs. Software is in our houses, offices, phones, cars, factories, cities. When you ride a bus, there is software helping the driver stay on track and on time. When you ride the elevator, the software controls it. One day soon perhaps software will control the bus without the driver, just like it already controls the elevator without a human operator.
+
+Computer programs are moving things around us, they talk and listen to us and to other programs. Perhaps it all seems like magic to you. It should! It is magical. We are creating living things by uttering words in an arcane languages. At Software Garden we want to show you how it's done.
+
+We won't make you a professional software developer - that takes months to years of education and experience. But you don't have to be a professional novelist to read and write. Perhaps you work with IT professionals or considering becoming one. Perhaps you want to help your kids to learn programming. Maybe you just want to learn something about the world. Come, sit with us and see the world through the eyes of 21st century wizards (a friendly kind).
+
+| Emphasize
+ You can ask Fana about the available dates!
+
+ {Icon|name=phone} {Link|+31 638 216 166|url=tel:+31638216166} | {Icon|name=mail} {Link|fana@software.garden|url= mailto:fana@software.garden} | {Icon|name=home} {Link|Back|url=/}index 3f0ebba..18bcc2e 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -185,6 +185,9 @@ view model =
= -- homeNavigationBar
= Element.none
=
+ Routes.Motivation ->
+ Element.none
+
= Routes.Content _ ->
= contentNavigationBar model
=
@@ -455,6 +458,12 @@ loadContent route =
= , expect = Http.expectString ContentFetched
= }
=
+ Routes.Motivation ->
+ Http.get
+ { url = "/content/motivation.txt"
+ , expect = Http.expectString ContentFetched
+ }
+
= Routes.Content base ->
= Http.get
= { url = "/content/" ++ base ++ ".txt"index f76545a..29893c6 100644
--- a/src/Routes.elm
+++ b/src/Routes.elm
@@ -11,6 +11,7 @@ import Url.Parser as Parser exposing (..)
=type Route
= = Home
= | Content String
+ | Motivation
= | NotFound
=
=
@@ -18,6 +19,7 @@ parser : Parser (Route -> b) b
=parser =
= Parser.oneOf
= [ Parser.map Home Parser.top
+ , Parser.map Motivation (Parser.s "motivation.html")
= , Parser.custom "Content"
= (\path ->
= case String.split "." path ofMerge branch 'progress-bar-dot' into 'master'
Progress bar dot
See merge request software-garden/software-garden.gitlab.io!19
Use shapes block on day 4.
index 6281453..9928187 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -23,39 +23,36 @@ We want to have a tree that looks like this:
=| Window
= | Tree
= | Axiom
- color = green
+ color = olive
= rotation = -90
= age = 8
=
=
= | Rule
- parent = green
+ parent = olive
=
= children =
= | Child
- color = brown
- rotation = 0.0
+ color = olive
+ rotation = 5.0
=
= | Child
- color = brown
- rotation = 30
+ color = maroon
+ rotation = 40
=
= | Child
- color = brown
- rotation = -30
+ color = maroon
+ rotation = -40
=
= | Rule
- parent = brown
+ parent = maroon
= children =
= | Child
- color = green
- rotation = 0.0
- | Child
- color = green
- rotation = 30
+ color = olive
+ rotation = 20
= | Child
- color = green
- rotation = -30
+ color = olive
+ rotation = -20
=
=
=The tree is built from segments: a line and a dot. In this respect it is similar to the connected dots we created yesterday. If we group the dot and a line, we will have the building block for our tree. We can do it with {Code|Svg.g} function ({Code|g} is an abbreviation of "group"). Just like {Code|Svg.svg}, it takes list of attributes and list of children. We can use it like that:
@@ -65,10 +62,20 @@ The tree is built from segments: a line and a dot. In this respect it is similar
= | None
=
= | Fold
- start = 23
- length = 13
+ start = 1
+ length = 6
+
+ | Fold
+ start = 29
+ length = 48
=
= | Code
+ module Main exposing (main)
+
+ import Element
+ import Svg
+ import Svg.Attributes
+
= main =
= [ Svg.g []
= [ dot "skyblue" 0
@@ -103,6 +110,41 @@ The tree is built from segments: a line and a dot. In this respect it is similar
= , Element.height Element.fill
= ]
=
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
=Reload the browser there should be no difference at this point. Looking back at code I notice that each segment looks the same: it is a group with a dot and a line, where the {Code|group} and {Code|line} functions have the same arguments passed to them. This kind of repetition begs for a function. Let's call it {Code|segment} and define like this:
=
=| Editor
@@ -120,13 +162,33 @@ Type this code at the bottom of the file and then replace main with the followin
=
=| Editor
= | Annotations
- | None
+ | Highlight
+ top = 61
+ left = 1
+ width = 29
+ height = 5
+
+ | Highlight
+ top = 8
+ left = 4
+ width = 22
+ height = 6
=
= | Fold
- start = 8
- length = 13
+ start = 1
+ length = 6
+
+ | Fold
+ start = 26
+ length = 34
=
= | Code
+ module Main exposing (main)
+
+ import Element
+ import Svg
+ import Svg.Attributes
+
= main =
= [ segment "skyblue" 0
= , segment "orange" 72
@@ -146,15 +208,53 @@ Type this code at the bottom of the file and then replace main with the followin
= , Element.height Element.fill
= ]
=
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
+ segment color rotation =
+ Svg.g []
+ [ dot color rotation
+ , line color rotation
+ ]
+
=| Note
= I hope you can see the pattern in what we are doing. We are taking repetitive blocks of code and turning them into named functions. Parameters help us deal with variability in the repeated code (like color and rotation that is different for each segment).
=
=Reload the browser. There should still be no visible difference in the behavior of the program, but our source code is getting more readable. That's good.
=
-The big difference between our program and the one we are trying to build is that ours have only one level of segments, whereas in the example segments grow from the tip of other segments. You can think of it as segments having child segments: the green segment has two child brown segments. Each brown segment has three red child segments
-
-| Note
- TODO: Make sure the description matches the example
+The big difference between our program and the one we are trying to build is that ours have only one level of segments, whereas in the example segments grow from the tip of other segments. You can think of it as segments having child segments: the green segment has two child red segments and one green segment. Each red segment has two green child segments.
=
=It's similar to how the way an SVG group has child elements. But group itself (together with its children) is an element, so we can put a group within a group. Let's do that! Change the definition of {Code|segment} function as follows:
=
@@ -162,31 +262,442 @@ It's similar to how the way an SVG group has child elements. But group itself (t
= | Annotations
= | None
=
+ | Fold
+ start = 1
+ length = 6
+
+ | Fold
+ start = 26
+ length = 35
+
= | Code
- segment color rotation =
- Svg.g []
- [ dot color rotation
- , line color rotation
- , Svg.g
- [ Svg.Attributes.transform
- (String.concat
- [ "rotate("
- , String.fromFloat rotation
- , ") translate(80)"
- ]
- )
+ module Main exposing (main)
+
+ import Element
+ import Svg
+ import Svg.Attributes
+
+ main =
+ [ segment "skyblue" 0
+ , segment "orange" 72
+ , segment "red" 144
+ , segment "lime" 216
+ , segment "maroon" 288
+ ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-100 -100 200 200"
= ]
- [ dot "red" 15
- , line "red" 15
- , dot "blue" -15
- , line "blue" -15
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
= ]
+
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
+ segment color rotation =
+ Svg.g []
+ [ dot color rotation
+ , line color rotation
+ , Svg.g
+ [ Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
= ]
+ [ dot "red" 15
+ , line "red" 15
+ , dot "blue" -15
+ , line "blue" -15
+ ]
+ ]
=
=Now the program should display something like this:
=
-| Note
- TODO: Example
+| Window
+ | Shapes
+ | Container
+ background = none
+ fill = True
+ viewBox = -100 -100 200 200
+
+ | Line
+ length= 80
+ color = skyblue
+ transformations =
+ | Rotate
+ 0
+
+ | Dot
+ radius = 10
+ color = skyblue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length= 80
+ color = red
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length= 80
+ color = blue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length= 80
+ color = orange
+ transformations =
+ | Rotate
+ 72
+
+ | Dot
+ radius = 10
+ color = orange
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length= 80
+ color = red
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length= 80
+ color = blue
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length= 80
+ color = red
+ transformations =
+ | Rotate
+ 144
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length= 80
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length= 80
+ color = blue
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length= 80
+ color = lime
+ transformations =
+ | Rotate
+ 216
+
+ | Dot
+ radius = 10
+ color = lime
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length= 80
+ color = red
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length= 80
+ color = blue
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length= 80
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+
+ | Dot
+ radius = 10
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length= 80
+ color = red
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length= 80
+ color = blue
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
=
=It's already starts to look interesting, but there are two problems with it. First it doesn't fit on screen. This is easy to fix using {Code|viewBox}. We need to zoom out to see more of a picture. Change the value passed to {Code|viewBox} on line 19 to {Code|"-500 -500 1000 1000"}, effectively zooming out 5x but preserving keeping the origin in the center of our viewbox.
=
@@ -194,9 +705,88 @@ Then the lines look ugly displayed on top of the dots of different color. This i
=
=| Editor
= | Annotations
- | None
+ | Highlight
+ top = 18
+ left = 12
+ width = 46
+ height = 1
+
+ | Highlight
+ top = 73
+ left = 10
+ width = 21
+ height = 8
+
+ | Fold
+ start = 1
+ length = 6
+
+ | Fold
+ start = 20
+ length = 43
=
= | Code
+ module Main exposing (main)
+
+ import Element
+ import Svg
+ import Svg.Attributes
+
+ main =
+ [ segment "skyblue" 0
+ , segment "orange" 72
+ , segment "red" 144
+ , segment "lime" 216
+ , segment "maroon" 288
+ ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-500 -500 1000 1000"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
+
= segment color rotation =
= Svg.g []
= [ Svg.g
@@ -219,30 +809,373 @@ Then the lines look ugly displayed on top of the dots of different color. This i
=
=With this two changes applied you should see something like this in the browser:
=
-| Note
- TODO: Example
+| Window
+ | Shapes
+ | Container
+ background = none
+ fill = True
+ viewBox = -500 -500 1000 1000
+
+ | Line
+ length = 80
+ color = skyblue
+ transformations =
+ | Rotate
+ 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = blue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Dot
+ radius = 10
+ color = skyblue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = orange
+ transformations =
+ | Rotate
+ 72
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = blue
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
=
-So now each segment has two sub segments: red and blue. The red one is rotate 15 degree clockwise, the blue one is rotated 15 degree counterclockwise. But they are look the same. Our goal is to make them variable. This means that we need one more parameter to the segment: list of children. Let's do it:
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+ | Dot
+ radius = 10
+ color = orange
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ 144
+
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = blue
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = lime
+ transformations =
+ | Rotate
+ 216
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = blue
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+
+ | Dot
+ radius = 10
+ color = lime
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = blue
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+
+ | Dot
+ radius = 10
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+
+So now each segment has two sub segments: red and blue. The red one is rotated 15 degree clockwise, the blue one is rotated 15 degree counterclockwise. But they look the same. Our goal is to make them variable. This means that we need one more parameter to the segment: list of children. Let's do it:
=
=| Editor
= | Annotations
= | Highlight
- top = 25
- left = 14
- width = 44
- height = 1
+ top = 11
+ left = 8
+ width = 17
+ height = 5
=
= | Fold
= start = 1
- length = 7
+ length = 6
=
= | Fold
- start = 27
- length = 7
+ start = 21
+ length = 13
=
= | Fold
= start = 50
- length = 38
+ length = 39
=
= | Highlight
= top = 35
@@ -344,12 +1277,140 @@ So now each segment has two sub segments: red and blue. The red one is rotate 15
= []
=
=
-We have added third parameter to {Code|segment} function on line 34 (before the changes it was 28). The parameter is named {Code|children} and we use it in place of the list on line 45 (previously 39). The list itself was moved to line 11, where it is passed as a value for the parameter of the first segment. This move made all the lines shift down. All other segments will also need to get value for {Code|children} parameter, so let's just give each of them an empty list - meaning they have 0 children.
+We have added third parameter to {Code|segment} function on line 35 (before the changes it was 28). The parameter is named {Code|children} and we use it in place of the list on line 46 (previously 39). The list itself was moved to line 11, where it is passed as a value for the parameter of the first segment. This move made all the lines shift down. All other segments will also need to get value for {Code|children} parameter, so let's just give each of them an empty list - meaning they have 0 children.
=
=Once all changes are applied, reload the browser and see that only first, skyblue segment has child segments.
=
-| Note
- TODO: Example
+| Window
+ | Shapes
+ | Container
+ background = none
+ fill = True
+ viewBox = -500 -500 1000 1000
+
+ | Line
+ length = 80
+ color = skyblue
+ transformations =
+ | Rotate
+ 0
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = blue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Dot
+ radius = 10
+ color = skyblue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Dot
+ radius = 10
+ color = blue
+ transformations =
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -15
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = orange
+ transformations =
+ | Rotate
+ 72
+
+ | Dot
+ radius = 10
+ color = orange
+ transformations =
+ | Rotate
+ 72
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ 144
+
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ 144
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = lime
+ transformations =
+ | Rotate
+ 216
+
+ | Dot
+ radius = 10
+ color = lime
+ transformations =
+ | Rotate
+ 216
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+
+ | Dot
+ radius = 10
+ color = maroon
+ transformations =
+ | Rotate
+ 288
+ | Translate
+ x = 80
+ y = 0
+
=
=Before we continue, let's notice that on lines 11 - 15 we have a nice opportunity to remove some repetition. Consider that dot and a line with same rotation and color are just a segment. We can replace:
=
@@ -357,33 +1418,205 @@ Before we continue, let's notice that on lines 11 - 15 we have a nice opportunit
= | Annotations
= | None
=
+ | Fold
+ start = 1
+ length = 10
+
+ | Fold
+ start = 16
+ length = 72
+
= | Code
- [ dot "red" 15
- , line "red" 15
- , dot "blue" -15
- , line "blue" -15
- ]
+ module Main exposing (main)
+
+ import Element
+ import Svg exposing (Svg)
+ import Svg.Attributes
+
+
+ main =
+ [ segment "skyblue"
+ 0
+ [ dot "red" 15
+ , line "red" 15
+ , dot "blue" -15
+ , line "blue" -15
+ ]
+ , segment "orange" 72 []
+ , segment "red" 144 []
+ , segment "lime" 216 []
+ , segment "maroon" 288 []
+ ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-500 -500 1000 1000"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+
+ segment : String -> Float -> List (Svg msg) -> Svg.Svg msg
+ segment color rotation children =
+ Svg.g []
+ [ Svg.g
+ [ Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ children
+ , dot color rotation
+ , line color rotation
+ ]
+
+
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
=
-with:
=
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
+with:
=| Editor
= | Annotations
= | None
=
- | Code
- [ segment "red" 15 []
- , segment "blue" -15 []
- ]
+ | Fold
+ start = 1
+ length = 10
+
+ | Fold
+ start = 14
+ length = 73
+
+ | Code
+ module Main exposing (main)
+
+ import Element
+ import Svg exposing (Svg)
+ import Svg.Attributes
+
+
+ main =
+ [ segment "skyblue"
+ 0
+ [ segment "red" 15 []
+ , segment "blue" -15 []
+ ]
+ , segment "orange" 72 []
+ , segment "red" 144 []
+ , segment "lime" 216 []
+ , segment "maroon" 288 []
+ ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-500 -500 1000 1000"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+
+ segment : String -> Float -> List (Svg msg) -> Svg.Svg msg
+ segment color rotation children =
+ Svg.g []
+ [ Svg.g
+ [ Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ children
+ , dot color rotation
+ , line color rotation
+ ]
+
+
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
=
=A segment within a segment! Consider that every segment can have child segments. This way we can build a tree as complex as we want. Try adding more children:
=
=| Editor
= | Annotations
- | Highlight
- top = 28
- left = 12
- width = 50
- height = 1
+ | None
=
= | Fold
= start = 1
@@ -515,8 +1748,440 @@ Let's say we have three types of segments: brown, green and red. The child segme
=
=The tree following these rules will look like this:
=
-| Note
- TODO: Example
+| Window
+ | Shapes
+ | Container
+ background = none
+ fill = True
+ viewBox = -500 -500 1000 1000
+
+ | Line
+ length = 80
+ color = brown
+ transformations =
+ | Rotate
+ -90
+
+ | Line
+ length = 80
+ color = green
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 0
+
+ | Line
+ length = 80
+ color = green
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+
+ | Line
+ length = 80
+ color = green
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+
+ | Dot
+ radius = 10
+ color = brown
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 0
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -45
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 0
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -45
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 0
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -5
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 0
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -5
+ | Translate
+ x = 80
+ y = 0
+
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 0
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 50
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 0
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 50
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -45
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -45
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -5
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -5
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 50
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 50
+ | Translate
+ x = 80
+ y = 0
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -45
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -45
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -5
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -5
+ | Translate
+ x = 80
+ y = 0
+
+ | Line
+ length = 80
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 50
+
+ | Dot
+ radius = 10
+ color = red
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 50
+ | Translate
+ x = 80
+ y = 0
+
+ | Dot
+ radius = 10
+ color = green
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Translate
+ x = 80
+ y = 0
+
+ | Dot
+ radius = 10
+ color = green
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ 20
+ | Translate
+ x = 80
+ y = 0
+
+ | Dot
+ radius = 10
+ color = green
+ transformations =
+ | Rotate
+ -90
+ | Translate
+ x = 80
+ y = 0
+ | Rotate
+ -30
+ | Translate
+ x = 80
+ y = 0
+
=
=To represent this in code we will need to learn few new concepts: *dictionary*, *record*, *type alias* and *mapping over list*.
=
@@ -643,7 +2308,6 @@ Dictionary let's us associate one value (let's say color) with another value (le
= start = 48
= length = 55
=
-
= | Code
= module Main exposing (main)
=
@@ -760,7 +2424,62 @@ Here it is:
= | Annotations
= | None
=
+ | Fold
+ start = 1
+ length = 47
+
+ | Fold
+ start = 67
+ length = 36
+
= | Code
+ module Main exposing (main)
+
+ import Dict
+ import Element
+ import Svg exposing (Svg)
+ import Svg.Attributes
+
+
+ main =
+ [ segment { color = "skyblue", rotation = 0 }
+ [ segment { color = "red", rotation = 15 } []
+ , segment { color = "blue", rotation = -15 }
+ [ segment { color = "yellow", rotation = 45 } []
+ , segment { color = "pink", rotation = -20 } []
+ , segment { color = "green", rotation = -90 } []
+ ]
+ ]
+ , segment { color = "orange", rotation = 72 } []
+ , segment { color = "red", rotation = 144 } []
+ , segment { color = "lime", rotation = 216 } []
+ , segment { color = "maroon", rotation = 288 } []
+ ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-500 -500 1000 1000"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+ rules =
+ Dict.empty
+ |> Dict.insert "brown"
+ [ { color = "green", rotation = 0 }
+ , { color = "green", rotation = 20 }
+ , { color = "green", rotation = -30 }
+ ]
+ |> Dict.insert "green"
+ [ { color = "red", rotation = -45 }
+ , { color = "red", rotation = -5 }
+ , { color = "red", rotation = 50 }
+ ]
+
= segment { color, rotation } =
= Svg.g []
= [ rules
@@ -780,13 +2499,67 @@ Here it is:
= , line color rotation
= ]
=
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
+
=We also have to change the definition of {Code|main}. Segment no longer takes two arguments, and its children are calculated according to rules, so we can just add one brown segment and rotate it upward (-90 degree)
=
=| Editor
= | Annotations
- | None
+ | Highlight
+ top = 9
+ left = 4
+ width = 47
+ height = 1
+
+ | Fold
+ start = 1
+ length = 5
+
+ | Fold
+ start = 20
+ length = 70
=
= | Code
+ module Main exposing (main)
+
+ import Dict
+ import Element
+ import Svg exposing (Svg)
+ import Svg.Attributes
+
= main =
= [ segment { color = "brown", rotation = -90 } ]
= |> Svg.svg
@@ -801,57 +2574,167 @@ We also have to change the definition of {Code|main}. Segment no longer takes tw
= , Element.height Element.fill
= ]
=
-The result should be exactly like we wanted it to be:
+ rules =
+ Dict.empty
+ |> Dict.insert "brown"
+ [ { color = "green", rotation = 0 }
+ , { color = "green", rotation = 20 }
+ , { color = "green", rotation = -30 }
+ ]
+ |> Dict.insert "green"
+ [ { color = "red", rotation = -45 }
+ , { color = "red", rotation = -5 }
+ , { color = "red", rotation = 50 }
+ ]
+
+ segment { color, rotation } =
+ Svg.g []
+ [ rules
+ |> Dict.get color
+ |> Maybe.withDefault []
+ |> List.map segment
+ |> Svg.g
+ [ Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ , dot color rotation
+ , line color rotation
+ ]
+
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
=
-| Monospace
- TODO: Implement tree example
=
+The result should be exactly like we wanted it to be:
+
+| Window
= | Tree
= | Axiom
= color = brown
= rotation = -90
- age = -1
+ age = 8
= growing = False
=
+
= | Rule
- | Parent
- color = brown
+ parent = brown
=
- | Child
- color = "green"
- rotation = 0
+ children =
+ | Child
+ color = green
+ rotation = 0
=
- | Child
- color = "green"
- rotation = 20
+ | Child
+ color = green
+ rotation = 20
=
- | Child
- color = "green"
- rotation = -30
+ | Child
+ color = green
+ rotation = -30
=
= | Rule
- | Parent
- color = green
+ parent = green
+ children =
+ | Child
+ color = red
+ rotation = -45
+ | Child
+ color = red
+ rotation = -5
+ | Child
+ color = red
+ rotation = 50
=
- | Child
- color = "red"
- rotation = -45
+Nice, but what's going on here:
=
- | Child
- color = "red"
- rotation = -5
+| Editor
+ | Annotations
+ | Highlight
+ top = 38
+ left = 12
+ width = 23
+ height = 3
=
- | Child
- color = "red"
- rotation = 50
+ | Fold
+ start = 1
+ length = 34
=
-Nice, but what's going on here:
+ | Fold
+ start = 53
+ length = 36
+
+
+ | Code
+ module Main exposing (main)
+
+ import Dict
+ import Element
+ import Svg exposing (Svg)
+ import Svg.Attributes
+
+ main =
+ [ segment { color = "brown", rotation = -90 } ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-500 -500 1000 1000"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
=
-| Editor
- | Annotations
- | None
+ rules =
+ Dict.empty
+ |> Dict.insert "brown"
+ [ { color = "green", rotation = 0 }
+ , { color = "green", rotation = 20 }
+ , { color = "green", rotation = -30 }
+ ]
+ |> Dict.insert "green"
+ [ { color = "red", rotation = -45 }
+ , { color = "red", rotation = -5 }
+ , { color = "red", rotation = 50 }
+ ]
=
- | Code
= segment { color, rotation } =
= Svg.g []
= [ rules
@@ -871,6 +2754,40 @@ Nice, but what's going on here:
= , line color rotation
= ]
=
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
+
=There are three new things here:
=
=| List
@@ -903,20 +2820,109 @@ If there is an entry, we will get a list of records. We want a list of segments.
=
=Take some time to grasp it and then compare with our code.
=
-| Monospace
- rules
- |> Dict.get color
- |> Maybe.withDefault []
- |> List.map segment
- |> Svg.g
- [ Svg.Attributes.transform
- (String.concat
- [ "rotate("
- , String.fromFloat rotation
- , ") translate(80)"
+| Editor
+ | Annotations
+ | Highlight
+ top = 37
+ left = 12
+ width = 41
+ height = 13
+
+ | Fold
+ start = 1
+ length = 35
+
+ | Fold
+ start = 53
+ length = 36
+
+ | Code
+ module Main exposing (main)
+
+ import Dict
+ import Element
+ import Svg exposing (Svg)
+ import Svg.Attributes
+
+ main =
+ [ segment { color = "brown", rotation = -90 } ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-500 -500 1000 1000"
= ]
- )
- ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+ rules =
+ Dict.empty
+ |> Dict.insert "brown"
+ [ { color = "green", rotation = 0 }
+ , { color = "green", rotation = 20 }
+ , { color = "green", rotation = -30 }
+ ]
+ |> Dict.insert "green"
+ [ { color = "red", rotation = -45 }
+ , { color = "red", rotation = -5 }
+ , { color = "red", rotation = 50 }
+ ]
+
+ segment { color, rotation } =
+ Svg.g []
+ [ rules
+ |> Dict.get color
+ |> Maybe.withDefault []
+ |> List.map segment
+ |> Svg.g
+ [ Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ , dot color rotation
+ , line color rotation
+ ]
+
+ dot color rotation =
+ Svg.circle
+ [ Svg.Attributes.r "10"
+ , Svg.Attributes.cx "0"
+ , Svg.Attributes.cy "0"
+ , Svg.Attributes.fill color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ") translate(80)"
+ ]
+ )
+ ]
+ []
+
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
=
=Let's analyze it line by line:
=
@@ -956,8 +2962,12 @@ We can do it like this. When we create our first segment (the brown one), we wil
= length = 8
=
= | Fold
- start = 62
- length = 36
+ start = 60
+ length = 38
+
+ | Fold
+ start = 22
+ length = 16
=
= | Code
= module Main exposing (main)
@@ -1128,9 +3138,76 @@ Since the size depends on the age, and the age is given for every segment, we ca
=
=| Editor
= | Annotations
- | None
+ | Highlight
+ top = 62
+ left = 1
+ width = 22
+ height = 1
+
+ | Highlight
+ top = 64
+ left = 10
+ width = 39
+ height = 1
+
+ | Highlight
+ top = 53
+ left = 30
+ width = 17
+ height = 1
+
+ | Highlight
+ top = 72
+ left = 18
+ width = 17
+ height = 1
+
+ | Fold
+ start = 1
+ length = 37
+
+ | Fold
+ start = 77
+ length = 20
=
= | Code
+ module Main exposing (main)
+
+ import Dict
+ import Element
+ import Svg exposing (Svg)
+ import Svg.Attributes
+
+
+ main =
+ [ segment 4 { color = "brown", rotation = -90 } ]
+ |> Svg.svg
+ [ Svg.Attributes.height "100%"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.style "background: none"
+ , Svg.Attributes.viewBox "-500 -500 1000 1000"
+ ]
+ |> Element.html
+ |> Element.layout
+ [ Element.width Element.fill
+ , Element.height Element.fill
+ ]
+
+
+ rules =
+ Dict.empty
+ |> Dict.insert "brown"
+ [ { color = "brown", rotation = 0 }
+ , { color = "green", rotation = 20 }
+ , { color = "green", rotation = -30 }
+ ]
+ |> Dict.insert "green"
+ [ { color = "red", rotation = -45 }
+ , { color = "red", rotation = -5 }
+ , { color = "red", rotation = 50 }
+ ]
+
+
= segment age { color, rotation } =
= if age <= 0 then
= Svg.g [] []
@@ -1171,16 +3248,59 @@ Since the size depends on the age, and the age is given for every segment, we ca
= ]
= []
=
-| Monospace
- TODO: Describe the change to code
+ line color rotation =
+ Svg.line
+ [ Svg.Attributes.strokeWidth "1"
+ , Svg.Attributes.x1 "0"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.x1 "80"
+ , Svg.Attributes.y1 "0"
+ , Svg.Attributes.stroke color
+ , Svg.Attributes.transform
+ (String.concat
+ [ "rotate("
+ , String.fromFloat rotation
+ , ")"
+ ]
+ )
+ ]
+ []
=
-Next let's pass the age to the {Code|line} function and use it for both the thickness {Code|strokWidth} and length {Code|x2}.
+We passed age to the {Code|dot} function and use it for radius. Our radius now is affected by age.
=
-If you reload now, the tree will look as if it exploded. It's funny. The reason is that we did not adjust the translation of the child groups nor the dots. It's always 80, even though the length of the lines is variable - see lines {Code|TODO: line of group translation} and {Code|TODO: line of dot translation}. Let's change it like that:
+Next let's pass the age to the {Code|line} function and use it for both the thickness {Code|strokeWidth} and length {Code|x2}.
+
+If you reload now, the tree will look as if it exploded. It's funny. The reason is that we did not adjust the translation of the child groups nor the dots. It's always 80, even though the length of the lines is variable - see lines {Code|53} and {Code|72}. Let's change it like that:
=
=| Editor
= | Annotations
- | None
+ | Highlight
+ top = 88
+ left = 10
+ width = 47
+ height = 1
+
+ | Highlight
+ top = 91
+ left = 10
+ width = 49
+ height = 1
+
+ | Highlight
+ top = 75
+ left = 18
+ width = 27
+ height = 1
+
+ | Highlight
+ top = 54
+ left = 30
+ width = 27
+ height = 1
+
+ | Fold
+ start = 1
+ length = 37
=
= | Fold
= start = 1Add a growing option to the tree example.
If growing is true then the tree behaves as before (parents are bigger than children). If it's false, then they are the same, fixed size (length is 80 radius is 10).
Co-Authored-By: Tadeusz Εazurski tadeusz@lazurski.pl
index 6281453..adc7f1f 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -26,7 +26,7 @@ We want to have a tree that looks like this:
= color = green
= rotation = -90
= age = 8
-
+ growing = True
=
= | Rule
= parent = green
@@ -1068,9 +1068,7 @@ The {Code|else} value is almost the same as the whole {Code|segment} function be
=
=The result should be like this:
=
-| Monospace
- TODO: Implement tree example
-
+| Window
= | Tree
= | Axiom
= color = brown
@@ -1079,36 +1077,36 @@ The result should be like this:
= growing = False
=
= | Rule
- | Parent
- color = brown
+ parent = brown
=
- | Child
- color = "green"
- rotation = 0
+ children =
+ | Child
+ color = brown
+ rotation = 0
=
- | Child
- color = "green"
- rotation = 20
+ | Child
+ color = green
+ rotation = 20
=
- | Child
- color = "green"
- rotation = -30
+ | Child
+ color = green
+ rotation = -30
=
= | Rule
- | Parent
- color = green
+ parent = green
=
- | Child
- color = "red"
- rotation = -45
+ children =
+ | Child
+ color = red
+ rotation = -45
=
- | Child
- color = "red"
- rotation = -5
+ | Child
+ color = red
+ rotation = -5
=
- | Child
- color = "red"
- rotation = 50
+ | Child
+ color = red
+ rotation = 50
=
=| Emphasize
= Go ahead and play with the rules and age.
@@ -1290,9 +1288,7 @@ If you reload now, the tree will look as if it exploded. It's funny. The reason
=
=Now the tree should look correctly, like this:
=
-| Monospace
- TODO: Implement tree example
-
+| Window
= | Tree
= | Axiom
= color = brown
@@ -1301,36 +1297,36 @@ Now the tree should look correctly, like this:
= growing = True
=
= | Rule
- | Parent
- color = brown
+ parent = brown
=
- | Child
- color = "green"
- rotation = 0
+ children =
+ | Child
+ color = brown
+ rotation = 0
=
- | Child
- color = "green"
- rotation = 20
+ | Child
+ color = green
+ rotation = 20
=
- | Child
- color = "green"
- rotation = -30
+ | Child
+ color = green
+ rotation = -30
=
= | Rule
- | Parent
- color = green
+ parent = green
=
- | Child
- color = "red"
- rotation = -45
+ children =
+ | Child
+ color = red
+ rotation = -45
=
- | Child
- color = "red"
- rotation = -5
+ | Child
+ color = red
+ rotation = -5
=
- | Child
- color = "red"
- rotation = 50
+ | Child
+ color = red
+ rotation = 50
=
=| Emphasize
= Congratulations!index 8fee380..1b26fc6 100644
--- a/src/Examples/Tree.elm
+++ b/src/Examples/Tree.elm
@@ -12,6 +12,7 @@ import Dict exposing (Dict)
=import Element exposing (Element)
=import Svg exposing (Svg)
=import Svg.Attributes
+import Transformations
=
=
=defaults : Config
@@ -20,6 +21,7 @@ defaults =
= { color = "purple"
= , rotation = -90
= , age = 7
+ , growing = True
= }
= , rules =
= [ ( "purple"
@@ -54,6 +56,7 @@ type alias Axiom =
= { color : String
= , rotation : Float
= , age : Float
+ , growing : Bool
= }
=
=
@@ -70,19 +73,31 @@ ui config =
= let
= dot age color rotation =
= Svg.circle
- [ Svg.Attributes.r (String.fromFloat age)
+ [ Svg.Attributes.r
+ (String.fromFloat
+ (if config.axiom.growing then
+ age
+
+ else
+ 10
+ )
+ )
= , Svg.Attributes.cx "0"
= , Svg.Attributes.cy "0"
= , Svg.Attributes.fill color
- , Svg.Attributes.transform
- (String.concat
- [ "rotate("
- , String.fromFloat rotation
- , ") translate("
- , String.fromFloat (age * 10)
- , ")"
- ]
- )
+ , [ Transformations.Rotate rotation
+ , Transformations.Translate
+ (if config.axiom.growing then
+ age * 10
+
+ else
+ 80
+ )
+ 0
+ ]
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
= ]
= []
=
@@ -91,17 +106,29 @@ ui config =
= [ Svg.Attributes.strokeWidth "1"
= , Svg.Attributes.x1 "0"
= , Svg.Attributes.y1 "0"
- , Svg.Attributes.x2 (String.fromFloat (age * 10))
+ , Svg.Attributes.x2
+ (String.fromFloat
+ (if config.axiom.growing then
+ age * 10
+
+ else
+ 80
+ )
+ )
= , Svg.Attributes.y2 "0"
= , Svg.Attributes.stroke color
- , Svg.Attributes.strokeWidth (String.fromFloat age)
- , Svg.Attributes.transform
- (String.concat
- [ "rotate("
- , String.fromFloat rotation
- , ")"
- ]
+ , Svg.Attributes.strokeWidth
+ (String.fromFloat
+ (if config.axiom.growing then
+ age
+
+ else
+ 1
+ )
= )
+ , Transformations.Rotate rotation
+ |> Transformations.toString
+ |> Svg.Attributes.transform
= ]
= []
=
@@ -137,15 +164,19 @@ ui config =
= |> Maybe.withDefault []
= |> List.map (segment (age - 1))
= |> Svg.g
- [ Svg.Attributes.transform
- (String.concat
- [ "rotate("
- , String.fromFloat rotation
- , ") translate("
- , String.fromFloat (age * 10)
- , ")"
- ]
- )
+ [ [ Transformations.Rotate rotation
+ , Transformations.Translate
+ (if config.axiom.growing then
+ age * 10
+
+ else
+ 80
+ )
+ 0
+ ]
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
= ]
= , dot age color rotation
= , line age color rotationindex 4051617..24a7f89 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -1055,11 +1055,12 @@ document =
=
= axiom : Mark.Block Examples.Tree.Axiom
= axiom =
- Mark.record3 "Axiom"
+ Mark.record4 "Axiom"
= Examples.Tree.Axiom
= (Mark.field "color" Mark.string)
= (Mark.field "rotation" Mark.float)
= (Mark.field "age" Mark.float)
+ (Mark.field "growing" Mark.bool)
=
= rules : Mark.Block (List Examples.Tree.Rule)
= rules =Fix style
index d982bad..89d29c0 100644
--- a/content/motivation.txt
+++ b/content/motivation.txt
@@ -1,7 +1,7 @@
=| Title
= Why are we doing this?
=
-More and more of the world around us is driven by computer programs. Software is in our houses, offices, phones, cars, factories, cities. When you ride a bus, there is software helping the driver stay on track and on time. When you ride the elevator, the software controls it. One day soon perhaps software will control the bus without the driver, just like it already controls the elevator without a human operator.
+More and more of the world around us is driven by computer programs. Software is in our houses, offices, phones, cars, factories, cities and so on. When you ride a bus, there is software helping the driver stay on track and on time. When you ride the elevator, the software controls it. One day soon perhaps software will control the bus without the driver, just like it already controls the elevator without a human operator.
=
=Computer programs are moving things around us, they talk and listen to us and to other programs. Perhaps it all seems like magic to you. It should! It is magical. We are creating living things by uttering words in an arcane languages. At Software Garden we want to show you how it's done.
=Merge branch 'motivation' into 'master'
Create Motivation page
See merge request software-garden/software-garden.gitlab.io!20
Restyle emphasize block on day 4
index 6281453..4d42c62 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -483,10 +483,12 @@ A segment within a segment! Consider that every segment can have child segments.
= []
=
=| Emphasize
- Time to play π³π²π΄π
+ Time to play
+
+ π³ π² π΄ π
+
+ Try building your own tree. Play with colors and sizes.
=
-| Emphasize
- Try building your own tree this way. Play with colors and sizes.
=
=| Note
= Hint: if you add {Code|Svg.attributes.strokeWidth "2"} attribute to the line, you will get thicker branches. Try different combinations of stroke width and radius of a dot.Add more highlights and a fold to Editor block that introduces halting
index 4d42c62..03212fa 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -953,10 +953,38 @@ We can do it like this. When we create our first segment (the brown one), we wil
= width = 49
= height = 1
=
+ | Highlight
+ top = 38
+ left = 8
+ width = 5
+ height = 1
+
+ | Highlight
+ top = 38
+ left = 8
+ width = 5
+ height = 1
+
+ | Highlight
+ top = 39
+ left = 4
+ width = 18
+ height = 2
+
+ | Highlight
+ top = 47
+ left = 38
+ width = 9
+ height = 1
+
= | Fold
= start = 1
= length = 8
=
+ | Fold
+ start = 23
+ length = 14
+
= | Fold
= start = 62
= length = 36Reformat Emphasize block on day 4
index 03212fa..c3f9c78 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -1143,10 +1143,8 @@ The result should be like this:
=| Emphasize
= Go ahead and play with the rules and age.
=
-| Emphasize
- πΊπΎ
+ πΊ πΎ
=
-| Emphasize
= It's safe - the tree will always stop growing after a given number of generations.
=
=| HeaderAdd parens on day 4
index c3f9c78..454ee16 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -1202,7 +1202,7 @@ Since the size depends on the age, and the age is given for every segment, we ca
=| Monospace
= TODO: Describe the change to code
=
-Next let's pass the age to the {Code|line} function and use it for both the thickness {Code|strokWidth} and length {Code|x2}.
+Next let's pass the age to the {Code|line} function and use it for both the thickness ({Code|strokWidth}) and length ({Code|x2}).
=
=If you reload now, the tree will look as if it exploded. It's funny. The reason is that we did not adjust the translation of the child groups nor the dots. It's always 80, even though the length of the lines is variable - see lines {Code|TODO: line of group translation} and {Code|TODO: line of dot translation}. Let's change it like that:
=Merge branch 'shapes-example' of gitlab.com:software-garden/website into shapes-example
I have commited changes before pulling.