• @bppattanEspruino, urvw. Reading (almost any) code is the best way to learn! Since BangleJS and JS by nature run on little resources, makse finding a solution even more interesting. Btw, run it on a BangleJS and it behaves pretty decent.

    To use the CGauge prototype/'class' in your code, just copy the lines from function CGauge(... (~L#60) thru p.rad=function(degrs) { ... (~L#113) into your level 0 - global space - code.

    In your level 0 - global space - you add a variable like:

    var stepGauge;
    

    In your initialization code you add something like that:

    stepGauge = new CGauge(
            0, // initial value, will overwrite this later
            0, // minimum value, value below show as minimum
        10000, // maximum value, value above shows as maximum
      [0,1,0], // green color for value in RGB normalized format
      [1,0,0], // red color for filler to max in RGB
          180, // clockwise degree direction for minimum line
          180, // clockwise degree from minimum for mximum line
         null, // 0-tick/zero-tick to mark 0 (not used yet)
          119, // x coord of center of gauge (from left edge)
          220, // y coord of center of gauge (from top edge)
          100, // outer radius of gauge
           94  // inner radius of gauge (0 for just outer line)
      );
    

    Among the code where you (periodically) update the display - render the values to the graphics display g, you add .setVal(... with the argument value you get from the step counter.

    stepGauge.setVal(stepCount); // or: stepGauge.setVal(stepCount,1); 
    

    .setVal(... has an optional second parameter to control whether the gauge display should update. If you pass nothing - you omit the argument - the display is updated when an value is set different what was set before. You can force the display update by passing 1 and suppressing it by passing -1.

    Now - obviously having messed with your assignment - you do not get off for free... :O - LOL...: try to add something to it, for example - in addition to the drawing the outline of the polygon for the value and filler segment, fill the segment value. As you are aware of that only 64 points can be passed to .fillPoly(), you have to chop up / compose junks of the vertices you get back from ._pvs(). Hint: for the first junk, you join the first and last slice of (max) 31 points in the vertices array. For the second junk you join the second and second-to-last slice... etc. There is nothing wrong to take code - and you work on the understanding - and make it better for an assignment (except you were explicitly told not to do so).

About

Avatar for allObjects @allObjects started