use jquerymobile popup widget in pimatic-mobile-frontend

---

I try to add a jquerymobile basic popup in UI of a device plugin (led-light), but for some reason it does not what it is supposed to do.

My assumption is, since the mobile-frontend is loading and using jquerymobile 1.4.5 I should be able to use every jquerymobile feature in the UI part on a plugin. But in my case the div, which should popup when the button is clicked, is already shown after rendering and clicking the button hasn’t any effect.

When I try it at a new plain page which just loads jquery and jquerymobile, it works fine!

Does somebody know why it is not working in context of an pimatic plugin?

This is the markup I use:

<script id="led-light-template" type="text/template">
  <li data-bind="attr: { id: id }" class="sortable no-header">
    <div class="light-container">
      <div class="light-label-container">
        <label data-bind="text: name, tooltip: $data.labelTooltipHtml" class="device-label"></label>
      </div>

      <!-- begin of popup markup -->
      <div class="light-color-container">
        <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Color</a>
        <div data-role="popup" id="popupBasic">
          <p>Should be a popup white the color slider</p>
          <input min="1" max="99" step="1" class="light-color">
        </div>
      </div>
      <!-- end of popup markup-->

      <div class="light-power-container">
        <select data-bind="attr: { value: power }" class="light-power">
          <option value="off">Off</option>
          <option value="on">On</option>
        </select>
      </div>
    </div>
    <span data-bind="text: ($data.error() ? $data.error() : '') " class="error"></span>
  </li>
</script>

This is how it looks now:

@philip1986 I am sorry I can’t help much onthis one. I really like the idea of the color slide popup.

A few months ago I fiddled a color slider for Milight which animates the Milight color wheel. https://jsfiddle.net/WittigMarcus/p0xw0jks/

@mwittig don’t worry, I am just wondering how to leverage jquerymobile for my purpose. Meanwhile I just use a button which toggles the slider div.

Your color wheel is really interesting. Its a whole different way of implementation than the one I use currently and it seams to have a higher granularity.

@philip1986 said:

t seams to have a higher granularity

Actually, I fiddled this to be able to set the 256 color values supported by Milight. These can be combined with 20 brightness values which altogether is pretty limited when compared to the RGB. The slider has 257 values to be able to set the white mode. There is no “white” on the Milight color wheel (for good reasons, as RGB LEDs are not great at rendering white light, generally).

@mwittig said:

256 color values supported by Milight

ok this limited, but Iwy_Master resp. wifi370 accept all possible RGB colors (256^3) which is a bit does not make sense for an user interface to support this level of granularity. So I thought it should be enough it to 100 at the color slider and 100 at brightness slider, so we would have roughly 1000 different colors to select.

I will wrap up a draft and push it into a git branch asap and you can also play with it to figure out which works best.

@philip1986 said:

So I thought it should be enough it to 100 at the color slider and 100 at brightness slider, so we would have roughly 1000 different colors to select.

Yes, 100 is probably good enough as the color rendition of cheap led strip is that great anyway. I think the HSV color wheel is well suited for what you want to achieve. It gives you 360 color values (H - hue). The brightness maps to (V-lightness). The third channel (S-saturation) can be neglected assuming fully saturated color all the time. This is Ok, because you can neglect the grey tones. See the HSV to RGB color conversion function as part of my fiddle. Feel free to use
it as appropriate. EDIT: You don’t need the transformation of the slider value to the color value I have on the fiddle. I did this because the Milight color wheel is inverted and shifted. On the S-channel I used 80 as the resulting RGB rendered to the slider background matched better the color value of the Milight bulb. It should be OK to use 100 instead.

See also: https://de.wikipedia.org/wiki/HSV-Farbraum