Flare examples

Example 1: Two number inputs

pow <$> number "Base" 2.0
    <*> number "Exponent" 10.0

Example 2: Semigroup instance

string_ "Hello" <> pure " " <> string_ "World"

Example 3: Traverse

sum <$> traverse int_ [2, 13, 27, 42]

Example 4: More calculations

lift2 (/) (number_ 5.0) (number_ 2.0)

Example 5: Drawing output

coloredCircle hue radius =
  filled (fillColor (hsl hue 0.8 0.4)) (circle 50.0 50.0 radius)

ui = coloredCircle <$> (numberSlider "Hue"    0.0 360.0 1.0 140.0)
                   <*> (numberSlider "Radius" 2.0  45.0 0.1  25.0)

Example 6: Select box

data Language = English | French | German

toString English = "english"
toString French  = "french"
toString German  = "german"

greet English = "Hello"
greet French  = "Salut"
greet German  = "Hallo"

ui = (greet <$> (select "Language" (English :| [French, German]) toString))
     <> pure " " <> string "Name" "Pierre" <> pure "!"

Example 7: Integration with Signals (Superformula)

plot m n1 s col time =
      filled (fillColor col) $
        path (map point angles)

      where point phi = { x: 100.0 + radius phi * cos phi
                        , y: 100.0 + radius phi * sin phi }
            angles = map (\i -> 2.0 * pi / toNumber points * toNumber i)
                         (0 .. points)
            points = 400
            n2 = s + 3.0 * sin (0.005 * time)
            n3 = s + 3.0 * cos (0.005 * time)
            radius phi = 20.0 * pow expr (- 1.0 / n1)
              where expr = first + second
                    first = pow (abs (cos (m * phi / 4.0))) n2
                    second = pow (abs (sin (m * phi / 4.0))) n3

ui7 = plot <$> (numberSlider "m"  0.0 10.0 1.0  7.0)
           <*> (numberSlider "n1" 1.0 10.0 0.1  4.0)
           <*> (numberSlider "s"  4.0 16.0 0.1 14.0)
           <*> (color "Color" (hsl 333.0 0.6 0.5))
           <*> lift animationFrame

Example 8: Lists and sliders

traverse (intSlider_ 1 5) (1..5)

Example 9: Checkboxes

lift2 (&&) (boolean_ false) (boolean_ true)

Example 10: Folding over the past

graph xs width = outlined (outlineColor black <> lineWidth width)
                          (path points)
  where points = zipWith point xs (1 .. length xs)
        point x y = { x, y: toNumber y }

ui = graph <$> foldp cons [] (numberSlider "Position" 0.0 150.0 1.0 75.0)
           <*> numberSlider "Width" 1.0 5.0 0.1 1.0

Example 11: Buttons

ui = foldp (+) 0 (button "Increment" 0 1)

Example 12: HTML output using Smolder

table h w = H.table $ foldMap row (0 .. h)
  where row i = H.tr $ foldMap (cell i) (0 .. w)
        cell i j = H.td (H.text (show i <> "," <> show j))

ui = table <$> intSlider_ 0 9 5 <*> intSlider_ 0 9 5

Example 13: Adding items to a list

actions = string "Add item:" "Orange" <**> button "Add" (flip const) cons

list = foldp id ["Apple", "Banana"] actions

ui = (H.ul <<< foldMap (H.li <<< H.text)) <$> list

Example 14: Color picker (running Flare inside Flare)

data Domain = HSL | RGB

showDomain HSL = "HSL"
showDomain RGB = "RGB"

toHTML c = H.div `H.with` (A.style $ "background-color:" <> hex) $ H.text hex
  where hex = colorString c

ns l = numberSlider l 0.0

uiColor HSL = hsl <$> ns "Hue"        360.0  1.0 180.0
                  <*> ns "Saturation"   1.0 0.01   0.5
                  <*> ns "Lightness"    1.0 0.01   0.5
uiColor RGB = rgb <$> ns "Red"        255.0  1.0 200.0
                  <*> ns "Green"      255.0  1.0   0.0
                  <*> ns "Blue"       255.0  1.0 100.0

inner = runFlareHTML "controls14b" "output14" <<< map toHTML <<< uiColor

ui = select "Color domain" (HSL :| [RGB]) showDomain

main = runFlareWith "controls14a" inner ui

Example 15: Multiple buttons

data Action = Increment | Decrement | Negate | Reset

label Increment = "+ 1"
label Decrement = "- 1"
label Negate    = "+/-"
label Reset     = "Reset"

perform :: Action -> Int -> Int
perform Increment = add 1
perform Decrement = flip sub 1
perform Negate    = negate
perform Reset     = const 0

ui = foldp (maybe id perform) 0 $
       buttons [Increment, Decrement, Negate, Reset] label

Example 16: Using other Signal functions (here: since)

light on = H.with H.div arg mempty
  where arg | on = A.className "on"
            | otherwise = mempty

ui = light <$> liftSF (since 1000.0) (button "Switch on" unit unit)

Example 17: Date input

ui = showDiff <$> date "Date 1" (fromMaybe bottom date1)
              <*> date "Date 2" (fromMaybe bottom date2)
  where
    date1 = canonicalDate <$> toEnum 1986 <*> toEnum 7 <*> toEnum 3
    date2 = canonicalDate <$> toEnum 2016 <*> toEnum 8 <*> toEnum 5
    showDiff d1 d2 = "Days between the dates: " <>
                     show (round $ abs $ unDays $ diff d1 d2)