Planning and setup - ESP32-S3 - 4848S040 - 480*480 IPS touchscreen

[Sushibomba]

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

@nickrout

Lastly have you tried fiddling with the object background? See Styling Properties - openHASP

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

@nickrout

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

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.

[paul_c5x4 (Paul)]

@nickrout

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}

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.

[Sushibomba]

Thank you very much. That looks pretty good. However, if I understand it correctly, it doesn’t help me much.
I am making the complete configuration in HA and no longer have any plates.yaml on the display itself.

The automation triggers whenever my weather service makes a change and then sends this information to the display.

So my goal is to replace the sending of the images so that it then pulls up the images on the display itself depending on the weather conditions.

[paul_c5x4 (Paul)]

Rather than using push_image, store the images on the plate and use mqtt…

- id: openhasp_image
  alias: openhasp time
  trigger:
  - platform: time_pattern
    minutes: /1
  action:
  - service: mqtt.publish
    data:
      topic: hasp/plate01/command/jsonl
      payload: '{"page":3,"id":2,"src":"L:/z-128-sunny.png"}'

Adjust page, id, and plate number to suit. And store the png images on the plate - There is plenty of space in flash memory.
Using mosquito_pub certainly works for me…

mosquitto_pub -h 192.168.0.1 -t hasp/plate01/command/jsonl -m "{'page':3,'id':2,'src':'L:/z-128-sunny.png'}"

[Sushibomba]

@paul_c5x4

- service: mqtt.publish
    data:
      topic: hasp/plate01/command/jsonl
      payload: '{"page":3,"id":2,"src":"L:/z-128-sunny.png"}'

And is it also possible to work with placeholders as you mentioned above, similar to what I have now via push to image?

 {%- if not is_state('weather.forecast_home','unavailable') %}
          L:/z-32-{{ state_attr('weather.forecast_home','forecast')[2]['condition'] }}.png
          {%- endif %}

What should the mqtt command look like then?Like this?

- id: openhasp_image
  alias: openhasp time
  trigger:
  - platform: time_pattern
    minutes: /1
  action:
  - service: mqtt.publish
    data:
      topic: hasp/plate01/command/jsonl
      payload: '{"page":3,"id":2,"src": >
          {%- if not is_state('weather.forecast_home','unavailable') %}
          L:/z-32-{{ state_attr('weather.forecast_home','forecast')[2]['condition'] }}.png
          {%- endif %}}'

[paul_c5x4 (Paul)]

Try something like this:

- id: openhasp_image
  alias: openhasp time
  trigger:
  - platform: time_pattern
    minutes: /1
  action:
  - service: mqtt.publish
    data:
      topic: hasp/plate01/command/p3b2.src
      payload: '{%- if not is_state('weather.forecast_home','unavailable') %}
          L:/z-32-{{ state_attr('weather.forecast_home','forecast')[2]['condition'] }}.png
          {%- endif %}}'

This thread may help you with templating json payloads: Construction of JSON payload in automation action - #6 by Wingnut

[Sushibomba]

Too bad it doesn’t work.

I just copied the part into a mqtt.puplish block but it always reports errors

Or do I also have to enter something in the template and not just in the payload?

service: mqtt.publish
metadata: {}
data:
  qos: 0
  retain: false
  topic: hasp/esp32s3wanddisplay1/command/p1b14.src
  payload: {{'{%- if not is_state('weather.forecast_home','unavailable') %} L:/z-32-{{ state_attr('weather.forecast_home','forecast')[2]['condition']}}.png {%- endif %}}'}}

Error rendering data template: UndefinedError: None has no element 2

[Sushibomba]

If I enter this in the payload template, it works.

{{ 'L:/z-128-' + states('weather.forecast_home') + '.png' if not is_state('weather.forecast_home','unavailable') }}

Now I just have to get the if operation formatted correctly, but unfortunately I don’t know how to set the brackets and spaces :-/ How do I get these two things into the payload?

{%- if not is_state('weather.forecast_home','unavailable') %}

and

{%- endif %}

[paul_c5x4 (Paul)]

Sorry, but I can’t write the templates for you. All I can do is show you snippets from my *.yaml and leave you to work on the finer details. Some of what I post may not work, but should show the basic idea.

          {%- if not is_state('weather.forecast_home','unavailable') %}
          L:/z-32-{{ state_attr('weather.forecast_home','forecast')[3]['condition'] }}.png
          {%- endif %}

For debugging, it helps to open a console and use “telnet [plate IP address]”

[Sushibomba]

What does the 3 in your code mean?

This is how it works now, see large image top left:

service: mqtt.publish
data:
  qos: 0
  retain: false
  topic: hasp/esp32s3wanddisplay1/command/p1b14.src
  payload_template: >-
    {{ 'L:/z-128-' + states('weather.forecast_home') + '.png' if not
    is_state('weather.forecast_home','unavailable') }}

Now I only have one problem.

How do I get the small pictures updated via mqtt? The push to image code looks like this:

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

[paul_c5x4 (Paul)]

@Sushibomba

What does the 3 in your code mean?

See this thread: Extracting values from weather.forecast_home and note post number 9 from pedolsky.
The [3] in my snippet refers to the fourth -condition in the list of weather.forecast_home forecast attributes (it is an array count starting from zero).

[Sushibomba]

Ah OK I understand. But you have no idea like me the last part

@Sushibomba

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’}}”

can be turned into an mqtt building block for the small images as shown in the picture, right?

[paul_c5x4 (Paul)]

Try it. The worst that can happen is nothing. It won’t go BANG. And even if it does, you get to keep all the pieces

[Sushibomba]

@paul_c5x4

@Sushibomba

service: mqtt.publish
data:
  qos: 0
  retain: false
  topic: hasp/esp32s3wanddisplay1/command/p1b14.src
  payload_template: >-
    {{ 'L:/z-128-' + states('weather.forecast_home') + '.png' if not
    is_state('weather.forecast_home','unavailable') }}

I wrote again with the initiator of this cool template for my esp32s3 display and he told me that in the case of

{{‘p2b’ + (repeat.index+5) |string +‘7’}}

a dynamic string is written.

This ultimately results in p2b67 , p2b77 , p2b87 … etc.
where repeat.index is the number of repetitions of the while loop. He added 5 so that it fits my ids. I then have to adapt that to my ids and as soon as I have that, I can probably make the topic dynamic.

I did some research on the net and found the following link:

Script Syntax

However, I can’t figure out what my mqtt.publish module needs to look like.

If I then change the topic like this

I always get the error message:

Error rendering data template: UndefinedError: ‘repeat’ is undefined

service: mqtt.publish
data:
  qos: 0
  retain: false
  topic: “hasp/esp32s3wanddisplay1/command/{{‘p2b’ + (repeat.index+5) |string +‘7’}}.src”

What am I doing wrong? Do I now have to add a payload or a payload template or define the repeat.index somewhere in addition?

[stevemann (Stephen Mann (YAML-challenged))]

I got one of these today, but reading this thread has me confused. Some posts different displays. Should the instructions in Post#2 be enough to get me started?

[nickrout]

Openhasp setup is probably better described in the docs, but post 2 is a very good summary, and has the jinja template as an added bonus.

[stevemann (Stephen Mann (YAML-challenged))]

I would appreciate some guidance, please.
I followed the steps in post #2, and this is where I am at:

This is in my configuration.yaml:

#---------- OpenHASP ----------#
openhasp:
  plate:
    objects:
      - obj: "p0b1"  # temperature label on all pages
        properties:
          "text": '{{ states("sensor.attic_sensors_temperature") }}°F'
      - obj: "p1b2"  # light-switch toggle button
        properties:
          "val": '{{ 1 if states("switch.officelight") == "on" else 0 }}'
          "text": '{{ "\uE6E8" if is_state("switch.officelight", "on") else "\uE335" | e }}'
        event:
          "up":
            - service: homeassistant.toggle
              entity_id: "switch.officelight"
              

The light button changes on the screen when it is touched, but the light never toggles.

Also- I am not seeing any MQTT messages on MQTT Explorer.

What did I miss?

[nickrout]

Go to the screen’s web server. Are the dimensions set right?

[stevemann (Stephen Mann (YAML-challenged))]

@nickrout

Are the dimensions set right?

Where?

----------UPDATE----------
The display attributes are set in the configuration.yaml:

#---------- OpenHASP ----------#
template:
  - binary_sensor:
    - name: Display settings
      unique_id: ba031c34-fe93-42cb-8c0c-ebd44cb8750f # 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"
        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"  #Black
        primary_color: "#4193d5" #Moderate Blue
        secondary_color: "#ee9f52"  #Soft orange
        accent_color: "#A175C4" #Slightly desaturated violet
        success_color: "#6cbe58" #Moderate lime green
        warning_color: "#d67430" #Strong orange
        error_color: "#e25628" #Bright red
        radius: "4"
    

[mad-R1]

@stevemann

properties:
          "val": '{{ 1 if states("switch.officelight") == "on" else 0 }}'
          "text": '{{ "\uE6E8" if is_state("switch.officelight", "on") else "\uE335" | e }}'

"val": '{{ 1 if is_state("switch.officelight") == "on" else 0 }}'