Commits: 6
Embed the cartesian coordinates sample in the slide
Making the SVG element fit the slide was difficult. In the end we are relying on setting the width of it's parent to absolute value in pixels.
Co-Authored-By: Sam Phillips samuel.rodney.phillips@gmail.com
index 609bebd..8d5eb8f 100644
--- a/src/CartesianCoordinates.elm
+++ b/src/CartesianCoordinates.elm
@@ -1,4 +1,14 @@
-module CartesianCoordinates exposing (main)
+module CartesianCoordinates exposing
+ ( Flags
+ , Model
+ , Msg
+ , init
+ , main
+ , subscriptions
+ , ui
+ , update
+ , view
+ )
=
=import Browser
=import CartesianPlane exposing (graph)
@@ -44,80 +54,17 @@ init () =
=
=view : Model -> Html.Html Msg
=view model =
- Element.layout
- [ Element.height Element.fill -- (Element.px 600)
- , Element.width Element.fill
- ]
- <|
- Element.column
- [ Element.height Element.fill
- , Element.width <| Element.px 600
- , Element.centerX
- , Element.spacing 30
- , Element.padding 30
- ]
- [ Element.el [ Element.height <| Element.px 400 ] <|
- Element.html <|
- graph
- [ circle
- [ cx <| String.fromFloat model.x
- , cy <| String.fromFloat model.y
- , r "0.01"
- , fill "magenta"
- ]
- []
- , text_
- [ x <| String.fromFloat (model.x + 0.03)
- , y <| String.fromFloat model.y
- , fontSize "0.05"
- , dominantBaseline "central"
- ]
- [ text <| Debug.toString ( model.x, model.y ) ]
- ]
- , Input.slider
- [ Element.behindContent
- (Element.el
- [ Element.width Element.fill
- , Element.height (Element.px 2)
- , Element.centerY
- , Background.color <| Element.rgb 0.7 0.7 0.7
- , Border.rounded 2
- ]
- Element.none
- )
- ]
- { onChange = SetX
- , label =
- Input.labelBelow [ Element.centerX ] <|
- Element.text ("x value: " ++ String.fromFloat model.x)
- , min = -1
- , max = 1
- , value = model.x
- , thumb = Input.defaultThumb
- , step = Just 0.01
- }
- , Input.slider
- [ Element.behindContent
- (Element.el
- [ Element.width Element.fill
- , Element.height (Element.px 2)
- , Element.centerY
- , Background.color <| Element.rgb 0.7 0.7 0.7
- , Border.rounded 2
- ]
- Element.none
- )
- ]
- { onChange = SetY
- , label =
- Input.labelBelow [ Element.centerX ] <|
- Element.text ("y value: " ++ String.fromFloat model.y)
- , min = -1
- , max = 1
- , value = model.y
- , thumb = Input.defaultThumb
- , step = Just 0.01
- }
+ let
+ wrapper element =
+ Element.el
+ [ Element.width (Element.maximum 600 Element.fill), Element.centerX ]
+ element
+ in
+ ui model
+ |> wrapper
+ |> Element.layout
+ [ Element.height Element.fill -- (Element.px 600)
+ , Element.width Element.fill
= ]
=
=
@@ -134,3 +81,79 @@ update msg model =
=subscriptions : Model -> Sub Msg
=subscriptions model =
= Sub.none
+
+
+ui model =
+ Element.column
+ [ Element.width Element.fill
+ , Element.centerX
+ , Element.spacing 30
+ , Element.padding 30
+ ]
+ [ Element.el
+ [ Element.height Element.fill
+ , Element.width Element.fill
+ ]
+ <|
+ Element.html <|
+ graph
+ [ circle
+ [ cx <| String.fromFloat model.x
+ , cy <| String.fromFloat model.y
+ , r "0.01"
+ , fill "magenta"
+ ]
+ []
+ , text_
+ [ x <| String.fromFloat (model.x + 0.03)
+ , y <| String.fromFloat model.y
+ , fontSize "0.05"
+ , dominantBaseline "central"
+ ]
+ [ text <| Debug.toString ( model.x, model.y ) ]
+ ]
+ , Input.slider
+ [ Element.behindContent
+ (Element.el
+ [ Element.width Element.fill
+ , Element.height (Element.px 2)
+ , Element.centerY
+ , Background.color <| Element.rgb 0.7 0.7 0.7
+ , Border.rounded 2
+ ]
+ Element.none
+ )
+ ]
+ { onChange = SetX
+ , label =
+ Input.labelBelow [ Element.centerX ] <|
+ Element.text ("x value: " ++ String.fromFloat model.x)
+ , min = -1
+ , max = 1
+ , value = model.x
+ , thumb = Input.defaultThumb
+ , step = Just 0.01
+ }
+ , Input.slider
+ [ Element.behindContent
+ (Element.el
+ [ Element.width Element.fill
+ , Element.height (Element.px 2)
+ , Element.centerY
+ , Background.color <| Element.rgb 0.7 0.7 0.7
+ , Border.rounded 2
+ ]
+ Element.none
+ )
+ ]
+ { onChange = SetY
+ , label =
+ Input.labelBelow [ Element.centerX ] <|
+ Element.text ("y value: " ++ String.fromFloat model.y)
+ , min = -1
+ , max = 1
+ , value = model.y
+ , thumb = Input.defaultThumb
+ , step = Just 0.01
+ }
+ ]index 394005d..0d82b4a 100644
--- a/src/CartesianPlane.elm
+++ b/src/CartesianPlane.elm
@@ -33,6 +33,8 @@ graph shapes =
= svg
= [ viewBox "-1 -1 2 2"
= , preserveAspectRatio "xMidYMid meet"
+ , Svg.Attributes.width "100%"
+ , Svg.Attributes.height "100%"
= , Svg.Attributes.style "width: 100%, height: 100%"
= ]
= (background :: shapes)index 0e51aaa..da86dd4 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -2,11 +2,13 @@ module Main exposing (main)
=
=import Browser exposing (Document)
=import Browser.Events
+import CartesianCoordinates
=import Dict
=import Element
=import Element.Font as Font
-import Html exposing (Html)
-import Html.Attributes as Html
+import Element.Keyed
+import Html
+import Html.Attributes
=import Json.Decode as Decode exposing (Decoder)
=import Presentation exposing (Slide, markdown)
=
@@ -26,18 +28,29 @@ type alias Flags =
=
=type alias Model =
= { currentSlide : Int
+
+ -- Nested programs
+ , cartesianCoordinates : CartesianCoordinates.Model
= }
=
=
=type Msg
= = Next
= | Previous
+ -- Nested programs
+ | CartesianCoordinatesMsg CartesianCoordinates.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
=init flags =
- ( { currentSlide = 0 }
- , Cmd.none
+ let
+ ( cartesianCoordinatesModel, cartesianCoordinatesCmd ) =
+ CartesianCoordinates.init ()
+ in
+ ( { currentSlide = 0
+ , cartesianCoordinates = cartesianCoordinatesModel
+ }
+ , Cmd.batch [ Cmd.map CartesianCoordinatesMsg cartesianCoordinatesCmd ]
= )
=
=
@@ -51,10 +64,19 @@ view model =
= ]
= <|
= Element.column
- [ Element.centerX, Element.centerY, Font.center ]
- [ slides
+ [ Element.centerX
+ , Font.center
+ , Element.height Element.fill
+ , Element.width (Element.maximum 800 Element.fill)
+ ]
+ [ slides model
= |> Dict.get model.currentSlide
- |> Maybe.map (Element.column [ Element.height Element.fill ])
+ |> Maybe.map
+ (Element.column
+ [ Element.width Element.fill
+ , Element.centerY
+ ]
+ )
= |> Maybe.withDefault (Element.text "404: Slide not found")
= ]
= ]
@@ -67,7 +89,7 @@ update msg model =
= Next ->
= ( { model
= | currentSlide =
- min (Dict.size slides - 1) (model.currentSlide + 1)
+ min (Dict.size (slides model) - 1) (model.currentSlide + 1)
= }
= , Cmd.none
= )
@@ -80,6 +102,16 @@ update msg model =
= , Cmd.none
= )
=
+ -- Nested programs
+ CartesianCoordinatesMsg msg_ ->
+ let
+ ( model_, cmd_ ) =
+ CartesianCoordinates.update msg_ model.cartesianCoordinates
+ in
+ ( { model | cartesianCoordinates = model_ }
+ , Cmd.map CartesianCoordinatesMsg cmd_
+ )
+
=
=subscriptions model =
= let
@@ -95,6 +127,12 @@ subscriptions model =
= "ArrowRight" ->
= Decode.succeed Next
=
+ "a" ->
+ Decode.succeed Previous
+
+ "d" ->
+ Decode.succeed Next
+
= _ ->
= Decode.fail "Unsupported key"
= )
@@ -102,7 +140,7 @@ subscriptions model =
= Browser.Events.onKeyPress handleKeyPress
=
=
-slides =
+slides model =
= Dict.fromList <|
= List.indexedMap Tuple.pair <|
= [ markdown """
@@ -111,6 +149,23 @@ slides =
= ### for non-programmers
= """
= ]
+ :: [ markdown """
+ Move sliders to change the `x` and `y` coordinates of the dot. It's like moving a thing on a table by telling how far left, right, up or down should it go.
+ """
+ , model.cartesianCoordinates
+ |> CartesianCoordinates.ui
+ |> Element.map CartesianCoordinatesMsg
+ |> Element.el
+ [ Element.centerX
+ , Element.width (Element.maximum 600 Element.fill)
+ ]
+ ]
+ -- :: [ markdown """
+ -- # FP-Art!
+ -- ## A functional programming workshop
+ -- ### for non-programmers
+ -- """
+ -- ]
= :: [ markdown """
= ## Setup
= """
@@ -157,7 +212,16 @@ slides =
= :: [ markdown """
= You should see a window like this
= """
- , Element.el [ Element.height Element.fill, Element.width Element.fill ] <| Element.html <| Html.img [ Html.class "plain", Html.alt "Mac Terminal app window", Html.src "../assets/mac-terminal-window.png" ] []
+ , Html.img
+ [ Html.Attributes.alt "Mac Terminal app window"
+ , Html.Attributes.src "../assets/mac-terminal-window.png"
+ ]
+ []
+ |> Element.html
+ |> Element.el
+ [ Element.height Element.fill
+ , Element.width Element.fill
+ ]
= , markdown """
= Here is some more markdown.
= """Indent the slides content
Co-Authored-By: Sam Phillips samuel.rodney.phillips@gmail.com
index da86dd4..d00c059 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -147,7 +147,7 @@ slides model =
= # FP-Art!
= ## A functional programming workshop
= ### for non-programmers
- """
+ """
= ]
= :: [ markdown """
= Move sliders to change the `x` and `y` coordinates of the dot. It's like moving a thing on a table by telling how far left, right, up or down should it go.
@@ -167,51 +167,50 @@ slides model =
= -- """
= -- ]
= :: [ markdown """
- ## Setup
- """
+ ## Setup
+ """
= , markdown """
- # Stuff
- """
+ # Stuff
+ """
= ]
= :: [ markdown """
- > This setup instructions are based on an assumption that you are using a Mac.
- >
- > If you are using Linux or BSD, then you probably know how to install stuff.
- >
- > If you are using anything else, then... well, good luck.
- >
- > The rest of the instructions should work with any platform.
-
- """ ]
+ > This setup instructions are based on an assumption that you are using a Mac.
+ >
+ > If you are using Linux or BSD, then you probably know how to install stuff.
+ >
+ > If you are using anything else, then... well, good luck.
+ >
+ > The rest of the instructions should work with any platform.
+
+ """ ]
= :: [ markdown """
=
- We will need:
+ We will need:
=
- - a text editor (I use [Atom][])
- - and [Elm programming language][]
+ - a text editor (I use [Atom][])
+ - and [Elm programming language][]
=
- [Atom]: https://atom.io/
- [Elm programming language]: https://elm-lang.org/
+ [Atom]: https://atom.io/
+ [Elm programming language]: https://elm-lang.org/
=
- """
+ """
= ]
= :: [ markdown """
+ We will use the terminal a little bit.
=
- We will use the terminal a little bit.
+ # :fa-terminal:
=
- # :fa-terminal:
+ Don't be scared. It's easy :)
=
- Don't be scared. It's easy :)
+ <!-- slide data-background-image="images/mac-launchpad-terminal.png" data-background-size="cover" data-background-position="top center"-->
=
- <!-- slide data-background-image="images/mac-launchpad-terminal.png" data-background-size="cover" data-background-position="top center"-->
+ > <p style="color: white">In Launchpad find a program called <code>terminal</code> and start it.</p>
=
- > <p style="color: white">In Launchpad find a program called <code>terminal</code> and start it.</p>
-
- """
+ """
= ]
= :: [ markdown """
- You should see a window like this
- """
+ You should see a window like this
+ """
= , Html.img
= [ Html.Attributes.alt "Mac Terminal app window"
= , Html.Attributes.src "../assets/mac-terminal-window.png"
@@ -223,312 +222,312 @@ slides model =
= , Element.width Element.fill
= ]
= , markdown """
- Here is some more markdown.
- """
+ Here is some more markdown.
+ """
= ]
= :: [ markdown """
=
-Now we are going to install few things.
+ Now we are going to install few things.
=
-- Homebrew (to install other things)
-- Elm programming language
-- Atom editor
+ - Homebrew (to install other things)
+ - Elm programming language
+ - Atom editor
=
-"""
+ """
= ]
= :: [ markdown """
=
-### Install Homebrew
+ ### Install Homebrew
=
-Follow instructions on the [Homebrew website](https://brew.sh/) by typing the following in the terminal (you probably want to copy and paste it):
+ Follow instructions on the [Homebrew website](https://brew.sh/) by typing the following in the terminal (you probably want to copy and paste it):
=
-```sh
-/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
-```
+ ```sh
+ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+ ```
=
-<small>
-Make sure that the command is exactly like the one above, including the `/` character at the beginning, the quotes and parentheses.
+ <small>
+ Make sure that the command is exactly like the one above, including the `/` character at the beginning, the quotes and parentheses.
=
-It will ask you to confirm several actions and ask for your password. It may take few minutes to finish, so get your coffee
-</small>
+ It will ask you to confirm several actions and ask for your password. It may take few minutes to finish, so get your coffee
+ </small>
=
-:fa-coffee:
+ :fa-coffee:
=
-Once it's done you should see a command prompt like that:
+ Once it's done you should see a command prompt like that:
=
-```
-~ your-name$
-```
+ ```
+ ~ your-name$
+ ```
=
=
-"""
+ """
= ]
= :: [ markdown """
=
-### Install the Elm programming language
+ ### Install the Elm programming language
=
-<small>Once we have Homebrew installed, we can use it to install the language.</small>
+ <small>Once we have Homebrew installed, we can use it to install the language.</small>
=
-Type the following in the terminal.
+ Type the following in the terminal.
=
-```sh
-brew install node elm
-```
+ ```sh
+ brew install node elm
+ ```
=
-and check if it works by typing:
+ and check if it works by typing:
=
-```
-elm repl
-```
+ ```
+ elm repl
+ ```
=
-"""
+ """
= ]
= :: [ markdown """
=
-Note that the command line changes. You should see something like that
+ Note that the command line changes. You should see something like that
=
-```
----- Elm 0.19.0 ----------------------------------------------------------------
-Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
---------------------------------------------------------------------------------
->
-```
+ ```
+ ---- Elm 0.19.0 ----------------------------------------------------------------
+ Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
+ --------------------------------------------------------------------------------
+ >
+ ```
=
-It's the Elm REPL
+ It's the Elm REPL
=
-<small>Read - Evaluate - Print Loop</small>
+ <small>Read - Evaluate - Print Loop</small>
=
-*[REPL]: Read - Evaluate - Print Loop.
+ *[REPL]: Read - Evaluate - Print Loop.
=
-"""
+ """
= ]
= :: [ markdown """
=
-Inside the REPL type
+ Inside the REPL type
=
-```
-2 + 2
-```
+ ```
+ 2 + 2
+ ```
=
-And expect to see
+ And expect to see
=
-```
----- Elm 0.19.0 ----------------------------------------------------------------
-Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
---------------------------------------------------------------------------------
-> 2 + 2
-4 : number
->
-```
+ ```
+ ---- Elm 0.19.0 ----------------------------------------------------------------
+ Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
+ --------------------------------------------------------------------------------
+ > 2 + 2
+ 4 : number
+ >
+ ```
=
-Easy, huh?
+ Easy, huh?
=
-"""
+ """
= ]
= :: [ markdown """
=
-We will learn more about REPL later. For now type `:exit` to close it.
+ We will learn more about REPL later. For now type `:exit` to close it.
=
-The command line should look like before again.
+ The command line should look like before again.
=
-"""
+ """
= ]
= :: [ markdown """
=
-### Install Atom text editor
+ ### Install Atom text editor
=
-Computer programs are represented as text, so the text editor is the most fundamental tool of a programmer. There is a lot of good text editors, but to get you started, we will use [Atom] here.
+ Computer programs are represented as text, so the text editor is the most fundamental tool of a programmer. There is a lot of good text editors, but to get you started, we will use [Atom] here.
=
-"""
+ """
= ]
= :: [ markdown """
=
-Type following in the terminal:
+ Type following in the terminal:
=
-```
-brew cask install atom
-```
+ ```
+ brew cask install atom
+ ```
=
-And start it with:
+ And start it with:
=
-```sh
-atom
-```
+ ```sh
+ atom
+ ```
=
-"""
+ """
= ]
= :: [ markdown """
=
-One last thing we need is Elm support for Atom editor. You can install it by typing in the terminal:
+ One last thing we need is Elm support for Atom editor. You can install it by typing in the terminal:
=
-```
-apm install language-elm
-```
+ ```
+ apm install language-elm
+ ```
=
-<small>APM is the Atom Package Manager, but don't pay much attention to it. We won't be using it again.</small>
+ <small>APM is the Atom Package Manager, but don't pay much attention to it. We won't be using it again.</small>
=
-"""
+ """
= ]
= :: [ markdown """
=
-**We are all set!**
+ **We are all set!**
=
-:smile:
+ :smile:
=
-"""
+ """
= ]
= :: [ markdown """
=
=
-# First program!
+ # First program!
=
-"""
+ """
= ]
= :: [ markdown """
=
-As mentioned before, programs are represented as text (called *the source code*).
+ As mentioned before, programs are represented as text (called *the source code*).
=
-The source code is stored in files
+ The source code is stored in files
=
-:fa-file:
+ :fa-file:
=
-and files are organized in directories
+ and files are organized in directories
=
-:fa-folder:
+ :fa-folder:
=
-"""
+ """
= ]
= :: [ markdown """
=
-So the first step is to create a directory for our new program. Let's call it `fpart`.
+ So the first step is to create a directory for our new program. Let's call it `fpart`.
=
-In the terminal type
+ In the terminal type
=
-```sh
-mkdir fpart/
-```
+ ```sh
+ mkdir fpart/
+ ```
=
-and then
+ and then
=
-```
-cd fpart/
-```
+ ```
+ cd fpart/
+ ```
=
-<small>This creates a new directory and makes it the current one. Again, don't worry about the details.</small>
+ <small>This creates a new directory and makes it the current one. Again, don't worry about the details.</small>
=
-"""
+ """
= ]
= :: [ markdown """
=
-To easily create a new program, we can type
+ To easily create a new program, we can type
=
-```
-elm init
-```
+ ```
+ elm init
+ ```
=
-"""
+ """
= ]
= :: [ markdown """
=
-Then to create a file with source code, type
+ Then to create a file with source code, type
=
-```
-atom src/Main.elm
-```
+ ```
+ atom src/Main.elm
+ ```
=
-<small>This command should open a new Atom window with empty text file.</small>
+ <small>This command should open a new Atom window with empty text file.</small>
=
-"""
+ """
= ]
= :: [ markdown """
=
-### `main.elm`
+ ### `main.elm`
=
-```elm
-module Main exposing (main)
+ ```elm
+ module Main exposing (main)
=
-import Html
+ import Html
=
=
-main =
- Html.text "Hello, Tree!"
-```
+ main =
+ Html.text "Hello, Tree!"
+ ```
=
-<small>Type the above in the editor and save the file</small>
+ <small>Type the above in the editor and save the file</small>
=
-"""
+ """
= ]
= :: [ markdown """
=
-To see the program running type following in the terminal
+ To see the program running type following in the terminal
=
-```sh
-elm reactor
-```
+ ```sh
+ elm reactor
+ ```
=
-<small>This command starts the Elm reactor, which will let you run your program in the web browser. Note that it won't give you the command line back - it will run as long as you don't stop it.</small>
+ <small>This command starts the Elm reactor, which will let you run your program in the web browser. Note that it won't give you the command line back - it will run as long as you don't stop it.</small>
=
-"""
+ """
= ]
= :: [ markdown """
=
-# Voila!
+ # Voila!
=
-<small>Open following address in the web browser</small>
+ <small>Open following address in the web browser</small>
=
-http://localhost:8000/src/Main.elm
+ http://localhost:8000/src/Main.elm
=
-<small>Note that the same address was printed by Elm reactor</small>
+ <small>Note that the same address was printed by Elm reactor</small>
=
-"""
+ """
= ]
= :: [ markdown """
=
-# Let's make a dot!
-# :fa-circle:
+ # Let's make a dot!
+ # :fa-circle:
=
-"""
+ """
= ]
= :: [ markdown """
=
-We are going to use a technology called SVG
+ We are going to use a technology called SVG
=
-<small>Scalable Vector Graphics</small>
+ <small>Scalable Vector Graphics</small>
=
=
-*[SVG]: Scalable Vector Graphics
+ *[SVG]: Scalable Vector Graphics
=
-"""
+ """
= ]
= :: [ markdown """
=
-Let's install an Elm package to help us work with SVG.
+ Let's install an Elm package to help us work with SVG.
=
-Stop the Reactor running in terminal by pressing
+ Stop the Reactor running in terminal by pressing
=
-`CTRL-C`
+ `CTRL-C`
=
-and type the following
+ and type the following
=
-```
-elm install elm/svg
-```
+ ```
+ elm install elm/svg
+ ```
=
-Then start the reactor again
+ Then start the reactor again
=
-```
-elm reactor
-```
+ ```
+ elm reactor
+ ```
=
-<small>you can press up arrow :fa-arrow-up: on the keyboard to get to previous commands</small>
+ <small>you can press up arrow :fa-arrow-up: on the keyboard to get to previous commands</small>
=
-"""
+ """
= ]
= :: [ markdown """
=
-<iframe id="cartesian" data-src="./CartesianCoordinates.html" class="stretch">
-</iframe>
+ <iframe id="cartesian" data-src="./CartesianCoordinates.html" class="stretch">
+ </iframe>
=
-"""
+ """
= ]
= :: []In PolarCoordinates, use CartesianPlane.graph to draw cartesian plane
Remove background colors from PolarCoordinates.view
Co-authored-by: Tadeusz Łazurski tadeusz@lazurski.pl
index fead82e..65f6718 100644
--- a/src/PolarCoordinates.elm
+++ b/src/PolarCoordinates.elm
@@ -1,6 +1,7 @@
=module PolarCoordinates exposing (main)
=
=import Browser
+import CartesianPlane
=import Element
=import Element.Background as Background
=import Element.Border as Border
@@ -50,43 +51,19 @@ view model =
= Element.layout
= [ Element.height Element.fill -- (Element.px 600)
= , Element.width Element.fill
- , Background.color <| Element.rgb 0.6 0 0
= ]
= <|
= Element.column
= [ Element.height Element.fill
= , Element.width <| Element.px 600
- , Background.color <| Element.rgb 0 0.6 0
= , Element.centerX
= , Element.spacing 30
= , Element.padding 30
= ]
= [ Element.el [] <|
= Element.html <|
- svg
- [ viewBox "-1 -1 2 2"
- , preserveAspectRatio "xMidYMid meet"
- , Svg.Attributes.style "width: 100%, height: 100%"
- ]
- [ line
- [ x1 "-1"
- , y1 "0"
- , x2 "1"
- , y2 "0"
- , stroke "black"
- , strokeWidth "0.001"
- ]
- []
- , line
- [ x1 "0"
- , x2 "0"
- , y1 "-1"
- , y2 "1"
- , stroke "black"
- , strokeWidth "0.001"
- ]
- []
- , circle
+ CartesianPlane.graph
+ [ circle
= [ cx <| String.fromFloat point.x
= , cy <| String.fromFloat point.y
= , r "0.01"Merge remote-tracking branch 'origin/elm' into elm
Embed PolarCoordinates sample in slides
Co-authored-by: Tadeusz Łazurski tadeusz@lazurski.pl
index 8d5eb8f..6be4d7b 100644
--- a/src/CartesianCoordinates.elm
+++ b/src/CartesianCoordinates.elm
@@ -63,7 +63,7 @@ view model =
= ui model
= |> wrapper
= |> Element.layout
- [ Element.height Element.fill -- (Element.px 600)
+ [ Element.height Element.fill
= , Element.width Element.fill
= ]
=index d00c059..f40b7a2 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -10,6 +10,7 @@ import Element.Keyed
=import Html
=import Html.Attributes
=import Json.Decode as Decode exposing (Decoder)
+import PolarCoordinates
=import Presentation exposing (Slide, markdown)
=
=
@@ -31,6 +32,7 @@ type alias Model =
=
= -- Nested programs
= , cartesianCoordinates : CartesianCoordinates.Model
+ , polarCoordinates : PolarCoordinates.Model
= }
=
=
@@ -39,6 +41,7 @@ type Msg
= | Previous
= -- Nested programs
= | CartesianCoordinatesMsg CartesianCoordinates.Msg
+ | PolarCoordinatesMsg PolarCoordinates.Msg
=
=
=init : Flags -> ( Model, Cmd Msg )
@@ -46,11 +49,18 @@ init flags =
= let
= ( cartesianCoordinatesModel, cartesianCoordinatesCmd ) =
= CartesianCoordinates.init ()
+
+ ( polarCoordinatesModel, polarCoordinatesCmd ) =
+ PolarCoordinates.init ()
= in
= ( { currentSlide = 0
= , cartesianCoordinates = cartesianCoordinatesModel
+ , polarCoordinates = polarCoordinatesModel
= }
- , Cmd.batch [ Cmd.map CartesianCoordinatesMsg cartesianCoordinatesCmd ]
+ , Cmd.batch
+ [ Cmd.map CartesianCoordinatesMsg cartesianCoordinatesCmd
+ , Cmd.map PolarCoordinatesMsg polarCoordinatesCmd
+ ]
= )
=
=
@@ -112,6 +122,15 @@ update msg model =
= , Cmd.map CartesianCoordinatesMsg cmd_
= )
=
+ PolarCoordinatesMsg msg_ ->
+ let
+ ( model_, cmd_ ) =
+ PolarCoordinates.update msg_ model.polarCoordinates
+ in
+ ( { model | polarCoordinates = model_ }
+ , Cmd.map PolarCoordinatesMsg cmd_
+ )
+
=
=subscriptions model =
= let
@@ -150,8 +169,8 @@ slides model =
= """
= ]
= :: [ markdown """
- Move sliders to change the `x` and `y` coordinates of the dot. It's like moving a thing on a table by telling how far left, right, up or down should it go.
- """
+ Move sliders to change the `x` and `y` coordinates of the dot. It's like moving a thing on a table by telling how far left, right, up or down should it go.
+ """
= , model.cartesianCoordinates
= |> CartesianCoordinates.ui
= |> Element.map CartesianCoordinatesMsg
@@ -160,17 +179,25 @@ slides model =
= , Element.width (Element.maximum 600 Element.fill)
= ]
= ]
- -- :: [ markdown """
- -- # FP-Art!
- -- ## A functional programming workshop
- -- ### for non-programmers
- -- """
- -- ]
= :: [ markdown """
- ## Setup
+ Move sliders to change the `angle` and `length` properties of the line connecting the dot and origin. The x and y coordinates will be calculated like this:
+
+ ```
+ x = cos(angle) * length
+
+ y = sin(angle) * length
+ ```
= """
- , markdown """
- # Stuff
+ , model.polarCoordinates
+ |> PolarCoordinates.ui
+ |> Element.map PolarCoordinatesMsg
+ |> Element.el
+ [ Element.centerX
+ , Element.width (Element.maximum 600 Element.fill)
+ ]
+ ]
+ :: [ markdown """
+ ## Setup
= """
= ]
= :: [ markdown """index 65f6718..7a0d79c 100644
--- a/src/PolarCoordinates.elm
+++ b/src/PolarCoordinates.elm
@@ -1,8 +1,18 @@
-module PolarCoordinates exposing (main)
+module PolarCoordinates exposing
+ ( Flags
+ , Model
+ , Msg
+ , init
+ , main
+ , subscriptions
+ , ui
+ , update
+ , view
+ )
=
=import Browser
=import CartesianPlane
-import Element
+import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
=import Element.Input as Input
@@ -44,95 +54,109 @@ init () =
=
=view : Model -> Html.Html Msg
=view model =
+ let
+ wrapper element =
+ Element.el
+ [ Element.width (Element.maximum 600 Element.fill), Element.centerX ]
+ element
+ in
+ ui model
+ |> wrapper
+ |> Element.layout
+ [ Element.height Element.fill
+ , Element.width Element.fill
+ ]
+
+
+ui : Model -> Element Msg
+ui model =
= let
= point =
= cartesian model
= in
- Element.layout
- [ Element.height Element.fill -- (Element.px 600)
- , Element.width Element.fill
+ Element.column
+ [ Element.width Element.fill
+ , Element.centerX
+ , Element.spacing 30
+ , Element.padding 30
= ]
- <|
- Element.column
+ [ Element.el
= [ Element.height Element.fill
- , Element.width <| Element.px 600
- , Element.centerX
- , Element.spacing 30
- , Element.padding 30
+ , Element.width Element.fill
= ]
- [ Element.el [] <|
- Element.html <|
- CartesianPlane.graph
- [ circle
- [ cx <| String.fromFloat point.x
- , cy <| String.fromFloat point.y
- , r "0.01"
- , fill "magenta"
- ]
- []
- , line
- [ x1 "0"
- , x2 <| String.fromFloat point.x
- , y1 "0"
- , y2 <| String.fromFloat point.y
- , stroke "magenta"
- , strokeWidth "0.001"
- ]
- []
- , text_
- [ x <| String.fromFloat (point.x + 0.02)
- , y <| String.fromFloat (point.y + 0.01)
- , Svg.Attributes.fontSize "0.03pt"
- ]
- [ text <|
- Debug.toString ( point.x, point.y )
- ]
+ <|
+ Element.html <|
+ CartesianPlane.graph
+ [ circle
+ [ cx <| String.fromFloat point.x
+ , cy <| String.fromFloat point.y
+ , r "0.01"
+ , fill "magenta"
+ ]
+ []
+ , line
+ [ x1 "0"
+ , x2 <| String.fromFloat point.x
+ , y1 "0"
+ , y2 <| String.fromFloat point.y
+ , stroke "magenta"
+ , strokeWidth "0.001"
= ]
- , Input.slider
- [ Element.behindContent
- (Element.el
- [ Element.width Element.fill
- , Element.height (Element.px 2)
- , Element.centerY
- , Background.color <| Element.rgb 0.7 0.7 0.7
- , Border.rounded 2
+ []
+ , text_
+ [ x <| String.fromFloat (point.x + 0.02)
+ , y <| String.fromFloat (point.y + 0.01)
+ , Svg.Attributes.fontSize "0.03pt"
= ]
- Element.none
- )
- ]
- { onChange = SetAngle
- , label =
- Input.labelBelow [ Element.centerX ] <|
- Element.text ("angle value: " ++ String.fromFloat model.angle)
- , min = 0
- , max = 360
- , value = model.angle
- , thumb = Input.defaultThumb
- , step = Just 1
- }
- , Input.slider
- [ Element.behindContent
- (Element.el
- [ Element.width Element.fill
- , Element.height (Element.px 2)
- , Element.centerY
- , Background.color <| Element.rgb 0.7 0.7 0.7
- , Border.rounded 2
+ [ text <|
+ Debug.toString ( point.x, point.y )
= ]
- Element.none
- )
- ]
- { onChange = SetRadius
- , label =
- Input.labelBelow [ Element.centerX ] <|
- Element.text ("radius value: " ++ String.fromFloat model.radius)
- , min = 0
- , max = 1
- , value = model.radius
- , thumb = Input.defaultThumb
- , step = Just 0.01
- }
+ ]
+ , Input.slider
+ [ Element.behindContent
+ (Element.el
+ [ Element.width Element.fill
+ , Element.height (Element.px 2)
+ , Element.centerY
+ , Background.color <| Element.rgb 0.7 0.7 0.7
+ , Border.rounded 2
+ ]
+ Element.none
+ )
= ]
+ { onChange = SetAngle
+ , label =
+ Input.labelBelow [ Element.centerX ] <|
+ Element.text ("angle value: " ++ String.fromFloat model.angle)
+ , min = 0
+ , max = 360
+ , value = model.angle
+ , thumb = Input.defaultThumb
+ , step = Just 1
+ }
+ , Input.slider
+ [ Element.behindContent
+ (Element.el
+ [ Element.width Element.fill
+ , Element.height (Element.px 2)
+ , Element.centerY
+ , Background.color <| Element.rgb 0.7 0.7 0.7
+ , Border.rounded 2
+ ]
+ Element.none
+ )
+ ]
+ { onChange = SetRadius
+ , label =
+ Input.labelBelow [ Element.centerX ] <|
+ Element.text ("radius value: " ++ String.fromFloat model.radius)
+ , min = 0
+ , max = 1
+ , value = model.radius
+ , thumb = Input.defaultThumb
+ , step = Just 0.01
+ }
+ ]
=
=
=update : Msg -> Model -> ( Model, Cmd Msg )Create content for slides.
Co-authored-by: Tadeusz Łazurski tadeusz@lazurski.pl
index f40b7a2..f18bc73 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -163,39 +163,11 @@ slides model =
= Dict.fromList <|
= List.indexedMap Tuple.pair <|
= [ markdown """
- # FP-Art!
+ # Software Garden
= ## A functional programming workshop
= ### for non-programmers
= """
= ]
- :: [ markdown """
- Move sliders to change the `x` and `y` coordinates of the dot. It's like moving a thing on a table by telling how far left, right, up or down should it go.
- """
- , model.cartesianCoordinates
- |> CartesianCoordinates.ui
- |> Element.map CartesianCoordinatesMsg
- |> Element.el
- [ Element.centerX
- , Element.width (Element.maximum 600 Element.fill)
- ]
- ]
- :: [ markdown """
- Move sliders to change the `angle` and `length` properties of the line connecting the dot and origin. The x and y coordinates will be calculated like this:
-
- ```
- x = cos(angle) * length
-
- y = sin(angle) * length
- ```
- """
- , model.polarCoordinates
- |> PolarCoordinates.ui
- |> Element.map PolarCoordinatesMsg
- |> Element.el
- [ Element.centerX
- , Element.width (Element.maximum 600 Element.fill)
- ]
- ]
= :: [ markdown """
= ## Setup
= """
@@ -215,7 +187,7 @@ slides model =
= We will need:
=
= - a text editor (I use [Atom][])
- - and [Elm programming language][]
+ - and the [Elm programming language][]
=
= [Atom]: https://atom.io/
= [Elm programming language]: https://elm-lang.org/
@@ -223,7 +195,25 @@ slides model =
= """
= ]
= :: [ markdown """
- We will use the terminal a little bit.
+ ### Elm Installation
+ """
+ ]
+ :: [ markdown """
+ To install the Elm programming language, go to the [website][Elm] and follow the installation instructions.
+
+ [Elm]: http://elm-lang.org/
+ """
+ ]
+ :: [ markdown """
+ Some of the tools we use with Elm require Node.js.
+
+ Go to the [Node.js website][Node.js] and install the current version (the green button on the right).
+
+ [Node.js]: https://nodejs.org/en/
+ """
+ ]
+ :: [ markdown """
+ We will need to use the terminal a little bit.
=
= # :fa-terminal:
=
@@ -557,4 +547,32 @@ slides model =
=
= """
= ]
+ :: [ markdown """
+ Move sliders to change the `x` and `y` coordinates of the dot. It's like moving a thing on a table by telling how far left, right, up or down should it go.
+ """
+ , model.cartesianCoordinates
+ |> CartesianCoordinates.ui
+ |> Element.map CartesianCoordinatesMsg
+ |> Element.el
+ [ Element.centerX
+ , Element.width (Element.maximum 600 Element.fill)
+ ]
+ ]
+ :: [ markdown """
+ Move sliders to change the `angle` and `length` properties of the line connecting the dot and origin. The x and y coordinates will be calculated like this:
+
+ ```
+ x = cos(angle) * length
+
+ y = sin(angle) * length
+ ```
+ """
+ , model.polarCoordinates
+ |> PolarCoordinates.ui
+ |> Element.map PolarCoordinatesMsg
+ |> Element.el
+ [ Element.centerX
+ , Element.width (Element.maximum 600 Element.fill)
+ ]
+ ]
= :: []