-
• #2
The whole code doesn't fit in the post because of the pics. I'm going to attach the whole code to this post (I modified to .odt, so that there's no security issue with posting it). Still, the end of the code (after the pictures) is here:
g.setFont("Vector",20); //Subdivided zones for better readability of zones when calling the background images. //Changing HR zones will trigger the change of the background image and the HR to change zone. if (hr <= minhr) { console.log("HR too low"); } else if (hr <= hrr*0.6 + minhr) { g.drawImage(getzone1(),0,0,{scale:1.2});g.drawString("Z1", 32,78);g.drawString(minzone2, 62,20); } else if (hr <= hrr*0.64 + minhr) { g.drawImage(getzone2a(),0,0,{scale:1.2});g.drawString("Z2", 32,78);g.drawString(maxzone2, 62,20);g.drawString(minzone2, 62,136); } else if (hr <= hrr*0.67+minhr) { g.drawImage(getzone2b(),0,0,{scale:1.2});g.drawString("Z2", 32,78);g.drawString(maxzone2, 62,20);g.drawString(minzone2, 62,136); } else if (hr <= hrr * 0.7 + minhr) { g.drawImage(getzone2c(),0,0,{scale:1.2});g.drawString("Z2", 32,78);g.drawString(maxzone2, 62,20);g.drawString(minzone2, 62,136); } else if (hr <= hrr * 0.74 + minhr) { g.drawImage(getzone3a(),0,0,{scale:1.2});g.drawString("Z3", 32,78);g.drawString(maxzone3, 62,20);g.drawString(maxzone2, 62,136); } else if (hr <= hrr * 0.77 + minhr) { g.drawImage(getzone3b(),0,0,{scale:1.2});g.drawString("Z3", 32,78);g.drawString(maxzone3, 62,20);g.drawString(maxzone2, 62,136); } else if (hr <= hrr * 0.8 + minhr) { g.drawImage(getzone3c(),0,0,{scale:1.2});g.drawString("Z3", 32,78);g.drawString(maxzone3, 62,20);g.drawString(maxzone2, 62,136); } else if (hr <= hrr * 0.84 + minhr) { g.drawImage(getzone4a(),0,0,{scale:1.2});g.drawString("Z4", 32,78);g.drawString(maxzone4, 62,20);g.drawString(maxzone3, 62,136); } else if (hr <= hrr * 0.87 + minhr) { g.drawImage(getzone4b(),0,0,{scale:1.2});g.drawString("Z4", 32,78);g.drawString(maxzone4, 62,20);g.drawString(maxzone3, 62,136); } else if (hr <= hrr * 0.9 + minhr) { g.drawImage(getzone4c(),0,0,{scale:1.2});g.drawString("Z4", 32,78);g.drawString(maxzone4, 62,20);g.drawString(maxzone3, 62,136); } else if (hr <= hrr * 0.94 + minhr) { g.drawImage(getzone5a(),0,0,{scale:1.2});g.drawString("Z5", 32,78);g.drawString(maxzone5, 62,20);g.drawString(maxzone4, 62,136); } else if (hr <= hrr * 0.96 + minhr) { g.drawImage(getzone5b(),0,0,{scale:1.2});g.drawString("Z5", 32,78);g.drawString(maxzone5, 62,20);g.drawString(maxzone4, 62,136); } else if (hr <= hrr * 0.98 + minhr) { g.drawImage(getzone5c(),0,0,{scale:1.2});g.drawString("Z5", 32,78);g.drawString(maxzone5, 62,20);g.drawString(maxzone4, 62,136); } else if (hr >= maxhr - 2) { g.clear();g.drawImage(getzonealert(),0,0,{scale:1.2});g.setFont("Vector",38);g.drawString("ALERT", 20,53);g.drawString("HR limit", 18,84); }
1 Attachment
-
• #3
ok, I think we should concentrate on the swipe switch layout thing first to get your code on github as soon as possible. It is better readable there.
These are the first steps I recommend:
- Read http://www.espruino.com/Bangle.js+App+Loader on how to fork and locally checkout the Bangle Repository.
- Place your code in a file inside apps/run/ in a file named for example karvonnen.js and upload it to github.
Once this is done we can add http://www.espruino.com/Reference#l_Bangle_swipe to listen to swipes to switch layout.
- Read http://www.espruino.com/Bangle.js+App+Loader on how to fork and locally checkout the Bangle Repository.
-
• #4
That looks great! One thing I'd say is maybe rather than using images, you could just draw the individual zones as polygons. There's no function built in but it's easy enough to do. For instance:
const R = Bangle.appRect, CX = R.x+R.w/2, CY = R.y+R.h/2, CR = (R.h/2)-8; g.drawSlice = function(pa, pb, size) { pa = (pa+0.05)*Math.PI/8; pb = (pb-0.05)*Math.PI/8; let a = (pb-pa)/6.01; let poly = [CX,CY], ir = CR-size; for (let r = pa; r <= pb; r += a) { poly.unshift( CX + ir * Math.sin(r), CY - ir * Math.cos(r) ); poly.push( CX + CR * Math.sin(r), CY - CR * Math.cos(r) ); } return this.fillPoly(poly); } g.clear(); // top 2 big slices g.setColor(E.HSBtoRGB(0,1,1,16)).drawSlice(0,2, 10); g.setColor(E.HSBtoRGB(0.9,1,1,16)).drawSlice(14,16, 10); // other slices for (var i=2;i<14;i++) { g.setColor(E.HSBtoRGB(i/16,1,1,16)).drawSlice(i,i+1, 10+Math.pow(Math.random(),4)*20);
It'd likely be faster, would save a bunch of memory, and is a bit more flexible too as you can choose exactly how big and what color each slice is.
1 Attachment
-
• #5
This could also use
fillArc()
from graphics_utils lib for drawing the segments. -
• #6
Thanks a bunch guys ! Waow, that's incredible what you can do with code. Basically, I can decypher 20% of Gordon's code, the rest is like 3d hieroglyphs.
fillArc() seems closer to my abilities, but still, quite a huge gap to fill (starting with figuring out how sin, cos, radians work...)
It took me 4 days to write this code and do the graphics, which lead to running late on major projects (studies, moving interstate,...). I need 2 weeks to catch up, at least.
If you feel like finishing that thing, feel free to use the concept and the code I posted (if there's anything worth keeping).
If it's just me, I will just use the heavy weight code whenever I have time, as I can't do any better.
Still, thanks ! Now I see what code wizardry can do ! -
• #7
You can just use the library to draw an arc like this:
g.clear(); const GU = require("graphics_utils"); let centreX = 0.5 * g.getWidth(); let centreY = 0.5 * g.getWidth(); let startAngle = GU.degreesToRadians(20); let endAngle = GU.degreesToRadians(135); let minRadius = 0.3 * g.getWidth(); let maxRadius = 0.45 * g.getWidth(); GU.fillArc(g, centreX, centreY, minRadius, maxRadius, startAngle, endAngle);
Gordons code does very similar things by constructing a polygon that approximates the arc.
1 Attachment
-
• #8
I'd forgotten about
require("graphics_utils");
- that'd be much easier! :)
Yop, I just had a few javascript classes and decided to write the app I'm waiting for :) ! Unfortunately, I have lots to learn.
I would like to implement my code as an extra feature of the run.app. It would be called run+
The missing features for which I need help are:
Also, the refresh rate, for the HR (in the middle of the screen) has to be every second, but the refresh rate for the graphics could be every 4 seconds, to save memory.
Here's the thing:
1 Attachment