List Item Widget for System info [4.0.0.0;4.9.9.9]

Add-on Marketplace UI Widgets
,
1

SystemInfoListItemScreenShot
SystemInfoListItemScreenShot728×1154 113 KB

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.
Do not use it as a “default list item widget”

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 Gauges and Label item (Cpu, Memory, Storage, Swap, Network, Reboot, Shutdown)

items Systeminfo Binding

  • CPU Temperature item

  • System Uptime item

  • Cpu Load% 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.2

  • New Cpu Load% item

  • New parameters for Uptime title and commands title Reboot/Shutdown

  • New parameters for Gauges visibility

  • New Gauges Cpu, memory and storage

  • use @ symbol in front of an item name string as a shortcut to the displayState from the items dictionary with a fallback to the raw state

Version 0.1

  • initial release

Resources

https://raw.githubusercontent.com/sebSmarthome/openHAB3-widget/main/List_Item_for_use_with_List_Card/System_Info_List_Item/frs_System_Info_list_item.yaml

10 Likes
3

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).

grafik
grafik803×79 1.47 KB

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

4

It is working absolutely fine here with openHAB 3.3.M6

5

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.

grafik
grafik766×91 1.45 KB

6

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.

7

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
8

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.

9

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
10

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

3 Likes
11

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

1 Like
12

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

13

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
14

Can someone explain how I get a restart/reboot working?

I installed the exec binding, created the thing with a command (systemctl restart openhab.service), and added the command to the exec whiutelist, but this command needs sudo access, the user which runs OH is openhab and doesn’t have the proper rights.
I don’t want to grant the user openhab root rights.

15

OpenHAB sudo [Exec Binding] - Tutorials & Examples - openHAB Community

16

Version 0.2

  • New Cpu Load% item

  • New parameters for Uptime title and commands title Reboot/Shutdown

  • New parameters for Gauges visibility

  • New Gauges Cpu, memory and storage

  • use @ symbol in front of an item name string as a shortcut to the displayState from the items dictionary with a fallback to the raw state

1 Like
17

Because my gauge-components have been displayed like this

grafik
grafik753×300 15 KB

I had to insert min: 0 and max: 1 to each oh-gauge-component in the frs_System_Info_list_item widget code.

        - component: oh-gauge
          config:
            borderBgColor: gray
            borderColor: "#9c27b0"
            borderWidth: 25
            item: =props.MemoryUsedPercentItem
            labelFontSize: 26
            labelText: =props.SystemOHMemoryTitle
            type: circle
            valueFontSize: 34
            valueFontWeight: bold
            valueText: =@props.MemoryUsedPercentItem
            valueTextColor: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
            min: 0
            max: 1

Now it’s displayed like expected.

grafik
grafik765×305 19.6 KB

For example, my memory-item definition is

grafik
grafik728×470 11.2 KB

I was wondering why I had to modify the original widget code.
Am I missing something here?

1 Like
18

On oh4 I had to do the same

19

in oh4 set metadata unit to %

Capture d’écran 2024-02-17 090829
Capture d’écran 2024-02-17 0908291128×1410 89.2 KB

1 Like