iframe-proxy | Sunbelt Computer Software

177 lines (155 loc) · 4.64 KB
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>LED</title>
  <script src="../../webcomponentsjs/webcomponents.js"></script>
  <link rel='import' href='../web-arduino.html'></link>
  <link rel='import' href='../wa-led.html'></link>
    font-size: 20px;
  input, button {
    width: 100px;
    margin: 5px 0;
  #msg.default::after {
    content: "訊息";
  #msg.waiting::after {
    content: "Loading...";
  #msg.ready::after {
    content: "Ready!";
  #msg.setting::after {
    content: "設定中...";
  #msg.set::after {
    content: "設定完成";
    padding: 5px;
    font-size: 16px;
    width: 85px;
    color: #00AEFF;
  .container {
    background-color: #f7f7f7;
    padding: 0 10px 20px 10px;
    border: 1px dotted #CCC;
    width: 270px;
    margin-top: 20px;
  <web-arduino id='board'>
    <wa-led id='led' pin='10'></wa-led>
  </web-arduino>
  <div id="msg" class="waiting"></div>
    <label>device : </label>
    <input type="text" id="device">
    <button class="setting" id="set">設定</button>
  <div class="container">
    <p>Use the buttons below to switch the LED to on or off.</p>
    <button id='on' class="btns" type="button">ON</button>
    <button id='off' class="btns" type="button">OFF</button>
    <button id='toggle' class="btns" type="button">TOGGLE</button>
  <div class="container">
    <p>Set blink interval and click button to start blinking.</p>
    <label>Blink interval(ms): </label><input id="blink-interval" type="number" value="1000">
    <button id="blink" class="btns" type="button">BLINK</button>
  <div class="container">
    <p>Change led state to on/off/blink (1000 as blink interval).</p>
    <label>Current State: </label><input id="ledstate">
    <button id="set-state" class="btns" type="button">SET</button>
  <p>led pin : 10</p>
  <p>控制 LED</p>
  <p id='ledstatus'>none</p>
  window.addEventListener('WebComponentsReady', function() {
    var board = document.getElementById('board'),
      msg = document.getElementById('msg'),
      device = document.getElementById('device'),
      led = document.getElementById('led'),
      setBtn = document.getElementById('set'),
      onBtn = document.getElementById('on'),
      offBtn = document.getElementById('off'),
      toggleBtn = document.getElementById('toggle'),
      ledstatus = document.getElementById('ledstatus'),
      blinkInterval = document.getElementById('blink-interval'),
      blinkBtn = document.getElementById('blink'),
      ledstate = document.getElementById('ledstate'),
      setStateBtn = document.getElementById('set-state');
    device.setAttribute('value', localStorage.device || "");
    msg.className = "ready";
    setBtn.addEventListener('click', function(e) {
      msg.className = "setting";
      board.device = device.value;
      localStorage.device = device.value;
      board.on('ready', ready);
      board.init();
      e.stopPropagation();
      e.preventDefault();
      return false;
    }, false);
    function ready() {
      // 示意 board ready
      msg.className = "set";
      run();
    function run() {
      var statecb = function() {
        ledstate.value = led.state;
        if(led.state === 'blink') {
          ledstatus.innerHTML = (this._pin.value) ? "led blinks!(on)" : "led blinks!(off)";
      statecb();
      onBtn.addEventListener('click', function(e) {
        led.on(statecb);
        ledstatus.innerHTML = "led on!";
        e.stopPropagation();
        e.preventDefault();
        return false;
      }, false);
      offBtn.addEventListener('click', function(e) {
        led.off(statecb);
        ledstatus.innerHTML = "led off!";
        e.stopPropagation();
        e.preventDefault();
        return false;
      }, false);
      toggleBtn.addEventListener('click', function(e) {
        led.toggle(statecb);
        ledstatus.innerHTML = "led toggle!";
        e.stopPropagation();
        e.preventDefault();
        return false;
      }, false);
      blinkBtn.addEventListener('click', function(e) {
        led.blink(blinkInterval.value, statecb);
        ledstatus.innerHTML = "led blinks!";
        e.stopPropagation();
        e.preventDefault();
        return false;
      }, false);
      setStateBtn.addEventListener('click', function(e) {
        led.state = ledstate.value;
        e.stopPropagation();
        e.preventDefault();
        return false;
      }, false);
  </script>
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sunbelt Computer Software

PL/B Language Development and Support

Uh oh!

FilesExpand file tree

led.html

Latest commit

History

led.html

File metadata and controls
