如何设置调光元素 Tizen Wearable Web 的值

如何解决如何设置调光元素 Tizen Wearable Web 的值

如何正确设置dimmer元素的值？ 我有这些文件。这是示例中的基本结构。

index.html

    <div class="ui-page" id="dimmer-page">
        <div class="ui-content dimmer-content">
            <div class="ui-dimmer" id="dimmer"></div>
            <input id="slider" type="range" value="50" min="0" max="100">
        </div>
        <script src="js/dimmer.js"></script>
        <script src="js/set_dimmer.js"></script>
    </div>

dimmer.js

/* global tau */
(function () {
    var page = document.getElementById("dimmer-page"),elSlider = document.getElementById("slider"),elDimmer = document.getElementById("dimmer"),dimmer,slider,pageBeforeShowHandler,pageHideHandler;

    pageBeforeShowHandler = function () {
        slider = tau.widget.Slider(elSlider);
        dimmer = tau.widget.Dimmer(elDimmer);
        elSlider.addEventListener("change",onInput,false);
    };

    function onInput(event) {
        var newVal = parseInt(event.target.value),convertedVal;

        dimmer.value(newVal);
    }

    pageHideHandler = function () {
        slider.destroy();
        dimmer.destroy();
    };
    
    page.addEventListener("pagebeforeshow",pageBeforeShowHandler);
    page.addEventListener("pagehide",pageHideHandler);
}());

我有 mqtt 代理向我发送我想在此调光器中显示的值。 我已经添加了这个文件。

set_dimmer.js

function setDimmerValue(value) {
    var dimmerElement,dimmer;
    
    dimmerElement = document.getElementById("dimmer");
    dimmer = tau.widget.Dimmer(dimmerElement);
    dimmer.value(value);
    
}

当我从 mqtt 获得另一个值时，我调用了这个函数。它以百分比为单位显示了正确的值，背景的亮度是正确的，但是滑块显示了它的默认值，所以我希望它正常工作。当我离开此页面并再次返回时，它会显示默认值，但我想显示我设置的最后一个值。

解决方法

以上代码展示了两个小部件 Slider + Dimmer 的连接。 调光器仅将值显示为元素亮度级别。 Slider 绑定了触控。方法 onInput 在滑块更改时更改调光器值。

所以，如果你想正确设置值，你应该设置 Slider 值。

function setValue(value) {
    var sliderElement = document.getElementById("slider"),slider;
    
    slider = tau.widget.Slider(sliderElement); // or tau.engine.getBinding(sliderElement)
    slider.value(value);
    
}