Custom widgets: feature walkthrough

Tags: #<Tag:0x00007f0148008980>

(Yannick Schaus) #1

Hi everyone,

This post introduces a new HABPanel feature: custom widgets!

They are based on the template widget - which isn’t going away - but improves it by offering a central space for widgets that are designed to be reused, shared, and configured. Therefore, if you have multiple widgets of the same type on your dashboards, you can now use a centrally-managed template with configurable settings.

This is better for several reasons: technical (no wasteful duplication of template code) and practical (modifications to the template impacts all widgets automatically).

UPDATE: HABPanel now has a widget gallery and uses the widgetgallery tag, if you share a widget make sure to attach this tag to your topic as well as the widget tag. The info below is still applicable until the next openHAB stable release.

A quick side note first: the new custom widget list has a link to a filtered view of the posts on this forum having the widget tag.

It would be great if this tag could act as a gallery of widget contributions to download - if you have a new widget to share, I’d suggest opening a new topic with this tag, presenting your work with screenshots, configuration, requirements etc. and attaching the .json file exported from HABPanel. Please stay on-topic when commenting on these as well.

Adding and designing new widgets

The widget list

You can access the registry of custom widgets either via a dashboard editing screen, or in the advanced settings:

You can create a new widget from scratch, or import one if you have an existing .json file previously exported by you or downloaded from the community.

A new tile will be added; widgets may also be exported or deleted from this screen using their context menu:

Clicking on the tile itself brings you to the new widget designing experience:

The widget designer

Designing the template

Here you can edit your template with a more comfortable, bigger editor.

Defining the configuration settings

Can you see the variables in the code above: config.artist_item, config.track_item, config.artist_text_size etc?

They are defined in the Settings tab (along with general settings, like a display name):

You can add several types of configuration settings, currently:

  • String
  • Number
  • (openHAB) Item
  • Color

Make sure you give them a proper ID, which will be your variable name in the template (prefixed by “config.” as seen above), and a label.

Previewing the widget

You can switch to the Preview tab at any time to see your new widget in action.

Resize it with the sliders or the chevron if necessary.
If you’re using configuration settings, you’ll probably want to click on the gears icon on the top-left corner to bring up the settings dialog for the preview widget:

Every configuration setting is displayed depending on its type. After you’ve configured the settings, the preview will update to reflect them.

Once you’re satisfied with your widget, don’t forget to save it with the button in the top-right corner!
(tip: ctrl+S works in the template editor)

Reusing a widget

Your new widget will simply become available in the Add Widget dropdown of the dashboard designer.

It will also be labeled with the widget’s ID, and have the same settings dialog box as the preview above.

Feedback welcome!

That’s it for now - let me know what you think and if you experience some issues. :slight_smile:

HABPanel Widget Gallery
Custom Widget: Music Control
How to import new widget json file to Habpanel OpenHab 1.8.3?
About the HABPanel Examples category
Adding string selection item to Habpanel
Restore Habpanel settings from files
Custom Widget: Up Next Calendar
HabPanel Widget - How to locate items instead of hardcoding
Roller Shutter Widget like on open
HABPanel widget: Virtual Thermostat/OnOff Appliance scheduling
Custom widget: Slider with presets
Use a Sensor to Colour Switch in HabPanel
(Angelos) #2

Excellent stuff ! Thanx @ysc :slight_smile:

(Mike Dilger) #3

Hi @ysc

Looks excellent. I had an initial problem getting it to work properly on Firefox but seem to have that sorted now.


(Yannick Schaus) #4

Great to hear!

@MikeD I received your original message - there was a nasty bug indeed, I think it’s fixed now ( Sorry about that, but the good news is, there was no build in the meantime so the fix will be picked up when the feature arrives with the next build.

(Mike Dilger) #5


(Andrew Pawelski) #6

i have done a bundle:update “HABPanel User Interface” but still dont see any reference to custom widgets?

(Mike Dilger) #7

Look for after the next build which will hopefully be later today.

(Heiko Fanieng) #8

Very good news @ysc,

especially the music control widget i’ll tried to do make it with the templates on my own, but now i only need to combine play, pause, skip and back with the iTunes REST API i’m playing with.

At least i’m waiting for some solved issues in oH2 to display the current artwork of the current playback inside oH2 like on Apple TV.

Since you spent your time and the IMO real easy working UI for oH2 most things are going forward!

Thank you for HABpanel!


(Yannick Schaus) #9

The build ran 8h ago:$org.openhab.ui.habpanel/
So an update should be available. If it doesn’t seem to work using the Karaf console use Paper UI or HABmin.

(Thomas) #10

I’ve updated about half an hour ago and made my first own Sonos widget. Basic right now but really cool! Thank you for this great feature!

(Andrew Pawelski) #11

Yep got it now - would be great to get some custom widgets into the library now! I am struggling with a weather widget

(James Hiscott) #12

Wow! Very nice thanks for all your hard work on this @ysc

(Mattwire) #13

A minor bug… If you name the custom widget contains “/” it breaks and doesn’t go to the settings page. Is there a way to detect invalid names?

(Yannick Schaus) #14

Sure… “/” in an identifier is asking for trouble because it gets in the URL and confuses the router. There will be some checks eventually, yes.

(Mattwire) #15

When the custom widget has no settings the template editor is shown:

(Maciej Eckstein) #16

This will be an super useful feature!
What I see now is:

  1. if my custom template did use “don’t wrap in the container” to remove some extra padding it does not have any correspondence in the new custom widget designer. it has to be enabled in setting after I place the widget on the panel page. I think there should be and option to enable it editor already

  2. I see that preview does not work as it should. Not sure if that is related to the 1) as some text in preview is WAY off from when it should. So preview is not really a preview. Below screenshot of two browser windows. One with widget in action and second is the preview.

(Yannick Schaus) #17
  1. I know, this is planned

  2. weird… can you post the .json of your widget so I can test?

(Maciej Eckstein) #18

Still did not make it into real custom widget with variables.
Also it is a fixed design for a 3x3 size for 7" 1024x600 screen so need to resize the browser window accordingly.

    <div style="background: rgba(0,0,0,0.5);
            margin-top: 3px;
            margin-left: 3px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            width:236px; height: 236px;
	<div class="row" style="height: 30px" ></div>
	<div class="row">  
  		<div ng-init='model={"name": "Outside Light", "item": "kitchen_outa4", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "100" }'>   
    		<widget-switch   ng-model="model" />
	<div class="row" style="
  				  font-size: 2em;
  				  font-family: Roboto, Helvetica, sans-serif;
            text-align: center;
            border: 0px;      
  				  border-style: solid;
            border-color: green;            
  				  margin-top: 30px;
            margin-left: 0px;
            margin-right: 0px         
                        ">Outside Light

(Yannick Schaus) #19

Try this:

 <div style="background: rgba(0,0,0,0.5);
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
   <div style="margin:auto;">
     <div class="row" style="height: 30px" ></div>
     <div class="row" style="margin: auto;">  
       <div ng-init='model={"name": "Outside Light", "item": "kitchen_outa4", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "100" }'>   
         <widget-switch ng-model="model" />
     <div class="row" style="
                             font-size: 2em;
                             font-family: Roboto, Helvetica, sans-serif;
                             text-align: center;
                             border: 0px;
                             padding-top: 30px;
                             border-style: solid;
                             border-color: green;            
                             ">Outside Light

I don’t know yet why why it renders properly in the dashboard (it shouldn’t).

(Mattwire) #20

Hi, couple of issues with saving:

  • Custom widgets seem to be lost when saving to a new panel configuration. You can load them but next time you switch/save you lose them again.
  • Number of columns on main dashboard doesn’t get saved.

In fact, they seem to get lost every time a different browser loads the panel configuration (even just a page refresh!).