Help; change animation with button push

Vintagecloak · July 24, 2019, 4:29pm

Before I get grilled, this is just something I am playing with. Nothing is specific, and yes, I know the code needs to be cleaned up and spacing fixed. But is working fine. Right now, it helps me keep track of what I am doing.
I am still learning and I am doing this as I experiment.

I am using an Arduino Nano with a 1.8 TFT LCD display with SD (though not hooked up at the moment)

My question is, can I, and, how do I change part of the graphic to a new graphic when I pressing a button? I know how to implement the button code, and I know how to create the graphic. I also know how to basically overly a new graphic on top of another.
What I don't quite understand completely is, how to implement the code to use a button to start that new graphic.
What I would like to be able to do, is push the button, or maybe even two different ones, to switch to a new graphic/animation. One of which could clear the entire screen perhaps, while to other just does a localized section on the screen.

Most of the graphics were put before the loop so that they would not be overwritten by the animated pulse circles.

Originally I had the gradient bars cycle through colors but it was slowing everything down and kept flashing the screen, so they are now static so to speak.

Hope what I am asking makes sense.

If anyone be so kind as to perhaps help, I would appreciate it.

#include "Ucglib.h"  

    
// Create display and define the pins:
Ucglib_ST7735_18x128x160_HWSPI ucg(8, 10, 9);  // (A0=8, CS=10, RESET=9)


int Variable1;  // Create a variable to have something dynamic to show on the display
uint8_t z = 80;  // start value
uint32_t lcg_rnd(void) {
  z = (uint8_t)((uint16_t)65*(uint16_t)z + (uint16_t)17);
  return (uint32_t)z;
}


void setup(void)  // Start of setup
{

  // Display setup:
  
  ucg.begin(UCG_FONT_MODE_SOLID);  // It writes a background for the text. This is the recommended option
  
  ucg.clearScreen();  // Clear the screen

  // Set display orientation:
  ucg.setRotate90();  // Put 90, 180 or 270, or comment to leave default



  ucg.setFont(ucg_font_helvB08_tr);
  //*************************************



  // Draw filled rounded rectangle: top left corner
  ucg.setColor(255, 128, 64);  // Set color (0,R,G,B)
  ucg.drawRBox(0, 0, 50, 40, 12);  // Start from top-left pixel (x,y,wigth,height,radius)


   // Draw filled rounded rectangle: black fill
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawRBox(20, 8, 120, 40, 8);  // Start from top-left pixel (x,y,wigth,height,radius)

    // Write to the display the text "Scan":
     ucg.setFont(ucg_font_helvB08_tr);  // Set font
  ucg.setColor(0, 255, 255, 255);  // Set color (0,R,G,B)
  ucg.setColor(1, 0, 0, 0);  // Set color of text background (1,R,G,B)
  ucg.setPrintPos(125,20);  // Set position (x,y)
  ucg.print("SCAN");  // Print text or value

  // Draw filled rectangle: blip in front of text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(30, 25, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

 // Write to the display the text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 255, 128, 0);  // Set color (0,R,G,B)
  ucg.setPrintPos(39,30);  // Set position (x,y)
  ucg.print("SPECTRUM");  // Print text or value

   // Draw filled rectangle: 2nd blip in front of 2nd text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(90, 25, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

 // Write to the display the 2nd text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 128, 128, 255);  // Set color (0,R,G,B)
  ucg.setPrintPos(99,30);  // Set position (x,y)
  ucg.print("SEARCH");  // Print text or value

  // Draw filled rectangle: blip in front of text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(30, 35, 5, 5);  // Start from top-left pixel (x,y,wigth,height)
  
 // Write to the display the text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 255, 128, 255);  // Set color (0,R,G,B)
  ucg.setPrintPos(39,40);  // Set position (x,y)
  ucg.print("ANALYZE");  // Print text or value
  


  // Draw filled rectangle: fill gap next to top
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(38, 0, 5, 15);  // Start from top-left pixel (x,y,wigth,height)

      // Draw filled rectangle: orange bar top
  ucg.setColor(255, 160, 0);  // Set color (0,R,G,B)
  ucg.drawBox(42, 0, 120, 8);  // Start from top-left pixel (x,y,wigth,height)

    // Draw filled rectangle: left gap below top
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 30, 25, 10);  // Start from top-left pixel (x,y,wigth,height)

      // Draw filled rectangle:left grayish rectangle below gap
  ucg.setColor(200, 128, 96);  // Set color (0,R,G,B)
  ucg.drawBox(0, 33, 20, 20);  // Start from top-left pixel (x,y,wigth,height)

        // Draw filled rectangle:left below grayish rectangle gap
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 50, 20, 10);  // Start from top-left pixel (x,y,wigth,height)


      // Draw filled rectangle:left orange rectangle middle
  ucg.setColor(255, 150, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 53, 20, 60);  // Start from top-left pixel (x,y,wigth,height)


        // Draw filled rectangle:left bottom orange rectangle
  ucg.setColor(255, 160, 0);  // Set color (0,R,G,B)
  ucg.drawBox(-1, 115, 21, 40);  // Start from top-left pixel (x,y,wigth,height)

  // Draw rectangle:
  ucg.setColor(122, 122, 122);  // Set color (0,R,G,B)
  ucg.drawFrame(30, 60, 120, 65);  // Start from top-left pixel (x,y,wigth,height)



  // Draw rounded rectangle:
  //ucg.setColor(0, 255, 255);  // Set color (0,R,G,B)
  //ucg.drawRFrame(30, 60, 115, 65, 8);  // Start from top-left pixel (x,y,wigth,height,radius)

    //Big color gradient radar box
  ucg.setColor(0, 0, 20, 80);
  ucg.setColor(1, 85, 95, 115);
  ucg.setColor(2, 60, 0, 40);
  ucg.setColor(3, 98, 98, 98);
  
  ucg.drawGradientBox(31, 61, 118, 62);



  // Draw circle:
  //ucg.setColor(255, 255, 0);  // Set color (0,R,G,B)
  //ucg.drawCircle(110, 74, 6, UCG_DRAW_ALL);  // (x,y,radius,option)



  // Draw filled triangle:
ucg.setColor(122, 122, 122);  // Set color (0,R,G,B)
ucg.drawTriangle(50,87,   100,70,   95,100);  // (x0,y0,x1,y1,x2,y2)
  
// Draw filled circle:
  ucg.setColor(0, 255, 0, 0);  // Set color (0,R,G,B)
  ucg.drawDisc(42, 86, 2, UCG_DRAW_ALL);  // (x,y,radius,option) 

  ucg.setColor(0, 255, 0, 0);  // Set color (0,R,G,B)
  ucg.drawDisc(47, 94, 2, UCG_DRAW_ALL);  // (x,y,radius,option) 

  ucg.setColor(0, 230, 130, 100);  // Set color (0,R,G,B
  ucg.drawLine(31, 80, 148, 80); //horizontal line
  ucg.drawLine(31, 105, 148, 105);//horizontal line

  ucg.drawVLine(60, 61, 64); //vertical line
  ucg.drawVLine(90, 61, 64); //vertical line
  ucg.drawVLine(120, 61, 64); //vertical line

    ucg.setFontMode(UCG_FONT_MODE_TRANSPARENT);  
  ucg.setColor(0, 255, 35, 35);
  ucg.setPrintDir(0);
  ucg.setPrintPos(100,120);
  ucg.print("DETECTING");

  ucg.setFontMode(UCG_FONT_MODE_SOLID);
}  // End of setup





void draw_gradient_box2(void){
  
  //First color gradient bar
  ucg.setColor(0, 0, 20, 80);
  ucg.setColor(1, 66, 66, 15);
  ucg.setColor(2, 60, 0, 40);
  ucg.setColor(3, 0, 160, 160);
  ucg.drawGradientBox(30, 44, 55, 8);
}

void draw_gradient_box3(void){
  
  //First color gradient bar
  ucg.setColor(0, 170, 220, 255);
  ucg.setColor(1, 64, 0, 64);
  ucg.setColor(2, 70, 220, 255);
  ucg.setColor(3, 64, 0, 64);
  ucg.drawGradientBox(90, 44, 55, 8);
}

void gradient_circle(void)
{

  ucg_int_t mx;
  ucg_int_t x, xx;
  mx = ucg.getWidth() / 3;
  //my = ucg.getHeight() / 2;
 
  
  for( x = 0; x  < mx; x++ )
  {
    xx = (((uint16_t)x)*255)/mx;
    ucg.setColor(184, 128-xx/2, 255-xx);
    ucg.drawCircle(110, 85, 4, UCG_DRAW_ALL);
    
    //ucg.setColor(196, 128-xx/2, 128-xx);
    ucg.drawCircle(110, 85, 10, UCG_DRAW_ALL);
    
    //ucg.setColor(164, 164-xx/2, 255-xx);
    ucg.drawCircle(110, 85, 16, UCG_DRAW_ALL);
   }
}

void gradient_circle2(void)
{

  
  ucg_int_t mx;
  ucg_int_t x, xx;
  mx = ucg.getWidth() / 3;
  //my = ucg.getHeight() / 2;
 
  
  for( x = 0; x  < mx; x++ )
  {
    xx = (((uint16_t)x)*255)/mx;
    ucg.setColor(255, 128-xx/2, 255-xx);
    ucg.drawCircle(90, 95, 4, UCG_DRAW_ALL);
    
    //ucg.setColor(196, 128-xx/2, 128-xx);
    ucg.drawCircle(90, 95, 10, UCG_DRAW_ALL);
    
    //ucg.setColor(164, 164-xx/2, 255-xx);
    ucg.drawCircle(90, 95, 16, UCG_DRAW_ALL);
   }
}


    
void loop(void)  // Start of loop
{

  draw_gradient_box3();
 draw_gradient_box2();

 
gradient_circle();
gradient_circle2();

}  // End of loop

Perehama · July 24, 2019, 5:40pm

if (button) redrawGraphic();

system · July 25, 2019, 8:54am

and yes, I know the code needs to be cleaned up and spacing fixed.

Fixing the piss-poor indenting would have taken less time than it took to type that.

Use Tools + Auto Format and be done in milliseconds.

Vintagecloak · July 26, 2019, 3:11pm

PaulS:
Fixing the piss-poor indenting would have taken less time than it took to type that.

Use Tools + Auto Format and be done in milliseconds.

A real answer would have been more helpful and appreciated!

Perehama · July 26, 2019, 4:38pm

Vintagecloak:
A real answer would have been more helpful and appreciated!

Vintagecloak:
I know how to implement the button code, and I know how to create the graphic. I also know how to basically overly a new graphic on top of another.
What I don't quite understand completely is, how to implement the code to use a button to start that new graphic.

If you know how to implement a button as a bool, and you know how to create the function to lay the graphic on top of another, integrating them is as simple as

if (button) overlayGraphic();

Vintagecloak · July 26, 2019, 5:40pm

Thank you Perehama. I appreciate your help a lot.

I have been trying to make it work through trial and error. I am still new to this. I have tried numerous different way but I am apparently not savvy enough yet to completely understand to mesh them together.

This is what I have to implement the button in to the code.

const int buttonPin = 2;     // the number of the pushbutton pin


int buttonState = 0;         // pushbutton status

I have this for the setup:

  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);

Then I have this in the loop

{
    // read the state of the pushbutton value:
    buttonState = digitalRead(buttonPin);

    // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
    if (buttonState == HIGH) {
      // turn to next graphic:
    redrawGraphic();

Now, my problem is, redrawGraphic was not defined because I do not know where to put it to define it. Do I define it in the Setup or before? If so, where and how do I prevent it from already being displayed?

evanmars · July 26, 2019, 6:20pm

Before would work. It won't run until you call it.

jremington · July 26, 2019, 6:30pm

redrawGraphic was not defined because I do not know where to put it to define it

There is no function redrawGraphic() in your code, so you have to write it. Its location in the main code shouldn't matter with Arduino, or it can be a separate .cpp or .h file, in the same folder.

Why is all that drawing code in setup()?

Vintagecloak · July 26, 2019, 6:41pm

Thanks jremington,

I did write the code for the redrawGarphic but it over rides the almost immediately. It is not really responding to the button at all.

This is what all the drawing in the setup looks like on the screen.

This is what I have thus far:

#include "Ucglib.h"  // Include Ucglib library to drive the display


// Create display and define the pins:
Ucglib_ST7735_18x128x160_HWSPI ucg(8, 10, 9);  // (A0=8, CS=10, RESET=9)


const int buttonPin = 2;     // the number of the pushbutton pin


int buttonState = 0;         // pushbutton status

int Variable1;  // Create a variable to have something dynamic to show on the display
uint8_t z = 80;  // start value
uint32_t lcg_rnd(void) {
  z = (uint8_t)((uint16_t)65 * (uint16_t)z + (uint16_t)17);
  return (uint32_t)z;
}




void setup(void)  // Start of setup
{

  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);

  // Display setup:

  ucg.begin(UCG_FONT_MODE_SOLID);  // It writes a background for the text. This is the recommended option

  ucg.clearScreen();  // Clear the screen

  // Set display orientation:
  ucg.setRotate90();  // Put 90, 180 or 270, or comment to leave default



  ucg.setFont(ucg_font_helvB08_tr);
  //*************************************



  // Draw filled rounded rectangle: top left corner
  ucg.setColor(255, 128, 64);  // Set color (0,R,G,B)
  ucg.drawRBox(0, 0, 50, 40, 12);  // Start from top-left pixel (x,y,wigth,height,radius)


  // Draw filled rounded rectangle: black fill
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawRBox(20, 8, 120, 40, 8);  // Start from top-left pixel (x,y,wigth,height,radius)

  // Write to the display the text "Scan":
  ucg.setFont(ucg_font_helvB08_tr);  // Set font
  ucg.setColor(0, 255, 255, 255);  // Set color (0,R,G,B)
  ucg.setColor(1, 0, 0, 0);  // Set color of text background (1,R,G,B)
  ucg.setPrintPos(125, 20); // Set position (x,y)
  ucg.print("SCAN");  // Print text or value

  // Draw filled rectangle: blip in front of text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(30, 25, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

  // Write to the display the text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 255, 128, 0);  // Set color (0,R,G,B)
  ucg.setPrintPos(39, 30); // Set position (x,y)
  ucg.print("SPECTRUM");  // Print text or value

  // Draw filled rectangle: 2nd blip in front of 2nd text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(90, 25, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

  // Write to the display the 2nd text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 128, 128, 255);  // Set color (0,R,G,B)
  ucg.setPrintPos(99, 30); // Set position (x,y)
  ucg.print("SEARCH");  // Print text or value

  // Draw filled rectangle: blip in front of text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(30, 35, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

  // Write to the display the text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 255, 128, 255);  // Set color (0,R,G,B)
  ucg.setPrintPos(39, 40); // Set position (x,y)
  ucg.print("ANALYZE");  // Print text or value



  // Draw filled rectangle: fill gap next to top
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(38, 0, 5, 15);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle: orange bar top
  ucg.setColor(255, 160, 0);  // Set color (0,R,G,B)
  ucg.drawBox(42, 0, 120, 8);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle: left gap below top
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 30, 25, 10);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle:left grayish rectangle below gap
  ucg.setColor(200, 128, 96);  // Set color (0,R,G,B)
  ucg.drawBox(0, 33, 20, 20);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle:left below grayish rectangle gap
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 50, 20, 10);  // Start from top-left pixel (x,y,wigth,height)


  // Draw filled rectangle:left orange rectangle middle
  ucg.setColor(255, 150, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 53, 20, 60);  // Start from top-left pixel (x,y,wigth,height)


  // Draw filled rectangle:left bottom orange rectangle
  ucg.setColor(255, 160, 0);  // Set color (0,R,G,B)
  ucg.drawBox(-1, 115, 21, 40);  // Start from top-left pixel (x,y,wigth,height)

  // Draw rectangle:
  ucg.setColor(122, 122, 122);  // Set color (0,R,G,B)
  ucg.drawFrame(30, 60, 120, 65);  // Start from top-left pixel (x,y,wigth,height)



  // Draw rounded rectangle:
  //ucg.setColor(0, 255, 255);  // Set color (0,R,G,B)
  //ucg.drawRFrame(30, 60, 115, 65, 8);  // Start from top-left pixel (x,y,wigth,height,radius)

  //Big color gradient radar box
  ucg.setColor(0, 0, 20, 80);
  ucg.setColor(1, 85, 95, 115);
  ucg.setColor(2, 60, 0, 40);
  ucg.setColor(3, 98, 98, 98);

  ucg.drawGradientBox(31, 61, 118, 62);




  // Draw circle:
  //ucg.setColor(255, 255, 0);  // Set color (0,R,G,B)
  //ucg.drawCircle(110, 74, 6, UCG_DRAW_ALL);  // (x,y,radius,option)



  // Draw filled triangle:
  ucg.setColor(122, 122, 122);  // Set color (0,R,G,B)
  ucg.drawTriangle(50, 87,   100, 70,   95, 100); // (x0,y0,x1,y1,x2,y2)

  // Draw filled circle:
  ucg.setColor(0, 255, 0, 0);  // Set color (0,R,G,B)
  ucg.drawDisc(42, 86, 2, UCG_DRAW_ALL);  // (x,y,radius,option)

  ucg.setColor(0, 255, 0, 0);  // Set color (0,R,G,B)
  ucg.drawDisc(47, 94, 2, UCG_DRAW_ALL);  // (x,y,radius,option)

  ucg.setColor(0, 230, 130, 100);  // Set color (0,R,G,B
  ucg.drawLine(31, 80, 148, 80); //horizontal line
  ucg.drawLine(31, 105, 148, 105);//horizontal line

  ucg.drawVLine(60, 61, 64); //vertical line
  ucg.drawVLine(90, 61, 64); //vertical line
  ucg.drawVLine(120, 61, 64); //vertical line

  ucg.setFontMode(UCG_FONT_MODE_TRANSPARENT);
  ucg.setColor(0, 255, 35, 35);
  ucg.setPrintDir(0);
  ucg.setPrintPos(100, 120);
  ucg.print("DETECTING");

  ucg.setFontMode(UCG_FONT_MODE_SOLID);
}  // End of setup





void draw_gradient_box2(void) {

  //First color gradient bar
  ucg.setColor(0, 0, 20, 80);
  ucg.setColor(1, 66, 66, 15);
  ucg.setColor(2, 60, 0, 40);
  ucg.setColor(3, 0, 160, 160);
  ucg.drawGradientBox(30, 44, 55, 8);
}

void draw_gradient_box3(void) {

  //First color gradient bar
  ucg.setColor(0, 170, 220, 255);
  ucg.setColor(1, 64, 0, 64);
  ucg.setColor(2, 70, 220, 255);
  ucg.setColor(3, 64, 0, 64);
  ucg.drawGradientBox(90, 44, 55, 8);
}


void redrawGraphic(void) {

  //Big color gradient radar box
  ucg.setColor(0, 255, 20, 164);
  ucg.setColor(1, 85, 95, 115);
  ucg.setColor(2, 164, 0, 40);
  ucg.setColor(3, 98, 98, 98);

  ucg.drawGradientBox(31, 61, 118, 64);

}


void gradient_circle(void)
{

  ucg_int_t mx;
  ucg_int_t x, xx;
  mx = ucg.getWidth() / 3;
  //my = ucg.getHeight() / 2;


  for ( x = 0; x  < mx; x++ )
  {
    xx = (((uint16_t)x) * 255) / mx;
    ucg.setColor(184, 128 - xx / 2, 255 - xx);
    ucg.drawCircle(110, 85, 4, UCG_DRAW_ALL);

    //ucg.setColor(196, 128-xx/2, 128-xx);
    ucg.drawCircle(110, 85, 10, UCG_DRAW_ALL);

    //ucg.setColor(164, 164-xx/2, 255-xx);
    ucg.drawCircle(110, 85, 16, UCG_DRAW_ALL);
  }
}

void gradient_circle2(void)
{

  ucg_int_t mx;
  ucg_int_t x, xx;
  mx = ucg.getWidth() / 3;
  //my = ucg.getHeight() / 2;


  for ( x = 0; x  < mx; x++ )
  {
    xx = (((uint16_t)x) * 255) / mx;
    ucg.setColor(255, 128 - xx / 2, 255 - xx);
    ucg.drawCircle(90, 95, 4, UCG_DRAW_ALL);

    //ucg.setColor(196, 128-xx/2, 128-xx);
    ucg.drawCircle(90, 95, 10, UCG_DRAW_ALL);

    //ucg.setColor(164, 164-xx/2, 255-xx);
    ucg.drawCircle(90, 95, 16, UCG_DRAW_ALL);
  }
}


void loop(void)  // Start of loop
{
  // read the state of the pushbutton value:
    buttonState = digitalRead(buttonPin);

     // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
    if (buttonState == HIGH) {
      // turn to next graphic:
      redrawGraphic();

  draw_gradient_box3();
  draw_gradient_box2();


  gradient_circle();
  gradient_circle2();

}
}
// End of loop

evanmars · July 26, 2019, 7:42pm

Have you got a pulldown resistor on your buttonPin?

jremington · July 26, 2019, 8:19pm

Right now, loop() checks the button and whenever the button is HIGH, it keeps calling redrawGraphic(), over and over. You probably don't want to do that.

Instead, check for a change of button state and then redraw the screen, once.

PS: Very nice, artistic screen display!

Vintagecloak · July 27, 2019, 4:07am

evanmars:
Have you got a pulldown resistor on your buttonPin?

evenmars, I tried it with both the resistor (10k) and without. Neither state have any affect and no response.

jremington:
Right now, loop() checks the button and whenever the button is HIGH, it keeps calling redrawGraphic(), over and over. You probably don't want to do that.

Instead, check for a change of button state and then redraw the screen, once.

PS: Very nice, artistic screen display!

Thanks jremington
Sadly, even with the implementation of the change of button state, it still just runs when ever and does not respond to the push button.

I did add a lastButtonState as a variable and added this to the loop

void loop(void)  // Start of loop
{
  // read the state of the pushbutton value:
    buttonState = digitalRead(buttonPin);

 // compare the buttonState to its previous state
  if (buttonState != lastButtonState) {
    // if the state has changed, increment the counter
    if (buttonState == HIGH) {
      // turn to next graphic:
      redrawGraphic();
       } else {
      // if the current state is LOW then the button went from on to off:
      gradient_box2();
     }
    // Delay a little bit to avoid bouncing
    delay(50);
  }
  // save the current state as the last state, for next time through the loop
  lastButtonState = buttonState;

jremington · July 27, 2019, 4:15am

Sadly, even with the implementation of the change of button state, it still just runs when ever and does not respond to the push button.

Then you have not wired the button correctly, or it is defective. Post the wiring diagram.

Get the state change example working by itself and make sure you understand it before adding / adapting the code to your program.

Always post ALL the code, so we can see the declarations and definitions.

Vintagecloak · July 27, 2019, 5:31am

Sorry jremington,

Here is the full code, will work up the wiring diagram in just a few for you.

#include "Ucglib.h"  // Include Ucglib library to drive the display


// Create display and define the pins:
Ucglib_ST7735_18x128x160_HWSPI ucg(8, 10, 9);  // (A0=8, CS=10, RESET=9)


const int buttonPin = 2;     // the number of the pushbutton pin


// variables will change:

int buttonState = 0;         // current state of the button
int lastButtonState = 0;     // previous state of the button

int Variable1;  // Create a variable to have something dynamic to show on the display
uint8_t z = 80;  // start value
uint32_t lcg_rnd(void) {
  z = (uint8_t)((uint16_t)65 * (uint16_t)z + (uint16_t)17);
  return (uint32_t)z;
}


void setup(void)  // Start of setup
{

  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);

  // Display setup:

  ucg.begin(UCG_FONT_MODE_SOLID);  // It writes a background for the text. This is the recommended option

  ucg.clearScreen();  // Clear the screen

  // Set display orientation:
  ucg.setRotate90();  // Put 90, 180 or 270, or comment to leave default



  ucg.setFont(ucg_font_helvB08_tr);
  //*************************************



  // Draw filled rounded rectangle: top left corner
  ucg.setColor(255, 128, 64);  // Set color (0,R,G,B)
  ucg.drawRBox(0, 0, 50, 40, 12);  // Start from top-left pixel (x,y,wigth,height,radius)


  // Draw filled rounded rectangle: black fill
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawRBox(20, 8, 120, 40, 8);  // Start from top-left pixel (x,y,wigth,height,radius)

  // Write to the display the text "Scan":
  ucg.setFont(ucg_font_helvB08_tr);  // Set font
  ucg.setColor(0, 255, 255, 255);  // Set color (0,R,G,B)
  ucg.setColor(1, 0, 0, 0);  // Set color of text background (1,R,G,B)
  ucg.setPrintPos(125, 20); // Set position (x,y)
  ucg.print("SCAN");  // Print text or value

  // Draw filled rectangle: blip in front of text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(30, 25, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

  // Write to the display the text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 255, 128, 0);  // Set color (0,R,G,B)
  ucg.setPrintPos(39, 30); // Set position (x,y)
  ucg.print("SPECTRUM");  // Print text or value

  // Draw filled rectangle: 2nd blip in front of 2nd text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(90, 25, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

  // Write to the display the 2nd text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 128, 128, 255);  // Set color (0,R,G,B)
  ucg.setPrintPos(99, 30); // Set position (x,y)
  ucg.print("SEARCH");  // Print text or value

  // Draw filled rectangle: blip in front of text
  ucg.setColor(164, 128, 255);  // Set color (0,R,G,B)
  ucg.drawBox(30, 35, 5, 5);  // Start from top-left pixel (x,y,wigth,height)

  // Write to the display the text:
  ucg.setFont(ucg_font_profont10_mr);  // Set font
  ucg.setColor(0, 255, 128, 255);  // Set color (0,R,G,B)
  ucg.setPrintPos(39, 40); // Set position (x,y)
  ucg.print("ANALYZE");  // Print text or value



  // Draw filled rectangle: fill gap next to top
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(38, 0, 5, 15);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle: orange bar top
  ucg.setColor(255, 160, 0);  // Set color (0,R,G,B)
  ucg.drawBox(42, 0, 120, 8);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle: left gap below top
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 30, 25, 10);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle:left grayish rectangle below gap
  ucg.setColor(200, 128, 96);  // Set color (0,R,G,B)
  ucg.drawBox(0, 33, 20, 20);  // Start from top-left pixel (x,y,wigth,height)

  // Draw filled rectangle:left below grayish rectangle gap
  ucg.setColor(0, 0, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 50, 20, 10);  // Start from top-left pixel (x,y,wigth,height)


  // Draw filled rectangle:left orange rectangle middle
  ucg.setColor(255, 150, 0);  // Set color (0,R,G,B)
  ucg.drawBox(0, 53, 20, 60);  // Start from top-left pixel (x,y,wigth,height)


  // Draw filled rectangle:left bottom orange rectangle
  ucg.setColor(255, 160, 0);  // Set color (0,R,G,B)
  ucg.drawBox(-1, 115, 21, 40);  // Start from top-left pixel (x,y,wigth,height)

  // Draw rectangle:
  ucg.setColor(122, 122, 122);  // Set color (0,R,G,B)
  ucg.drawFrame(30, 60, 120, 65);  // Start from top-left pixel (x,y,wigth,height)



  // Draw rounded rectangle:
  //ucg.setColor(0, 255, 255);  // Set color (0,R,G,B)
  //ucg.drawRFrame(30, 60, 115, 65, 8);  // Start from top-left pixel (x,y,wigth,height,radius)

  //Big color gradient radar box
  ucg.setColor(0, 0, 20, 80);
  ucg.setColor(1, 85, 95, 115);
  ucg.setColor(2, 60, 0, 40);
  ucg.setColor(3, 98, 98, 98);

  ucg.drawGradientBox(31, 61, 118, 62);


  // Draw circle:
  //ucg.setColor(255, 255, 0);  // Set color (0,R,G,B)
  //ucg.drawCircle(110, 74, 6, UCG_DRAW_ALL);  // (x,y,radius,option)



  // Draw filled triangle:
  ucg.setColor(122, 122, 122);  // Set color (0,R,G,B)
  ucg.drawTriangle(50, 87,   100, 70,   95, 100); // (x0,y0,x1,y1,x2,y2)

  // Draw filled circle:
  ucg.setColor(0, 255, 0, 0);  // Set color (0,R,G,B)
  ucg.drawDisc(42, 86, 2, UCG_DRAW_ALL);  // (x,y,radius,option)

  ucg.setColor(0, 255, 0, 0);  // Set color (0,R,G,B)
  ucg.drawDisc(47, 94, 2, UCG_DRAW_ALL);  // (x,y,radius,option)


  ucg.setFontMode(UCG_FONT_MODE_TRANSPARENT);
  ucg.setColor(0, 255, 35, 35);
  ucg.setPrintDir(0);
  ucg.setPrintPos(100, 120);
  ucg.print("DETECTING");

  ucg.setFontMode(UCG_FONT_MODE_SOLID);
}  // End of setup


void draw_gradient_box2(void) {

  //First color gradient bar
  ucg.setColor(0, 0, 20, 80);
  ucg.setColor(1, 66, 66, 15);
  ucg.setColor(2, 60, 0, 40);
  ucg.setColor(3, 0, 160, 160);
  ucg.drawGradientBox(30, 44, 55, 8);
}

void draw_gradient_box3(void) {

  //First color gradient bar
  ucg.setColor(0, 170, 220, 255);
  ucg.setColor(1, 64, 0, 64);
  ucg.setColor(2, 70, 220, 255);
  ucg.setColor(3, 64, 0, 64);
  ucg.drawGradientBox(90, 44, 55, 8);
}

void redrawGraphic(void) {

  //Big color gradient radar box
  ucg.setColor(0, 255, 20, 164);
  ucg.setColor(1, 85, 95, 115);
  ucg.setColor(2, 164, 0, 40);
  ucg.setColor(3, 98, 98, 98);

  ucg.drawGradientBox(31, 61, 118, 64);

}

void gradient_box2(void)
{
  //Big color gradient radar box
  ucg.setColor(0, 255, 255, 128);
  ucg.setColor(1, 85, 95, 115);
  ucg.setColor(2, 128, 128, 40);
  ucg.setColor(3, 255, 128, 98);

  ucg.drawGradientBox(31, 61, 118, 64);
}


void gradient_circle(void)
{

  ucg_int_t mx;
  ucg_int_t x, xx;
  mx = ucg.getWidth() / 3;
  //my = ucg.getHeight() / 2;


  for ( x = 0; x  < mx; x++ )
  {
    xx = (((uint16_t)x) * 255) / mx;
    ucg.setColor(184, 128 - xx / 2, 255 - xx);
    ucg.drawCircle(110, 85, 4, UCG_DRAW_ALL);

    //ucg.setColor(196, 128-xx/2, 128-xx);
    ucg.drawCircle(110, 85, 10, UCG_DRAW_ALL);

    //ucg.setColor(164, 164-xx/2, 255-xx);
    ucg.drawCircle(110, 85, 16, UCG_DRAW_ALL);
  }
}

void gradient_circle2(void)
{
  ucg_int_t mx;
  ucg_int_t x, xx;
  mx = ucg.getWidth() / 3;
  //my = ucg.getHeight() / 2;


  for ( x = 0; x  < mx; x++ )
  {
    xx = (((uint16_t)x) * 255) / mx;
    ucg.setColor(255, 128 - xx / 2, 255 - xx);
    ucg.drawCircle(90, 95, 4, UCG_DRAW_ALL);

    //ucg.setColor(196, 128-xx/2, 128-xx);
    ucg.drawCircle(90, 95, 10, UCG_DRAW_ALL);

    //ucg.setColor(164, 164-xx/2, 255-xx);
    ucg.drawCircle(90, 95, 16, UCG_DRAW_ALL);
  }
}

void grid_lines(void)
{
  ucg.setColor(0, 230, 130, 100);  // Set color (0,R,G,B
  ucg.drawLine(31, 80, 148, 80); //horizontal line
  ucg.drawLine(31, 105, 148, 105);//horizontal line

  ucg.drawVLine(60, 61, 64); //vertical line
  ucg.drawVLine(90, 61, 64); //vertical line
  ucg.drawVLine(120, 61, 64); //vertical line
}


void loop(void)  // Start of loop
{
  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);

  // compare the buttonState to its previous state
  if (buttonState != lastButtonState) {
    // if the state has changed, increment the counter
    if (buttonState == HIGH) {
      // turn to next graphic:
      redrawGraphic();
    } else {
      // if the current state is LOW then the button went from on to off:
      gradient_box2();
    }
    // Delay a little bit to avoid bouncing
    delay(50);
  }


  draw_gradient_box3();
  draw_gradient_box2();

  grid_lines();
  gradient_circle();
  gradient_circle2();

}
// End of loop

Vintagecloak · July 27, 2019, 5:37am

And here are the wiring diagrams.

![|500x401](The Unofficial Columbia Ranch Site layout.jpg)

![|500x309](The Unofficial Columbia Ranch Site layout.jpg)

jremington · July 27, 2019, 2:50pm

I see that you did not take the time to actually try out the state change example code, or use the recommended wiring. The button won't work the way you currently have it wired.

Aside: the built in random number generator will work much better than this one:

uint32_t lcg_rnd(void) {
  z = (uint8_t)((uint16_t)65 * (uint16_t)z + (uint16_t)17);
  return (uint32_t)z;
}

Vintagecloak · July 28, 2019, 3:59am

Thanks for the reply jremington.

I did try the code and wired it according to the schematic but when I do, it basically shorts the circuit and has no affect on the graphic. It actually reduces the amount of power the lcd gets. This may sound like a dumb question but, why does the 5v supply get routed back to D2 and ground in order to change a graphic?

jremington · July 28, 2019, 4:08am

You probably either wired it incorrectly, or are using a resistor with very low resistance. 10K (10000) Ohms is typical.

Use pinmode(buttonpin, INPUT_PULLUP) and simply wire the switch from the input pin to ground, as described in this tutorial.

We strongly recommend that people work their way through the simple examples that come with Arduino, to learn the special features of the hardware. You will save yourself a lot of frustration that way.

Vintagecloak · July 28, 2019, 5:21am

I do appreciate all your help jremington, and I am sorry that I seem to frustrate you with this.

I did go through the tutorials and examples that come with the Arduino software. That is how I have come this far, by studying and trying the examples, however, after writing my code, what I wanted to do was not anywhere described, hence I posted here for help.

Now, to get back to the code and wiring. I wired it correctly according to the sample sketch you mentioned, and even double checked it again. But, that does not mean I didn't make a mistake. However, triple checking did not show I did.
I also did connect the switch directly to D2 and GRND with the INPUT_PULLUP command but it also does not seem to work. Somewhere I must have made an error in the code or what I am trying to achieve is just not feasible.

Topic		Replies	Views
I need help my code dosnt work properly Programming	3	321	August 20, 2021
Change to next code with the help of a button Programming	11	1131	May 5, 2021
Have LCD screen update when button is pressed Programming	8	601	August 28, 2023
Button press to change LCD screen General Guidance	19	35984	May 5, 2021
Push Button and LCD Displays Displays	5	766	May 6, 2021

Help; change animation with button push

Related topics