List Item Widget for System info

SystemInfoListItemScreenShot

This is an UI List Item Widget to view the RaspberryPi System info with the Systeminfo Binding and reboot/shutdown system with the Exec Binding.

Only use with List Card with accordion and rich list items option set to true.

Support to use a light and a dark background.

Configuration parameters:

  • All title string

  • Icons - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName

  • Visibility of Label item (Cpu, Memory, Storage, Swap, Network, Reboot, Shutdown)

items Systeminfo Binding

  • CPU Temperature item

  • System Uptime item

  • Cpu Load1 item

  • Cpu Load5 item

  • Cpu Load15 item

  • Memory Total item

  • Memory Used item

  • Memory Used Percent item

  • Memory Available item

  • Memory Available Percent item

  • Storage Total item

  • Storage Used item

  • Storage Used Percent item

  • Storage Available item

  • Storage Available Percent item

  • Swap Total item

  • Swap Used item

  • Swap Used Percent item

  • Swap Available item

  • Swap Available Percent item

  • Network Data Received item

  • Network Data Sent item

items Exec Binding

  • Reboot command switch item

  • Power off command switch item

Screenshots

Screen4

Standard Library List Card

Screen2

Configure List

Screen3

Changelog

Version 0.1

  • initial release

Resources

uid: frs_System_Info_list_item
tags:
  - list
  - system
props:
  parameters:
    - defaultValue: Raspberry Pi OH
      description: Title
      label: Title
      name: SystemOHTitle
      required: false
      type: TEXT
      groupName: header
    - defaultValue: 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 Temperature item
      label: Item
      name: CPUTemperatureItem
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: System Uptime item
      label: Item
      name: SystemUptimeItem
      required: false
      type: TEXT
      groupName: header
    - description: Hide Cpu label-item
      label: hide
      name: HideCpu
      required: false
      type: BOOLEAN
      groupName: cpu
    - defaultValue: Cpu
      description: Cpu title
      label: Title
      name: SystemOHCpuTitle
      required: false
      type: TEXT
      groupName: cpu
    - defaultValue: 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 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
    - description: Hide Memory label-item
      label: hide
      name: HideMemory
      required: false
      type: BOOLEAN
      groupName: memory
    - defaultValue: Memory
      description: Memory title
      label: Title
      name: SystemOHMemoryTitle
      required: false
      type: TEXT
      groupName: memory
    - defaultValue: 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
    - description: Hide Storage label-item
      label: hide
      name: HideStorage
      required: false
      type: BOOLEAN
      groupName: storage
    - defaultValue: Storage
      description: Storage title
      label: Title
      name: SystemOHStorageTitle
      required: false
      type: TEXT
      groupName: storage
    - defaultValue: 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
    - description: Hide Swap label-item
      label: hide
      name: HideSwap
      required: false
      type: BOOLEAN
      groupName: swap
    - defaultValue: Swap
      description: Swap title
      label: Title
      name: SystemOHSwapTitle
      required: false
      type: TEXT
      groupName: swap
    - defaultValue: 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
    - description: Hide Network label-item
      label: hide
      name: HideNetwork
      required: false
      type: BOOLEAN
      groupName: network
    - defaultValue: Network
      description: Network title
      label: Title
      name: SystemOHNetworkTitle
      required: false
      type: TEXT
      groupName: network
    - defaultValue: 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
    - description: Hide reboot command label-item
      label: hide
      name: HideRebootCommand
      required: false
      type: BOOLEAN
      groupName: command
    - context: item
      description: Reboot command switch item
      label: Item
      name: ExecRebootCommandItem
      required: false
      type: TEXT
      groupName: command
    - description: Hide power off command label-item
      label: hide
      name: HidePowerOffCommand
      required: false
      type: BOOLEAN
      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: cpu
      label: Cpu
    - name: memory
      label: Memory
    - name: storage
      label: Storage
    - name: swap
      label: Swap
    - name: network
      label: Network
    - name: command
      label: Commands
timestamp: Jan 5, 2022, 9:41:45 PM
component: oh-list-item
config:
  after:  '=items[props.CPUTemperatureItem].displayState'
  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
slots:
  accordion:
    - component: f7-list
      config:
        mediaList: true
        style:
          background-color: '=themeOptions.dark === "dark" ? "rgb(35, 35, 35)" : "rgb(247, 247, 247)"'
      slots:
        default:
          - 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: =!props.HideCpu
          - 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: =!props.HideNetwork
          - component: oh-list-item
            config:
              action: options
              actionItem: =props.ExecRebootCommandItem
              actionOptions: ON=Reboot
              item: =props.ExecRebootCommandItem
              listButton: true
              listButtonColor: green
              title: Reboot
              visible: =!props.HideRebootCommand
          - component: oh-list-item
            config:
              action: options
              actionItem: =props.ExecPoweroffCommandItem
              actionOptions: ON=Shutdown
              item: =props.ExecPoweroffCommandItem
              listButton: true
              listButtonColor: green
              title: Shutdown
              visible: =!props.HidePowerOffCommand
6 Likes

Hello @sebSmarthome,

I have switched from 3.2.0 to 3.3.0.M5 and now to to 3.3.0.M6.

Basically I don’t see any problems. However, since 3.3.0.M5 I have a problem with the widget frs_System_Info_list_item (Marketplace).

Under 3.3.0.M5 and to 3.3.0.M6 the widget does not work anymore and I see a 0 in the lower left corner. If this is only related to this widget and with which function I can’t say. There is nothing in openhab.log.

Greetings Holger

It is working absolutely fine here with openHAB 3.3.M6

Sorry but unfortunately it does not work for me. As soon as I select Configure ListAccordion List appears a 0 at the bottom left.
grafik
Expanding the list does not work (worked under 3.2.0) I always see only the CPU uptime and the temperature.
I have already deleted the widget and restarted the Raspberry Pi. The widget then added again, no change.

Can you please post the complete yaml for the list card widget.
I just tried setting up a new widget on another page and it is definitely working as expected.

The YAML code inside the page.

component: widget:frs_System_Info_list_item
config:
  CPUTemperatureItem: RasperryPi_CPUTemperature
  SystemUptimeItem: RasperryPi_SystemUptime
  CPULoad1Item: RasperryPi_Cpu_Load1
  CPULoad5Item: RasperryPi_Cpu_Load5
  CPULoad15Item: RasperryPi_Cpu_Load15
  MemoryTotalItem: RasperryPi_Memory_Total
  MemoryUsedPercentItem: RasperryPi_Memory_UsedPercent
  MemoryUsedItem: RasperryPi_Memory_Used
  MemoryAvailableItem: RasperryPi_Memory_Available
  MemoryAvailablePercentItem: RasperryPi_Memory_AvailablePercent
  StorageTotalItem: RasperryPi_Storage_Total
  StorageUsedItem: RasperryPi_Storage_Used
  StorageAvailableItem: RasperryPi_Storage_Available
  StorageUsedPercentItem: RasperryPi_Storage_UsedPercent
  StorageAvailablePercentItem: RasperryPi_Storage_AvailablePercent
  SwapTotalItem: RasperryPi_Swap_Total
  SwapUsedItem: RasperryPi_Swap_Used
  SwapUsedPercentItem: RasperryPi_Swap_UsedPercent
  SwapAvailableItem: RasperryPi_Swap_Available
  SwapAvailablePercentItem: RasperryPi_Swap_AvailablePercent
  HideNetwork: true
  HideRebootCommand: true
  HidePowerOffCommand: true
slots:
  accordion: []

The widget code from the marketplace as I downloaded it. Installed via the search in openHAB itself (binding).

uid: frs_System_Info_list_item
tags:
  - system
  - marketplace:135253
  - list
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 Temperature item
      label: Item
      name: CPUTemperatureItem
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: System Uptime item
      label: Item
      name: SystemUptimeItem
      required: false
      type: TEXT
      groupName: header
    - description: Hide Cpu label-item
      label: hide
      name: HideCpu
      required: false
      type: BOOLEAN
      groupName: cpu
    - 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 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
    - description: Hide Memory label-item
      label: hide
      name: HideMemory
      required: false
      type: BOOLEAN
      groupName: memory
    - 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
    - description: Hide Storage label-item
      label: hide
      name: HideStorage
      required: false
      type: BOOLEAN
      groupName: storage
    - 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
    - description: Hide Swap label-item
      label: hide
      name: HideSwap
      required: false
      type: BOOLEAN
      groupName: swap
    - 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
    - description: Hide Network label-item
      label: hide
      name: HideNetwork
      required: false
      type: BOOLEAN
      groupName: network
    - 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
    - description: Hide reboot command label-item
      label: hide
      name: HideRebootCommand
      required: false
      type: BOOLEAN
      groupName: command
    - context: item
      description: Reboot command switch item
      label: Item
      name: ExecRebootCommandItem
      required: false
      type: TEXT
      groupName: command
    - description: Hide power off command label-item
      label: hide
      name: HidePowerOffCommand
      required: false
      type: BOOLEAN
      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: cpu
      label: Cpu
    - name: memory
      label: Memory
    - name: storage
      label: Storage
    - name: swap
      label: Swap
    - name: network
      label: Network
    - name: command
      label: Commands
timestamp: Jan 5, 2022, 9:41:45 PM
component: oh-list-item
config:
  after: =items[props.CPUTemperatureItem].displayState
  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
slots:
  accordion:
    - component: f7-list
      config:
        mediaList: true
        style:
          background-color: '=themeOptions.dark === "dark" ? "rgb(35, 35, 35)" : "rgb(247, 247, 247)"'
      slots:
        default:
          - 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: =!props.HideCpu
          - 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: =!props.HideNetwork
          - component: oh-list-item
            config:
              action: options
              actionItem: =props.ExecRebootCommandItem
              actionOptions: ON=Reboot
              item: =props.ExecRebootCommandItem
              listButton: true
              listButtonColor: green
              title: Reboot
              visible: =!props.HideRebootCommand
          - component: oh-list-item
            config:
              action: options
              actionItem: =props.ExecPoweroffCommandItem
              actionOptions: ON=Shutdown
              item: =props.ExecPoweroffCommandItem
              listButton: true
              listButtonColor: green
              title: Shutdown
              visible: =!props.HidePowerOffCommand

No,
the widget needs to be put into a list-card, otherwise it will not work.
I need to se the list card yaml code.

Sorry, the full code is attached.

config:
  label: Test
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config:
                        mediaList: true
                        accordionList: true
                      slots:
                        default:
                          - component: widget:frs_System_Info_list_item
                            config:
                              CPUTemperatureItem: RasperryPi_CPUTemperature
                              SystemUptimeItem: RasperryPi_SystemUptime
                              CPULoad1Item: RasperryPi_Cpu_Load1
                              CPULoad5Item: RasperryPi_Cpu_Load5
                              CPULoad15Item: RasperryPi_Cpu_Load15
                              MemoryTotalItem: RasperryPi_Memory_Total
                              MemoryUsedPercentItem: RasperryPi_Memory_UsedPercent
                              MemoryUsedItem: RasperryPi_Memory_Used
                              MemoryAvailableItem: RasperryPi_Memory_Available
                              MemoryAvailablePercentItem: RasperryPi_Memory_AvailablePercent
                              StorageTotalItem: RasperryPi_Storage_Total
                              StorageUsedItem: RasperryPi_Storage_Used
                              StorageAvailableItem: RasperryPi_Storage_Available
                              StorageUsedPercentItem: RasperryPi_Storage_UsedPercent
                              StorageAvailablePercentItem: RasperryPi_Storage_AvailablePercent
                              SwapTotalItem: RasperryPi_Swap_Total
                              SwapUsedItem: RasperryPi_Swap_Used
                              SwapUsedPercentItem: RasperryPi_Swap_UsedPercent
                              SwapAvailableItem: RasperryPi_Swap_Available
                              SwapAvailablePercentItem: RasperryPi_Swap_AvailablePercent
                              HideNetwork: true
                              HideRebootCommand: true
                              HidePowerOffCommand: true
                            slots:
                              accordion: []
masonry: null
grid: []
canvas: null

please remove the slots and accordion line here. This is the difference I see to my working widget.

Thanks for the help. It works with that, no idea where that comes from. Have redone the page.

1 Like