weather 0.28: Fix UV positioning, hide when 0

Author: stweedo

apps/weather/ChangeLog

@@ -23,4 +23,5 @@
 0.24: Redraw clock_info on update and provide color field for condition
 0.25: Added monochrome parameter to drawIcon in lib
 0.26: Expose update function (for use by iOS integration)
-0.27: Add UV index display
+0.27: Add UV index display
+0.28: Fix UV positioning, hide when 0

apps/weather/README.md

@@ -7,8 +7,11 @@ It also adds a ClockInfo list to Bangle.js.
 You can view the full report through the app:
 
 ![Screenshot](screenshot.png)
+
 ## iOS Setup
-Use the iOS shortcut [here](https://www.icloud.com/shortcuts/dbf7159200d945179e0938c15e64f102). The shortcut uses Apple Weather for weather updates, and sends a notification, which is read by Bangle.js. To push weather every hour, or interval, you will need to create a shortcut automation for every time you want to push the weather.
+
+Use the iOS shortcut [here](https://www.icloud.com/shortcuts/ae5f3d7d6ed3460c98a3396b267aa1c5). The shortcut uses Apple Weather for weather updates, and sends a notification, which is read by Bangle.js. To push weather every hour, or interval, you will need to create a shortcut automation for every time you want to push the weather.
+
 ## Android Setup
 
 1. Install [Gadgetbridge for Android](https://f-droid.org/packages/nodomain.freeyourgadget.gadgetbridge/) on your phone.
@@ -53,13 +56,15 @@ When you first load QuickWeather, it will take you through the setup process. Yo
 
 
 ## Clock Infos
+
 Tap on any clockInfo when focused to directly open the weather app.
 Adds:
 * Condition ClockInfo with condition icon
 * Temperature ClockInfo with condition icon.
 * Wind speed ClockInfo.
 * Chance of rain ClockInfo.
 * Temperature ClockInfo without condition icon.
+
 ## Settings
 
 * Expiration timespan can be set after which the local weather data is considered as invalid

apps/weather/app.js

@@ -9,54 +9,56 @@ Bangle.loadWidgets();
 var layout = new Layout({type:"v", bgCol: g.theme.bg, c: [
   {filly: 1},
   {type: "h", filly: 0, c: [
-    {type: "v", width: g.getWidth()/2, c: [  // Vertical container for icon + UV
+    {type: "v", width: g.getWidth()/2, c: [  // Vertical container for icon
       {type: "custom", fillx: 1, height: g.getHeight()/2 - 30, valign: -1, txt: "unknown", id: "icon",
-        render: l => weather.drawIcon(l, l.x+l.w/2, l.y+l.h/2, l.w/2-10)},
-      {type: "custom", fillx: 1, height: 20, id: "uvDisplay",
+        render: l => weather.drawIcon(l, l.x+l.w/2, l.y+l.h/2, l.w/2-5)},
+    ]},
+    {type: "v", fillx: 1, c: [
+      {type: "h", pad: 2, c: [
+        {type: "txt", font: "18%", id: "temp", label: "000"},
+        {type: "txt", font: "12%", valign: -1, id: "tempUnit", label: "°C"},
+      ]},
+      {filly: 1},
+      {type: "txt", font: "6x8", pad: 2, halign: 1, label: /*LANG*/"Humidity"},
+      {type: "txt", font: "9%", pad: 2, halign: 1, id: "hum", label: "000%"},
+      {type: "txt", font: "6x8", pad: [2, 2, 2, 2], halign: -1, label: /*LANG*/"Wind"},
+      {type: "h", pad: [0, 2, 2, 2], halign: -1, c: [
+        {type: "txt", font: "9%", pad: 2, id: "wind",  label: "00"},
+        {type: "txt", font: "6x8", pad: 2, valign: -1, id: "windUnit", label: "km/h"},
+      ]},
+      {type: "custom", fillx: 1, height: 15, id: "uvDisplay",
         render: l => {
-          if (!current || current.uv === undefined) return;
+          if (!current || current.uv === undefined || current.uv === 0) return;
           const uv = Math.min(parseInt(current.uv), 11); // Cap at 11
 
           // UV color thresholds: [max_value, color] based on WHO standards
           const colors = [[2,"#0F0"], [5,"#FF0"], [7,"#F80"], [10,"#F00"], [11,"#F0F"]];
           const color = colors.find(c => uv <= c[0])[1];
+          const blockH = 8, blockW = 3;
 
-          // Setup and measure label
+          // Draw UV title and blocks on same line
           g.setFont("6x8").setFontAlign(-1, 0);
-          const label = "UV: ";
+          const label = "UV";
           const labelW = g.stringWidth(label);
 
-          // Calculate centered position (4px block + 1px spacing) * blocks - last spacing
-          const totalW = labelW + uv * 5 - (uv > 0 ? 1 : 0);
-          const x = l.x + (l.w - totalW) / 2;
-          const y = l.y + l.h;
+          const x = l.x + 2;
+          const y = l.y + l.h / 2;
 
-          // Draw label
+          // Draw title
           g.setColor(g.theme.fg).drawString(label, x, y);
 
-          // Draw UV blocks
+          // Draw UV blocks after title
           g.setColor(color);
           for (let i = 0; i < uv; i++) {
-            g.fillRect(x + labelW + i * 5, y - 3, x + labelW + i * 5 + 3, y + 3);
+            const blockX = x + labelW + 4 + i * (blockW + 2);
+            g.fillRect(blockX, y - blockH/2, blockX + blockW, y + blockW/2);
           }
+          
+          // Reset graphics state to prevent interference
+          g.reset();
         }
       },
     ]},
-    {type: "v", fillx: 1, c: [
-      {type: "h", pad: 2, c: [
-        {type: "txt", font: "18%", id: "temp", label: "000"},
-        {type: "txt", font: "12%", valign: -1, id: "tempUnit", label: "°C"},
-      ]},
-      {filly: 1},
-      {type: "txt", font: "6x8", pad: 2, halign: 1, label: /*LANG*/"Humidity"},
-      {type: "txt", font: "9%", pad: 2, halign: 1, id: "hum", label: "000%"},
-      {filly: 1},
-      {type: "txt", font: "6x8", pad: 2, halign: -1, label: /*LANG*/"Wind"},
-      {type: "h", halign: -1, c: [
-        {type: "txt", font: "9%", pad: 2, id: "wind",  label: "00"},
-        {type: "txt", font: "6x8", pad: 2, valign: -1, id: "windUnit", label: "km/h"},
-      ]},
-    ]},
   ]},
   {filly: 1},
   {type: "txt", font: "9%", wrap: true, height: g.getHeight()*0.18, fillx: 1, id: "cond", label: /*LANG*/"Weather condition"},
@@ -91,6 +93,7 @@ function draw() {
   layout.loc.label = current.loc;
   layout.updateTime.label = `${formatDuration(Date.now() - current.time)} ago`; // How to autotranslate this and similar?
   layout.update();
+  layout.forgetLazyState();
   layout.render();
 }