From 3013e10e3eaf7fd62204767ef4daef181d10d6ce Mon Sep 17 00:00:00 2001 From: pinq- Date: Sat, 1 Apr 2023 07:54:40 +0300 Subject: [PATCH] Battery circle - Added battery circle in the center - Added "draw arc" function for battery circle --- apps/rings/app.js | 48 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/apps/rings/app.js b/apps/rings/app.js index 318ccb9ec..92e4761c6 100644 --- a/apps/rings/app.js +++ b/apps/rings/app.js @@ -13,6 +13,7 @@ const watch = { dateRing : { size:109, weight:20, color:"#00FF00", numbers: true, range: 30 , bubble:false}, 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" }, }; @@ -81,9 +82,7 @@ function drawCircle(ringValues, offset, value ) { // 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)]; @@ -118,6 +117,37 @@ function drawCircle(ringValues, offset, value ) { } + +// For battery disable +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); +} + + // Draws text for month and year in date circle function drawMonthCircleText( text, circleSize, range, value){ @@ -174,6 +204,7 @@ function shrinkCircles(toggle){ counter = 1; // We're finished, so queue next draw. queueDraw(); + if(!toggle) drawArc(E.getBattery() / 100, watch.batteryRing.color, watch.batteryRing.size); return; } @@ -188,17 +219,14 @@ function shrinkCircles(toggle){ // 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()) ; } - //drawTimeCircle(watch.hourRing.color, watch.hourRing.size + delta, watch.hourRing.weight, 12, date.getHours() ); drawCircle(watch.hourRing, delta, date.getHours()); drawCircle(watch.minuteRing, delta, date.getMinutes()); - //drawTimeCircle(watch.minuteRing.color, watch.minuteRing.size + delta, watch.minuteRing.weight, 60, date.getMinutes() ); counter += 1; setTimeout(shrinkCircles, 10, toggle); @@ -221,19 +249,15 @@ function draw() { // If unlocked, draw date ring and text and make hour and minute rings smaller if(!Bangle.isLocked()){ unLockedOffset = 24; - console.log("jee"); 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(E.getBattery() / 100, watch.batteryRing.color, watch.batteryRing.size); queueDraw(); }