Old tube tv on/off effect for oled display

Using Arduino Displays
1

id like to add an animation of an old tv on and or off effect to my logo on the oled display. nano every. you know when a vintage tv turns off, the image quickly compresses to a horizontal line then shrinks to a dot? yeah, id like to do that to my logo. i'm new here, so where should i start my journey aside from here? thank you.

2

Slow the video to .25, screen capture key moments, image2cpp only the changing portion, display the images on OLED at normal speed.

3

noice! thank you!

4

first part i can do. this ^ part im clueless even tho its prob easy.

5

id like the logo to be incorporated with the shrink factor in the graphic tho. i think that may be too much to do, im just trying to be fancy.

6

it took me a few days to get my logo up.

7

A loop...

for (int i = 0; i < num_imgs; i++) {
  // display image i
  delay(100);
}

Look up image2cpp and how to display it on OLED.

1 Like
8

wish there was a vid to cpp page

9

Draw your own tv-off using the OLED GFX library. Look up OLED graphics on Youtube/Dronebotworkshop.

1 Like
10

yeah sorry still clueless. im only a few days in on arduino. id need someone to explain like im 10. please don't feel obligated. i will def look into that.

11

This is a very ambitious project for a beginner. It helps to get the crawl down before starting to run. Give it some time.

Adafruit has some good graphics tutorials. Example Overview | Arcada Animated GIF Display | Adafruit Learning System

1 Like
12

yes, i definitely feel this task is a run. in my mind i feel this shouldn't be so difficult. theres gotta be a better way. i dont give up so easy tho. i will look into this. we need a vid to cpp page.

13

It is difficult, as you will discover. If you don't know how to do something, there is no reason to think it should be easy to do.

1 Like
14

You ARE a 10. : )

Dronebot Workshop does a great job of explaining. I reference his work often. This web page follows his included video verbatim. After reading and watching (and do it again), if you have questions, ask them. You will be helped.
https://dronebotworkshop.com/oled-arduino/

1 Like
15

Two methods I can think of.

First method, edit your logo in a graphics program, creating a sequence of images that are compressed vertically, then compress the final image horizontally. That would take a lot of memory to store, although each image will get progressively smaller.

Second method, manipulate the image in the display buffer to compress it. Easiest method would be to take adjacent lines of the image and combine them into a single line, with each successive image being 1/2 the height of the previous image. Here is a partial example of that method, as you can see the bit manipulation gets a bit complex because the buffer is not oriented the same as the display. I don't have time tonight to work on the horizontal direction, and I'm not going to write the full code for you.

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
// The pins for I2C are defined by the Wire-library.
// On an arduino UNO:       A4(SDA), A5(SCL)
// On an arduino MEGA 2560: 20(SDA), 21(SCL)
// On an arduino LEONARDO:   2(SDA),  3(SCL), ...
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

void setup() {
  Serial.begin(115200);

  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if (!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println(F("SSD1306 allocation failed"));
    for (;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds
  for (byte x = 0; x < 5; x++) {
    compressImageY();
    display.display();
  }
}

void compressImageY() {
  uint8_t* ptr = display.getBuffer();
  const size_t col = 128;
  const size_t row = 64 / 8;
  for (size_t r = 0; r < row; r++) {
    for (size_t c = 0; c < col; c++) {
      uint8_t x = *(ptr + c + r * col);
      x = (x & 0b01010101) | ((x & 0b10101010) >> 1);
      x = (x & 0b00000001) | ((x & 0b00000100) >> 1) | ((x & 0b00010000) >> 2) | ((x & 0b01000000) >> 3);
      *(ptr + c + r * col) = x;
    }
  }

  for (size_t r = 0; r < row / 2; r++) {
    for (size_t c = 0; c < col; c++) {
      uint8_t x = *(ptr + c + 2 * r * col);
      x |= *(ptr + c + (2 * r + 1) * col) << 4;
      *(ptr + c + 2 * r * col) = x;
    }
  }
  
  memcpy(ptr + 3 * col, ptr + 2 * col, col);
  memcpy(ptr + 2 * col, ptr, col);
  memcpy(ptr + 5 * col, ptr + 6 * col, col);
  memset(ptr, 0, col * row / 4);
  memset(ptr + 6 * col, 0, col * row / 4);
}

void loop() {
}
16

I will re read the suggestions. Can i covert a gif to bpm or xbm or whatever, then include that in the script or something alone thoes lines?

17

I have the complete 5 second gif. Ill try convertio gif to bmp, and try to have it display with more reasearch.

18

I went to ezgif, resized to 128x64, then split to jpeg frames. (84). Now ill see if theres a way to code the group.

19

Only render 5 at first. Memory usage is the issue.

20

The gif is 5 seconds, 84 frames. Rendering 5 frames i dont understand. Try with 5 first? This portion of my project is just for fancy-ness. I'd do it if it was kinda simple. Like loading the images and it spits out the code. Or something like that. Nbd