WF8266R-ed7e64c2.html 注意:線上實作平台僅供練習, 程式請自行下載留存, 不定期會清空

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>WF8266R.js Rotary Encoder</title>

    <!-- Imports WF8266R -->
    <script src="http://wf8266.com/wf8266r/webcomponent/jquery-2.1.4.min.js"></script>
    <script src="http://wf8266.com/wf8266r/webcomponent/wf8266r/wf8266r.js"></script>
    <link href="http://wf8266.com/wf8266r/webcomponent/wf8266r/wf8266r.css" rel="stylesheet" />

    <script>
        $(function () {
            //載入 WF8266R 元件
            GPIO.init();

            document.addEventListener('wf8266r-ready', function (e) {
                setInterval(function(){
                    GPIO.encoder(12, 13, function(encoder){
                        $("#countA").text(encoder.countA);
                        $("#countB").text(encoder.countB);
                        $("#cm").text(encoder.cm);
                        var yd = encoder.cm / 91.44; //碼
                        var ft = encoder.cm / 30.48; //呎
                        $("#yd").text(Math.round(yd * 100) / 100);
                        $("#ft").text(Math.round(ft * 100) / 100);
                    });
                },1000); 
            }, false);
        });

        function reset(){
            GPIO.encoderReset();
        }
    </script>

</head>
<body>
    <unu-wf8266r ip="mywfXXXX.local" websocket uuid="xxxx" device="xxxx"></unu-wf8266r>
    順轉 : <span id="countA"></span><br /><br />
    反轉 : <span id="countB"></span><br /><br />
    長度 : <span id="cm"></span> cm | <span id="yd"></span> yd | <span id="ft"></span> ft |<br/><br /><br />
    <wf8266r-button class="button" onclick="reset()">歸零</wf8266r-button>
</body>
</html>

請按 RUN 執行