Custom widgets: feature walkthrough

ysc · November 14, 2016, 1:28am

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.

Dim · November 14, 2016, 4:19am

Excellent stuff ! Thanx @ysc

MikeD · November 14, 2016, 4:55am

Hi @ysc

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

Cheers,
Mike

ysc · November 14, 2016, 7:49am

Great to hear!

@MikeD I received your original message - there was a nasty bug indeed, I think it’s fixed now (https://github.com/openhab/org.openhab.ui.habpanel/commit/3f2218fce1b78b22187da51833b7f3cc8f442fc2). 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.

MikeD · November 14, 2016, 7:49am

Andrew_Pawelski · November 14, 2016, 12:17pm

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

MikeD · November 14, 2016, 8:29pm

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

Heiko_Fanieng · November 14, 2016, 10:54pm

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!

Heiko

ysc · November 15, 2016, 8:18am

The build ran 8h ago: https://openhab.ci.cloudbees.com/job/openHAB2-Bundles/lastSuccessfulBuild/org.openhab.ui$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.

skeal · November 15, 2016, 8:25am

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 · November 15, 2016, 9:19am

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 · November 15, 2016, 3:39pm

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

mattwire · November 15, 2016, 9:07pm

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?

ysc · November 15, 2016, 9:47pm

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 · November 15, 2016, 10:38pm

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

xsherlock · November 16, 2016, 1:30pm

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

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

ysc · November 16, 2016, 7:39pm

I know, this is planned
weird… can you post the .json of your widget so I can test?

xsherlock · November 17, 2016, 7:56am

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>
	</div>
	<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
</div>
</div>

ysc · November 17, 2016, 8:22am

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>
     </div>
     <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
     </div>
   </div>
</div>

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

mattwire · November 17, 2016, 7:19pm

@ysc
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!).