Ratio 12 segment

Hi gentlemen.

I'm sorry to start this thread, but I need help with this feature:

I divided the Circle into 12 segments and every 5 seconds I fill in one segment, a total of 60 seconds = 1 minute. The problem is that my last segment is not filling up. Please advise where there may be a mistake?

I enclose an example of a function, including an error.

Thank you for your help

function drawCircle(dc) {
  	    var handWidth = dc.getWidth();
    	var position = System.getClockTime().sec /5; RATIO;
    	dc.setPenWidth(handWidth/18.3);
    	
    	for (var i = 0; i < 12; ++i) {
    
        if (i < position)
    	{
    		
    		dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK); 
    	   
    	}
    	else
    	{
			
			   	
    	    dc.setColor(Graphics.COLOR_LT_GRAY, Graphics.COLOR_BLACK);
    	}		 
	
 
    	   var start = 360 - ( 4 + (30*i)); 
    	   var end = start - 21.1;
    	   dc.drawArc(handWidth/6.2, handWidth/2.47, handWidth/10.5, 1, start+90, end+90); 
  	    }
    
          }

  • That's exactly how it suits me and that's what I needed. You are a really good person and I appreciate your help.

    thank you so much sir.

  • Sure no problem. Maybe this isn't very helpful, but like I said above, the hard part is often figuring out precisely what you want the code to do. If you can do that, writing the code is relatively easy (with experience).

  • This code should only be indicative and each segment means to me how many seconds have passed, so I already know that the last segment will be loaded. Sec / 59 and not 60. Now I know it's not possible to do it the way I asked.

    Thanks again

  • No worries. Not to state the obvious, and as others mentioned, another of explaining why it couldn't work the way you originally asked is because there's no conceptual difference between 60 seconds and 0 seconds, in this context. (Kinda like how 0:00 and 24:00 mean the same thing on a 24 hour clock.)

  • Now I know, and the next time I do things like that, I'll know how to proceed.

  • Just to observe, with integer maths, seconds/5 gives you 0 to 11 exactly with all segments filled for 55-60. 

    Eg: var limit = seconds/5;

    var pos = 0;

    while(pos <= limit) {

    // do stuff

    pos++;

    }

  • Just to observe, with integer maths, seconds/5 gives you 0 to 11 exactly with all segments filled for 55-60. 

    The problem, as noted above, is that there are *13* states, not 12:

    - No segments filled

    - 1 segment filled

    ...

    - 12 segments filled

    So if you have a consistent rule for filling segments, one of the states has to be excluded. In the examples I posted above, you'd either exclude "no segments filled", or "all segments filled".

  • Gah... and then I see the reams of other posts before mine saying the same! 

  • Congratulations, you solved it easily and OP seems to be satisfied.

    The only substantial change I made to your code (other than changing colors) is to divide by 5.0 instead of 5.

    I'm not sure what exactly is going on with the clause "if (i < position)" since i is an int and position is a float in your code. Floats are usually represented internally by x.9999. This means that the else clause will not be executed if, e.g. ((i=6) == (position=5.9999...)), or does monkeyc automatically cast that?

  • I'm not sure what exactly is going on with the clause "if (i < position)" since i is an int and position is a float in your code. Floats are usually represented internally by x.9999. This means that the else clause will not be executed if, e.g. ((i=6) == (position=5.9999...)), or does monkeyc automatically cast that?

    I'm not sure what you're getting at here, especially since (as you pointed out), the comparison uses "<" and not "==".

    As discussed, in my initial solution (which did not satisfy the OP completely) I did only change "/ 5" to "/ 5.0" (in addition to changing the colors in their sample code to match their screenshot), only to demonstrate the easiest way to see the final segment being filled in (but not necessarily the way OP wanted it).

    Here's the relevant snippet with some added comments:

    var position = System.getClockTime().sec / 5.0;
    
    for (var i = 0; i < 12; ++i) {
        if (i < position) {
            dc.setColor(Graphics.COLOR_BLUE, Graphics.COLOR_BLACK); // fill in ith segment
        } else {
            dc.setColor(Graphics.COLOR_LT_GRAY, Graphics.COLOR_BLACK); // don't fill in ith segment
        }
        //...

    If you trace the code with all possible values of sec/position, you'll see:

    Sec => Position => state
    
    0 => 0 => no segments filled
    1 => 0.2 =>  1st segment (with index 0) filled in
    2 => 0.4 => 1st segment filled in
    ...
    5 => 1 => 1st segment filled in
    6 => 1.2 => 1st and 2nd segment filled in
    ...
    11 => 2.2 => 1st...3rd segment filled in
    ...
    56 => 11.2 => 1st...12th segment filled in
    ...
    59 => 11.8 => 1st...12th segment filled in

    OP didn't like this solution because;

    - The first segment was filled in at sec == 1

    - The last segment was filled in at sec == 56

    Congratulations, you solved it easily and OP seems to be satisfied.

    Actually, the post you replied to (where I divided by 5.0 instead of 5) didn't satisfy the OP. I think it was the third code snippet here which was the accepted answer, which I wrote to satisfy these requirements:

    - "I divided the Circle into 12 segments and every 5 seconds I fill in one segment, a total of 60 seconds = 1 minute"

    - "Thanks for the help and wouldn't it be possible for the last segment to load .sec / 59 and the first .sec / 5?"

    As I've said a few times, there are 13 states (no segments filled, 1 segment filled, .. 12 segments filled), and there's no way to divide the 12 five-second chunks of time equally to satisfy all states, but the OP stated how they wanted it done.

    With this solution:
    - At sec = 0 no segments are filled in
    - At sec = 5, 1st segment filled in
    - At sec = 10, 1st...2nd segment filled in
    ...
    - At sec = 55, 1st...11th segment filled in
    ...
    - At sec = 59, all segments (1 to 12) are filled in

    So the special cases here are:
    - Segment 11 is only filled in for four seconds, before the next segment (12) becomes filled in
    - Segment 12 is only filled in for one second

    All other segments are filled in for five seconds, before the next segment is filled in.

    https://forums.garmin.com/developer/connect-iq/f/discussion/275642/ratio-12-segment/1321576#1321576

        function drawCircle(dc) {
            var handWidth = dc.getWidth();
            dc.setPenWidth(handWidth / 18.3);
    
            var sec = System.getClockTime().sec;
            if (sec == 59) {
                sec = 60;
            }
            for (var i = 0; i < 12; ++i) {
                if ((i + 1) * 5 <= sec) {
                    dc.setColor(Graphics.COLOR_BLUE, Graphics.COLOR_BLACK);
                } else {
                    dc.setColor(Graphics.COLOR_LT_GRAY, Graphics.COLOR_BLACK);
                }
    
                var start = 360 - (4 + (30 * i));
                var end = start - 21.1;
                dc.drawArc(handWidth / 6.2, handWidth / 2.47, handWidth / 10.5, 1, start + 90, end + 90);
            }
    
        }