Responsible design on mobiles

[curzon01]

The new design with 3 or 4 columns will be unusable on mobile:

(these are screenshots from chrome debugger but it looks same on my Huawei browser and HA app)

[alexdelprete]

It's not designed for mobile, but only for my notebook. From what I see, even 1 column you wouldn't be able to read. Did you try in landscape mode?

I have no idea of how to address a mobile style, the old UI was working fine? We can provide both if needed, but I think I deleted the old one. :)

[curzon01]

Did you try in landscape mode?

yes, it's the same

and landscape mode also has a WAF < 1

[alexdelprete]

and landscape mode also has a WAF < 1

that's a DEFCON 1 situation. I'll see what I can do: give her a Tablet meanwhile. :D

Your wife checks the pool? Wow...mine only complains about the pool. :D

[curzon01]

I'll see what I can do

the built-in horizontal and vertical stacks work pretty well, that's sometimes the problem with the very good-looking third-party tools

give her a Tablet meanwhile

she already has one but uses the phone at all :-)

Your wife checks the pool?

she has a training ;-) I said "You want to use it? You need to know it, I'm not your poolboy"

[alexdelprete]

the built-in horizontal and vertical stacks work pretty well, that's sometimes the problem with the very good-looking third-party tools

did you revert to the old layout? if so, please upload the file to the repo with the -mobile suffix. with lovelace you could create two dashes, one next to the other, one for mobile and one with the new-ui :)

I said "You want to use it? You need to know it, I'm not your poolboy"

I love that approach, but I would never enable her to screw up with my automation stuff. :D

she has read-only mode.

[curzon01]

did you revert to the old layout?

no, I have stopped working on this for time being because of other obligations.

Maintaining different layouts when making changes looks like a lot of work...

[alexdelprete]

Maintaining different layouts when making changes looks like a lot of work...

I agree, but in these case there won't be many changes after a proper release. I will see what I can do to have a "mobile friendly" layout.

[curzon01]

For this I use NeoPool, I am sometimes often on the road, I do not have a tablet or notebook with me.

I just think you can do great things with the third-party tools, but it destroys the basic idea with the lovellace UI. The basic elements are really responsible, I couldn't offer anything else to my customers, they want to have the same content on all devices.

[alexdelprete]

I understand. But it's not the fault of 3rd party tools, it's the way I designed it. The tools only provide better icons, more layout possibilities, etc.

Question: the previous layout was ok on your phone?

[curzon01]

Question: the previous layout was ok on your phone?

also not at all. You can test it yourself on a PC, e.g. with Firefox or Chrome debugger (F12) and the predefined smaller phones like iPhone 5, in the worst case iPhone 4 :-)

[alexdelprete]

also not at all.

good, so I don't have to get back to the previous one.

ideally, the problem is the number of columns right? so I'll have to reduce that to 1 maximum 2. It will probably look awful on a PC, so I will make a separate one.

[alexdelprete]

@curzon01 Norbert, this works perfectly in iPhone >= 6 and very good in iPhone 4 & 5. :)

But you need to install this addon from HACS: layout-card

Install the addon, then paste this in lovelace, I added a new section called mobile so I have 1 for PC and 1 for mobile. :)

  - icon: mdi:pool
    type: custom:vertical-layout
    layout:
      width: 350
    badges: []
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:text-divider-row
            text: HA NeoPool MQTT
          - type: grid
            square: false
            columns: 3
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_water_temperature
                primary_info: state
                secondary_info: name
                name: Temperature
                icon_color: blue
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_ph_data
                primary_info: state
                secondary_info: name
                name: pH
                icon_color: green
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_redox_data
                primary_info: state
                secondary_info: name
                name: Redox
                icon_color: cyan
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.neopool_mqtt_water_temperature
                name: Temperature
                color: var(--blue-color)
              - entity: sensor.neopool_mqtt_ph_data
                name: pH
                color: var(--green-color)
                y_axis: secondary
            hours_to_show: 24
            line_width: 3
            font_size: 50
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.neopool_mqtt_redox_data
                name: Redox
                color: var(--cyan-color)
            hours_to_show: 24
            line_width: 3
            font_size: 50
            animate: true
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
          - type: custom:text-divider-row
            text: Filtration & Light
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-entity-card
                entity: switch.neopool_mqtt_filtration_state
                icon: phu:pool-filter
                name: Filtration
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                double_tap_action:
                  action: none
              - type: custom:mushroom-entity-card
                entity: switch.neopool_mqtt_light
                icon: mdi:light-recessed
                name: Light
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                double_tap_action:
                  action: none
              - type: custom:mushroom-entity-card
                entity: button.neopool_mqtt_clear_error_state
                name: Clear Errors
                icon: mdi:brush-variant
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                double_tap_action:
                  action: none
              - type: custom:mushroom-select-card
                entity: select.neopool_mqtt_filtration_mode
                name: Mode
                icon: mdi:auto-mode
              - type: custom:mushroom-select-card
                entity: select.neopool_mqtt_filtration_speed
                name: Speed
                icon: si:speedtest
              - type: custom:mushroom-select-card
                entity: select.neopool_mqtt_boost_mode
                icon: mdi:lightning-bolt-outline
                name: Boost
          - type: custom:text-divider-row
            text: Setpoints
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-number-card
                entity: number.neopool_mqtt_ph_min
                name: pH Min.
              - type: custom:mushroom-number-card
                entity: number.neopool_mqtt_ph_max
                name: pH Max.
              - type: custom:mushroom-number-card
                entity: number.neopool_mqtt_redox_setpoint
                name: Redox
                icon: phu:pool-electric-lvl
              - type: custom:mushroom-number-card
                entity: number.neopool_mqtt_hydrolysis_setpoint
                name: Hydrolysis
                icon: phu:pool-clorine
          - type: custom:text-divider-row
            text: Hydrolysis
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_hydrolysis_state
                name: State
                icon: mdi:water-sync
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_hydrolysis_data
                name: Production
                icon: phu:pool-clorine
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_hydrolysis_low_production
                icon: mdi:alarm-light-outline
                name: Production Low
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_hydrolysis_cover
                name: Cover
                icon: mdi:window-shutter-cog
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_hydrolysis_runtime_total
                name: Runtime Total
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_hydrolysis_runtime_polarity_changes
                name: Polarity Changes
                icon: mdi:swap-horizontal-circle-outline
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_hydrolysis_runtime_pol1
                name: Runtime Pol1
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_hydrolysis_runtime_pol2
                name: Runtime Pol2
          - type: custom:text-divider-row
            text: pH
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_ph_state
                name: Controller
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_ph_pump
                name: Pump
                icon: phu:pool-filter
          - type: custom:text-divider-row
            text: Power Unit
          - square: false
            type: grid
            columns: 2
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_powerunit_5v
                name: 5V
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_powerunit_12v
                name: 12V
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_powerunit_24_30v
                name: 24V
              - type: custom:mushroom-entity-card
                entity: sensor.neopool_mqtt_powerunit_4_20ma
                name: 4mA
          - type: custom:text-divider-row
            text: Modules
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_ph_module
                name: pH
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_redox_module
                name: Redox
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_hydrolysis_module
                name: Hydrolysis
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_chlorine_module
                name: Chlorine
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_conductivity_module
                name: Conductivity
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_ionization_module
                name: Ionization
          - type: custom:text-divider-row
            text: Relays
          - type: grid
            columns: 2
            square: false
            cards:
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_ph_state
                name: pH
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_filtering_state
                name: Filter
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_light_state
                name: Light
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_acid_state
                name: Acid
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_aux1_state
                name: Aux1
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_aux2_state
                name: Aux2
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_aux3_state
                name: Aux3
              - type: custom:mushroom-entity-card
                entity: binary_sensor.neopool_mqtt_relay_aux4_state
                name: Aux4

[curzon01]

The only difference is that mobile is in a single card. I think it would be better, even for the normal version, if the cards (here separated by the Text Divider Row) were individual cards (like by the default lovelace UI), as the layout would be much more dynamic and you wouldn't need an extra mobile layout.

[curzon01]

Regarding usability: While testing my Tasmota driver I noticed (as a user :-) ) that I have a problem with the used cards (is this the right naming in HA for a single status or switch item?):

I can't intuitively distinguish between status cards and operable cards. I keep clicking on Aux (stupid), which are only states like pH or Redox, but looks exactly like controls. This is visually better solved with the built-in card for switches.

In other words: We should use different cards for states and control elements, what do you think?

[alexdelprete]

with the used cards (is this the right naming in HA for a single status or switch item?):

card is a very generic term to represent the graphical layout of HA entities.

I can't intuitively distinguish between status cards and operable cards. I keep clicking on Aux (stupid), which are only states

No, some days ago I noticed AUX were sensors, but I transformed them in switches, and I didn't place them to the left, where the "command section" is, but I specified in the row divider that they're switches. Maybe I will move them to the left. The design I had in mind (not for mobile) is that on the left you have graphs & commands, on the right the control sensors. Aren't they working as switches for you? What happens when you click on them?

as the layout would be much more dynamic and you wouldn't need an extra mobile layout.

Regarding the layout: it is a common problem I noticed in many lovelace layouts, it's difficult to have a functional layout for PC/tablets that also works well on mobiles. There are experts using a lot of "tricks" to detect the resolution and adapt the layout dynamically, but on the UI stuff I'm a total neanderthalian.

I'm not sure the default HA layout is flexible, but I can prepare a default layout like the first version, with a lot of separate cards (currently I'm using vertical-stack to group cards to create a panel).

[curzon01]

The issue I have here is that you want devide the functionality by place, not by usability. The aux ist only an example (and there are not switches but I used it as bacause it looks the same as eg. filtration on/off). I do not see a difference between pH Value, Redox Value (and all other none switches) and real switch elements. Aux are not switches but it looks like a control so I stupid always click on it .-)

I find it unfortunate to use a fixed design. Output devices are so diverse these days. If I put each element separated by a devider in your design in a separate card, then I have a dynamic design on all devices.

[alexdelprete]

Aux are not switches but it looks like a control so I stupid always click on it .-)

AUX are switches, I told you in the previous post I updated them several days ago from sensors to switches. And I didn't specify any icon, so it's dynamic based on device_class, since they're switches HA uses the dynamic icon of the switch, and the name of the entity is also a good hint:

Check the code in the package if you're not convinced they're switches. :)

    - unique_id: "neopool_mqtt_aux1_switch"
      name: "NeoPool MQTT AUX1 Switch"
      device_class: switch
      command_topic: "cmnd/SmartPool/Backlog"
      state_topic: "tele/SmartPool/SENSOR"
      optimistic: false
      retain: false
      value_template: >-
        {{ value_json.NeoPool.Relay.State[3] }}
      payload_on: "NPAux1 1;Delay 30;Teleperiod"
      payload_off: "NPAux1 0;Delay 30;Teleperiod"
      state_on: 1
      state_off: 0
      availability_topic: "tele/SmartPool/LWT"
      payload_available: "Online"
      payload_not_available: "Offline"
    - unique_id: "neopool_mqtt_aux2_switch"
      name: "NeoPool MQTT AUX2 Switch"
      device_class: switch
      command_topic: "cmnd/SmartPool/Backlog"
      state_topic: "tele/SmartPool/SENSOR"
      optimistic: false
      retain: false
      value_template: >-
        {{ value_json.NeoPool.Relay.State[4] }}
      payload_on: "NPAux2 1;Delay 30;Teleperiod"
      payload_off: "NPAux2 0;Delay 30;Teleperiod"
      state_on: 1
      state_off: 0
      availability_topic: "tele/SmartPool/LWT"
      payload_available: "Online"
      payload_not_available: "Offline"
    - unique_id: "neopool_mqtt_aux3_switch"
      name: "NeoPool MQTT AUX3 Switch"
      device_class: switch
      command_topic: "cmnd/SmartPool/Backlog"
      state_topic: "tele/SmartPool/SENSOR"
      optimistic: false
      retain: false
      value_template: >-
        {{ value_json.NeoPool.Relay.State[5] }}
      payload_on: "NPAux3 1;Delay 30;Teleperiod"
      payload_off: "NPAux3 0;Delay 30;Teleperiod"
      state_on: 1
      state_off: 0
      availability_topic: "tele/SmartPool/LWT"
      payload_available: "Online"
      payload_not_available: "Offline"
    - unique_id: "neopool_mqtt_aux4_switch"
      name: "NeoPool MQTT AUX4 Switch"
      device_class: switch
      command_topic: "cmnd/SmartPool/Backlog"
      state_topic: "tele/SmartPool/SENSOR"
      optimistic: false
      retain: false
      value_template: >-
        {{ value_json.NeoPool.Relay.State[6] }}
      payload_on: "NPAux4 1;Delay 30;Teleperiod"
      payload_off: "NPAux4 0;Delay 30;Teleperiod"
      state_on: 1
      state_off: 0
      availability_topic: "tele/SmartPool/LWT"
      payload_available: "Online"
      payload_not_available: "Offline"

[alexdelprete]

The issue I have here is that you want devide the functionality by place, not by usability.

I don't know what you mean here: I'm organizing the UI, you can rearrange it as you prefer, moving stuff around if you prefer a different organization. I found it simple to have a "command & control" layout: on the left the commands, on the right the controls.

But feel free to design it differently, make a proposal and I will see if I'm able to implement it.

[curzon01]

I'll have a look, but one thing at a time, I'm still busy with the Tasmota driver yet :-)

[alexdelprete]

I'll have a look, but one thing at a time, I'm still busy with the Tasmota driver yet :-)

Don't interrupt, the driver is more important. :)

I tested locally, when I click the Aux1-4 switches the commands are received by tasmota, but they seem to have no effect. I think I disabled the Aux relays on the display when I first configured the Aquarite device. Or maybe there's a problem with the Berry script...let me know your findings. :)

I updated the repo, v2.1 of the package and also the UI files.

[curzon01]

My experience is setting the Aux with the register I'v documented does not work on all SV devices. I have two users with systems that can only switch Aux1, but not Aux2-4 and I don't know why. SV must have changed the firmware in the meantime, so switching the auxes is not 100% guaranteed.

[alexdelprete]

so switching the auxes is not 100% guaranteed.

Interesting. Maybe we should put a note in the readme about this.

Are you implementing the unsolicited SENSOR functionality? :)

[curzon01]

Are you implementing the unsolicited SENSOR functionality? :)

yes

[curzon01]

solved by last commit containing responsive layout