From 1520cb60ba7c91f6179a37fcaf297ab57164f1d6 Mon Sep 17 00:00:00 2001 From: pinq- Date: Mon, 3 Apr 2023 00:43:12 +0300 Subject: [PATCH] Settings and logs - Added settings to select number and bubble - Modified logs --- apps/rings/ChangeLog | 1 + apps/rings/app.js | 49 +++++++-------------- apps/rings/metadata.json | 8 ++-- apps/rings/rings.settings.js | 84 ++++++++++++++++++++++++++++++++++++ 4 files changed, 106 insertions(+), 36 deletions(-) create mode 100644 apps/rings/rings.settings.js diff --git a/apps/rings/ChangeLog b/apps/rings/ChangeLog index ba635f847..ecdd6b011 100644 --- a/apps/rings/ChangeLog +++ b/apps/rings/ChangeLog @@ -1 +1,2 @@ 0.01: First rev. Could use a little optimization love. +0.02: Added battery ring, bubble background for numbers, settings and little optimaztion love. \ No newline at end of file diff --git a/apps/rings/app.js b/apps/rings/app.js index 92e4761c6..93b9fac6b 100644 --- a/apps/rings/app.js +++ b/apps/rings/app.js @@ -2,21 +2,33 @@ // for Bangle.js 2 // by Amos Blanton // Remixed from / inspired by Rinkulainen watch face by Jukio Kallio - +// 2023: pinq- added new futures // To Do: // Make Month / year text buffer 1/2 size // Optimize text positioning transforms -const watch = { - x:0, y:0, w:0, h:0, + +const watch = { color:"#000000", - dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 , bubble:false}, + dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 , bubble:true}, hourRing : { size:82, weight:20, color:"#00FFFF", numbers: true, range: 12, bubble:true}, minuteRing : { size:55, weight:18, color:"#FFFF00", numbers: false, range: 60, bubble:false}, batteryRing: { size :30, weight:10, color:"#ff3300", numbers: false, range: 100, bubble:false}, screen : { width:g.getWidth(), height:g.getHeight(), centerX: g.getWidth() *0.5, centerY: g.getHeight() * 0.5, cursor: 14, font:"6x8:2" }, }; +var settings = require('Storage').readJSON("rings.settings.json", true) || {}; + +if(settings.minute){ + watch.minuteRing.numbers = settings.minute.numbers; + watch.minuteRing.bubble = settings.minute.bubble; + watch.hourRing.numbers = settings.hour.numbers; + watch.hourRing.bubble = settings.hour.bubble; + watch.dateRing.numbers = settings.date.numbers; + watch.dateRing.bubble = settings.date.bubble; +} + +delete settings; const month= ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY", "AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"]; @@ -46,33 +58,6 @@ function queueDraw() { }, wait - (Date.now() % wait)); } -// Draws a time circle (date, hours, minutes) -function drawTimeCircle(color, size, weight, range, value ) { - // variables for vertex transformations and positioning time - var tver, tobj, tran; - var ttime = (value / range) * (Math.PI * 2); - - // draw circle and line - g.setColor(color).fillCircle(watch.screen.centerX, watch.screen.centerY, size); - g.setColor("#000000").fillCircle(watch.screen.centerX, watch.screen.centerY, size - weight); - - tver = [-watch.screen.cursor, 0, watch.screen.cursor, 0, watch.screen.cursor, -size*1.01, -watch.screen.cursor, -size*1.05]; - - tobj = { x:watch.screen.centerX, y:watch.screen.centerY, scale:1, rotate:ttime }; - tran = g.transformVertices(tver, tobj); - g.fillPoly(tran); - - // Draw numbers - g.setFontAlign(0,0).setFont(watch.screen.font, 2).setColor(1,1,1); - - // size - 21 is the right offset to get the numbers aligned in the circle. - tver = [-1, 0, 1, 0, 1, -size, -1, -(size -21)]; - tran = g.transformVertices(tver, tobj); - g.setColor(1,1,1); - g.drawString(value, (tran[4]+tran[6]) / 2 , (tran[5]+tran[7]) / 2 ); - -} - function drawCircle(ringValues, offset, value ) { // variables for vertex transformations and positioning time @@ -117,7 +102,6 @@ function drawCircle(ringValues, offset, value ) { } - // For battery disable function drawArc(percent, color, ArchR) { let offset = 0; @@ -147,7 +131,6 @@ function drawArc(percent, color, ArchR) { g.setColor(color).fillCircle(watch.screen.centerX - (radius -5) * Math.sin(endRotation + amt), watch.screen.centerY - (radius -5) * Math.cos(endRotation + amt), 4); } - // Draws text for month and year in date circle function drawMonthCircleText( text, circleSize, range, value){ diff --git a/apps/rings/metadata.json b/apps/rings/metadata.json index 4409bd13a..410a58fa7 100644 --- a/apps/rings/metadata.json +++ b/apps/rings/metadata.json @@ -1,7 +1,7 @@ { "id": "rings", "name": "Rings - an animated watchface", "shortName":"Rings", - "version":"0.01", + "version":"0.02", "description": "Ring based watchface that animates to show the date when unlocked. Inspired by / remixed from Rinkulainen.", "icon": "app.png", "screenshots": [{"url":"screenshot1.png"}, {"url":"screenshot2.png"}], @@ -11,6 +11,8 @@ "readme": "README.md", "storage": [ {"name":"rings.app.js","url":"app.js"}, - {"name":"rings.img","url":"app-icon.js","evaluate":true} - ] + {"name":"rings.img","url":"app-icon.js","evaluate":true}, + {"name":"rings.settings.js","url":"settings.js"} + ], + "data": [{"name":"rings.settings.json"}], } diff --git a/apps/rings/rings.settings.js b/apps/rings/rings.settings.js new file mode 100644 index 000000000..38a916456 --- /dev/null +++ b/apps/rings/rings.settings.js @@ -0,0 +1,84 @@ +(function(back) { + var FILE = "rings.settings.json"; + // Load settings + var settings = Object.assign({ + minute: { + bubble: true, + numbers: true, + }, + hour: { + bubble: true, + numbers: true + }, + date: { + bubble: true, + numbers: true, + }, + }, require('Storage').readJSON(FILE, true) || {}); + + function writeSettings(key, value) { + settings[key] = value; + require("Storage").write("rings.settings.json",settings); + } + var mainmenu = { + "" : { "title" : "Rings" }, + "< Back" : () => back(), + /*LANG*/"Minute" : () => E.showMenu({ + "" : { "title" : /*LANG*/"Minute" }, + "< Back" : ()=>E.showMenu(mainmenu), + /*LANG*/"Bubble" : { + value: settings.minute.bubble, + onchange: (m) => { + settings.minute.bubble = m, + writeSettings(); + }, + }, + /*LANG*/"Number" : { + value: settings.minute.numbers, + onchange: (m) => { + settings.minute.numbers = m, + writeSettings(); + }, + } + }), + /*LANG*/"Hour" : () => E.showMenu({ + "" : { "title" : /*LANG*/"Hour" }, + "< Back" : ()=>E.showMenu(mainmenu), + /*LANG*/"Bubble" : { + value: settings.hour.bubble, + onchange: (m) => { + settings.hour.bubble = m, + writeSettings(); + }, + }, + /*LANG*/"Number" : { + value: settings.hour.numbers, + onchange: (m) => { + settings.hour.numbers = m, + writeSettings(); + }, + } + }), + /*LANG*/"Date" : () => E.showMenu({ + "" : { "title" : /*LANG*/"Date" }, + "< Back" : ()=>E.showMenu(mainmenu), + /*LANG*/"Bubble" : { + value: settings.date.bubble, + onchange: (m) => { + settings.date.bubble = m, + writeSettings(); + }, + }, + /*LANG*/"Number" : { + value: settings.date.numbers, + onchange: (m) => { + settings.date.numbers = m, + writeSettings(); + }, + } + }), + } + + // Show the menu + E.showMenu(mainmenu); +}) \ No newline at end of file