mvturnho / OpenHaspDesigner

Web based designer for OpenHasp project
MIT License
29 stars 6 forks source link

Loading existing design - problems with button icons, page background color #1

Open herrfrei opened 1 year ago

herrfrei commented 1 year ago

I'm trying to extend my design with your beautiful designer - many thanks for your impressive work! I use individual page colors (that are ignored on import) and button icons (that are not correctly loaded). The button icons are modified in Home Assitant according to the state of the entities (currently lights and shutters).

Page source:

{"comment":"---- Config ---- ","page_size":"small_landscape","project_name":"openhasp"}

{"page":0,"comment":"---------- All Pages ----------"}
{"id":0,"bg_color":"#000000","text_color":"#978B7D"}
{"id":1,"obj":"btn","x":289,"y":1,"w":30,"h":30,"text_font":"2","text":"\uE5A9","text_color":"#000000","bg_opa":0,"border_width":0}
{"id":7,"obj":"btn","action":"prev","x":0,"y":210,"w":104,"h":30,"text":"\uE04D","radius":0,"border_side":0,"text_font":32}
{"id":8,"obj":"btn","action":"back","x":105,"y":210,"w":110,"h":30,"text":"\uE2DC","radius":0,"border_side":0,"text_font":32}
{"id":9,"obj":"btn","action":"next","x":216,"y":210,"w":104,"h":30,"text":"\uE054","radius":0,"border_side":0,"text_font":32}

{"page":1,"comment":"---------- Page 1 ----------"}
{"id":0,"enabled":false,"bg_color":"#ffd700","text_color":"#000000"}
{"id":1,"obj":"label","enabled":false, "x":1,"y":1,"w":120,"h":30,"text":"LICHT","text_font":24,"text_color":"#000000","radius":0,"border_side":0}

{"id":2,"obj":"btn1","x":10,"y":40,"w":120,"h":75,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1, "radius":5,"groupid":1}
{"id":3,"obj":"label","enabled":false, "x":140,"y":60,"w":40,"h":35,"text":"OG","text_font":32,"bg_color":"#2C3E50","radius":0,"border_side":0}
{"id":5,"obj":"btn2","x":190,"y":40,"w":120,"h":75,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1, "radius":5,"groupid":2}

{"id":12,"obj":"btn1","x":10,"y":125,"w":120,"h":75,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1, "radius":5}
{"id":13,"obj":"label","enabled":false, "x":140,"y":145,"w":40,"h":35,"text":"UG","text_font":32,"bg_color":"#2C3E50","radius":0,"border_side":0}
{"id":15,"obj":"btn2","x":190,"y":125,"w":120,"h":75,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1, "radius":5}

{"page":2,"comment":"---------- Page 2 ----------"}
{"id":0,"enabled":false,"bg_color":"#808080","text_color":"#FFFFFF"}
{"id":1,"obj":"label","x":0,"y":0,"w":120,"h":30,"text":"Rollos","text_font":24,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}

{"id":2,"obj":"btn1","x":10,"y":40,"w":120,"h":75,"toggle":true,"text":"\uF11E","text_font":32,"mode":"break","align":1, "radius":5}
{"id":3,"obj":"label","enabled":false, "x":140,"y":60,"w":40,"h":35,"text":"OG","text_font":32,"bg_color":"#2C3E50","radius":0,"border_side":0}
{"id":5,"obj":"btn2","x":190,"y":40,"w":120,"h":75,"toggle":true,"text":"\uF11C","text_font":32,"mode":"break","align":1, "radius":5}

{"id":12,"obj":"btn1","x":10,"y":125,"w":120,"h":75,"toggle":true,"text":"\uF11E","text_font":32,"mode":"break","align":1, "radius":5}
{"id":13,"obj":"label","enabled":false, "x":140,"y":145,"w":40,"h":35,"text":"UG","text_font":32,"bg_color":"#2C3E50","radius":0,"border_side":0}
{"id":15,"obj":"btn2","x":190,"y":125,"w":120,"h":75,"toggle":true,"text":"\uF11C","text_font":32,"mode":"break","align":1, "radius":5}

{"comment":"---------- Limit page prev/next between 1 and 2 ----------"}
{"page":1,"id":0,"prev":2}
{"page":2,"id":0,"next":1}

This is the screenshot of page 1 as presented by the device:

image

And this the representation in the designer:

image

mvturnho commented 1 year ago

Hi, thanks you for trying the designer. I know that the issues you describe exist (and many more), but I have had no time to fix these. That is also one of the reasons we do opensource so others can join in and help.

Did you use the online version or compiled your own? http://haspdesigner.qrisonline.nl/