diff --git a/apps/meridian/README.md b/apps/meridian/README.md index 5d750a965..1fdd03546 100644 --- a/apps/meridian/README.md +++ b/apps/meridian/README.md @@ -1,25 +1,11 @@ -# Clock Name +# Meridian Clock -More info on making Clock Faces: https://www.espruino.com/Bangle.js+Clock - -Describe the Clock... +An elegant clock with 2 clock info ## Usage -Describe how to use it - -## Features - -Name the function - -## Controls - -Name the buttons and what they are used for - -## Requests - -Name who should be contacted for support/update requests +Tap on a widget and swipe left/right/up/down to change the displayed info ## Creator -Your name +Spioune diff --git a/apps/meridian/app.js b/apps/meridian/app.js index e560cc6fd..3bb904c7c 100644 --- a/apps/meridian/app.js +++ b/apps/meridian/app.js @@ -1,188 +1,135 @@ -require("FontDylex7x13").add(Graphics); -var weather = require("Storage").readJSON("weather.json", 1) || {}; -function getArcXY(centerX, centerY, radius, angle) { - var s, - r = []; - s = (2 * Math.PI * angle) / 360; +function getArcXY(centerX,centerY,radius,angle){ + var s,r = []; + s = 2 * Math.PI * angle / 360; r.push(centerX + Math.round(Math.cos(s) * radius)); r.push(centerY + Math.round(Math.sin(s) * radius)); return r; } -function getArc(centerX, centerY, radius, startAngle, endAngle) { - var xy, - r = [], - actAngle = startAngle; - var stepAngle = ((radius + radius) * Math.PI) / 60; +function getArc(centerX,centerY,radius,startAngle,endAngle){ + var r = [], actAngle = startAngle; + var stepAngle = (radius + radius) * Math.PI / 60; stepAngle = 6; - while (actAngle < endAngle) { - r = r.concat(getArcXY(centerX, centerY, radius, actAngle)); + while(actAngle < endAngle){ + r = r.concat(getArcXY(centerX,centerY,radius,actAngle)); actAngle += stepAngle; - actAngle = Math.min(actAngle, endAngle); + actAngle = Math.min(actAngle,endAngle); } - return r.concat(getArcXY(centerX, centerY, radius, endAngle)); + return r.concat(getArcXY(centerX,centerY,radius,endAngle)); } + +let clockInfoItems = require("clock_info").load(); + +clockInfoItems[0].items.unshift({ + name : "BatteryRing", + hasRange : true, + get : () => { + var s = 30; + var mid=s/2; + var v = E.getBattery(); + var img; + var g = Graphics.createArrayBuffer(s,s,4); + + const outerarc = getArc(mid,mid,14,-90,Math.max(v*3.6, 10)-90); + const innerarc = getArc(mid,mid,11,-92,Math.max(v*3.6, 10)-88); + + g.reset(); + g.setColor('#00FF00').fillPoly([mid, mid].concat(outerarc)); + g.setColor('#000').fillPoly([mid, mid].concat(innerarc)); + g.setFont("6x8").setColor('#FFF').setFontAlign(0, 0).drawString(v, mid, mid); + img = g.asImage("object"); + return { v : v, min:0, max:100, img : img }; + }, + show : function() { }, + hide : function() { }, +}); + +function drawInfoClock(itm,info,options){ + g.reset().clearRect(options.x-1, options.y-1, options.x+options.w+1, options.y+options.h+1); + if (options.focus) g.drawRect(options.x-1, options.y-1, options.x+options.w+1, options.y+options.h+1); + if (info.img) g.drawImage(info.img, options.x+options.w/2-(info.img.width||options.w)*options.scale/2,options.y, {scale:options.scale}); + if(info.text) g.setFont("6x8").setFontAlign(0,1).drawString(info.text, options.x+options.w/2,options.y+options.h); +} + +const topleft = require("clock_info").addInteractive(clockInfoItems, { + x : g.getWidth()*(1/4)-15, y: g.getHeight()*(1/4)-15, w: 30, h:30, scale:1, + draw : drawInfoClock +}); + +const topright = require("clock_info").addInteractive(clockInfoItems, { + x : g.getWidth()*(3/4)-15, y: g.getHeight()*(1/4)-15, w: 30, h:30, scale:1, + draw : drawInfoClock +}); + + var timeout; -function fillLine(x1, y1, x2, y2, thickness) { +function fillLine(x1,y1,x2,y2,thickness){ const angle = Math.atan2(y2 - y1, x2 - x1); - const offset_x = (thickness * Math.sin(angle)) / 2; - const offset_y = (thickness * Math.cos(angle)) / 2; - g.fillPoly( - [ - x1 + offset_x, - y1 - offset_y, - x1 - offset_x, - y1 + offset_y, - x2 - offset_x, - y2 + offset_y, - x2 + offset_x, - y2 - offset_y, - ], - true - ); + const offset_x = thickness * Math.sin(angle) / 2; + const offset_y = thickness * Math.cos(angle) / 2; + g.fillPoly([ + x1 + offset_x, + y1 - offset_y, + x1 - offset_x, + y1 + offset_y, + x2 - offset_x, + y2 + offset_y, + x2 + offset_x, + y2 - offset_y + ],true); } -function getWeatherIcon(txt) { - txt = txt.toLowerCase(); - if (txt == "rainy") { - return atob("EhCBAAAAAPwAf4A/8A/8D//H//v////////3//j//AjEBiMDEIAAAA=="); - } else if (txt == "cloudy") { - return atob("FA6BAABgAD/AB/4Af+A//wf/+H//7//+//////////f//j//4P/4"); - } else if (txt == "sunny") { - return atob( - "FBSBAABgAAYAAAABgBgY8YA/wAf+AH/gD/8M//PP/zD/8Af+AH/gA/wBjxgYAYAAAABgAAYA" - ); - } else { - return null; - } -} - -function draw() { - g.setTheme({ fg: 0xffff, bg: 0 }); - - if (timeout) { +function draw(){ + g.setTheme({fg:0xFFFF, bg:0}); + + if(timeout){ clearTimeout(timeout); timeout = undefined; } g.reset().clear(); - g.setColor("#FFF"); - - const mid = g.getWidth() / 2; - g.drawImage( - require("heatshrink").decompress( - atob( - "2GwgIGDhwMEgPAAwk4Dg8HCpdwCqnwCo8DwAVK8AVIB4gVFgIVIB4wFKD5IPFG4pLJCosHMYiNJCozNJvAVJh4VJkAKJgT/PAH4A/AH4A/AH4A/AH4A/ADWACqngCicD/AVTh9+Cqc/n4VTv0P4AURgP4gZuSCYQrTVwNACqT/6AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4Ah//ACaMD/4VrQP4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/ADlACSMBAQPACqMDwED8AVS8EPFaUB/E/Nad+vwVTn/4CqcPNiSEDd/4A/AH4A/AH4A/AH4A/AH8gAgcB4AFDgwVJvAVJh4VJuAVJg4VJ8AVJgeACg8BCqoPEApYfECpY3EGpIlGCpEHCpfwCo6jFCoylEA=" - ) - ) - ); - - g.setFontAlign(0, 0); - g.setFont("Dylex7x13", 1); - - const battery = E.getBattery() || 50; - const outerarc = getArc( - g.getWidth() * (1 / 4) + 1, - g.getHeight() * (1 / 4) - 1, - 14, - -90, - Math.max(battery * 3.6, 10) - 90 - ); - const innerarc = getArc( - g.getWidth() * (1 / 4) + 1, - g.getHeight() * (1 / 4) - 1, - 11, - -92, - Math.max(battery * 3.6, 10) - 88 - ); - g.setColor("#00FF00").fillPoly( - [g.getWidth() * (1 / 4), g.getHeight() * (1 / 4) - 2].concat(outerarc) - ); - g.setColor("#000").fillPoly( - [g.getWidth() * (1 / 4), g.getHeight() * (1 / 4) - 2].concat(innerarc) - ); - g.setColor("#FFF").drawString( - battery, - g.getWidth() * (1 / 4), - g.getHeight() * (1 / 4) - ); - - if (weather && weather.txt) { - const icon = getWeatherIcon(weather.txt); - if (icon) { - g.drawImage( - icon, - g.getWidth() * (3 / 4) - 10, - g.getHeight() * (1 / 4) - 10 - ); - } else { - g.drawString( - weather.txt, - g.getWidth() * (3 / 4), - g.getHeight() * (1 / 4) - ); - } - g.drawString( - weather.temp || "-", - g.getWidth() * (3 / 4), - g.getHeight() * (1 / 4) + 16 - ); - } - + + const mid=g.getWidth()/2; + g.drawImage(require("heatshrink").decompress(atob("2GwgIGDhwMEgPAAwk4Dg8HCpdwCqnwCo8DwAVK8AVIB4gVFgIVIB4wFKD5IPFG4pLJCosHMYiNJCozNJvAVJh4VJkAKJgT/PAH4A/AH4A/AH4A/AH4A/ADWACqngCicD/AVTh9+Cqc/n4VTv0P4AURgP4gZuSCYQrTVwNACqT/6AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4Ah//ACaMD/4VrQP4A/AH4A/AH4A/AH4A/AH4A/AH4A/AH4A/ADlACSMBAQPACqMDwED8AVS8EPFaUB/E/Nad+vwVTn/4CqcPNiSEDd/4A/AH4A/AH4A/AH4A/AH8gAgcB4AFDgwVJvAVJh4VJuAVJg4VJ8AVJgeACg8BCqoPEApYfECpY3EGpIlGCpEHCpfwCo6jFCoylEA="))); + + + topleft.redraw(); + topright.redraw(); + const now = new Date(); - - g.setFont("Vector", 14); + + g.setFont("Vector",14); + g.setColor('#FFF'); + g.setFontAlign(0,0); // Date (ex. MON 8) - g.drawString( - require("locale").dow(now, 1).toUpperCase() + " " + now.getDate(), - g.getWidth() / 2, - g.getHeight() * (3 / 4) - ); - - let rhour = - (now.getHours() * Math.PI) / 6 + - (now.getMinutes() * Math.PI) / 30 / 12 - - Math.PI / 2; - let rmin = (now.getMinutes() * Math.PI) / 30 - Math.PI / 2; + g.drawString(require("locale").dow(now, 1).toUpperCase() + " " + now.getDate(), g.getWidth()/2, g.getHeight()*(3/4)); + let rhour = (now.getHours()*Math.PI/6)+(now.getMinutes()*Math.PI/30/12)-Math.PI/2; + let rmin = now.getMinutes()*Math.PI/30-Math.PI/2; + // Middle circle - g.fillCircle(mid, mid, 4); - + g.fillCircle(mid,mid,4); + // Hours hand - fillLine(mid, mid, mid + Math.cos(rhour) * 10, mid + Math.sin(rhour) * 10, 3); - fillLine( - mid + Math.cos(rhour) * 10, - mid + Math.sin(rhour) * 10, - mid + Math.cos(rhour) * 50, - mid + Math.sin(rhour) * 50, - 7 - ); + fillLine(mid, mid, mid+Math.cos(rhour)*10, mid+Math.sin(rhour)*10,3); + fillLine(mid+Math.cos(rhour)*10, mid+Math.sin(rhour)*10, mid+Math.cos(rhour)*50, mid+Math.sin(rhour)*50,7); // Minutes hand - fillLine(mid, mid, mid + Math.cos(rmin) * 10, mid + Math.sin(rmin) * 10, 3); - fillLine( - mid + Math.cos(rmin) * 10, - mid + Math.sin(rmin) * 10, - mid + Math.cos(rmin) * 76, - mid + Math.sin(rmin) * 76, - 7 - ); - - if (now.getMinutes() == 0) { + fillLine(mid, mid, mid+Math.cos(rmin)*10, mid+Math.sin(rmin)*10,3); + fillLine(mid+Math.cos(rmin)*10, mid+Math.sin(rmin)*10, mid+Math.cos(rmin)*76, mid+Math.sin(rmin)*76,7); + + if(now.getMinutes()==0){ Bangle.buzz(); } - timeout = setTimeout(() => { + timeout = setTimeout(()=>{ timeout = undefined; draw(); }, 60000 - (Date.now() % 60000)); } draw(); - Bangle.setUI("clock"); -Bangle.loadWidgets(); -Bangle.drawWidgets(); diff --git a/apps/meridian/app.png b/apps/meridian/app.png deleted file mode 100644 index dfb282495..000000000 Binary files a/apps/meridian/app.png and /dev/null differ diff --git a/apps/meridian/metadata.json b/apps/meridian/metadata.json index 3d6fb3cb8..31085eb85 100644 --- a/apps/meridian/metadata.json +++ b/apps/meridian/metadata.json @@ -3,9 +3,9 @@ "name": "Meridian Clock", "shortName": "Meridian", "version": "0.01", - "description": "An Elegant Clock", + "description": "An elegant clock", "screenshots": [{ "url": "screenshot.png" }], - "icon": "app.png", + "icon": "screenshot.png", "type": "clock", "tags": "clock", "supports": ["BANGLEJS2"], diff --git a/apps/meridian/screenshot.png b/apps/meridian/screenshot.png index cfab91f7a..d4b974e3d 100644 Binary files a/apps/meridian/screenshot.png and b/apps/meridian/screenshot.png differ