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

Apps & Services HABPanel
, ,
272

Hi All

Can someone provide an example of this in HabPanel?

This is just Basic UI but im looking for the ability to click some text and open another window in HabPanel? Is that possible? Like a webpage.

image
image.png1600×900 46.1 KB

Thanks

273

Screenshot_20181118-225658
Screenshot_20181118-225658.png2048×1536 132 KB

Like such?

274

Yes but if you click the down button where does it take you?

275

I do this using the “Switch panel with item value” feature of HabPanel, found in the HabPanel settings.

Screenshot_20181121-220500_Chrome
Screenshot_20181121-220500_Chrome.jpg1440×2252 386 KB

I just have a string value in openHAB that I push the panel names into using


Buttons
Selection widgets

Or rules

FYI

Watch out, it’s case sensitive :wink:

Or 


You can simply add a button to a panel and choose “navigate” as the action, then use the drop down to select the panel you want.

Screenshot_20181121-220830_Chrome
Screenshot_20181121-220830_Chrome.jpg1440×2209 255 KB

But where’s the fun in that :wink:

276

Hi everybody,
I can not use jquery or jquery.modal.min.js. It doesn’t work.
I can add bootstrap 4.0 but It did anything correctly. It did a bug in habpanel ui


This code doesn’t work :

<div oc-lazy-load="['/static/jquery.min.js','/static/jquery.modal.min.js','/static/jquery.modal.min.css']">
  <!-- Use a directive from TestModule -->
  <test-directive></test-directive>
</div>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
  <p>Thanks for clicking. That felt good.</p>
  <a href="#" rel="modal:close">Close</a>
</div>

<!-- Link to open the modal -->
<p><a href="#ex1" rel="modal:open">Open Modal</a></p>

and the next code doesn’t work too :

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Have you got any help for me ?

277

Can I somehow ignore the server side formatting and get the raw number?

Reason: The Netatmo binding does not format the pressure properly (too many decimals), for example: 1007.2000122070312 hPa

itemValue(name, true) does not help, as it will only ignore a transformation.

278

Hello everyone

I have a slider question for Kodi volume, the normal slider in the Habpanel only sends one value per slide


What I have noticed is that through the web interfaces and the respective Kodi remote control apps, the slider sends the values while sliding


I did a read up on how this is done and found that it is achieved using the json RPC and Websockets


So what I would like to know if it is possible for us to implement this on the Habpanel? I am only familiar with HTML and CSS, scripting I am almost blind


any help will be appreciated thank you
:sweat_smile:

279

i have a question regarding button as my own widget. this question is probably very easy to answer for an html crack.

how can i define that the ng-click should be valid over the whole widget? at the moment the ng-click is only active over the text height.

grafik

<div ng-if="itemValue('StateChristmasLights')=='OFF'">
    <button style="background: #11acdf00; width: 100%; height: 100%"
    ng-click="sendCmd('StateChristmasLights', 'ON')">
    Test
     </button>
    </div>
    
    <div ng-if="itemValue('StateChristmasLights')!='OFF'">
    <button style="background: #0ffa07; width: 100%; height: 100%"
            ng-click="sendCmd('StateChristmasLights', 'OFF')">
    Test
      </button>
</div>
280

Hello, I’m trying to build a widget. However, I fail to integrate a background png file all over. The image shifts the text down.
thank you for your help

281

How to order a list by item value? I tried several things but none of them work.
I’m trying to get a list of the top 5 highest consuming devices.

<div class="row" ng-repeat="item in itemsInGroup('gEnergyCons') | orderBy: itemValue(item.name) : reverse | limitTo: 5">
  <div class="col-xs-8 text-right">{{item.label}}</div>
  <div class="col-xs-4 text-left">
{{itemValue(item.name)}}W
  </div>
</div>
282

hi everyone.
I am new to openhab and i followed the tutorial at the top, i have copied a few code snippets and have got my widget partly running. I have got a styleissue at the moment. as you can see in the picture the word “ping” ist jumping as soon as the itemvalue changes from 2 to 3 diggits. My question is how can i get the ping to stay in the middle?

image
image.png602×587 95.7 KB

image
image.jpg605×546 78.9 KB

283

Not only that. I would set fixed widths for all of your columns, perhaps 33.33% on all, or just use col-xs-4 class. To center, use text-align: center

284

Hi,
I want to make a custom widget, where the icon changes according to state, my second issue is that the word "ping "in the middle keeps jumping left and right, but i have already posted that issue, my third wish is to get the value to change color depending on the higt, e.g. green under 20 red over 20, state on and off works but how do i use a value

style=“padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px” align=“right” ng-style="{ color: itemValue(Ping_Jarvis)>=‘20’ ?‘red’:‘green’ }">{{itemValue(‘Ping_Jarvis’)}}

does not work

285

Hi this is the code for each item

<tr>
    <td colspan=3 style="padding: 0;"><h4 style="color: #aabb00; line-height: .5em;">Jarvis</h4></td>
  </tr>
  <tr>
    <td style="border: 2px solid #76899e; border-radius: 10px;">
      <table style="width: 100%;">
        <tr>
          <td rowspan="4" style="padding: 0px; padding-top: 0px; padding-bottom: 0px"><widget-icon align="left" iconset="'custom-icon'" icon="'jarvis-off'" size="50" state="itemValue('Online_Jarvis')=='ON' ? 'ON' : 'OFF'"></widget-icon></td>
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" text-align="center">Ping:</td> 
          <td style="padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px" align="right" ng-style="{ color: itemValue(Ping_Jarvis)>='20' ?'red':'green' }">{{itemValue('Ping_Jarvis')}}</td>
        </tr>
     </table> 
    </td>
  </tr>

Where do i put the information in?

286

Use code fences pls

287

sry.

288

Use bootstrap grid system instead. HabPanel uses bootstrap. Then just use divs with class="col-xs-4" and create classes instead of inline styles. Your divs need text-align: center as I mentioned

289

Okay, now you got me on the wrong foot. I have absolutly no idea what you are talking about. I only copied the code and did a few changes to fit my preference, where can i read about bootstrap, to get my widget running the way i want it.

290

https://getbootstrap.com/docs/3.3/examples/grid/

Only very few modern websites are still using tables for layout.

291

Hi luckymallari,
i have managed to do the changes and its working pretty well. Now i have 2 new problems.

  1. “Ping” and the value are not centered in hight
  2. The frames around each information is missing, i have tried a few possibilities but they won’t work the way i want.

image

<h4 style="color: #aabb00; line-height: .5em;">Jarvis:</h4>

<div class="row">
  <div class="col-xs-4"><span><widget-icon iconset="'custom-icon'" icon="'jarvis-off'" size="50" state="itemValue('Online_Jarvis')=='ON' ? 'ON' : 'OFF'"></widget-icon></span></div>
  <div class="col-xs-4"><span align="center">Ping:</span></div>
  <div class="col-xs-4"><span align="right" style="color: green">{{itemValue('Ping_Jarvis')}}</span></div>
</div>

<h4 style="color: #aabb00; line-height: .5em;">Kodi:</h4>

<div class="row">
  <div class="col-xs-4"><span><widget-icon iconset="'custom-icon'" icon="'kodi-off'" size="50" state="itemValue('Online_Kodi')=='ON' ? 'ON' : 'OFF'"></widget-icon></span></div>
  <div class="col-xs-4"><span align="center">Ping:</span></div>
  <div class="col-xs-4"><span align="right" style="color: green">{{itemValue('Ping_Kodi')}}</span></div>
</div>