Week 06 of 2019
Development log of Elm Tree Workshop
32 items
- Use Element.classifyDevice to choose between icons and labels in nav bar
- Disable font-size-adjusting on mobile devices
- Merge branch 'fix-mobile-font-size-adjustment' into 'master'
- Merge branch 'home-page-links' into 'master'
- Revert "Merge branch 'home-page-links' into 'master'"
- Merge branch 'revert-9a34ba76' into 'master'
- Use Element.classifyDevice to choose between icons and labels in nav bar
- Merge branch 'home-page-links' into 'master'
- In progress bar replace badass color with green
- Merge branch 'green-progress-bar' into 'master'
- Remove Transformations.apply, expose toString instead
- Make each shape in Examples.Shapes take a list of transformations
- Merge remote-tracking branch 'origin/master' into shapes-example
- Add a little dot at the end of the progress bar
- Create Motivation page
- Merge branch 'progress-bar-dot' into 'master'
- Use shapes block on day 4.
- Add a growing option to the tree example.
- Fix style
- Merge branch 'motivation' into 'master'
- Restyle emphasize block on day 4
- Add more highlights and a fold to Editor block that introduces halting
- Reformat Emphasize block on day 4
- Add parens on day 4
- Merge branch 'shapes-example' of gitlab.com:software-garden/website into shapes-example
- Add shapes block to day 1, day 2 and day 3.
- Merge branch 'shapes-example' of gitlab.com:software-garden/software-garden.gitlab.io into shapes-example
- Merge remote-tracking branch 'origin/master' into shapes-example
- Merge branch 'growing-tree' into 'master'
- Merge remote-tracking branch 'origin/master' into shapes-example
- Add shapes code block.
- Merge branch 'shapes-example' into 'master'
Use Element.classifyDevice to choose between icons and labels in nav bar
On by
Also tweak font (and icons) size on small screens.
Also break some long lines in code.
index e75ff71..bb9aaa1 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -503,14 +503,16 @@ contentNavigationBar { location, scroll, viewport } =
= , label = "Home"
= , icon =
= FeatherIcons.home
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/preparation.html"
= , label = "Get ready"
= , icon =
= FeatherIcons.bookOpen
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/day-1.html"
@@ -563,11 +565,25 @@ contentNavigationBar { location, scroll, viewport } =
= )
= { url = link.url
= , label =
- if viewport.width < 600 then
- Element.el [ Element.centerX ] link.icon
+ Element.el [ Element.centerX ]
+ (case ( device.class, device.orientation ) of
+ ( Element.Phone, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
+
+ ( Element.Tablet, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
=
- else
- Element.el [ Element.centerX ] (Element.text link.label)
+ _ ->
+ Element.text link.label
+ )
= }
=
= linksRow =
@@ -585,6 +601,9 @@ contentNavigationBar { location, scroll, viewport } =
= , Font.size 18
= ]
=
+ device =
+ Element.classifyDevice viewport
+
= progressBar : Int -> Int -> Float -> Element Msg
= progressBar total done progress =
= Element.row [ Element.width Element.fill ]
@@ -599,13 +618,15 @@ contentNavigationBar { location, scroll, viewport } =
= , Element.height (Element.px 4)
= ]
= [ Element.el
- [ Element.width (Element.fillPortion (round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color (Element.rgb 0 0.6 0)
+ , Background.color Mark.Custom.colors.badass
= ]
= Element.none
= , Element.el
- [ Element.width (Element.fillPortion (1000 - round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (1000 - round (progress * 1000)))
= , Element.height (Element.px 4)
= ]
= Element.noneDisable font-size-adjusting on mobile devices
On by
index af1a472..c08e7b3 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -17,6 +17,7 @@ import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
=import Element.Events
+import Element.Extra as Element
=import Element.Font as Font
=import Element.Input as Input
=import Element.Lazy
@@ -335,6 +336,10 @@ view model =
= Element.htmlAttribute (Html.Attributes.id "app-container")
= , Element.htmlAttribute (Html.Attributes.lang "en")
= , Font.family [ Font.typeface "Montserrat", Font.sansSerif ]
+ , Element.css "text-size-adjust" "none"
+ , Element.css "-webkit-text-size-adjust" "none"
+ , Element.css "-moz-text-size-adjust" "none"
+ , Element.css "-ms-text-size-adjust" "none"
= , Element.inFront navigationBar
= ]
= ]Merge branch 'fix-mobile-font-size-adjustment' into 'master'
On by
Disable font-size-adjusting on mobile devices
See merge request software-garden/software-garden.gitlab.io!13
Merge branch 'home-page-links' into 'master'
On by
Use Element.classifyDevice to choose between icons and labels in nav bar
See merge request software-garden/software-garden.gitlab.io!14
Revert "Merge branch 'home-page-links' into 'master'"
On by
This reverts merge request !14
index f0910c0..104eefa 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -508,16 +508,14 @@ contentNavigationBar { location, scroll, viewport } =
= , label = "Home"
= , icon =
= FeatherIcons.home
- |> FeatherIcons.toHtml
- [ Html.Attributes.style "height" "1em" ]
+ |> FeatherIcons.toHtml []
= |> Element.html
= }
= , { url = "/preparation.html"
= , label = "Get ready"
= , icon =
= FeatherIcons.bookOpen
- |> FeatherIcons.toHtml
- [ Html.Attributes.style "height" "1em" ]
+ |> FeatherIcons.toHtml []
= |> Element.html
= }
= , { url = "/day-1.html"
@@ -570,25 +568,11 @@ contentNavigationBar { location, scroll, viewport } =
= )
= { url = link.url
= , label =
- Element.el [ Element.centerX ]
- (case ( device.class, device.orientation ) of
- ( Element.Phone, Element.Portrait ) ->
- Element.el
- [ Font.size 24
- , Element.paddingXY 0 20
- ]
- link.icon
-
- ( Element.Tablet, Element.Portrait ) ->
- Element.el
- [ Font.size 24
- , Element.paddingXY 0 20
- ]
- link.icon
+ if viewport.width < 600 then
+ Element.el [ Element.centerX ] link.icon
=
- _ ->
- Element.text link.label
- )
+ else
+ Element.el [ Element.centerX ] (Element.text link.label)
= }
=
= linksRow =
@@ -606,9 +590,6 @@ contentNavigationBar { location, scroll, viewport } =
= , Font.size 18
= ]
=
- device =
- Element.classifyDevice viewport
-
= progressBar : Int -> Int -> Float -> Element Msg
= progressBar total done progress =
= Element.row [ Element.width Element.fill ]
@@ -623,15 +604,13 @@ contentNavigationBar { location, scroll, viewport } =
= , Element.height (Element.px 4)
= ]
= [ Element.el
- [ Element.width
- (Element.fillPortion (round (progress * 1000)))
+ [ Element.width (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color Mark.Custom.colors.badass
+ , Background.color (Element.rgb 0 0.6 0)
= ]
= Element.none
= , Element.el
- [ Element.width
- (Element.fillPortion (1000 - round (progress * 1000)))
+ [ Element.width (Element.fillPortion (1000 - round (progress * 1000)))
= , Element.height (Element.px 4)
= ]
= Element.noneMerge branch 'revert-9a34ba76' into 'master'
On by
Revert home-page-links from master
See merge request software-garden/software-garden.gitlab.io!15
Use Element.classifyDevice to choose between icons and labels in nav bar
On by
Also tweak font (and icons) size on small screens.
Also break some long lines in code.
index 104eefa..f0910c0 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -508,14 +508,16 @@ contentNavigationBar { location, scroll, viewport } =
= , label = "Home"
= , icon =
= FeatherIcons.home
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/preparation.html"
= , label = "Get ready"
= , icon =
= FeatherIcons.bookOpen
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/day-1.html"
@@ -568,11 +570,25 @@ contentNavigationBar { location, scroll, viewport } =
= )
= { url = link.url
= , label =
- if viewport.width < 600 then
- Element.el [ Element.centerX ] link.icon
+ Element.el [ Element.centerX ]
+ (case ( device.class, device.orientation ) of
+ ( Element.Phone, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
+
+ ( Element.Tablet, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
=
- else
- Element.el [ Element.centerX ] (Element.text link.label)
+ _ ->
+ Element.text link.label
+ )
= }
=
= linksRow =
@@ -590,6 +606,9 @@ contentNavigationBar { location, scroll, viewport } =
= , Font.size 18
= ]
=
+ device =
+ Element.classifyDevice viewport
+
= progressBar : Int -> Int -> Float -> Element Msg
= progressBar total done progress =
= Element.row [ Element.width Element.fill ]
@@ -604,13 +623,15 @@ contentNavigationBar { location, scroll, viewport } =
= , Element.height (Element.px 4)
= ]
= [ Element.el
- [ Element.width (Element.fillPortion (round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color (Element.rgb 0 0.6 0)
+ , Background.color Mark.Custom.colors.badass
= ]
= Element.none
= , Element.el
- [ Element.width (Element.fillPortion (1000 - round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (1000 - round (progress * 1000)))
= , Element.height (Element.px 4)
= ]
= Element.noneMerge branch 'home-page-links' into 'master'
On by
Home page links
See merge request software-garden/software-garden.gitlab.io!16
In progress bar replace badass color with green
On by
index f0910c0..3f0ebba 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -615,7 +615,7 @@ contentNavigationBar { location, scroll, viewport } =
= [ Element.el
= [ Element.width (Element.fillPortion done)
= , Element.height (Element.px 4)
- , Background.color (Element.rgb 0 0.6 0)
+ , Background.color Mark.Custom.colors.green
= ]
= Element.none
= , Element.row
@@ -626,7 +626,7 @@ contentNavigationBar { location, scroll, viewport } =
= [ Element.width
= (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color Mark.Custom.colors.badass
+ , Background.color Mark.Custom.colors.green
= ]
= Element.none
= , Element.elindex ae6f285..745e5af 100644
--- a/src/Mark/Custom.elm
+++ b/src/Mark/Custom.elm
@@ -555,6 +555,6 @@ colors =
= , pink = Element.rgb 1 0.6 0.6
= , white = Element.rgb 1 1 1
= , black = Element.rgb 0 0 0
- , badass = Element.rgb255 0xBA 0xDA 0x55
+ , green = Element.rgb 0 0.6 0
= , blue = Element.rgb 0.07 0.52 0.81
= }Merge branch 'green-progress-bar' into 'master'
On by
In progress bar replace badass color with green
See merge request software-garden/software-garden.gitlab.io!17
Remove Transformations.apply, expose toString instead
On by
Apply was just mapping the list with toString and joining with a " ". In our opinion it's easy enough to do it in consuming code and it doesn't require a separate function.
Co-Authored-By: Fana jewiet@outlook.com
index 6e99a6f..b934bac 100644
--- a/src/Examples/Circle.elm
+++ b/src/Examples/Circle.elm
@@ -154,11 +154,12 @@ ui config =
= , Svg.Attributes.cx "0"
= , Svg.Attributes.cy "0"
= , Svg.Attributes.fill fill
- , Svg.Attributes.transform <|
- Transformations.apply
- [ Rotate angle
- , Translate config.radius 0
- ]
+ , [ Rotate angle
+ , Translate config.radius 0
+ ]
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
= ]
= []
=
@@ -177,10 +178,9 @@ ui config =
= , Svg.Attributes.y2 "0"
= , Svg.Attributes.stroke "pink"
= , Svg.Attributes.strokeDasharray config.radi
- , Svg.Attributes.transform <|
- Transformations.apply
- [ Rotate angle
- ]
+ , Rotate angle
+ |> Transformations.toString
+ |> Svg.Attributes.transform
= ]
= []
= inindex f4a9dbf..fee3a3d 100644
--- a/src/Examples/NestedTransformations.elm
+++ b/src/Examples/NestedTransformations.elm
@@ -128,17 +128,18 @@ ui model =
= nestTransformationsGroup : Group -> Array Transformation -> Svg Msg -> Svg Msg
= nestTransformationsGroup group transformations item =
= let
- transformation =
- transformations
- |> Array.toList
- |> Transformations.apply
-
= color =
= group
= |> groupName
= |> String.toLower
= in
- g [ transform transformation ]
+ g
+ [ transformations
+ |> Array.toList
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> transform
+ ]
= [ line
= [ x1 "0"
= , x2 "100"index 15d42cf..d08ff63 100644
--- a/src/Examples/Transformations.elm
+++ b/src/Examples/Transformations.elm
@@ -93,7 +93,12 @@ ui model =
= ]
=
= shape =
- g [ transform (Transformations.apply transformations) ]
+ g
+ [ transformations
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> transform
+ ]
= [ line
= [ x1 "0"
= , x2 "100"
@@ -267,8 +272,7 @@ transformationUI index transformation =
= ]
= [ Element.row [ Element.width Element.fill ]
= [ transformation
- |> List.singleton
- |> Transformations.apply
+ |> Transformations.toString
= |> Element.text
= |> Element.el [ Element.width Element.fill ]
= , Input.button []index d72965f..5b78597 100644
--- a/src/Transformations.elm
+++ b/src/Transformations.elm
@@ -1,6 +1,6 @@
=module Transformations exposing
= ( Transformation(..)
- , apply
+ , toString
= )
=
=
@@ -11,34 +11,27 @@ type Transformation
= | Rotate Float
=
=
-apply : List Transformation -> String
-apply transformations =
- let
- toString : Transformation -> String
- toString transformation =
- case transformation of
- Identity ->
- ""
+toString : Transformation -> String
+toString transformation =
+ case transformation of
+ Identity ->
+ ""
=
- Scale x y ->
- "scale("
- ++ String.fromFloat x
- ++ ", "
- ++ String.fromFloat y
- ++ ")"
+ Scale x y ->
+ "scale("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
=
- Translate x y ->
- "translate("
- ++ String.fromFloat x
- ++ ", "
- ++ String.fromFloat y
- ++ ")"
+ Translate x y ->
+ "translate("
+ ++ String.fromFloat x
+ ++ ", "
+ ++ String.fromFloat y
+ ++ ")"
=
- Rotate angle ->
- "rotate("
- ++ String.fromFloat angle
- ++ ")"
- in
- transformations
- |> List.map toString
- |> String.join " "
+ Rotate angle ->
+ "rotate("
+ ++ String.fromFloat angle
+ ++ ")"Make each shape in Examples.Shapes take a list of transformations
On by
We cannot nest groups due to Elm Markup limitation, so the next best thing is to repeat the transformations and simulate nesting that way.
Co-Authored-By: Fana jewiet@outlook.com
index 76067a3..24cc5df 100644
--- a/src/Examples/Shapes.elm
+++ b/src/Examples/Shapes.elm
@@ -6,6 +6,8 @@ module Examples.Shapes exposing
= , ui
= )
=
+import Axis2d
+import Basics.Extra exposing (inDegrees)
=import Circle2d
=import Element exposing (Element)
=import Geometry.Svg
@@ -15,7 +17,7 @@ import LineSegment2d
=import Point2d exposing (Point2d)
=import Svg exposing (Attribute, Svg)
=import Svg.Attributes
-import Transformations
+import Transformations exposing (Transformation(..))
=
=
=type alias Config =
@@ -33,22 +35,17 @@ type alias Container =
=
=type Shape
= = Dot
- { cx : Float
- , cy : Float
+ { transformations : List Transformation
= , radius : Float
= , color : String
= }
= | Line
- { x1 : Float
- , y1 : Float
- , x2 : Float
- , y2 : Float
+ { length : Float
+ , transformations : List Transformation
= , color : String
= }
= | Group
- { rotation : Float
- , x : Float
- , y : Float
+ { transformations : List Transformation
= }
= (List Shape)
=
@@ -62,43 +59,44 @@ defaults =
= }
= , shapes =
= [ Dot
- { cx = 0
- , cy = 0
+ { transformations = []
= , radius = 10
= , color = "skyblue"
= }
= , Line
- { x1 = 0.0
- , y1 = 0.0
- , x2 = 20.0
- , y2 = 30.0
+ { length = sqrt ((20 ^ 2) + (30 ^ 2))
+ , transformations =
+ [ atan2 20 30
+ |> inDegrees
+ |> Rotate
+ ]
= , color = "green"
= }
- , Group { rotation = -45.0, x = 0.0, y = 0.0 }
+ , Group
+ { transformations =
+ [ Rotate -45.0
+ ]
+ }
= [ Line
- { x1 = 20.0
- , y1 = 0.0
- , x2 = 70.0
- , y2 = 0.0
+ { transformations = [ Translate 20 0 ]
+ , length = 50
= , color = "orange"
= }
= , Dot
- { cx = 100
- , cy = 0.0
+ { transformations = [ Translate 100 0 ]
= , radius = 20.0
= , color = "red"
= }
- , Group { rotation = -45.0, x = 100.0, y = 0.0 }
+ , Group
+ { transformations = [ Rotate -45, Translate 100 0 ]
+ }
= [ Line
- { x1 = 20.0
- , y1 = 0.0
- , x2 = 70.0
- , y2 = 0.0
+ { length = 50
+ , transformations = [ Translate 20 0 ]
= , color = "orange"
= }
= , Dot
- { cx = 100
- , cy = 0.0
+ { transformations = [ Translate 100 0 ]
= , radius = 20.0
= , color = "red"
= }
@@ -123,34 +121,35 @@ ui { container, shapes } =
= shape : Shape -> Svg msg
= shape s =
= case s of
- Dot { cx, cy, color, radius } ->
- ( cx, cy )
- |> Point2d.fromCoordinates
+ Dot { transformations, color, radius } ->
+ Point2d.origin
= |> Circle2d.withRadius radius
- |> Geometry.Svg.circle2d [ Svg.Attributes.fill color ]
-
- Line { x1, y1, x2, y2, color } ->
- let
- a =
- Point2d.fromCoordinates ( x1, y1 )
+ |> Geometry.Svg.circle2d
+ [ Svg.Attributes.fill color
+ , transformations
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
+ ]
=
- b =
- Point2d.fromCoordinates ( x2, y2 )
- in
- LineSegment2d.from a b
+ Line { length, transformations, color } ->
+ LineSegment2d.along Axis2d.x 0 length
= |> Geometry.Svg.lineSegment2d
= [ Svg.Attributes.stroke color
= , Svg.Attributes.strokeWidth "1"
+ , transformations
+ |> List.map Transformations.toString
+ |> String.join " "
+ |> Svg.Attributes.transform
= ]
=
- Group { rotation, x, y } ss ->
+ Group { transformations } ss ->
= ss
= |> List.map shape
= |> Svg.g
- [ [ Transformations.Rotate rotation
- , Transformations.Translate x y
- ]
- |> Transformations.apply
+ [ transformations
+ |> List.map Transformations.toString
+ |> String.join " "
= |> Svg.Attributes.transform
= ]
=index af1a472..e8c7294 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -49,7 +49,7 @@ import Result.Extra as Result
=import Routes exposing (Route)
=import Svg.Attributes
=import Task
-import Transformations
+import Transformations exposing (Transformation)
=import Url exposing (Url)
=
=
@@ -745,7 +745,6 @@ document =
= , circle
= , protractor
= , gradient
- , transformations
= , nestedTransformations
= , cartesianCoordinates
= , polarCoordinates
@@ -810,54 +809,80 @@ document =
=
= dot : Mark.Block Examples.Shapes.Shape
= dot =
- Mark.record4 "Dot"
- (\cx cy radius color ->
+ Mark.record3 "Dot"
+ (\radius color transformations ->
= Examples.Shapes.Dot
- { cx = cx
- , cy = cy
+ { transformations = transformations
= , radius = radius
= , color = color
= }
= )
- (Mark.field "cx" Mark.float)
- (Mark.field "cy" Mark.float)
= (Mark.field "radius" Mark.float)
= (Mark.field "color" Mark.string)
+ (Mark.field "transformations"
+ (Mark.manyOf
+ [ identity
+ , translate
+ , rotate
+ ]
+ )
+ )
=
= line : Mark.Block Examples.Shapes.Shape
= line =
- Mark.record5 "Line"
- (\x1 y1 x2 y2 color ->
+ Mark.record3 "Line"
+ (\color length transformations ->
= Examples.Shapes.Line
- { x1 = x1
- , y1 = y1
- , x2 = x2
- , y2 = y2
+ { transformations = transformations
= , color = color
+ , length = length
= }
= )
- (Mark.field "x1" Mark.float)
- (Mark.field "y1" Mark.float)
- (Mark.field "x2" Mark.float)
- (Mark.field "y2" Mark.float)
= (Mark.field "color" Mark.string)
+ (Mark.field "length" Mark.float)
+ (Mark.field "transformations"
+ (Mark.manyOf
+ [ identity
+ , translate
+ , rotate
+ ]
+ )
+ )
=
= -- TODO: Implement a recursive group block (that can contain nested groups)
= group : Mark.Block Examples.Shapes.Shape
= group =
- Mark.record4 "Group"
- (\x y rotation children ->
+ Mark.record2 "Group"
+ (\children transformations ->
= Examples.Shapes.Group
- { x = x
- , y = y
- , rotation = rotation
+ { transformations = transformations
= }
= children
= )
+ (Mark.field "children" (Mark.manyOf [ dot, line ]))
+ (Mark.field "transformations"
+ (Mark.manyOf
+ [ identity
+ , translate
+ , rotate
+ ]
+ )
+ )
+
+ identity : Mark.Block Transformation
+ identity =
+ Mark.stub "Identity" Transformations.Identity
+
+ translate : Mark.Block Transformation
+ translate =
+ Mark.record2 "Translate"
+ Transformations.Translate
= (Mark.field "x" Mark.float)
= (Mark.field "y" Mark.float)
- (Mark.field "rotation" Mark.float)
- (Mark.field "children" (Mark.manyOf [ dot, line ]))
+
+ rotate : Mark.Block Transformation
+ rotate =
+ Mark.block "Rotate" Transformations.Rotate Mark.float
= in
= Mark.block "Shapes"
= render
@@ -897,20 +922,6 @@ document =
= in
= Mark.stub "Gradient" render
=
- transformations : Mark.Block (Examples.Model -> Element Msg)
- transformations =
- let
- render model =
- model.transformations
- |> Examples.Transformations.ui
- |> Element.el
- [ Element.width Element.fill
- ]
- |> Element.map Examples.TransformationsMsg
- |> Element.map ExamplesMsg
- in
- Mark.stub "Transformations" render
-
= nestedTransformations : Mark.Block (Examples.Model -> Element Msg)
= nestedTransformations =
= letMerge remote-tracking branch 'origin/master' into shapes-example
On by
Add a little dot at the end of the progress bar
On by
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
On by
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'
On by
Progress bar dot
See merge request software-garden/software-garden.gitlab.io!19
Use shapes block on day 4.
On by
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.
On by
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
On by
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'
On by
Create Motivation page
See merge request software-garden/software-garden.gitlab.io!20
Restyle emphasize block on day 4
On by
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
On by
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
On by
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
On by
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
On by
I have commited changes before pulling.
Add shapes block to day 1, day 2 and day 3.
On by
index b8bce0e..6b759b8 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -123,10 +123,12 @@ We want to display a dot at the center of the screen, like this:
=
=
= | Dot
- cx = 0
- cy = 0
= color = skyblue
= radius = 10
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=Below is the complete code to draw a dot like this, but don't type it in your editor yet! We are going to recreate it together, step by step.
=
@@ -221,9 +223,11 @@ Reload the browser. You should see something like this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=At this point we have a dot on the screen - it's at the top left corner of the viewport (the area of the browser window where the content is displayed). We can see only a quarter of it - the rest is outside of the viewport.
=
@@ -260,9 +264,11 @@ Reloading the browser should reveal something like this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=Since the dot is inside the {Code|svg} element, and the {Code|svg} element doesn't cover the center of the screen, it's impossible to place the dot at the center. Before anything else, let's make the {Code|svg} fill entire {Definition|term=viewport|definiens=the area of the browser window where the content is displayed}.
=
@@ -323,9 +329,11 @@ Reload the browser. The SVG space now fills the entire viewport. Even the small
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=It should now be possible to place our dot in the center of the screen. Currently the dot is in the top left corner of the viewport, but at least the parent {Code|svg} element is covering it, so the center of the viewport is somewher within the {Code|svg} element.
=
@@ -400,9 +408,11 @@ To change the position of the dot, we can use the {Code|cx} and {Code|cy} attrib
=
= | Dot
= radius = 10
- cx = 100
- cy = 50
= color = black
+ transformations =
+ | Translate
+ x = 100
+ y = 50
=
=| Note
= The {Code|cx} stands for /center x/ and {Code|cy} for /center y/, where center refers to the circle. We will discuss what the center of the circle is in more exact terms on day 2, but you probably get the concept.
@@ -505,9 +515,11 @@ There are only two changes here. First we reset the {Code|cx} and {Code|cy} attr
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = black
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=You can also remove line 19 to remove the pink background, or set it to some other color.
=
@@ -571,9 +583,11 @@ The only change is on line 13. Reload the browser and see this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=| Emphasize
= Wow!index 5a1bac3..afa080b 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -101,15 +101,19 @@ Now the list spans from lines 9 to 23 and contains two items: skyblue and orange
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = orange
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=Oh oh! The list contains two dots, but we can only see the orange one on the screen. Where is the blue one? It's behind the orange. Recall how the cartesian coordinates work: if {Code|x} and {Code|y} of the center are the same, then the dots are in the same place. If we want to see both dots, let's move one of them to a different place, like this:
=
@@ -175,15 +179,19 @@ Now you should see this:
=
= | Dot
= radius = 10
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Dot
= radius = 10
- cx = 50
- cy = 0
= color = orange
+ transformations =
+ | Translate
+ x = 50
+ y = 0
=
=We can add more dots, by simply multiplying the code blocks inside the list. Each block must be separated from others with a {Code|,} (comma). Each time the {Code|cx} and {Code|cy} coordinates need to be different. We can also give dots different colors. Make five of them.
=
@@ -263,9 +271,11 @@ The {Code|r} attribute stands for radius. Then it was basically dictating the si
=
= | Dot
= radius = 40
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Shapes
= | Container
@@ -275,9 +285,11 @@ The {Code|r} attribute stands for radius. Then it was basically dictating the si
=
= | Dot
= radius = 60
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
= | Shapes
= | Container
@@ -287,9 +299,11 @@ The {Code|r} attribute stands for radius. Then it was basically dictating the si
=
= | Dot
= radius = 80
- cx = 0
- cy = 0
= color = skyblue
+ transformations =
+ | Translate
+ x = 0
+ y = 0
=
=This time the radius will affect the size of an imaginary circle on which the dots are laying.
=index 0046d76..f39b2ad 100644
--- a/content/day-3.txt
+++ b/content/day-3.txt
@@ -1057,95 +1057,88 @@ You should see something like this in the browser:
= fill = True
= viewBox = -100 -100 200 200
=
- | Group
- x = 0
- y = 0
- rotation = 0
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = skyblue
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = skyblue
-
- | Group
- x = 0
- y = 0
- rotation = 72
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = orange
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = orange
-
- | Group
- x = 0
- y = 0
- rotation = 144
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = red
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = red
-
- | Group
- x = 0
- y = 0
- rotation = 216
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = lime
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = lime
-
- | Group
- x = 0
- y = 0
- rotation = 288
- children =
- | Line
- x1 = 0
- y1 = 0
- x2 = 80
- y2 = 0
- color = maroon
-
- | Dot
- cx = 80
- cy = 0
- radius = 10
- color = maroon
+ | Line
+ length = 80
+ color = skyblue
+ transformations =
+ | Rotate
+ 0
+ | Dot
+ radius = 10
+ color = skyblue
+ transformations =
+ | 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
+
=
=| Emphasize
= Congratulations!Merge branch 'shapes-example' of gitlab.com:software-garden/software-garden.gitlab.io into shapes-example
On by
Merge remote-tracking branch 'origin/master' into shapes-example
On by
Merge branch 'growing-tree' into 'master'
On by
Add a growing option to the tree example.
See merge request software-garden/software-garden.gitlab.io!21
Merge remote-tracking branch 'origin/master' into shapes-example
On by
Add shapes code block.
On by
Changed code monospace to code window.
index 50a54e8..5b8499f 100644
--- a/content/day-4.txt
+++ b/content/day-4.txt
@@ -2645,7 +2645,7 @@ We also have to change the definition of {Code|main}. Segment no longer takes tw
=
=The result should be exactly like we wanted it to be:
=
-| Monospace
+| Window
= | Tree
= | Axiom
= color = brownMerge branch 'shapes-example' into 'master'
On by
Shapes example
See merge request software-garden/software-garden.gitlab.io!18