uOLED 128 G2 - Having Troubles Displaying Bitmap Data
Mahonroy
Posts: 175
Hi guys,
I have the uOLED 128 G2 from the parallax website, here is the link:
http://www.parallax.com/product/28081
I currently have it connected to a propeller microcontroller, and I am using the "oLED-128-G2_v2.1" library to communicate with it. So far everything is working fine, I can write text, draw lines, etc.
I am having problems displaying bitmaps. I am wanting to define a bitmap in the "dat" section of a .spin file, similarly to the "ParallaxIncLOGO" and the "ChipGracey" found in the "oLED-128-G2_DEMO_v2.1b" library. I cannot figure out the format, and how to convert a .bmp file to the hex array. I started small, and was attempting just a 4x4 bitmap file, but I can't seem to get it right... the 4x4 area on the screen is all jumbled and looks like I don't have my format right. I attached a sample image that I'm trying to get to display on the screen "blocks.bmp". I tried using some converter programs, and I get this as the output of the bitmap file:
So I manually converted it to SPIN like so:
I then use this code to write to the display:
However, this just looks like a bunch of random pixels on the display.
Any help is greatly appreciated, thanks!
I have the uOLED 128 G2 from the parallax website, here is the link:
http://www.parallax.com/product/28081
I currently have it connected to a propeller microcontroller, and I am using the "oLED-128-G2_v2.1" library to communicate with it. So far everything is working fine, I can write text, draw lines, etc.
I am having problems displaying bitmaps. I am wanting to define a bitmap in the "dat" section of a .spin file, similarly to the "ParallaxIncLOGO" and the "ChipGracey" found in the "oLED-128-G2_DEMO_v2.1b" library. I cannot figure out the format, and how to convert a .bmp file to the hex array. I started small, and was attempting just a 4x4 bitmap file, but I can't seem to get it right... the 4x4 area on the screen is all jumbled and looks like I don't have my format right. I attached a sample image that I'm trying to get to display on the screen "blocks.bmp". I tried using some converter programs, and I get this as the output of the bitmap file:
{0xff0000, 0xffffff, 0xffffff, 0xffffff, 0x00ff00, 0xffffff, 0xffffff, 0xff0000, 0x0000ff, 0xffffff, 0xffffff, 0x00ff00, 0xffffff,
0xffffff, 0xffffff, 0x0000ff};
So I manually converted it to SPIN like so:
dat TestChar '------------------------ 256 color BMP Image Data below --------------------------- byte $ff, $00, $00 byte $ff, $ff, $ff byte $ff, $ff, $ff byte $ff, $ff, $ff byte $00, $ff, $00 byte $ff, $ff, $ff byte $ff, $ff, $ff byte $ff, $00, $00 byte $00, $00, $ff byte $ff, $ff, $ff byte $ff, $ff, $ff byte $00, $ff, $00 byte $ff, $ff, $ff byte $ff, $ff, $ff byte $ff, $ff, $ff byte $00, $00, $ff
I then use this code to write to the display:
LED.image(0,0,4,4,0,@TestChar)
However, this just looks like a bunch of random pixels on the display.
Any help is greatly appreciated, thanks!
4 x 4 - 104B
Comments
Ok I gave that a shot, and I got similar effects to what I described before. I tried saving the bitmap file in various bitmap formats through photoshop (windows 16 bit, windows 24 bit, 16 bit X1 R5 G5 B5, 16 bit R5 G6 B5, 16 bit X4 R4 G4 B4, and 24 bit R8 G8 B8). I just placed the blocks.bmp file in the library format, then sent it to the propeller. Depending on the format I saved it as, it would look slightly different, but still jumbled.
Or use the BlitCom2Display method instead which can send raw data (565 formatted).
I tried this line in place of the image method:
I tried it with all of the different bitmap formats I made, and the images are still jumbled, and is different shades of blue this time. It also locked up the display... no further code executed after this line. I experienced this same thing with the display locking up when I tried getting the bmpchar method to work.
This method doesn't take a plain bitmap file. It expects w*h words (5-6-5) at the data location. IOW no header this time.
I don't have the h/w so I have to assume the driver is working as shown (source).
And gave the BlitCom2Display another shot... this time it displays a jumbled black and white image (4x4 pixels) and the screen locks up (e.g. no further commands take without turning the power off and back on).
Is there anyone out there who has successfully output their own image to this display? And if so, could you please chime in?
Can anyone identify what is going on with the data that is used for the demo? I think if I could have an understanding on how that data is organized, I could then go about making my own image using the same process...?
The oLED-128-G2 library function "image" expects a bitmap that uses indexed colors (the file contains a color pallet in it). It also expects there to be all of the hex header data present as well (even though it is not used and skipped over). To accomplish this, I created an image in adobe photoshop, converted it to indexed colors, and saved it as a 8-bit image.
What this does is it creates a file that starts with the header data(this is information such as the dimensions, and the direction that the data needs to be read in).
It then creates an index table that has an index ID, and the color value (R,G,B,A - each can range from 0 - 255).
At the bottom of the file is the actual image data, and this generally goes across and down (like how you read a book). This can be different though depending on how the header is organized... worse case scenario all this will do is result in a flipped image so you know whats going on if that's the case. This image data does not contain RGBA (0-255) color data, it just references an ID in the pallet that I mentioned earlier.
What the image function in the oLED-128-G2 library does is it jumps ahead past the header, and reads in the pallet and stores it in a temporary array. It then converts the color data from 8bit,8bit,8bit (RGB respectively), to 5bit,6bit,5bit which is what the screen can accept. It then sends this data directly to the screen.
So to get this image data into your spin project, you can either reference it in the DAT section as varName file "falename.ext", or you can copy and paste the hex directly into the file. I downloaded a hex editor, opened the file, and copied/pasted the entire hex contents over and it worked (you have to do some formatting though so that its compatible with SPIN).
If you have an image that is 24bit, you cannot directly use it the same way. This is because the data is organized starting first with a header, there is no pallet section, and the image data each contains RGB (0-255) for every single pixel. (32bit image has RGBA for each pixel).
If you want to use that instead, this is where you use the BlitComtoDisplay method.... but you have to strip out the header data first or it won't work. You will also have to convert it from 888 to 565.... but you can most likely save it in this format from the get go.
What I quickly realized is how much space these images take up. A very simple project could maybe have 1-2 full screen (128 x 128) images MAX (and you might have to choose a small pallet color count as well). Because of this, I transitioned over to attempting to get the SD card reader to work instead (I opened a new topic for this).
I am new to these displays.
Read through this thread, I describe how I did it. You need 4d systems USB plug and software in order to load an image onto a SD card and display it... you can't just drop it on there with your windows file system. (I know it sucks)
And then just make a call to this function :
Just follow this tutorial from 4D systems and then apply this code.
CON _clkmode = xtal1 + pll16x _xinfreq = 5000000 rxpin = 0 txpin = 1 reset = 2 OLEDBaud = 115200 obj LED : "OLED-128-G2_v2.1" pub mainDEMO | i LED.start(rxpin, txpin, reset, OLEDBaud) ''Starts uOLED display '--------------------------------------------------------------------------------------------- Slide 1 LED.MediaInit LED.SetByteAddress(0,0) LED.DisplayVideoFrame(0,0,0) waitcnt(clkfreq*1+cnt) repeat LED.ClearScreen LED.DisplayVideoFrame(71,77,i//5) ' display 5 images i++ waitcnt(clkfreq*1+cnt)For the code above i inserted 5 images like this.
Using the 4D IDE inside the VISI mode, just click on widget tab and add a user image
then, in the object inspector change the images
at last add all the images you want. the first column is the frame number to be used in the
LED.DisplayVideoFrame(71,77, 5)