The circle app is awesome (make it more readable ?)

Thanks for your feedback.

 drawGauge(cx, cy, percent, color)

I did a doughnut guage in a couple of my Bangle 1 apps and found drawing these guauges is quite hard to get then looking really crisp. Your code looks similar to the solution I used where you rotate a smaller circle around an arc to get a clean edge.

I came to the conclusion that either the gauges needed to be drawn in the firmware or maybe pieced together from say a 5% segment image that was rotated round the circle. I dont really have the knowledge to do this in SVG or TheGimp so I never tried it. But might be something worth trying out.

Update - I have not tried you app for a while but see you have added weather so interested to see how the icons come out for those.

Thanks for the link at @myxor . I didn't see anything that looked wrong there. I attached what I attached a pic where we can see I have the day twice.

1 Attachment

@Fteacher i see that there is a "%A" in the datePattern object in the french locale JSON block:

datePattern: { 0: "%A %d %B %Y", "1": "%d/%m/%Y" }, // dimanche 1 mars 2020 //  01/03/2020

the "%A" will write "mardi" today as part of the date.
In my opinion this should be removed and i proposed a change for this via this merge request:
https://github.com/espruino/BangleApps/p­ull/1409

@Fteacher maybe you can confirm my proposed changes?

Yes, i most probably re-used your solution.
A better way would be indeed to use SVGs or supporting gauges via native firmware.
I will have a look at the SVG approach in the future.

I tried to check and confirm in Github, but I'm new to github. After a short while I understood that Gordon has been faster and the change has been checked and already merged !

Ah, I might be able to help @myxor with Inkscape if you tell me what you want. Attached, a gauge as .png and .svg

2 Attachments

• jauge app2.svg
• 

Regarding the gauge question, somewhere in a thread I posted code for drawing a ring. It used the Andres circle algorithm. I have some variations for drawing partial circles (for a gauge) on my computer. It worked wonderfully in the emulator but when I got my hands on the real thing it was too slow, so it is on my to do list to redo in C. I notice that there is already code in Espruino to draw a thick ring (filled annulus) but doesn't seem to be exposed in JavaScript, so that could be a starting point for a different approach, but in current form doesn't deal with the "partial" bit.

It would be awesome if you could help out implementing a gauge functionality in espruino C! :)

It looks almost perfect now. Just a glitch: it looks like "11 février 202" And I don't have the last number for the year, but that's something I can usually figure out :).

@myownself @HughB I can draw you nice looking gauges in inkscape in .svg format, but it seems that myownself can code it. Do I understand right that it would much better if coded ?

It depends. I think the end result will probably not be identical, and I have no idea what is more efficient.

I'll probably spend a bit of time drawing one next week and post it here, just in case it may come handy to one of you. Any preference about how it should look like ?

So I guess a few different diameters are needed. First the size of the circles in the circles clock. Then I imagine one large one as big as it can be drawn on the Bangle taking into account the top widget area.

So it took me much longer than I expected, but here it is, I made a gauge with a different design as .svg. Because it's drawings in inkscape and not code, I made it in a way that looks nice to me. It's not circular on purpose, I've troncated a disc with a spiral. I used the 5% increment that you suggested and filled with random colours just to show what it looks like. I've also cut the bottom of the gauge like in the circle.
@HughB Because it's all vectors, the size can be adjusted very easily without any quality loss.

2 Attachments

• gauge3.svg
• 

examples of the sort of ring guage I would like to be able to draw are below.
In order to do this I think a 6 degree segment is required that could be rotated round.
I will have to draw that on a bit of paper.

1 Attachment

Here it is. That was actually much quicker to draw than the previous drawing. I used 6 degrees segments. Feel free to use it, consider it's CC0.
I did it in Inkscape and "grouped" some elements to make it easier to manipulate. Use ctr+shift+d to ungroup, ctrl+d to group.
If it's drawing, I probably can contribute and I'm happy to, because I can't contribute with code.

2 Attachments

• gauge HughB est.svg
• 

Apologies I didn't explain the concept very well. In order to turn this into code that we can say drawSmallGuage(p) where p is the % completed we need to start with an image that has the following characteristics.

R - is the external radius of the gauge - for circles clock with 3 circles this is 25 pixels.
t - is the thickness of the guage - for cicle clock with 3 circles this is 5 pixels.
w - the the width of a square image in PNG format that will result of R, and t.
h - is the heigth of the square image in PNG format that will result from R and t.

Actually two colored images are needed one for the main guage colour and one for the background (not yet completed colour) though this can be done through code. The rest of the image needs to be transparent to colour so that it will be black if the background is black. Again once we have the basic image worked, the transparency and colour can be set in the Bangle image converter and via code.

To draw the gauge the a loop is used to work out to rotate the image by 6 desgrees and move it around the circle by the appropriate x,y values worked out through sin/cos etc. Once the % has reach the value of p the code switches to draw the remainder of the gauge in the gray colour.

I will look up the values that I think are needed for t and R for the circle clock.

1 Attachment

Maybe the segment angle should be 12 or 18 degree's. With 18 degrees - it represents 5% and that is probably enough for the small circle gauges.

1 Attachment

Thanks for all the explanations, now I understand what and why.
So you actually need only one segment in 2 colors. I saved it as a .png and increased the size, just to show you what it is.
In the .svg you'll find the bits and pieces you need at the good size in pixels. I don't know how you're going to use it after, you may want to cut and paste it in a new document in inkscape.

2 Attachments

• gauge HughB test.svg
• 

Thanks @Fteacher - any chance these could be exported to PNG files of size h * w ? I know nothing about SVG really :(

@HughB The .SVG is a version of the image made with vectors, the image can be very small or the size can be increased a hundred times, there's no quality loss.
From the SVG I made the segment as a .png. It should be the good size, but I must say it looks dirty-crappy. Maybe once on the small screen of the B2 it will be ok.

4 Attachments

Many thanks @Fteacher. I'm not sure how to download these as files, I cant see a filename to click on to save as from. Can the images be saved as seg12green.png, seg12grey.png etc. Or maybe they will need to be renamed as xxx.png.txt so that they get treated as TXT files when attached to this forum. Once downloaded I can rename them back to png.

@HughB the names of the segments were already very similar to what you suggested. I modified them adding .txt. They're attached to this message. If it doesn't work so, then I'll try to PM you.

4 Attachments

• grey segment 18deg.png.txt
• green segment 18deg.png.txt
• grey segment 12deg.png.txt
• green segment 12deg.png.txt

@HughB I updated to v0.10.
You've update the font so that it fits better ? It looks perfectly clean in French, nothing out of the screen.
I have an issue with the first circle, I set it up for distance and I can't get any colour on it, nor on the icon.

Is there a reason why the top one/two millimeters are not used?
(purely technical question)
Congratulations, this "watch face" is really pleasing to the eye.