Bitmap stutter and Glitch

Using Arduino Programming Questions
#1

Hi, I am working on a project to make a menu on a nokia5110 display using the LCD5110_Graph library.
In a previous code I used words (such as: Settings, Time) for the Main Menu, but this time I used bitmpas as Icons instead of words. It works but sometimes when I press the buttons the bitmap sometimes dosen’t change and the variable that the buttons add or subtract also doesn’t change. The bitmaps also seem to be partly correct because some parts of it don’t show up correctly. (Bitmaps converted as png are attached below)

here is a video that shown my result: https://drive.google.com/open?id=1LUm-7t4dqsl6c8HAKhq_3iH05OnLfAru

Here is the code:

#include <LCD5110_Graph.h>

LCD5110 myLcd(7, 6, 5, 3, 4);

const uint8_t SettingIcon[] PROGMEM = {
0xFF, 0x01, 0x01, 0x01, 0x01, 0x61, 0x91, 0x19, 0x11, 0x11, 0x11, 0x11, 0x87, 0x87, 0x87, 0x87,
0x19, 0x11, 0x11, 0x11, 0x19, 0x91, 0x61, 0x01, 0x01, 0x01, 0x01, 0xFF, 0xFF, 0x00, 0x1E, 0x1E,
0x12, 0x92, 0x40, 0x00, 0x00, 0x0C, 0x12, 0x21, 0x40, 0x40, 0x40, 0x40, 0x21, 0x12, 0x0C, 0x00,
0x00, 0x40, 0x92, 0x12, 0x1E, 0x1E, 0x00, 0xFF, 0x7F, 0x60, 0x60, 0x60, 0x60, 0x61, 0x62, 0x66,
0x62, 0x62, 0x62, 0x66, 0x78, 0x78, 0x78, 0x78, 0x66, 0x62, 0x62, 0x62, 0x66, 
};
const uint8_t TimeIcon[] PROGMEM= {
0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x60, 0x10, 0x08, 0x08, 0x04, 0x04, 0x04, 0xE6, 0x06, 0x04,
0x04, 0x04, 0x08, 0x08, 0x10, 0x60, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x04, 0x3F, 0xC0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1F, 0x10, 0x10, 0x10, 0x10, 0x00, 0x00,
0x00, 0xC0, 0x3F, 0x04, 0x00, 0x00, 0x00, 0x00, 0x40, 0x40, 0x40, 0x40, 0x40, 0x40, 0x40, 0x41,
0x42, 0x42, 0x44, 0x44, 0x44, 0x4C, 0x4C, 0x44, 0x44, 0x44, 0x42, 0x42, 0x41, 
};
extern uint8_t SmallFont[];

const int buttonL = 11;
const int buttonR = 10;
int stateL;
int stateR;
int lastStateL = 0;
int lastStateR = 0;
int navigatorVar = 1;

void setup() {
  myLcd.InitLCD();
  myLcd.setFont(SmallFont);
  myLcd.update();

  pinMode(buttonL, INPUT);
  pinMode(buttonR, INPUT);

}

void checkIfLeftButtonIsPressed(){
  if(lastStateL != stateL){
    if(stateL == HIGH){
      navigatorVar++;
    }
  }
}

void checkIfRightButtonIsPressed(){
  if(lastStateR != stateR){
    if(stateR == HIGH){
      navigatorVar--;
    }
  }
}

void loop() {
  stateL = digitalRead(buttonL);
  stateR = digitalRead(buttonR);

  checkIfLeftButtonIsPressed();
  checkIfRightButtonIsPressed();

 if(navigatorVar > 2){navigatorVar = 1;}
 if(navigatorVar < 1){navigatorVar = 2;}


 switch(navigatorVar){
  case 1:
    myLcd.clrScr();
    myLcd.drawBitmap(28, 10, SettingIcon, 28, 22);
    myLcd.update();
  break;

  case 2:
    myLcd.clrScr();
    myLcd.drawBitmap(28, 10, TimeIcon, 28, 22);
    myLcd.update();
  break;
 }

}

SettingIcon.png

TimeIcon.png

#2

ujwaljoshi:
sometimes when I press the buttons the bitmap sometimes dosen't change and the variable that the buttons add or subtract also doesn't change.

It is changing, but it is happening multiple times in quick succession for each key press. You need to de-bounce your key presses. Have a read of Nick Gammon's Switches page as an example.

ujwaljoshi:
The bitmaps also seem to be partly correct because some parts of it don't show up correctly. (Bitmaps converted as png are attached below)

I assume you are using the RinkyDink library.
How exactly did you convert the images? Using the online mono converter?
I seem to be getting different output than you got. It seems a little buggy to me as well, but I'm not sure.

Before converting the image I would first:

  • remove any transparency,
  • convert it to monochrome (not grayscale),
  • make the image height up to a multiple of 8 as specified by the drawBitmap() documentation.

Then convert and test the resulting images.

And BTW, you don't need to update the screen each time through loop(), just when navigatorVar changes.

#3

Thank you. Yes I used the Rinky library and to covert the bmp to code I used lcdassistant program: lcdassistant

If lcd only needs to be updated when navigatorVar changes should I put update in the If statements that add or subtract the value of the variable?

#4

ujwaljoshi:
Thank you. Yes I used the Rinky library and to covert the bmp to code I used lcdassistant program: lcdassistant

Ok then, try with the RinkyDink converter to see if there is any improvement.

ujwaljoshi:
If lcd only needs to be updated when navigatorVar changes should I put update in the If statements that add or subtract the value of the variable?

You may be able to do that. Or you could add another variable like previousNavigatorVar and only do the switch if different. I suppose there are any number of ways to structure it.

While we are talking of structure, you could also factor out clrScr() and update() from each case and just have them before and after the switch block respectively.

#5