Dynamic Favorites Bar Widget for OpenHAB

General
1

Hi everyone, I wanted to share a widget I’ve been working on that might be useful for others looking to enhance their OpenHAB setup. The widget allows for the dynamic addition and removal of simple, single-item widgets on a live page. This is particularly helpful for users who don’t have administrator access but still want some control over the items displayed on a page.

The Concept

The widget itself is designed to render items tagged with FAV using a repeater component. This means that any item you want to add to your favorites list just needs to have this tag. The widget supports switches, dimmers, and roller shutters, but it’s easy to expand it to include more types if needed.

Components

The widget consists of several key parts:

  1. Widget Code: This is the main structure that handles the display of items and the floating action button (FAB) for adding/removing items.
  2. Proxy Items: These are simple string items used to temporarily hold the names of items being added or removed.
  3. Rules: Two rules handle the addition and removal of the FAV tag when items are added or removed from the favorites list.

Key Features

  • Dynamic Updates: The widget automatically refreshes when items are added or removed, thanks to a clever use of Vue.js properties.
  • Custom Labels: Items can have custom labels stored in a metadata namespace, making it easier to display more user-friendly names.
  • Floating Action Button (FAB): This provides an intuitive way to add or remove items from the favorites list.

Challenges and Solutions

One of the main challenges was ensuring the widget refreshed correctly when items were added or removed. This was solved by using a key property in Vue.js, which forces the component to re-render when changes occur. Another challenge was making sure the FAB button and its morphed state played nicely together, which required careful handling of z-index values.

How to Use It

  1. Add the Widget: Place the widget on any page in your OpenHAB setup.
  2. Tag Items: Start tagging the items you want to appear in your favorites list with FAV.
  3. Customize Labels: If you want different labels for your favorites, add them to the metadata namespace FavLabel.
  4. Adjust Types: Modify the widget to support additional item types by updating the filter in the repeater.

This widget has been a great addition to my setup, and I hope it can be useful for others as well. Let me know if you have any questions or suggestions for improvement!