Why Is My Item Not Showing Up in My OpenHAB Widget?

milo · November 5, 2024, 9:12pm

Hello OpenHAB community!

I’m working on a widget where I want to display a specific item using the following code:

- component: oh-list-item
  config:
    icon: =props.SystemOHVoltageIcon
    iconColor: gray
    style:
      --f7-list-item-after-font-size: 15px
      --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
      --f7-list-item-subtitle-font-size: 14px
      --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
      --f7-list-item-title-font-size: 15px
      --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
    title: =props.SystemOHVoltageTitle
    item: =props.SystemOHVoltageItem
    visible: true

I’m expecting to see an item with a title, icon, and color adjustments based on theme options. However, it’s not appearing in the widget, even though the visible: true attribute is set.

Things I’ve Checked:

Item Name: Ensured that =props.SystemOHVoltageItem points to a valid item in OpenHAB.
Visibility: Confirmed that visible: true is specified, so visibility shouldn’t be the issue.
Theme Options: Verified that themeOptions.dark is set appropriately in my theme settings.
Other Components: Other components in the same widget are displaying fine.

Possible Reasons?

Could it be an issue with:

Dynamic Properties: Maybe =props.SystemOHVoltageTitle or =props.SystemOHVoltageItem isn’t resolving correctly?
Permissions: Are there any permissions that could restrict viewing this item in the widget?
Theme Settings: Could there be a theme issue causing display problems with the specific colors or styles?

I’d appreciate any insights or suggestions to debug this. Thank you in advance!

ubeaut · November 5, 2024, 9:24pm

Where is the whole code?
Where are the props being set?
For example:

uid: Solar_animation
tags:
  - Energy
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT

milo · November 5, 2024, 9:39pm

- default: iconify:mdi:high-voltage-outline
      description: Voltage Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHVoltageIcon
      required: false
      type: TEXT
      groupName: network
    - default: Voltage
      description: Voltage item
      label: Item
      name: SystemOHVoltageTitle
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Voltage item
      label: Item
      name: SystemOHVoltageItem
      required: false
      type: TEXT
      groupName: network

uid: Cell_system_Card_1
tags: []
props:
  parameters:
    - default: Raspberry Pi OH
      description: Title
      label: Title
      name: SystemOHTitle
      required: false
      type: TEXT
      groupName: header
    - default: iconify:mdi:raspberry-pi
      description: System Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHIcon
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Cpu Load % item
      label: Item
      name: CPULoadItem
      required: false
      type: TEXT
      groupName: header
    - default: Uptime
      description: Uptime Title
      label: Title
      name: UptimeTitle
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: System Uptime item
      label: Item
      name: SystemUptimeItem
      required: false
      type: TEXT
      groupName: header
    - default: Cpu
      description: Cpu title
      label: Title
      name: SystemOHCpuTitle
      required: false
      type: TEXT
      groupName: cpu
    - default: iconify:whh:cpu
      description: Cpu Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHCpuIcon
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: CPU Temperature item
      label: Item
      name: CPUTemperatureItem
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load1 item
      label: Item
      name: CPULoad1Item
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load 5 item
      label: Item
      name: CPULoad5Item
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load 15 item
      label: Item
      name: CPULoad15Item
      required: false
      type: TEXT
      groupName: cpu
    - default: Memory
      description: Memory title
      label: Title
      name: SystemOHMemoryTitle
      required: false
      type: TEXT
      groupName: memory
    - default: iconify:fa-solid:memory
      description: Memory Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHMemoryIcon
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Total item
      label: Item
      name: MemoryTotalItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Used item
      label: Item
      name: MemoryUsedItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Used Percent item
      label: Item
      name: MemoryUsedPercentItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Available item
      label: Item
      name: MemoryAvailableItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Available Percent item
      label: Item
      name: MemoryAvailablePercentItem
      required: false
      type: TEXT
      groupName: memory
    - default: Storage
      description: Storage title
      label: Title
      name: SystemOHStorageTitle
      required: false
      type: TEXT
      groupName: storage
    - default: iconify:bi:device-ssd-fill
      description: Storage Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHStorageIcon
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Total item
      label: Item
      name: StorageTotalItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Used item
      label: Item
      name: StorageUsedItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Used Percent item
      label: Item
      name: StorageUsedPercentItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Available item
      label: Item
      name: StorageAvailableItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Available Percent item
      label: Item
      name: StorageAvailablePercentItem
      required: false
      type: TEXT
      groupName: storage
    - default: Swap
      description: Swap title
      label: Title
      name: SystemOHSwapTitle
      required: false
      type: TEXT
      groupName: swap
    - default: iconify:ic:outline-swap-calls
      description: Swap Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHSwapIcon
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Total item
      label: Item
      name: SwapTotalItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Used item
      label: Item
      name: SwapUsedItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Used Percent item
      label: Item
      name: SwapUsedPercentItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Available item
      label: Item
      name: SwapAvailableItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Available Percent item
      label: Item
      name: SwapAvailablePercentItem
      required: false
      type: TEXT
      groupName: swap
    - default: Network
      description: Network title
      label: Title
      name: SystemOHNetworkTitle
      required: false
      type: TEXT
      groupName: network
    - default: iconify:bi:ethernet
      description: Network Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHNetworkIcon
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Network Data Received item
      label: Item
      name: NetworkDataReceivedItem
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Network Data Sent item
      label: Item
      name: NetworkDataSentItem
      required: false
      type: TEXT
      groupName: network
    - default: iconify:mdi:high-voltage-outline
      description: Voltage Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHVoltageIcon
      required: false
      type: TEXT
      groupName: network
    - default: Voltage
      description: Voltage item
      label: Item
      name: SystemOHVoltageTitle
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Voltage item
      label: Item
      name: SystemOHVoltageItem
      required: false
      type: TEXT
      groupName: network
    - default: Reboot
      description: Reboot command Title
      label: Title
      name: RebootCommandTitle
      required: false
      type: TEXT
      groupName: command
    - context: item
      description: Reboot command switch item
      label: Item
      name: ExecRebootCommandItem
      required: false
      type: TEXT
      groupName: command
    - default: Power off
      description: Power off command Title
      label: Title
      name: PowerOffCommandTitle
      required: false
      type: TEXT
      groupName: command
    - context: item
      description: Power off command switch item
      label: Item
      name: ExecPoweroffCommandItem
      required: false
      type: TEXT
      groupName: command
  parameterGroups:
    - name: header
      label: Header
    - name: gauge
      label: Gauges CPU, Memory & Storage
    - name: cpu
      label: Cpu
    - name: memory
      label: Memory
    - name: storage
      label: Storage
    - name: swap
      label: Swap
    - name: network
      label: Network
    - name: command
      label: Commands
timestamp: Nov 5, 2024, 10:09:58 PM
component: oh-context
config:
  constants:
    widgetID: =Number.parseInt(Math.random()*8912).toString(16).padStart(4, '0')
slots:
  default:
    - component: f7-card
      config:
        style:
          background-color: "=props.bgcolor ? props.bgcolor : ''"
          border-radius: var(--f7-card-expandable-border-radius)
          box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
          height: 150px
          margin-left: 5px
          margin-right: 5px
          noShadow: false
          padding: 0px
      slots:
        content:
          - component: oh-context
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: row
                left: 16px
                position: absolute
                top: -5px
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: =props.icon
                    size: 18
                    style:
                      margin-right: 10px
                    visible: "=props.icon ? true : false"
                - component: Label
                  config:
                    style:
                      font-size: 12px
                      margin-top: 0px
                    text: "=props.title ? props.title : ''"
          - component: f7-block
            config:
              style:
                bottom: -15px
                flex-direction: row
                left: 16px
                position: absolute
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: 17px
                      font-weight: 600
                      margin-left: 0px
                      margin-top: 0px
                    text: "=props.header ? props.header : 'Set Props'"
          - component: f7-button
            config:
              popupOpen: =`.popup-${const.widgetID}`
              style:
                bottom: -115px
                left: calc(100% - 8em)
                position: absolute
              text: Einstellungen
          - component: f7-popup
            config:
              class: =`popup-${const.widgetID}`
            slots:
              default:
                - component: f7-page
                  config: {}
                  slots:
                    default:
                      - component: oh-list
                        config:
                          mediaList: true
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                after: =@props.CPULoadItem
                                icon: =props.SystemOHIcon
                                style:
                                  --f7-list-item-after-font-size: 16px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(80,80,80)'"
                                subtitle: '="Uptime: " + items[props.SystemUptimeItem].displayState'
                                title: =props.SystemOHTitle
                            - component: f7-block
                              config:
                                visible: true
                                style:
                                  margin: 0px
                                  padding: 10px
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      style:
                                        text-align: center
                                    slots:
                                      default:
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "=(Number.parseFloat(items[props.CPULoadItem].state) >= '75') ?
                                                    '#ff3b30' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '50') ? '#ff6b22' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '25') ? '#ffcc00' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '0') ? '#4cd964' : 'gray'"
                                                  borderWidth: 10
                                                  item: =props.CPULoadItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHCpuTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.CPULoadItem
                                                  size: 100
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "#9c27b0"
                                                  borderWidth: 10
                                                  item: =props.MemoryUsedPercentItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHMemoryTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.MemoryUsedPercentItem
                                                  size: 100
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "#5ac8fa"
                                                  borderWidth: 10
                                                  item: =props.StorageUsedPercentItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHStorageTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.StorageUsedPercentItem
                                                  size: 100
                            - component: oh-list-item
                              config:
                                action: analyzer
                                actionAnalyzerCoordSystem: time
                                actionAnalyzerItems: =[props.CPULoad1Item, props.CPULoad5Item,
                                  props.CPULoad15Item, props.CPUTemperatureItem]
                                after: =items[props.CPUTemperatureItem].displayState
                                icon: =props.SystemOHCpuIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.CPULoad1Item].state + " - " +
                                  items[props.CPULoad5Item].state + " - " +
                                  items[props.CPULoad15Item].state
                                title: =props.SystemOHCpuTitle
                                visible: true
                            - component: oh-list-item
                              config:
                                after: =items[props.MemoryTotalItem].displayState
                                icon: =props.SystemOHMemoryIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.MemoryUsedItem].displayState + " ("
                                  +  items[props.MemoryUsedPercentItem].displayState
                                  + ") - " +
                                  items[props.MemoryAvailableItem].displayState
                                  + " ("

ubeaut · November 6, 2024, 1:02am

Is that the current code?
There is no f7: =props.icon

SystemOHVoltageIcon is not referenced anywhere in the code provided as far as I can see.

hmerk · November 6, 2024, 6:25am

As @ubeaut already wrote, this does not exist.
Using oh-icon component, you can prefix the icon with „f7:“ to indicate it to be a f7 icon. (likewise material: or iconify:)
You are using the f7-icon component, therefore the correct syntax would be

- component: f7-icon
  config:
    icon: =props.“whateverIcon“

milo · November 6, 2024, 6:51am

here is the whole code changed te icon but still not visible…

uid: Cell_system_Card_1
tags: []
props:
  parameters:
    - default: Raspberry Pi OH
      description: Title
      label: Title
      name: SystemOHTitle
      required: false
      type: TEXT
      groupName: header
    - default: iconify:mdi:raspberry-pi
      description: System Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHIcon
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Cpu Load % item
      label: Item
      name: CPULoadItem
      required: false
      type: TEXT
      groupName: header
    - default: Uptime
      description: Uptime Title
      label: Title
      name: UptimeTitle
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: System Uptime item
      label: Item
      name: SystemUptimeItem
      required: false
      type: TEXT
      groupName: header
    - default: Cpu
      description: Cpu title
      label: Title
      name: SystemOHCpuTitle
      required: false
      type: TEXT
      groupName: cpu
    - default: iconify:whh:cpu
      description: Cpu Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHCpuIcon
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: CPU Temperature item
      label: Item
      name: CPUTemperatureItem
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load1 item
      label: Item
      name: CPULoad1Item
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load 5 item
      label: Item
      name: CPULoad5Item
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load 15 item
      label: Item
      name: CPULoad15Item
      required: false
      type: TEXT
      groupName: cpu
    - default: Memory
      description: Memory title
      label: Title
      name: SystemOHMemoryTitle
      required: false
      type: TEXT
      groupName: memory
    - default: iconify:fa-solid:memory
      description: Memory Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHMemoryIcon
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Total item
      label: Item
      name: MemoryTotalItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Used item
      label: Item
      name: MemoryUsedItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Used Percent item
      label: Item
      name: MemoryUsedPercentItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Available item
      label: Item
      name: MemoryAvailableItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Available Percent item
      label: Item
      name: MemoryAvailablePercentItem
      required: false
      type: TEXT
      groupName: memory
    - default: Storage
      description: Storage title
      label: Title
      name: SystemOHStorageTitle
      required: false
      type: TEXT
      groupName: storage
    - default: iconify:bi:device-ssd-fill
      description: Storage Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHStorageIcon
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Total item
      label: Item
      name: StorageTotalItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Used item
      label: Item
      name: StorageUsedItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Used Percent item
      label: Item
      name: StorageUsedPercentItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Available item
      label: Item
      name: StorageAvailableItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Available Percent item
      label: Item
      name: StorageAvailablePercentItem
      required: false
      type: TEXT
      groupName: storage
    - default: Swap
      description: Swap title
      label: Title
      name: SystemOHSwapTitle
      required: false
      type: TEXT
      groupName: swap
    - default: iconify:ic:outline-swap-calls
      description: Swap Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHSwapIcon
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Total item
      label: Item
      name: SwapTotalItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Used item
      label: Item
      name: SwapUsedItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Used Percent item
      label: Item
      name: SwapUsedPercentItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Available item
      label: Item
      name: SwapAvailableItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Available Percent item
      label: Item
      name: SwapAvailablePercentItem
      required: false
      type: TEXT
      groupName: swap
    - default: Network
      description: Network title
      label: Title
      name: SystemOHNetworkTitle
      required: false
      type: TEXT
      groupName: network
    - default: iconify:bi:ethernet
      description: Network Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHNetworkIcon
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Network Data Received item
      label: Item
      name: NetworkDataReceivedItem
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Network Data Sent item
      label: Item
      name: NetworkDataSentItem
      required: false
      type: TEXT
      groupName: network
    - default: iconify:mdi:high-voltage-outline
      description: Voltage Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHVoltageIcon
      required: false
      type: TEXT
      groupName: network
    - default: Voltage
      description: Voltage item
      label: Item
      name: SystemOHVoltageTitle
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Voltage item
      label: Item
      name: SystemOHVoltageItem
      required: false
      type: TEXT
      groupName: network
    - default: Reboot
      description: Reboot command Title
      label: Title
      name: RebootCommandTitle
      required: false
      type: TEXT
      groupName: command
    - context: item
      description: Reboot command switch item
      label: Item
      name: ExecRebootCommandItem
      required: false
      type: TEXT
      groupName: command
    - default: Power off
      description: Power off command Title
      label: Title
      name: PowerOffCommandTitle
      required: false
      type: TEXT
      groupName: command
    - context: item
      description: Power off command switch item
      label: Item
      name: ExecPoweroffCommandItem
      required: false
      type: TEXT
      groupName: command
  parameterGroups:
    - name: header
      label: Header
    - name: gauge
      label: Gauges CPU, Memory & Storage
    - name: cpu
      label: Cpu
    - name: memory
      label: Memory
    - name: storage
      label: Storage
    - name: swap
      label: Swap
    - name: network
      label: Network
    - name: command
      label: Commands
timestamp: Nov 5, 2024, 10:09:58 PM
component: oh-context
config:
  constants:
    widgetID: =Number.parseInt(Math.random()*8912).toString(16).padStart(4, '0')
slots:
  default:
    - component: f7-card
      config:
        style:
          background-color: "=props.bgcolor ? props.bgcolor : ''"
          border-radius: var(--f7-card-expandable-border-radius)
          box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
          height: 150px
          margin-left: 5px
          margin-right: 5px
          noShadow: false
          padding: 0px
      slots:
        content:
          - component: oh-context
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: row
                left: 16px
                position: absolute
                top: -5px
            slots:
              default:
                - component: f7-icon
                  config:
                    icon: =props.icon
                    size: 18
                    style:
                      margin-right: 10px
                    visible: "=props.icon ? true : false"
                - component: Label
                  config:
                    style:
                      font-size: 12px
                      margin-top: 0px
                    text: "=props.title ? props.title : ''"
          - component: f7-block
            config:
              style:
                bottom: -15px
                flex-direction: row
                left: 16px
                position: absolute
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: 17px
                      font-weight: 600
                      margin-left: 0px
                      margin-top: 0px
                    text: "=props.header ? props.header : 'Set Props'"
          - component: f7-button
            config:
              popupOpen: =`.popup-${const.widgetID}`
              style:
                bottom: -115px
                left: calc(100% - 8em)
                position: absolute
              text: Einstellungen
          - component: f7-popup
            config:
              class: =`popup-${const.widgetID}`
            slots:
              default:
                - component: f7-page
                  config: {}
                  slots:
                    default:
                      - component: oh-list
                        config:
                          mediaList: true
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                after: =@props.CPULoadItem
                                icon: =props.SystemOHIcon
                                style:
                                  --f7-list-item-after-font-size: 16px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(80,80,80)'"
                                subtitle: '="Uptime: " + items[props.SystemUptimeItem].displayState'
                                title: =props.SystemOHTitle
                            - component: f7-block
                              config:
                                visible: true
                                style:
                                  margin: 0px
                                  padding: 10px
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      style:
                                        text-align: center
                                    slots:
                                      default:
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "=(Number.parseFloat(items[props.CPULoadItem].state) >= '75') ?
                                                    '#ff3b30' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '50') ? '#ff6b22' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '25') ? '#ffcc00' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '0') ? '#4cd964' : 'gray'"
                                                  borderWidth: 10
                                                  item: =props.CPULoadItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHCpuTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.CPULoadItem
                                                  size: 100
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "#9c27b0"
                                                  borderWidth: 10
                                                  item: =props.MemoryUsedPercentItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHMemoryTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.MemoryUsedPercentItem
                                                  size: 100
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "#5ac8fa"
                                                  borderWidth: 10
                                                  item: =props.StorageUsedPercentItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHStorageTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.StorageUsedPercentItem
                                                  size: 100
                            - component: oh-list-item
                              config:
                                action: analyzer
                                actionAnalyzerCoordSystem: time
                                actionAnalyzerItems: =[props.CPULoad1Item, props.CPULoad5Item,
                                  props.CPULoad15Item, props.CPUTemperatureItem]
                                after: =items[props.CPUTemperatureItem].displayState
                                icon: =props.SystemOHCpuIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.CPULoad1Item].state + " - " +
                                  items[props.CPULoad5Item].state + " - " +
                                  items[props.CPULoad15Item].state
                                title: =props.SystemOHCpuTitle
                                visible: true
                            - component: oh-list-item
                              config:
                                after: =items[props.MemoryTotalItem].displayState
                                icon: =props.SystemOHMemoryIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.MemoryUsedItem].displayState + " ("
                                  +  items[props.MemoryUsedPercentItem].displayState
                                  + ") - " +
                                  items[props.MemoryAvailableItem].displayState
                                  + " ("
                                  +  items[props.MemoryAvailablePercentItem].displayState
                                  + ")"
                                title: =props.SystemOHMemoryTitle
                                visible: =!props.HideMemory
                            - component: oh-list-item
                              config:
                                after: =items[props.StorageTotalItem].displayState
                                icon: =props.SystemOHStorageIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.StorageUsedItem].displayState + " ("
                                  +  items[props.StorageUsedPercentItem].displayState
                                  + ") - " +
                                  items[props.StorageAvailableItem].displayState
                                  + " ("
                                  +  items[props.StorageAvailablePercentItem].displayState
                                  + ")"
                                title: =props.SystemOHStorageTitle
                                visible: =!props.HideStorage
                            - component: oh-list-item
                              config:
                                after: =items[props.SwapTotalItem].displayState
                                icon: =props.SystemOHSwapIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.SwapUsedItem].displayState + " ("
                                  +  items[props.SwapUsedPercentItem].displayState
                                  + ") - " +
                                  items[props.SwapAvailableItem].displayState +
                                  " ("
                                  +  items[props.SwapAvailablePercentItem].displayState
                                  + ")"
                                title: =props.SystemOHSwapTitle
                                visible: =!props.HideSwap
                            - component: oh-list-item
                              config:
                                icon: =props.SystemOHNetworkIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: ="▼" + items[props.NetworkDataReceivedItem].displayState + " ▲" +
                                  items[props.NetworkDataSentItem].displayState
                                title: =props.SystemOHNetworkTitle
                                visible: true
                            - component: oh-list-item
                              config:
                                icon: =props.SystemOHVoltageIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                title: =props.SystemOHVoltageTitle
                                item: =props.SystemOHVoltageItem
                                visible: true
                      - component: f7-button
                        config:
                          popupClose: true
                          text: Schließen
          - component: oh-toggle
            config:
              item: =props.SwitchGroupItem
              style:
                position: absolute
                right: 20px
                top: 15px
              visible: "=props.SwitchGroupItem ? true : false"

hmerk · November 6, 2024, 8:02am

What Icon do you want to show?
There is no props.icon!!!
The first icon parameter is
props. SystemOHIcon
As the default is an iconify icon, you cannot use the f7-icon component, use the oh-icon instead, like done in the original widget!

milo · November 6, 2024, 9:02am

Sorry forget this point I copied it from another widget…

uid: Cell_system_Card_1
tags: []
props:
  parameters:
    - default: Raspberry Pi OH
      description: Title
      label: Title
      name: SystemOHTitle
      required: false
      type: TEXT
      groupName: header
    - default: iconify:mdi:raspberry-pi
      description: System Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHIcon
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Cpu Load % item
      label: Item
      name: CPULoadItem
      required: false
      type: TEXT
      groupName: header
    - default: Uptime
      description: Uptime Title
      label: Title
      name: UptimeTitle
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: System Uptime item
      label: Item
      name: SystemUptimeItem
      required: false
      type: TEXT
      groupName: header
    - default: Cpu
      description: Cpu title
      label: Title
      name: SystemOHCpuTitle
      required: false
      type: TEXT
      groupName: cpu
    - default: iconify:whh:cpu
      description: Cpu Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHCpuIcon
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: CPU Temperature item
      label: Item
      name: CPUTemperatureItem
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load1 item
      label: Item
      name: CPULoad1Item
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load 5 item
      label: Item
      name: CPULoad5Item
      required: false
      type: TEXT
      groupName: cpu
    - context: item
      description: Cpu Load 15 item
      label: Item
      name: CPULoad15Item
      required: false
      type: TEXT
      groupName: cpu
    - default: Memory
      description: Memory title
      label: Title
      name: SystemOHMemoryTitle
      required: false
      type: TEXT
      groupName: memory
    - default: iconify:fa-solid:memory
      description: Memory Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHMemoryIcon
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Total item
      label: Item
      name: MemoryTotalItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Used item
      label: Item
      name: MemoryUsedItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Used Percent item
      label: Item
      name: MemoryUsedPercentItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Available item
      label: Item
      name: MemoryAvailableItem
      required: false
      type: TEXT
      groupName: memory
    - context: item
      description: Memory Available Percent item
      label: Item
      name: MemoryAvailablePercentItem
      required: false
      type: TEXT
      groupName: memory
    - default: Storage
      description: Storage title
      label: Title
      name: SystemOHStorageTitle
      required: false
      type: TEXT
      groupName: storage
    - default: iconify:bi:device-ssd-fill
      description: Storage Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHStorageIcon
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Total item
      label: Item
      name: StorageTotalItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Used item
      label: Item
      name: StorageUsedItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Used Percent item
      label: Item
      name: StorageUsedPercentItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Available item
      label: Item
      name: StorageAvailableItem
      required: false
      type: TEXT
      groupName: storage
    - context: item
      description: Storage Available Percent item
      label: Item
      name: StorageAvailablePercentItem
      required: false
      type: TEXT
      groupName: storage
    - default: Swap
      description: Swap title
      label: Title
      name: SystemOHSwapTitle
      required: false
      type: TEXT
      groupName: swap
    - default: iconify:ic:outline-swap-calls
      description: Swap Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHSwapIcon
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Total item
      label: Item
      name: SwapTotalItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Used item
      label: Item
      name: SwapUsedItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Used Percent item
      label: Item
      name: SwapUsedPercentItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Available item
      label: Item
      name: SwapAvailableItem
      required: false
      type: TEXT
      groupName: swap
    - context: item
      description: Swap Available Percent item
      label: Item
      name: SwapAvailablePercentItem
      required: false
      type: TEXT
      groupName: swap
    - default: Network
      description: Network title
      label: Title
      name: SystemOHNetworkTitle
      required: false
      type: TEXT
      groupName: network
    - default: iconify:bi:ethernet
      description: Network Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHNetworkIcon
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Network Data Received item
      label: Item
      name: NetworkDataReceivedItem
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Network Data Sent item
      label: Item
      name: NetworkDataSentItem
      required: false
      type: TEXT
      groupName: network
    - default: iconify:mdi:high-voltage-outline
      description: Voltage Icon - Use f7:iconName (Framework7 icon), material:iconName
        (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: SystemOHVoltageIcon
      required: false
      type: TEXT
      groupName: network
    - default: Voltage
      description: Voltage item
      label: Item
      name: SystemOHVoltageTitle
      required: false
      type: TEXT
      groupName: network
    - context: item
      description: Voltage item
      label: Item
      name: SystemOHVoltageItem
      required: false
      type: TEXT
      groupName: network
    - default: Reboot
      description: Reboot command Title
      label: Title
      name: RebootCommandTitle
      required: false
      type: TEXT
      groupName: command
    - context: item
      description: Reboot command switch item
      label: Item
      name: ExecRebootCommandItem
      required: false
      type: TEXT
      groupName: command
    - default: Power off
      description: Power off command Title
      label: Title
      name: PowerOffCommandTitle
      required: false
      type: TEXT
      groupName: command
    - context: item
      description: Power off command switch item
      label: Item
      name: ExecPoweroffCommandItem
      required: false
      type: TEXT
      groupName: command
  parameterGroups:
    - name: header
      label: Header
    - name: gauge
      label: Gauges CPU, Memory & Storage
    - name: cpu
      label: Cpu
    - name: memory
      label: Memory
    - name: storage
      label: Storage
    - name: swap
      label: Swap
    - name: network
      label: Network
    - name: command
      label: Commands
timestamp: Nov 5, 2024, 10:09:58 PM
component: oh-context
config:
  constants:
    widgetID: =Number.parseInt(Math.random()*8912).toString(16).padStart(4, '0')
slots:
  default:
    - component: f7-card
      config:
        style:
          background-color: "=props.bgcolor ? props.bgcolor : ''"
          border-radius: var(--f7-card-expandable-border-radius)
          box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
          height: 150px
          margin-left: 5px
          margin-right: 5px
          noShadow: false
          padding: 0px
      slots:
        content:
          - component: oh-context
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: row
                left: 16px
                position: absolute
                top: -5px
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: =props.SystemOHIcon
                    size: 18
                    style:
                      margin-right: 10px
                    visible: "=props.SystemOHIcon ? true : false"
                - component: Label
                  config:
                    style:
                      font-size: 12px
                      margin-top: 0px
                    text: "=props.title ? props.title : ''"
          - component: f7-block
            config:
              style:
                bottom: -15px
                flex-direction: row
                left: 16px
                position: absolute
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: 17px
                      font-weight: 600
                      margin-left: 0px
                      margin-top: 0px
                    text: "=props.header ? props.header : 'Set Props'"
          - component: f7-button
            config:
              popupOpen: =`.popup-${const.widgetID}`
              style:
                bottom: -115px
                left: calc(100% - 8em)
                position: absolute
              text: Einstellungen
          - component: f7-popup
            config:
              class: =`popup-${const.widgetID}`
            slots:
              default:
                - component: f7-page
                  config: {}
                  slots:
                    default:
                      - component: oh-list
                        config:
                          mediaList: true
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                after: =@props.CPULoadItem
                                icon: =props.SystemOHIcon
                                style:
                                  --f7-list-item-after-font-size: 16px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(80,80,80)'"
                                subtitle: '="Uptime: " + items[props.SystemUptimeItem].displayState'
                                title: =props.SystemOHTitle
                            - component: f7-block
                              config:
                                visible: true
                                style:
                                  margin: 0px
                                  padding: 10px
                              slots:
                                default:
                                  - component: f7-row
                                    config:
                                      style:
                                        text-align: center
                                    slots:
                                      default:
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "=(Number.parseFloat(items[props.CPULoadItem].state) >= '75') ?
                                                    '#ff3b30' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '50') ? '#ff6b22' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '25') ? '#ffcc00' :
                                                    (Number.parseFloat(items[pr\
                                                    ops.CPULoadItem].state) >=
                                                    '0') ? '#4cd964' : 'gray'"
                                                  borderWidth: 10
                                                  item: =props.CPULoadItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHCpuTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.CPULoadItem
                                                  size: 100
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "#9c27b0"
                                                  borderWidth: 10
                                                  item: =props.MemoryUsedPercentItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHMemoryTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.MemoryUsedPercentItem
                                                  size: 100
                                        - component: f7-col
                                          config:
                                            with: 33%
                                          slots:
                                            default:
                                              - component: oh-gauge
                                                config:
                                                  borderBgColor: gray
                                                  borderColor: "#5ac8fa"
                                                  borderWidth: 10
                                                  item: =props.StorageUsedPercentItem
                                                  labelFontSize: 16
                                                  labelText: =props.SystemOHStorageTitle
                                                  type: circle
                                                  valueFontSize: 20
                                                  valueFontWeight: bold
                                                  valueText: =@props.StorageUsedPercentItem
                                                  size: 100
                            - component: oh-list-item
                              config:
                                action: analyzer
                                actionAnalyzerCoordSystem: time
                                actionAnalyzerItems: =[props.CPULoad1Item, props.CPULoad5Item,
                                  props.CPULoad15Item, props.CPUTemperatureItem]
                                after: =items[props.CPUTemperatureItem].displayState
                                icon: =props.SystemOHCpuIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.CPULoad1Item].state + " - " +
                                  items[props.CPULoad5Item].state + " - " +
                                  items[props.CPULoad15Item].state
                                title: =props.SystemOHCpuTitle
                                visible: true
                            - component: oh-list-item
                              config:
                                after: =items[props.MemoryTotalItem].displayState
                                icon: =props.SystemOHMemoryIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.MemoryUsedItem].displayState + " ("
                                  +  items[props.MemoryUsedPercentItem].displayState
                                  + ") - " +
                                  items[props.MemoryAvailableItem].displayState
                                  + " ("
                                  +  items[props.MemoryAvailablePercentItem].displayState
                                  + ")"
                                title: =props.SystemOHMemoryTitle
                                visible: =!props.HideMemory
                            - component: oh-list-item
                              config:
                                after: =items[props.StorageTotalItem].displayState
                                icon: =props.SystemOHStorageIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.StorageUsedItem].displayState + " ("
                                  +  items[props.StorageUsedPercentItem].displayState
                                  + ") - " +
                                  items[props.StorageAvailableItem].displayState
                                  + " ("
                                  +  items[props.StorageAvailablePercentItem].displayState
                                  + ")"
                                title: =props.SystemOHStorageTitle
                                visible: =!props.HideStorage
                            - component: oh-list-item
                              config:
                                after: =items[props.SwapTotalItem].displayState
                                icon: =props.SystemOHSwapIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: =items[props.SwapUsedItem].displayState + " ("
                                  +  items[props.SwapUsedPercentItem].displayState
                                  + ") - " +
                                  items[props.SwapAvailableItem].displayState +
                                  " ("
                                  +  items[props.SwapAvailablePercentItem].displayState
                                  + ")"
                                title: =props.SystemOHSwapTitle
                                visible: =!props.HideSwap
                            - component: oh-list-item
                              config:
                                icon: =props.SystemOHNetworkIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                subtitle: ="▼" + items[props.NetworkDataReceivedItem].displayState + " ▲" +
                                  items[props.NetworkDataSentItem].displayState
                                title: =props.SystemOHNetworkTitle
                                visible: true
                            - component: oh-list-item
                              config:
                                icon: =props.SystemOHVoltageIcon
                                iconColor: gray
                                style:
                                  --f7-list-item-after-font-size: 15px
                                  --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-subtitle-font-size: 14px
                                  --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                  --f7-list-item-title-font-size: 15px
                                  --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ?
                                    'rgb(180,180,180)' : 'rgb(100,100,100)'"
                                title: =props.SystemOHVoltageTitle
                                item: =props.SystemOHVoltageItem
                                visible: true
                      - component: f7-button
                        config:
                          popupClose: true
                          text: Schließen
          - component: oh-toggle
            config:
              item: =props.SwitchGroupItem
              style:
                position: absolute
                right: 20px
                top: 15px
              visible: "=props.SwitchGroupItem ? true : false"

ubeaut · November 6, 2024, 9:28am

If you change the SystemOHVoltageIcon to iconify:mdi:high-voltage for example it does show.
The iconify:mdi:high-voltage-outline doesn’t work for some reason.
Maybe the outline one is corrupt

milo · November 6, 2024, 9:34am

But the vlaue of the item still not showing

ubeaut · November 6, 2024, 9:48am

Change it from:                  
              item: =props.SystemOHVoltageItem
to:
              subtitle: =items[props.SystemOHVoltageItem].state

milo · November 6, 2024, 9:51am

This is working with subtitles but why not the item as my other lists?

ubeaut · November 6, 2024, 9:54am

Don’t know what you mean.

milo · November 6, 2024, 9:58am

I attached a picture of my other list

ubeaut · November 6, 2024, 10:02am

What other list?

milo · November 6, 2024, 10:04am

Now it looks like this

its in the second row my other list is the widget code like this

uid: Cell_Wallplug
tags: []
props:
  parameters:
    - context: item
      description: A actual power item to display
      label: Item
      name: itemActualPower
      required: false
      type: TEXT
    - context: item
      description: A total power item to display
      label: Item
      name: itemTotalePower
      required: false
      type: TEXT
    - context: item
      description: A daily total power item to display
      label: Item
      name: itemDailyTotalPower
      required: false
      type: TEXT
    - context: item
      description: the switch state
      label: Item
      name: itemSwitch
      required: false
      type: TEXT
    - description: URL to show in the frame
      label: Source URL
      name: URL
      required: true
      type: TEXT
    - default: from=now-6h&to=now;6h,from=now-12h&to=now;12h,from=now-1d&to=now;24h,from=now/d&to=now/d;Day,from=now-3d&to=now;Last
        3 Days,from=now-7d&to=now;Last 7 Days,from=now-14d&to=now;Last 14 Days
      description: Comma-separated List of options. Example
        "from=now-6h&to=now;-6h,from=now-1d/d&to=now-1d/d;yesterday" for past
        "6h" and "yesterday". First entry is default.
      label: Time range options
      name: timerange
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Apr 24, 2024, 8:29:14 AM
component: f7-card
config:
  expandable: true
  style:
    --f7-card-expandable-tablet-height: 75vh
    --f7-card-expandable-tablet-width: 35vw
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 150px
    margin-left: 5px
    margin-right: 5px
    margin-top: 10px
    noShadow: false
    padding: 0px
  swipeToClose: true
slots:
  default:
    - component: oh-button
      config:
        class:
          - cell-open-button
          - card-opened-fade-out
        color: black
        iconF7: expand
        iconSize: 30px
        style:
          padding-bottom: 35px
          padding-top: 10px
          position: absolute
          right: 0
          top: 0
          z-index: 999
    - component: f7-card-content
      config:
        style:
          width: 100%
      slots:
        default:
          - component: oh-icon
            config:
              height: 80px
              icon: poweroutlet
              state: =items[props.itemSwitch].state
              style:
                opacity: 40%
                position: absolute
                right: 16px
                top: 50px
              width: auto
          - component: oh-button
            config:
              class:
                - card-opened-fade-in
                - cell-close-button
                - card-close
              color: black
              iconF7: xmark_circle_fill
              iconSize: 30px
              style:
                padding-bottom: 35px
                padding-top: 10px
                position: absolute
                right: 0
                top: 0
                z-index: 999
          - component: oh-link
            config:
              action: toggle
              actionCommand: ON
              actionCommandAlt: OFF
              actionItem: =props.itemSwitch
              class:
                - card-prevent-open
              style:
                height: 100%
                left: 0
                position: absolute
                top: 0
                width: 100%
                z-index: 0
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                height: 150px
                margin: 0px
            slots:
              default:
                - component: f7-row
                  config:
                    bgcolor: green
                    style:
                      height: 30px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 25px
                            font-weight: 600
                          text: steckdose
                - component: f7-row
                  config:
                    bgcolor: green
                    style:
                      flex-wrap: nowrap
                      height: 10px
                      white-space: nowrap
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: 30
                        slots:
                          default:
                            - component: f7-chip
                              config:
                                action: toggle
                                actionCommand: ON
                                actionCommandAlt: OFF
                                actionItem: =props.itemSwitch
                                color: "=(items[props.itemSwitch].state === 'ON') ? 'green' : 'red'"
                                text: "=(items[props.itemSwitch].state === 'ON') ? 'AN' : 'AUS'"
                      - component: f7-col
                        slots:
                          default:
                            - component: oh-trend
                              config:
                                style:
                                  height: 100px
                - component: f7-row
                  config:
                    style:
                      bgcolor: green
                      height: 66px
                      overflow: hidden
                      width: 100%
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            align-self: flex-end
                            flex-wrap: nowrap
                        slots:
                          default:
                            - component: f7-row
                              config:
                                class:
                                  - justify-content-flex-start
                                style:
                                  flex-wrap: nowrap
                                  width: 100%
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      color: blue
                                      f7: chart_bar
                                      size: 20px
                                      style:
                                        margin-top: 0px
                                      visible: true
                                  - component: Label
                                    config:
                                      style:
                                        font-size: 14px
                                        font-weight: 600
                                        margin-left: 5px
                                        overflow: hidden
                                        text-overflow: ellipsis
                                        white-space: nowrap
                                      text: =(Number.parseFloat(items[props.itemActualPower].state)).toFixed(1) + 'W'
                                      visible: true
                                  - component: f7-icon
                                    config:
                                      color: blue
                                      f7: chart_bar_circle
                                      size: 20px
                                      style:
                                        margin-left: 10px
                                        margin-top: 0px
                                      visible: true
                                  - component: Label
                                    config:
                                      style:
                                        font-size: 14px
                                        font-weight: 600
                                        margin-left: 5px
                                        overflow: hidden
                                        text-overflow: ellipsis
                                        white-space: nowrap
                                      text: =(Number.parseFloat(items[props.itemDailyTotalPower].state)).toFixed(1) +
                                        'kWh'
                                      visible: true
                            - component: f7-row
                              config:
                                class:
                                  - justify-content-flex-start
                                style:
                                  flex-wrap: nowrap
                                  height: 20px
                                  margin-top: 5px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      color: white
                                      material: restore
                                      size: 18px
                                      style:
                                        margin-left: 0px
                                        margin-top: 0px
                                  - component: Label
                                    config:
                                      style:
                                        color: white
                                        font-size: 12px
                                        margin-left: 8px
                                        overflow: hidden
                                        text-overflow: ellipsis
                                        white-space: nowrap
                                      text: ""
                                  - component: f7-icon
                                    config:
                                      color: gray
                                      f7: chart_bar_square_fill
                                      size: 15px
                                      style:
                                        margin-left: 10px
                                        margin-top: 2px
                                  - component: Label
                                    config:
                                      style:
                                        color: gray
                                        font-size: 12px
                                        margin-left: 3px
                                        overflow: hidden
                                        text-overflow: ellipsis
                                        white-space: nowrap
                                      text: =(Number.parseFloat(items[props.itemTotalePower].state)).toFixed(1) +
                                        'kWh'
          - component: f7-block
            config:
              class:
                - card-prevent-open
                - card-content-padding
              outline: false
            slots:
              default:
                - component: f7-list
                  config: {}
                  slots:
                    default:
                      - component: oh-toggle-item
                        config:
                          color: green
                          icon: oh:poweroutlet
                          item: =props.itemSwitch
                          title: Steckdose
                      - component: oh-label-item
                        config:
                          color: blue
                          icon: f7:chart_bar_circle
                          item: =props.itemDailyTotalPower
                          title: Daily Total Power
                      - component: oh-label-item
                        config:
                          color: blue
                          icon: f7:chart_bar
                          item: =props.itemActualPower
                          title: Actual Power
                      - component: oh-label-item
                        config:
                          color: blue
                          icon: f7:chart_bar_square_fill
                          item: =props.itemTotalePower
                          title: Totale Power
                - component: oh-webframe-card
                  config:
                    borders: false
                    class:
                      - display-block
                    height: 240px
                    noBorder: false
                    noShadow: true
                    src: =props.URL.replace('{period}', vars.selectedPeriod ||
                      [props.timerange.split(',')[0].split(';')[0]])
                - component: f7-segmented
                  config:
                    class:
                      - padding-bottom-half
                    outline: false
                    round: false
                    style:
                      --f7-button-border-radius: 4px
                      --f7-button-font-size: 14px
                      --f7-button-font-weight: 300
                      --f7-button-outline-border-width: 1px
                      --f7-button-padding-horizontal: 0px
                      --f7-button-padding-vertical: 0px
                      --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
                      --f7-button-text-transform: none
                      margin-left: 10px
                      margin-right: 10px
                      margin-top: 250px
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          for: size
                          fragment: true
                          sourceType: range
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: period
                                fragment: true
                                in: =[props.timerange.split(",")[loop.size].split(";")[1]]
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: variable
                                      actionVariable: selectedPeriod
                                      actionVariableValue: =props.timerange.split(",")[loop.size].split(";")[0]
                                      fill: "=(([props.timerange.split(',')[loop.size].split(';')[0]] ==
                                        vars.selectedPeriod) ||
                                        (props.timerange.split(',')[0].split(';\
                                        ')[1] === loop.period) &&
                                        !vars.selectedPeriod) ? true : false"
                                      outline: true
                                      round: false
                                      style:
                                        --f7-button-border-color: var(--f7-card-outline-border-color)
                                      text: =loop.period

this is the list item which is working fine

- component: oh-label-item
                        config:
                          color: blue
                          icon: f7:chart_bar
                          item: =props.itemActualPower
                          title: Actual Power

but this is not working fine

- component: oh-list-item
  config:
    icon: =props.SystemOHVoltageIcon
    iconColor: gray
    style:
      --f7-list-item-after-font-size: 15px
      --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
      --f7-list-item-subtitle-font-size: 14px
      --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
      --f7-list-item-title-font-size: 15px
      --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
    title: =props.SystemOHVoltageTitle
    item: =props.SystemOHVoltageItem
    visible: true

what is the difference?

ubeaut · November 6, 2024, 10:11am

Don’t know that. Sorry.
Late here.

milo · November 6, 2024, 11:25am

@JustinG sorry for pinging you…can you help out?

hmerk · November 6, 2024, 11:56am

The difference is the used component, first is oh-label-item, second is oh-list-item. Both use different config params.