Add tide times app idea from https://github.com/orgs/espruino/discussions/7854#discussioncomment-14431487

Author: gfwilliams

apps/tidetimes/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

apps/tidetimes/README.md

@@ -0,0 +1,45 @@
+# Tide Times
+
+A simple app to keep track of tide times. Set up the time of the next high/low tide, and this will show you the next high/low tides based on a 6hr 12min interval.
+
+First discussed [on the forum](https://github.com/orgs/espruino/discussions/7854#discussioncomment-14431487)
+
+## Usage
+
+Run the app, and see a tide graph:
+
+![](screenshot1.png)
+
+Press the button to bring up a menu, where the estimated next low/high tides are.
+
+Choose `Next High/Low` to update the value to what you know is the next high or low tide, tap on the time to confirm. The Tide view will then update.
+
+**Note:** Any time given more than one hour in the past will be considered to be the time of the tide *on the next day*.
+
+## ClockInfo
+
+There is also a Clock Info, so if your clock supports them you show the next high/low tide plus
+where you are on the range of the tide. Tapping on the clockinfo takes you to the tides app
+for more detailed info.
+
+![](screenshot2.png) ![](screenshot3.png)
+
+## To Do
+
+* Tapping on the high/low tide clockinfo could toggle between next high/low tide?
+* We could get the data from an online source with an `interface.html` that could be run from the app loader. For instance:
+
+```
+// high/low
+https://api.tidesandcurrents.noaa.gov/api/prod/datagetter?product=predictions&begin_date=20251001&end_date=20251003&datum=MLLW&station=8443970&units=english&time_zone=lst_ldt&interval=hilo&format=json&application=my_tide_app
+// actual times per hour
+https://api.tidesandcurrents.noaa.gov/api/prod/datagetter?product=predictions&begin_date=20251001&end_date=20251003&datum=MLLW&station=8443970&units=english&time_zone=lst_ldt&interval=h&format=json&application=my_tide_app
+// station IDs from:
+https://tidesandcurrents.noaa.gov/map/
+```
+
+But this is USA-only. Admiralty (UK) and Stormglass (worldwide but rate limited) could also be options
+
+## Creator
+
+Gordon Williams

apps/tidetimes/app-icon.js

@@ -0,0 +1,96 @@
+const tide = require("tidetimes");
+
+function msToDayHours(ms) {
+  var d = new Date(ms);
+  return d.getHours()+d.getMinutes()/60;
+}
+function dayHoursToStr(t) {
+  return Math.floor(t) + ":" + Math.round((t-Math.floor(t))*60).toString().padStart(2,0);
+}
+function getDayStart() {
+  return new Date((new Date()).toISOString().substr(0,10)).getTime();
+}
+
+// redraw the screen
+function draw() {
+  let R = Bangle.appRect;
+  let dayStart = getDayStart(), // midnight yesterday
+      dayEnd = dayStart+86400000;
+  g.reset().clearRect(R);
+  let y = R.y + 20, h = 50;
+  g.reset();
+  function timeToX(time) { return (time-dayStart) * R.w / 86400000;  }
+  function heightToY(v) { return y+(1-v)*h;  }
+  // background fill
+  g.setColor(g.blendColor(g.theme.bg,"#00f",0.5));
+  for (let t=dayStart;t<=dayEnd;t+=3600000) {
+    g.fillRect(timeToX(t-1800000),heightToY(tide.getLevelAt(t)),
+               timeToX(t+1800000),y+h);
+  }
+  // grid lines
+  g.setColor(g.blendColor(g.theme.bg,g.theme.fg,0.5)).drawLine(0,y+h/2,R.w,y+h/2);
+  g.setColor(g.theme.fg).drawLine(0,y,R.w,y).drawLine(0,y+h,R.w,y+h);
+  let x = timeToX(Date.now());
+  g.fillRect(x-1,y,x+1,y+h);
+  // mark times
+  g.setColor(g.theme.fg).setFont("14").setFontAlign(0,0);
+  let td = tide.getNext(dayStart);
+  while (td.t<dayEnd) {
+    g.drawString(require("locale").time(new Date(td.t),1),
+                 timeToX(td.t), (td.v>0.5)?y-8:y+h+12);
+    td = tide.getNext(td.t+3600000);
+  }
+  // Tide text
+  y+=h+20;
+  g.setFont("17");
+  td = tide.getNext(Date.now());
+  for (let c=0;c<2;c++) {
+    g.drawString(`Next ${td.v>0.5?"High":"Low"}: `+require("locale").time(new Date(td.t),1),
+                R.w/2, y+=20);
+    td = tide.getNext(td.t+3600000);
+  }
+}
+
+function showTides() {
+  Bangle.setUI({mode: "custom", btn: showMenu});
+  draw();
+}
+
+function showMenu() {
+  let step = 5/60;
+  E.showMenu({
+    "":{title:"Tides", back : showTides },
+    "Low Tide" : {
+      value : Math.round(msToDayHours(tide.getNext(Date.now(), false).t)/step)*step,
+      format : dayHoursToStr,
+      min : 0, max: 24, step : step, wrap : true,
+      onchange : v => {
+        let dayStart = getDayStart();
+        let currHr = msToDayHours(Date.now());
+        if (v+1<currHr) v+=24;
+        tide.offset = dayStart + (v + tide.period/2)*3600000;
+        tide.save();
+        showTides();
+      }
+    },
+    "High Tide" : {
+      value : Math.round(msToDayHours(tide.getNext(Date.now(), true).t)/step)*step,
+      format : dayHoursToStr,
+      min : 0, max: 24, step : step, wrap : true,
+      onchange : v => {
+        let dayStart = getDayStart();
+        let currHr = msToDayHours(Date.now());
+        if (v+1<currHr) v+=24;
+        tide.offset = dayStart + v*3600000;
+        tide.save();
+        showTides();
+      }
+    },
+    "Exit": () => load(),
+  });
+}
+
+Bangle.loadWidgets();
+showTides();
+Bangle.drawWidgets();
+

apps/tidetimes/app.js

@@ -0,0 +1,45 @@
+(function() {
+  let interval;
+  return {
+    name: "Bangle",
+    items: [
+      { name : "Tide",
+        get : function() {
+          let tide = require("tidetimes").getNext(Date.now());
+          return {
+            text : require("locale").time(new Date(tide.t),1),
+            img : (tide.v > 0.5) ?
+              atob("GBiBAAAAAAAAAAYGBg8PDhmZmHDw8GBgYAAAAAAQAAA4AAB8AAD+AAH/AAP/gAA4AAA4AAA4AAA4AAA4AAA4AAA4AAAAAAAAAAAAAA==") :
+              atob("GBiBAAAAAAAAAAAAAAAcAAAcAAAcAAAcAAAcAAAcAAAcAAH/wAD/gAB/AAA+AAAcAAAIAAAAAAYGBg8PDhmZmHDw8GBgYAAAAAAAAA==")
+          };
+        },
+        show : function() {
+          interval = setInterval(() => { this.emit("redraw"); }, 600000); // 10 minutes
+        },
+        hide : function() { clearInterval(interval); interval = undefined; },
+        run : function() { load("tidetimes.app.js"); }
+      },
+      { name : "Tide Height",
+        get : function() {
+          let t = Date.now(), scale = 1600000;// ms per pixel
+          let tides = require("tidetimes");
+          let b = Graphics.createArrayBuffer(24,24,1);
+          b.transparent = 0;
+          for (let x=0;x<24;x+=2) {
+            b.fillRect(x, 16-tides.getLevelAt(t-scale*(x-12))*12, x+1,17);
+          }
+          b.fillPoly([12,17, 9,23, 15,23])
+          return {
+            text : Math.round(tides.getLevelAt(t)*100)+"%",
+            img : b.asImage("string")
+          };
+        },
+        show : function() {
+          interval = setInterval(() => { this.emit("redraw"); }, 600000); // 10 minutes
+        },
+        hide : function() { clearInterval(interval); interval = undefined; },
+        run : function() { load("tidetimes.app.js"); }
+      }
+    ]
+  };
+}) // must not have a semi-colon!

apps/tidetimes/app.png

@@ -0,0 +1,31 @@
+exports = {
+  period :  12*3600000 + 25*60000, // 12h25, in msec
+  offset : 0, // time(in ms) since 1970 of a high tide
+  /// Given a unix timestamp, work out the tide level (from 0 to 1)
+  getLevelAt : function(time) {
+    return 0.5 + 0.5*Math.cos((time-this.offset) * 2 * Math.PI / this.period);
+  },
+  /// Get time of next high/low/ tide after given time. Returns {v:value,t:time}
+  getNext : function(time,isHigh/*bool/undefined*/) {
+    var v = Math.ceil(2*(time-this.offset) / this.period)/2;
+    if (isHigh===undefined) {
+      isHigh = (v-Math.floor(v))==0;
+    } else {
+      if (isHigh) v = Math.ceil(v);
+      else v = Math.floor(v)+0.5;
+    }
+    return {v:isHigh?1:0, t:this.offset+v*this.period};
+  },
+  save : function() {
+    let s = require("Storage").readJSON("tidetimes.json",1)||{};
+    s.offset = this.offset;
+    s.period = this.period;
+    require("Storage").writeJSON("tidetimes.json",s);
+  },
+  load : function() {
+    let s = require("Storage").readJSON("tidetimes.json",1)||{};
+    this.offset = 0|s.offset;
+    if (s.period) this.period = 0|s.period;
+  }
+};
+exports.load();

apps/tidetimes/clkinfo.js

@@ -0,0 +1,21 @@
+{ "id": "tidetimes",
+  "name": "Tide Times",
+  "shortName":"Tides",
+  "version":"0.01",
+  "author": "gfwilliams",
+  "description": "A simple app to keep track of tide times. Set up the time of the next high/low tide, and this will show you the next high/low tides based on a 6hr 12min interval",
+  "icon": "app.png",
+  "tags": "outdoor,sea,tide,clkinfo",
+  "supports" : ["BANGLEJS2"],
+  "screenshots": [{"url":"screenshot1.png"},{"url":"screenshot2.png"},{"url":"screenshot3.png"}],
+  "provides_modules": ["tidetimes"],
+  "readme": "README.md",
+  "storage": [
+    {"name":"tidetimes","url":"lib.js"},
+    {"name":"tidetimes.app.js","url":"app.js"},
+    {"name":"tidetimes.clkinfo.js","url":"clkinfo.js"},
+    {"name":"tidetimes.img","url":"app-icon.js","evaluate":true}
+  ], "data": [
+    {"name":"tidetimes.json" }
+  ]
+}