search

chirimen-oh / chirimen.org

Tutorials for CHIRIMEN
https://tutorial.chirimen.org/
Mozilla Public License 2.0
3 stars 7 forks source link

1章のソースをasync await ただしallow無しで統一する #2

Closed satakagi closed 6 years ago

satakagi commented 6 years ago

第一パート html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Section1</title>
</head>
<style>
#ledview{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}
</style>
<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script src="s1_1.js"></script>
<body>
    <button id="onoff">LED ON/OFF</button>
    <div id="ledview"></div>
</body>
</html>

js

var onoff, ledview; // GUIの要素

var ledPort,switchPort; // LEDとスイッチの付いているポート

onload = function(){
    onoff = document.getElementById("onoff");
    ledview = document.getElementById("ledview");
    var v = 0;
    onoff.onclick = function(){
         v ^= 1;
        ledview.style.backgroundColor = (v == 1)? "red" : "black";
    };
}
satakagi commented 6 years ago

第二パート html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Section1</title>
</head>
<style>
#ledview{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}
</style>
<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script src="s1_2.js"></script>
<body>
    <button id="onoff">LED ON/OFF</button>
    <div id="ledview"></div>
</body>
</html>

js

onload = function(){
    mainFunction();
}

async function mainFunction(){
    var onoff = document.getElementById("onoff");
    var ledview = document.getElementById("ledview");
    var v = 0;
    var gpioAccess = await navigator.requestGPIOAccess();
    var port = gpioAccess.ports.get(26);
    await port.export("out");
    onoff.onclick = function(){
        v ^= 1;
        port.write(v);
        ledview.style.backgroundColor = (v)? "red" : "black";
    };
}
satakagi commented 6 years ago

第三パート html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Section1</title>
</head>
<style>
#ledview{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}
</style>
<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script src="s1_3.js"></script>
<body>
    <button id="onoff">LED ON/OFF</button>
    <div id="ledview"></div>
</body>
</html>

js

onload = function(){
    mainFunction();
}

var port;

async function mainFunction(){
    var onoff = document.getElementById("onoff");
    var ledview = document.getElementById("ledview");
    var gpioAccess = await navigator.requestGPIOAccess();
    port = gpioAccess.ports.get(26);
    await port.export("out");
    onoff.onmousedown = function(){
        ledOnOff(1);
    };
    onoff.onmouseup = function(){
        ledOnOff(0);
    };
}

function ledOnOff(v){
    if(v === 0){
        port.write(0);
        ledview.style.backgroundColor = "black";
    }else{
        port.write(1);
        ledview.style.backgroundColor = "red";
    }
}
satakagi commented 6 years ago

第四パート html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Section1</title>
</head>
<style>
#ledview{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}
</style>
<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script src="s1_4.js"></script>
<body>
    <button id="onoff">LED ON/OFF</button>
    <div id="ledview"></div>
</body>
</html>

js

onload = function(){
    mainFunction();
}

var ledPort, switchPort ;

async function mainFunction(){
    var onoff = document.getElementById("onoff");
    var ledview = document.getElementById("ledview");
    var gpioAccess = await navigator.requestGPIOAccess();

    ledPort = gpioAccess.ports.get(26); // LEDのPort
    await ledPort.export("out");

    switchPort = gpioAccess.ports.get(5); // タクトスイッチのPort
    await switchPort.export("in");

    onoff.onmousedown = function(){
        ledOnOff(1);
    };
    onoff.onmouseup = function(){
        ledOnOff(0);
    };

    while(1){
        var val = await switchPort.read(); // Port 5の状態を読み込む  
        val ^= 1; // switchはPullupなのでOFFで1。LEDはOFFで0なので反転させる
        ledOnOff(val);
        await sleep(100);
    }

}

function ledOnOff(v){
    if(v === 0){
        ledPort.write(0);
        ledview.style.backgroundColor = "black";
    }else{
        ledPort.write(1);
        ledview.style.backgroundColor = "red";
    }
}

function sleep(ms){
    return new Promise( function(resolve) {
        setTimeout(resolve, ms);
    });
}
satakagi commented 6 years ago

第五パート html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Section1</title>
</head>
<style>
#ledview{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}
</style>
<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script src="s1_5.js"></script>
<body>
    <button id="onoff">LED ON/OFF</button>
    <div id="ledview"></div>
</body>
</html>

js

var onoff, ledview; // GUIの要素

var ledPort,switchPort; // LEDとスイッチの付いているポート

onload = function(){
    onoff = document.getElementById("onoff");
    ledview = document.getElementById("ledview");

    onoff.onmousedown = function(){
        ledOnOff(1);
    };
    onoff.onmouseup = function(){
        ledOnOff(0);
    };

    initGPIO();
}

function ledOnOff(v){
    if(v === 0){
        ledPort.write(0);
        ledview.style.backgroundColor = "black";
    } else {
        ledPort.write(1);
        ledview.style.backgroundColor = "red";
    }
}

async function initGPIO(){
    var gpioAccess = await navigator.requestGPIOAccess();
    ledPort = gpioAccess.ports.get(26); // LEDのPort
    await ledPort.export("out");
    switchPort = gpioAccess.ports.get(5); // タクトスイッチのPort
    await switchPort.export("in");
    switchPort.onchange = function(val){
        // Port 5の状態を読み込む  
        val ^= 1; // switchはPullupなのでOFFで1。LEDはOFFで0なので反転させる
        ledOnOff(val);
    }
}
satakagi commented 6 years ago

書き換えました。動作確認はスタンドアローンで行っています。