From 1a6683695c56f7119e18f9569940e5444d83064d Mon Sep 17 00:00:00 2001
From: Martin Boonk <martin@boonk.info>
Date: Sun, 6 Mar 2022 13:18:46 +0100
Subject: [PATCH] Allow drawing rectangles

---
 apps/imageclock/app.js      | 21 +++++++++++++++++++++
 apps/imageclock/custom.html |  4 +++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/apps/imageclock/app.js b/apps/imageclock/app.js
index 928eaaaa3..b22ca7f95 100644
--- a/apps/imageclock/app.js
+++ b/apps/imageclock/app.js
@@ -441,6 +441,27 @@ function drawPoly(resources, element, offset){
     endPerfLog("drawPoly");
 }
 
+function drawRect(resources, element, offset){
+    startPerfLog("drawRect");
+    var vertices = [];
+    var primitiveOffset = offset.clone();
+    if (element.X) primitiveOffset.X += element.X;
+    if (element.Y) primitiveOffset.Y += element.Y;
+
+    if (element.ForegroundColor) g.setColor(element.ForegroundColor);
+
+    if (element.Filled){
+      startPerfLog("drawRect_g.fillRect");
+      g.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);
+      endPerfLog("drawRect_g.fillRect");
+    }
+    endPerfLog("drawRect");
+}
+
 var numbers = {};
 numbers.Hour = () => { return new Date().getHours(); };
 numbers.HourTens = () => { return Math.floor(new Date().getHours()/10); };
diff --git a/apps/imageclock/custom.html b/apps/imageclock/custom.html
index 7a80f8cfb..341b23dac 100644
--- a/apps/imageclock/custom.html
+++ b/apps/imageclock/custom.html
@@ -540,6 +540,8 @@
           
           combineProperty("X",element,next);
           combineProperty("Y",element,next);
+          combineProperty("Width",element,next);
+          combineProperty("Height",element,next);
           combineProperty("HideOn",element,next);
           combineProperty("Type",element,next);
           combineProperty("ForegroundColor",element,next);
@@ -550,7 +552,7 @@
           combineProperty("MaxRotationValue",element,next);
           next.Layer = element.Layer ? (element.Layer) : "" + c;
           
-          if (["MultiState","Image","CodedImage","Number","Poly","Scale"].includes(c)){
+          if (["MultiState","Image","CodedImage","Number","Poly","Rect","Scale"].includes(c)){
             result.push({type:c, value: next});
           } else {
             result = result.concat(collapseTree(next));