Editing Home Assistant (section)

=====<h2>Examples:</h2><br>=====
Collapsed. Click on "Expand" to view.
 <div class="mw-collapsible mw-collapsed">
 <nowiki>{"page":1,"id":1,"obj":"btn","x":0,"y":0,"w":240,"h":40,"text":"openHASP","value_font":22,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}</nowiki><br>

This defines Page 1, Object 1, the object is a button located at (x,y) 0,0, 240 pixels wide and 40 pixels high.<Br>
The text is "openHasp" using the value_font, 22 point.<br>
The background color is dark blue, text color is white.<br>
"radius":0 means the object has square corners. 100 makes a pill-shaped object.<br>

----
 <nowiki>{"page":1,"id":2,"obj":"btn","x":10,"y":50,"w":105,"h":90,"toggle":true,"text":"\uE335","text_font":32,"mode":"break","align":1}</nowiki><br>

This defines Page 1, Object 2, the object is a button located at (x,y) 10,50, 105 pixels wide and 90 pixels high.<Br>
"Toggle":true means that the button is a toggle. It maintains its state between presses.<br>
"text":"\uE335" displays a light icon. (See the link above)<br>
"text_font":32 sets the font and text size. Valid sizes are: 8(default), 16, 24, 32 and 48pt (and the 8pt default font).<br>
"mode":"break" acts like a line break. This means that the next object will be placed at the beginning of the next line.<br>
"align":1 sets the alignment of the text within this label. (0,1,or 2 = Left, Center, or Right)

----
 <nowiki>{"page":1,"id":3,"obj":"dropdown","x":10,"y":150,"w":200,"h":60,"options":"Apples\nBananas\nOranges\nMelon"}</nowiki><br>
This defines Page 1, Object 3, the object is a dropdown located at (x,y) 10,150, 200 pixels wide and 60 pixels high.<Br>
"options" lists the items in the dropdown.<br>

----
 <nowiki>{"page":0,"id":1,"obj":"label","x":175,"y":60,"h":50,"w":120,"text":"XX.X°C","align":2,"bg_color":"#2C3E50","text_color":"#FFFFFF"}</nowiki>
This defines Page 0, Object 1.  Page 0 refers to an object visible on all pages.<br>
The object is a label located at (x,y) 175,60, 120 pixels wide and 50 pixels high.<Br>
The initial text of the label is "XX.X°C". The object color is white text on dark blue.
</div>

----
[https://www.openhasp.com/0.7.0/design/objects/ objects]- Every object can be set pixel perfect. This means you have to define every Width/Height x-and y-position.<br>

{{template:top}}