OH4: oh-gauge action

[Mark_VG (Mark)]

I would like to be able to click on an oh-gauge to perform an action (Popup a Page or Analyzer).

This topic was asked once before:

Action on oh-gauge

Is there a way to make a gauge clickable to show eg the analyzer? I don’t see it on the docs and action and actionAnalyzerItems are not available. I see that it was implemented for oh-gauge-card (Adding a click action to oh-gauge), but doesn’t work for me. I have some (ugly) gauge charts and would like to view more (histortic) details when I click on them. [image]

and Just gave advise:

@JustinG

You can easily simulate having an action on the gauge by just over-laying an oh-button with no text or icon and then using the button’s action sequence.

I am however not sure how to “overlay” the oh-button on the oh-gauge. If I put the oh-button in the default slot the button is not shown and does not seem to work.

          - component: oh-gauge
            config:
              borderBgColor: gray
              borderColor: green
              borderWidth: 20
              class:
                - margin-top
                - margin-bottom
              item: SunSynk_MPPT_TOTAL
              labelText: MPPT Total
              max: 6600
              size: 150
              min: 0
              style:
                left: 110px
              type: semicircle
              valueFontSize: 15
              valueTextColor: green
            slots: {}
          - component: oh-button
            config:
              action: navigate
              actionPage: page:SunSynk_MPPT_TOTAL
              text: OPEN

Produces:

And the OPEN navigates to a page.

However not sure hwo to OVERLAY the button on the oh-gauge so it simulates an oh-gauge action?

          - component: oh-gauge
            config:
              borderBgColor: gray
              borderColor: green
              borderWidth: 20
              class:
                - margin-top
                - margin-bottom
              item: SunSynk_MPPT_TOTAL
              labelText: MPPT Total
              max: 6600
              size: 150
              min: 0
              style:
                left: 110px
              type: semicircle
              valueFontSize: 15
              valueTextColor: green
            slots:
              default:
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: page:SunSynk_MPPT_TOTAL
                    text: OPEN

Produces:

With no button activity.

Once again any advise will be appreciated.
Mark

[JustinG]

Sorry the previous answer wasn’t too well fleshed out.

I’m traveling right now, so I can’t put in as much detail as usual, but the best option should just be to create the button and then put the gauge in the default slot of the button.

You could also, is the button use style settings (absolute position with appropriate her m height and width settings) to just position the button on top of the gauge.

[Mark_VG (Mark)]

@JustinG

I’m traveling right now, so I can’t put in as much detail as usual, but the best option should just be to create the button and then put the gauge in the default slot of the button

Thank you Justin. Appreciate the response while you are away. You advise has helped a ton. Just never thought to do it the “other way round”.

The oh-button does not produce a good looking result - the height seems to be restricted to the height of the oh-button, so I have changed to oh-link which works nicely:

          - component: oh-link
            config:
              action: navigate
              actionPage: page:SunSynk_MPPT_TOTAL
            slots:
              default:
                - component: oh-gauge
                  config:
                    borderBgColor: gray
                    borderColor: green
                    borderWidth: 20
                    class:
                      - margin-top
                      - margin-bottom
                    style:
                      left: 110px
                    item: SunSynk_MPPT_TOTAL
                    labelText: MPPT Total
                    max: 6600
                    size: 150
                    min: 0
                    type: semicircle
                    valueFontSize: 15
                    valueTextColor: green

Safe travels.