BeagleBone Express

Welcome to BeagleBone Express

LED is OFF

LED を操作する手段は前回に用意できているから、HTML とクライアント用 JavaScript を書くだけになる。express では HTML 部分を view ディレクトリ以下の jade テンプレートによって記述する。この例では共通部分を layout.jade で、ページの詳細を index.jade に書いている。

[index.jade]
h1= title
p Welcome to #{title}
div
  form(name="FORM1")
    | LED Blink
    input(type="checkbox", name="CHECK1", onClick="checks()")
    span(id="BLINK_SW") OFF
p
  | LED is
  span(id="LED_STATE") OFF

layout.jade では JavaScript を指定。

[layout.jade]
!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='javascripts/ajax.js')
    script(type='text/javascript', src='javascripts/ajax-dynamic-content.js')
    script(type='text/javascript', src='javascripts/myscript.js')
  body!= bodyroot

JavaScript ファイルは public/javascripts ディレクトリに置く。check() でインターバルタイマを動作させて LED をオンオフする。ajax*.js は適当に拾ってきた。

[myscript.js]
var sw = 0;

function toggle() {
  if (sw == 0) {
    ajax_loadContent('LED_STATE', '/led/ON');
    sw = 1;
  } else {
    ajax_loadContent('LED_STATE', '/led/OFF');
    sw = 0;
  }
}

function setTimer() {
  timerID = setInterval("toggle()", 1000);
}

function clearTimer() {
  clearInterval(timerID);
}

function checks() {
  var elem = document.FORM1.CHECK1;
  var sw = document.getElementById("BLINK_SW");
  if (elem.checked) {
    sw.innerHTML = "ON";
    setTimer();
  } else {
    sw.innerHTML = "OFF";
    clearTimer();
  }
}

これでひとまず動くようになったが、このままだと ajax のキャッシュがデフォルトで有効になっているために、チェックを一旦外して再チェックするとブラウザでの表示は変わるのに LED が連動しなくなる。これを回避するには ajax-dynamic-content.js 内で enableCache = false; とする。また、表示が切り替わる際の 'Loading content - please wait' が煩いようなら、これも外しておく。