[GH-ISSUE #400] Feature request: external editor or better graphic commands #1344

New Issue

sascha_hemi · 2026-03-20T19:07:16+01:00

sascha_hemi commented

2026-03-20 19:07:16 +01:00

Originally created by @gitpower2017 on GitHub (Nov 19, 2024).
Original GitHub issue: https://github.com/OpenEPaperLink/OpenEPaperLink/issues/400

Is your feature request related to a problem? Please describe.
An external display editor for JSON displays.
It is currently very time-consuming to design a display. Especially more complex shapes like a tank / cistern that displays the current fill level. It is very time-consuming to design using JSON and requires a lot of updates from the display until the result is correct.

Describe the solution you'd like
I can imagine two solutions.
1.) A better graphics command set that not only creates a coloured box, but e.g. a box with border and filling in different colours.
2.) An external editor that creates a JSON export. So that it can be used e.g. Node-Red / JavaScript directly. Including placeholders for the variables.

Additional context
Add any other context or screenshots about the feature request here.
Here are a few pictures of my results with JSON

Originally created by @gitpower2017 on GitHub (Nov 19, 2024). Original GitHub issue: https://github.com/OpenEPaperLink/OpenEPaperLink/issues/400 Is your feature request related to a problem? Please describe. An external display editor for JSON displays. It is currently very time-consuming to design a display. Especially more complex shapes like a tank / cistern that displays the current fill level. It is very time-consuming to design using JSON and requires a lot of updates from the display until the result is correct. Describe the solution you'd like I can imagine two solutions. 1.) A better graphics command set that not only creates a coloured box, but e.g. a box with border and filling in different colours. 2.) An external editor that creates a JSON export. So that it can be used e.g. Node-Red / JavaScript directly. Including placeholders for the variables. Additional context Add any other context or screenshots about the feature request here. Here are a few pictures of my results with JSON ![IMG_20241119_113225_1_1](https://github.com/user-attachments/assets/bf361549-e58c-4723-81ce-17df100e7e1b) ![IMG_20240911_083157](https://github.com/user-attachments/assets/a5894203-08f1-4145-960c-208cc5ffd7eb) ![IMG_20240925_072917](https://github.com/user-attachments/assets/aaeed949-fdfb-4bc5-a46a-76950b7eeb6e) ![IMG_20241107_122636_1](https://github.com/user-attachments/assets/a99c429f-6fb4-43f0-8018-45221aec380d)

sascha_hemi added the enhancement label 2026-03-20 19:07:16 +01:00

sascha_hemi closed this issue

2026-03-20 19:07:16 +01:00

sascha_hemi commented

2026-03-20 19:07:17 +01:00

@nlimper commented on GitHub (Nov 19, 2024):

For more complex graphs/images, IMHO it's better to draw them in any way that fits you better, and upload it as a jpeg to your tag. There is an example in python on the wiki (https://github.com/OpenEPaperLink/OpenEPaperLink/wiki/Image-upload), but it's even possible to draw such images within javascript: when asked ChatGPT for an example in javascript, it comes up with a good starting point (you just have to ask it to use the right upload method). Question to ChatGPT: "using javascript and canvas, draw a charge indicator (battery symbol) with a custom fill level. Upload the canvas as a jpeg using a POST request to a server".

Does this suit your needs? Of course, in theory it's possible to expand the json commands, but there are already more suitable/flexible languages for drawing.

@nlimper commented on GitHub (Nov 19, 2024): For more complex graphs/images, IMHO it's better to draw them in any way that fits you better, and upload it as a jpeg to your tag. There is an example in python on the wiki (https://github.com/OpenEPaperLink/OpenEPaperLink/wiki/Image-upload), but it's even possible to draw such images within javascript: when asked ChatGPT for an example in javascript, it comes up with a good starting point (you just have to ask it to use the right upload method). Question to ChatGPT: "using javascript and canvas, draw a charge indicator (battery symbol) with a custom fill level. Upload the canvas as a jpeg using a POST request to a server". Does this suit your needs? Of course, in theory it's possible to expand the json commands, but there are already more suitable/flexible languages for drawing.

sascha_hemi commented

2026-03-20 19:07:17 +01:00

@gitpower2017 commented on GitHub (Nov 27, 2024):

Unfortunately, taking a screenshot and then sending a graphic is not the right way for me.
It would be much nicer if the json commands were enhanced with a few more commands.

I would be very happy about an implementation.

@gitpower2017 commented on GitHub (Nov 27, 2024): Unfortunately, taking a screenshot and then sending a graphic is not the right way for me. It would be much nicer if the json commands were enhanced with a few more commands. I would be very happy about an implementation.

sascha_hemi commented

2026-03-20 19:07:17 +01:00

@nlimper commented on GitHub (Dec 10, 2024):

I added placing of an image (in 30812dff49)

Image
{ "image": [filename, x, y] }
Places a JPG image (RGB, so no grayscale (can be tricky in some graphic software), baseline (non progressive)), located on the flash partition. The image cannot be scaled, so upload it the right size. It can be any size smaller than the tag, for example an icon. { "image": ["/testicon.jpg", 200, 50] }
Tip: use an image with fixed design elements for the background, and fill in any other data using the json commands.

Let me know if you are missing other drawing related stuff in the json commands

@nlimper commented on GitHub (Dec 10, 2024): I added placing of an image (in https://github.com/OpenEPaperLink/OpenEPaperLink/commit/30812dff49621fc0a39c7fba8fffef922bbe345b) Image `{ "image": [filename, x, y] }` Places a JPG image (RGB, so no grayscale (can be tricky in some graphic software), baseline (non progressive)), located on the flash partition. The image cannot be scaled, so upload it the right size. It can be any size smaller than the tag, for example an icon. { "image": ["/testicon.jpg", 200, 50] } Tip: use an image with fixed design elements for the background, and fill in any other data using the json commands. Let me know if you are missing other drawing related stuff in the json commands

sascha_hemi commented

2026-03-20 19:07:17 +01:00

@gitpower2017 commented on GitHub (Dec 11, 2024):

I will test the new function. The approach is interesting, it can reduce the JSON statements.

Interesting is a function that only draws the frame of a BOX. The thickness of the line should be freely selectable.
Idee:
{ "boxline": [x, y, width, height, line width, color frame,color fill ] }

I currently create the box like this:
boxline = {"box": [' + xpt + ',' + ypt + ',' + wpt + ',' + hpt + ',1]}' + "," + '{"box": [' + (xpt + 2) + ',' + (ypt + 2) + ',' + (wpt - 4) + ',' + (hpt - 4) + ',' + cpty + ']}'

Since the “width and height” always causes problems for dynamic elements (box too large and outside the ePaper), I would prefer the box function with absolute values.

z.B.
{ "box1": [x-start, y-start, x-end, y-end, color] }
{ "boxline": [x-start, y-start, x-end, y-end line width, color frame,color fill ] }

@gitpower2017 commented on GitHub (Dec 11, 2024): I will test the new function. The approach is interesting, it can reduce the JSON statements. Interesting is a function that only draws the frame of a BOX. The thickness of the line should be freely selectable. Idee: { "boxline": [x, y, width, height, line width, color frame,color fill ] } I currently create the box like this: boxline = {"box": [' + xpt + ',' + ypt + ',' + wpt + ',' + hpt + ',1]}' + "," + '{"box": [' + (xpt + 2) + ',' + (ypt + 2) + ',' + (wpt - 4) + ',' + (hpt - 4) + ',' + cpty + ']}' Since the “width and height” always causes problems for dynamic elements (box too large and outside the ePaper), I would prefer the box function with absolute values. z.B. { "box1": [x-start, y-start, x-end, y-end, color] } { "boxline": [x-start, y-start, x-end, y-end line width, color frame,color fill ] }

sascha_hemi commented

2026-03-20 19:07:17 +01:00

@nlimper commented on GitHub (Dec 11, 2024):

I extented the box and rbox now with optional border color and width: (e246ac578d)

[
{"box": [10, 10, 50, 50, "lightgray"]},
{"box": [70, 10, 50, 50, "lightgray", "black", 1]},
{"box": [10, 70, 50, 50, "lightgray", "black", 5]},
{"rbox": [10, 130, 50, 50, 10, "lightgray"]},
{"rbox": [70, 130, 50, 50, 10, "lightgray", "black", 1]},
{"rbox": [10, 190, 50, 50, 10, "lightgray", "black", 5]}
]

@nlimper commented on GitHub (Dec 11, 2024): I extented the `box` and `rbox` now with optional border color and width: (https://github.com/OpenEPaperLink/OpenEPaperLink/commit/e246ac578d0c6c80fb6c9a32a3bab8a2aadfecb6) ``` [ {"box": [10, 10, 50, 50, "lightgray"]}, {"box": [70, 10, 50, 50, "lightgray", "black", 1]}, {"box": [10, 70, 50, 50, "lightgray", "black", 5]}, {"rbox": [10, 130, 50, 50, 10, "lightgray"]}, {"rbox": [70, 130, 50, 50, 10, "lightgray", "black", 1]}, {"rbox": [10, 190, 50, 50, 10, "lightgray", "black", 5]} ] ``` ![download (55)](https://github.com/user-attachments/assets/e3769cf7-3b5b-4f88-910f-0faa74d3341b)

sascha_hemi commented

2026-03-20 19:07:17 +01:00

@gitpower2017 commented on GitHub (Dec 11, 2024):

this is nice.

@gitpower2017 commented on GitHub (Dec 11, 2024): this is nice.

sascha_hemi commented

2026-03-20 19:07:18 +01:00

@gitpower2017 commented on GitHub (Dec 12, 2024):

Here are a few more ideas for extending existing functions:

Line width for “line”
Extend “triangle” & “circle” with the functions of box & rbox
“trapezoid” with the same functions as box

@gitpower2017 commented on GitHub (Dec 12, 2024): Here are a few more ideas for extending existing functions: - Line width for “line” - Extend “triangle” & “circle” with the functions of box & rbox - “trapezoid” with the same functions as box

sascha_hemi commented

2026-03-20 19:07:18 +01:00

@nlimper commented on GitHub (Dec 12, 2024):

Those would be a bit problematic::

Drawing circles with decreasing radius causes artifacts where some pixels are white. Because it's only possible to use an integer as the radius, there's not really a solution (other than drawing the circle myself using sine/cosine of course). See image.
For a triangle: Because you can enter three artitrary points, you would have to calculate which way is 'inward' to draw a wider border, and calculate the distance (which needs to be perpendicular to the line) (and you will get the same artifacts, although they will be easier to handle). Because the use cast is just small, I'm currently not investing time in this.
For a line: idem: you need to know the direction of the line, move perpendicular to make the border wider, and you will have to cope with filling the artifacts. And there will be an issue with drawing nice line endings.

Of course, feel free to add those to the code if you like and do a PR, then we will merge it.

@nlimper commented on GitHub (Dec 12, 2024): Those would be a bit problematic:: - Drawing circles with decreasing radius causes artifacts where some pixels are white. Because it's only possible to use an integer as the radius, there's not really a solution (other than drawing the circle myself using sine/cosine of course). See image. - For a triangle: Because you can enter three artitrary points, you would have to calculate which way is 'inward' to draw a wider border, and calculate the distance (which needs to be perpendicular to the line) (and you will get the same artifacts, although they will be easier to handle). Because the use cast is just small, I'm currently not investing time in this. - For a line: idem: you need to know the direction of the line, move perpendicular to make the border wider, and you will have to cope with filling the artifacts. And there will be an issue with drawing nice line endings. ![download (58)](https://github.com/user-attachments/assets/0461976b-ac3b-45f8-9a47-e22a110d2674) Of course, feel free to add those to the code if you like and do a PR, then we will merge it.

sascha_hemi commented

2026-03-20 19:07:18 +01:00

@gitpower2017 commented on GitHub (Dec 18, 2024):

Many thanks for the explanation and implementation.
The new functions have simplified handling.

Gruß

@gitpower2017 commented on GitHub (Dec 18, 2024): Many thanks for the explanation and implementation. The new functions have simplified handling. Gruß

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/OpenEPaperLink#1344