Formatting

Format text and create styles!

Formatting


Objectives of this tutorial:
•	Learn about elements and their properties.
•	Learn how to create basic elements and place them on the screen.
•	Learn to change the formatting of single elements and groups of elements.
•	Learn to modify the properties of images.
•	Learn how to create text and modify properties such as font, size, etc…
•	Learn about links and tags

Go here, and copy the following code into the window:


import Graphics.Element exposing (..)
import Graphics.Collage exposing (..)
import Color exposing (..)
import Text exposing (fromString)

aBook = fittedImage 300 200 "/book.jpg"

sqr = spacer 30 30

main = flow down <| -- to understand the code on lines 12-19. Read the tutorial.
  
  [ aBook
  , opacity 0.5 aBook
  , let chartreuse = rgba 127 255 10 0.5 in color chartreuse (spacer 100 100)
  , width 100 aBook
  , height 100 aBook
  , tag "red-box" (color red sqr) 
  , link "#red-box" (leftAligned (fromString "Go to red box")) `below` spacer 10 2000 
  ] ++ challenges

challenges = [twoBoxes, overlappingShapes]

-- 1. Create two boxes of different colours, which when clicked will navigate to each other.
twoBoxes : Element 
twoBoxes = let 
  box0 = empty -- Change this
  box1 = empty -- Change this 
 in box1 `below` spacer 10 2000 `below` box0 -- Change this also

-- 2. Create a several circles (3 or 4) which have different colours and
-- overlap to form new colours.
overlappingShapes : Element
overlappingShapes = 
  let 
    red = rgba 255 0 0 0.5
    green = rgba 0 255 0 0.5
    blue = rgba 0 0 255 0.5
  in collage 200 200 
    [ -- place circle here
      -- place circle here
    ]



Opacity and Size

A) This is an image of a book. It is 300 pixels wide and 200 pixels tall.
 aBook = fittedImage 300 200 "/book.jpg" 

Note: the word aBook is called a variable. It stores the information - fittedImage 300 200 "/book.jpg"

B) An empty box with side length 30 pixels. It's stored in a variable named sqr .
 sqr = spacer 30 30 

C) The following list has multiple images of book.jpg, some squares, and a link. All these things are called Elements.
  
  [ aBook
  , opacity 0.5 aBook
  , let chartreuse = rgba 127 255 10 0.5 in color chartreuse (spacer 100 100)
  , width 100 aBook
  , height 100 aBook
  , tag "red-box" (color red sqr) 
  , link "#red-box" (leftAligned (fromString "Go to red box")) `below` spacer 10 2000 
  ] 


D) The opacity of the book can be modified. Opacity is a measure (from 0 to 1) of how "see-through" an element is. 0 is completely transparent, 1 is opaque.
   opacity 0.5 aBook 

Exercise: Change the opacity of this image by changing 0.5 to any number between 0 and 1.

E) You can create colours using the rgba function. The last number 0.5 in the rgba function below controls the opacity of the color. Chartreuse is the name of the variable that stores this colour.
let chartreuse = rgba 127 255 10 0.5 in color chartreuse (spacer 100 100)

Note: The numbers 127 255 10 control which colour is created. By changing these values you can change the colour that shows up on the screen.

Exercise: Change these three values to create a new colour. You can use this link to help you find values for new colours.
Colour Picker

F) Changing the width or height can be done using these functions.
 width 100 aBook
 height 100 aBook

G) Creating a red box and assigning a tag named "red-box" to it. In example H, you will see how to create a link that leads back to this box.
 tag "red-box" (color red sqr) 

H) Creates a link to the tag above. Clicking this link, it will lead you to the red box.
link "/#red-box" (leftAligned (fromString "Go to red box")) `below` spacer 10 2000 

Try: Compile your code and scroll down on the images side. Find the link that says "Go to red box" and click on it. What happened? Were you redirected back to the red square? This is an example of how links and tags work.

Challenges
 
1. Create two boxes of different colours, which when clicked will navigate to each other. Find the code shown below and make your changes to that.

twoBoxes : Element 
twoBoxes = let 
  box0 = empty -- Change this
  box1 = empty -- Change this 
 in box1 `below` spacer 10 2000 `below` box0 -- Change this also


Here are some helpful hints if you get stuck along the way…

Hints: 
  1) Delete the word empty after both box0 and box1. Replace both words with code that creates boxes, and place tags on these boxes. This is similar to what you read in example G) . 
  This is sample code of what your box0 could look like…
   box0 = tag "blue-box" (color blue (spacer 30 30)) 
  2) Add links on the line in box1 `below` spacer 10 2000 `below` box0  the same way you learned to add links in example H) .
  This is sample code of what your links could look like
   in (link "#blue-box" (box1)) `below` spacer 10 2000 `below` (link "#green-box" (box0))

2. Create several circles (3 or 4) which have different colours and
 overlap to form new colours. 
 
 


Find the following code and make your changes to that.

overlappingShapes = let 
  red = rgba 255 0 0 0.5
  green = rgba 0 255 0 0.5
  blue = rgba 0 0 255 0.5
  in collage 200 200 
    [ -- place circle here
      -- place circle here
    ] 


Hint: 1) Add your new circles inside the collage where its says “place circle here”. Use the three colours that are given. For example, this is how you make one circle…(filled green (circle 30))  
2) Use the move function (like the one you used to make your heart) to make the circles overlap and form new colours.


Typeface

For this part of the tutorial, open a new Elm window by clicking here. Then, copy and paste the code below into the window you just opened:

import Graphics.Element exposing (..)
import Graphics.Collage exposing (..)
import Color exposing (..)
import Text exposing (..)

main = flow down
  [
  leftAligned (Text.color red (typeface ["inconsolata", "courier new", "monospace"] (fromString "\nThe quick brown fox jumps over the lazy dog.\n")))
  ,leftAligned (Text.color blue (typeface ["trebuchet ms"] (fromString "\nThe quick brown fox jumps over the lazy dog.\n")))
  ]


The following letters from A to F will explain different parts of the code you just copied.

A) Anything written inside quotes is a String. For example,
“The quick brown fox jumps over the lazy dog."

B) The built-in function fromString is used when changing a string into text. For example, this is Text…
fromString “The quick brown fox jumps over the lazy dog."

C) A List is made up of values placed inside square brackets [ and ] . Each value must be separated by commas. This is a list of font names:
["inconsolata", "courier new", "monospace"]

Note: Elm requires you to provide a list of fonts so that in case the first font in the list isn’t available, then it will use other fonts.

D) typeface is another built-in function that needs to have two things after it - a list of fonts and a text. For example,
 typeface    ["inconsolata", "courier new", "monospace"]     (fromString "\nThe quick brown fox jumps over the lazy dog.\n")) 

Note: Elm uses the first available font from any given list

E) Now, you can use another built-in function Text.color to change the color of the text. For example, the code below makes your sentence red…
 (Text.color red (typeface ["inconsolata", "courier new", "monospace"] (fromString "\nThe quick brown fox jumps over the lazy dog.\n")))

F) You can use these functions to align your text in different ways. 
a) leftAligned 
b) rightAligned 
c) centered 
d) justified
For example, the code below uses leftAligned which starts your sentence at the very left  side of the display screen…
 leftAligned (Text.color blue (typeface ["trebuchet ms"] (fromString "\nThe quick brown fox jumps over the lazy dog.\n"))) 

Try: Change the alignment of your function from leftAligned to any of the other options above. Notice what happens.

Challenges:

1. Have 3 more sentences display on the screen. Each should have different fonts and colors

 
Hint: Find the code in your program that looks like the one below and change it by adding more sentences to the list.

	[
 leftAligned (Text.color red (typeface ["inconsolata", "courier new", 
"monospace"] (fromString "\nThe quick brown fox jumps over the lazy dog.\n")))
, leftAligned (Text.color blue (typeface ["comic sans-serif"] (fromString "\nThe quick brown fox jumps over the lazy dog.\n")))
  	]
	

Super Challenge

Recreate the image below using what you’ve learned so far. Click on this link.




To get started, copy and paste the following code into TryElm you just opened.

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Text exposing (..)


main =
  collage 150 150 <| List.map shape [0..11] -- Hint 1, 2, & 3 apply here


shape n = -- Hint #4
  let angle = degrees (30 * toFloat n)
  in
      circle 10 -- Hint #5
        |> filled (hsl angle 0.7 0.5) -- Hint #6
        |> move (45 * cos angle, 45 * sin angle)


Here are some hints if you get stuck…
Hints: 1) On line 8, change List.map to List.map2. 
DO NOT CLICK COMPILE UNTIL YOU HAVE FOLLOWED ALL THE HINTS.

2) Change collage 150 150 to collage 300 300

3) Copy and paste this following code at the end of line 8 after [0..11]. 

[ ["times new roman"]
        , ["helvetica"]
        , ["sans-serif"]
        , ["georgia"]
        , ["serif"]
        , ["trebuchet ms"]
        , ["inconsolata"]
        , ["courier new"]
        , ["monospace"]
        , ["calibri"]
        , ["arial"]
        , ["verdana"]
        ]


Make sure your code looks like the one shown in the picture below.
 
 

4) Change  shape n = to  shape n font =

5) Delete circle 10, and replace it with a short sentence. For example,
toForm (centered (Text.color (hsl angle 0.7 0.5) (typeface font (fromString "Hi there"))))

6) Delete the line |> filled (hsl angle 0.7 0.5)

7) In the line |> move (45 * cos angle, 45 * sin angle). Change 45 to 90. For example, 
		|> move (90 * cos angle, 90 * sin angle)

Text Formatting

Use this link for this part of the tutorial. 

Instructions to get started:
1) Replace lines 1 and 2 with the following code
import Graphics.Element exposing (..)
import Text exposing (..)
2) On line 9, Change link to Text.link

Explanations for parts of the code

A) The function flow controls the order and the direction in which things are displayed to the screen. For example, when using flow down, each new text is displayed below the previous one. 

Try: Change flow down to flow up or flow right or flow left.

B) bold and italic functions are used to bold and italicize fonts. For example,
bold (fromString “Bold”) and italic (fromString "Italicize")

Try: Switch the bold and italicize. 

C) link and leftAligned still work the same way as the previous tutorial

Try: Change the link from / to ”http://outreach.mcmaster.ca”. Click it and see what happens.

D) You can use ++ to add two Texts together to make one. For example, (fromString "Hi,")) ++ (fromString "  there.") will create “Hi, there”

Try: Add more words or sentences to the existing word “Bold”. For example, 
(bold ((fromString "Bold.")) ++ (fromString " This is Bold."))

E) Instead of putting brackets around all your code every time you add new functions. You can use the infix <|. for example writing leftAligned <| italic <| fromString "Italicize" is the same as writing leftAligned (italic (fromString "Italicize"))

Try: Add infixes to your code and get rid of the brackets.

F) There is also another function you can use called line. For example, you can use it to underline something or strike a line through something.

Try: 1) Add line Under in front of (italic (fromString "Italicize")). This should underline the word “Italicize”.
2) Change the word Under to Through. Notice what happens when you compile.

Challenge

1. Try to recreate the following by changing the text in the code from earlier.

  

Hint: You will need to use ++, line Under, line Through

Extra: You can also use Text.height to change the size of the font. For example, Text.height 50 <| bold <| fromString "Hi, there."

                                
Previous Tutorial Back to Tutorials Next Tutorial