E-paper UI

#define ENABLE_GxEPD2_GFX 1

#include <GxEPD2_3C.h>
#include <U8g2_for_Adafruit_GFX.h>

/*  ---E-PAPER CONNECTIONS FOR ESP32---
 * BUSY - 4
 * RST  - 15
 * DC   - 27
 * CS   - 5
 * CLK  - 18
 * DIN  - 23
 * GND  - GND
 * VCC  - 3.3V
 */

#define GxEPD2_DRIVER_CLASS GxEPD2_420c
#define colorBlack GxEPD_BLACK
#define colorWhite GxEPD_WHITE
#define colorRed GxEPD_RED

#define fontBig u8g2_font_inr33_mr            //33px
#define fontMid u8g2_font_lubR24_te           //25px
#define fontSml u8g2_font_fur20_tr            //20px
#define fontSpecial u8g2_font_t0_22_mf        //13px
#define fontxSml u8g2_font_helvB08_tf

#define batteryFont u8g2_font_battery19_tn

GxEPD2_3C<GxEPD2_420c, GxEPD2_420c::HEIGHT> display(GxEPD2_420c(/*CS=5*/ SS, /*DC=*/27, /*RST=*/15, /*BUSY=*/4));
U8G2_FOR_ADAFRUIT_GFX u8g2Fonts;

const int graphSize = 30;
const int scaleMargin = 0;

const int numYMarkers = 4;
const int numLines = 8;

float gDataT[graphSize];
float gDataH[graphSize];
float gDataP[graphSize];

void setup() {
  Serial.begin(115200);
  display.init(0, true, 2, false);
  u8g2Fonts.begin(display);

  display.setRotation(2);
  u8g2Fonts.setForegroundColor(colorBlack); // apply Adafruit GFX color
  u8g2Fonts.setBackgroundColor(colorWhite);

  //random graph data for now
  randomSeed(analogRead(A0));
}

void loop() {
  drawUI();
  delay(300000);
}

void drawUI(){
  int h = 0;
  int l = 100000;

  //fill arrays with random data for testing
  for(int i = 0; i < graphSize; i++){
    gDataT[i] = random(25);
    gDataH[i] = random(100);
    gDataP[i] = random(1000, 1023);

    if(gDataT[i] < l) { l = gDataT[i]; }
    if(gDataT[i] > h) { h = gDataT[i]; }
  }

  display.fillScreen(GxEPD_WHITE);

  //draw graph section
  drawGraph(260, 20, 120, 75, true, 0, 100, gDataT, "Temperature");   //xPos, yPos, width, height, enable autoscaling, yMin, yMax, data array, title
  drawGraph(260, 110, 120, 75, false, 0.0, 100.0, gDataH, "Humidity");
  drawGraph(260, 200, 120, 75, true, 0, 100, gDataP, "Air pressure");

  drawBattery(5, 2, 2.4, true, false);

  //draw temp section
  drawMainDisplay(5, 20, 250, 165, 2, "22.3c", "24.2", "19.8", "TEMP");

  //draw humidity/pressure section
  drawSecDisplay(5, 190, 122, 105, 2, "50.4", "46", "55", "RH");
  drawSecDisplay(132, 190, 122, 105, 2, "1023", "", "", "hPa");

  display.display();
  display.powerOff();
}
// UI STUFF //
//xPos    = xPosition of upper left corner of the box
//yPos    = yPosition of upper left corner of the box
//w       = width of box
//h       = height of box, going downward!
//border  = thickness of box border, in pixels
//mainNum = String that gets displayed at the top
//subNum = Strings that get displayed under mainNum
//title  = text to display in the left upper corner

void drawSecDisplay(int xPos, int yPos, int w, int h, int border, String mainNum, String subNumOne, String subNumTwo, String title){

  drawBox(xPos, yPos, w, h, border);

  u8g2Fonts.setFont(fontMid);
  //u8g2Fonts.setCursor(xPos, yPos);

  u8g2Fonts.setCursor((w/2) - (u8g2Fonts.getUTF8Width(mainNum.c_str())/2) + xPos, yPos+50);
  u8g2Fonts.print(mainNum);

  u8g2Fonts.setFont(fontSpecial);
  u8g2Fonts.setCursor(xPos+5, yPos+15);
  u8g2Fonts.print(title);

  u8g2Fonts.setFont(fontSml);

  String subNum = subNumOne + "|" + subNumTwo;
  u8g2Fonts.setCursor((w/2) - (u8g2Fonts.getUTF8Width(subNum.c_str())/2) + xPos, yPos+80);   //25, 270
  u8g2Fonts.print(subNum);
}

void drawMainDisplay(int xPos, int yPos, int w, int h, int border, String mainNum, String subNumOne, String subNumTwo, String title){

  drawBox(xPos, yPos, w, h, border);

  u8g2Fonts.setFont(fontBig);
  u8g2Fonts.setCursor((w/2) - (u8g2Fonts.getUTF8Width(mainNum.c_str())/2) + xPos, yPos+70);
  u8g2Fonts.print(mainNum);

  u8g2Fonts.setFont(fontMid);
  String subNum = subNumOne + "|" + subNumTwo;
  u8g2Fonts.setCursor((w/2) - (u8g2Fonts.getUTF8Width(subNum.c_str())/2) + xPos, yPos+105);
  u8g2Fonts.print(subNum);

  u8g2Fonts.setFont(fontSpecial);
  u8g2Fonts.setCursor(xPos+5, yPos+15);
  u8g2Fonts.print("TEMP");

}

void drawGraph(int xPos, int yPos, int width, int height, bool autoScale, float yMinStatic, float yMaxStatic, float data[graphSize], String title) {
  u8g2Fonts.setFont(fontxSml);

  u8g2Fonts.setCursor(xPos, yPos);
  u8g2Fonts.print(title);

  float yCoords[graphSize];
  float yMin = 10000;
  float yMax = -10000;

  //find min/max if autoscaling is enabled
  if(autoScale){
    for(int i = 0; i < graphSize; i++){
      if(data[i] > yMax) { yMax = data[i]; }
      if(data[i] < yMin) { yMin = data[i]; }
    }
  }
  else{
    yMin = yMinStatic;
    yMax = yMaxStatic;
  }
  //Serial.println("H: " + String(yMax) + " L: " + String(yMin));
  //draw graph outline
  display.drawRect(xPos, yPos, width, height, GxEPD_BLACK);


  //draw graph data
  for (int i = 0; i < graphSize; i++) { yCoords[i] = mapf(data[i], yMin, yMax, yPos+height, yPos); }


  for(int gx = 0; gx < graphSize-1; gx++){
    int xOne = 0;
    int xTwo = 0;

    //xOne = map(gx, 0, graphSize, xPos, xPos+width);
    xOne = xPos + (width / graphSize) * gx;
    xTwo = xOne + (width / graphSize);

    display.drawLine(xOne, yCoords[gx], xTwo, yCoords[gx+1], GxEPD_RED);
  }

  //draw y markers

  for(int i = 0; i < numYMarkers+1; i++){
    if(i > 0 && i < numYMarkers) {
      int markYPosLine = (height / numYMarkers * i) + yPos;
      for(int j = 0; j < numLines; j++){
        int lineX = width / numLines * j;
        display.drawFastHLine(lineX+(5/2)+xPos, markYPosLine, 10, GxEPD_BLACK);
      }
    }

    int markYPosText = (height / numYMarkers * i) + yPos;
    u8g2Fonts.setCursor(xPos+width+1, markYPosText+4);
    //Serial.println(yMax - (float)(yMax - yMin) / numYMarkers * i);
    if(yMax < yMin+10) { u8g2Fonts.print(String(yMax - (float)(yMax - yMin) / numYMarkers * i + 0.01, 1));}  //show decimals if range is smaller than 10
    else { u8g2Fonts.print(String(yMax - (float)(yMax - yMin) / numYMarkers * i, 0)); }
  }
  //display.display();
  //display.powerOff();
  //Serial.println("-----------------------");
}

void drawBattery(int xPos, int yPos, float level, bool showLvl, bool useFont){

  if(useFont){
      u8g2Fonts.setFont(batteryFont);
      u8g2Fonts.setCursor(xPos, yPos-5);
      if(level > 3.5){ u8g2Fonts.print(7); }
      else if(level > 2.8 && level < 3.5) { u8g2Fonts.print(6); }
      else if(level > 2.1 && level < 2.8) { u8g2Fonts.print(5); }
      else if(level > 1.4 && level < 2.1) { u8g2Fonts.print(4); }
      else if(level < 0.7) { u8g2Fonts.print(3); }
      else { u8g2Fonts.print(0); }
  }
  else{
    int fill = mapf(level, 0, 4.2, 0, 34);
    display.drawRect(xPos, yPos, 35, 15, colorBlack);
    display.drawRect(xPos+34, yPos+3, 6, 10, colorBlack);
    display.fillRect(xPos+1, yPos, fill, 14, colorBlack);
  }

  if(showLvl) {
    display.setCursor(xPos+50, yPos+5);
    display.print(String(level) + "v");
  }
}

//erases whatever is inside the box area!
void drawBox(int xPos, int yPos, int w, int h, int borderSize){
  display.fillRect(xPos, yPos, w, h, colorBlack);
  display.fillRect(xPos+borderSize, yPos+borderSize, w-(borderSize*2), h-(borderSize*2), colorWhite);
}

float mapf(float x, float in_min, float in_max, float out_min, float out_max){
  return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}