Skip to content

Commit

Permalink
Make touchmove and touchstart events include xy coordinates
Browse files Browse the repository at this point in the history 
fixes ku-fpg#96
  • Loading branch information
@aavogt
aavogt committed Feb 14, 2022
1 parent abe5262 commit e608805
Showing 1 changed file with 50 additions and 117 deletions.
167 changes: 50 additions & 117 deletions static/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<html>
<head>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABxUlEQVRYR+1WPU/CUBQ9r8ENIiNs1dlEGJmssxL5Hy46GN2Uf4KJBhMHSOQH6OYmJA5Otk7qJCQshvqur6YWXmnLayGwtGuTe887H/dehhV/bMX9kQJIGfAYeEfW0ICdSVNy2JdFvdmHljkCNPL+cd6DVW0vwsAegC8g/42cJYqujwvTfQHDXWx02sKuB1JDzsqw9rrzgpA88IlcTTyzJRflxwX9qgFtTQZH6MLcLy8UgFPsA1lBLZt8bZ8wKhf12xI05gNHdbxWL+YBMZWCZUsRGMNlShE6B+JKQTdnbXDtSUkOojqrPP9JFwogiRTUPK2BsfOZIFQAOEWSSEGPWyKabDsShCqAJKmg65MGkNGjWbAtVnlxYj17GwZ4YSBiWQqOpagoBhS1Di2McuEs/IzelABESsAyptA7P/VSd0BFSqEigWtCUzTwmhDooYihETiaJSRUj0yFCoCY1A/kHeJKEZaKWQBiUU/UA9lG0l0RNorVqf/fivpdLcmumAIQj3rfMkqwttXXsd/1DvVmtSR5T2/l40rhP0jiU+/PYUwppJNM1DLkenZjfJJN/OHiGIk6yTY74oQjeUaE3A3pVZwykDLwC4/VJDBDudEqAAAAAElFTkSuQmCC"/>
<title>Blank Canvas</title>
<title>2Blank Canvas</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-json.js"></script>
<script type="text/javascript" src="kansas-comet.js"></script>
</head>
<body style="padding: 0px; margin: 0px; border:0px">
<div id="canvas"></div>
Expand Down Expand Up @@ -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);
}
Expand All @@ -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();
Expand All @@ -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");
});
</script>
</body>
Expand Down

0 comments on commit e608805

Please sign in to comment.