Posted at 2022-01-06 by myxor

Thank you @FTeacher. I am glad that someone likes my watchface :)

I am already working on a new version of the watchface with the following changes:

1. Make configurable what to show in each circle
2. add step distance circle
3. allow switching visibility of widgets

You can test it here:
https://myxor.github.io/BangleApps/#circle
It is not yet finished but working fine and one friend of mine is already using that new version (besides me).

I will have a look at increasing the font size of the text inside the circles to make it more readable! :)

If you have any more feedback feel free to write it here - i will follow this thread.

Posted at 2022-01-06 by Fteacher

I'll check it tomorrow ! Thanks a bunch. I'll give you my feedbacks, for sure.
Also, I tried to use the Recorder app while running. Your watch was on the forescreen and I used an external bluetooth device for a more precise HRM. It drained the battery from 80% to flat. I made a post about a running app btw :)...

Posted at 2022-01-06 by myxor

I just updated my dev version of the clock with your suggestions and increased the circle sizes as as the font inside.

You can have a look at my attached screenshots.

Any feedback is appreciated.

Attachments:

• screenshot-light.png
  
• screenshot-dark.png

Posted at 2022-01-06 by Fteacher

I've uploaded it, nice job ! Actually, as I had modified your app and loaded into the watch, I just deleted all the apps (factory reset) and reinstalled circle app with a fresh start. And the heart rate is not showing up. I have it in the widgets, but the hr circle is empty, just the - symbol in the circle. I remember I used to have this issue previously, but I can't remember how I solved it... Any clue ?

Posted at 2022-01-07 by myxor

That's strange. Can you try to reload the watch (press the button for 2-3 seconds) and see if it changes?
What does the text inside the circle say?

Posted at 2022-01-07 by Poolitzer

You need to enable heart rate tracking in the settings, maybe thats it?

Posted at 2022-01-07 by myxor

By default the following circles are active / shown:
Left: Steps
Middle: Heart rate
Right: Battery

So heart rate should be there (red with the heart symbol at the bottom of the circle) and when the watch is unlocked the heart rate sensor should be activated and after some seconds the values should be shown.

Posted at 2022-01-07 by Fteacher

The only sign shown in the middle circle is - .
On or off the wrist, whereas the heart widget is on. The lcd timer is on 20 seconds.
Solved: I've uploaded the v0.03 and it works fine again. The v0.04 has a bug.

Attachments:

• screenshot.jpg

Posted at 2022-01-07 by Fteacher

The v0.04 has much better readability. Also, it allowed to tweak the minimum HR. The v0.03 often shows me less than 50 whereas I know for sure that my lowest is 57. Maybe it could be adjusted 5 by 5 (50-55-60-65)
But HR doesn't show up on my watch on v0.04. Works fine v0.03

Posted at 2022-01-07 by Poolitzer

welp now I have to try that

Posted at 2022-01-07 by Poolitzer

I downloaded V0.14 from myxor github.io without doing factory reset on latest release firmware v2.11, the heart rate is displayed just fine for me.

Posted at 2022-01-07 by myxor

Thanks for trying out and giving feedback @Poolitzer.

@FTeacher i made some changes a few minutes ago which one may help to solve your problem. I would suggest you to redownload v0.04 from my github page again and see if that fixes your issue. Thanks.

Posted at 2022-01-07 by Fteacher

Back on it ! So I download the new v0.04 and it works. But as soon as I change the HR min or max, the HR doesn't show up anymore. Also, the HR circle moves back to center after changing min or max HR. I hope it gives you clues. I prefered the HR in the center btw :).

Posted at 2022-01-07 by myxor

Thanks for testing.
I will look into the issues you are experiencing but so far i can not reproduce neither the disappearing of the HR nor the moving of the circles.

Posted at 2022-01-07 by Fteacher

I had the issue on giving the values "HR min 55" and also on HR max 195 and 190.
If noone's experiencing the same issue, don't bother too much. The app looks good, I can read clearly all the circles, that's really good enough !

Posted at 2022-01-08 by Fteacher

The v0.04 now works on my watch, even when I change min and max HR. I tried to change other settings (moving circles, having weather and distance) and everything kept on working fine. It's all perfectly readable, but because HR circle doesn't contain any "k" or "%" it has a bit of extra spare space (even with 3 digits) that could be used for 1 or 2 extra points of font size.
I suppose you've updated some code. I also think you should publish the new version, it's stable and these settings tweaks are a nice addition.

Posted at 2022-01-10 by myxor

Thanks for all your feedback. Changes are now merged into master.

Feel free to add further feedback here in the future.

Posted at 2022-02-03 by Fteacher

Hi Myxor,
In the latest version, the icons have lost their colors, was it intended ?
Also, the settings section allows for limiting max and min HR, but it doesn't limit it on my watch. I still go below 50 and over 190.

Posted at 2022-02-03 by myxor

Hi @FTeacher,
the icon colorization can be toggled via settings in the newest Version. You can enable it there. I am Sorry that the default "off" does not fit to your expectation.

The limit for the heart rate does not limit the actual values (as they come directly from the firmware) but they limit the boundaries of the circle.
So it you set minimal HR to 40 and have a heart rate value of 40 the circle will show 0 % fill rate.

Does this help you?

Posted at 2022-02-04 by Fteacher

Hi @myxor thanks for the explanation.
I'm using the dark theme, which looks a bit sad without colors. That's personnal and I think it's nice to be able to change that in the settings. Thanks again for the app.

Posted at 2022-02-04 by myxor

@FTeacher You are welcome. If you have any ideas or wishes feel free to post them here and i will see what i can do.

Posted at 2022-02-06 by HughB

@myxor - have you thought about maybe aligning the time, date, day centrally so that they all line up. It looks a bit odd right aligned. Also might be improved by choosing a custom font like Roboto or Lato as the Vector font, whilst functional and scalable, is not the most attractive.

Posted at 2022-02-07 by Fteacher

Where can I modify the translations ? In French, below the time clock I have the day of the week, date and month (too much infos, it doesn't fit well), the line below I have the day of the week again.

Posted at 2022-02-07 by myxor

@hughb i will have a look at those fonts and the alignment of the time and date. Thanks for your feedback.

@FTeacher probably the french date format in this file https://github.com/espruino/BangleApps/blob/master/apps/locale/locales.js#L261 is not correct. Maybe you can have a look there.

Posted at 2022-02-07 by HughB

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.

Posted at 2022-02-08 by Fteacher

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.

Attachments:

• screenshot circleapp.jpg

Posted at 2022-02-08 by myxor

@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:
espruino/BangleApps#1409

@FTeacher maybe you can confirm my proposed changes?

Posted at 2022-02-08 by myxor

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.

Posted at 2022-02-08 by Fteacher

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 !

Posted at 2022-02-08 by Fteacher

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

Attachments:

• jauge app2.svg
  
• circle gauge.png

Posted at 2022-02-08 by myownself

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.

Posted at 2022-02-08 by myxor

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

Posted at 2022-02-11 by Fteacher

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 :).

Posted at 2022-02-11 by Fteacher

@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 ?

Posted at 2022-02-11 by myownself

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

Posted at 2022-02-11 by Fteacher

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 ?

Posted at 2022-02-11 by HughB

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.

Posted at 2022-02-12 by Fteacher

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.

Attachments:

• circle gauge3.png
• gauge3.svg

Posted at 2022-02-12 by HughB

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.

Attachments:

• Screenshot 2022-02-12 18.25.27.png

Posted at 2022-02-13 by Fteacher

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.

Attachments:

• gauge HughB est.svg
  
• circle gauge HughB.png

Posted at 2022-02-13 by HughB

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.

Attachments:

• IMG_20220213_110122.jpg

Posted at 2022-02-13 by HughB

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.

Attachments:

• IMG_20220213_113054.jpg

Posted at 2022-02-14 by Fteacher

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.

Attachments:

• gauge HughB test.svg
  
• segments of circle gauge.png

Posted at 2022-02-14 by HughB

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

Posted at 2022-02-15 by Fteacher

@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.

Attachments:

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

Posted at 2022-02-16 by HughB

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.

Posted at 2022-02-16 by Fteacher

@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.

Attachments:

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

Posted at 2022-02-17 by Fteacher

@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.

Posted at 2022-02-17 by uname

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.

Posted at 2022-02-17 by myxor

This has no technical only estetic reason.
I gonna see if i can use that space as well soon :)

Thanks

Posted at 2022-02-17 by HughB

Not been very successful with the segment image approach.
Below is first drawing the image through rotating the segment.
The imgae is 2 bpp, cant get 1 bpp to work at the moment.

Not very happy with the results so far - might have to revert to editing the segment pixel by pixel to get it right.

Test code below:

const h = g.getHeight();
const w = g.getWidth();

function draw() {
  var date = new Date();
  var timeStr = require("locale").time(date,1);
  
  g.reset();
  g.setColor(g.theme.bg);
  g.fillRect(Bangle.appRect);

  g.setFont('Vector', w/3);
  g.setFontAlign(0, -1);
  g.setColor(g.theme.fg);
  g.drawString(timeStr, w/2, 30);

  drawGauge(40, 130, 0.9);
}

var gaugeImg = {
  width : 8, height : 7, bpp : 2,
  transparent : 1,
  buffer : E.toArrayBuffer(atob("qqWqqqqqqqmqqaqpVqk="))
};

/*
var gaugeImg = {
  width : 8, height : 7, bpp : 1,
  transparent : 0,
  buffer : E.toArrayBuffer(atob("AwAAAQEB4Q=="))
};
*/

function radians(a) {
  return a*Math.PI/180;
}

// p will be the number of segments for now
function drawGauge(cx,cy,p) {
  var i = 0;
  var r = 25;
  var x;
  var y;
     
  var startrot = 0 - 180;
  var midrot = -180 - (360 * p);
  var endrot = -360  - 180;

  g.setColor('#0ff'); // cyan
  
  // draw guauge
  for (i = startrot; i > midrot; i -= 6) {
    x = cx + r * Math.sin(radians(i));
    y = cy + r * Math.cos(radians(i));
    g.drawImage(gaugeImg, x, y, {rotate: i});
  }

  g.setColor('#888'); // grey

  // draw remainder of guage in grey
  for (i = midrot; i > endrot; i -= 6) {
    x = cx + r * Math.sin(radians(i));
    y = cy + r * Math.cos(radians(i));
    g.drawImage(gaugeImg, x, y, {rotate: i});
  }
}

g.clear();
Bangle.setUI("clock");
Bangle.loadWidgets();
Bangle.drawWidgets();
setInterval(draw, 60000);
draw();

Attachments:

• download (1).png

Posted at 2022-02-18 by Fteacher

Hi @myxor I don't know what's bpp is and if I can do anything to improve these .png.
I'm happy to contribute, but if the graphical approach is not the best, then let's give up.

Posted at 2022-02-18 by myxor

I guess you linked me unintentionally and wanted to link @hughb, right?

But i can help here: bpp is the color depth (bits per pixel):
https://en.m.wikipedia.org/wiki/Color_depth

Posted at 2022-02-18 by HughB

It may still be the right approach but there could be an issue with exporting from SVG to PNG for small sized images. Some of the pixels were dithered. Thanks for your help. I'll do some more experiments and come back to you if I need anything. Really apprecaite the time you have spent on this, its not something I could have done.

Posted at 2022-02-19 by @MaBecker

What about adding drawGauge() and fillGauge() to the graphics lib?

Posted at 2022-02-20 by Fteacher

@myxor Yep, sorry for that, and thanks for your answer.
It actually helped me to find out that I can change the exporting settings of the .png in inkscape (see picture below for details, or this page for more details). Unfortunately, I don't get what I should change to make it more usable for @hughb . Yes, you said I can have a break, but I like to investigate and I'm a bit stubborn sometimes.

Attachments:

• pixel depth01.png

Posted at 2022-02-20 by HughB

What about adding drawGauge() and fillGauge() to the graphics lib?

Once they produce really crisp results I would agree. But I dont think we have yet found the best way to do this.

@FTeacher - I tried some experiements with gimp last night and have come to the conclusion that I will use a series of fixed images at different percentages to do a really crisp gauge. Trying to draw crisp images on this hardware is subject to lots of limitations. If the screen resolution was more like 360x360 it would be less of a problem. Most of the latest smartwatches are using much higher resolution.

I dont need any help at the moment. Will share some results (which are looking really good) soon.

Posted at 2022-02-20 by HughB

OK here's the results of my experiements.
I have produced a prototype clock that I am going to call thering.
I manually built 14 images in gimp.
I then work out which one is the nearest fit and display the step count in a big ring.
I'm really pleased with the results. It looks really crisp and there are very few wrinkles and ripples in the ring. The screenshot does not do it justice. The greying out of the unused part of the ring is acheived by using a dithered color. So if the colour is green #0f0 then the greyed out part is done in '#20'.

Below are some examples of the stages of the ring and my prototype proof of concept clock. I will redo this clock with better fonts and add some of the features I have put in the pastel clock. I think the result will be very pleasing (at least to me anyway).

Attachments:

• download (2).png
  
• IMG_20220220_220647.jpg
  
• 7p.png
  
• 40p.png
  
• 90p.png

Posted at 2022-02-21 by Fteacher

Very excited about that ! If it's something people can reuse easily in different apps, that's awesome.

Posted at 2022-02-23 by HughB

I have just done a PR for 'The Ring' which is a proof of concept,
it has a massive memory footprint of 70% ram - which I should fix soon.
https://hughbarney.github.io/BangleApps/?id=thering

And a new clock called 'Daisy' which is derived from 'The Ring', 'Pastel' and 'Lazybones'.
https://hughbarney.github.io/BangleApps/?id=daisy
I fixed the memory issue on this one and its back to 13% Ram usage.

Posted at 2022-02-23 by Fteacher

Well done @hughb ! I like the ring .
Do you think this could be used for a run app to show remaining distance, or HR zones ?
Also, for this purpose, do you think a variation of the ring that looks like the attachement is doable ? I think this kind of design may also please people's eyes.

Attachments:

• gauge sections.png

Posted at 2022-02-23 by HughB

do you think a variation of the ring that looks like the attachement is doable

I think we would have to try it out.
Simplest way to test this in one go would be to make a 178x178 pixel PNG image.
Have a look at the Ring README file to see how I built it up.
Then I suggest making one image of 178x178 pixles with the % at 65%
You will have 4 colours to potentiall deal with.
The background - do black first
The primary ring color
The greyed out part of the ring
And now the gaps - the gaps could background or the greyed color.
The colours need to be 3 bit colours only.
The greyed colour can be dithered - but any other dithering on the main ring will look raggy

Once you have such an image I will run it through the image converter and we can have a look at how it looks in practice. I could write some simple instructions / code for you to try out different images.

There is also the image clock that allows you to upload and image.

Posted at 2022-02-24 by Fteacher

I have no experience with that, so this is my first shot! I did it with inkscape, it's easier for me to modify it once the drawing is ready. I used 13° with 2° black between each section and therefore I have 24 sections.

Attachments:

• screenshot02.png
  
• screenshot portion gauge.png
• portion gauge19rgb8.png.txt

Posted at 2022-02-24 by HughB

Thanks @FTeacher - the images need to be 178x178 pixels - this is to match the size of the Bangle JS 2 screen. The images above are 371x371. This means the images will need to be scaled by some other software tool. Once you start scaling an image you loose image quality and it may not look right, gain artifacts etc.

Is it possible to redo in 178x178 pixels. There is no need to use the imageconverter at this point in time. Once you have a PNG file it can be uploaded using the IDE and viewed on the watch by installing the simple image viewer app.
https://banglejs.com/apps/?id=showimg

To upload an image through the IDE

1. go to the IDE at https://www.espruino.com/ide/
2. Click the top right to connect to your watch through BLE
3. Once a connection is shown the IDE top right will go GREEN.
4. click in the drum symbol in the middle of the screen.
5. select upload and browse to your image and rename the file to showimg.user.img.
6. now start the simple image viewer app and you can see what your image will look like on a B2..
7. You can take a screenshot through the IDE by typing g.dump(); in the left hand window.
8. Then click on the image and it will download the screenshot and you can share it here.

Posted at 2022-02-25 by @gfwilliams

Just FYI the screen is 176 x 176 (not 178) so that should really be the target for image sizes

Posted at 2022-02-25 by Fteacher

That explains why my circle is close to the edge !
Thanks @hughb for your very detailed tuto. I would have found out, but you saved me time.
I made the drawing at the good size in Inkscape, but didn't notice that in one of the menu another option was resizing it.
Below the first version, and another thicker version with a 1 pixel margin on each side. I think the 2nd one is better. On the watch it looks really different. I'm adding the file as fake .txt

Attachments:

• screenshot portion gauge19.png
  
• screenshot gauge24*12mm.png
• portion gauge24x12mm.png.txt