Reading, processing and displaying an integer with u8glib

Hi everyone, i'm slightly new to this, I've been trying to research this for a while now and have not found any solutions. I have a progress bar that slowly increases in width from 1 to 124 pixels, and I wish to show a percentage. This is done by a simple conversion of the width variable to turn that int into one of a percentage. I have been able to display the number that determines the width, using the print function, but am unable to manipulate that number in any way.

here is my code and thankyou in advance!

#include <U8glib.h>
U8GLIB_SSD1306_128X32 u8g(U8G_I2C_OPT_NONE);  

int width = 0;

void draw(void) {
  u8g.setFont(u8g_font_tpss);
  u8g.drawFrame(2,2,124,10);
  u8g.drawBox(2,2,width,10);
  float percent = (width/124)*100;
  char pct[5];
  dtostrf(percent,5,1,pct);
  u8g.setPrintPos(20,24);
  u8g.print(pct);
  
}

void setup() {
  // put your setup code here, to run once:

}

void loop() {
  // put your main code here, to run repeatedly:
  u8g.firstPage();  
  do {
    draw();
  } while( u8g.nextPage() );
  width++;
  if ( width >= 124 )
    width = 0;
  // rebuild the picture after some delay
  delay(100);
}
  float percent = (width/124)*100;

Dividing an int by an int gives an int. Multiplying an int by an int gives an int. Storing the int in a float does NOT make sense.

but am unable to manipulate that number in any way.

How do you want to "manipulate" the number? For one thing, it is local to draw(), so any "manipulation" would have to be done in draw().

Hi thanks for the reply. I am trying to take the width value which is a number between 1 and 124, and turn it into a percentage of the total progress of the bar, eg. if the width was 124 the number I want to print would say 100 (as in 100%). Where would I do the calculation so that in each loop the value of the pct integer also increases and is displayed?

Where would I do the calculation so that in each loop the value of the pct integer also increases and is displayed?

Is that a trick question? If you want to do the calculation in loop(), feel free to do that.

Hi,

I am new to Arduino and programming, I have used this code to set up a progress bar for my ammunition counter

I would like the progress bar to decrease from full to empty, at the moment it goes from empty to full.

I am also trying to attach this piece of code so that the progress bar decreases as the ammunition count decreases.

My apologies if my code is a bit untidy and I hope that I have explained my query well enough for someone to help.

Sorry also if I have not correctly added my code, I am new to the forum!

Thanks in advance!

Cheers

//
// Define the LED digit patterns, from 0 to 9
// Note that these patterns are for 2 digit common anode displays
// 0 = LED on, 1 = LED off:
 
//This is the OLED Library
#include "U8glib.h"
// run instance of library for my oled
U8GLIB_SSD1306_128X32 u8g(10, 9);             // HW SPI Com: CS = 10, A0 =9 (Hardware Pins are  SCK = 13 and MOSI = 11)
 
// These constants won't change:
const int analogPin = A2;    // pin that the sensor is attached to
const int ledPin = 8;       // pin that the LED is attached to
const int vibePin = 10;       // pin that the Vibrator Motor is attached to
const int threshold = 4;   // an arbitrary threshold level that's in the range of the analog input
int countSet = 18; // Set initial count
int displayCount = countSet;  // Store Intial count
int toggleArray[] = {6,12,18,25,35}; // Setup array of clip sizes
int magPin=12; //input switch to detect if a magazine is inserted
int checkifmaginserted=0;
int reloadcount;
int check;
int maginserted=0;          //whether a mag is inserted or not
int firstDigit, secondDigit;
int width = 128;
int bgColour = 1;
int percent;   //Part of the calculation for the percentage float percent = (width/0)*100;
int brightness=0;
int SW1=2;   //LED Dimmer Switch 1
int SW2=3;   //LED Dimmer Switch 2
int LED=11;  //LED Dimmer Pin
boolean toggleState, resetState, counterState;
 
// IR Beam Setup
const int analogInPin = A2;  // Analog input pin that the ir reciever is attached to
int sensorValue = 0;        // Value read from the ir beam
int outputValue = 0;        // Value output to the PWM (analog out)
boolean hasCleared = true;  // Check for cleared dart
 
// Toggle/Reset/Counter Pins
const int togglePin = 4;     // Use digital pin 4 for the reset pin
const int resetPin = 5;     // Use digital pin 5 for the reset pin
const int counterPin = 6;     // Use digital pin 6 for the counter pin
const int reloadPin = 3;    // Use digital pin 10 for th reload pin
 
//Define register pins
#define numOfRegisterPins 16
 
boolean registers[numOfRegisterPins];
 
void setup() {
  pinMode(togglePin, INPUT_PULLUP);
  pinMode(resetPin, INPUT_PULLUP);
  pinMode(counterPin, INPUT_PULLUP);
  pinMode(magPin, INPUT_PULLUP);
  pinMode(ledPin, OUTPUT); // *** this line sets the led pin to an output
  pinMode(vibePin, OUTPUT); // *** added this line for vibe pin
  pinMode(reloadPin, OUTPUT);
  pinMode(SW1, INPUT_PULLUP); // INPUT_PULLUP is equivalent to setting pinMode(SW1, INPUT); and digitalWrite(SW1, HIGH); and is easier to read/understand what is going on.
  pinMode(SW2, INPUT_PULLUP);
  pinMode(LED, OUTPUT); // added this line, otherwise LED pin is an INPUT
  Serial.begin(9600);
 
 
 
  // Show Initial Count
  //changeNumber(displayCount);
 
}
 
void loop(){
  // picture loop
u8g.firstPage();  
  do {
    draw();
  } while( u8g.nextPage() );
  width++;
  if ( width <128 );
    width <0;
  // rebuild the picture after some delay
  delay(100);
  float percent = (displayCount/countSet)*100; //Calculation of the percentage of rounds used

  //LED Dimmer
  //----------------------------------------------------//

  if (!digitalRead(SW1)&&digitalRead(SW2))
  {
    if(brightness<255)brightness++;
    analogWrite(LED,brightness);
    delay(10);
  }
  else if(digitalRead(SW1)&&!digitalRead(SW2))
  {
    if (brightness!=0)brightness--;
    analogWrite(LED,brightness);
    delay(10);
  }
  // Monitor IR Beam
  //----------------------------------------------------//
 
    sensorValue = analogRead(analogInPin); // Read the analog in value
    outputValue = map(sensorValue, 0, 1023, 0, 255);  // Map it to the range of the analog output
 
    // Check to see if dart has cleared
    if (outputValue >= 5) { // This value can be changed depending on IR beam setup
      hasCleared = true;
      digitalWrite(ledPin, LOW);
    }
 
    // If barrel is clear and beam is broken then countdown
    if (hasCleared == true && outputValue <= 3) {  // This value can be changed depending on dart speed
      --displayCount;
      //changeNumber(--displayCount);
      hasCleared = !hasCleared;
      //delay(2);
      digitalWrite(ledPin, HIGH);
    }
 
    // Print the results to the serial monitor for testing
    
    if (outputValue > 0) {
      Serial.print("\t output = ");
      Serial.println(outputValue);
    }
 
 
 
  // Monitor Counter Button
  //----------------------------------------------------//
 
    counterState = digitalRead(counterPin);
 
    // Check if the pushbutton is pressed.
    if (counterState == LOW) {
      --displayCount;
      //changeNumber(--displayCount);
      delay(250); // Debounce button
    }
 
 
  // Monitor Toggle Button
  //----------------------------------------------------//
 
    toggleState = digitalRead(togglePin);
 
    // Check if the togglebutton is pressed.
    if (toggleState == LOW) {
 
      if (countSet == toggleArray[4]) {
        countSet = toggleArray[0];
      }
 
      else if (countSet == toggleArray[3]) {
        countSet = toggleArray[4];
      }
 
      else if (countSet == toggleArray[2]) {
        countSet = toggleArray[3];
      }
 
      else if (countSet == toggleArray[1]) {
        countSet = toggleArray[2];
      }
 
      else if (countSet == toggleArray[0]) {
        countSet = toggleArray[1];
      }
 
      displayCount = countSet;
      //changeNumber(displayCount);
      delay(250); // Debounce button
    }
 
 
  // Monitor Reset Button
  //----------------------------------------------------//
 
    resetState = digitalRead(resetPin);
 
    // Check if resetbutton is pressed.
    if (resetState == LOW) {
      displayCount = countSet;
      //changeNumber(displayCount);
      delay(250); // Debounce button
    }
 
  maginserted = digitalRead(magPin);
  //checkmag();
  Vibe(); // lets try calling the function here.
}
 
void draw() { // this should be the only place you use u8g. stuff (i.e. drawing boxes or text)
  if (maginserted) {
       u8g.setFont(u8g_font_profont22);
        char buf[3];
        sprintf(buf, "%d", displayCount);
      u8g.drawStr( 56, 28, buf);
    
    // The part to draw the percentage of rounds used to the oled
      u8g.drawFrame(128,28,2,10);
      u8g.drawBox(128,28,width,10);

    char pct[5];
  dtostrf(percent,5,1,pct);
      u8g.print(pct);
      u8g.setFont(u8g_font_profont22);
      u8g.setColorIndex(0);
      u8g.drawLine(7,56,7,28);
      u8g.drawLine(14,56,14,28);
      u8g.drawLine(23,56,23,28);
      u8g.drawLine(31,56,31,28);
      u8g.drawLine(38,56,38,28);
      u8g.drawLine(46,56,46,28);
      u8g.drawLine(54,56,54,28);
      u8g.drawLine(62,56,62,28);
      u8g.drawLine(70,56,70,28);
      u8g.drawLine(78,56,78,28);
      u8g.drawLine(86,56,86,28);
      u8g.drawLine(94,56,94,28);
      u8g.drawLine(102,56,102,28);
      u8g.drawLine(110,56,110,28);
      u8g.drawLine(118,56,118,28);
      u8g.setColorIndex(1);
      u8g.drawStr( 56,28, buf);
      }
  else {
    // no magazine inserted, draw "INSERT" and display 00 ammo count
      u8g.setFont(u8g_font_profont22);
      u8g.setColorIndex(0);
      u8g.setColorIndex(1);
      u8g.drawStr( 56,28, "00");
      u8g.setFont(u8g_font_profont15);
      u8g.drawStr(10,10, "INSERT");
  }
  if ((displayCount==0) && (maginserted==1)){ //if a mag is inserted, but the count has reached 0, flash RELOAD
     if (reloadcount<2){ //write RELOAD
      int bgColor = 1;
        u8g.setColorIndex(1);
        u8g.setColorIndex(1);
        u8g.setFont(u8g_font_profont15);
        u8g.drawStr(75,10, "RELOAD");
     }
     else { //write inverted reload
        u8g.setColorIndex(1);
        u8g.setColorIndex(0);
        u8g.drawStr(75,10, "RELOAD");
      }
  }
}

Sorry also if I have not correctly added my code, I am new to the forum!

You want to use code tags, NOT quote tags.

You calculate a percent value, and use that value to draw on the screen. If the current value is percent used, and you want percent remaining, or the current value is percent remaining, and you want percent used, the two values total 100 percent, so getting the other one from the one you have is:

   percent = 100 - percent;

PaulS:
You want to use code tags, NOT quote tags.

You calculate a percent value, and use that value to draw on the screen. If the current value is percent used, and you want percent remaining, or the current value is percent remaining, and you want percent used, the two values total 100 percent, so getting the other one from the one you have is:

   percent = 100 - percent;

Thanks for your input, I have changed the tags and I hope that my code displays properly in the forum.

Regarding the code you supplied, I am sorry if I seem really stupid, but where in my code should I change/add this code.

Thanks for your help.

where in my code should I change/add this code.

Right after you calculate percent.

  // rebuild the picture after some delay
  delay(100);
  float percent = (displayCount/countSet)*100; //Calculation of the percentage of rounds used

  //LED Dimmer
  //----------------------------------------------------//

But, really, is percent supposed to be a float? Can you tell the difference between 76.23344354% and 76% when the screen displays the data?

If you can, you really need to think about whether integer arithmetic is the right thing to do to get a value to store in a float.

Thanks for your help,

I think I get what you mean, maybe I should look at another way of displaying the ammunition counter bar.

Thanks

Big Thanks to PaulS for your help, I have solved my problem.

Also sorry to Dyna67 for high jacking your thread.

Cheers,
Euan