List Item Widget for System info

sebSmarthome · April 18, 2022, 1:36pm

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

Standard Library List Card

Configure List

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

Jeff_Smart · June 6, 2022, 5:42pm

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

hmerk · June 6, 2022, 5:48pm

It is working absolutely fine here with openHAB 3.3.M6

Jeff_Smart · June 7, 2022, 4:18pm

Sorry but unfortunately it does not work for me. As soon as I select Configure List → Accordion 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.

hmerk · June 7, 2022, 4:46pm

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.

Jeff_Smart · June 7, 2022, 6:20pm

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

hmerk · June 7, 2022, 6:29pm

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.

Jeff_Smart · June 7, 2022, 6:38pm

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

hmerk · June 7, 2022, 6:57pm

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

Jeff_Smart · June 7, 2022, 7:02pm

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

maxmaximax · July 27, 2022, 3:26pm

sebSmarthome:

          - 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

Is there a way to change the size of the icon (and the size of the badge) in the oh-list-item?

Zylle · February 14, 2023, 3:53pm

Great widget - thanks alot!!

Just like to add I had the same problems as Jeff - I had to manually delete the 2 lines with “Slots: Accordion: …”

Also I had an issue with displaying the items correctly, where I had to change every instance of “displayState” to “state” to get them to show correctly. Although I am not quite sure why, and what that actually changes?

subtitle: =items[props.CPULoad1Item].state + " - " + items[props.CPULoad5Item].state + " - " + items[props.CPULoad15Item].state