Custom widget not able to run actions

Setup, Configuration and Use Widgets
1

Hi All,

Not sure if this is the correct area for this post.
I have made a custom widget which is working pretty well, this is what it looks like:

image
image283×289 17.5 KB

It is showing my total electricity usage in the middle, with the 3 sub areas underneath showing each of my 3 electricity phases.
Also, the top band shows generation (currently zero).

I would like to be able to click on different parts of the diagram to show more detail (pretty standard!).

However, I cannot get any actions to trigger, I have played with z-index and tried to see using the browser inspect, but I can’t seem to find the issue.

Can someone help?

Here is the code:

uid: Energy_Meter
tags:
  - list
props:
  parameters:
    - default: "350"
      description: Visual size of the control in px (default 400)
      label: size [px]
      name: size
      required: false
      type: TEXT
    - context: item
      default: ssOwl_Phase1
      description: Red
      label: Item
      name: RedActual
      required: false
      type: TEXT
    - context: item
      default: ssOwl_Phase2
      description: White
      label: Item
      name: WhiteActual
      required: false
      type: TEXT
    - context: item
      default: ssOwl_Phase3
      description: Black
      label: Item
      name: BlackActual
      required: false
      type: TEXT
    - context: item
      default: ssOwl_Energy
      description: Total
      label: Item
      name: TotalActual
      required: false
      type: TEXT
    - context: item
      default: Rez_External_Switch_Electric_meter_watts
      description: Generated
      label: Item
      name: TotalGenerated
      required: false
      type: TEXT
timestamp: Sep 25, 2024, 9:54:56 PM
component: f7-card
config:
  action: popup
  actionPage: page:Energy_Red
  actionPageTransition: f7-parallax
slots:
  default:
    - component: f7-card-content
      config:
        style:
          z-index: 1
      slots:
        default:
          - component: oh-context
            config:
              functions:
                consumptionColorPhase: "=(x) => (x >= 3000) ? '#ff3333' : (x >= 2500) ?
                  '#ff7a33' : (x >= 2000) ? '#ff8633' : (x >= 1500) ? '#ff9633'
                  : (x >= 1300) ? '#ffa533' : (x >= 1100) ? '#ffaf33' : (x >=
                  900) ? '#ffbb33' : (x >= 700) ? '#ffc133' : (x >= 500) ?
                  '#ffc733' : (x >= 400) ? '#ffd133' : (x >= 300) ? '#ffda33' :
                  (x >= 200) ? '#ffe333' : (x >= 100) ? '#ffec33' : (x >= 0) ?
                  '#fcff33' : 'white'"
                consumptionColorTotal: "=(x) => (x >= 7000) ? '#ff3333' : (x >= 6000) ?
                  '#ff7a33' : (x >= 5500) ? '#ff8633' : (x >= 5000) ? '#ff9633'
                  : (x >= 4500) ? '#ffa533' : (x >= 4000) ? '#ffaf33' : (x >=
                  3500) ? '#ffbb33' : (x >= 3000) ? '#ffc133' : (x >= 2500) ?
                  '#ffc733' : (x >= 2000) ? '#ffd133' : (x >= 1500) ? '#ffda33'
                  : (x >= 1000) ? '#ffe333' : (x >= 500) ? '#ffec33' : (x >= 0)
                  ? '#fcff33' : 'white'"
                genColor: "=(x) => (x <= -600) ? '#00ff00' : (x <= -550) ? '#17ef19' : (x <=
                  -500) ? '#25e527' : (x <= -450) ? '#2fdb31' : (x <= -400) ?
                  '#36d137' : (x <= -350) ? '#3bc73d' : (x <= -300) ? '#3fbb40'
                  : (x <= -250) ? '#44b245' : (x <= -200) ? '#44a645' : (x <=
                  -150) ? '#459d46' : (x <= -100) ? '#449145' : (x <= -50)
                  ?  '#428243' : (x <= -20) ?  '#407641' : (x <= 0)
                  ?   '#406041' : 'white'"
              variables:
                test: 56
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - justify-content-center
                    resizable-absolute: true
                    resizableFixed: true
                    action: popup
                    actionPage: page:Energy_Red
                  slots:
                    default:
                      - component: f7-block
                        config:
                          action: popup
                          actionPage: page:Energy_Red
                          actionPageTransition: f7-parallax
                          class: energy
                          style:
                            --f7-block-margin-vertical: 0px
                            --f7-block-padding-horizontal: 0px
                            --f7-block-padding-vertical: 0px
                            background: rgb(0,60,77)
                            border: 6px solid rgb(60, 60, 77)
                            border-radius: 50%
                            flex-shrink: 0
                            height: "=props.size ? Number(props.size)+'px' : '400px'"
                            padding-left: 0px
                            width: "=props.size ? Number(props.size)+'px' : '400px'"
                        slots:
                          default:
                            - component: oh-gauge
                              config:
                                comment: ====================Total==================
                                action: popup
                                actionPage: page:Energy_Red
                                borderBgColor: black
                                borderColor: =fn.consumptionColorTotal(Number.parseFloat(items[props.TotalActual].state))
                                borderWidth: 10
                                item: =props.TotalActual
                                max: 6000
                                style:
                                  height: "=props.size ? Number(props.size)+'px' : '400px'"
                                  left: 0%
                                  position: absolute
                                  top: 7%
                                  width: "=props.size ? Number(props.size)+'px' : '400px'"
                                  z-Index: 1
                                type: circle
                                valueFontSize: 60
                                valueFontWeight: bold
                                valueText: =@props.TotalActual
                                valueTextColor: rgb(180,180,180)
                            - component: oh-gauge
                              config:
                                comment: =====================Red=====================
                                action: popup
                                actionPage: page:Energy_Red
                                actionPageTransition: f7-parallax
                                borderBgColor: black
                                borderColor: =fn.consumptionColorPhase(Number.parseFloat(items[props.RedActual].state))
                                borderWidth: 10
                                item: =props.RedActual
                                labelFontSize: 25
                                labelText: Red
                                labelTextColor: rgb(180,180,180)
                                max: 2000
                                style:
                                  height: "=props.size ? Number(props.size)*0.4+'px' : '400px'"
                                  left: 0%
                                  position: absolute
                                  top: 50%
                                  transform: translate(-27%,-10%) rotate(68deg)
                                  width: "=props.size ? Number(props.size)*0.4+'px' : '400px'"
                                  z-Index: 999 !important
                                type: semicircle
                                valueFontSize: 25
                                valueFontWeight: bold
                                valueText: =@props.RedActual
                                valueTextColor: rgb(180,180,180)
                            - component: oh-gauge
                              config:
                                comment: ====================White====================
                                action: popup
                                actionPage: page:Energy_White
                                actionPageTransition: f7-parallax
                                borderBgColor: black
                                borderColor: =fn.consumptionColorPhase(Number.parseFloat(items[props.WhiteActual].state))
                                borderWidth: 10
                                item: =props.WhiteActual
                                labelFontSize: 25
                                labelText: White
                                labelTextColor: rgb(180,180,180)
                                max: 2000
                                style:
                                  height: "=props.size ? Number(props.size)*0.4+'px' : '400px'"
                                  left: 3%
                                  position: absolute
                                  top: 50%
                                  transform: translate(170%,-10%) rotate(292deg)
                                  width: "=props.size ? Number(props.size)*0.4+'px' : '400px'"
                                  z-Index: 20
                                type: semicircle
                                valueFontSize: 25
                                valueFontWeight: bold
                                valueText: =@props.WhiteActual
                                valueTextColor: rgb(180,180,180)
                            - component: oh-gauge
                              config:
                                comment: ====================Black====================
                                action: popup
                                actionPage: page:Energy_Black
                                actionPageTransition: f7-parallax
                                borderBgColor: black
                                borderColor: =fn.consumptionColorPhase(Number.parseFloat(items[props.BlackActual].state))
                                borderWidth: 10
                                item: =props.BlackActual
                                labelFontSize: 25
                                labelText: Black
                                labelTextColor: rgb(180,180,180)
                                max: 2000
                                style:
                                  height: "=props.size ? Number(props.size)*0.4+'px' : '400px'"
                                  left: 30%
                                  position: absolute
                                  top: 73%
                                  width: "=props.size ? Number(props.size)*0.4+'px' : '400px'"
                                  z-Index: 20
                                type: semicircle
                                valueFontSize: 25
                                valueFontWeight: bold
                                valueText: =@props.BlackActual
                                valueTextColor: rgb(180,180,180)
                            - component: oh-gauge
                              config:
                                comment: ==================== Generated ====================
                                action: popup
                                actionPage: page:Energy_Black
                                actionPageTransition: f7-parallax
                                borderBgColor: =fn.genColor(Number.parseFloat(items[props.TotalGenerated].state))
                                borderColor: black
                                borderWidth: 10
                                item: =props.TotalGenerated
                                labelFontSize: 16
                                labelText: " "
                                max: 1
                                min: -600
                                style:
                                  borderBgColor: -webkit-linear-gradient(left, rgb(0, 255, 0) 20%,rgb(40, 10, 40)
                                    100%)
                                  height: "=props.size ? Number(props.size)*0.44+'px' : '400px'"
                                  left: 0%
                                  position: absolute
                                  top: 6%
                                  transform: rotateY(0deg) scale(118%,118%)
                                  width: "=props.size ? Number(props.size)+'px' : '400px'"
                                  z-index: 1
                                type: semicircle
                                valueFontSize: 20
                                valueText: =@props.TotalGenerated.state
                                valueTextColor: =fn.genColor(Number.parseFloat(items[props.TotalGenerated].state))
2

  1. Actions are specifically an OH addition to the vue components. This means that actions cannot be defined for any of the f7 components. This is why you are not seeing actions triggered on the f7 rows or blocks.

  2. Actions are only defined for some of the oh specific components, not all of them. In general, components that have some other already built-in interaction (such as a toggle) do not have actions because there would be a conflict between the click for built-in interaction and click for custom action. This isn’t a 100% hard rule but it gives you an idea; there may be other reasons a particular component doesn’t support actions ranging from some technical issue to the devs just didn’t think anyone would ever use actions on that component. You can always check the component reference to see which ones can use actions and which cannot. Notably, the oh-gauge does not support actions and that is why you are not seeing actions triggered on those components.

The typical solution to this problem is to use one of the action supporting components as a container for your other component, and that will work just fine in this case since the gauge is a read only component anyway. You’ll have to move around some of the styling, of course, since the positioning will all have to happen on the links containing the gauges instead of the gauges themselves.

Edit: Oh yeah, one of the widget categories would have been a better choice, I’ve moved this topic there for you. The development topic is for actual development of the OH itself, not these customization features.

3

Perfect - understood.

Thanks @JustinG

4

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.