ST7735 display and picture and pictures

Posted on
  • 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?

    the previewed

    the original image

    regards

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

    the image with the good palette

    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.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

ST7735 display and picture and pictures

Posted by Avatar for Mrbbp @Mrbbp

Actions