OpenHasp designer

[mvturnho]

Hi,

I started work on a webbased openhasp designer. It is in its early stages and build on:

• Vuejs
• Konva
• Tailwind

I have some basics working, a number of Objects work and import/export works,
The UI is still very rough.
Let me know if other efforts have been made that are maybe better or if we can make this into something more serious.
One thing is for sure, we need a graphical editor for OpenHASP.
You can play with it here http://haspdesigner.qrisonline.nl/ , be warned it is not as userfriendly as you may want it to be, it is at most a proof of concept for the use of the choosen frameworks.

Sourcecode will be opensource like OpenHASP when the project/code is ready for this.

[dgomes]

Love it!

[snelweg]

wow, seems to work for me. Thank you very much for providing this. I use it with Tasmota and HaspMota.

[adorobis]

Looks great! Some glitches still there but looks very promissing!

[jazzmonger]

Awesome! This will catapult this project forward.

It all loads for me and I could place objects, just not edit them. Ill be watching this repository for sure!

[michaelsidenius]

Exactly what I was looking for! Great!

[mvturnho]

Did an update last weekend. You can change object properties with the properties item.

[jazzmonger]

Cool. Progress!

[cherowley]

Fantastic work!

This project alone could really spread update of openhasp!

[mvturnho]

New update available. Time is limited so progress is slow.
Buttonmatrix is under development. Wrestling with how to add buttons in the correct position in the matrix.

[jazzmonger]

Yeah, but there's progress! Is there no one who can help with coding? I'm sure all of us will be willing testers, so at least there's that!

[Digityle]

This is so awesome, been waiting for something like this! No more painful drawing everything in GUIslicer then translating manually like a caveman with a stone tablet!!

[jazzmonger]

You forgot the part about rubbing sticks together to get flame.... countless hours moving objects a few pixels at a time gets old quick...

[mvturnho]

Oh sorry stone tablets are not supported ... yet

[nagyrobi]

How does this work? Tried 2 things:

• design something new - can't seem to be able to add any objects to the page (Firefox, Chrome tested)
• opened my own manually created .jsonl - nothing happened

[mvturnho]

Works fine here. First add a page.
Then select the page to add objects. The selected page has a red border.
Add a button and move / resize it. With the properties menu yoy can chage border label etc.
Select the page again and add Object. Then select the created object to add for example a button to the object.

[mvturnho]

Also;

[nagyrobi]

Oh I see. I wasn't aware that the first button is a page.

[nagyrobi]

Any idea why can't I import my existing pages?
See this.

[mvturnho]

Ok tested this and it seems there is some more work needed to import this correctly.
first you should define the page separetly:

then font sizes do not work correct yet.
Images can only have weblocations
and much more ... I gues

But after some fixes I was able to import your jsonl. (the fixes are not online yet)
I will publish the code shortly maybe with some help, improvement goes faster,

You could try rebuild you setup with the limitations of the designer and see hoe the export shows on your plate.
You can also change the id's of your objects from the properties menu.

[mvturnho]

And by the way, BIG thanks for testing the designer

[nagyrobi]

It looks like there are some rendering misunderstandings. For example on the page "IDŐJÁRÁS" the tabview has invisible tab labels, the designer should keep that in mind. (switching between the tabs happens by dragging).
Missing pictures should only be displayed with placeholders.
Missing fonts (rendered from TTF directly) should use some default font on the designer.

I also suggest that it should be possible to have a kind of "demo text" field for the labels, values etc. where the text itself wouldn't be exported in the final jsonl, but it would allow us to test basically how it would look like with it. Use case is for texts which are rendered dynamically by the custom component.

[cimburlen]

You finally did it! Wow, was waiting for something similar. Bought a Sunton 7 display a couple of months ago, for this project, but when I tried to set it up, my head exploded and I spat on it. You lit a fire in me, thank you, I look forward to the development of your project.

[jazzmonger]

@mvturnho I created a new page today for my Alexa Timers. It all worked! Do you have plans to allow font sizes and type definitions?

importing my existing file failed spectacularly (!), but it's quite complex.

[mvturnho]

Hi, great that you tested the designer.
There are lots of things that need to be done. Fonts is one if them. The reason why most imports fail is because the current import expects a separate line to define a page and then the objects for that page. I have an update available that I will deploy shortly. Then I wil do some code cleanup and make it publicly available on github so others can maybe help improve and expand this.

[jazzmonger]

Yes, each of my pages have only one "page" defined on the first line.

{"page":4,"comment":"---------- CAMERAS  ----------"}

{"id":1,"obj":"img","src":"L:/openhasp.png","w":240,"h":240,"x":-140,"y":40}
{"id":2,"obj":"img","src":"L:/openhasp.png","w":240,"h":240,"x":340,"y":40}

{"page":5,"comment":"----------- ALEXA ACTIVE TIMERS  ------- "}
{"id":1,"obj":"label","x":140,"y":200,"w":151,"h":40,"border_color":"#848a94","border_width":0,"radius":5,"bg_color":"#5a6173","text":"Alexa Timer #1","text_color":"white"}
Etc...

[cook1emr]

This looks very promising. Thanks for spending your time on it.

Will you make this selfhostable in future?

In the meanwhile can you server this over https please?

[mvturnho]

Ah I see... It's https now. Although no data is send to the server.

[oradke]

Hey that looks like a GREAT project! Would be happy to contribute.

Question: Would it be possible to copy/paste config code instead of uploading/downloading files? And see the code while working in the designer?

[mvturnho]

Hi All, it has been a while after my last update, and I have now released the sourcecode in its own repository you can find it here.
https://github.com/mvturnho/OpenHaspDesigner

I hope there are interested developers that are willing to join and help this project foreward.

[jazzmonger]

Well done, nice and complete! You might want to enable the discussions feature on your project. You can document things and interact with other devs along the way as you make progress. I used it to great effect when I designed my very complex pellet stove controller.

Too bad I'm a hack programmer, I'd love to help but it's way over my abilities. Your tool is something that will be REALLY useful to new and existing users once it matures a bit and can handle importing our advanced configs. I always dread manually going in and making changes to my plates... it's such a huge time sink. The end result is always satisfying, but the process is brutally painful.
Jeff

[smcgann99]

Thanks for taking the time to build this, its a fantastic addition to openhasp.

Not sure if you are aware but there is a lot of interest in wall displays in the Node Red world as well.
eg https://discourse.nodered.org/t/new-shelly-wall-display/80961/15

As the NR community are into building their own dashboards, rather than using HA etc they tend to be very knowledgeable and capable programmers. You might want to advertise this project there as well, to drum up some support ;-)

[darkman7hr]

If I import my design pages, on export, nothing happens? Other than that, it's very nice thing you're doing!

[Maddin4000]

Hi, very Nice tool, how can i use the Homeassistant? I dont now what do i fill in the fields Event & Service?

[tofuSCHNITZEL]

this is not yet implemented I'm afraid.

[smirnowegor]

this is not yet implemented I'm afraid.

Hi! Does it work with Home Assistant or still not?

[cook1emr]

Whilst it would be neat to be able to create the yaml using this tool. I am curious how that would be implemented? The variations of layout or user intent feel like this would be very complex.

[nthulke]

This is amazing, does anyone else have issues setting the size of the plate? I can't seem to set it to match my plate size 480x480.

[jascdk]

have the same problem:(

[nthulke]

I played around today, set the resolution I needed then refreshed the page and it came good, worth a shot :)

[foskolo1]

Hi!

I have often used the designer, it is not perfect but very useful. But today it is no more reacheable, the web site is "dead". Does anybody knows why?

[nthulke]

I was able to reach it using this link https://haspdesigner.qrisonline.nl/

[foskolo1]

Problem solved.
It was the browser Opera. I tried with Firefox and I can reach the site without problems.

Thanks!

[orehmann]

Hi...

This tool is so cool. My only problem is to configure MQTT to access my HomeAssistant MQTT Mosquitto Broker. HA itself (accessing entities works fine). It seems HaspDesigner uses wss:// transport.

But my Browser always complains (Debug Mode Console)

WebSocket connection to 'wss://192.168.1.42:8884/' failed:

I am pretty sure it has something to do with SSL but I have valid fullchain.pem/privkey.pem files in place (ssl folder)

MQTT Explorer can successfully connect to ws://192.168.1.42:1884 but HaspDesigner seems not to support WebSockets without TLS (wss://)

Any idea what is wrong with my config ? Or is it possible to tell HaspDesigner to not use TLS so ws:// instead of wss://

Any help would be appreciated

Regards,
Oliver

[orehmann]

Hi...

This tool is so cool. My only problem is to configure MQTT to access my HomeAssistant MQTT Mosquitto Broker. HA itself (accessing entities works fine). It seems HaspDesigner uses wss:// transport.

But my Browser always complains (Debug Mode Console)

WebSocket connection to 'wss://192.168.1.42:8884/' failed:

I am pretty sure it has something to do with SSL but I have valid fullchain.pem/privkey.pem files in place (ssl folder)

MQTT Explorer can successfully connect to ws://192.168.1.42:1884 but HaspDesigner seems not to support WebSockets without TLS (wss://)

Any idea what is wrong with my config ? Or is it possible to tell HaspDesigner to not use TLS so ws:// instead of wss://

Any help would be appreciated

Regards, Oliver

Can anybody help here please ?

[foskolo1]

Hi!

I'm using the designer and it works good. I miss some features ("Undo", alignement of elements...) but until now I could build good display designs. Now I have a problem with the "switch" element. I put it on the display and I can so switch (MQTT) a Tasmota plug. It works well. Unfortunately, when I switch the Tasmota plug directly with my hand or if I switch it with another software, on the display the position of the switch remains (obviously) unchanged. How can I synchronise the position of the switch on the display with the status of the Tasmota plug?
I couldn't find a parameter or command to set the position of the switch via software.
Thany you!

[smcgann99]

"position of the switch via software" what software are you using to drive the openhasp screen ?

[adorobis]

You can do it in Home Assistant. OpenHASP anyway is fully controlled from home assistant so that's how you can achieve synchronization of any element on the screen with any entity in home assistant. Should be achievable from OpenHab I guess as well, also via MQTT I suppose.

[foskolo1]

To drive the openhasp display I use directly nodered and mqtt. It works fine. I don't need Homeassistant or other SW. With the Java-Scripts written by Chatgpt it is very simple.
Now I found a solution to my problem. I have to read the state of the switch with an mqtt input node "boiler/tele/STATE", change "ON" in "1" and "OFF" in "0" and send this to the switch on the display with "hasp/sunton3/command/p3b8.val".
The change of "ON" in "1" and "OFF" in "0" seems to be important. If I send "ON" of "OFF" directly nothing happens. It is important too, to use "boiler/tele/STATE" to get the status of the switch. In this case the status is sent with the Teleperiod time of Tasmota. If I use "boiler/stat/POWER" the staus is sent only when it changes and when I e.g. reset the display the switches remain unsynchronised until next change.

[smcgann99]

If you want the screen to display the true state immediately then you can just listen to both topics "boiler/tele/STATE" & "boiler/stat/POWER" and update the screen.
I also use NR and what I do is cache the state of each switch and resend them if the plate is rebooted.

[smcgann99]

You could take a look at https://discourse.nodered.org/t/using-openhasp-with-node-red/81457 for some tips.

[foskolo1]

Now I have another problem. How can I switch the display to show a specific page with an MQTT command ? Any idea?

[foskolo1]

I know nodered very well and with it I can do everything in a simple way. With the many addons od Nodered I can get ALL the information existing in the world and display them on the display. Nodered runs on a docker on my Synology Nas and on the the Syno runs Mosquitto too. So I don't need other hardware.

[tofuSCHNITZEL]

Now I have another problem. How can I switch the display to show a specific page with an MQTT command ? Any idea?

I checked it with my Home assistant install:
the mqtt message looks like this:
hasp/platename/command/page
and the payload is the page number

[foskolo1]

Thanks! I will try it.

[foskolo1]

It works!
Thank you!

[foskolo1]

Thank you! All problems solved.

[foskolo1]

And now another Problem. I connected an active beeper to the gpio 18 of the display. I have configured the gpio 18 as output (relay) and tried to switch the output in nodered with a MQTT output with topic hasp/plate/command/output18 and payload 1 or 0. In the Mqtt explorer I can see that the topic hasp/plate/command/output18 receives the 1 or 0 but the level of the gpio18 pin remains 0V (=no sound).
I tried with the gpio17 too: no sound.

Any idea?
Thank you!

[jaro44]

Hello, how can I replace icons with my own colored icons.png?
openhasp.yaml:
- obj: "p1b2" # ikona forecast properties: "text": >- {% set icons = {"cloudy":"\uE590", "fog":"\uE591", "hail":"\uE592", "lightning":"\uE593", "clear-night":"\uE594", "partlycloudy":"\uE595", "pouring":"\uE596", "rainy":"\uE597", "snowy":"\uE598", "sunny":"\uE599", "windy":"\uE59D", "windy-variant":"\uE59E", "lightning-rainy":"\uE67E", "snowy-rainy":"\uE67F", "exceptional":"\uE957"} %} {{ icons[states("weather.forecast_dom")] | default("\uE957") }}
pages.jsonl:
{"page":1,"id":2,"obj":"label","x":31,"y":32,"w":48,"h":48,"text":"\uE596", "text_font": 48}

[TommySharpNZ]

Very cool project and I hope @mvturnho keeps at it!
At the moment I'm designing my wireframes on paper and then using photoshop to take screenshots and have to nudge stuff by pixels to get it nicely aligned. A GUI like this is very cool!

[Myumdom]

excelent!

[TesaTesa]

Hello,
absolutely super stupid question, but im really struggling here - where to set desired resolution of the "page" to fit my display? I would suppose I should find it in settings of the page compoment, but its not there...
Thanks,
Radek

[foskolo1]

"Settings" -> "UI settings" -> "Plates". In "Plate definitions" you can define the Plate (=display) you need. You can switch between them setting the display you want to use on the "Active" field.

Enzo

[TesaTesa]

Thank you ! this little button there :D ..
Again, thanks!

[ariboehme]

Thank @mvturnho, great work!!

I have a question: How do I change the screen viewing scale? I can only see the screen is either too big or too small...