Modal Dialog Widget

[Nic0205]

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.

[neohusky]

Along the same lines...this could be used for the weather (sorry) widget which just displays limited info and as such could open a modal dialog with the additional info.

Also maybe a modal dialog could be brought up to activate a switch on a timer as defined in a modal dialog. I don't know how easy this could be using variables and rules.

There are several use cases for this. I'd agree that this should be added to a long term enhancement suggestion list.

[ghys]

Not sold on this. Not sure how to implement it properly and remain flexible. Better have another dashboard for the details and have the widget navigate to it. You can send its name to the item defined in the settings to do it now, or that could even be a supported function called from the template.

If you absolutely want a modal I tried adapting a JS-less example from http://youmightnotneedjs.com 😄 with surprisingly good results.

Excuse the mess, and injecting CSS like this is definitely not good practice, but here you go as a starting point:

<style>
button.testmodal {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: #c69;
  border: none;
  padding: 1.5em;
  max-width: 30%;
  color: white;
  -webkit-transition-duration: .25s;
          transition-duration: .25s;
}
button.testmodal:hover {
  background-color: #993366;
}
div.testmodal {
  opacity: 0;
  visibility: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: wheat;
  color: black;
  border: 1px solid #c69;
  border-radius: 3px;
  height: 250px;
  left: 20px;
  right: 20px;
  top: 100px;
  -webkit-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;
}
button.testmodal:focus + div.testmodal {
  opacity: 1;
  visibility: visible;
}
span.closemodal {
  position: absolute;
  top: .2em;
  right: .5em;
  font-size: 1.5em;
  cursor: pointer;
}
span.closemodal:hover {
  color: #c69;
}

</style>
<button class="testmodal">Click me</button>
<div class="testmodal">
  <span class="closemodal">&times;</span>
  <p>Hello Beautiful!</p>
</div>

[Nic0205]

Hi ghys,

thanks for replying.

For sadness the example you posted does not work :-( . It´s not a habpanel issue because I can´t run the original example from youmightnotneedjs neither in safari nor in firefox browser. Strange...

[Nic0205]

Hi Yannick,

Could you explain further How i could tell a widget to open an other dashboard ? Sorry i am just starting with habpanel. .. Greetings Dominic

Am 18. Oktober 2016 22:12:49 MESZ, schrieb Yannick Schaus notifications@github.com:

Not sold on this. Not sure how to implement it properly and remain flexible. Better have another dashboard for the details and have the widget navigate to it. You can send its name to the item defined in the settings to do it now, or that could even be a supported function called from the template.

If you absolutely want a modal I tried adapting a JS-less example from http://youmightnotneedjs.com 😄 with surprisingly good results.

Excuse the mess, and injecting CSS like this is definitely not good practice, but here you go as a starting point:

<style>
button.testmodal {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
     -ms-flex: 1;
         flex: 1;
 background-color: #c69;
 border: none;
 padding: 1.5em;
 max-width: 30%;
 color: white;
 -webkit-transition-duration: .25s;
         transition-duration: .25s;
}
button.testmodal:hover {
 background-color: #993366;
}
div.testmodal {
 opacity: 0;
 visibility: hidden;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
     -ms-flex-pack: center;
         justify-content: center;
 position: fixed;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
     -ms-flex: 1;
         flex: 1;
 background: wheat;
 color: black;
 border: 1px solid #c69;
 border-radius: 3px;
 height: 250px;
 left: 20px;
 right: 20px;
 top: 100px;
 -webkit-transition: 0.3s ease-in-out;
         transition: 0.3s ease-in-out;
}
button.testmodal:focus + div.testmodal {
 opacity: 1;
 visibility: visible;
}
span.closemodal {
 position: absolute;
 top: .2em;
 right: .5em;
 font-size: 1.5em;
 cursor: pointer;
}
span.closemodal:hover {
 color: #c69;
}

</style>
<button class="testmodal">Click me</button>
<div class="testmodal">
 <span class="closemodal">&times;</span>
 <p>Hello Beautiful!</p>
</div>

You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: https://github.com/openhab/org.openhab.ui.habpanel/issues/48#issuecomment-254625280

Diese Nachricht wurde von meinem Android-Mobiltelefon mit K-9 Mail gesendet.

[ghys]

Hi Dominic, For now you'll have to define an item will react to, and set it in the advanced settings in the main menu, under Switch dashboard with item value. When you update this item to a dashboard's name, HABPanel will switch to it. You can imagine different scenarios with this functionality (what I call "contextual dashboards"): for instance, I use it with a rule on the server to automatically bring up my "morning routine" dashboard on a tablet near my front door when I'm about to go to work... I have another rule when I'm going away, I make it switch to another dashboard for when I'm back gome. Example in video here: https://twitter.com/yschaus/status/784393871346335744

If you want to switch to another dashboard by clicking on a link or a button, you can do it with a Button widget, or a Template widget with this kind of HTML:

<button class="btn btn-primary btn-lg" ng-click="sendCmd('Your_Item', 'Lightning')">Go to Lightning</button>

(assuming you have a dashboard named "Lightning")

[Nic0205]

Hi Yannick,

thank you - now it works.

One last question:

I´ve got the following html code for a modal window:

<style>

  body {
  margin: 20px;
}

body {
  font-family: Arial, sans-serif;
    background: #ddd;
}

.hide {
  display: none;
}

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    padding: 5px 10px;
    border: 1px solid #aaa;
    background-color: #eee;
    background-image: linear-gradient(top, #fff, #f0f0f0);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    color: #666;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer;
    transition: all 0.2s ease-out;
  &:hover {
    border-color: #999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  }
  &:active {
    box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
  }
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
    transition: opacity 200ms;
  visibility: hidden;
    opacity: 0;
    &.light {
    background: rgba(255,255,255,0.5);
  }
  .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
  }
}

#p1:checked ~ #popup1.overlay {
  visibility: visible;
  opacity: 1;
}
#p2:checked ~ #popup2.overlay {
  visibility: visible;
  opacity: 1;
}

.popup {
    margin: 75px auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #666;
    width: 300px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    position: relative;
  .light & {
    border-color: #aaa;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  h2 {
    margin-top: 0;
    color: #666;
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
  }
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
    opacity: 0.8;
    transition: all 200ms;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #666;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }
  .content {
    max-height: 400px;
    overflow: auto;
  }
  p {
    margin: 0 0 1em;
    &:last-child {
      margin: 0;
    }
  }
}

</style>

<input type="checkbox" class="hide" id="p1">

<label for="p1" class="button">Click me</label>

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Info box</h2>
    <label for="p1" class="close">&times;</label>
        <div class="content">
    <p>Test</p>

        </div>
    </div>
</div>

Is there a chance that i could get a stadnard habpanel widget in the modal window (the knob widget for example)?

Greetings Dominic

[ghys]

First off, the styling here is SCSS and not vanilla CSS (it has imbricated classes), it's not going to work - \ style nodes accept CSS only.

To put widgets check the openHAB forums, you'll find few examples of floor plan proof-of-concept templates using widget-switch and widget-slider.

[Nic0205]

Hi Yannick,

widget-switch and widget-slider seem to work - but i want to use the knob-widget in my template. I tried the following:

`

</div>`

But nothing appears - Could you see where my mistake is?

Greetings Dominic

[ghys]

I think that's because the knob widget assumes its great-grandparent node to be a dashboard tile (to adjust its size to it). So it's not easy to put it in a template currently I guess (or by luck or trial and error).