New web-based visual screen designer for openHASP (community project)

[Lenardo1]

Hi @fvanroie,

I’ve created a web-based tool for visually designing openHASP screen layouts — you can place elements, adjust colors, positions, and export directly to JSON for import into your openHASP device.

You can try it online here:
👉 https://hasp-screen-maker-lenardo.replit.app/

I also have the full offline source code available if you’d like to include or link it from the official openHASP website.
It might be a helpful visual companion for new users who want to build layouts without coding.

Would you be interested in checking it out?

Best regards,

[email protected]

[oradke]

That looks like a great tool! However, when I imported my JSONL file, I already found a bug.

AFAIK, openHASP uses the last "page" directive it has seen. Your webapp, however, assumes "page":0 if no page is specified. So most of my objects end up on page 0 instead of where openHASP puts them:

//- Spotify --------------------------------------
{"page":1,"bg_color":"#000000","bg_grad_dir":0, "border_side":0,"comment":"---------- Spotify ----------"}
{"obj":"label","id":2,"x":405,"y":100,"w":390,"h":300,"bg_color":"#000000","text_color":"#FFFFFF","text_font":24, "align":"center","mode":"break","text":"Spotify is paused."}
// Progressbar
{"obj":"bar","id":4,"x":405,"y":300,"w":390,"h":10,"bg_color10":"#2C3E50","bg_color":"#B6B6B6", "bg_grad_dir10":0, "bg_grad_dir":0,"border_side":0, "pad_top":0, "pad_bottom":0, "pad_left":0, "pad_right":0}
//prev
{"id":17,"obj":"btn","x":405,"y":340,"w":60,"h":50,"toggle":false,"text":"\uE4AE","text_font":48}
//play \uE40A - pause \uE3E4
{"id":18,"obj":"btn","x":475,"y":340,"w":60,"h":50,"toggle":false,"text":"\uE40A","text_font":48}
//next
{"id":19,"obj":"btn","x":545,"y":340,"w":60,"h":50,"toggle":false,"text":"\uE4AD","text_font":48}

[Lenardo1]

ok, i will fix it, thx

[oradke]

Cool! I'll be more than happy to do further testing. Do you have a github for your project? Or a discord server?

[Lenardo1]

i have made some changes, start with page1 and add some different Display resolution,- i am not a programmer, i build this tool with ki and publish this as a Loxberry Plugin. i will give the code also to my github account, everyone can use it.
pls try it out under the same link

[TommySharpNZ]

Nice, will definitely check it out!

[TommySharpNZ]

Seems to not like comment lines or blank lines which I use to make my file more readable?
{"comment":"----------- Page 0 All Pages ------- "}
"Line 1: Missing required fields (obj, id)"

I have several pages and on each page I use "id": which it doesn't like. This does work on openHASP though?
"Line 72: Warning - Duplicate ID 1 (first seen on line 14), remapped to 4"

[schabau]

Hello,

Very clear and intuitive to use. Excellent work.

Ideally, the Delete key on the keyboard should also work for deleting the active objects, and not just the Delete button.

However, a quick look at the JSON code (if you only need a single line) isn't possible; only exporting the entire JSON code is an option, or am I missing something?

Best regards,
Detlef Paschke

[darkman7hr]

this is how my import looks like