openhab / org.openhab.ui.habpanel

OUTDATED repo - HABPanel has moved to the openhab-webui repo!
https://github.com/openhab/openhab-webui
Eclipse Public License 1.0
97 stars 93 forks source link

Build dashboard with link widgets #22

Closed s-simma closed 7 years ago

s-simma commented 7 years ago

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)

neohusky commented 7 years ago

YES! I would love this feature also. Dashboard linking for habpanel. Dream come true.

ghost commented 7 years ago

I would also like this. I was thinking today that it would great to have a another level of panels that could be accessed from a link on a panel. My use case would be to have friendly (WAF) summary & group control widgets on the first level then more detailed individual widgets (for me ;-) ) on the second level.

Edit: The above idea is better than what I was thinking about, as it is a essentially a drill down approach, hence there does not necessarily need to be a limit to the number of panels available.

Another potential example could be having say 4 security video feeds (using 4 Frame widgets) on one panel then when you click on one of the feeds you move to a single larger Frame view (or full screen) for that feed.

p.s. I have started to try to learn AngularJS, so that I can hopefully contribute to this project soon.

ghys commented 7 years ago

I've been planning this for quite some time, I'll add it to the button widget - instead of only being able to send a command to an item, it will support several types of actions, including navigating to another dashboard.

Btw, I just pushed #23 which adds some layout and display options to the main menu (this was long overdue).

neohusky commented 7 years ago

It's turning into a fantastic piece of software. This welcome addition certainly increases the WAF!

Thank you for your continued work on this.

kaikreuzer commented 7 years ago

I fully agree with @neohusky, really fantastic progress!

ghost commented 7 years ago

Awesome, thank you for the excellent work you are doing!

s-simma commented 7 years ago

@ghys It's like christmas !!

s-simma commented 7 years ago

@ghys For mobile devices it would be great, if the "font-size" for the dashboard title could be configured ("Dashboard Card Settings") Is this possible ?

ghys commented 7 years ago

Thanks very much for the praise! :) I experimented with the background URL option and some pictures hotlinked from Wikipedia and quickly got interesting results... if you're fed with the blue theme and SVG backdrops and want something prettier ;) image

@s-simma yes there will be other settings for the tiles, I missed this one.

neohusky commented 7 years ago

@ghys Praise is given when its deserved. I just quickly tested your above work in progress and it does look good. I can't wait to try the enhancements to the button widget to link to dashboards.

I was just looking at the image above and thinking ahead: It would be great to be able to disable the gear icon, date and fullscreen button and make the dashboard take up this extra space. Your providing enough widgets that date info can be displayed on a main dashboard(template widget) and maybe the config gear and fullscreen icon can be called up via a button on a settings dashboard.

ghys commented 7 years ago

I kinda like it... But I guess it can be made optional.

isigmund commented 7 years ago

I would also like to see a possibility to hide the header and I agree it should be something that can be enabled or disabled. Maybe an URL Parameter would be good to conrol if the header line is displayed or not

isigmund commented 7 years ago

There is the possibility to navigate to a different dashboard by using the template widget: image

Here is he coding that I used for the 2 navigation buttons. Left:

  <button class="btn btn-lg" 
          style="background: red; color: white" 
          ng-click="sendCmd('strCurrentPanel', 'Livingroom')">
    <i class="glyphicon glyphicon-chevron-left"></i>
  </button>

Right:

  <button class="btn btn-lg" 
          style="background: red; color: white" 
          ng-click="sendCmd('strCurrentPanel', 'Outdoor')">
    <i class="glyphicon glyphicon-chevron-right"></i>
  </button>

You need a string item (strCurrentPanel in my case) that is used to to trigger the navigation. You will have to add that item in the advanced settings like so: image

The drawback of this approach is that if you add dashboards you have to adjust the coding and for each dashboard the coding has to be different to navigate to the next or previous dashboard.

ghys commented 7 years ago

I would also like to see a possibility to hide the header and I agree it should be something that can be enabled or disabled. Maybe an URL Parameter would be good to conrol if the header line is displayed or not

Not related to this issue, but this was a good idea. Implemented in #58.

kubawolanin commented 7 years ago

Hello! Take a look on my custom widget that does pretty much same thing @s-simma requested. Custom widget: Dashboard Link

It's based on HABPanels redirection capability.

Cheers

ghys commented 7 years ago

Now a built-in feature of the button widget! see #92.