Browse Source

better rendering

elm
parent
commit
24e18baf25
  1. 2
      elm-compile.sh
  2. 40
      static/elm/Cat.elm
  3. 39
      static/elm/Cat.html
  4. 71
      static/elm/Main.elm
  5. 389
      static/elm/Main.html

2
elm-compile.sh

@ -1,3 +1,3 @@
#!/usr/bin/env zsh
elm --set-runtime=/static/js/elm-runtime.js -b . static/elm/*.elm
elm --make --src-dir=static/elm --set-runtime=/static/js/elm-runtime.js -b . static/elm/Main.elm

40
static/elm/Cat.elm

@ -1,41 +1,29 @@
module Cat where
import Http
import Signal
import Json
import Dict
import Maybe
import Dict (get)
import Maybe (..)
jsonGet : String -> Http.Request String
jsonGet url = Http.request "GET" url "" [("Accept","application/json")]
getCats : Http.Request String
getCats = jsonGet "/cats"
responses : Signal (Http.Response String)
responses = Http.send (Signal.constant getCats)
-- For Parsing
data Cats = Cats { cats : [Cat] }
data Cat = Cat { name : String, age : Maybe Int }
catFromDict : Json.Value -> Maybe Cat
catFromDict val = case val of
Json.Object dict ->
case Dict.get "name" dict of
Just (Json.String inst_name) -> case Dict.get "age" dict of
case get "name" dict of
Just (Json.String inst_name) -> case get "age" dict of
Just (Json.Number inst_age) -> Just <| Cat { name = inst_name, age = Just (round inst_age) }
Just (Json.Null) -> Just <| Cat { name = inst_name, age = Nothing }
_ -> Nothing
_ -> Nothing
_ -> Nothing
fromJust : Maybe.Maybe a -> a
fromJust (Maybe.Just x) = x
fromJust : Maybe a -> a
fromJust (Just x) = x
objlistToCatList : [Json.Value] -> Maybe [Cat]
objlistToCatList dictList = let jlist = map catFromDict dictList in
if all Maybe.isJust jlist
if all isJust jlist
then
Just (map fromJust jlist)
else
@ -44,21 +32,9 @@ objlistToCatList dictList = let jlist = map catFromDict dictList in
jsonToCats : Maybe Json.Value -> Maybe Cats
jsonToCats jcat = case jcat of
Just (Json.Object dict) -> case Dict.get "cats" dict of
Just (Json.Object dict) -> case get "cats" dict of
Just (Json.Array objlist) -> case objlistToCatList objlist of
Just catList -> Just (Cats { cats = catList })
Nothing -> Nothing
_ -> Nothing
_ -> Nothing
-- End of Parsing
display : Http.Response String -> Element
display response = case response of
Http.Success cats -> flow down [asText <| jsonToCats (Json.fromString cats)]
Http.Waiting -> asText "WAITING"
Http.Failure _ _ -> asText response
main : Signal Element
main = display <~ responses

39
static/elm/Cat.html

@ -18,7 +18,6 @@ Elm.Cat.make = function (_elm) {
Graphics.Collage = Elm.Graphics.Collage.make(_elm);
var Graphics = Graphics || {};
Graphics.Element = Elm.Graphics.Element.make(_elm);
var Http = Elm.Http.make(_elm);
var Json = Elm.Json.make(_elm);
var List = Elm.List.make(_elm);
var Maybe = Elm.Maybe.make(_elm);
@ -36,7 +35,7 @@ Elm.Cat.make = function (_elm) {
switch (_v0.ctor)
{case "Just": return _v0._0;}
_E.Case($moduleName,
"on line 33, column 27 to 28");
"on line 22, column 27 to 28");
}();
};
var Cat = function (a) {
@ -116,7 +115,7 @@ Elm.Cat.make = function (_elm) {
case "Nothing":
return Maybe.Nothing;}
_E.Case($moduleName,
"between lines 47 and 50");
"between lines 36 and 39");
}();}
break;}
return Maybe.Nothing;
@ -125,45 +124,11 @@ Elm.Cat.make = function (_elm) {
return Maybe.Nothing;
}();
};
var display = function (response) {
return function () {
switch (response.ctor)
{case "Failure":
return Text.asText(response);
case "Success":
return A2(Graphics.Element.flow,
Graphics.Element.down,
_L.fromArray([Text.asText(jsonToCats(Json.fromString(response._0)))]));
case "Waiting":
return Text.asText("WAITING");}
_E.Case($moduleName,
"between lines 55 and 58");
}();
};
var jsonGet = function (url) {
return A4(Http.request,
"GET",
url,
"",
_L.fromArray([{ctor: "_Tuple2"
,_0: "Accept"
,_1: "application/json"}]));
};
var getCats = jsonGet("/cats");
var responses = Http.send(Signal.constant(getCats));
var main = A2(Signal._op["<~"],
display,
responses);
_elm.Cat.values = {_op: _op
,jsonGet: jsonGet
,getCats: getCats
,responses: responses
,catFromDict: catFromDict
,fromJust: fromJust
,objlistToCatList: objlistToCatList
,jsonToCats: jsonToCats
,display: display
,main: main
,Cats: Cats
,Cat: Cat};
return _elm.Cat.values;

71
static/elm/Main.elm

@ -0,0 +1,71 @@
module Main where
import Cat (..)
import Array
import Http
import Signal
import Json
import Dict
import Maybe
import Window
rotationSpeed = 1/5000
gonSize = 150
elapsedTime = foldp (+) 0 (fps 30)
main : Signal Element
main = display <~ Window.dimensions ~ elapsedTime ~ getJson "/cats"
display : (Int,Int) -> Float -> Http.Response String -> Element
display (w,h) t response = case response of
Http.Success cats -> showCats (w,h) t <| jsonToCats (Json.fromString cats)
Http.Waiting -> asText "WAITING..."
Http.Failure _ _ -> asText response
showCats : (Int,Int) -> Float -> Maybe Cats -> Element
showCats (w,h) t cats = let containerSize = 200
nbOnRow = div w 200
in
case cats of
(Just (Cats r)) -> let drawOneLine oneLine = flow right <|
map (container containerSize containerSize middle . showOneCat t) oneLine
in container w h midTop <|
flow down <| map drawOneLine (listToGrid nbOnRow (.cats r))
_ -> collage w h [rotate (t*rotationSpeed) (filled red (ngon 4 50))]
listToGrid : Int -> [a] -> [[a]]
listToGrid n l = case l of
[] -> []
l -> (take n l) :: listToGrid n (drop n l)
showOneCat : Float -> Cat -> Element
showOneCat t (Cat {age, name}) =
let shape = case age of
Nothing -> oval (gonSize - 10) (gonSize - 20)
Just 0 -> oval (gonSize - 20) gonSize
Just 1 -> oval (gonSize - 20) gonSize
Just 2 -> rect (gonSize/2) gonSize
Just n -> ngon n (gonSize/2)
ccolor = case age of
Nothing -> grey
Just 0 -> rgba 255 220 220 1.0
Just 1 -> red
Just 2 -> orange
Just 3 -> yellow
Just 4 -> green
Just 5 -> blue
Just n -> let level = (div 255 n) in
rgba level level level 1.0
in
layers [ collage (round gonSize) (round gonSize) [rotate (t*rotationSpeed) <| move (0,0) (filled ccolor shape)]
, container (round gonSize) (round gonSize) middle (centered (Text.color (rgba 0 0 0 0.6) (bold (toText name))))
]
-- HTTP Handling
jsonGetRequest : String -> Http.Request String
jsonGetRequest url = Http.request "GET" url "" [("Accept","application/json")]
getJson : String -> Signal (Http.Response String)
getJson url = Http.send <| Signal.constant <| jsonGetRequest <| url

389
static/elm/Main.html

@ -0,0 +1,389 @@
<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title>Main</title><script type="text/javascript" src="/static/js/elm-runtime.js"></script><script type="text/javascript">Elm.Main = Elm.Main || {};
Elm.Main.make = function (_elm) {
"use strict";
_elm.Main = _elm.Main || {};
if (_elm.Main.values)
return _elm.Main.values;
var _N = Elm.Native,
_U = _N.Utils.make(_elm),
_L = _N.List.make(_elm),
_A = _N.Array.make(_elm),
_E = _N.Error.make(_elm),
$moduleName = "Main";
var Array = Elm.Array.make(_elm);
var Basics = Elm.Basics.make(_elm);
var Cat = Elm.Cat.make(_elm);
var Color = Elm.Color.make(_elm);
var Dict = Elm.Dict.make(_elm);
var Graphics = Graphics || {};
Graphics.Collage = Elm.Graphics.Collage.make(_elm);
var Graphics = Graphics || {};
Graphics.Element = Elm.Graphics.Element.make(_elm);
var Http = Elm.Http.make(_elm);
var Json = Elm.Json.make(_elm);
var List = Elm.List.make(_elm);
var Maybe = Elm.Maybe.make(_elm);
var Native = Native || {};
Native.Json = Elm.Native.Json.make(_elm);
var Native = Native || {};
Native.Ports = Elm.Native.Ports.make(_elm);
var Signal = Elm.Signal.make(_elm);
var String = Elm.String.make(_elm);
var Text = Elm.Text.make(_elm);
var Time = Elm.Time.make(_elm);
var Window = Elm.Window.make(_elm);
var _op = {};
var jsonGetRequest = function (url) {
return A4(Http.request,
"GET",
url,
"",
_L.fromArray([{ctor: "_Tuple2"
,_0: "Accept"
,_1: "application/json"}]));
};
var getJson = function (url) {
return Http.send(Signal.constant(jsonGetRequest(url)));
};
var listToGrid = F2(function (n,
l) {
return function () {
switch (l.ctor)
{case "[]":
return _L.fromArray([]);}
return {ctor: "::"
,_0: A2(List.take,n,l)
,_1: A2(listToGrid,
n,
A2(List.drop,n,l))};
}();
});
var elapsedTime = A3(Signal.foldp,
F2(function (x,y) {
return x + y;
}),
0,
Time.fps(30));
var gonSize = 150;
var rotationSpeed = 1 / 5000;
var showOneCat = F2(function (t,
_v1) {
return function () {
switch (_v1.ctor)
{case "Cat":
return function () {
var ccolor = function () {
var _v4 = _v1._0.age;
switch (_v4.ctor)
{case "Just": switch (_v4._0)
{case 0: return A4(Color.rgba,
255,
220,
220,
1.0);
case 1: return Color.red;
case 2: return Color.orange;
case 3: return Color.yellow;
case 4: return Color.green;
case 5: return Color.blue;}
return function () {
var level = A2(Basics.div,
255,
_v4._0);
return A4(Color.rgba,
level,
level,
level,
1.0);
}();
case "Nothing":
return Color.grey;}
_E.Case($moduleName,
"between lines 50 and 60");
}();
var shape = function () {
var _v6 = _v1._0.age;
switch (_v6.ctor)
{case "Just": switch (_v6._0)
{case 0:
return A2(Graphics.Collage.oval,
gonSize - 20,
gonSize);
case 1:
return A2(Graphics.Collage.oval,
gonSize - 20,
gonSize);
case 2:
return A2(Graphics.Collage.rect,
gonSize / 2,
gonSize);}
return A2(Graphics.Collage.ngon,
_v6._0,
gonSize / 2);
case "Nothing":
return A2(Graphics.Collage.oval,
gonSize - 10,
gonSize - 20);}
_E.Case($moduleName,
"between lines 44 and 50");
}();
return Graphics.Element.layers(_L.fromArray([A3(Graphics.Collage.collage,
Basics.round(gonSize),
Basics.round(gonSize),
_L.fromArray([Graphics.Collage.rotate(t * rotationSpeed)(A2(Graphics.Collage.move,
{ctor: "_Tuple2"
,_0: 0
,_1: 0},
A2(Graphics.Collage.filled,
ccolor,
shape)))]))
,A4(Graphics.Element.container,
Basics.round(gonSize),
Basics.round(gonSize),
Graphics.Element.middle,
Text.centered(A2(Text.color,
A4(Color.rgba,
0,
0,
0,
0.6),
Text.bold(Text.toText(_v1._0.name)))))]));
}();}
_E.Case($moduleName,
"between lines 44 and 63");
}();
});
var showCats = F3(function (_v8,
t,
cats) {
return function () {
switch (_v8.ctor)
{case "_Tuple2":
return function () {
var nbOnRow = A2(Basics.div,
_v8._0,
200);
var containerSize = 200;
return function () {
switch (cats.ctor)
{case "Just":
switch (cats._0.ctor)
{case "Cats":
return function () {
var drawOneLine = function (oneLine) {
return Graphics.Element.flow(Graphics.Element.right)(A2(List.map,
function ($) {
return A3(Graphics.Element.container,
containerSize,
containerSize,
Graphics.Element.middle)(showOneCat(t)($));
},
oneLine));
};
return A3(Graphics.Element.container,
_v8._0,
_v8._1,
Graphics.Element.midTop)(Graphics.Element.flow(Graphics.Element.down)(A2(List.map,
drawOneLine,
A2(listToGrid,
nbOnRow,
function (_) {
return _.cats;
}(cats._0._0)))));
}();}
break;}
return A3(Graphics.Collage.collage,
_v8._0,
_v8._1,
_L.fromArray([A2(Graphics.Collage.rotate,
t * rotationSpeed,
A2(Graphics.Collage.filled,
Color.red,
A2(Graphics.Collage.ngon,
4,
50)))]));
}();
}();}
_E.Case($moduleName,
"between lines 26 and 34");
}();
});
var display = F3(function (_v15,
t,
response) {
return function () {
switch (_v15.ctor)
{case "_Tuple2":
return function () {
switch (response.ctor)
{case "Failure":
return Text.asText(response);
case "Success":
return A2(showCats,
{ctor: "_Tuple2"
,_0: _v15._0
,_1: _v15._1},
t)(Cat.jsonToCats(Json.fromString(response._0)));
case "Waiting":
return Text.asText("WAITING...");}
_E.Case($moduleName,
"between lines 20 and 23");
}();}
_E.Case($moduleName,
"between lines 20 and 23");
}();
});
var main = A2(Signal._op["~"],
A2(Signal._op["~"],
A2(Signal._op["<~"],
display,
Window.dimensions),
elapsedTime),
getJson("/cats"));
_elm.Main.values = {_op: _op
,rotationSpeed: rotationSpeed
,gonSize: gonSize
,elapsedTime: elapsedTime
,main: main
,display: display
,showCats: showCats
,listToGrid: listToGrid
,showOneCat: showOneCat
,jsonGetRequest: jsonGetRequest
,getJson: getJson};
return _elm.Main.values;
};Elm.Cat = Elm.Cat || {};
Elm.Cat.make = function (_elm) {
"use strict";
_elm.Cat = _elm.Cat || {};
if (_elm.Cat.values)
return _elm.Cat.values;
var _N = Elm.Native,
_U = _N.Utils.make(_elm),
_L = _N.List.make(_elm),
_A = _N.Array.make(_elm),
_E = _N.Error.make(_elm),
$moduleName = "Cat";
var Basics = Elm.Basics.make(_elm);
var Color = Elm.Color.make(_elm);
var Dict = Elm.Dict.make(_elm);
var Graphics = Graphics || {};
Graphics.Collage = Elm.Graphics.Collage.make(_elm);
var Graphics = Graphics || {};
Graphics.Element = Elm.Graphics.Element.make(_elm);
var Json = Elm.Json.make(_elm);
var List = Elm.List.make(_elm);
var Maybe = Elm.Maybe.make(_elm);
var Native = Native || {};
Native.Json = Elm.Native.Json.make(_elm);
var Native = Native || {};
Native.Ports = Elm.Native.Ports.make(_elm);
var Signal = Elm.Signal.make(_elm);
var String = Elm.String.make(_elm);
var Text = Elm.Text.make(_elm);
var Time = Elm.Time.make(_elm);
var _op = {};
var fromJust = function (_v0) {
return function () {
switch (_v0.ctor)
{case "Just": return _v0._0;}
_E.Case($moduleName,
"on line 22, column 21 to 22");
}();
};
var Cat = function (a) {
return {ctor: "Cat",_0: a};
};
var catFromDict = function (val) {
return function () {
switch (val.ctor)
{case "Object":
return function () {
var _v5 = A2(Dict.get,
"name",
val._0);
switch (_v5.ctor)
{case "Just":
switch (_v5._0.ctor)
{case "String":
return function () {
var _v8 = A2(Dict.get,
"age",
val._0);
switch (_v8.ctor)
{case "Just":
switch (_v8._0.ctor)
{case "Null":
return Maybe.Just(Cat({_: {}
,age: Maybe.Nothing
,name: _v5._0._0}));
case "Number":
return Maybe.Just(Cat({_: {}
,age: Maybe.Just(Basics.round(_v8._0._0))
,name: _v5._0._0}));}
break;}
return Maybe.Nothing;
}();}
break;}
return Maybe.Nothing;
}();}
return Maybe.Nothing;
}();
};
var objlistToCatList = function (dictList) {
return function () {
var jlist = A2(List.map,
catFromDict,
dictList);
return A2(List.all,
Maybe.isJust,
jlist) ? Maybe.Just(A2(List.map,
fromJust,
jlist)) : Maybe.Nothing;
}();
};
var Cats = function (a) {
return {ctor: "Cats",_0: a};
};
var jsonToCats = function (jcat) {
return function () {
switch (jcat.ctor)
{case "Just":
switch (jcat._0.ctor)
{case "Object":
return function () {
var _v14 = A2(Dict.get,
"cats",
jcat._0._0);
switch (_v14.ctor)
{case "Just":
switch (_v14._0.ctor)
{case "Array":
return function () {
var _v17 = objlistToCatList(_v14._0._0);
switch (_v17.ctor)
{case "Just":
return Maybe.Just(Cats({_: {}
,cats: _v17._0}));
case "Nothing":
return Maybe.Nothing;}
_E.Case($moduleName,
"between lines 36 and 39");
}();}
break;}
return Maybe.Nothing;
}();}
break;}
return Maybe.Nothing;
}();
};
_elm.Cat.values = {_op: _op
,catFromDict: catFromDict
,fromJust: fromJust
,objlistToCatList: objlistToCatList
,jsonToCats: jsonToCats
,Cats: Cats
,Cat: Cat};
return _elm.Cat.values;
};</script></head><body><script type="text/javascript">Elm.fullscreen(Elm.Main)</script><noscript></noscript></body></html>
Loading…
Cancel
Save