diff --git a/static/index.html b/static/index.html
index 8e170f0..f6817ae 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,6 +4,7 @@
Blank Canvas
+
@@ -32,155 +33,99 @@
}
alert("no canvas");
}
- // ##############################################################
- // This is the sync-ing with framerate-based output
-
- var futureFrameCode = [];
- var indent = 0;
- var old_n = 0;
+ // These are the Queries
- function indenter(i) {
- return new Array(i+1).join(".");
+ function Device(u,c) {
+ $.kc.reply(u,[c.canvas.width, c.canvas.height,myDevicePixelRatio]);
}
-
- // run the given argument after the frame sync, using requestAnimationFrame.
- function nextFrame(f) {
-// console.log(indenter(indent++),"-> calling nextFrame");
- if (futureFrameCode.length != 0) {
- // suspend the call inside the callback list
- futureFrameCode.push(function(){ nextFrame(f); });
- $.kc.event({metaKey:false,type:"frame"});
- console.log("double nextFrame",futureFrameCode.length)
- return;
- }
- futureFrameCode.push(f); // Whole new list
- requestAnimationFrame(function (n) {
- var d = n - old_n;
- old_n = n;
- if (d > 20) { console.log("timing",d); }
- // Clone so we can blank the futureFrameCode before starting the frame
-// console.log("requestAnimationFrame futureFrameCode",futureFrameCode);
- var fns = futureFrameCode.slice(0);
- futureFrameCode = [];
-// console.log(indenter(indent++),"-> calling requestAnimationFrame callback",fns.length);
-// console.log("requestAnimationFrame fns",fns);
- $.each(fns,function(ix,f) {
- // Do all the callbacks.
-// console.log("callback",f);
- try {
- f();
- } catch (e) {
- alert('JavaScript Failure: '+e.message);
- }
- });
-// console.log(indenter(--indent),"<- done requestAnimationFrame callback");
- });
-// console.log(indenter(--indent),"<- done nextFrame");
- }
-
- // syncToFrame syncs the argument with any pause-for-frame requirements
- // The callback code itself should never contain a syncToFrame.
- function syncToFrame(f) {
- if (futureFrameCode.length == 0) {
- try {
- f(); // Call code *now*, because there is no future
- // requestAnimationFrame pending.
- } catch (e) {
- alert('JavaScript Failure: '+e.message);
- }
- } else {
- // Perform the callback *after* the future frame list, by appending to it.
-// console.log(indenter(indent),"pushing futureFrameCode",futureFrameCode.length);
- futureFrameCode.push(f);
- }
+ function Size(u,c) {
+ $.kc.reply(u,[c.canvas.width, c.canvas.height]);
}
+ function ToDataURL(u,c) {
+ $.kc.reply(u,c.canvas.toDataURL());
- // All code generated and sent from Haskell should use
- // syncToFrame(function() { ... })
- // as wrapper.
-
- // ##############################################################
- // These are the Queries, taking 2 arguments, then second one
- // being the (graphics) context.
-
- Device = () => (c) =>
- [c.canvas.width, c.canvas.height,myDevicePixelRatio];
-
- function Size(c) {
- return [c.canvas.width, c.canvas.height];
}
- ToDataURL = () => (c) =>
- c.canvas.toDataURL()
-
function NewImage(src) {
- return function (c) {
- return new Promise( (good,bad) => {
- var img = new Image();
- var count = images.push(img);
- img.onload = function() {
- good([count - 1,img.width,img.height])
- };
- img.onerror = function() { bad("Image " + src + " not found.\nAdd as a static file to fix this."); };
- img.src = src;
- })
+ return function (u,c) {
+ var img = new Image();
+ var count = images.push(img);
+ img.onload = function() {
+ $.kc.reply(u,[count - 1,img.width,img.height]);
+ };
+ img.onerror = function() { alert("Image " + src + " not found.\nAdd as a static file to fix this."); };
+ img.src = src;
}
}
function MeasureText(txt) {
- return function (c) {
+ return function (u,c) {
// If we try return the object directly, via json, we
// get different results on different browsers.
// So we build an object explicity.
- return { width: c.measureText(txt).width };
+ $.kc.reply(u,{ width: c.measureText(txt).width });
}
}
function IsPointInPath(x,y) {
- return function (c) {
- return c.isPointInPath(x,y);
+ return function (u,c) {
+ $.kc.reply(u,c.isPointInPath(x,y));
}
}
function NewCanvas(w,h) {
- return function (c) {
+ return function (u,c) {
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
- return canvas.getContext("2d");
+ var count = canvasbuffers.push(canvas.getContext("2d"));
+ $.kc.reply(u,[count - 1,w,h]);
}
}
function GetImageData(sx,sy,sw,sh) {
- return function (c) {
+ return function (u,c) {
var img = c.getImageData(sx,sy,sw,sh);
var arr = [];
for (var i = 0;i < img.data.length;i++) {
arr[i] = img.data[i];
}
- return { width: img.width
- , height: img.height
- , data: arr
- };
+ $.kc.reply(u,{ width: img.width
+ , height: img.height
+ , data: arr
+ });
}
}
- Sync = () => (c) => [];
+ function Cursor(cur) {
+ return function(u, c) {
+ c.canvas.style.cursor = cur;
+ $.kc.reply(u, []);
+ };
+ }
+
+ function Sync(u,c) {
+ $.kc.reply(u,[]);
+ }
function Trigger(e) {
var o = {};
o.metaKey = e.metaKey;
o.type = e.type;
+ if ((e.type == "touchmove" || e.type == "touchstart") && e.originalEvent.touches[0].pageX != undefined && e.originalEvent.touches[0].pageY != undefined) {
+ o.pageXY = [e.originalEvent.touches[0].pageX, e.originalEvent.touches[0].pageY]
+ }
if (e.pageXY != undefined) {
o.pageXY = e.pageXY;
}
if (e.pageX != undefined && e.pageY != undefined) {
o.pageXY = [e.pageX,e.pageY];
}
+
if (e.which != undefined) {
o.which = e.which;
}
- jsb.event(o);
+ $.kc.event(o);
}
-
+
function register(name) {
$(document).bind(name,Trigger);
}
@@ -206,29 +151,20 @@
function NewAudio(src) {
return function (u,c) {
var audio = new Audio();
- var count = sounds.push(audio);
+ var count = sounds.push(audio);
+ // var dur = audio.duration;
+ //
// I commented this out because there's a chance that the browser won't
// know the audio duration until it's "loaded" (i.e., it can be played
// through). Further testing might be wise.
-
- // dur itself isn't used beyond sending the duration back through $.kc.reply,
- // the current setup will probably be sufficient
audio.oncanplaythrough = function () {
$.kc.reply(u,[count - 1,audio.duration]);
};
- audio.onerror = function() { alert("Audio " + src + " not found."); };
+ audio.onerror = function() { alert("Audio " + src + " not found.\nAdd as a URL to fix this."); };
audio.src = src;
}
}
- function CurrentTimeAudio(aud) {
- return function (u,c) {
- var currTime = sounds[aud].currentTime;
-
- $.kc.reply(u,currTime);
- }
- }
-
$(document).ready(function() {
// Make the canvas the size of the window
var w = $(window).width();
@@ -255,10 +191,7 @@
$("#canvas").css("height",h + "px");
c = getContext("2d");
canvasbuffers.push(c);
- // bootstrap the web socket connection
- window.jsb = {ws: new WebSocket('ws://' + location.host)};
- jsb.ws.onmessage = (evt) => { console.log(evt,evt.data) ; eval(evt.data); }
- jsb.debug = true;
+ $.kc.connect("/blank");
});