diff --git a/apps/rings/battery.js b/apps/rings/battery.js deleted file mode 100644 index c628199ec..000000000 --- a/apps/rings/battery.js +++ /dev/null @@ -1,284 +0,0 @@ -// Rings watch face -// for Bangle.js 2 -// by Amos Blanton -// Remixed from / inspired by Rinkulainen watch face by Jukio Kallio - -// To Do: -// Make Month / year text buffer 1/2 size -// Optimize text positioning transforms - -const watch = { - x:0, y:0, w:0, h:0, - color:"#000000", - 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: true, 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" }, -}; - -const month= ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY", - "AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"]; - -var wait = 60000; // wait time, normally a minute -// timeout used to update every minute -var drawTimeout; -// Global for use in shrink / unshrink animations -var counter = 1; - -// Buffer for month circle text, 1/2 screen size (will be scaled up) -var monthCircleTextBuffer= Graphics.createArrayBuffer(watch.screen.width,watch.screen.height,1,{msb:true}); -var monthCircleTextImg = monthCircleTextBuffer.asImage(); -monthCircleTextImg.transparent = 1; -var lastMonthCircleImageText = ""; - -// Calculate number of days in this month / year for date ring -const getDays = (year, thisMonth) => { - return new Date(year, thisMonth, 0).getDate(); // getMonth() Jan = 0. -}; - -// Schedule a draw for the next minute -function queueDraw() { - if (drawTimeout) clearTimeout(drawTimeout); - drawTimeout = setTimeout(function() { - drawTimeout = undefined; - draw(); - }, 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 drawArc(percent, color, ArchR) { - let offset = 0; - let end = 360; - let radius = ArchR + 2; - - if (percent <= 0) return; // no gauge needed - if (percent > 1) percent = 1; - - let startRotation = -offset; - let endRotation = startRotation - (end * percent); - - g.setColor(color); - // convert to radians - startRotation *= Math.PI / 180; - let amt = Math.PI / 10; - endRotation = (endRotation * Math.PI / 180) - amt; - // all we need to draw is an arc, because we'll fill the center - let poly = [watch.screen.centerX, watch.screen.centerY]; - for (let r = startRotation; r > endRotation; r -= amt) - poly.push( - watch.screen.centerX - radius * Math.sin(r), - watch.screen.centerY - radius * Math.cos(r) - ); - g.fillPoly(poly); - g.setColor("#000000").fillCircle(watch.screen.centerX, watch.screen.centerY, ArchR - 10); - g.setColor(color).fillCircle(watch.screen.centerX - (radius -5) * Math.sin(endRotation + amt), watch.screen.centerY - (radius -5) * Math.cos(endRotation + amt), 4); -} - - -function drawCircle(ringValues, offset, value ) { - // variables for vertex transformations and positioning time - let tver, tobj, tran; - let ttime = (value / ringValues.range) * (Math.PI * 2); - - // draw circle - g.setColor(ringValues.color).fillCircle(watch.screen.centerX, watch.screen.centerY, ringValues.size + offset); - g.setColor("#000000").fillCircle(watch.screen.centerX, watch.screen.centerY, ringValues.size - ringValues.weight + offset); - // draw line - //let location_x = watch.screen.centerX +(ringValues.size + offset) * Math.cos((-(value / ringValues.range)+0.25)*2*Math.PI); - //let location_y = watch.screen.centerY -(ringValues.size + offset) * Math.sin((-(value / ringValues.range)+0.25)*2*Math.PI); - tobj = { x:watch.screen.centerX, y:watch.screen.centerY, scale:1, rotate:ttime }; - if(ringValues.bubble){ - tver = [-1, 0, 1, 0, 1, -ringValues.size-offset, -1, -(ringValues.size + offset -21)]; - tran = g.transformVertices(tver, tobj); - g.setColor("#000000").fillCircle((tran[4]+tran[6]) / 2 , (tran[5]+tran[7]) / 2, 17 + offset/10); - }else{ - tver = [-watch.screen.cursor, 0, watch.screen.cursor, 0, watch.screen.cursor, -ringValues.size*1.01 - offset, -watch.screen.cursor, -ringValues.size*1.05 - offset]; - tran = g.transformVertices(tver, tobj); - g.fillPoly(tran); - - } - - // Draw numbers - if(ringValues.numbers){ - // size - 21 is the right offset to get the numbers aligned in the circle. - tver = [-1, 0, 1, 0, 1, -ringValues.size-offset, -1, -(ringValues.size + offset -21)]; - tran = g.transformVertices(tver, tobj); - //g.setColor(1,1,1); - g.setFontAlign(0,0).setFont(watch.screen.font, 2).setColor(1,1,1); - g.drawString(value, (tran[4]+tran[6]) / 2 , (tran[5]+tran[7]) / 2 ); - - } - - -} - -// Draws text for month and year in date circle -function drawMonthCircleText( text, circleSize, range, value, delta){ - - // If the text isn't the same as last time, write it into a graphic object. - if(text != lastMonthCircleImageText){ - - monthCircleTextBuffer.clear(); - monthCircleTextBuffer.fillRect(0,0,watch.screen.width,watch.screen.height); - - var tver, tobj, tran; - - // From here: https://forum.espruino.com/comments/16781795/ - var gr = Graphics.createArrayBuffer(24,16,1,{msb:true}); - var grimg = gr.asImage(); - grimg.transparent = 1; - monthCircleTextBuffer.setColor(1,1,1); - - for(z=0; z < text.length; z++){ - tobj = { x:watch.screen.centerX, y:watch.screen.centerY, scale:1, rotate: ((z + 1) / range) * (Math.PI * 2) }; - tver = [-1, 0, 1, 0, 1, -circleSize, -1, -(circleSize -21)]; - tran = monthCircleTextBuffer.transformVertices(tver, tobj); - gr.clear().setColor(1,1,1).fillRect(0,0,24,16).setColor(0,0,0).setFont(watch.screen.font).setFontAlign(0,0).drawString(text[z],12,8); - - monthCircleTextBuffer.drawImage(grimg, - (tran[4]+tran[6]) / 2, - (tran[5]+tran[7]) / 2, - {rotate:((z+1) / range) * (Math.PI * 2) }); - } - - lastMonthCircleImageText = text; - } - - // Determine correct rotation for text in ring ( opposite the date position ) - var offset = value + (range / 2) - (text.length / 2); - if(offset > range) - offset = offset - range; - var rotation = (offset / range) * (Math.PI * 2); - - // Draw the image of text to the screen at that rotation - g.drawImage(monthCircleTextImg, watch.screen.centerX, watch.screen.centerY, {scale:1, rotate:rotation }); - -} - -// Animate by shrinking or expanding circles -function shrinkCircles(toggle){ - // If there's a queued draw operation,removeit so animation isn't interrupted. - if (drawTimeout) clearTimeout(drawTimeout); - var date = new Date(); - var delta = 1; - - if(counter > 12) - { - counter = 1; - // We're finished, so queue next draw. - queueDraw(); - return; - } - - if(toggle) // We are shrinking - delta = counter * 2 * -1; - else // We are expanding - delta = counter *2 - 24; - - // Clear space on screen. - g.setColor(watch.color); - g.fillRect(0, 0, watch.screen.width, watch.screen.height); - - // Draw the date ring (unless it's the last run of an expansion). - if(counter < 11 || toggle){ - drawTimeCircle(watch.dateRing.color, watch.dateRing.size + delta, watch.dateRing.weight, getDays(date.getFullYear(), date.getMonth()+1), date.getDate() ); - //drawCircle(watch.dateRing, delta, date.getDate()); - // Draw month and year in date ring - drawMonthCircleText( month[date.getMonth()]+" "+date.getFullYear(), watch.dateRing.size - 24, getDays(date.getFullYear(), date.getMonth()+1), date.getDate()) ; - } - - drawCircle(watch.hourRing, delta, date.getHours()); - drawCircle(watch.minuteRing, delta, date.getMinutes()); - - - counter += 1; - setTimeout(shrinkCircles, 10, toggle); -} - - -// main draw function -function draw() { - // make date object - var date = new Date(); - var unLockedOffset = 0; - - // Reset the state of the graphics library - g.reset(); - - // Clear the area where we want to draw the time - g.setColor(watch.color); - g.fillRect(0, 0, watch.screen.width, watch.screen.height); - - // If unlocked, draw date ring and text and make hour and minute rings smaller - if(!Bangle.isLocked()){ - unLockedOffset = 24; - var days_month = getDays(date.getFullYear(), date.getMonth()+1); - // if the day has changed - if(watch.dateRing.range != days_month) watch.dateRing.range = days_month; - //drawTimeCircle(watch.dateRing.color, watch.dateRing.size - unLockedOffset, watch.dateRing.weight, getDays(date.getFullYear(), date.getMonth()+1), date.getDate() ); - drawCircle(watch.dateRing, -unLockedOffset, days_month); - drawMonthCircleText( month[date.getMonth()]+" "+date.getFullYear(), watch.dateRing.size - unLockedOffset, getDays(date.getFullYear(), date.getMonth()+1), date.getDate()) ; - } - - //drawTimeCircle(watch.hourRing.color, watch.hourRing.size - unLockedOffset, watch.hourRing.weight, 12, date.getHours() ); - //drawTimeCircle(watch.minuteRing.color, watch.minuteRing.size -unLockedOffset , watch.minuteRing.weight, 60, date.getMinutes() ); - drawCircle(watch.hourRing, -unLockedOffset, date.getHours()); - drawCircle(watch.minuteRing, -unLockedOffset, date.getMinutes()); - drawArc(1, watch.batteryRing.color, watch.batteryRing.size); - //drawCircle(watch.batteryRing, -unLockedOffset, E.getBattery()); - queueDraw(); -} - -// Trigger shrink / expand animation on unlock / lock events -Bangle.on('lock', on=>{ - if (on) { // locked, expand circles - counter = 1; - shrinkCircles(false); - } else - { // unlocked, shrink circles and show date ring - counter = 1; - shrinkCircles(true); - } -}); - - -// End function definitions / start of initial execution. - -// Clear the screen once, at startup -g.clear(); - -// draw immediately at first -draw(); - - -// console.log("Whatevs"); - -// Show launcher when middle button pressed -Bangle.setUI("clock"); \ No newline at end of file