ST7735 display and picture and pictures

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

Hello,

i 've got a small 128x128 ST7735 display, i'm able to drawString on it. happy of that.

i'll be curious to display picture on the small screen.

how to create an arrayBuffer with a bitmap picture?
is there a tool to create and compact the picture in base64 or anything else to store the picture in the espruino?

is there a way to display with a descent framerate? more than 1 picture every 2sec....

sorry for that basic question, for sure the espruino is not designed to play video, but let me hope of that...

regards

éric

[espruino-discuss2]

Posted at 2021-01-20 by AkosLukacs

Hi, I guess http://www.espruino.com/Graphics would be a good start, there is some info at Images / Bitmaps chapter.
There is also an image converter http://www.espruino.com/Image+Converter to make converting images easier.

[gfwilliams]

Posted at 2021-01-20 by @gfwilliams

As above - there are tools for converting images (the IDE has one built in if you try to upload an image to storage).

Since the https://www.espruino.com/ST7735 driver is paletted I'd suggest setting it up with a 4 bit ('mac') palette, and then you can convert all your images to that using the image converter.

Another option is to save the image as a paletted image string, then modify the ST7736 driver to blit the image right out using the image's own palette - that'd be pretty quick but is a lot more advanced.

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

thaks @AkosLukacs,
i'm able to display colorPaletted image, but don't understand how to use palette from object image.

var img = {
  width : 128, height : 128, bpp : 8,
  buffer : require("heatshrink").decompress(atob("3143wABAaYATC4N4AAUyAC4aBG6xHRM7o4ZPg4HDAYIBDA4qAuAGz6QCCCCvFtPxPojrKAKCAJFYKBtAY77qBxYaOmR3sfMYACNBDtOB5SGJK4o3EAH4AGdZRqLPxYALbEp+sNRLxNBIQADB5QTFHAvxLUCqfD4TtJACqCECiB3+FJT9IA45sJBogACEgIVLDQr7hP1BuJAYppOAAoWQPP79OfZIHHSQoBCAAQoBD5IXG33xH4QDDAAYHHPdj9NAC6ADPwYXQH4RffAD79KBJIBQf5SQFQAz10PxzrQMAzvJQQwTMQA4A9J4T9ZPRD/MDJIDDIQPxIwQDHMSh+dAD6AHPwSACACLedDrnxfohiFaI7ZJAJQAEf56AkADr+dQBouDUxomH+J/4MxBWPOgwHJQAgRIFZqAKRSa5DPzT9eAAh5Df4iACACTgZPbIcDfpZ6QPAwuJbYLdCQQgxDGo4HDMjZ+eJBKCQPhB2CPgiAJFZ5/4fp4TGPQxwCAB42CQQQ1MF4aiDVQ4Aneqh+GPg6APMAYeBQAQ3OGIjjTPrHxIYj9PPgr1QQRiARB4T9wYR79HvB8cPwSAEf84AaORD9Kfb6CGHo6ALfdZ+UBwZ+lNQRvBQB5lVCyxAGPx58iQQzAHHREyf1y/PP1qACbII8NHoJ2jEga9JQhgXBAFhDHQBBXFAEvxfyK/CPtZsCeQJAMPtI8CP6B+BAF5IDIBbACAFL+Qfth+ENwbGLQFj/PfuCAFOYJDKK4aCmPx44DPl5qEJBSLBftHxP5w5BP1yEI3xFOf2zPEPmBuCegJGLAFD+OfuiEEZRaLBSQj9hf54SBQGj/QLAIAmP5o2Bfuz/DI5Z/ofxo2Cf+h+Df5qAlGwL/NP3CAOPw4VCAYgAYPxr/4Mgb/zGhr/EfuyAOPwj5cf6Y1DP3AABf8qVMP6BKCQHBMLM4prMfyZ/OQG5NRf7IAMPyIA1dIp/wfxwPBQAgXCA4SKlIwgHGf5cyf+RKIJAIACRgx6eEoQrDf6QfGA5D/mPgoYBAIyEXdogfFGYo7Df+B/NZ4xwDQxJaDPqIbIRxDnDJwwGDf5J9a3z+NfohIDKAaCGcYz7QeIwnDAIg7DAALHG+L/0Jw5qOMwgUOCYYADCA7rHJ4l4BoK0CfsSvHP5JUFAIghESQjnGPpQZEvAAFGIoAGI45MJQTr/TOQoZFY4SCFPxLtFPIY2HNRD3DCAgbCP8Z+NmTJIC5jhHPhPxfoq5NKIx/GJoyAmGApEBLggXDCYgDHNgT/ONIoZDAAKMBP447EWAr/EE4rSGP6y/Hf4x+KDYhGDQAhgCPxxiDD4goDEYQ5FJAjWFf8h+Hf4xeEAIJyDa4ITEA4LBGPxYDFO4gfDPwo5EBYr/NPzT/MJQSAHeIhEDPwiAMBIgREPgQfEAoR+IGYg7Cf8x8HRAjjMQArLDKwRcEDZAJIEYgBCEIq4JbIb/GXwr/YfwyCCW4iALJQYDEPwr/JKwoHFTwqiIf4aAFf9aAEdYh+IdJJqFC7YfJf4qODbAQIDfrr/LAAiAMcYxoIDZLtIDpQZGf4gPCP4wAfP5EyW4T/POhoAVD55WFA4JRDf4gRGf+RgNcpiMYKIR2FKQb/uPygAtQAwICf4x/pGwKA/PxXxK4RNDf9g6DQH5DCQwh/DMpIXCPqu+fxKvCAYIqDbbALVPxpsHJ4b+jf5IKBBoQzCf/w/DAYJXDP8b/JfwaABAISAZDJIjVfIY/DAIT9CP8r/FAoZ+gf9IGBPwaKEAAoHHPqD/KQAg0Ebaz/MBpZ+MYQZVDf8pvBP5T/GQCp0DRxp/UAQLCCZgjKDAEL/KQDgTDf5aONShA9CPwj/uAoqAEPzIThPwYABJQr/gDwZ+GABQ0ELRzXFCpYNFE5olEAARIHf9Z/Nc6QDHQBYRNQAxPHPwR/jVo4AJCwrrOAoQTDCgxlCAIT/FE44LEJ5aABP0b/UM479IAAZyFCQoLJUxgTCJxD/JSwh+nf47dIfoyAGeoj9IC4QnLKAj/KP4z/tP4ZWNcJIvDAYwVHPxz/TPzm+f6A1JKgr9GQBL7FCYqqKKAz/Kf0T/SvD3KfZIAHNwoTOAI4bCPxT/hZYR+QAAJiEao6KINhYJHPQwvFfxz/rQhp6IMxIAZE44zGJJL/DSxAAaPyAOBephSCJAKSMBYy8FDQKIHEYhGLGoT/kAIZ/MNApYIDoRKKaZZkDEoyWGfZABDP0oARQAjtHLIaAGPRYNDHYIiJAIZOCf74TQf4gAPPhZeFE4IPMCaJ+E+J6HAYj/hEIT/THIaCMfIwLGAwojDPx5MNP8KCDVo45NNBJiOBZIbOAIb9HAIpiHXgr/VfygABGwqCVKgx0FC5hMJBIj/gEAT7FQqAZCPyQAPD5ItEfwxPGf5IAbfyo6BQCKMPD44DFJQXxYJoBBf8D+Cf44HDf5iAjRhpCIJ4r/FTAZ8YAQT/XDoiCEdpYPHBZL9GPxaCFAYT/TCZz9VP4gqDeZyEJDJoPEPxr/HADizHPyB/FVYh8WQBINGIJ5TCf6Z+MMQJ6EVop/NKQYjFc5QAVFYg/LJ4r/FIooAWPw4ARDwoBCIQZ8eJIr9QAYL/TCZgiCVY7/PXJL9hPyb/Hfzx4FAY5/LLAitFQDwlBPyr/SCJg2CAYb/JIxR+EbIZ/gI4Z/OKI79e3z+DACz/FLgaAcEIh/QZQz/SJ4wIFHAj3FA4o2FA4h+FboYAEfrYBDf+I0E3ytLf6hgGQC7DCZAj9QaAj/TPxB/CHAYBJHA5+IMQyCCAAT9bYw7KJf76zEAQJuFXp4RCeIYBIF4qSGRBIVCforJCIKIEEeiIDEBgo8CVZCEHBYxsHNA48GCZR+HZQx6Nf8hmDHBJCMdpYBEXpAACCJD9IfyLUGf56BMcob/VGwjpKQwzCQJRJ+Uf7I6DPwY4KIZZaFf4h6GPhQbDe4wLHP57OHMIR3RCYwbBBAT5JV4oLEPhYAJQhr/LA4L9UA4b/XPwiACHBx+GQCJ8EPxj9HBIhFRAIz/PWgoDEIAgoHGQoFEPg7/PQyrKFPir/aPQYADf6AABEQ6AEQg54GPxjbHIqTKFAgb5TAoZ7CQQgqJWIoaCMwwAVQRpYGPyJXHf7QBCfiKvELwaAQf5SAOf6h+FZwZ1MAZD7EfIoqGA4b9FNgYAZD4pPEA4x/EQhJLFAIr/YfSL9JAJB4Pf6xISA47/LfpanHWJYABftL/LP6JPHf7AwTfwbjMPiYBKPwbNEcgL/UKYj/LAAoRDGB5BBIYYDBfDaEKRBh+CQBj7ECIQBFf6w="))
};

function draw() {
  digitalPulse(LED2, true, 20);
  g.clear();
  g.drawImage(img,0,0);
  g.flip();
}
var g;
function onInit() {
  A5.set(); // Backlight On
  var colorPalette = new Uint16Array([0, 0xFFF]);
  // 2 couleurs pour la palette
  // init spa
  var spi = new SPI();
  spi.setup({mosi:B15 /* sda */, sck:B13 /* scl */});
  g =require("ST7735").connect({
    palette:colorPalette,
    spi:spi,
    dc:A7,
    cs:B10,
    rst:B1,
    // height : 160 // optional, default=128
    }, draw
  );
}

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

Hello,

i'm graphic designer and a 4bit mac paletted image is not optimised for displaying grayscale image as this palette contain only 4 grayscale levels... sad...

i've tried to optimized with a generic 2bit-grayscale palette with photoshop([#000000,#676767,#b6b6b6,#ffffff]) from https://lospec.com/palette-list/2-bit-grayscale

if i use your tool the palette does not match and the tool rebuild the paletted image and loose 1 color pix even in flat mode.

how can i manage to encode the image as is?

regards

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

well i build a MAC16 palette in photoshop as your script does (the online tool)
now i can export the image "as is".

Now on my screen, the color does not match.
what is suppose to be a gray #bbb is purple and the gray #444 is green...
no matter i change the palette reference by reorganize (in photoshop) the place of each color as in your coded palette...

oh and i use your palette as the ref palette.
what's wrong?

var img = {
  width : 128, height : 128, bpp : 4,
  buffer : require("heatshrink").decompress(atob("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"))
};

function draw() {
  digitalPulse(LED2, true, 20);
  g.clear();
  g.drawImage(img,0,0);
  g.flip();
}
var g;
function onInit() {
  A5.set(); // Backlight On
  var colorPalette = new Uint16Array([
  0x000000, 0x444444, 0x888888, 0xBBBBBB,
  0x996633, 0x663300, 0x006600, 0x00aa00,
  0x0099ff, 0x0000cc, 0x330099, 0xff0099,
  0xdd0000, 0xff6600, 0xffff00, 0xffffff]);
  // 2 couleurs pour la palette
  // init spa
  var spi = new SPI();
  spi.setup({mosi:B15 /* sda */, sck:B13 /* scl */});
  g =require("ST7735").connect({
    palette:colorPalette,
    spi:spi,
    dc:A7,
    cs:B10,
    rst:B1,
    // height : 160 // optional, default=128
    }, draw
  );
}

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

it seems there is a rgb to bgr inversion...

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

well i do not understand wich format can be used to directly loadImage from storage as in exemple!
is it a bmp file in 1bit? or a what?
how to put img file in the storage area of the espruino?
am i wrong, it only works with a sd card module?

i have to admit, i'm a beat confuse. sorry

g.drawImage(require("Storage").read("myimage.img"), 10, 10);

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

if i use a 2 colors palette on the display

#0000FF = yellow
#00ff00 = blue
#ff0000 = black (no color)
#ffffff = white

what's wrong with the color? any advices

regards

[espruino-discuss2]

Posted at 2021-01-20 by Mrbbp

ok i've found the palette issue...
the display is RGB16bits not RGB24bits, so the MAC16 Palette look like this with 16bits values:

var colorPalette = new Uint16Array([
  0x0, 0x4228, 0x8c51, 0xBDD7,
  0x9b26, 0x6180, 0x320, 0x540,
  0x04DF, 0x19, 0x3013, 0xf813,
  0xd800, 0xfb20, 0xffE0, 0xffff]);

[gfwilliams]

Posted at 2021-01-21 by @gfwilliams

Great - glad you got it sorted!

You may also find that 'optimal 4 bit palette' will work well for you, but then the palette will change for each image.

For your use case, are you thinking that having a '4 bit greyscale' option would be better for you?

[espruino-discuss2]

Posted at 2021-01-23 by Mrbbp

Hello @gordon, sorry for late answer, have to test more to give feedback.

The optimal 4bits palette does not works.... the display seems to use only the 16MAC Palette even if i iniate with the palette generated by online converter tools.
I've tried with 2 differents (cheap) displays a 128x128 1.44", and a 1.8" 128x160 from ebay.
the palette does not works in 4 bits mode.
and as the screen is initialize with 4 bit palette, the 16bits pictures are wrong color... (even if i modify the cmd(0x36,0xC8), to cmd(0x36,0xC0); (the RGB to BGR bit in the datasheet)
i don't find a way to initialize the display in 16bits.
if we remove the palette option, it produces an error.

regards.

any help would help.

é.

[gfwilliams]

Posted at 2021-01-25 by @gfwilliams

Maybe you could try just setting up the display without images and trying out some colours to make sure it's working right. Looking at what you said above:

0000FF = yellow
00ff00 = blue
ff0000 = black (no color)
ffffff = white

My guess is the screen's colour format is 16 bit BGR565 (BBBBBGGGGGGRRRRR). However it could be that the byte order is wrong, which would explain a lot. In that case it'd be something like GGGBBBBBRRRRRGGG which would be super confusing.