bryan
/
BangleApps_old
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

imageclock - Additional option to force direct drawing when using timeouts

master
Martin Boonk 2022-10-05 18:58:09 +02:00
parent 08b2193a91
commit f356807a45
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/imageclock/custom.html
View File

@ -23,6 +23,8 @@
Options:</br> Options:</br>
<input type="checkbox" id="timeoutwrap" name="mode"/> <input type="checkbox" id="timeoutwrap" name="mode"/>
<label for="timeoutwrap">Wrap draw calls in timeouts (Slower, more RAM use, better interactivity)</label></br> <label for="timeoutwrap">Wrap draw calls in timeouts (Slower, more RAM use, better interactivity)</label></br>
<input type="checkbox" id="forceOrigPlane" name="mode" disabled="true"/>
<label for="forceOrigPlane">Force use of direct drawing (Even faster, but will produce visible artifacts on not optimized watch faces)</label></br>
<input type="checkbox" id="debugprints" name="mode"/> <input type="checkbox" id="debugprints" name="mode"/>
<label for="debugprints">Add debug prints to generated code</label></br> <label for="debugprints">Add debug prints to generated code</label></br>
</p> </p>
@ -579,7 +581,7 @@
return result; return result;
} }
function convertToCode(elements, properties, wrapInTimeouts){ function convertToCode(elements, properties, wrapInTimeouts, forceUseOrigPlane){
var code = "(function (wr, wf) {\n"; var code = "(function (wr, wf) {\n";
if (!wrapInTimeouts){ if (!wrapInTimeouts){
code += "var ct=Date.now();\n"; code += "var ct=Date.now();\n";
@ -595,7 +597,7 @@
var c = elements[i].value; var c = elements[i].value;
console.log("Check element", c); console.log("Check element", c);
var name = c.Layer; var name = c.Layer;
var plane = wrapInTimeouts ? 1 : 0; var plane = (wrapInTimeouts && !forceUseOrigPlane) ? 1 : 0;
if (typeof c.Plane == "number"){ if (typeof c.Plane == "number"){
plane = c.Plane; plane = c.Plane;
} }
@ -610,8 +612,6 @@
console.log("Found planes", planes, "with numbers", planeNumbers) console.log("Found planes", planes, "with numbers", planeNumbers)
if (wrapInTimeouts && planes == 0) planes = 1;
code += "p0 = g;\n"; code += "p0 = g;\n";
for (var planeIndex = 0; planeIndex < planeNumbers.length; planeIndex++){ for (var planeIndex = 0; planeIndex < planeNumbers.length; planeIndex++){
@ -624,7 +624,7 @@
if (plane != 0) code += "if (!p" + plane + ") p" + plane + " = Graphics.createArrayBuffer(g.getWidth(),g.getHeight(),4,{msb:true});\n"; if (plane != 0) code += "if (!p" + plane + ") p" + plane + " = Graphics.createArrayBuffer(g.getWidth(),g.getHeight(),4,{msb:true});\n";
if (properties.Redraw && properties.Redraw.Clear){ if (properties.Redraw && properties.Redraw.Clear){
if (wrapInTimeouts && plane != 0){ if (wrapInTimeouts && (plane != 0 || forceUseOrigPlane)){
code += "p = p.then(()=>delay(0)).then(()=>{\n"; code += "p = p.then(()=>delay(0)).then(()=>{\n";
} else { } else {
code += "p = p.then(()=>{\n"; code += "p = p.then(()=>{\n";
@ -660,12 +660,6 @@
console.log("Layer elements", layername, layerElements); console.log("Layer elements", layername, layerElements);
//code for whole layer //code for whole layer
if (wrapInTimeouts && plane != 0){
code += "p = p.then(()=>delay(0)).then(()=>{\n";
} else {
code += "p = p.then(()=>{\n";
}
code += "var ct=Date.now();\n";
if (addDebug()) code += 'print("Starting layer ' + layername + '");' + "\n"; if (addDebug()) code += 'print("Starting layer ' + layername + '");' + "\n";
var checkForLayerChange = false; var checkForLayerChange = false;
@ -732,14 +726,18 @@
if (addDebug()) code += 'print("Element condition is ' + condition + '");' + "\n"; if (addDebug()) code += 'print("Element condition is ' + condition + '");' + "\n";
code += "" + colorsetting; code += "" + colorsetting;
code += (condition.length > 0 ? "if (" + condition + "){\n" : ""); code += (condition.length > 0 ? "if (" + condition + "){\n" : "");
if (wrapInTimeouts && (plane != 0 || forceUseOrigPlane)){
code += "p = p.then(()=>delay(0)).then(()=>{\n";
} else {
code += "p = p.then(()=>{\n";
}
if (addDebug()) code += 'print("Drawing element ' + elementIndex + ' with type ' + c.type + ' on plane ' + planeName + '");' + "\n"; if (addDebug()) code += 'print("Drawing element ' + elementIndex + ' with type ' + c.type + ' on plane ' + planeName + '");' + "\n";
code += "draw" + c.type + "(" + planeName + ", wr, wf.Collapsed[" + elementIndex + "].value);\n"; code += "draw" + c.type + "(" + planeName + ", wr, wf.Collapsed[" + elementIndex + "].value);\n";
code += "});\n";
code += (condition.length > 0 ? "}\n" : ""); code += (condition.length > 0 ? "}\n" : "");
} }
code += "drawingTime += Date.now() - ct;\n"; code += "drawingTime += Date.now() - ct;\n";
code += "});\n";
} }
console.log("Current plane is", plane); console.log("Current plane is", plane);
@ -759,7 +757,7 @@
var properties = faceJson.Properties; var properties = faceJson.Properties;
faceJson = { Properties: properties, Collapsed: collapseTree(faceJson,{X:0,Y:0})}; faceJson = { Properties: properties, Collapsed: collapseTree(faceJson,{X:0,Y:0})};
console.log("After collapsing", faceJson); console.log("After collapsing", faceJson);
precompiledJs = convertToCode(faceJson.Collapsed, properties, document.getElementById('timeoutwrap').checked); precompiledJs = convertToCode(faceJson.Collapsed, properties, document.getElementById('timeoutwrap').checked, document.getElementById('forceOrigPlane').checked);
console.log("After precompiling", precompiledJs); console.log("After precompiling", precompiledJs);
} }
@ -1011,6 +1009,10 @@
} }
} }
document.getElementById("timeoutwrap").addEventListener("click", function() {
document.getElementById("forceOrigPlane").disabled = !document.getElementById("timeoutwrap").checked;
});
document.getElementById("btnSave").addEventListener("click", function() { document.getElementById("btnSave").addEventListener("click", function() {
var h = document.createElement('a'); var h = document.createElement('a');
h.href = 'data:text/json;charset=utf-8,' + encodeURI(JSON.stringify(resultJson)); h.href = 'data:text/json;charset=utf-8,' + encodeURI(JSON.stringify(resultJson));