2016年7月30日 星期六

Introduction to mbed Device Connector










    


# ARM mbed #IoT # Raspberry Pi 







相關連結:

1)Raspberry Pi 上編譯mbed client http://blog.ittraining.com.tw/2016/06/raspberry-pi-mbed-client.html#links

2) To Deploy mbed IoT cloud
http://blog.ittraining.com.tw/2016/07/to-deploy-mbed-iot-cloud.html

3)ARM mbed cloud server https://connector.mbed.com/ 4)ARM mbed cloud slide http://blog.ittraining.com.tw/2016/08/arm-mbed-client-code.html



艾鍗 ARM mbed GitHub:

ARM mbed Client on Raspberry Pi 3
git clone https://github.com/ntu-joseph/iot_demo.git

ARM mbed Cloud WebAPP
git clone https://github.com/it-robot/mbed-webapp.git



2016年7月26日 星期二

2016年7月24日 星期日

利用CNY70量測心跳



在經過多次專題實驗後, 決定利用CNY70 紅外線感應器製作紅外線感應電路模組,未來可以很快進行到以心律相關的研究主題。然而光製作一個CNY70紅外線反射模組,離取得心跳還有段距離. 我們整理了要畫出一個心律圖的波形, 從底層韌體、心律訊號演算法的處理,到上層HMI 人機界面, 大概要了解以下主題。

  1. CNY70 心律感測器電路設計
  2. 邏輯分析儀之數位訊號分析
  3. ADC取樣處理
  4. CNY70 心律訊號與演算法分析
  5. Python GUI 圖控介面設計


CNY 70  基本方塊

「CNY70」的圖片搜尋結果

「CNY70」的圖片搜尋結果





參考資料: 

  1. CNY70 DataSheet
  2. 連接MCU 使用ADC
  3. 感測電路應用設計


-----------------------------------------------------------------------------------------------


1) CNY70 結合Raspberry Pi +ESP8266 Wi-Fi 應用 


IoT of heart rate watchdog from 義方 陳

2) 穿戴式裝置 (包含CNY70作為心跳量測)



3)  CNY70心跳量測結合藍芽與2.4GRF(CC2500) 應用





2016年7月16日 星期六

登出後程序繼續跑 nohup 指令


如何使Process 成為 daemon ?

nohup 指令 (no hang up,不要掛斷)。當 使用ssh 登入linux後,一旦登出或關掉 ssh 軟體,那個在執行的程式就會結束,原因是它的parent process 被關閉了 (Session-->Bash shell --> your process)


nohup <your command and parameters go here> &
Demo:
nohup 可以讓ssh登出後, 仍保留程式繼續執行中 。但此程式的PPID (parent PID) 會掛在PID=1(即init 程式)


nohup sleep 100



登出後再進去看ps -aux 查看, PID 14128還在, 且可以ps -lx查到其PPID=1




nohup --help


Usage: nohup COMMAND [ARG]...
  or:  nohup OPTION
Run COMMAND, ignoring hangup signals.

      --help     display this help and exit
      --version  output version information and exit

If standard input is a terminal, redirect it from /dev/null.
If standard output is a terminal, append output to 'nohup.out' if possible,'$HOME/nohup.out' otherwise.
If standard error is a terminal, redirect it to standard output.
To save output to FILE, use 'nohup COMMAND > FILE'.

NOTE: your shell may have its own version of nohup, which usually supersedes
the version described here.  Please refer to your shell's documentation
for details about the options it supports.

Report nohup bugs to bug-coreutils@gnu.org
GNU coreutils home page: <http://www.gnu.org/software/coreutils/>
General help using GNU software: <http://www.gnu.org/gethelp/>
For complete documentation, run: info coreutils 'nohup invocation'


2016年7月10日 星期日

Node.js Socket.io 範例 --聊天室


Node.js Socket.io

1) 安裝Node.js

下載 node.js binary code (v 6.3.1) 並複製到/usr/local 下


  • wget https://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.xz
  • tar Jxvf node-v6.3.1-linux-x64.tar.xz
  • cd node-v6.3.1-linux-x64/
  • sudo cp * -r /usr/local/
  • node -v  ==>  會輸出 v6.3.1

2) 安裝 Express

  • npm install -g express-generator

2) 從GitHub程式下載, 用這個範例快速學習Socket.io

git clone https://github.com/guille/chat-example.git
cd chat-example;
sudo npm install --save
# 執行node 程式
node index.js

出現==>  listening on *:3000

開兩個瀏覽器連到 http://xxx.xxx.xxx.xxx:3000


######## index.html ########

  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      var socket = io();
      $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    </script>
  </body>

########  index.js ########

// express 處理route ,url path 作為主要的程式app
// 軟體層次 : io(http(express))


var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){   // http;//xxx.xxx.xxx.xxx: 3000 ,傳回/index.html
  res.sendFile(__dirname + '/index.html');
});

// 再收到'connection' event後會獲得socket, 可以作socket.on('event', handler()) 進行讀socket
// 送出是透過 io.emit(''event', message);

io.on('connection', function(socket){   
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });

    socket.on('disconnect', function(){ //斷線時即browser關閉
           console.log('user disconnected');
    });

});

http.listen(3000, function(){  //listen on port 3000
  console.log('listening on *:3000');
});

IOT


參考資源:

  1. http://socket.io/get-started/chat/
  2. https://nodejs.org

前端網頁技術



前端網頁技術以此HTML、CSS、Javascript為基礎
  1. HTML to define the content of web pages
  2. CSS to specify the layout of web pages
  3. JavaScript to program the behavior of web pages    
          ----JSON to exchange/transfer data{"key1":"value1", "key2":"value2",.... }

HTML vs XHTML :


1) XHTML 屬性值不能省略
HTML的一部份的屬性值沒有屬性值(checked、selected、nowrap、disabled、noresize等屬性),但是XHTML必須要有屬性值,其屬性值和屬性名稱相同。
<input type = "radio" checked = "checked" />
<option value = "F" selected= "selected" >F</option>

2) id屬性取代name屬性
HTML的一部份的元素(a、applet、frame、form、iframe、frame、map、img等元素)可以使用name屬性,但是XHTML1.0不採用name屬性,將由id屬性取代。

JSON 

  • Data is in name/value pairs : data-->"name":value
  • Data is separated by commas: data1, data2, 
  • Curly braces hold objects : {object}--> { data1, data2, ..}
  • Square brackets hold arrays : [{object},{object},...]

This JSON syntax defines an employees object: an array of 3 employee records (objects):

{                                              --> object
"employees":[                                  --> Array
    {"firstName":"John""lastName":"Doe"},    ---> {object}
    {"firstName":"Anna", "lastName":"Smith"},  ---> {object}
    {"firstName":"Peter""lastName":"Jones"}   --->{object}
    ]
}
 --> 

Converting a JSON Text to a JavaScript Object

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';



Example:


<html>
<body>

<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[2].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

output ==>  Peter Smith







前端網頁技術(1): JQuery 入門


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

$( "p" ).on({
    "click": function() { console.log( "clicked!" ); },
    "mouseover": function() { console.log( "hovered!" ); }
});

});

</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Email: <input type="text" name="email">
<br>
<button>Send</button>

</body>
</html>

jQuery Selectors

網頁操作的對象, HTML tag, id, .class, this

$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".
$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".
$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

HTML element也可以合併使用 class name, 如 $("p.test").hide( )

$(":disabled") All disabled input elements
$(":selected") All selected input elements
$(":checked") All checked input elements

jQuery Events

有兩種寫法: 

第一種: 
  $("p").click(function(){  
        $("p").text("hello");
    
   });

第二種:  // 可以方便對同一個object設多個event callback

$( "p" ).on(
{"click": function() {   $("p").text("hello"); },
 "mouseover": function() {   $("p").text("world"); }

});


jQuery click()
Demonstrates the jQuery click() event.
jQuery dblclick()
Demonstrates the jQuery dblclick() event.
jQuery mouseenter()
Demonstrates the jQuery mouseenter() event.
jQuery mouseleave()
Demonstrates the jQuery mouseleave() event.
jQuery mousedown()
Demonstrates the jQuery mousedown() event.
jQuery mouseup()
Demonstrates the jQuery mouseup() event.
jQuery hover()
Demonstrates the jQuery hover() event.
jQuery focus() and blur()
Demonstrates the jQuery focus() and blur() events.


jQuery Traversing

The image below illustrates a family tree. With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM.
jQuery Dimensions



The find() method returns descendant elements of the selected element, all the way down to the last descendant.
The following example returns all <span> elements that are descendants of <div>:

$(document).ready(function(){
    $("div").find("span");
});

The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant. To only traverse a single level down the DOM tree (to return direct children), use the children() method.

children() : Returns all direct children of the selected element
find(): Returns descendant elements of the selected element
filter() :Reduce the set of matched elements to those that match the selector or pass the function's test
each() : Executes a function for each matched element

Filer Example: 

$(document).ready(function(){
    $("p").filter(".intro").css("background-color", "yellow");
     //$("div p").first();
  //$("div p").last();
  //$("p").eq(1);
  //$("p").filter(".intro");
  //$("p").not(".intro");
});


Each Example: 


$(document).ready(function(){
    $("button").click(function(){
        $("li").each(function(){
            alert($(this).text())
        });
    });
});
</script>
</head>
<body>

<button>Alert the value of each list item</button>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Soda</li>
</ul>

另一個寫法, 取得參數

function(index,element)  A function to run for each matched element.
      index - The index position of the selector
     element - The current element (the "this" selector can also be used)

$(document).ready(function(){
    $("button").click(function(){
        $("li").each(function(i,element){
             alert(i+$(element).text())
        });
    });
});


jQuery Prop

http://www.w3schools.com/jquery/html_prop.asp

對html element 自訂一些自有的 property

Add and remove a property named "color":
範例1: 
$("button").click(function(){
    var $x = $("div");
    $x.prop("key""FF0000");
    $x.append("The key property: " + $x.prop("key"));
    $x.removeProp("key");
});

------------------------------------
範例2: 
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").html("attr('checked'): " + $("input").attr('checked123')
        + "<br>prop('checked'): " + $("input").prop('checked'));
    });
});

</script>

<button>Check value of attr() and prop()</button>

<input id="check1" type="checkbox" checked123="checkedQQQ">
<label for="check1">Check me</label>
<p id="p1"></p>

$("input").prop('checked') : 會以實際checkbox有無按下做輸出true/false
$("input").attr('checked123') : 會去抓checked123這個屬性的內容checkedQQQ

The most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property
attr() : 這是對HTMLelement 所定義的標準 attribute
$("button").click(function(){
    $("img").attr("width","500");
});



更多 jQuery Traversing Methods的Method

更多關於Web技術學習資源:

  1. http://www.w3schools.com/
  2. jQuery Examples http://www.w3schools.com/jquery/jquery_examples.asp
  3. http://learn.jquery.com/

什麼是 HTML DOM?


The HTML DOM (Document Object Model) is a standard object model and programming interface for HTML. It defines:
  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements
DOM HTML tree


The HTML DOM is a standard for how to get, change, add, or delete HTML elements

With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

資料來源: http://www.w3schools.com/js/js_htmldom.asp

2016年7月9日 星期六

Handlebars template


當HTTP Request 要存取某一網頁,而此網頁的資訊必須是提供最新的動態資訊,一種方法就是使用網頁的templates, 所謂templates 就是提供一個範本, 和原本要提供的的HTML內容格式一致, 但template中包含了某些內容(變數) 必須要填入真正實際的資訊, 再輸出成HTML檔案

其中一種templates 為Handlebarsindex.hbs: .hbs表示此檔案是一個Handlebars templates,  副檔名為 .hbs , 檔案中會嵌入一些handlebars expression, 格式為 {{ variables  }} , 大括號裡頭到時都會經過編譯, 而成為瀏覽器最後看得懂的內容。瀏覽器能看得懂的內容: HTML、CSS、Javascript。

<div class="entry">
 <h1>{{title}}</h1> 
<div class="body"> 
{{body}} 
</div>
</div>


You can iterate over a list using the built-in each helper. Inside the block, you can use this to reference the element being iterated over.

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>
when used with this context:
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}
will result in:
<ul class="people_list">
  <li>Yehuda Katz</li>
  <li>Alan Johnson</li>
  <li>Charles Jolley</li>
</ul>


You can optionally provide an {{else}} section which will display only when the list is empty.
{{#each paragraphs}}
  <p>{{this}}</p>
{{else}}
  <p class="empty">No content</p>
{{/each}}



資源參考:  http://handlebarsjs.com/