memory efficient approach

Posted on
  • Hi,

    I have 4 diffetent types of image data. 3 of them are in SVG format and one is in bitmap. I have converted SVG->BangleJS using this, and Bitmap->BangleJS using this

    1- Bitmap

    var img =
    require("heatshrink").decompress(atob("o­NDyBC/AH4A/AH4A/AH4A/AH4A/AGlVnltzpD/AG8­87gBLJv4Avtu9P5oBDqs8Kv4AFqtcon8sudf9oBH­Pf4ABst9Jsp/VQf5/CvhNnQP7/hJ76BZrtcP/6Dj­st8QLK1ZADtdKbQvTFrNdnh/0rjTbQaavtAD9Vnh­/dK6aB/P75hTQcp/xpp/UMKo5NtudEKJNBP+EcM7­bhhf/9E/hjfDp4xBY6tlvp9xP8aDTNOYAVPqJdXQ­P4AVtudP86DPPP7XVLMJ//QMJP/AGNVnh//AH4AB­Po9NjhJ/AHdt3o31rt8PP4A9P4M87hD/P/6B/P/6­B/P/6B/P/6B/AHp/JALZl/QP6D/MpKB7pscP/6DX­QM9dviB/Qa6BnP/JjRD57dBPr9lvp/7cqZP9Qf6D­/Qf6D/ONqD/P/6D/P/6D/P/6D/P/5hdQf5//Qf5/­/Qf5//Frdlvh//P9dVngtRpscP/5/pFaIBDtu9P/­5/lPqqxdP/59jP/5NjPrdtzp//P79Nnh9ZrtcPvZ­/lPrKZBPvp/9on8Pv5/lQK57/P9InpP/5XZrt8Pv­4ATtuda9dlvojFsudO/4AJP9YA/ACttzp//AH4AB­P/4A/AAdtzp9Bst8Iv4A/AH4A/AH4A5"));
    

    2- SVG - Int Array

    var polyImg = [
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("PQg9Czs­NOA82DzMOMA0vCi4ILwUxAjMBNgA5ATsCPQU9CA=­=")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("KxMsECs­OIQQeAxsEDxEOEw8WEhcUFh4LJhMoFCsT")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("OhwuHC4­VKBwoICkhKiI6IjwhPR88HToc")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("ATwEPQY­8GSkUJAE3ADoBPA==")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("Hx4cHRo­eGCEaIyMtGDMWNRY4GTobOSoxLC4rKw==")))},
      {fill: "#3d9ae2", points: new Uint8Array(E.toArrayBuffer(atob("")))}
    ];
    

    2- SVG Float32 array

    var polyImgF = [
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("NlB1Q­lon8kAf4XJC8VYoQWL1a0ISz09BkLhhQiAfaUFbg­VdCG09wQVCwS0LAkmZBUNJBQsrjSkFvfjtCg/AhQ­X+yOUJaJ/JAgiE8QgSfk0AfDUNCDl4JQO9JTULSf­xA/W4FXQoYf7D0sUmNCrUQ5PzQwbULyCh1AN4RzQ­vlroEA2UHVCWifyQA==")))},
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("")))}­,
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("jgQrQ­m9BlUEUSC9C1qp+QfEKK0LgRVhBBNgFQnD0hkCjI­PJBMbQ+QFCP20FAHYdAgDxvQWO4hUFbWV5B6o6bQ­eJ4b0Hf1q5B+JKNQXJIt0FzxaBBK86uQVKl80GZ3­DdBlYAWQiNKlUFfayFCtrudQY4EK0JvQZVB")))}­,
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("")))}­,
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("2IloQ­n5a3kF/sjlCflreQX+yOUIGQatBwyUgQn5a3kHEJ­SBCWjkAQp40IkIgwwVCAqooQvu5CEJDj2hC+rkIQ­mOZcUL09ARCNVB1QmXc90Evi3FCJMjlQdiJaEJ+W­t5B")))},
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("")))}­,
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("yv+HP­xp7cULMbHNA1b11QnKCxkB9gXFCnTnJQf20JUL9G­KBBNiURQq90hz+J9VxCrpSBOyXhZ0LK/4c/GntxQ­g==")))},
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("")))}­,
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("Bo/1Q­d7K8kFFp99Bak3qQZ5kzEGZ0/JB4O/DQZRZBEJVb­cxB0PYNQjWJC0IHRDNCPnC8QWhqS0LN3K5BPDVUQ­gvbskEgQWBCzsHFQZIuZ0IrhdpBnpllQuWBKEIXf­UVCD+kwQv3yOELUECxCBqsqQg==")))},
      {fill: "#3d9ae2", points: new Float32Array(E.toArrayBuffer(atob("")))}­
    ]; 
    

    3- Regular Array

    var polyImg = [
      {fill: "#3d9ae2", points: [61.328,7.567,60.72,10.521,58.99,12.988,­56.43,14.57,53.876,15.019,50.922,14.411,­48.455,12.681,46.873,10.121,46.424,7.567­,47.033,4.613,48.763,2.146,51.322,0.564,­53.876,0.115,56.83,0.724,59.297,2.454,60­.879,5.013,61.328,7.567]},
      {fill: "#3d9ae2", points: []},
      {fill: "#3d9ae2", points: [42.754,18.657,43.82,15.917,42.761,13.51­7,33.461,4.217,30.266,2.98,27.445,4.222,­14.952,16.715,13.897,19.445,14.967,21.85­5,17.697,22.91,20.096,21.851,30.456,11.4­91,37.626,18.661,40.355,19.717,42.754,18­.657]},
      {fill: "#3d9ae2", points: []},
      {fill: "#3d9ae2", points: [58.135,27.794,46.424,27.794,46.424,21.4­07,40.037,27.794,40.037,32.056,40.551,33­.441,42.166,34.182,58.14,34.182,60.4,33.­239,61.328,30.983,60.386,28.723,58.135,2­7.794]},
      {fill: "#3d9ae2", points: []},
      {fill: "#3d9ae2", points: [1.062,60.37,3.804,61.435,6.203,60.376,2­5.153,41.427,20.012,36.286,1.058,55.24,0­.004,57.97,1.062,60.37]},
      {fill: "#3d9ae2", points: []},
      {fill: "#3d9ae2", points: [30.695,30.349,27.957,29.288,25.549,30.3­53,24.492,33.087,25.553,35.491,34.884,44­.816,23.555,50.854,21.858,53.052,22.357,­56.064,24.72,57.795,27.315,57.4,42.127,4­9.372,44.228,46.237,43.016,42.667]},
      {fill: "#3d9ae2", points: []}
    
    

    My question is, what would be the best option to save RAM considering I am storing the image data in files and reading then using Storage module. I know that option 1 is not the best one but I just listed because I have it.

    I am getting the best rendering output when using Option 1 or 2

  • I'd say it depends a bit on the actual size/style of the image. Given the image you've got there, I'd basically go with Option 1.

    Since I imagine your code is saved to flash and executed from there, the data will be streamed out as required, taking up no RAM unless needed.

    IMO the SVG approach makes sense when you have a big vector image - for smaller things Bitmap will win out. Also while the SVG converter is doing a great job of extracting the actual data, how it's represented in Espruino could really be improved!

    I could imagine that something like:

    g.setColor("#3d9ae2");
    [ [61,8,...],[...],[...] ].forEach(x=>g.fillPoly.bind(g))
    

    would really help.

  • I understand it now. Just a quick question..

    How can u save a single function in flash? Write a module??? Or in bootcde bootrst file?

  • Writing a module is probably the easiest - however if you save a function to a file in Storage you can just do eval(require("Storage").read("myfunction­")) and that'll work too

  • that make sense... thanks @Gordon !!

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

memory efficient approach

Posted by Avatar for Abhigkar @Abhigkar

Actions