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"); });