reactive to mouse pos
This commit is contained in:
parent
b40a327621
commit
6d07db291e
2 changed files with 28 additions and 25 deletions
13
Test.elm
13
Test.elm
|
@ -1,15 +1,22 @@
|
|||
import Graphics.Element (Element,container, middle,widthOf,heightOf)
|
||||
import Signal
|
||||
import Mouse
|
||||
import Time (fps)
|
||||
import Window
|
||||
import Time (fps,timestamp,Time)
|
||||
import Html (..)
|
||||
import Html.Attributes (..)
|
||||
|
||||
htmlToElement w h el = container w h middle (toElement w h el)
|
||||
|
||||
main : Signal Element
|
||||
main = Signal.map view (Signal.foldp (+) 0 (fps 10))
|
||||
main = Signal.map2 view Window.dimensions
|
||||
(Signal.foldp (+) 0 (fps 10))
|
||||
|
||||
view t = htmlToElement 100 100 <| text ("coucou " ++ toString t)
|
||||
view dim t = htmlToElement ((fst dim) - 50) ((snd dim) - 50) <|
|
||||
div [class "chart"] [text ("Loading... " ++ toString t)]
|
||||
|
||||
port xpos : Signal Int
|
||||
port xpos = Signal.map fst Mouse.position
|
||||
|
||||
port point : Signal (Time,(Int,Int))
|
||||
port point = timestamp Mouse.position
|
||||
|
|
40
index.html
40
index.html
|
@ -11,21 +11,9 @@
|
|||
|
||||
<!-- link rel="stylesheet" href="style.css" -->
|
||||
</head>
|
||||
<body>
|
||||
<h1>TEST</h1>
|
||||
<p>This is a test.</p>
|
||||
<div id="container">Loading...</div>
|
||||
<div id="first"></div>
|
||||
<div id="second"></div>
|
||||
</body>
|
||||
<body></body>
|
||||
<script>
|
||||
var div1 = document.getElementById('first');
|
||||
var div2 = document.getElementById('second');
|
||||
var runningElmModule1 = Elm.embed(Elm.Main,div1);
|
||||
var runningElmModule2 = Elm.embed(Elm.Main,div2);
|
||||
|
||||
var genPoint = function(v){ return { x: (new Date()).getTime(), y: v};
|
||||
}
|
||||
var genPoint = function(v){return {x:(new Date()).getTime(),y:v};};
|
||||
var genPoints = function(n) { var serie = [];
|
||||
var time = (new Date()).getTime();
|
||||
var i;
|
||||
|
@ -37,9 +25,14 @@
|
|||
var initDatas = genPoints(20);
|
||||
|
||||
var updateSerie = function(){
|
||||
var series=this.series[0];
|
||||
runningElmModule1.ports.xpos.subscribe(function(x){
|
||||
series.addPoint(genPoint(x),true,true); });
|
||||
var series=this.series;
|
||||
runningElmModule1.ports.point.subscribe(function(newpoint){
|
||||
console.log(newpoint);
|
||||
var p0 = [newpoint[0],newpoint[1][0]];
|
||||
var p1 = [newpoint[0],newpoint[1][1]];
|
||||
series[0].addPoint(p0,true,true);
|
||||
series[1].addPoint(p1,true,true);
|
||||
});
|
||||
};
|
||||
|
||||
var conf = {
|
||||
|
@ -53,14 +46,17 @@
|
|||
events: {load: updateSerie},
|
||||
},
|
||||
series: [{
|
||||
name: 'Reactive Data',
|
||||
name: 'Reactive X Mouse',
|
||||
data: initDatas
|
||||
}]
|
||||
},{
|
||||
name: 'Reactive Y Mouse',
|
||||
data: initDatas
|
||||
}]
|
||||
};
|
||||
|
||||
$(function () {
|
||||
$('#container').highcharts(conf);
|
||||
});
|
||||
var runningElmModule1 = Elm.fullscreen(Elm.Main);
|
||||
|
||||
$(function () { $('.chart').highcharts(conf); });
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue