openhab/org.openhab.ui.habpanel

OUTDATED repo - HABPanel has moved to the openhab-webui repo!

HABPanel

HABPanel is a lightweight dashboard interface for openHAB.

The HABPanel code has moved to https://github.com/openhab/openhab-webui - this repo here is just kept for its history and is thus archived.

org.openhab.ui.habpanel's Issues

Rrd4j charts for group items cannot be displayed

Hi,

habpanel currently only supports rrd4j charts for single items.
If a group item is selected, an empty chart is displayed.

Reason is the URL in chart.tpl.html, which should start with /rrdchart.png?group= instead of /rrdchart.png?items= in case the item is actually of type group.

Dependency errors when setting up build environment

I am trying to setup a build environment as described in CONTRIBUTING. When I run npm install I get unsatisfied dependencies:

Binary is fine; exiting.
npm ERR! peerinvalid The package eslint does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint@~3.4.0
npm ERR! peerinvalid Peer [email protected] wants eslint@~3.4.0
npm ERR! peerinvalid Peer [email protected] wants eslint@>=1.0.0
npm ERR! peerinvalid Peer [email protected] wants [email protected] - 3.x

npm ERR! System Linux 4.2.0-42-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /home/ingo/org.openhab.ui.habpanel/web
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /home/ingo/org.openhab.ui.habpanel/web/npm-debug.log
npm ERR! not ok code 0

Is there something wrong with the package.json ? Any help on getting this resolved is appreciated

Take care
Ingo

Multiple info in a single widget

I'm sure this type of thing is on your roadmap already :-)
Being able to show multiple items details within a single widget would be very useful.
For example I'm more interested in TEMP than HUMID so a single widget with a large indication of temperature and a small indication of humidity would be perfect.
For someone else the importance might be the other way around so probably needs to be configurable where possible.

Build dashboard with link widgets

Is it possible to build the dashboard page with widgets (lets say "link widgets"). If these "link widgets" could also be used inside the pages itself it would give a height flexibility to move between pages.
This would also solve the problem using HABpanel on a mobile phone, where it is only possible to have 4, max. 5 dashboards (on iPhone - all the other are not visable)

Old issue OH 1.8.x: sometimes the item dont update

I think the problem is with OH (when i restart OH the atmosphere websocket start working again).
So, there is a way to do a second option: update the items via rest after a X seconds besides the websocket?
Thanks

Wishlist: Clickable Icons or Buttons with a Backgroundimage

I have some scenes for my rollershutters (night, sun etc.) with corresponding images:

It where very nice when the images are klickable (or have a linked OH Item) or the buttons can have a image.

Live updates for interactive charts

When an update of an item defines as a series of an interactive chart comes in the chart should be updated.

Searchable selectbox for items

When there are a lot of Items in openHAB it is very difficult to scroll and find.

So thought about a searchable selectbox like:
Examples here
Source

@ghys, what do you think? :-)

Wishlist: Turn Slider direction for Rollershutters

To use the Sliders in combination with rollershutters it where helpfull to turn the direction to 0% on top and 100% to the bottom. Then the "blue" line correspond to the open/close state of the rollershutter.

Include settings and custom widgets in the local panel configuration editor

Is it possible to share configured screens on Openhab 1.8 or is this only available in 2?

widget-icon not updating

It seems that widget icon is not updating when used in the templates. It is correct on the first load of the panel and does change after the first use, but that's it. The button continue to does work but will not update the state of the icon. In my case the gLights_B is a group of the lights and I use a button to pass OFF in order to do a master OFF only switch.

<button class="test" 
        style= "border: none; background: rgba(0,0,0,0); outline:none; " 
        ng-click="sendCmd('gLights_B', 'OFF')"> 
	<widget-icon iconset="'smarthome-set'" icon="'power-button'" size="100" state="itemValue('gLights_B')" />          
</button>

Do you see that too?

Settings openHAB Item as filterable dropdown

In the settings modal user is able to choose an openHAB item corresponding with given widget.
Wouldn't it be good to have some sort of filterable dropdown menu for this collection?

There are components like selectize.js that would fit perfectly in this scenario.
There's also ng-selectize for Angular.

Knob widget should allow floating point numbers as min and max values

The knob widget currently only supports whole numbers as min and max values.
I think it would make sense to support floating point numbers as well. My theromstat has a minimum value of 4.5, which I currently cannot set in the knob widget.
Note that the step supports floating point numbers, So I can go from 4 to 4.5 to 5 to 5.5 and so on. I just cannot set the start value as 4.5.

Move widgets to other dashboards

Would be nice in my opinion if one could move widgets from one dashboard to another. If one dashboard grows to large and I decide to create a seperate dashboard, I would certainly like to move my existing widgets instead of creating them anew in the new dashboard.
Maybe this functionality can be combined with the copy functionality mentioned in #9?

iframe doesn't work

I'm trying to add an iframe to show a page from an external site but the widget remains blank.

I have tried the widget with multiple websites. I have also tried visting the dashboard both inside my network and outside and the outcome is the same (i.e. blank widget).

Widgets on main Dashboard

Hi

I know its not planned but would you reconsider thinking about adding widgets on the main dashboard.

I'm not a developer so I wouldn't know your reasons behind it, but, could you not do away with the "main dashboard" and just have dashboards with the dashboard card as a widget. Under your settings page, miscellaneous settings you could set a default "main" dashboard.

Let image widget display ImageItem and URLs of StringItem

Currently the image widget only supports a fixed URL.
Actually, OH2 has an ImageItem, which contains an image in raw format. Would be nice if I could select such an item and display it.

Additionally it would be great if I could select a String item, and read the URL from the item, instead of hard-coding it in the widget.

Sorry for creating all these tickets... 😃 if I find some time to get familiar with angular I'll also try to contribute.

Enhancement: Responsive grid

Hello!
HABpanel is using angular-gridster for layout management.
What do you think of applying responsive styles to it? There were some attempts already to make a nice scalable grid for all the devices.

The only concern I have is that some inner parts of the widgets (icons, mostly) are not scalable/pixel-based.

We could also utilize mobileBreakPoint property for the widgets?

Dummy Widget: minimum height smaller on Browser

I'd like to have the possibility to size the dummy widget smaller (height) on PC (Browser)

Change color of background or set image as background

The color of the background should be made choosable by user. At the moment the background is only in black. The page/dashboard color should be editable or even better there should be the possibility to take a personal image as background.

Greetings Nic

Provide an dashboard configuration for the demo setup

openHAB comes with a demo setup, which defines items, sitemap and rules and can be used to demonstrate the features of openHAB. It is e.g. also used for our demo server at http://demo.openhab.org:8080/start/index.

I would very much love to have HABPanel included in it - at the moment, HABPanel is shown empty: http://demo.openhab.org:8080/habpanel/index.html#/

It would be great to have a read-only configuration defined that shows the features of HABPanel.
I can help integrating it into the demo setup, if someone else would create the dashboard configuration. Let me know what you think!

Prevent scrolling on iOS

It would be good to prevent scrolling (rubber band effect) when dragging your finger over the screen. This would help give the webpage an illusion of a true full screen app.

Modal Dialog Widget

It would be great if we could use modal dialogs as widgets. For example: Clicking on a Dummy widget which Shows the actual Temperature should open a modal Dialog to Set the temperature (Setpoint).

I think ui-bootstrap's $uibModal service would have to be injected into the controller bound to the template.

Text to voice error

On destop-PC:
Every time after starting HABpanel in the browser the first text to voice message gives the following error in the browser debugger. All the following work fine.

Automatic refresh option for the image widget

The image widget should ideally be extended to have an automatic refresh option, similar to the way the standard sitemap image widget does (forum discussion https://community.openhab.org/t/automatically-refreshing-images/17672/2).

Behavior of HOME + BACK Button

On my iPads(2,3), with the latest version from github installed, pressing the "home-button" doesn't take me to the home-screen any more. To go to the home-screen i have to click on "home-button" AND "back-button" afterwards or vice versa. A double-click one one of them works as well. On the PC-Desktop it works as expected.
This was not the case with the last version.
Does anybody else has this effect ?
Thank you very much to have scrolling back again !

Status widget (with mapping) idea

Currently I am using the dummy widget to show status of various items for example roller blinds and window actuators.

The issue I have is that I am getting different status data from openHAB 2 . In the case of my Windows actuators, I initially get "DOWN" when I send an "DOWN" command, however after a refresh it goes to "100".

I know that I could do this by rules in openHAB 2 , but it would be a really nice feature to have an in built mapping capability in the widget for 2 status conditions where you could test for 2 'openHAB' conditions per status.

It would also be good to be able to define a custom status message, therefore 3 text input fields per status condition would be needed.

For example.

Status condition 1 - Windows Open

Condition 1: DOWN Condition 2: 100 Displayed Status: Open
i.e. if the reported status from openHAB is either "DOWN" or "100" then the widget reports '"Open"

Status condition 2 - Windows Closed

Condition 1: UP Condition 2: 0 Displayed Status: Closed
i.e. if the reported status from openHAB is either "UP" or "0" then the widget reports "Closed"

In the case of my roller blinds I want to map "DOWN" and "100" to "Closed" and vice versa.

It would be great to have this flexibility at the widget level as I have 10 window actuators and 12 blind motors to control individually and these will also be under multiple groups for group control.

Taking this a little further it would be good if icons and colours were able to be changed for the 2 conditions, but this is not essential for my current needs.

Add support for Speech Recognition

Hello!
I've been thinking about implementing speech recognition capability in HABPanel.
I'm utilizing webkitSpeechRecognition for that (but may end up with SpeechRecognition)
So far I've managed to add an icon to the dashboard header and display the speech output on the top, like this:

The "bullhorn" icon is temporary - apparently bootstrap's Glyphicon collection doesn't have any microphone icon ;-)

The idea is to display the output text at the time of speaking - after the result is final, it should hide the <span> element containing the text and then pass the output to the VoiceCommand item in openHAB.

Now two questions:

1. Is it possible for me to get Voice Command Item (from the Rule Voice Interpreter setting)? Ideally, I'd like to retrieve it from REST, but couldn't find it. If it's not possible, then we'd need our users to select it in Settings.
2. @ghys would you mind me extending current SpeechService or you'd rather see it somewhere else? Currently I'm coding simple POC inside dashboard.view.controller but I'm thinking on better place for the logic.

Thank you,
Kuba

Moving widgets between dashboards

It would be a great addition to the Edit mode if we could quickly move widget to the pointed dashboard.

There are two options to accomplish this, from the UX perspective:

• We could add a new tab in the Settings modal with Dashboard dropdown field and it would indicate where this widget is situated currently. Changing its value would result in moving it elsewhere.
• "Move" action would be accessible directly from the widget (like cog icon etc.)

What do you guys think?

I'd add Enhancement label there if I could :)

Not including file changes and files in build enviroment

Hope this is in the right place.

I'm just getting myself familiar with the openHAB IDE and HABpanel.

I have the openHAB runtine working fine on localhost and have HABpanel working through this as a plugin.

I'm also able to follow the steps in the Contributing.md npm install etc and building a package using maven.

Issue I'm having is with gulp I think if I update say the slider.scss with new class, and run nvm,bower,gulp and run the new class is not included, also say if I include a new .scss file in the slider folder it's not included .
If you have any ideas or advice that would be great.

New weather widget

So I'm working on the weather widget for HABPanel :)

Right now I'm working on cleaning up the code (I have like 9 items to update from openHAB. It needs some a factory pattern of some sort to get it right).
I also need to add more configurable options (like icon animation, maybe different layouts).

Let me know what you think!

I'm submitting this issue to start a discussion. Later, when my code will be polished and working, I'll post a pull request.

Cheers!

Parsing DateTime data to dummy widget

Problem parsing Date & Time data to the dummy widget.

Please refer to the following forum post:

https://community.openhab.org/t/habpanel-bundle-proof-of-concept-aka-panel-ui/12981/35

Multiseries chart does not render if one series has no data in period

To start with I must say that I absolutely love Habpanel and all the action in this project right now!

I was very happy when the support for several series was added in the chart widget. It was the turning point for me which made me migrate from the basicui to habpanel.

It seems however that the chart does not render correctly if you have several series in which (at least) one series does not have any data points in the period you try to chart.

In my case I chart all my motion sensors (0 and 1) in the same graph to illustrate the movement in my house. If one sensor has no change within the chart period the graph does not work. A workaround would be to persist the sensor values every 15 minutes or so but I would rather only want to persist actual changes.

Example of a non working chart

Example of a working chart

Chart Widget: customize Style

is it possible to style the Chart Widget ? i would like to have a line chart without filing to x-axis

Ability to fetch sitemaps as dashboards dynamically

It would be great to be able to construct the sitemaps as in Project Rotini and then have HABpanel recognize them as valid dashboards.

Obviously, that would require following strict semantics of the widget, like:

Frame label="TV {widget:button,icon:tv}" {
  Switch item=TV mappings=[
    ON="Turn on"
  ]
}

What do you think? 😄
I've seen @kaikreuzer comment somewhere that openHAB is leaning towards flow without need of creating sitemaps (or maybe I'm wrong), so I don't know if it'd be applicable in the future.

Custom widgets - add "default" fields value

Hello!
I'm creating a new widget that has decent amount of settings.
I have two suggestions:

• To add a new field "Default" to the setting form (along with "Type", "Id" and "Label").
  This will allow us to set constraints for given fields
• Format the forms a little bit, e.g.

.widgetdesigner .well {
    width: 50%;
    display: inline-block;
}

This way we utilize some of the white space.

navigation in chart widget

in your chart you can select datapoint with the mouse. i'd like to move from one datapoint to an other from selected series with arrow keys (<-, ->), do you think that's possible ?

thanks in advance

Status Bar

it could be really cool to add some item to the status bar like the time the wheater or anything

Select json from a http server

There is any chance to choose a previously saved configuration json by a http url?
My idea is to save the json and load this from a url.
I use OH 1.8.x.
Or wich file is the 'loading json' function, so i could change it myself?
Thanks

Add possibility to copy existing widgets

Hi,
would be a nice feature in my opinion to be able to copy an existing widget.
Sometimes one has very similar items which also should look the same in HABpanel (e.g. color of buttons). Would be much easier if I could just copy an existing widget configuration and change the linked OH item.

Prevent iOS zoom on double tap

Could you prevent page zoom (scaling) on double tap.

Knob Widget: Add color ranges

I am working on an enhancement to the knob widget to allow defining ranges and asssign a color to each range. When the value is inside one of the ranges the color of the Knob widget and the color of the vaule changes accordingly.
Additionally if the tron style is used the tron arc would show the color ranges as well to indicate where the color change does happen.
I took this idea from grafana which has a similar concept.

In HabPanel it would look similar to this:

(taken from my current HabPanel where I use an template widget with an iframe to embedd an grafana chart - really slow thats the reason why I want to replace this with native HabPanel functionality)

To define the ranges (up to 5) I plan to enhance the settings dialog with an additional tab.

Let me know what you think.

Take care
Ingo

webaudio not working on Android browsers

audio play webaudio doorbell.mp3 works sucessfully on my PC using Firefox and Chrome.

I'd like to be able to use webaudio for wall mounted tablets - the idea is actually a multi room doorbell - however webaudio does not seem to work on Android in either the native Samsung browser or Chrome. Any ideas?

Conversely, webaudio works through Paper UI on my Android devices.

Cannot install habpanel in b4

Following this post I installed the snapshot release via apt-get and tried to install the habpanel from within the paperui.

However, I always get this exception:
00:56:54.516 [ERROR] [st.core.extensions.ExtensionResource] - Exception while installing extension: org.osgi.service.resolver.ResolutionException: Unable to resolve root: missing requirement [root] osgi.identity; osgi.identity=openhab-package-standard; type=karaf.feature; version="[2.0.0.b3,2.0.0.b3]"; filter:="(&(osgi.identity=openhab-package-standard)(type=karaf.feature)(version>=2.0.0.b3)(version<=2.0.0.b3))" 00:56:54.531 [INFO ] [smarthome.event.ExtensionEvent ] - ui-habpanel: org.osgi.service.resolver.ResolutionException: Unable to resolve root: missing requirement [root] osgi.identity; osgi.identity=openhab-package-standard; type=karaf.feature; version="[2.0.0.b3,2.0.0.b3]"; filter:="(&(osgi.identity=openhab-package-standard)(type=karaf.feature)(version>=2.0.0.b3)(version<=2.0.0.b3))"
I guess in the beta 4 the version is 2.0.0.b4 so the dependency to b3 is too strict.

Security: Add PIN protection

I'd like to suggest a feature - an optional layer of security for either:

1. Whole HABPanel instance
2. Specific dashboard

When 1 or 2 is "locked", then any user interaction should be prevented by displaying PIN input overlay.

The lock screen should contain a keypad and stars indicator.

New analog clock widget

I would like to add an analog clock widget to habpanel. I am planing to use http://deepu.js.org/angular-clock/ as the basis for this.
It would look like this:

New selection list widget

Hi,

would be nice to have a widget with a similar functionality like a button, but with a list of command values, which can be selected in a selection list (or similar).
My use case would be a list of playlists for my audio system. I don't want to make 10 buttons in order to support 10 different playlists :-) (or is there already a similar functionality which I missed?)

I know that recently possibility to create custom widgets was introduced. However, I think this could be a "basic" widget as there are probably many more use cases.

Wiring HABPanel with openHAB rules - HABPanel actions

I'm playing around with my local HABPanel and just came up with this crazy idea.
It would be great if we could integrate it with native openHAB rules.
Imagine that you have a rule like this:

rule "Switch dashboard to front camera when doorbell rings"
when
    Item Doorbell changed
then
    habpanelChangeDashboard("cameras")
end

or even some voice command like

rule "Show me the charts"
when
    Item VoiceCommand received command
then
    if (command.contains("show me the charts")) {
        habpanelChangeDashboard("charts")
    }
end

That would require implementing HABPanel action preferably inside add-on.
On the backend side there would be a need to handle the action logic.
On the frontend, however, we would require a way to react on these events coming from rule engine.

What do you think?

Theme

Is it possible to Edit the theme ? I can't find the fine in my openhab 2 folder

Enhancement: IFrame widget to be able to receive URL from String item

This one is in fact similar to #19.
Current iFrame widget allows you to display any website from a given URL passed in the widget settings.
It would be great if we could choose whether we want to:

• Get the URL from given String item in openHAB
• Type the url into config text

My use case scenario:
I have a rule that reacts on my voice command.
If the command contains some specific keywords,
my HABPanel should be set to specific dashboard and set the URL of an iFrame dynamically.
e.g.

rule "Show me the timetables"
when
    Item VoiceCommand received command
then
    if (command.contains("how can I get to the central station")) {
        habpanel.postUpdate("timetables") // set the dashboard
        myIframe.postUpdate("http://timetables.example/?from=MYHOME&to=Central+Station")
    }
end

Hope that makes sense! :)