Custom Popups?

Apps & Services HABPanel
1

Is there any way to show a custom popup dialog when clicking an item?

For example I’d like to do the following:

  1. Click “House Off” -> Confirm popup is shown "Are you sure?"
    Or
  2. Doorbell is pressed -> Alert Popup is displayed for 10 minutes
2

You have interesting examples without Javascript here: https://github.com/you-dont-need/You-Dont-Need-Javascript
Below is one adapted from this one, you can rely on variables in your scope instead of tricks like a hidden input element (so you can have multiple popups on the same page).

<style>
.custom-modal-container {
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  color: white;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
  z-index: 99999;
}
.custom-modal-container.active {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.custom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 2em;
  border-radius: 0.5em;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.custom-modal.close-modal-area {
  width: 100%;
  height: 100%;
}
.custom-modal.custom-modal-box {
  background: indianred;
  text-align: center;
}
.custom-modal-content .custom-modal {
  width: 100%;
  max-width: 40em;
}

.toggle-modal-button {
  background-color: transparent;
  color: white;
  display: inline-block;
  padding: 1em;
  cursor: pointer;
  border-radius: 0.5em;
  box-shadow: inset 0 0 1px white;
}
.toggle-modal-button:hover, .toggle-modal-button:focus,
    .toggle-modal-button:active {
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
}
.custom-modal-content .toggle-modal-button {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1em;
}

.custom-modal-content {
  color: peru;
  width: 90%;
  max-width: 600px;
  padding-top: 2em;
  margin: 0 auto;
}
</style>
<section class="custom-modal-container" ng-class="{ active: show_modal }">
  <div for="toggler" class="custom-modal close-modal-area" ng-click="show_modal=false"></div>
  <div class="custom-modal custom-modal-box">
    <div>Are you sure?</div>
    <br />
    <div class="toggle-modal-button" ng-click="show_modal=false; sendCmd('Presence_Toggle', 'OFF')">Yes</div>
  </div>
</section>
<section class="custom-modal-content">
  <div class="toggle-modal-button" ng-click="show_modal=true">Show Modal</div>
</section>

Alternatively you could use itemState('SomeItem') instead of the variable in ng-class to add/remove the active class (and also change ng-click to send commands to this item).

Two things when reusing examples with extensive styling:

  • Make sure you don’t copy paste un-preprocessed SASS/SCSS/LESS but the final compiled vanilla CSS;
  • Make the necessary changes so that you don’t use generic classes and broad selectors in your CSS - they might collide with existing ones defined by HABPanel or its dependencies.
2 Likes
3

Nice! I’ll have a play thankyou

4

So, I’ve been playing around with this and it is working well, except for some z-order issues that I can’t seem to resolve:

modalpopup-zorder.png1898×978 117 KB

Three of those are frame widgets but the “hot water” one is a custom widget identical to the “occupied” one which I’m using to trigger the popup. On another dashboard the modal popup is correctly on top of everything.

5

Same problem here. I have the same Widget 3x on the dashboard but only one displays correctly, the others not (see picture - i’m new into programming so sry). Maybe someone can help? (used code above from Yannick (ysc))

p1
p1.png796×600 9.69 KB
p3
p3.png689×617 8.37 KB
p2
p2.png732×602 9.69 KB

6

Are they also frame widgets… Or another type of widget? I am going to make some changes to mine now that habpanel has gained support for quite a few new things (like embedding javascript and custom stylesheets). As my frame widgets are there to support custom javascript for an android app (fully kiosk browser) I should be able to replace them with custom widgets which I hope will then not be above the modal.

7

Hi, thanks for this quick answer. It’s a custom widget i made (or tried to). I’m trying to get into Javascript/bootstrap/angular but due to other heavy workload at the moment it’s going only slowly onward. Maybe if you get something to work you can share the code? Would be amazing (and help me and maybe others a lot)

8

You might be interested to know that the newer HABPanel snapshots support the openModal() function in templates to open modal windows (the 2.1 stable version does not however, it was introduced afterwards).

Check the Opening a modal with sliders for each item in a group example here:

1 Like
9

:man_facepalming: the 2.2 was already installed at my raspi @home but if you miss to install it on the laptop too (to work while traveling)… yea and it seems i didn’t read the “HABPanel Development & Advanced Feature: Start Here!” properly enough…Now working great. Thanks for bringing me on the right path :grin:

1 Like
10

como pudiste dar solucion a esto tengo el mismo problema

11

Guys, I was searching for steps on how to add the above given code, but could not find where to add this. Can you please help. I’m working with latest version of OH2 and still using it by modifying demo files in openhab-conf folder accessed through windows explorer.
thanks