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.

[jazzmonger]

@mvturnho You should consider creating your own GitHub repository project for this designer. Having multiple discussion areas and issue trackers could really help supercharge this project. You might get additional code collaboration from others as well.

[cook1emr]

I would love to see this evolve into a selfhosted webserver. That could be connected to my various panels and provide central administration along with design.

I feel that having a selfhosted option would be in keeping with the original project.

[htvekov]

@mvturnho

Just had a quick glance on your designer.
Great work so far 💪😎
It's a massive task, but this will really help a lot of users (both new and experienced) in the design phase.

[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