程式雜記: 5月 2015

2015年5月30日星期六

將D3 js porting 到backbone 框架

1.下載source code

https://github.com/wotcity/dotcity-starter-kit安裝套件
npm i -g browserify

npm i -g gulp

npm i -g bower

npm install

npm i d3 --save

bower install
2.到D3 js 選擇適當的模組 http://d3js.org/
3.將範例HTML使用到的 module require 到src/index.js css加到index.html

4.將範例HTML中的script標籤移植到到src/index.js中

5.在執行C:\dotcity-starter-kit-master\gulp build 結果產生在dist/index.js
6.登入wot city 記下device ID
7.修改tests/test.js 將ID填入
8.執行 tests/node test.js push DATA到server
9.打開index.html在URL後面加#XXXXXX =>XXXXX是device ID名稱

2015年5月16日星期六

Node.js +REST API 實作(1)

將井字遊戲中的分數紀錄用rest api來實作

1.首先在routes.js中增加以下幾個設定

// partjs boilerplate

app.get('/timeline*', require('./views/timeline/index').init);

app.get('/post*', require('./views/post/index').init);

app.get('/unsplash*', require('./views/unsplash/index').init);

app.get('/about', require('./views/index').about);

app.get('/sensor', require('./views/index').sensor);

app.get('/dashboard', require('./views/index').dashboard);

app.get('/1/game', require('./views/api/game.js/index').read);

app.post('/1/game', require('./views/api/game.js/index').write);

app.post('/1/game:name', require('./views/api/game.js/index').test);

2.在上述的路徑中增加一個index.js的檔案內容如下

var score = {

you:0,

me:0

};

exports.read = function(req, res){

res.json(score);

};

exports.write = function(req, res){

var action = req.query;

var score = req.body; //===>body?什麼的函式庫來的

res.json(score);

};

exports.test = function(req, res){

var name = req.params.name;

console.log('name : '+ name);

res.json(score);

};

3.在Front end讀取rest api 使用backbone 框架

在game.js中設定model

app.Contact = Backbone.Model.extend({ //1

url: '/1/game',

defaults: {

you:0,

me:0

}

});

在view中加入變數的處裡函數

if(this.result.indexOf(3) !== -1){

var you = this.model.get('you');

this.model.set('you',you+1);

this.model.save();

alert('X 贏 ');

this.render();

}

if(this.result.indexOf(-3) !== -1){

var me = this.model.get('me');

this.model.set('me',me+1);

this.model.save();

alert('O 贏');

this.render();

}

4.接下來增加顯示的部分

render: function() {

this.$el.prepend(this.template( this.model.attributes ));//3

console.log(this.model.attributes)

var self = this;

setInterval(function(){

var item = Math.floor(Math.random()*9);

var me = $("[data-num="+ item +"]");

me.removeClass('fa-circle-o');

me.removeClass('fa-times');

self.n[item]=0;

},1000);

2015年5月10日星期日

IOT實驗

1.Hello world mBed
1.到mbed網站申請帳號
2.加入devivce
3.creat project
2.溫度sensor實驗
1.到Study spec
http://www.seeedstudio.com/wiki/index.php?title=Main_Page#Grove
http://www.seeedstudio.com/wiki/Grove_-_Starter_Kit_Plus
2.作法參考
https://www.mokoversity.com/workshop/mbed-school/02-gpio-introduction
3.加上四段顯示器
1.載入lib
https://developer.mbed.org/users/Seeed/code/DigitDisplay/
2.參考
https://developer.mbed.org/users/yihui/code/Arch_Digit_Display/file/89330707469d/main.cpp
4.上網
1.載入EthernetInterface這個lib,編譯時會發生error再載入mbed_rtos這個lib
2.再載入WebSocketClient這個lib
程式碼如下:
#include "mbed.h"
#include "DigitDisplay.h"
#include "EthernetInterface.h"
#include "Websocket.h"

AnalogIn temp(P0_23);
DigitalOut myled(LED1);
DigitalOut myled1(LED2);
DigitDisplay digdisp(P4_29,P4_28);
EthernetInterface eth;
int main() {

char data[1024];
float temperature;
float resistance;
int B=3975; //B value of the thermistor
int a;
int ret;

eth.init(); //DHCP
eth.connect();

Websocket ws("ws://wot.city/object/554ed61eae74407734000119/send");
ws.connect();

loop:
a=temp.read()*657;
resistance=(float)(1023-a)*10000/a; //get the resistance of the sensor;
temperature=1/(log(resistance/10000)/B+1/298.15)-273.15;//convert to temperature via datasheet
sprintf( data , "{ \"temperature\": %f }", temperature);
ret = ws.send(data);
myled1 = 1;
wait(0.5);
myled1 = 0;
wait(0.5);
goto loop;
}
3.到http://wotcity.com/申請帳號產生一個務間編號將他填到Websocket contruct之中

當裝置連線為live即可利用live App看到溫度數值

5.修改網頁
1.到http://wotcity.com/docs/dotcity-starter-kit下載網頁包
2.解壓縮照上面的步驟安裝函示庫
3.打開網址在網址後面輸入#554ed61eae74407734000119

即可看到溫度計的結果

2015年5月2日星期六

bootstrap第三天實驗

用jQuery寫一個井字遊戲
1.jQuery原始檔

(function(){
var flag = 0;
var n=[0,0,0,0,0,0,0,0,0];
var result=[0,0,0,0,0,0,0,0];
var invalidate = function(item){ //時間到一定會執行
$( '.cell' ).each(function(idx) {
if(idx !== item)
return;
var me = $(this);
me.find('i').removeClass('fa-circle-o');
me.find('i').removeClass('fa-times');
n[idx] = 0;
});
};

setInterval(function(){
var item = Math.floor(Math.random()*9);
invalidate(item);
},1000);

$( '.cell' ).each(function(idx) {
var me = $(this); //一開始會直9次註冊每個 cell 物件的click event call back function
me.on('click',function(){ //只有在click evevt 發生時才會執行
if(me.find('i').hasClass('fa-circle-o') || me.find('i').hasClass('fa-times'))
return;
//if (flag == 9)
// return;
if(flag % 2)
me.find('i').addClass('fa-circle-o');
else
me.find('i').addClass('fa-times');

flag++;

n[idx] = (flag % 2) ? 1:-1;
result[0]=n[0]+n[1]+n[2];
result[1]=n[3]+n[4]+n[5];
result[2]=n[6]+n[7]+n[8];
result[3]=n[0]+n[3]+n[6];
result[4]=n[1]+n[4]+n[7];
result[5]=n[2]+n[5]+n[8];
result[6]=n[0]+n[4]+n[8];
result[7]=n[2]+n[4]+n[6];

if(result.indexOf(3) !== -1)
alert('You win');

if(result.indexOf(-3) !== -1)
alert('I win');
})
});
})();

2.html檔

<!DOCTYPE html>

<head>

<title>Bootstrap test</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

bootstrap第二天實驗

新增一個jade樣板
1.在./routes.js中新增app.get('/landing', require('./views/index').landing);
/landing:是url的名稱,
./views/index是指./views/index.js
.landing:是指/views/index.js 中export檔案的名稱
2.接下來看./views/index.js這個檔案在這個檔案新增
exports.landing = function(req, res){
res.render('landing'); //代表會去找landing.jade這個檔案做render的動作
};
3.再來參考index.jade新增landing.jade
打開index.jade:

extends layouts/default

block fb_meta
meta(property='og:site_name', content='PartJS')
meta(property='og:title', content='Next generation WoT and SPA.')
meta(property='og:url', content='#{currentURL("")}')
meta(property='og:image', content='')
meta(property='article:published_time', content='')

block head
title Next Generation WoT and SPA Framework

block neck

block feet
script(src='/views/build/sandbox.js')
//- script(src='/views/build/index.js')

block body
....

其中extends layouts/default代表index.jade繼承自./views/layouts/default.jade
打開default.jade
doctype html
html
head
block meta
block fb_meta
block head
include css
block neck
body#top
include navbar

div.page
block body

include js
block feet

include footer

可以看出這是整個頁面的樣板其中的, block fb_meta,block head 就是樣板的成員變數
而index.jade繼承default.jade樣板並複寫其成員變數block fb_meta,block head...
當中include是用來導入其他jade file的語法。
4.jade是利用縮排來代表巢狀結構

參考
1.http://rhsieh76.pixnet.net/blog/post/48559282-%E6%B7%BA%E8%AB%87node.js%E6%A8%A1%E7%89%88%E5%BC%95%E6%93%8E%E2%80%93-jade
2.http://jade-lang.com/

2015年5月30日 星期六

將D3 js porting 到backbone 框架

2015年5月16日 星期六

Node.js +REST API 實作(1)

2015年5月10日 星期日

IOT實驗

2015年5月2日 星期六

bootstrap第三天實驗

bootstrap第二天實驗

2015年5月30日星期六

2015年5月16日星期六

2015年5月10日星期日

2015年5月2日星期六