ProgressBar in the display

jherlab

First of all, thank you very much for your awesome project. Sorry for not writing in German, I’m Spanish. I’m close to finish the device but I’m doing some tests with node-red. My feature request is to have a progressbar screen.

The blue area could be the icon, the white area is a marquee text box or one second refreshed text box of 6px height. And the progressbar is the green line. 20px, 5% per pixel. Perhaps some letters will be printed badly. This screen should be usefull por countdowns, octoprint and other processes.

Thank you very much.

Shojo

Hi jherlab,
no problem writing in English, I don’t speak Spanish either ;)

How do you control the PixelIt?
Via Node-Red or directly via the API?

Greetings
Dennis

jherlab

Hi
I control PixelIt via NodeRed. I though to draw big images 8×32 with that progress bar but I think It is very expensive to update the device sending requests with a new image each second. I’m not sure. Or program in node red a flow that generates those big images with text icon and progress bar. An algorithm with the RGB888ToRGB565 fuction.

Kind regards
Juan

Shojo

The PixelIt can already draw bars, but I have not yet created the function as a node-red module.

So it would be possible to display a progress.
I will try to find the days to create the module.

https://wiki.dietru.de/books/pixel-it/page/apiscreen
That would be the part from the API :

// [Optional]
    "bar": {
        "position": {
            "x": 0,
            "y": 0,
            "x2": 0,
            "y2": 0
        },
        "color": {
            "r": 255, // [0 - 255]
            "g": 255, // [0 - 255]
            "b": 255 // [0 - 255]   
        }
    },

jherlab

Shojo Thank you. 🙂

Sorry I haven’t inspect the complete API. I knew that I can send JSON bodies but I used the PixelIt library blocks for Node Red

Thanks a lot.

Have a good weekend.

Shojo

jherlab Sorry I haven’t inspect the complete API

This is not a problem, and was not meant as an accusation ;)
I had only mentioned it for completeness.

I wish you a nice weekend too!

jherlab

I created the following subFlow in node-red that takes a percentage and calculate a bottom progress bar. I see node-red library code blocks and a multi bar block will be a little bit complex. Perhaps this subflow could be used by other people.

[{"id":"23699a20.dfc566","type":"subflow","name":"ProgressBar","info":"","category":"","in":[{"x":40,"y":80,"wires":[{"id":"580af7d4.a01908"}]}],"out":[{"x":580,"y":80,"wires":[{"id":"7e1026ad.440488","port":0}]}],"env":[{"name":"Color1R","type":"str","value":"255"},{"name":"Color1G","type":"str","value":"255"},{"name":"Color1B","type":"str","value":"255"},{"name":"Color2R","type":"str","value":"0"},{"name":"Color2G","type":"str","value":"128"},{"name":"Color2B","type":"str","value":"255"}],"color":"#DDAA99"},{"id":"7e1026ad.440488","type":"function","z":"23699a20.dfc566","name":"ProgressBar","func":"\nif (msg.percentage > 100) {\n    msg.percentage = 100;\n}\nif (msg.percentage < 0) {\n    msg.percentage = 0;\n}\nvar parts = Math.round(msg.percentage/4.5454);\n\nif (parts === 0) {\n    msg.bars = JSON.stringify([\n        {\n              \"position\": {\n                \"x\": 9,\n                \"y\": 7,\n                \"x2\": 30,\n                \"y2\": 7\n              },\n              \"color\": msg.barColors.emptyColor\n            }\n        ]);\n} else if (parts === 22) {\n    msg.bars = JSON.stringify([\n        {\n              \"position\": {\n                \"x\": 9,\n                \"y\": 7,\n                \"x2\": 30,\n                \"y2\": 7\n              },\n              \"color\": msg.barColors.fillColor\n            }\n        ]);\n} else {\n    msg.bars = JSON.stringify([\n    {\n      \"position\": {\n        \"x\": 9,\n        \"y\": 7,\n        \"x2\": 8 + parts,\n        \"y2\": 7\n      },\n      \"color\": msg.barColors.fillColor\n    },\n    {\n      \"position\": {\n        \"x\": 9 + parts,\n        \"y\": 7,\n        \"x2\": 30,\n        \"y2\": 7\n      },\n      \"color\": msg.barColors.emptyColor\n    }\n  ]);\n    \n}\n\nreturn msg;\n","outputs":1,"noerr":0,"x":430,"y":80,"wires":[[]]},{"id":"580af7d4.a01908","type":"function","z":"23699a20.dfc566","name":"generateColors","func":"msg.barColors = {\n    emptyColor : {\n        r: env.get(\"Color1R\"),\n        g: env.get(\"Color1G\"),\n        b: env.get(\"Color1B\")\n    },\n    fillColor: {\n        r: env.get(\"Color2R\"),\n        g: env.get(\"Color2G\"),\n        b: env.get(\"Color2B\")\n    }\n};\nreturn msg;","outputs":1,"noerr":0,"x":200,"y":80,"wires":[["7e1026ad.440488"]]}]

Thank you very much.