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

【问题标题】：How to set the value of dimmer element Tizen Wearable Web如何设置调光元素 Tizen Wearable Web 的值
【发布时间】：2021-02-04 06:57:10
【问题描述】：

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

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 获得另一个值时，我调用这个函数。它以百分比显示正确的值，背景的亮度是正确的，但滑块显示其默认值，所以我希望它正常工作。当我离开此页面并再次返回时，它会显示默认值，但我想显示我设置的最后一个值。

【问题讨论】：

标签： javascript html tizen tizen-web-app tizen-wearable-sdk

【解决方案1】：

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

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

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

【讨论】：