Template widget - tutorial & examples - make your own widget!

loovanloon · October 28, 2020, 3:25pm

HOW TO GET LIST OF FILES FROM A (network) FOLDER

I want to create an image carousel widgets that reads/scrolls through the contents of a (network) folder. Therefor i need to generate a list (array) of filenames from all the files of the folder. This folder-network path will be configurable in the widget (i don’t want to provide a fixed list of image sources).

So how do I generate such list of files from a folder by using:

any Openhab-binding?
javascript (I’m quite sure not)?
or any other option …?

unidjune · November 1, 2020, 3:04pm

Thx, I would like to know why exactly your changes work?

The example didn’t work for me either…

wosch87 · December 21, 2020, 2:36pm

Dear all,

sorry for the long text, but maybe some background information is helpfull since I am not sure if there is another solution than changing existing template widgets…
I have 3 wall-mounted tablets running HABpanel. Until now I used Kiwi Browser in kiosk mode. Yesterday, I introduced HPV since switching to another dashboard by a rule did not work with Kiwi. Auto switching from one dashboard to another works fine with HPV, but unfortunately there seems to be any difference in resolution or maybe exact size about some 0.x inches between the tablets which leads to perfect dashboard one on of them (actually everything like it was before) and chaotic dashboards on the other two (both are the same tablets).
Therefore I created a new panel configuration for the 2 tablets which were NOK and adjusted icon size, font size and so on. Except for “some” clicks, no big deal. BUT: I am using several template widgets which are just showing some item values as a text. One of those is shown below - at least a part of it:

<div class="row">
  <div class="col-xs-4 text-left"><span style="font-size: 1vw">Bad OG</span></div>
  <div class="col-xs-3 text-left"><span style="color:rgb(255, 165, 0); font-size: 1vw">{{'%.1f' | sprintf:itemValue("TempBadOG_Temperature")}} °C</span></div>
  <div class="col-xs-3 text-left"><span style="color:rgb(255, 165, 0); font-size: 1vw">{{'%.1f' | sprintf:itemValue("TempBadOG_Humidity")}} %</span>
  </div>
</div>
  
<div class="row">
  <div class="col-xs-4 text-left"><span style="font-size: 1vw">Colin</span></div>
  <div class="col-xs-3 text-left"><span style="color:rgb(255, 165, 0); font-size: 1vw">{{'%.1f' | sprintf:itemValue("TempColin_Temperature")}} °C</span></div>
  <div class="col-xs-3 text-left"><span style="color:rgb(255, 165, 0); font-size: 1vw">{{'%.1f' | sprintf:itemValue("TempColin_Humidity")}} %</span>
  </div>
</div>

The problem is that there is too much space between the rows which leads to text exceeding the lower border of the widget. With the help of google I tried several things like line-height, height, margin, … Some of them make the appearance even worse but some did exactly what I want - but only at my PC, the space at the tablets is still too big.

Is it just a matter of the code (but why did e.g. line-height work at the PC but nothing works at the tablet) or is there any other issue since after all my trials I am wondering why the appearance was so completely different between the tablets even though they are all 10" android tablets and everything was (and still is) fine with one panel config at Kiwi browser…

Your help is realy appreciated!

KK2020 · February 1, 2021, 12:43am

I am having the same error. did you find any solution to this?

hipohop · February 28, 2021, 11:53am

Regarding the Glyphicons I have trouble using them in my widget. Glyphicons like
<i class="glyphicon glyphicon-chevron-left"></i>
work, whereas
<i class="glyphicon glyphicon-check-square"></i>
does not show anything.

Any idea what I’m missing?

narf27 · June 10, 2021, 3:06pm

Hello!
i’ve tried to create a “popup slider” template where i can adjust different irrigation runtimes.
i works but i have “serious” problems with layers… this is what my panel looks like when no slider is active (red = popup slider “boxes”):

and this is what i looks like when “Zone 1” slider is active:

all popup-slider-boxes widget except the active widget are “over” the active popup slider… and some of “normal” buttons (Hecke 2 Automatik, Garte Auto). This is a) not very good to look at and b) not working when the active slider is “behind” another popup-slider-box.

if it’s like this f.e. i’m not able to work with the slider:

this is my code:

<style>
.btn-modal {
    font-weight: 400;
    cursor: pointer;
    background-image: none;
    border: 0px solid transparent;
    white-space: normal;
    font-size: 14px;
    line-height: 1.42857;
    user-select: none;
}
  
.slider-presets-wrap-adjust {
  	margin: -10px -10px 0px -10px;
  }
  
.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: #424242;
  text-align: center;
}

.custom-modal-content .custom-modal {
  width: 100%;
  max-width: 600px;
}

.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: 100%;
  max-width: 600px;
  padding-top: 0em;
  padding-bottom: 0em; // here?
  margin: 0;
}
  
</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" style="width:90%">
    <div ng-class="(ngModel.dontwrap) ? '' : 'slider-presets-wrap-adjust'" ng-init="sliderModel = { item: config.item, floor: config.floor, ceil: config.ceil, step: config.step, unit: config.unit }">
    <widget-slider ng-model="sliderModel"></widget-slider>
    </div>
  </div>
</section>
<section class="custom-modal-content" style="margin-top: -10px;">
  <button class="btn-modal" style="width: 100%; height: 100%; background: inherit; padding: 0; outline: none;" ng-click="show_modal=true">
		<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 100%; height: 100%; margin: auto auto auto -10px;"></div>
    <div class="switch-content">
         <div class="value" ng-class="{backdrop: backdrop, center: center, white-space: wrap}">
         <div><span style="color: white">{{ngModel.name}}: {{itemValue(config.item)}} mins</span></div>
     		</div>
    </div>
</button>
</section>

this has probably something to to with z-index (?) but it’s well above my head…
i would be so happy if somebody could help me out

best regards,
Peter

Patrickoli · July 15, 2023, 2:34pm

Hi,
can anybody show me the issue in this code?

<div class="button" ng-if="itemValue(config.dp) != 'false'" ng-click="sendCmd(config.item, 'false')">
	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'clock-on'" backdrop="true" center="true"/>
  <widget-icon iconset="'eclipse-smarthome-classic'" icon="'shield-1'" backdrop="false" center="true"/>
  <div ng-if="itemValue(config.dp) != 'false'">
    <p>Eingeschaltet</p>
  </div>
</div>

<div class="button" ng-if="itemValue(config.dp) == 'false'" ng-click="sendCmd(config.item, 'true')">
	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'clock'" backdrop="true" center="true"/>
	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'shield-0'" backdrop="false" center="true"/>
  <div ng-if="itemValue(config.dp) != 'false'">
    <p>Ausgeschaltet</p>
  </div>
</div>

<div class="button" ng-if="itemValue(config.dp) == 'N/A'">
	<widget-icon iconset="'eclipse-smarthome-classic'" icon="'clock'" backdrop="true" center="true"/>
  <widget-icon iconset="'eclipse-smarthome-classic'" icon="'shield'" backdrop="false" center="true"/>
  <div ng-if="itemValue(config.dp) != 'false'">
    <p>Datenpunkt auswählen!</p>
   </div>
</div>

I want to have a variable background- and front icon dependent from state.

Thank you in advance.