Skip to content
knowthelist edited this page Feb 2, 2016 · 3 revisions

Popup Dialog

usage of a link widget as big close button

<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
  <header>EXAMPLE2</header>
  <!-- place your widget here -->
  <div data-type="popup" data-height="400px" data-width="200px">
  <div data-type="link" class="large thin">Show Temperatur</div>
    <div class="dialog">
    <header>DIALOG</header>
    <div class="top-space">
          <div class="newline">
            <div data-type="label" data-device="THSensorWZ" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="bigger thin"></div>
            <div data-type="label" class="cell">Temperatur</div>
          </div>
          <div class="newline">
            <div data-type="label" data-device="THSensorWZ" data-fix="0" data-part="4" data-limits='[0,40,60]' data-colors='["#bb6242","#aa6900","#bb6242"]' data-unit="%" class="bigger thin"></div>
            <div data-type="label" class="cell">Luftfeuchte</div>
          </div>
          <div data-type="link" class="round top-space-3x left-space-2x"
               data-width="130" data-height="50"
               data-color="white"
               data-background-color="green"
               data-icon="fa-check"
               onclick="$('.dialog-close').trigger('click');">OK</div>
    </div>
    </div>
  </div>
</li>

Warn popup. Opens automatically, if a value is greater then 0

<li data-row="5" data-col="1" data-sizex="3" data-sizey="3">
  <header>WARN-POPUP</header>
  <!-- place your widget here -->
  <div data-type="popup" data-device="myWarnDevice" data-get="countWarnings" data-get-on="[1-9]\d*"
       data-height="240px" data-width="240px">
    <div class="dialog">
        <header>WARNUNG</header>
        <div data-type="label" data-device='myWarnDevice' data-get="warnText1" class="top-space-3x red big"></div>
        <div data-type="link" class="round top-space-3x left-space-3x"
             data-width="130" data-height="50"
             data-color="white"
             data-background-color="red"
             data-icon="fa-check"
             onclick="$('.dialog-close').trigger('click');">OK</div>
    </div>
  </div>
</li> 
Clone this wiki locally