20160629_jeffrey - silenceuncrio/diary GitHub Wiki

Index

1000 - web
1100 - alarm sensor ISD9160 morris 新唐代理商
1530 - acl.htm
1535 - jquery 5600N jquery-1.5.1.min.js
1540 - ready function
1700 - function mac_filter_tr(Idx)
1725 - $("input[type=text]").attr("maxlength", 2);
1730 - $('#apply').click(apply_all);
1740 - ready function

1000

繼續寫 web

1100

關於 alarm sensor - ISD9160
morris 跟新唐的代理商有連絡上
代理商聽完我們的 alarm sensor 應用後很誠實地說

ISD9160 的準確率大概只有五成
大部分都是作在玩具上而已

看來新唐這條現成的 soc solution 路斷了

新唐自己也坦承他們自己內部的 team 搞聲音辨識也只能搞出像 ISD9160 的水準

那我們這幾隻小貓就更不要去碰 DSP 聲音辨識這一塊了

1530

acl.htm 寫得差不多了
試著說故事給自己聽

acl.htm 最基本的架構如下

<html>
<head>
<title>EFM Bridge</title>
</head>
<body>
  <h1>ADVANCED - MAC Filter</h1>
  <h2>MAC Filter Configuration:</h2>
  <ul type="square">
  <li>Configuration:</li>
  <table border=1 id="main">
  <tr>
    <th>ID</td>
    <th>EN</td>
    <th>SMAC</td>
    <th>DMAC</td>
  </tr>
  </table>
  </ul>
  <div id="info"></div>
  <hr>
  <div id="form_button" align=center>
    <a href="/bconfig/BCONFIG.SHT"  target="WorkWin"><img src="./images/cancel.gif" border=0></a>&nbsp;&nbsp;
    <a href="/aconfig/jVlanPrt.sht" target="WorkWin"><img src="./images/reset.gif"  border=0></a>&nbsp;&nbsp;
    <input type="image" src="./images/finish.gif" border=0 id="apply">
  </div>
</body>
</html>

為了讓 javascript 控制, 我們需要讓一些 HTML element 具備 id 屬性

...
<body>
  ...
  <table border=1 id="main">
    ...
  </table>
  ...
  <div id="info"></div>
    ...
    <input type="image" src="./images/finish.gif" border=0 id="apply">
    ...
</body>
</html>

我們利用 jquery 來控制它們

$('#main') - javascript 會動態新增 HTML element 到這個 table 來
$('#info') - 讓使用者知道目前花生蛇魔術
$('#apply') - 使用者會去按的 apply 按鈕

1535

使用 jquery - 我們 5600N 使用的 jquery 有點年紀了 - jquery-1.5.1.min.js

<html>
<head>
<script type="text/javascript" src="./ajax/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
...
$(document).ready(function() {
  ...
});
</script>
</head>
...
</html>

<script type="text/javascript" src="./ajax/jquery-1.5.1.min.js"></script> - 加了這便可以開始使用 jquery

我們為了 acl.html 寫的 javascript 直接內嵌在裡面

<script type="text/javascript">
...
$(document).ready(function() {
  ...
});
</script>

$(document).ready() 是 jquery 的進入點

$(document).ready(function() {
  ...
});

直接傳一個 anonymous function 當作 $(document).ready() 的 augument

.ready( handler )
Description: Specify a function to execute when the DOM is fully loaded.

jquery 提供更簡潔的寫法

$(function() {
  ...
});

1540

來看我們的 ready function 作了啥

$(function() {

  for (var Idx = 1; Idx <= 8; Idx ++) {
    $("#main").append(mac_filter_tr(Idx));
  }

  $("input[type=text]").attr("maxlength", 2);

  $('#apply').click(apply_all);

  ready_entry = 0;
  $('#apply').attr('disabled', true);
  $('#info').text('get configurations from system...');
  get_all();

});

先看

  for (var Idx = 1; Idx <= 8; Idx ++) {
    $("#main").append(mac_filter_tr(Idx));
  }

$('#main') 這個 table 需要新增 element

MAC Filter 這功能在 5600N 上有 8 組可以設定, 每一組又包含 SMAC 和 DMAC 要設定

SMAC - source mac address
DMAC - destination mac address

一個 mac adderss 有六個 field 要設定
直接寫在 html 會長得像

<table>

  <!-- 第 1 組 -->
  <tr>
    ...
    <td>
      <input type="text" maxlength=2 style="..." id="smac...">:<input type="text" maxlength=2 style="..." id="smac...">:
      <input type="text" maxlength=2 style="..." id="smac...">:<input type="text" maxlength=2 style="..." id="smac...">:
      <input type="text" maxlength=2 style="..." id="smac...">:<input type="text" maxlength=2 style="..." id="smac...">
    </td>
    <td>
      <input type="text" maxlength=2 style="..." id="dmac...">:<input type="text" maxlength=2 style="..." id="dmac...">:
      <input type="text" maxlength=2 style="..." id="dmac...">:<input type="text" maxlength=2 style="..." id="dmac...">:
      <input type="text" maxlength=2 style="..." id="dmac...">:<input type="text" maxlength=2 style="..." id="dmac...">
    </td>
  </tr>

  <!-- 第 2 組 -->
  <tr>
    ...
    <td>
      <input type="text" maxlength=2 style="..." id="smac...">:<input type="text" maxlength=2 style="..." id="smac...">:
      <input type="text" maxlength=2 style="..." id="smac...">:<input type="text" maxlength=2 style="..." id="smac...">:
      <input type="text" maxlength=2 style="..." id="smac...">:<input type="text" maxlength=2 style="..." id="smac...">
    </td>
    <td>
      <input type="text" maxlength=2 style="..." id="dmac...">:<input type="text" maxlength=2 style="..." id="dmac...">:
      <input type="text" maxlength=2 style="..." id="dmac...">:<input type="text" maxlength=2 style="..." id="dmac...">:
      <input type="text" maxlength=2 style="..." id="dmac...">:<input type="text" maxlength=2 style="..." id="dmac...">
    </td>
  </tr>

  <!-- 第 3 組 -->
  ...

可以想像 8 組設定會有多少 html code

所以我們才會使用 javascript 在 browser 作這些工作

  for (var Idx = 1; Idx <= 8; Idx ++) {
    $("#main").append(mac_filter_tr(Idx));
  }

有 8 組, 所以 $("#main") 要 append 8 次
每次 append 一個 <tr>...</tr>
由 mac_filter_tr() 負責產生

1700

function mac_filter_tr(Idx) {
  var tr = $tr.clone();

  var smac = $td.clone().attr('id', 'smac_' + Idx);
  for (var i = 0; i < 6; i ++) {
    smac.append($input_text.clone().attr('id', 'smac_' + Idx + '_' + i).focusout(function() {

      if ($(this).val().match(/[0-9A-Fa-f]{2}/g) == null) {
        $(this).css("background-color", 'pink')
      } else {
        $(this).css("background-color", 'white');
      }

    }));
    if (i != 5) {
      smac.append(':');
    }
  }

  var dmac = $td.clone().attr('id', 'dmac_' + Idx);
  for (var i = 0; i < 6; i ++) {
    dmac.append($input_text.clone().attr('id', 'dmac_' + Idx + '_' + i).focusout(function() {

      if ($(this).val().match(/[0-9A-Fa-f]{2}/g) == null) {
        $(this).css("background-color", 'pink')
      } else {
        $(this).css("background-color", 'white');
      }

    }));
    if (i != 5) {
      dmac.append(':');
    }
  }

  tr
  .append($th.clone().append(Idx))
  .append(
    $td.clone()
    .append(
      $('<input>').attr('type', 'checkbox').attr('id', 'checkbox_' + Idx)
      .click(function() {
        var smac_input_selec_all = '#smac_' + this.id.split('_')[1] + ' input';
        var dmac_input_selec_all = '#dmac_' + this.id.split('_')[1] + ' input';
        if (this.checked) {
          $(smac_input_selec_all).attr('disabled', false);
          $(dmac_input_selec_all).attr('disabled', false);
        } else {
          $(smac_input_selec_all).attr('disabled', true);
          $(dmac_input_selec_all).attr('disabled', true);
        }
      })
    )
  )
  .append(smac)
  .append(dmac)

  return tr;
}

mac_filter_tr() 乍看之下有點嚇人

抽象來看像這樣

var $tr = $("<tr></tr>");

function mac_filter_tr(Idx) {
  var tr = $tr.clone();

  tr.append(something)
  .append(something_more)

  return tr;
}

var tr = $tr.clone() - 先複製一份 element $("<tr></tr>") 到變數 tr 去

.append()
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

然後利用 .append() 加入我們需要的 DOM element

然後就把 tr return 給呼叫的人

剩下的細節就可以自己看了

1725

ready function 再來做的事 - $("input[type=text]").attr("maxlength", 2);

$("input[type=text]") 是個 jQuery selector

基本上是從 CSS　抄過來的

這會選中所有的 element, 並具有 type="text" 屬性

所以就是利用 $("input[type=text]") 來選取所有的 mac address 輸入框
再利用 .attr() 將全部的輸入框的 maxlength 屬性設為 2

1730

再來是 - $('#apply').click(apply_all);

利用 $('#apply') 選中 id 為 apply 的 DOM element 之後 - 就是 <input type="image" src="./images/finish.gif" border=0 id="apply"> 啦

.click( handler ) Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

再利用 .click() 註冊一個 callback function apply_all
這樣使用者一按下這個鈕之後便由 apply_all 接手

1740

  ready_entry = 0;
  $('#apply').attr('disabled', true);
  $('#info').text('get configurations from system...');
  get_all();

再來一次說這些事在幹嘛

ready_entry = 0;
- ready_entry 被拿來記錄目前已經從系統拿到幾組設定了
- 跟系統要設定前先設成 0
$('#apply').attr('disabled', true);
- 還沒拿到全部的設定值之前怎麼讓使用者更動呢? 當然不給使用者按 apply 啊
$('#info').text('get configurations from system...');
- 提醒一下使用者目前我們正在幹嘛
get_all();
- 去要全部的設定值... 全部有 8 組
- 每次成功要到設定都會將 ready_entry ++