FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Draw into buffer to prevent visible refreshing

pull/1916/head
Martin Boonk 2022-03-06 18:35:32 +01:00
parent ebfc73ebd8
commit 163b59dac9
2 changed files with 72 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
apps/imageclock/app.js
View File

@ -1,6 +1,6 @@
var watchface = require("Storage").readJSON("imageclock.face.json");
var watchfaceResources = require("Storage").readJSON("imageclock.resources.json");
var precompiledJs = require("Storage").read("imageclock.draw.js");
var precompiledJs = eval(require("Storage").read("imageclock.draw.js"));
var performanceLog = {};
@ -9,6 +9,7 @@ var endPerfLog = () => {};
var printPerfLog = () => print("Deactivated");
var resetPerfLog = () => {performanceLog = {};};
var graphics = Graphics.createArrayBuffer(176,176,16,{msb:true});
if (false){
startPerfLog = function(name){
var time = getTime();
@ -41,6 +42,12 @@ if (false){
};
}
function delay(t) {
return new Promise(function (resolve) {
setTimeout(resolve, t);
});
}
function prepareImg(resource){
startPerfLog("prepareImg");
//print("prepareImg: ", resource);
@ -210,8 +217,8 @@ function drawNumber(resources, element, offset){
}
function setColors(properties){
if (properties.fg) g.setColor(properties.fg);
if (properties.bg) g.setBgColor(properties.bg);
if (properties.fg) graphics.setColor(properties.fg);
if (properties.bg) graphics.setBgColor(properties.bg);
}
function drawElement(resources, pos, offset, element, lastElem){
@ -255,7 +262,7 @@ function drawElement(resources, pos, offset, element, lastElem){
//print("Memory before drawing", process.memory(false));
startPerfLog("drawElement_g.drawImage");
try{
g.drawImage(element.cachedImage[cacheKey] ,(imageOffset.X ? imageOffset.X : 0) + (pos.X ? pos.X : 0),(imageOffset.Y ? imageOffset.Y :0) + (pos.Y ? pos.Y : 0), options);} catch (e) {
graphics.drawImage(element.cachedImage[cacheKey] ,(imageOffset.X ? imageOffset.X : 0) + (pos.X ? pos.X : 0),(imageOffset.Y ? imageOffset.Y :0) + (pos.Y ? pos.Y : 0), options);} catch (e) {
//print("Error", e, element.cachedImage[cacheKey]);
}
endPerfLog("drawElement_g.drawImage");
@ -436,21 +443,21 @@ function drawPoly(resources, element, offset){
if (element.RotationValue){
transform.rotate = radians(element);
}
vertices = g.transformVertices(vertices, transform);
vertices = graphics.transformVertices(vertices, transform);
endPerfLog("drawPoly_transform");
if (element.ForegroundColor) g.setColor(element.ForegroundColor);
if (element.ForegroundColor) graphics.setColor(element.ForegroundColor);
if (element.Filled){
startPerfLog("drawPoly_g.fillPoly");
g.fillPoly(vertices,true);
graphics.fillPoly(vertices,true);
endPerfLog("drawPoly_g.fillPoly");
}
if (element.BackgroundColor) g.setColor(element.BackgroundColor);
if (element.BackgroundColor) graphics.setColor(element.BackgroundColor);
startPerfLog("drawPoly_g.drawPoly");
g.drawPoly(vertices,true);
graphics.drawPoly(vertices,true);
endPerfLog("drawPoly_g.drawPoly");
endPerfLog("drawPoly");
@ -463,15 +470,15 @@ function drawRect(resources, element, offset){
if (element.X) primitiveOffset.X += element.X;
if (element.Y) primitiveOffset.Y += element.Y;
if (element.ForegroundColor) g.setColor(element.ForegroundColor);
if (element.ForegroundColor) graphics.setColor(element.ForegroundColor);
if (element.Filled){
startPerfLog("drawRect_g.fillRect");
g.fillRect(primitiveOffset.X, primitiveOffset.Y, primitiveOffset.X + element.Width, primitiveOffset.Y + element.Height);
graphics.fillRect(primitiveOffset.X, primitiveOffset.Y, primitiveOffset.X + element.Width, primitiveOffset.Y + element.Height);
endPerfLog("drawRect_g.fillRect");
} else {
startPerfLog("drawRect_g.fillRect");
g.drawRect(primitiveOffset.X, primitiveOffset.Y, primitiveOffset.X + element.Width, primitiveOffset.Y + element.Height);
graphics.drawRect(primitiveOffset.X, primitiveOffset.Y, primitiveOffset.X + element.Width, primitiveOffset.Y + element.Height);
endPerfLog("drawRect_g.fillRect");
}
endPerfLog("drawRect");
@ -647,6 +654,7 @@ var zeroOffset={X:0,Y:0};
var requestedDraws = 0;
var isDrawing = false;
var drawingTime;
var start;
@ -661,22 +669,55 @@ function initialDraw(resources, face){
//print(new Date().toISOString(), "Drawing start");
startPerfLog("initialDraw");
//var start = Date.now();
if (clearOnRedraw) g.clear(true);
if (precompiledJs && precompiledJs.length > 7){
drawingTime = 0;
if (typeof precompiledJs == "function"){
//print("Precompiled");
eval(precompiledJs);
var promise = Promise.resolve();
if (clearOnRedraw){
promise = promise.then(()=>{
var currentDrawingTime = Date.now();
startPerfLog("initialDraw_g.clear");
graphics.clear(true);
endPerfLog("initialDraw_g.clear");
drawingTime += Date.now() - currentDrawingTime;
});
}
promise = promise.then(()=>precompiledJs(watchfaceResources, watchface));
promise.then(()=>{
var currentDrawingTime = Date.now();
g.drawImage({width: graphics.getWidth(), height: graphics.getHeight(), bpp: graphics.getBPP(), buffer: graphics.buffer});
lastDrawTime = Date.now() - start;
drawingTime += Date.now() - currentDrawingTime;
//print(new Date().toISOString(), "Drawing done in", lastDrawTime.toFixed(0), "active:", drawingTime.toFixed(0));
isDrawing=false;
firstDraw=false;
requestRefresh = false;
endPerfLog("initialDraw");
});
} else if (face.Collapsed){
//print("Collapsed");
startPerfLog("initialDraw_g.clear");
if (clearOnRedraw) graphics.clear(true);
endPerfLog("initialDraw_g.clear");
drawIteratively(resources, face.Collapsed);
endPerfLog("initialDraw");
lastDrawTime = (Date.now() - start);
//print(new Date().toISOString(), "Drawing done", lastDrawTime.toFixed(0));
firstDraw = false;
isDrawing = false;
} else {
startPerfLog("initialDraw_g.clear");
if (clearOnRedraw) graphics.clear(true);
endPerfLog("initialDraw_g.clear");
//print("Full");
draw(resources, face, [], zeroOffset);
endPerfLog("initialDraw");
lastDrawTime = (Date.now() - start);
//print(new Date().toISOString(), "Drawing done", lastDrawTime.toFixed(0));
firstDraw = false;
isDrawing = false;
}
endPerfLog("initialDraw");
lastDrawTime = (Date.now() - start);
//print(new Date().toISOString(), "Drawing done", lastDrawTime.toFixed(0));
firstDraw = false;
isDrawing = false;
if (requestedDraws > 0){
//print(new Date().toISOString(), "Had deferred drawing left, drawing again");
requestedDraws = 0;

14
apps/imageclock/custom.html
View File

@ -562,7 +562,9 @@
}
function convertToCode(elements, properties){
var code = "var layerchanged;\n";
var code = "(function (watchfaceResources, watchface) {\n";
code += "var layerchanged;\n";
code += "var promise = Promise.resolve();\n";
//get mapped by layer
var layers = {};
@ -636,11 +638,17 @@
else colorsetting += "g.setBgColor(g.theme.bg);\n";
code += (condition.length > 0 ? "if (" + condition + "){\n" : "");
code += colorsetting;
code += "draw" + c.type + "(watchfaceResources, watchface.Collapsed[" + elementIndex + "].value, {X:0,Y:0});";
code += " promise = promise.then(()=>delay(0)).then(()=>{\n";
code += " var currentDrawTime=Date.now();\n";
code += " " + colorsetting;
code += " draw" + c.type + "(watchfaceResources, watchface.Collapsed[" + elementIndex + "].value, {X:0,Y:0});";
code += " drawingTime += Date.now() - currentDrawTime;\n";
code += " });\n";
code += (condition.length > 0 ? "}\n" : "");
}
}
code += "return promise;})";
console.log("Code:", code);
return code
}