Oled Gauge what do numbers represent

Been trying to get my head around what the numbers represent in the following description for using a 128x64 Oled as both a digital readout and an analog gauge of a pot value .

I can see how the main gauge is constructed but some of the numbers for the needle movement have me baffled.

Understand the mapping of the pot value for the scale to 0-100 (w) but the next line where they map the p value to a range of 0-90 (m) has me.

Also the code for the meter needle in the loop referring to 45 and 135.

There was a reference to this in a link but I could not see anything about this when I went there.

The position the pointer can occupy is somewhat strangely defined, but that is because it started from part of the previously mentioned clock sketch that calculates the position of the hands.

I copied the code off a page and I know it has errors in syntax etc. I will address this later on.

Any link to a decent tutorial on gauges would be appreciated also.

/*
  Analog gauge v1.02
  - Shows half circle gauge with scale labels
  - Shows digital value, 00 - 100 aligned
  - Shows gauge label
  21 / 12 / 2015 - Rudi Imbrechts
  http://arduinows.blogspot.com
*/


//#include " U8glib.h " U8GLIB_SH1106_128X64 u8g (13, 11, 10, 9, 12);
// SW SPI Com: SCK = 13, MOSI = 11, CS = 10, A0 = 9, Res = 12
// For OLED display with SH1106 driver. If you use another display,
// then please check the u8glib documentation and website at
// https://github.com/olikraus/u8glib


int xmax = 128; // max length x-axis
int ymax = 62; // max length y-axis
int xcenter = xmax / 2; // center of x-axis
int ycenter = ymax / 2 + 10; // center of y-axis
int arc = ymax / 2;
int angle = 0;
char * label [] = {"LOAD", "COOLANT", "INTAKE", "VOLT"}; // some custom gauge labels
int labelXpos [] = {53, 45, 49, 53}; // predefined x-position of a gauge label

#define potmeterPin A1 // simulate analog value with potentiometer
int p, w, m;
u8g_uint_t xx = 0;

// --- void gauge () -----
void gauge ( uint8_t angle) {
  // draw border of the gauge
  u8g.drawCircle (xcenter, ycenter, arc + 6, U8G_DRAW_UPPER_RIGHT);
  u8g.drawCircle (xcenter, ycenter, arc + 4, U8G_DRAW_UPPER_RIGHT);
  u8g.drawCircle (xcenter, ycenter, arc + 6, U8G_DRAW_UPPER_LEFT);
  u8g.drawCircle (xcenter, ycenter, arc + 4, U8G_DRAW_UPPER_LEFT);

  // draw the needle
  float x1 = sin (2 * angle * 2 * 3.14 / 360); // needle position
  float y1 = cos (2 * angle * 2 * 3.14 / 360);
  u8g.drawLine (xcenter, ycenter, xcenter + arc * x1, ycenter - arc * y1);
  u8g.drawDisc (xcenter, ycenter, 5, U8G_DRAW_UPPER_LEFT);
  u8g.drawDisc (xcenter, ycenter, 5, U8G_DRAW_UPPER_RIGHT);
  u8g.setFont (u8g_font_chikita);   // show scale labels
  u8g.drawStr (20, 42, "0");
  u8g.drawStr (25, 18, "25");
  u8g.drawStr (60, 14, "50");
  u8g.drawStr (95, 18, "75");
  u8g.drawStr (105, 42, "100");

  // show gauge label
  u8g.setPrintPos (labelXpos [1], 32);
  u8g.print (label [1]);   // show digital value and align its position
  u8g.setFont (u8g_font_profont22);
  u8g.setPrintPos (54.60);
  if (w < 10) {
    // leading 0 when value less than 10
    u8g.print ("0");
  }
}

if (w > 99) { // position at 100%
  u8g.setPrintPos (47.60);
}
u8g.print (w);
} // -------void setup () ---------
void setup (void) {
  pinMode (potentiometerPin, INPUT);
  u8g.setFont (u8g_font_chikita);
  u8g.setColorIndex (1); // Instructs the display to draw with a pixel on.

  // assign default color value
  if (u8g.getMode () == U8G_MODE_R3G3B2) {
    u8g.setColorIndex (255); // white
  }
  else if (u8g.getMode () == U8G_MODE_GRAY2BIT) {
    u8g.setColorIndex (3); // max intensity
  }

}
else if (u8g.getMode () == U8G_MODE_BW) {
  u8g.setColorIndex (1); // pixel on
}
else if (u8g.getMode () == U8G_MODE_HICOLOR) {
  u8g.setHiColorByRGB (255, 255, 255);
}
}

// ------ void loop () ------
void loop (void) {
  p = analogRead (potentiometerPin); // get value from potentiometer
  w = map (p, 0.1023, 0, 100); // map it between 0 and 100
  m = map (p, 0,1023,0,90); // map needle movement

  // show needle and dial
  xx = m; // 135 = zero position, 180 = just before middle, 0 = middle, 45 = max
  if (xx < 45) { // position correction
    xx = xx + 135;
  }
  else {
    xx = xx - 45;
  }
  // picture loop
  {
    u8g.firstPage ();
    do {
      gauge (xx);
    }
    while (u8g.nextPage ());
  }
}

There is no magic, just have a look at the maths and how things are drawn.

your screen looks like this
screen.png

The code

// draw border of the gauge
  u8g.drawCircle (xcenter, ycenter, arc + 6, U8G_DRAW_UPPER_RIGHT);
  u8g.drawCircle (xcenter, ycenter, arc + 4, U8G_DRAW_UPPER_RIGHT);
  u8g.drawCircle (xcenter, ycenter, arc + 6, U8G_DRAW_UPPER_LEFT);
  u8g.drawCircle (xcenter, ycenter, arc + 4, U8G_DRAW_UPPER_LEFT);

will draw the thick red border (two arcs are being drawn to get the thickness)

Then the developer decided to map the pot value between 0 and 90 for the potentiometer. To draw the needle you need to calculate what I flagged as 'angle' as this is where sinus and cosinus function will help you.

=> if you look at the formulas and comments in the code, you'll probably (I've not checked just assumed this is right since that seems to work) see how the developer gets there (note that the developer chose to have some sort of half angle as in the sinus and cosinus fonctions she/he doubles the angle value and as those functions requires radian and not degrees there is PI and 360° involved).

Note that this angle calculation probably could have been achieved more easily with a different mapping between 180 and 0 instead of 0..90 --> so weird choice I agree.

screen.png

So what does ......arc+6 .....and..... arc+4 .....refer to..?

Also are there are other ways to calculate the needle position?

(note that the developer chose to have some sort of half angle as in the sinus and cosinus fonctions she/he doubles the angle value and as those functions requires radian and not degrees there is PI and 360° involved).

bluejets:
So what does ......arc+6 .....and..... arc+4 .....refer to..?

I already answered that... this will draw the thick red border in my drawing representation with two arcs are being drawn to get the thickness. Arc+4 or +6 is the radius of the circle

=>read rage documentation for the u8g.drawCircle function

There are tons if way to calculate how to map the 0 to 1023 entry for the potentiometer… just pick a piece of paper and follow the math he does or do your own way