Make the markers a bit more subtle

dashboard/canvas.py

@@ -312,14 +312,7 @@ def circle(self, x:float, y:float, radius:float, fill="white", lineWidth=0, colo
         x = math.ceil(x * self.scaleX + self.offsetX)
         y = math.ceil(y * self.scaleY + self.offsetY)
         radius = math.ceil(radius * self.scaleX)
-        self.setFillStyle(fill)
-        self.context.beginPath()
-        self.context.arc(x, y, radius, 0, 2 * math.pi)
-        self.context.fill()
-        if lineWidth:
-            self.setStrokeStyle(color)
-            self.setLineWidth(lineWidth)
-            self.context.stroke()
+        js.circle(self.context, x, y, radius, fill, lineWidth, color)
 
     def absolute(self, x:float=0.0, y:float=0.0, w:float=0.0, h:float=0.0):
         return (

dashboard/views/marker.py

@@ -22,12 +22,13 @@
 
 
 class MarkerView(View):
+    radius = 14
     model = Marker
-    images = {
-        api.config.EVENT_KIND_INFO:  js.jQuery("#marker-info"),
-        api.config.EVENT_KIND_WARN:  js.jQuery("#marker-warn"),
-        api.config.EVENT_KIND_DEBUG: js.jQuery("#marker-debug"),
-        api.config.EVENT_KIND_ERROR: js.jQuery("#marker-error"),
+    colors = {
+        api.config.EVENT_KIND_INFO:  "#FFFF00",
+        api.config.EVENT_KIND_WARN:  "#F97B41",
+        api.config.EVENT_KIND_DEBUG: "#FF00FF",
+        api.config.EVENT_KIND_ERROR: "#FF0000",
     }
     offset = {
         api.config.EVENT_KIND_INFO:  4,
@@ -40,10 +41,10 @@ class MarkerView(View):
     @profiler.profile("StatusView.__init__")
     def __init__(self, canvas, model):
         View.__init__(self, canvas, model)
-        self.image = self.images[self.kind]
-        self.x = self.when * config.PIXELS_PER_SECOND - self.canvas.fromScreenDimension(18)
-        self.w = self.canvas.fromScreenDimension(36)
-        self.h = self.canvas.fromScreenDimension(36)
+        self.color = self.colors[self.kind]
+        self.x = self.when * config.PIXELS_PER_SECOND - self.canvas.fromScreenDimension(self.radius / 2)
+        self.w = self.canvas.fromScreenDimension(self.radius)
+        self.h = self.canvas.fromScreenDimension(self.radius)
         self.index = len(MarkerView.instances)
         MarkerView.instances.append(self)
 
@@ -69,17 +70,17 @@ def getShortName(self):
 
     @profiler.profile("Marker.offscreen")
     def offscreen(self, scaleX, offsetX, width):
-        self.x = self.when * config.PIXELS_PER_SECOND - self.canvas.fromScreenDimension(18)
+        self.x = self.when * config.PIXELS_PER_SECOND - self.canvas.fromScreenDimension(self.radius / 2)
         self.y = 105 - self.offset[self.kind]
-        self.w = self.canvas.fromScreenDimension(36)
+        self.w = self.canvas.fromScreenDimension(self.radius)
         return View.offscreen(self, scaleX, offsetX, width)
 
     @profiler.profile("Marker.draw")
     def draw(self):
-        self.x = self.when * config.PIXELS_PER_SECOND - self.canvas.fromScreenDimension(18)
+        self.x = self.when * config.PIXELS_PER_SECOND - self.canvas.fromScreenDimension(self.radius / 2)
         self.y = 105 - self.offset[self.kind]
-        self.w = self.canvas.fromScreenDimension(36)
-        self.canvas.image(self.x, self.y, self.w, self.h, self.image, "#666", 3)
+        self.w = self.canvas.fromScreenDimension(self.radius)
+        self.canvas.circle(self.x + self.w / 2, self.y + self.radius / 2, self.w / 2, self.color, 1, "black")
 
     def mouseenter(self, x, y):
         View.mouseenter(self, x, y)

index.html

@@ -146,11 +146,11 @@
 
     #marker-highlight {
         left: -100px;
-        width: 36px;
-        height: 36px;
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
         position: absolute;
-        background-color: transparent;
-        border: 1px solid white;
+        background-color: blue;
     }
 
     #call-highlight-top, #call-highlight-bottom, #call-highlight-left, #call-highlight-right {
@@ -529,14 +529,6 @@
     </div>
 
     <div class="hidden">
-        <img id="marker-info" width=32 height=32
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAhFBMVEVHcExQUz05PkVDSEE9Q0NBRkI8QUQ5P0U9QkQ8QUQ9QkQ+Q0M/REI+Q0M5P0U4PkX/YUT/9QD/8wBfYTg9QkTx5gT06ATu4wZnaDXn3Aj87wH26gKBgCx6eS7a0A1ubzKHhSq6sxg7QETe1AuRjiappB6uqBxKTj9QUz20rhoATypHcEweUJTOAAAALHRSTlMA8I3iEds8fiozvBbPxWJb////////////////////////////////////AJ/4vTYAAAFgSURBVDjLlVPZtoMgDKwratUeQSki4laX/v8PXhEs2NpzbvOEZEwmYeZy+SFcPwW2DVLfPU0HILZIzVhNrBgEH+krcMjICwohxXxsHHA95sMEPQu4R4Y7FIVm3vdYKXP3u4SUzPON/70Wb/d0RGii2xE/vFeNa8JkHg5L3y+DPFcs2nkApOpDPuf5zNVHiYCaz3nu7KrHPD+qnWrnyGkB0fwp5/T1gZuthBuPUN+toaedErFT3+I6XyNU63qDJQZJjQ4F6nt013hyExRqagDy3ADQWpCwGfwGgK39H4BoIR7xa4uU4G8VJElzzDeAHHNdVAZVkyNALeoCGnxeoZKrXh+ry84AWecF5nPTd0BJwC6YaBeMueqqjVwtOSWColmWplDSiIOjaAUPWq5BN9G2sX+QfUQ6nL3mqzoSBR/GaaYBb8YZpsYD7on1ktV6bbtaLzmx3ia+8CbMewvdXyz/B10jNebUUEUhAAAAAElFTkSuQmCC">
-        <img id="marker-warn" width=32 height=32
-            src="data:image/webp;base64,UklGRiIOAABXRUJQVlA4WAoAAAAwAAAAHwAAHwAASUNDUNALAAAAAAvQAAAAAAIAAABtbnRyUkdCIFhZWiAH3wACAA8AAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAA9tYAAQAAAADTLQAAAAA9DrLerpOXvptnJs6MCkPOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBkZXNjAAABRAAAAGNiWFlaAAABqAAAABRiVFJDAAABvAAACAxnVFJDAAABvAAACAxyVFJDAAABvAAACAxkbWRkAAAJyAAAAIhnWFlaAAAKUAAAABRsdW1pAAAKZAAAABRtZWFzAAAKeAAAACRia3B0AAAKnAAAABRyWFlaAAAKsAAAABR0ZWNoAAAKxAAAAAx2dWVkAAAK0AAAAId3dHB0AAALWAAAABRjcHJ0AAALbAAAADdjaGFkAAALpAAAACxkZXNjAAAAAAAAAAlzUkdCMjAxNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAACSgAAAPhAAAts9jdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQErATIBOAE+AUUBTAFSAVkBYAFnAW4BdQF8AYMBiwGSAZoBoQGpAbEBuQHBAckB0QHZAeEB6QHyAfoCAwIMAhQCHQImAi8COAJBAksCVAJdAmcCcQJ6AoQCjgKYAqICrAK2AsECywLVAuAC6wL1AwADCwMWAyEDLQM4A0MDTwNaA2YDcgN+A4oDlgOiA64DugPHA9MD4APsA/kEBgQTBCAELQQ7BEgEVQRjBHEEfgSMBJoEqAS2BMQE0wThBPAE/gUNBRwFKwU6BUkFWAVnBXcFhgWWBaYFtQXFBdUF5QX2BgYGFgYnBjcGSAZZBmoGewaMBp0GrwbABtEG4wb1BwcHGQcrBz0HTwdhB3QHhgeZB6wHvwfSB+UH+AgLCB8IMghGCFoIbgiCCJYIqgi+CNII5wj7CRAJJQk6CU8JZAl5CY8JpAm6Cc8J5Qn7ChEKJwo9ClQKagqBCpgKrgrFCtwK8wsLCyILOQtRC2kLgAuYC7ALyAvhC/kMEgwqDEMMXAx1DI4MpwzADNkM8w0NDSYNQA1aDXQNjg2pDcMN3g34DhMOLg5JDmQOfw6bDrYO0g7uDwkPJQ9BD14Peg+WD7MPzw/sEAkQJhBDEGEQfhCbELkQ1xD1ERMRMRFPEW0RjBGqEckR6BIHEiYSRRJkEoQSoxLDEuMTAxMjE0MTYxODE6QTxRPlFAYUJxRJFGoUixStFM4U8BUSFTQVVhV4FZsVvRXgFgMWJhZJFmwWjxayFtYW+hcdF0EXZReJF64X0hf3GBsYQBhlGIoYrxjVGPoZIBlFGWsZkRm3Gd0aBBoqGlEadxqeGsUa7BsUGzsbYxuKG7Ib2hwCHCocUhx7HKMczBz1HR4dRx1wHZkdwx3sHhYeQB5qHpQevh7pHxMfPh9pH5Qfvx/qIBUgQSBsIJggxCDwIRwhSCF1IaEhziH7IiciVSKCIq8i3SMKIzgjZiOUI8Ij8CQfJE0kfCSrJNolCSU4JWgllyXHJfcmJyZXJocmtyboJxgnSSd6J6sn3CgNKD8ocSiiKNQpBik4KWspnSnQKgIqNSpoKpsqzysCKzYraSudK9EsBSw5LG4soizXLQwtQS12Last4S4WLkwugi63Lu4vJC9aL5Evxy/+MDUwbDCkMNsxEjFKMYIxujHyMioyYzKbMtQzDTNGM38zuDPxNCs0ZTSeNNg1EzVNNYc1wjX9Njc2cjauNuk3JDdgN5w31zgUOFA4jDjIOQU5Qjl/Obw5+To2OnQ6sjrvOy07azuqO+g8JzxlPKQ84z0iPWE9oT3gPiA+YD6gPuA/IT9hP6I/4kAjQGRApkDnQSlBakGsQe5CMEJyQrVC90M6Q31DwEQDREdEikTORRJFVUWaRd5GIkZnRqtG8Ec1R3tHwEgFSEtIkUjXSR1JY0mpSfBKN0p9SsRLDEtTS5pL4kwqTHJMuk0CTUpNk03cTiVObk63TwBPSU+TT91QJ1BxULtRBlFQUZtR5lIxUnxSx1MTU19TqlP2VEJUj1TbVShVdVXCVg9WXFapVvdXRFeSV+BYL1h9WMtZGllpWbhaB1pWWqZa9VtFW5Vb5Vw1XIZc1l0nXXhdyV4aXmxevV8PX2Ffs2AFYFdgqmD8YU9homH1YklinGLwY0Njl2PrZEBklGTpZT1lkmXnZj1mkmboZz1nk2fpaD9olmjsaUNpmmnxakhqn2r3a09rp2v/bFdsr20IbWBtuW4SbmtuxG8eb3hv0XArcIZw4HE6cZVx8HJLcqZzAXNdc7h0FHRwdMx1KHWFdeF2Pnabdvh3VnezeBF4bnjMeSp5iXnnekZ6pXsEe2N7wnwhfIF84X1BfaF+AX5ifsJ/I3+Ef+WAR4CogQqBa4HNgjCCkoL0g1eDuoQdhICE44VHhauGDoZyhteHO4efiASIaYjOiTOJmYn+imSKyoswi5aL/IxjjMqNMY2Yjf+OZo7OjzaPnpAGkG6Q1pE/kaiSEZJ6kuOTTZO2lCCUipT0lV+VyZY0lp+XCpd1l+CYTJi4mSSZkJn8mmia1ZtCm6+cHJyJnPedZJ3SnkCerp8dn4uf+qBpoNihR6G2oiailqMGo3aj5qRWpMelOKWpphqmi6b9p26n4KhSqMSpN6mpqhyqj6sCq3Wr6axcrNCtRK24ri2uoa8Wr4uwALB1sOqxYLHWskuywrM4s660JbSctRO1irYBtnm28Ldot+C4WbjRuUq5wro7urW7LrunvCG8m70VvY++Cr6Evv+/er/1wHDA7MFnwePCX8Lbw1jD1MRRxM7FS8XIxkbGw8dBx7/IPci8yTrJuco4yrfLNsu2zDXMtc01zbXONs62zzfPuNA50LrRPNG+0j/SwdNE08bUSdTL1U7V0dZV1tjXXNfg2GTY6Nls2fHadtr724DcBdyK3RDdlt4c3qLfKd+v4DbgveFE4cziU+Lb42Pj6+Rz5PzlhOYN5pbnH+ep6DLovOlG6dDqW+rl63Dr++yG7RHtnO4o7rTvQO/M8Fjw5fFy8f/yjPMZ86f0NPTC9VD13vZt9vv3ivgZ+Kj5OPnH+lf65/t3/Af8mP0p/br+S/7c/23//2Rlc2MAAAAAAAAALklFQyA2MTk2Ni0yLTEgRGVmYXVsdCBSR0IgQ29sb3VyIFNwYWNlIC0gc1JHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAAAABQAAAAAAAAbWVhcwAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWFlaIAAAAAAAAACeAAAApAAAAIdYWVogAAAAAAAAb6IAADj1AAADkHNpZyAAAAAAQ1JUIGRlc2MAAAAAAAAALVJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUMgNjE5NjYtMi0xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLXRleHQAAAAAQ29weXJpZ2h0IEludGVybmF0aW9uYWwgQ29sb3IgQ29uc29ydGl1bSwgMjAxNQAAc2YzMgAAAAAAAQxEAAAF3///8yYAAAeUAAD9j///+6H///2iAAAD2wAAwHVWUDhMLAIAAC8fwAcQGrjRtjdS+nApNACxtwW4HrwpBSqAywkZIu95D4pi9UtLBSrgI90bYXPvPTvjqLZtN1GSIiCRkIWA3sFBl5EZCz3xAFHAnMWw97YdN5KkyHFTlhmO78l817GSGEkgAMa2bdu2bdu2bdu2bfxs1bZtuzcB8ZQDGXiBd5EPOMI3+A4uuQA9rAMEW8CQB/jAbwn+gH8OwAR7kgSHwBIOQuCvqiAJ/kF4MGCDE2n99EMhwTngCAUxD2m+OKGr3eFsrjghwX+IDwRccEnb9z8GRgPqggT1QYK+QY+t2x8JrgBPGEhRKjoaHRrjBGVbtcXa8YckSA8C/HBdqehodijLtlqLteMPSXALBENAjiyC/AAgAndtcB/E/KBENkGFF0jBIx94AjI+UCMfQQMQ2kAenvnBC1AyARG0APwEHUBkATV45ehodCjLtmoLB7wBDQOQQI+yd1+BoemMWm1wPGP3GVA2DHy7QAfeOdLS9onRfI+xfI+/5IAPoO8AUhiR+9iCgx8c/AJ/csM4kGWBMXxyVUGlvGNkscLIfIWF9Q3JBZ/BLAMoYEbOdNPb71EXJKgPEnR3eqwefkgOwTxQngAr+GpY2X/QWqlRli1ZheXdB4Y3sI0xAhUsy3jwDcyujmhOczQlOaaWB+x/AjLCGtDECI7ww5J2nn9UyhsWNzfsPP5IFvgJLvEWBmU/suBRdhgFongPv+A//At+Cb+hOEagBXPwAs/gtQLoYv4=">
-        <img id="marker-debug" width=32 height=32
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABR1BMVEVHcEw1XhZaeB5aeB5LbRpaeB5Ydx1MbBpIahmCoDJWdh02XxZGahk1XhaevCymwzJZdx1aeh671kvQ6VqcuTFwkiI/ZRg1XhZZdx01XhZaeB40XRU1XhY1XhY1XhZaeB40XRaevCzQ6VpZdx41XhZaeB51kyM1XhZaeB5aeB6fvSxaeB5beR41XhaTsSlaeB5aeB5aeB02XxafvSyPriievCxxkSaduyw1XhY1XhY1XhY1XhZaeB5hfyCduECCoiaevCy10EmevCzO51nQ6VqevCxXdh2AniaMqihKbRqFoTQ1XhZaeB6fvSyevCyauStLcRt0kSvS61vQ6VqevCxaeB6evCzR6lqfvSxZdx00XhaWtCpigCClwjLL5VQ7YxeHpCm/2UvF31FWdR2PrihohiKbuS1cfR5+nimuyjuhvUGct0BPcBzzZoeBAAAAVXRSTlMA2vNDCtf5BAwBUPoU9DsLxzkbO9f5JOcwQqQvOY22jpn1sJiBKSN2zqupgd+k9+d2ucXIGCzRz0hO0VLc9/PIucixd/ij2epT6jigoN9Rds5NxLx3WA6UAwAAAehJREFUOMt10mlX2kAUBuCbhDBZCELCKooguLBUCy513+1etUtWRZDi1vb/f+7MZJDAMfdLcu77nJnJ3AAEypg3AOIncQgp/ad9CvDLOloPAcbZD12S1tfKIUvIxtlxJdEuHYYBMA5uzN9dr5sOA9/3XQI8VQkBFdOkwCu9nkcSrutS0I4E2pIgDd8S972/f57Sj932S2tLggY/x7yeurPt245jDTbZRURmtSoIoukLfd62CbAsxznR/dzj8gBJLHK53GeaU4DrKFkoFHA+QyAWPM8f2EFgpTVNYzkWtVZrsz8Orq+KxeLM8EsQQqc0HQHrEjeDc/BPMDwkrro8dklTx3e4+hQ8DHq4DqdGKYrFFt+RZZ3n/m1nkH7EV24uZ2Ixtgd6K4riikN37vQf7l2Sm1GO21lCfh7l95oMWM9Pfu5ioKlE4HxVYVvgGi5AttjNEtHAOT7kmp871zcMJPDAtrNqFSpN8nu8DmCbK4G0QA6ymJoE7zOkX2CDX2j1nAnwr5gZXURy2f0wCT55Oy+jEPbMysfyOOCVksdt+bmyGp2T0Pk4mEbSrJrdpXOaNhv4PjZSQSDio6Oq90amICqQRzw1AiLpQF4NApA36mUf8LUcBMFXXmAzv6h/W9lv1hT2m+e1LzL8B7CLnR+T9d31AAAAAElFTkSuQmCC">
-        <img id="marker-error" width=32 height=32
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAApVBMVEVHcEy5u7vAxcXo6eni5uaAgIApKSkODQ25vb307e2+wcHy7u6ztLSpqqr27e0AAADm6Ojw7OwAAAAAAAAAAAAAAAAAAAD/AAD/Fhb/kpL/Bwf/AwP/NDT/Cwv/aGj91tb/6en/dnb/fHz/8PD90ND/gID/v7//4uL/Ozv/QUH/ISH/Kyv/trb/n5/07Oz/ZWX/iIj/SUn/WFj929v/UlL/h4f/iYmyi9arAAAAF3RSTlMAjIzq/SkMB4H8lfp7Zv4h6vczWmE7ZyvsseAAAAFLSURBVDjLfZPpdoMgEEZNF83SNGm6jLhiiSyKsRrT93+0YpMmiNjvB8fDvcIwqONc4s4etMw8x4g3X1Wf11QvT96InwK4JkaGYfCRofjXgBuGhQ8MK9eMCX4z1qtvK/811kq4S32YSHGc98JeCQUvII5UYijE+VHN+umfIFLCkogRgoVIcSoiTAgtNaHaiyTxG7nvCko5lQ3Ja4w04cSyKIAQUShxCy2rMQcpw5vgI0ZQABUNuUKCZThPBiuoejIc9UKJu34FYtTQIpGpVysaxFSWkjY4GZ6iOxKCYkAygI5h1nDG+z5oWxSNKhLKKASI2hJi7muCpZPhefR/O7k+ZKG900G+6u/CXT7bjSBfzFxn2uj55YuxGhq3GqHOLYbBR8aI98YB1cklNVqM/z13ub2/Zns+n2E8avGcibib3Wbj/JPd28fr+2DmB1EMSVxgvTPGAAAAAElFTkSuQmCC">
     </div>
     <div id="marker-highlight" class="highlight marker-highlight"></div>
     <div id="call-highlight-left" class="highlight call-highlight"></div>
@@ -636,6 +628,20 @@
                 context.stroke()
             }
         }
+
+        function circle(context, x, y, radius, fill, lineWidth, color) {
+            context.beginPath()
+            context.arc(x, y, radius, 0, 2 * Math.PI)
+            context.fillStyle = fill
+            console.log("circle", fill)
+            context.fill()
+            if (lineWidth) {
+                context.strokeStyle = color
+                context.lineWidth = lineWidth
+                context.stroke()
+            }
+
+        }
 
         // Hide the pyscript splash screen
         setTimeout(() => $("py-splashscreen").text(""), 10);