Add foldp and a new example

Author: sharkdp

docs/Flare.md

@@ -50,6 +50,14 @@ Applicative (UI e)
 (BooleanAlgebra a) => BooleanAlgebra (UI e a)
 ```
 
+#### `wrap`
+
+``` purescript
+wrap :: forall e a. Signal a -> UI e a
+```
+
+Encapsulate a `Signal` within a `UI` component.
+
 #### `lift`
 
 ``` purescript
@@ -58,13 +66,15 @@ lift :: forall e a. Eff (chan :: Chan, dom :: DOM | e) (Signal a) -> UI e a
 
 Lift a `Signal` inside the `Eff` monad to a `UI` component.
 
-#### `wrap`
+#### `foldp`
 
 ``` purescript
-wrap :: forall e a. Signal a -> UI e a
+foldp :: forall a b e. (a -> b -> b) -> b -> UI e a -> UI e b
 ```
 
-Encapsulte a `Signal` within a `UI` component.
+Create a past dependent component. The fold-function takes the current
+value of the component and the previous value of the output to produce
+the new value of the output.
 
 #### `number`
 

html/index.html

@@ -94,11 +94,25 @@ <h3>Example 8: Lists and sliders</h3>
 
         <h3>Example 9: BooleanAlgebra instance</h3>
 <pre>
-and (boolean_ <$> [true, false, true])
+boolean_ false && boolean_ true
 </pre>
         <div id="controls9"></div>
         <div id="output9"></div>
 
+        <h3>Example 10: Folding over the past</h3>
+<pre>
+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 [] (numberRange "Position" 0.0 150.0 1.0 75.0)
+           <*> numberRange "Width" 1.0 5.0 0.1 1.0
+</pre>
+        <div id="controls10"></div>
+        <canvas id="output10" width="150" height="100"
+                style="border: 1px solid black; margin-left: 150px"></canvas>
+
         <script type="text/javascript" src="main.js"></script>
     </body>
 </html>

html/main.css

@@ -30,6 +30,12 @@ h3 {
     width: 80px;
 }
 
+.flare-input-number-range {
+    width: 150px;
+    padding: 0px;
+    margin: 0px;
+}
+
 label {
     width: 150px;
     display: inline-block;

src/Flare.purs

@@ -2,8 +2,9 @@ module Flare
   ( Flare(..)
   , UI(..)
   , ElementId()
-  , lift
   , wrap
+  , lift
+  , foldp
   , number
   , number_
   , numberRange
@@ -33,15 +34,15 @@ import Control.Monad.Eff
 import DOM
 import DOM.Node.Types (Element())
 
-import Signal
+import qualified Signal as S
 import Signal.Channel
 
 type ElementId = String
 type Label = String
 
 -- | A `Flare` is a `Signal` with a corresponding list of HTML elements
 -- | for the user interface components.
-data Flare a = Flare (Array Element) (Signal a)
+data Flare a = Flare (Array Element) (S.Signal a)
 
 instance functorFlare :: Functor Flare where
   map f (Flare cs sig) = Flare cs (map f sig)
@@ -98,15 +99,23 @@ instance booleanAlgebraUI :: (BooleanAlgebra a) => BooleanAlgebra (UI e a) where
   disj = lift2 disj
   not = map not
 
+-- | Encapsulate a `Signal` within a `UI` component.
+wrap :: forall e a. (S.Signal a) -> UI e a
+wrap sig = UI $ return $ Flare [] sig
+
 -- | Lift a `Signal` inside the `Eff` monad to a `UI` component.
-lift :: forall e a. Eff (chan :: Chan, dom :: DOM | e) (Signal a) -> UI e a
+lift :: forall e a. Eff (chan :: Chan, dom :: DOM | e) (S.Signal a) -> UI e a
 lift msig = UI $ do
   sig <- msig
   return $ Flare [] sig
 
--- | Encapsulte a `Signal` within a `UI` component.
-wrap :: forall e a. (Signal a) -> UI e a
-wrap sig = UI $ return $ Flare [] sig
+-- | Create a past dependent component. The fold-function takes the current
+-- | value of the component and the previous value of the output to produce
+-- | the new value of the output.
+foldp :: forall a b e. (a -> b -> b) -> b -> UI e a -> UI e b
+foldp f x0 (UI setup) = UI $ do
+  (Flare comp sig) <- setup
+  return $ Flare comp (S.foldp f x0 sig)
 
 -- | Append a child element to the parent with the specified ID
 foreign import appendComponent :: forall e. ElementId
@@ -219,4 +228,4 @@ runFlare :: forall e a. (Show a)
 runFlare controls target (UI setupUI) = do
   (Flare components signal) <- setupUI
   appendComponents controls components
-  runSignal (signal ~> show >>> renderString target)
+  S.runSignal (map (show >>> renderString target) signal)

src/Flare/Drawing.purs

@@ -15,7 +15,7 @@ import Graphics.Canvas (getCanvasElementById, getContext2D, Canvas(),
 
 import DOM
 
-import Signal
+import qualified Signal as S
 import Signal.Channel
 
 import Flare
@@ -41,4 +41,4 @@ runFlareDrawing controls canvasID (UI setupUI) = do
         clearRect ctx { x: 0.0, y: 0.0, w, h }
         render ctx drawing
 
-  runSignal (signal ~> render')
+  S.runSignal (map render' signal)

test/Main.purs

@@ -4,6 +4,7 @@ import Prelude
 
 import Data.Array
 import Data.Foldable
+import Data.Int
 import Data.Traversable
 import Math (pow, cos)
 
@@ -63,4 +64,13 @@ main = do
     traverse (intRange_ 1 5) (1..5)
 
   runFlare "controls9" "output9" $
-    and (boolean_ <$> [true, false, true])
+    boolean_ false && boolean_ true
+
+  let 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 }
+
+  runFlareDrawing "controls10" "output10" $
+    graph <$> foldp cons [] (numberRange "Position" 0.0 150.0 1.0 75.0)
+          <*> numberRange "Width" 1.0 5.0 0.1 1.0