ST7735 display and picture and pictures

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

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.

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.

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("3­143wABAaYATC4N4AAUyAC4aBG6xHRM7o4ZPg4HDA­YIBDA4qAuAGz6QCCCCvFtPxPojrKAKCAJFYKBtAY­77qBxYaOmR3sfMYACNBDtOB5SGJK4o3EAH4AGdZR­qLPxYALbEp+sNRLxNBIQADB5QTFHAvxLUCqfD4Tt­JACqCECiB3+FJT9IA45sJBogACEgIVLDQr7hP1Bu­JAYppOAAoWQPP79OfZIHHSQoBCAAQoBD5IXG33xH­4QDDAAYHHPdj9NAC6ADPwYXQH4RffAD79KBJIBQf­5SQFQAz10PxzrQMAzvJQQwTMQA4A9J4T9ZPRD/MD­JIDDIQPxIwQDHMSh+dAD6AHPwSACACLedDrnxfoh­iFaI7ZJAJQAEf56AkADr+dQBouDUxomH+J/4MxBW­POgwHJQAgRIFZqAKRSa5DPzT9eAAh5Df4iACACTg­ZPbIcDfpZ6QPAwuJbYLdCQQgxDGo4HDMjZ+eJBKC­QPhB2CPgiAJFZ5/4fp4TGPQxwCAB42CQQQ1MF4ai­DVQ4Aneqh+GPg6APMAYeBQAQ3OGIjjTPrHxIYj9P­Pgr1QQRiARB4T9wYR79HvB8cPwSAEf84AaORD9Kf­b6CGHo6ALfdZ+UBwZ+lNQRvBQB5lVCyxAGPx58iQ­QzAHHREyf1y/PP1qACbII8NHoJ2jEga9JQhgXBAF­hDHQBBXFAEvxfyK/CPtZsCeQJAMPtI8CP6B+BAF5­IDIBbACAFL+Qfth+ENwbGLQFj/PfuCAFOYJDKK4a­CmPx44DPl5qEJBSLBftHxP5w5BP1yEI3xFOf2zPE­PmBuCegJGLAFD+OfuiEEZRaLBSQj9hf54SBQGj/Q­LAIAmP5o2Bfuz/DI5Z/ofxo2Cf+h+Df5qAlGwL/N­P3CAOPw4VCAYgAYPxr/4Mgb/zGhr/EfuyAOPwj5c­f6Y1DP3AABf8qVMP6BKCQHBMLM4prMfyZ/OQG5NR­f7IAMPyIA1dIp/wfxwPBQAgXCA4SKlIwgHGf5cyf­+RKIJAIACRgx6eEoQrDf6QfGA5D/mPgoYBAIyEXd­ogfFGYo7Df+B/NZ4xwDQxJaDPqIbIRxDnDJwwGDf­5J9a3z+NfohIDKAaCGcYz7QeIwnDAIg7DAALHG+L­/0Jw5qOMwgUOCYYADCA7rHJ4l4BoK0CfsSvHP5JU­FAIghESQjnGPpQZEvAAFGIoAGI45MJQTr/TOQoZF­Y4SCFPxLtFPIY2HNRD3DCAgbCP8Z+NmTJIC5jhHP­hPxfoq5NKIx/GJoyAmGApEBLggXDCYgDHNgT/ONI­oZDAAKMBP447EWAr/EE4rSGP6y/Hf4x+KDYhGDQA­hgCPxxiDD4goDEYQ5FJAjWFf8h+Hf4xeEAIJyDa4­ITEA4LBGPxYDFO4gfDPwo5EBYr/NPzT/MJQSAHeI­hEDPwiAMBIgREPgQfEAoR+IGYg7Cf8x8HRAjjMQA­rLDKwRcEDZAJIEYgBCEIq4JbIb/GXwr/YfwyCCW4­iALJQYDEPwr/JKwoHFTwqiIf4aAFf9aAEdYh+IdJ­JqFC7YfJf4qODbAQIDfrr/LAAiAMcYxoIDZLtIDp­QZGf4gPCP4wAfP5EyW4T/POhoAVD55WFA4JRDf4g­RGf+RgNcpiMYKIR2FKQb/uPygAtQAwICf4x/pGwK­A/PxXxK4RNDf9g6DQH5DCQwh/DMpIXCPqu+fxKvC­AYIqDbbALVPxpsHJ4b+jf5IKBBoQzCf/w/DAYJXD­P8b/JfwaABAISAZDJIjVfIY/DAIT9CP8r/FAoZ+g­f9IGBPwaKEAAoHHPqD/KQAg0Ebaz/MBpZ+MYQZVD­f8pvBP5T/GQCp0DRxp/UAQLCCZgjKDAEL/KQDgTD­f5aONShA9CPwj/uAoqAEPzIThPwYABJQr/gDwZ+G­ABQ0ELRzXFCpYNFE5olEAARIHf9Z/Nc6QDHQBYRN­QAxPHPwR/jVo4AJCwrrOAoQTDCgxlCAIT/FE44LE­J5aABP0b/UM479IAAZyFCQoLJUxgTCJxD/JSwh+n­f47dIfoyAGeoj9IC4QnLKAj/KP4z/tP4ZWNcJIvD­AYwVHPxz/TPzm+f6A1JKgr9GQBL7FCYqqKKAz/Kf­0T/SvD3KfZIAHNwoTOAI4bCPxT/hZYR+QAAJiEao­6KINhYJHPQwvFfxz/rQhp6IMxIAZE44zGJJL/DSx­AAaPyAOBephSCJAKSMBYy8FDQKIHEYhGLGoT/kAI­Z/MNApYIDoRKKaZZkDEoyWGfZABDP0oARQAjtHLI­aAGPRYNDHYIiJAIZOCf74TQf4gAPPhZeFE4IPMCa­J+E+J6HAYj/hEIT/THIaCMfIwLGAwojDPx5MNP8K­CDVo45NNBJiOBZIbOAIb9HAIpiHXgr/VfygABGwq­CVKgx0FC5hMJBIj/gEAT7FQqAZCPyQAPD5ItEfwx­PGf5IAbfyo6BQCKMPD44DFJQXxYJoBBf8D+Cf44H­Df5iAjRhpCIJ4r/FTAZ8YAQT/XDoiCEdpYPHBZL9­GPxaCFAYT/TCZz9VP4gqDeZyEJDJoPEPxr/HADiz­HPyB/FVYh8WQBINGIJ5TCf6Z+MMQJ6EVop/NKQYj­Fc5QAVFYg/LJ4r/FIooAWPw4ARDwoBCIQZ8eJIr9­QAYL/TCZgiCVY7/PXJL9hPyb/Hfzx4FAY5/LLAit­FQDwlBPyr/SCJg2CAYb/JIxR+EbIZ/gI4Z/OKI79­e3z+DACz/FLgaAcEIh/QZQz/SJ4wIFHAj3FA4o2F­A4h+FboYAEfrYBDf+I0E3ytLf6hgGQC7DCZAj9Qa­Aj/TPxB/CHAYBJHA5+IMQyCCAAT9bYw7KJf76zEA­QJuFXp4RCeIYBIF4qSGRBIVCforJCIKIEEeiIDEB­go8CVZCEHBYxsHNA48GCZR+HZQx6Nf8hmDHBJCMd­pYBEXpAACCJD9IfyLUGf56BMcob/VGwjpKQwzCQJ­RJ+Uf7I6DPwY4KIZZaFf4h6GPhQbDe4wLHP57OHM­IR3RCYwbBBAT5JV4oLEPhYAJQhr/LA4L9UA4b/XP­wiACHBx+GQCJ8EPxj9HBIhFRAIz/PWgoDEIAgoHG­QoFEPg7/PQyrKFPir/aPQYADf6AABEQ6AEQg54GP­xjbHIqTKFAgb5TAoZ7CQQgqJWIoaCMwwAVQRpYGP­yJXHf7QBCfiKvELwaAQf5SAOf6h+FZwZ1MAZD7Ef­IoqGA4b9FNgYAZD4pPEA4x/EQhJLFAIr/YfSL9JA­JB4Pf6xISA47/LfpanHWJYABftL/LP6JPHf7AwTf­wbjMPiYBKPwbNEcgL/UKYj/LAAoRDGB5BBIYYDBf­DaEKRBh+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
  );
}

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,#ffff­ff]) from https://lospec.com/palette-list/2-bit-gr­ayscale

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

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("m­UzAJIAJmUykMRiAAEiIHDiMiDZQjIGZwAMkURgI5­BABEBgMTFC4AVmJ3EHYgJEU4MSFCqAUn8yOgiAKQ­Ic/DIbFWIxp9BOgL1DAYUARAoJDkY7UPiICBPRQJ­EAgQCBgMCfUpSBkEAHYr/FAAMhQA0Tf8J8BAIMyf­BsRiUSfoQJDgLBBf65+MO4hyCOgYACP4aAFiT/jP­xZyBBgR/CBIgACl7/ikD5HPop/DQAYAEQB4ASfpy­ACP4MiA4KCGf4IBBAAIDDYZJ+Pdoj/LQAILFgCAR­f6JpCQJgNCP4QHEQIZ6LACcwMgRzEAAgLGkQEDBY­kAkaAeNAiADiR8GBIR/FPwkBgSABAIZAXmJ+GAJC­KEkMhPgocBAIJ+cn8hPgb/EAggADPwMSkb9GgCAC­ib+cM4hsFPQqEDkMiP4QKCQAQVBiPzQDUyPwroDA­AJ6CQA0jkSKFQAcRl7/DAIIAUfwoECA4gzEfYIAB­P4KADDIaACYBj/OfwJ8HQwZ6DkUikYACmaAECYSA­CiT9ZmT5GMoR+FPIMyAA0hf4aADCwL/ZfwJ+IBIR­8CPAIAHkUSP4iACiMvBwT/JIBcwO4Z+DA4QuBPYJ­ZKQAQZCDQbAMPxk/fwR7GfQR7BMgM/AAaAGP4QAD­H5r+RPwQBCFgIRE+YBEDgshPogDCkI/Yfw4FBPoJ­6EAA7vETo0AiUvH60xLwh+EkR+HAAJcHQAQfFgLZ­Bf6r+IgMTfIqANkciHQL/DDoS9UmcgPwoABgJWDP­ggAFEA0iEAIhEiS/WG4L+FgB+K/6AKmciEIKADiQ­NDB4aAOLorgCPx6AFmUykKACAAURkbAVbop+DAAL­/OQAR/DkQfEgI/VmJ/FfoqACABaAGmSgFiQ/Vfgh­eBgZ+HfYIBDf5UjkchUQg/Bf6bcBPwkAkR/Ff5iA­EPwMikJ/EiJ+Tn64BLYbdCbwJeCQA5+KQAUiiIgB­X4UvH6TbBbgsRPx7/LkIjEiJhBACT7DAQUTPxCAF­QQqAFP4gBBgUvfqJbBfYYACfw6ALEZB/FcQK/TPw­YbDDgSAMAAqAEP4SiDgQ/TmD9EDwJ/Hf7QjBHyM/­mJYCbYZ/CfpiAMf4aBCkQNDB4YAKkB/FiL/UQA5/­FgB/SmZZBLQQABiT/Efp6AEf4oADiY/SP5B8Ff5y­AEP4MikIkEiR/XAYJ/DORCAPP4MiUgr/RmTZFf4x­wDQQx6Ef4x+BkImEgJ/UDIh/BLAZ1Kf5sSH4kCHy­J/GgMhf4QDDQRIHEPgYVBQAR/XmT+DLIUiP4MiiM­SiQGBPZw9BiQWBf4UREoiMDf5sxfwp/CkMRAIIAD­QgZcHCIMQB4IZCAYMgP75nBQIYABgJuBMQJ5CAIU­yPQIABiYJCDgJ/DFAL/SP4xhBfghwBdAJxBJAJ9H­SQMimQHBf4Z/CiUgP6UxP4kBPgIABbYqHBRAT6EG­oMSO4IVDTARABEgMTkJ/QLQLXELYRnBAAYmBOASJ­EHwYMBQAT7CBII/EiUQP6UhPwKACgMTP4UjcgL8B­AAJ0EPwR0CBgKdCTYIPBAII/BDYMBf6MyP4URH4R­kDNQMQgABCOASAEQ4IABBwQCCCAQMBBQZ/UKoJAB­gJ+EBIUSAIIABNoL/DB4MSXgURiY1BCASbED4KWD­ABp/CgJYBE4L7DgEjkERkEjeQJ/D+YQBA4MSkAaB­icxUAKcDP4LCCP6JdBAAcCeILuBPQMvOAMRl8yBY­L/CNIL1Cl8xB4YXBCIQdCf6jfCbAURmQKCOAQvBi­R4BPoINB+YGDB4I7BiIFBAwQRBP4KXBf6ZUBAAID­BMIQACW4KxBdIIABPYJ+B/6ECAQJ2BAIL8CBIQZB­iTDBgIZCP55+BP4ZiCQIoABRQb/ECIb5CAIQZDPw­MikB/RmT9DUgJ/FOQYAGf4QQHPwZ/EkcQf6MxP4Y­/CdgJ/EAAYIDP4QEDCIoaEkKABVYJ/TgABBLQJ/D­OQJzFAwgEFB4oHEP4JiBiEDCY5/Pf4oALP4pmIP4­MiEQMQiT/VgT/FQAQAFf5APJf4UjmUAib/RPwUQi­LbBf4h0CAIQABBQh+BQAYRDP4wrCP6b/BP4L/BkS­ABPxZ/NBYR/BAQMhgJ/EDIg+HP4b/CiDdBQBJ4Gf­4p+EBYL9CkUgiDlDABpTBAAT+BAIIaCP7AJCT4Uj­MwL/XiLdBP4h+FNwR/EQwgABP4khkYOBiB/SmJ/D­QAR/DNxR/FfxYfBmQmBH5xgBK4L/DgB/BiLfBQA5­4CP4oSEPwoLBUIL+Bf68BiUiP4KAIA4QLBA4YSCR­w4KBkMSgB/Bf6MgP4kBkJeBP4iWHOgqHDCIp/BmI­pBP64+BQAJ/EPwqJHQoQTDAIR/DmUQEoL/ViCBEk­SAHNYR3C+b/CQBASCfoIkCH57/HDQUCkR2EfYgBC­RA4THfwKkCUoI/RaoZ/DgBhBQAh8DNoQoCTQMhBY­Z+ECIJ+DiB/WLQK/EDgoFDiQABeoMyiJuDCgkjDY­MgU4Z/Pf4RXCP5B6FC4UxiMRBYMhAYSOCCgYFCEg­h/XAAR/BMgQACQosiQAICBBQoUEBQI/BFAQ/RmUx­PwRbEP4ZrBPwj7EfgJ+CBISADDIQjDf4J+QP4URQ­IsTNAZ+Gn6BCBYIhGCwp+Df6IABkMQfwsAVwJmBN­IQCBDQ4hHSgcikJ+DX6R/FLgIdBgRnDNgJ4BQAgA­DPo4DDkR/Fl7/QkB/HgJ6COYUycgJuCIgT1DkKdB­eQSCDmJ+CAAL/bgJ9ECATJBABIdBiaEFCoJ/ETAJ­9NP4iAGNwJ/EmcgMoMimJ6BewYdBGIJ/DBQMgf4c­AP6JYBK4aAEiaACKgkRj5lBAIQACmRwFf4R+EP4T­+PNoRWBQAsBP4gTCO4Mj+YAEmSEBCAgRBfwT/DH6­AABfoL/EQAUBf4Z5DkciOwQAB+YHBO4IPEfwwoBP­6MyKoT/GgDyCQAyCCfgQPBAAJ+FkQiCE4URf44mB­FAjZCmR+EQAhdBQAYVEAwR8CAYgOEkSdCP6ZFBmJ­+DAIYACiJ/GQAScGfwyJBfwsRf6MhKoKAGP4SABP­ITvBAAJ3HRw5eBEQYpBH4IdDP5cgfwh+Ef4LwCQA­ZwCfwYDDdIZ+FP5j/ImZ8BPw5/CkSACC4x7CPxI/­BD4L/Eia+PmJWDf48SkMROQLxGAAZkFBAQdDE4T/­MDYk/mJWEQAgCBP4T4Bkc/AAJiMPwj+EAIJ/BDZr­+CQAz/EkSAHABUyCIIdFf6kRf5kjQAZiBQAQDCAo­giCKgIbDQAh/Cfx0RQAIAFMIZpBQAZABmfzDQXzA­AJqFkJ+If5SAGN4KACbIaADP4SAIAA4iEDQSADFQ­J/PmUgiR+KP4TsBQAMhDYp+IiIcFf5R8DPwkjCAL­YEAAZkCPQKADQoKABQQ5+DMQL9FQAQLBPxsyNgLX­EQAZlCP4SACkMiP4oiFEIL/WPwcyiUhfoz/HOARx­BQAgBEPwcSPwb/FP5psBkEikB4CfwgCCiJ/DQAaB­BLwj8EBoT+Ff5D9FEIRmBGIJTBPwSAEPwT/CCgRF­BQISICAAQeBCYMSiL+HE4MCP5w/BfpACBDwJ+DAA­R+BAIKKGPwacFf5iAGfwMjPQaDCAAbcBOo4AHfYQ­FCP5AnBiMTfxsSQIL/ELob+BP4YWDGYR2CAAoJCE­IR+Df5oACfwcyLAp/NQBQDDPwYDDEoIBBP5ZEBH4­MxKwj/DPwL0CPwRaEQQiEDA4Z8CAAb/OVQUyiYcB­Pw8RgRrCPw0zQ4MjQRD+Mf5sxDgMgPoh+FNgLZDQ­BKCDAYT8CD4b/GEAT9FP4TbCP4j8EFQT+HQASCDQ­gYCCToSBFPoICBP5hcDLAwZBN4Z9DQA6DIP4SBDf­4kQf5h+BfIZ+GOAgaCn5fIPwYDCLYJ/WmJ8CLYoB­BdIZSDQBh/UEYZ+EmS0CLIIABLQcCPwb1CABILDP­gJ/CkIeCEYIlDPwSnBERRUEK4kAfoRRDDRALDQAY­BBkJ/CQIr/OAILUELATXCiT6EAAj/BAIKCGAAciD­oQAFBAcRgR/KA=="))
};

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
  );
}

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

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("myi­mage.img"), 10, 10);

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

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]);

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?

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.

é.

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.