// simple project using Arduino UNO and 128x64 OLED Display to display a menu
// created by upir, 2022
// youtube channel: https://www.youtube.com/upir_upir

// YOUTUBE VIDEO: https://youtu.be/HVHVkKt-ldc

// links from the video:
// Flipper Zero menu - https://docs.flipperzero.one/basics/control#M5BZO
// WOKWI start project progress bar - https://wokwi.com/projects/300867986768527882
// image2cpp - https://javl.github.io/image2cpp/
// 128x64 SSD1306 OLED Display: https://s.click.aliexpress.com/e/_DCKdvnh
// Transparent OLED display: https://s.click.aliexpress.com/e/_Dns6eLz
// Arduino UNO: https://s.click.aliexpress.com/e/_AXDw1h
// Arduino UNO MINI: https://store.arduino.cc/products/uno-mini-le
// Big OLED Display: https://s.click.aliexpress.com/e/_ADL0T9
// Arduino breadboard prototyping shield: https://s.click.aliexpress.com/e/_ApbCwx
// u8g fonts (fonts available for u8g library): https://nodemcu-build.com/u8g-fonts.php
// u8g documentation: https://github.com/olikraus/u8glib/wiki/userreference
// Photopea (online Photoshop-like tool): https://www.photopea.com/
// image2cpp (convert images into C code): https://javl.github.io/image2cpp/
// Push buttons - https://s.click.aliexpress.com/e/_DmXS8B9

// Related videos:
// Arduino Parking Sensor - https://youtu.be/sEWw087KOj0
// Turbo pressure gauge with Arduino and OLED display - https://youtu.be/JXmw1xOlBdk
// Arduino Car Cluster with OLED Display - https://youtu.be/El5SJelwV_0
// Knob over OLED Display - https://youtu.be/SmbcNx7tbX8
// Arduino + OLED = 3D ? - https://youtu.be/kBAcaA7NAlA
// Arduino OLED Gauge - https://youtu.be/xI6dXTA02UQ
// Smaller & Faster Arduino - https://youtu.be/4GfPQoIRqW8



#include "U8glib.h"
#include "Wire.h"
#include "SPI.h"
#include <Encoder.h>

U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST); // Fast I2C / TWI
// U8GLIB_SSD1306_128X64 u8g(13, 11, 8, 9, 10); // SPI connection
// for SPI connection, use this wiring:
// GND > GND
// VCC > 5V
// SCL > 13
// SDA > 11
// RES > 10
// DC > 9
// CS > 8


const unsigned char bitmap_Download1 [] PROGMEM = {
  0x00, 0x00, 0x00, 0x02, 0x00, 0x06, 0x00, 0x1c, 0x00, 0x38, 0x00, 0x70, 0x00, 0xe0, 0x03, 0xc0,
  0x07, 0x80, 0x0f, 0x80, 0x1f, 0x80, 0x3f, 0x00, 0x7e, 0x00, 0xf8, 0x00, 0x70, 0x00, 0x20, 0x00

}; const unsigned char bitmap_Download2 [] PROGMEM = {


  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x00, 0x07, 0x00, 0x7c, 0x01, 0xf8, 0x03, 0xf0,
  0x07, 0xe0, 0x07, 0xc0, 0x1f, 0x00, 0x38, 0x00, 0x60, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00


}; const unsigned char bitmap_Download3 [] PROGMEM = {
  0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x1f, 0x00, 0x77, 0x03, 0xde, 0x0f, 0x98, 0x1e, 0xf0,
  0x3f, 0xc0, 0x77, 0x80, 0x1f, 0x00, 0x3e, 0x00, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00

};

const unsigned char* bitmap_icons[8] = {
  bitmap_Download1,
  bitmap_Download2,
  bitmap_Download3,
  bitmap_Download1,
  bitmap_Download2,
  bitmap_Download3,
  bitmap_Download1,
  bitmap_Download2
};
// all the arrays below are generated from images using image2cpp website
// scroll down to see the actual code

const unsigned char upir_logo [] PROGMEM = {  // this is another way how to define images, using binary notation
  0x02, 0x00, 0x06, 0x00, 0x3f, 0x00, 0x7f, 0x80, 0x7f, 0x00, 0x7f, 0x00, 0x7f, 0x00, 0x7f, 0x80,
  0x3f, 0x80, 0x3f, 0x00
};


// 'scrollbar_background', 8x64px
const unsigned char bitmap_scrollbar_background [] PROGMEM = {
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02,
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02,
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02,
  0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x02, 0x00, 0x00
};

// 'item_sel_outline', 128x21px
const unsigned char bitmap_item_sel_outline [] PROGMEM = {
  0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0,
  0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30,
  0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0,
  0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0
};



// ------------------ end generated bitmaps from image2cpp ---------------------------------



const int NUM_ITEMS = 8; // number of items in the list and also the number of screenshots and screenshots with QR codes (other screens)
const int MAX_ITEM_LENGTH = 20; // maximum characters for the item name

char menu_items [NUM_ITEMS] [MAX_ITEM_LENGTH] = {  // array with item names
  { "Port 1" },
  { "Port 2" },
  { "Port 3" },
  { "Port 4" },
  { "Port 5" },
  { "Port 6" },
  { "Port 7" },
  { "Port 8" }
};


// note - when changing the order of items above, make sure the other arrays referencing bitmaps
// also have the same order, for example array "bitmap_icons" for icons, and other arrays for screenshots and QR codes
// note - when changing the order of items above, make sure the other arrays referencing bitmaps
// also have the same order, for example array "bitmap_icons" for icons, and other arrays for screenshots and QR codes

#define BUTTON_UP_PIN 12 // pin for UP button 
#define BUTTON_SELECT_PIN 5 // pin for SELECT button
#define BUTTON_DOWN_PIN 4 // pin for DOWN button

// ENCODER

int val = -1;
int encoder0PinA = 6;
int encoder0PinB = 7;
int encoder0Pos = 0;
int encoder0PinALast = LOW;
int n = LOW;
int NUM_MENU = 8;
// ENCODER TEST End

int button_up_clicked = 0; // only perform action when button is clicked, and wait until another press
int button_select_clicked = 0; // same as above
int button_down_clicked = 0; // same as above

int item_selected = 0; // which item in the menu is selected

int item_sel_previous; // previous item - used in the menu screen to draw the item before the selected one
int item_sel_next; // next item - used in the menu screen to draw next item after the selected one

int current_screen = 0;   // 0 = menu, 1 = screenshot, 2 = qr

int demo_mode = 0; // when demo mode is set to 1, it automatically goes over all the screens, 0 = control menu with buttons
int demo_mode_state = 0; // demo mode state = which screen and menu item to display
int demo_mode_delay = 0; // demo mode delay = used to slow down the screen switching


void setup() {
  u8g.setColorIndex(1);  // set the color to white

  // define pins for buttons
  // INPUT_PULLUP means the button is HIGH when not pressed, and LOW when pressed
  // since it´s connected between some pin and GND
  pinMode(BUTTON_UP_PIN, INPUT_PULLUP); // up button
  pinMode(BUTTON_SELECT_PIN, INPUT_PULLUP); // select button
  pinMode(BUTTON_DOWN_PIN, INPUT_PULLUP); // down button
  //Encoder
  //pinMode( button_pin, INPUT_PULLUP);
  pinMode (encoder0PinA, INPUT);
  pinMode (encoder0PinB, INPUT);
}


void loop() {

  if (current_screen == 0) { // MENU SCREEN
  //Encoder
  //button_state = digitalRead( button_pin );

  // Serial.println( button_state );

  if ( val != encoder0Pos ) {
    val = encoder0Pos;
  }
  //Encoder

    if (current_screen == 0) { // MENU SCREEN

    //Encoder
    n = digitalRead(encoder0PinA);
    if ((encoder0PinALast == LOW) && (n == HIGH)) {
      if (digitalRead(encoder0PinB) == LOW) {
        if ( encoder0Pos > 0 ) {
          encoder0Pos--;
          item_selected = item_selected - 1;
          if (item_selected < 0) { // if first item was selected, jump to last item
           item_selected = NUM_ITEMS - 1;
        } else {
          encoder0Pos = (encoder0position);
          item_selected = item_selected + 1; // select next item
        button_down_clicked = 1; // set button to clicked to only perform the action once
        if (item_selected >= NUM_ITEMS) { // last item was selected, jump to first menu item
          item_selected = 0;

          } else {
            if ( encoder0Pos < (NUM_MENU-1) ) {
              encoder0Pos++;
            } else {
              encoder0Pos = 0;
            }
          }
        }
      }


      //up and down buttons only work for the menu screen
      if ((digitalRead(BUTTON_UP_PIN) == LOW) && (button_up_clicked == 0)) { // up button clicked - jump to previous menu item
        item_selected = item_selected - 1; // select previous item
        button_up_clicked = 1; // set button to clicked to only perform the action once
        if (item_selected < 0) { // if first item was selected, jump to last item
          item_selected = NUM_ITEMS - 1;
        }
      }
      else if ((digitalRead(BUTTON_DOWN_PIN) == LOW) && (button_down_clicked == 0)) { // down button clicked - jump to next menu item
        item_selected = item_selected + 1; // select next item
        button_down_clicked = 1; // set button to clicked to only perform the action once
        if (item_selected >= NUM_ITEMS) { // last item was selected, jump to first menu item
          item_selected = 0;
        }
      }

      if ((digitalRead(BUTTON_UP_PIN) == HIGH) && (button_up_clicked == 1)) { // unclick
        button_up_clicked = 0;
      }
      if ((digitalRead(BUTTON_DOWN_PIN) == HIGH) && (button_down_clicked == 1)) { // unclick
        button_down_clicked = 0;
      }

    }
  }
}
if ((digitalRead(BUTTON_SELECT_PIN) == LOW) && (button_select_clicked == 0)) { // select button clicked, jump between screens
  button_select_clicked = 1; // set button to clicked to only perform the action once
  if (current_screen == 0) {
    current_screen = 1; // menu items screen --> screenshots screen
  }
  else if (current_screen == 1) {
    current_screen = 2; // screenshots screen --> qr codes screen
  }
  else {
    current_screen = 0; // qr codes screen --> menu items screen
  }
}
if ((digitalRead(BUTTON_SELECT_PIN) == HIGH) && (button_select_clicked == 1)) { // unclick
  button_select_clicked = 0;
}
Serial.print (encoder0Pos);
Serial.println();
// set correct values for the previous and next items
item_sel_previous = item_selected - 1;
if (item_sel_previous < 0) {
  item_sel_previous = NUM_ITEMS - 1; // previous item would be below first = make it the last
}
item_sel_next = item_selected + 1;
if (item_sel_next >= NUM_ITEMS) {
  item_sel_next = 0; // next item would be after last = make it the first
}


u8g.firstPage(); // required for page drawing mode for u8g library
do {

  if (current_screen == 0) { // MENU SCREEN

    // selected item background
    u8g.drawBitmapP(0, 22, 128 / 8, 21, bitmap_item_sel_outline);

    // draw previous item as icon + label
    u8g.setFont(u8g_font_7x14);
    u8g.drawStr(25, 15, menu_items[item_sel_previous]);
    u8g.drawBitmapP( 4, 2, 16 / 8, 16, bitmap_icons[item_sel_previous]);

    // draw selected item as icon + label in bold font
    u8g.setFont(u8g_font_7x14B);
    u8g.drawStr(25, 15 + 20 + 2, menu_items[item_selected]);
    u8g.drawBitmapP( 4, 24, 16 / 8, 16, bitmap_icons[item_selected]);

    // draw next item as icon + label
    u8g.setFont(u8g_font_7x14);
    u8g.drawStr(25, 15 + 20 + 20 + 2 + 2, menu_items[item_sel_next]);
    u8g.drawBitmapP( 4, 46, 16 / 8, 16, bitmap_icons[item_sel_next]);

    // draw scrollbar background
    u8g.drawBitmapP(128 - 8, 0, 8 / 8, 64, bitmap_scrollbar_background);

    // draw scrollbar handle
    u8g.drawBox(125, 64 / NUM_ITEMS * item_selected, 3, 64 / NUM_ITEMS);

    // draw upir logo
    u8g.drawBitmapP(128 - 16 - 4, 64 - 11, 16 / 8, 10, upir_logo); //pos pos ? size 10 pixel

  }
  else if (current_screen == 1) { // SCREENSHOTS SCREEN
    u8g.drawBitmapP(0, 22, 128 / 8, 21, bitmap_item_sel_outline); // draw screenshot
  }
  else if (current_screen == 2) { // QR SCREEN
    u8g.drawBitmapP(0, 22, 128 / 8, 21, bitmap_item_sel_outline); // draw qr code screenshot
  }

} while ( u8g.nextPage() ); // required for page drawing mode with u8g library

}