thanks. now is working
Please post your yaml properly.
I tried adding a background image, but the image covers all the labels and text, how can I position the image at the bottom without blocking the buttons and labels. I used the following example, please correct it.
{“page”:1,“id”:34,“obj”:“img”,“src”:“L:/image.png”,“auto_size”:0,“w”:400}
There is a command in the docs, but I haven’t tried it:
p1b34.to_back
What I have found through experimenting is that the objects are layered in their order in the pages.jsonl file. (NOT the “id”: number.)
In this first example, the larger button onject is in the jsonl file before the smaller label object.
{
"page":3,"id":1,"obj":"btn","x":120,"y":0,"w":240,"h":240,"bg_color": "red","text":"This is Page 3","align":2,"value_font":22,"text_color":"gray","radius":0,"border_side":0
}
{
"page":3,"id":2,"obj":"label","x":150,"y":200,"w":200,"h":100,"text":"#0000FF \uE64A# #FF0000 Hello# #FFFFFF world#!"
}
Resulting in:
In the second example, the smaller label is in the file before the larger button object, and thus covered:
{
"page":3,"id":2,"obj":"label","x":150,"y":200,"w":200,"h":100,"text":"#0000FF \uE64A# #FF0000 Hello# #FFFFFF world#!"
}
{
"page":3,"id":1,"obj":"btn","x":120,"y":0,"w":240,"h":240,"bg_color": "red","text":"This is Page 3","align":2,"value_font":22,"text_color":"gray","radius":0,"border_side":0
}
Result:
Where is this background gradient defined?
{
"page":3,"id":1,"obj":"btn","x":120,"y":0,"w":240,"h":240,"bg_color": "red","text_color":"gray","text":"This is a big button","align":2,"value_font":22,"radius":0,"border_side":0
}
++++++++++++++++++++++++++++++
Found it:
I’m really still a beginner, seeing a display like this, I feel amazed and enthusiastic about learning, where should I start to get a display like the one above. Thank you
you say In the folder “custom_templates” add a new file: openhasp.jinja. My question is where is the location of the “custom_templates” folder, is this folder created in the folder
/homeassistant/custom_components/openhasp ?Please enlighten me. Thank you
Just create it. It will be there if you have other custom templates defined. Otherwise, mkdir is your friend.
thank you i will try it
I’ve tried it but nothing changes with the display. Where is my error?
Just to be sure, the path the the file your created should be
/config/custom_templates/openhasp.jinja
my mine is :/homeassistant/custom_components/openhasp/custom_templates/openhasp.jinja
Wrong, assuming your configuration.yaml is in /home assistant, then the correct path is /homeassistant/custom_templates/openhasp.jinja.
I thought it was placed in the open hasp folder. OK, I’ll try again
here is my configuration.yaml:
homeassistant:
allowlist_external_dirs:
- "/config/openhasp"
openhasp:
home:
objects:
# SEITE 0
- obj: "p0b0" # SETTINGS
properties:
"bg_color" : "{% from 'openhasp.jinja' import color %}{{color('bg')}}"
- obj: "p0b1" # PREVIOUS - BUTTON"
properties:
"w": "{% import 'openhasp.jinja' as grid %}{{grid.w(4)}}"
"h": "{% import 'openhasp.jinja' as grid %}{{grid.h(2)}}"
"x": "{% import 'openhasp.jinja' as grid %}{{grid.x(1)}}"
"y": "{% import 'openhasp.jinja' as grid %}{{grid.y(11)}}"
"text": "\uE04D"
"radius": "{% from 'openhasp.jinja' import grid %} {{(grid() | from_json).radius |int}}"
"bg_color": "{% from 'openhasp.jinja' import color %}{{color('primary')}}"
"bg_color02": "{% from 'openhasp.jinja' import color %}{{color('primary_light')}}"
- obj: "p0b2" # HOME - BUTTON
properties:
"w": "{% import 'openhasp.jinja' as grid %}{{grid.w(4)}}"
"h": "{% import 'openhasp.jinja' as grid %}{{grid.h(2)}}"
"x": "{% import 'openhasp.jinja' as grid %}{{grid.x(5)}}"
"y": "{% import 'openhasp.jinja' as grid %}{{grid.y(11)}}"
"text": "\uE6A1"
"radius": "{% from 'openhasp.jinja' import grid %} {{(grid() | from_json).radius |int}}"
"bg_color": "{% from 'openhasp.jinja' import color %}{{color('primary')}}"
"bg_color02": "{% from 'openhasp.jinja' import color %}{{color('primary_light')}}"
- obj: "p0b3" # NEXT - BUTTON
properties:
"w": "{% import 'openhasp.jinja' as grid %}{{grid.w(4)}}"
"h": "{% import 'openhasp.jinja' as grid %}{{grid.h(2)}}"
"x": "{% import 'openhasp.jinja' as grid %}{{grid.x(9)}}"
"y": "{% import 'openhasp.jinja' as grid %}{{grid.y(11)}}"
"radius": "{% from 'openhasp.jinja' import grid %} {{(grid() | from_json).radius |int}}"
"text": "\uE054"
"bg_color": "{% from 'openhasp.jinja' import color %}{{color('primary')}}"
"bg_color02": "{% from 'openhasp.jinja' import color %}{{color('primary_light')}}"
# SEITE 1
- obj: "p1b0" # SETTINGS
properties:
"bg_color" : "{% from 'openhasp.jinja' import color %}{{color('bg')}}"
- obj: "p1b2" # CONTAINER
properties:
"w": "{% from 'openhasp.jinja' import grid %} {{(grid() | from_json).display_width}}"
"h": "{% import 'openhasp.jinja' as grid %}{{grid.h(10)}}"
"x": 0
"y": 0
template:
- binary_sensor:
- name: Display settings
unique_id: 1b3a3dae-fd0c-4f47-9c8b-5b680478a977 # https://www.uuidgenerator.net/
state: "{{ now() - state_attr(this.attributes.update_automation | default('automation.update_display_data'), 'last_triggered') > timedelta(seconds=this.attributes.update_time | default(120) |int ) }}" # change the default automation entity_id from step 3 before
delay_on:
seconds: 2
attributes:
update_automation: "automation.update_display_data" # add a the automation entity_id from step 3 before
update_time: "80" # sending the config via mqtt needs some time to complete. This stops the automation from re.run before sending config is finished
display_w: "480"
display_h: "480"
grid_cols: "12" # increase for more resolution of object
grid_rows: "12" # increase for more resolution of object
grid_gutter: "8" # This looked nice for me
grid_margin: "4" # This looked nice for me
bg_color: "#000000"
primary_color: "#4193d5"
secondary_color: "#ee9f52"
accent_color: "#A175C4"
success_color: "#6cbe58"
warning_color: "#d67430"
error_color: "#e25628"
radius: "4"
Next, the location of openhasp.jinja is /homeassistant/custom_templates/openhasp.jinja. Then the location of page.jason is /homeassistant/openhasp/pages.json, but no display appears. please enlighten me.
I have tried it and the result is that only 1 button appears as shown in the attached picture. Here are the contents of the pages.jason file whose path is /config/openhasp/pages.json:
[
"SEITE 0 - SETTINGS",
{
"page": 1,
"id": 0,
"prev": 4
},
"SEITE 0 - PREVIOUS -BUTTON",
{
"page": 0,
"id": 1,
"obj": "btn",
"outline_opa": 0,
"border_opa": 0,
"text_font": 32,
"toggle": false,
"action": "prev"
},
"SEITE 0 - HOME - BUTTON",
{
"page": 0,
"id": 2,
"obj": "btn",
"outline_opa": 0,
"border_opa": 0,
"text_font": 32,
"toggle": false,
"action": {
"down": "back",
"hold": "restart"
}
},
"SEITE 0 - NEXT - BUTTON",
{
"page": 0,
"id": 3,
"obj": "btn",
"text": "\uE054",
"outline_opa": 0,
"border_opa": 0,
"text_font": 32,
"action": "next",
"toggle": false
},
"SEITE 1 - CONTAINER",
{
"page": 1,
"id": 2,
"obj": "obj",
"border_opa": 0,
"bg_opa": 0,
"click": 0
}
]
.please enlighten me
I am confused. Easily done since I am just learning to code openHasp.
Preferring to keep things simple, I have not ventured into using templates or other fancy programmer tools.
Can we rewind to the beginning? On a piece of paper, draw what you want to see on the screen. Post that here.