Can someone tell me and confirm that it is possible to use buttons on tabs? I can’t get it to work. Maybe someone can help me 
I have no idea what buttons you mean?
I use the buttons on the display to control the lights and the button to control the internal relay.
It is not a web ui. And the lanbons are fully documented in the openhasp docs. Do try and read. People spent a long time writing stuff like this
I think you have misunderstood me. It is only a question of whether it is possible to insert a button on tab views which then also has a function.
For example, if I click on the roller shutter symbol now, nothing happens although it should take me to Page3. Before without tabs it worked normally with buttons.
1 Like
If you mean navigation using a button to another page, it is described here
No. I know how to put buttons on. My problem, as described above, is that if I place a button on tab1, for example, it does not work as soon as I click on it.
The navigation buttons at the bottom, for example, work perfectly.
It’s done. I managed it somehow. Don’t know what the error was, but it works now 
What a waste of electrons you turned out to be.
I’ve been struggling to get stuff working too. Had got HA to push images to the openHasp display. Went and fiddles with code to generate the image, and it stopped working. Following day, it started to work again. Not sure what I did, but hey…
1 Like
Have you managed to send *.jpg files to the display via push? I’m trying to send a snapshot to the display of my Reolink cameras but it’s not working.
And another question… Send me the weather images via an automation to the display. this also works but I can’t get rid of the black background.
Can someone tell me how to get rid of it?
pages.jsonl
{"comment":" ---------- image-----------"}
{"page":3,"id":2,"obj":"img","x":0,"y":40,"w":480,"h":340,"click":0,"bg_color":"black"}
automations.yaml
###### Push image ###########
- id: push_image
alias: push image
trigger:
- platform: time_pattern
seconds: /30
action:
- service: openhasp.push_image
target:
entity_id: openhasp.plate01
data:
image: http://192.168.0.1:8123{{ state_attr('camera.local_file','entity_picture') }}
# Set the IP address to YOUR HA server
obj: p3b2
width: 480
height: 340
fitscreen: true
And not forgetting configuration.yaml
automation: !include automations.yaml
# This stops HA complaining if ffmpeg is not installed.
ffmpeg:
ffmpeg_bin: /usr/bin/true
camera:
- platform: local_file
file_path: /home/homeassistant/.homeassistant/openhasp/images/image.png
# Adjust path & file name to suit.
Note: You need camera on one of your lovelace cards, so don’t go hiding it. I might hack a component up to dish up images that are being regenerated on the fly (have some code spitting out sensor plots that I want to push to a plate). And if you are rescaling the image, take a look at this PR - PIL uses a width,height tuple for resize() and thumbnail(). by FreeBear-nc · Pull Request #121 · HASwitchPlate/openHASP-custom-component · GitHub
As for getting rid of the black background in the weather forecast images, dunno. The images I have (openhasp-weathericons-nigh.zip) are png format without a background colour so you’d need to play with the img attributes. I’m using a black background, so not an issue for me.
1 Like
Many thanks.
Do I have to enter anything other than the IP of my HA instead of camera.local_file or entity_picture?
And how does it now generate the PNG file when the camera is moved? Where exactly does the path have to point to? Does it matter? I have an automation that automatically saves a snapshot of my Reolink camera in HA in a folder. However, I have seen that it is a JPG and not a PNG. According to OpenHASP, it only says PNG. Is this then a problem with a JPG file and therefore did not work?
I don’t quite understand that yet either. Do I have to have a camera entity somewhere on my dashboard for the camera from which I want the snapshot?
Yes, I’ve already tried all that. But the black background remains. I have no idea what else it could be.
"SEITE 1 - WETTER - CONTAINER",
{
"page": 1,
"id": 2,
"obj": "obj",
"border_opa": 0,
"bg_opa": 0,
"click": 0
},
"SEITE 1 - WETTER - IMAGE",
{
"page": 1,
"id": 14,
"parentid": 2,
"obj": "img",
"src": "L:/openhasp_dummy_img.png",
"bg_opa": 0,
"auto_size": 1,
"pad_top": 10,
"pad_bottom": 10,
"pad_left": 10,
"pad_right": 10,
"tollge": "false",
"action": "p2"
},
"SEITE 1 - CONTAINER - TABVIEW",
{
"page": 1,
"id": 10,
"parentid": 2,
"obj": "tabview",
"btn_pos": 0,
"bg_opa": 0,
"border_width": 0,
"text_font": 24
},
"SEITE 1 - TAB1 - TAB",
{
"page": 1,
"id": 11,
"parentid": 10,
"obj": "tab"
},
"SEITE 1 - TAB2 - TAB",
{
"page": 1,
"id": 12,
"parentid": 10,
"obj": "tab"
},
# SEITE 1: Home
#- obj: "p1b0" # SETTINGS
# properties:
# "bg_color" : "{% from 'openhasp.jinja' import color %}{{color('bg')}}"
- obj: "p1b2" # WETTER - 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
- obj: "p1b10" # CONTAINER - TABVIEW
properties:
"w": "{% import 'openhasp.jinja' as grid %}{{grid.w(12)}}"
"h": "{% import 'openhasp.jinja' as grid %}{{grid.h(10)}}"
"x": "{% import 'openhasp.jinja' as grid %}{{grid.x(1)}}"
"y": "{% import 'openhasp.jinja' as grid %}{{grid.y(1)}}"
event:
"changed":
- service: openhasp.command
target:
entity_id: openhasp.esp32s3wanddisplay1
data:
keyword: p1b19.text
parameters: >
{% if val == 0 %}
{{ "#ffffff \u2022# #909090 \u2022#" | e }}
{%-elif val == 1 %}
{{ "#909090 \u2022# #ffffff \u2022#" | e }}
{% endif %}
- obj: "p1b14" # WETTER IMAGE
properties:
"w": "{% import 'openhasp.jinja' as grid %}{{grid.w(2)}}"
"h": "{% import 'openhasp.jinja' as grid %}{{grid.h(2)}}"
"x": "{% import 'openhasp.jinja' as grid %}{{grid.x(2.8)}}"
"y": "{% import 'openhasp.jinja' as grid %}{{grid.y(1.7)}}"
It is perhaps also important to mention that if I select the source for the weather image directly from the display, i.e. via L: etc., it is then without a black background.
Only since I have activated an automation that sends the images for the weather to the Dsiplay via push to image when the weather changes have the backgrounds been black.
Sorry, not going to quote the whole post…
Camera image - You would need to look at your camera entity (Developer Tools->States) and see what the image attribute points to.
I’m not sure if openHASP supports JPG format. If not, you’d need to use convert or mogrify to convert on the fly (is it possible to run a shell command from inside HA ?) - If not, it could be done with a pyscript (please don’t ask me how, I’m not that well up on python).
Lovelace card - You need to have the camera showing somewhere on your dashboard. Otherwise, the automation doesn’t have a valid URL to push the image over to openHASP.
Finally - Weather icons on a black background. It sounds like you have discovered the source of the problem. They display correctly if accessed from L: on the plate, but not if you use push_image. The quick & simple answer is to store the images on the plate, and reference them from your automations as per examples. With 16M of flash storage, you’re not going to use up that much space.
1 Like
1 Like
Yes, you can push a jpg image to a plate and it will display.
2 Likes
This is the part of the automation that is responsible for the images. How can I change this automation so that it selects the images from the display itself (L: …)? Unfortunately, I’m not a professional enough to know how to rewrite it
- alias: Wetterdaten aktualisieren
choose:
- conditions:
- condition: trigger
id:
- ha_restart
- restart_esp32s3wanddisplay1
- restart_esp32s3wanddisplay2
sequence:
- variables:
anzahl_zeilen: 5
- service: weather.get_forecasts
metadata: {}
data:
type: hourly
response_variable: hourly
target:
entity_id: weather.forecast_home
- delay:
hours: 0
minutes: 0
seconds: 0
milliseconds: 500
- service: weather.get_forecasts
metadata: {}
data:
type: daily
response_variable: daily
target:
entity_id: weather.forecast_home
- alias: Warten, wenn durch restart ausgelöst
if:
- condition: trigger
id:
- ha_restart
then:
- wait_template: "{{ is_state('binary_sensor.display_settings', 'on') }}"
continue_on_timeout: true
timeout: >-
{{ state_attr('binary_sensor.display_settings',
'update_time') | int(60) }}
- service: openhasp.push_image
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
data:
image: >-
{{ 'http://' + states('sensor.local_ip') +
':8123/local/images/openhasp-weathericons-night/z-128-' +
states('weather.forecast_home') + '.png' }}
obj: p1b14
alias: Sende Condition Icon p1b14
enabled: true
- service: openhasp.push_image
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
data:
image: >-
{{ 'http://' + states('sensor.local_ip') +
':8123/local/images/openhasp-weathericons-night/z-128-' +
states('weather.forecast_home') + '.png' }}
obj: p2b14
alias: Sende Condition Icon p2b14
enabled: true
- alias: für die Anzahl der Vorhersagen wiederholen
repeat:
sequence:
- variables:
hour_offset: 2
hour_start: 0
offset: >-
{{hour_start if (repeat.index == 1)
else((repeat.index-1)*hour_offset)}}
- service: openhasp.push_image
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
data:
image: >-
{{ 'http://' + states('sensor.local_ip') +
':8123/local/images/openhasp-weathericons-night/z-32-'
+
hourly['weather.forecast_home'].forecast[offset]['condition']
+ '.png' }}
obj: "{{'p2b' + (repeat.index+1) |string +'3'}}"
alias: Icon hourly forecast
- service: openhasp.command
metadata: {}
data:
keyword: "{{'p2b' + (repeat.index+1) |string +'1.text'}}"
parameters: >-
{%- if not
is_state('weather.forecast_home','unavailable') %}
{%- set midnight = now().replace(hour=0, minute=0, second=0, microsecond=0).timestamp() %}
{%- set event = as_timestamp(strptime(hourly['weather.forecast_home'].forecast[offset]['datetime'],'%Y-%m-%dT%H:%M:%S%z', default='2020-01-01T00:00:00+00:00')) %}
{%- set delta = ((event - midnight) // 86400) | int %} {%- if delta == 0 %}
Heute
{%- elif delta == 1 %}
Morgen
{%- endif %}
{{- event | timestamp_custom(" %-H ") + 'Uhr' }}
{%- endif %}
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
alias: Forecast
- service: openhasp.command
metadata: {}
data:
keyword: "{{'p2b' + (repeat.index+1) |string +'2.text'}}"
parameters: >-
{{
hourly['weather.forecast_home'].forecast[offset]['temperature']|string
+ '°C' }}
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
alias: Temperatur
- service: openhasp.command
metadata: {}
data:
keyword: "{{'p2b' + (repeat.index+5) |string +'4.text'}}"
parameters: >-
{% import 'date_and_time.jinja' as func %}
{%- if not
is_state('weather.forecast_home','unavailable') %}
{%- set now1 =
as_timestamp(strptime(daily['weather.forecast_home'].forecast[repeat.index]['datetime'],
'%Y-%m-%dT%H:%M:%S%z',
default='2020-01-01T00:00:00+00:00')) %}
{%- set day = now1 | timestamp_custom("%w") %}
{{ func.weekday(day | int -1) }}
{%- endif %}
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
alias: Datum
- service: openhasp.command
metadata: {}
data:
keyword: "{{'p2b' + (repeat.index+5) |string +'5.text'}}"
parameters: >-
{{
daily['weather.forecast_home'].forecast[repeat.index].templow
| string + '°C'}}
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
alias: Temperatur Low
- service: openhasp.command
metadata: {}
data:
keyword: "{{'p2b' + (repeat.index+5) |string +'6.text'}}"
parameters: >-
{{
daily['weather.forecast_home'].forecast[repeat.index].temperature
| string + '°C'}}
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
alias: Temperatur High
- service: openhasp.push_image
target:
entity_id:
- openhasp.esp32s3wanddisplay1
- openhasp.esp32s3wanddisplay2
data:
image: >-
{{- 'http://' + states('sensor.local_ip') +
':8123/local/images/openhasp-weathericons-night/z-32-'
+
daily['weather.forecast_home'].forecast[repeat.index].condition
+ '.png' }}
obj: "{{'p2b' + (repeat.index+5) |string +'7'}}"
alias: Icon daily forecast
- delay:
hours: 0
minutes: 0
seconds: 0
milliseconds: 250
while:
- condition: template
value_template: "{{ repeat.index <= anzahl_zeilen }}"
And to be honest, I still don’t understand why it makes the black background via push to image and not via the display of locally stored files. Is there an explanation for this?
openhasp.push_image seems poorly documented. In the source it says
description: URL or Full Path of an image
So maybe you can use L:/image.png (hopefully with templating) instead of the URL you are using back to homeassistant. In fact this is specified in the docs for the image object
{“page”:1,“id”:34,“obj”:“img”,“src”:“L:/image.png”,“auto_size”:0,“w”:50}
Also, you have a problem with the image background. Can you post one of the images here? Perhaps you need an image with a transparent background.
Lastly have you tried fiddling with the object background? See Styling Properties - openHASP
These are the standard images from the OpenHASP website for the weather in the night variant.
https://www.openhasp.com/0.7.0/assets/users/openhasp-weathericons-nigh.zip
I tried it with the normal styling options like “bg_opa”: 0 etc. But I don’t quite understand the parts yet and don’t know how I would have to adjust/add this to my weather icon to try it. See my code:
"SEITE 1 - WETTER - IMAGE",
{
"page": 1,
"id": 14,
"parentid": 2,
"obj": "img",
"src": "L:/openhasp_dummy_img.png",
"bg_opa": 0,
"auto_size": 1,
"pad_top": 10,
"pad_bottom": 10,
"pad_left": 10,
"pad_right": 10,
"tollge": "false",
"action": "p2"
},
Suffixes~
The styling properties below support an optional two-digit suffix to indicate which part and/or state of the object the property applies to. A styling property without suffix will be applied to the default state of the main part of the object (i.e. the background).
Very detailed styling can be applied to each part depending on the state of the object:
Parts~
All objects have at least a main part. Several objects are made up of additional parts which can each be styled separately. To access the properties of the parts use a two-digit suffix appended to the styling properties below.
The part indexes are:
00 = main part of the object (i.e. the background)
10 = the indicator or needle, highlighting the the current value
20 = the knob which can be used the change the value
30 = the background of the items/buttons
40 = the items/buttons
50 = the selected item
60 = major ticks of the gauge object
70 = the text cursor
80 = the scrollbar
90 = other special part, not listed above
Can you also tell me how I should customize my automation so that it reads the images from the display itself instead of via push image? Unfortunately I’m too dumb for that.
Using L:image.png works for me. I just lifted the code from Example Configurations - openHASP and plugged it in to my openhasp.yaml.
- obj: "p1b84" # Forecast condition
properties:
"src": >
{%- if not is_state('weather.forecast_home','unavailable') %}
L:/z-32-{{ state_attr('weather.forecast_home','forecast')[2]['condition'] }}.png
{%- endif %}
It just works, and no need to run it as an automation.
1 Like