Habpanel Camera Image Popup Issue

[shorin (Danny)]

I’m working on doing a widget for displaying my camera views in Habpanel. Small view as part of the page, but when clicked, opens a large version in the screen (with a higher refresh). Images are being generated by Blue Iris (different computer).

I uninstalled v2.0 of habpanel through the paperUI, and then downloaded the current snapshot (v140) and put it in the addons folder. I did this so I could play with the new Javascript capability to better handle multiple images on one screen.

Here’s my widget code:

<style>
.toggle-modal-button {
  width: 100%;
  height: 100%;
}
.custom-modal-content {
  width: 100%;
  height: 100%;
}
</style>

<script type="text/ng-template" id="myModalContent.html">
    <div class="container" style="padding: 0px; border: 0px solid #456;">
      <a ng-click="$close()"><widget-image ng-model="image_big"></widget-image></a>
    </div>
</script>

<div ng-init="image_big={url: 'http://192.168.150.7:81/image/' + config.camera_id + '?q=100', refresh: 1} " ></div>
<div ng-init="image_sm={url: 'http://192.168.150.7:81/image/' + config.camera_id + '?q=100', refresh: 10}" ></div>

<section class="custom-modal-content">
  <div class="toggle-modal-button" ng-click="openModal('myModalContent.html', true, 'lg')">
   <widget-image ng-model="image_sm"></widget-image></div>
</section>

Here’s the issue. In the preview window for the widget editor, it works fine. I added one of the new widgets to a screen, and I just get a black box with a white square in the middle. If I click on it, the popup image appears and displays correctly. I can put two or three on the screen, and they all do the same thing. Popups appear correctly, and don’t have any of the on top issues I had using the modal method, so that’s good… But them working in preview, but not on a screen is strange.

I’m thinking it’s a bug, but I wanted to see what everyone else thinks. Hopefully I’m missing something simple.

[ysc (Yannick Schaus)]

Try reloading the page with the Chrome developer tools open and check the Network tab, there might be some info about why the images are not loading there?

[shorin (Danny)]

No errors at initial load (images not showing). When I click on one of the images, I do get one error and then I can see that refresh updates. Here’s the error:

HTTP ERROR 404

Problem accessing /habpanel/%7B%7Bvm.url%7D%7D. Reason:

Not Found

[shorin (Danny)]

OK, got it working and I have no idea how… I was playing with some formatting to match my other custom widgets, and somehow it started to work. The “important part” didn’t change, so I’m not sure what’s going on… Here’s the full code that works now (not what I’m keeping, but it works at least). Maybe it will be a clue to someone for what’s going on…

<style>
.horizontal-line {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	border-bottom: 1px;
	border-bottom-color: gray;
	border-bottom-style: solid;
}
.multi-header {
  font-size: 20px;
  color: gold;
	font-style: bold;
  text-align: left;
}  
.toggle-modal-button {
  width: 100%;
  height: 100%;
}
.custom-modal-content {
  width: 100%;
  height: 100%;
}
</style>

<script type="text/ng-template" id="myModalContent.html">
    <div class="container" style="padding: 0px; border: 0px solid #456;">
      <a ng-click="$close()"><widget-image ng-model="image_big"></widget-image></a>
    </div>
</script>

<div ng-init="image_big={url: 'http://192.168.150.7:81/image/' + config.camera_id + '?q=100', refresh: 1} " ></div>
<div ng-init="image_sm={url: 'http://192.168.150.7:81/image/' + config.camera_id + '?q=100', refresh: 10}" ></div>

<table width="100%"><tr><td style="width: 100%; height: 100%; padding: 10px">
<table cellpadding="20" width="100%">
  <tr align="center">
      <td class="multi-header">{{config.camera_header}}</td>
    </tr>
    <tr><td height="2px" colspan="100%"></td></tr>
    <tr><td class="horizontal-line"></td></tr>
    <tr><td height="5px" colspan="100%"></td></tr>
  <tr><td>
  <section class="custom-modal-content">
    <div class="toggle-modal-button" ng-click="openModal('myModalContent.html', true, 'lg')">
     <widget-image ng-model="image_sm" style="width: 100%; padding: 0px; margin: 0px; border: 0px; "></widget-image>
    </div>
  </section>
  </td></tr></table>
</td></tr></table>

In this is some style code added to the widget-image that I was experimenting with. Removing it didn’t fix or break anything. I’m trying to get rid of a wide black border around the image, and haven’t found anything listed anywhere that shows the style controls that can be used on the widget-image… If anyone knows, I’d appreciate it…

[xsherlock (Maciej Eckstein)]

Great example I have the same setup and just copied it.
One thing that I now have in mind would be getting the popup modal on demand when some OH item changes, (additionally to the tumbnail click) So the when unknown car stops at the gate or intercom button is pressed it is already poped up (on my tablet that takes 1-2 seconds)

Anyone has any idea how to do it as my HTML skills are lacking, and I would need some example to build uppon.

[matt1 (Skinah)]

Use this widget.

Custom Widget: Camera History and Live Popup

This Widget is very hard to explain what it does as it is designed to take up not much space in a Panel and give lots of features. Hopefully the picture explains it more clearly than my writing. It can be used to: Auto popup (modal) a live view of the camera when an item triggers the view to open. Auto closes back to your Habpanel when the trigger turns off. You can choose to popup the video only over the widget if your don’t want the whole screen taken over. Gives you a history of recent rec…

[xsherlock (Maciej Eckstein)]

@matt1

Use this widget.

Hi,
While I think I identified the section of the code You use to display the modal on the item change it is very different to the way the other click-on example works. And I have hard time combining those two to have a preview that is both clickable and will popup on on the item change (physical button press)

<div class="toggle-modal-button" ng-click="openModal('myModalContent.html', true, 'lg')">
	<widget-image ng-model="image" ></widget-image>
</div>

Is my preview image frame, and this piece of script is the content of modal.

<script type="text/ng-template" id="myModalContent.html">
    <div class="container" style="padding: 0px; border: 0px ;">
      <a ng-click="$close()">
        <widget-image ng-model="image"></widget-image>
      </a>
   </div>
</script>

That is quite straight forward.

Now your proposal has this piece of code responsible for the modal.

<ng-template ng-if="itemValue('gate_button') =='ON'">
    <section class="camera-live-popup" ng-class="{ active: show_modal }">
      <style>.camera-history-live-feed{height: 100%;width: 100%;position: absolute;top: 0px;right:0px;}</style>
      <img class="camera-history-live-feed" src="http://172.16.10.135/snap.jpeg"></img>
    </section>      
    {{show_modal=true}}
</ng-template>

with some styling that seems important, but I all is very hard for me to understand where is the content of the modal to display. I would really appreciate if you could point me How can I triger displaying the “myModalContent.html” from the first example that works so well for me with the ItemChange.
TIA
Maciej

[matt1 (Skinah)]

@xsherlock

And I have hard time combining those two to have a preview that is both clickable and will popup on on the item change (physical button press)

I could not work that out when I was playing with it. I’m sure it is possible to do I just don’t use any tablets here so I have zero interest in getting it going, As you don’t need to put the functionality into one widget, just use two and it does not even need to be seen for it to work.

[xsherlock (Maciej Eckstein)]

So I did, and have two separate parts of code to display the same popup(one on click one, one on the item change)

But now why the heck the ordering problem happens with the one invoked with the item change!
the z-index is set to high value. and the modal is not on the front of the panel, covered by some but not all other widgets.

With the ng-click="openModal('myModalContent.html', true, 'lg')" method it is nice in the foreground.

here is the styling for it, changing the z-index: does not make any difference

.camera-live-popup {
      background: rgba(0, 0, 0, 0.75);
      opacity: 0;
      color: white;
      width: 80%;
      height: auto;
      position: fixed;
      top: 10%;
      left: 10%;
      visibility: hidden;
      z-index: 99999999999;
    }
.camera-live-popup.active {
      opacity: 1;
      visibility: visible;
  		-webkit-transition: opacity 0.5s;
      transition: opacity 0.5s;
  		z-index: 99999999999;

---

solved with a workaround, deleting the template widget, and adding it as the last one to the page make it render on the top of others, but that means you can only have one widgget that spawns popup on value change if you use this method.