Showing image from bytes stored in SPIFFS file

[David Česal]

I want to save image uploaded in webpage and sent to badgy using JavaScript and websocket.

I'm using ESPAsyncWebServer (and its async websocket) and image is received in chunks:

I write it into SPIFFS file in this form:

Problem is how to convert these data to valid form for display.drawBitmap(img, 0, 0, 296, 128, GxEPD_BLACK);? I've tried many ways to convert characters to uint8_t array, but device is restarting - I don't know how to do this correctly to have enough memory.

File f = SPIFFS.open("/photo1.txt", "r");
String data = f.readString();
... How to convert it to uint8_t array?

Thanks.

[SQFMI]

You can take a look at the examples in GxEPD2: https://github.com/ZinggJM/GxEPD2/blob/master/examples/GxEPD2_Spiffs_Example
It also supports GDEW029T5.

[David Česal]

I'm using this code:

File f = SPIFFS.open("/photo1.txt", "r");
      String input = f.readString();
      Serial.println(input);

      Serial.println("Converting to vector");
      std::vector<uint8_t> output;
      for (unsigned i = 0; i < input.length(); i += 2) {
        char byte_digits[3] = { input[i], input[i + 1] };
        int value = strtoul(byte_digits, nullptr, 16);
        output.push_back(value);
      }

      Serial.println("Converting to uint8_t arr");
      uint8_t *img = output.data();

Badgy is restarted when reaches middle part:

[David Česal]

I had to use drawPixel and it's working now. Nightmare - 2 days of trying.

Working pseudocode:

File f = SPIFFS.open("/photo1.txt", "r");
    String input = f.readString();
    display.setRotation(3);
    display.fillScreen(GxEPD_BLACK);
    int w = 1;
    int h = 1;
    int page = 0;
    int x = 0;
    int y = 7;

for (unsigned i = 0; i < input.length(); i += 2) {
      char byte_digits[3] = { input[i], input[i + 1] };
      int value = strtoul(byte_digits, nullptr, 16);
      String binString = DecToBin(value);

      if (binString.length() == 7) {
        binString = "0" + binString;
      } else if (binString.length() == 6) {
        binString = "00" + binString;
      } else if (binString.length() == 5) {
        binString = "000" + binString;
      } else if (binString.length() == 4) {
        binString = "0000" + binString;
      } else if (binString.length() == 3) {
        binString = "00000" + binString;
      } else if (binString.length() == 2) {
        binString = "000000" + binString;
      } else if (binString.length() == 1) {
        binString = "0000000" + binString;
      }
     
      // Check if pixel is white or black
      for (int k = 0; k < binString.length(); k++) {
        int color = 0;
        if (binString.charAt(k) == '1') {
          color = 255;
        }
        int yt = (page * 8) + y;
        display.drawPixel(x, yt, color);
        y--;
        if (y < 0) {
          y = 7;
          x++;
          if (x >= 296) {
            x = 0;
            page++;
          }
        }
      }