JAVA,CSSの覚え書き１

Javascript,CSSを使ったページを作成した時の覚え書き

セクション4：node.jsのテスト

        
１．raspberry pi3 B+の基板の青色LEDを点滅させる。
	コンソールから一時的にsuで権限変更して
echo none > /sys/class/leds/led0/trigger
	でトリガーを停止
echo 1 > /sys/class/leds/led0/brightness
echo 0 > /sys/class/leds/led0/brightness
	１で点灯、０で消灯
echo mmc0 > /sys/class/leds/led0/trigger
	で元に戻す

２．１の操作をブラウザから実施するためにnode.jsを使って操作用ページを作製。
	expressとejsを使用する。
	temp.ejs,HEAD部分
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">   
    <title>Express & EJS</title>;
    <style>
        button.button0{
           background-color:<%=bkcol0 %>;
        }

       button.button1{
            background-color:<%=bkcol1 %>;
        }

        button.button2{
             background-color:<%=bkcol2 %>;
        }

        button.button3{
            background-color:<%=bkcol3 %>;
        }
    </style>
</head>
	CSSファイルを外部CSSにするとMIME type checkinng is enabledと
	エラーになる。回避方法はあるようだが、面倒なので取りあえずインラインCSS
	とする。
	ボタンを操作したときの状況でボタンの背景色を変えるためにejsで
	background-colorの値を指定するコード。
	
	temp.ejsのbody部分
<body>
    <form action="/" method="post">
        <button type="submit" class="button0">START</button>
        <input type="hidden" name="btno" value="0">
    </form>
    <form action="/" method="post">
        <button type="submit" class="button1">LED ON</button>
        <input type="hidden" name="btno" value="1">
    </form>
    <form action="/" method="post">
        <button type="submit" class="button2">LED OFF</button>
        <input type="hidden" name="btno" value="2">
    </form>
    <form action="/" method="post">
        <button type="submit" class="button3">END</button>
        <input type="hidden" name="btno" value="3">
    </form>
</body>
</html>
	temp.ejsはカレントディレクトリの中にviewsホルダを作製して
	その中に置く必要があります。（お約束みたいです）

３．node.jsのファイル
	初期設定
var fs=require('fs');
var express=require('express');
var ejs=require("ejs");
var bodyParser=require('body-parser');
var app=express();

var gpio1='/sys/class/leds/led0/trigger';
var gpio2='/sys/class/leds/led0/brightness';

var onflg=false;

app.engine('ejs',ejs.renderFile);
app.use(bodyParser.urlencoded({
    extended : true
}));
	ボタンの表示色を制御するためにonflgを使用します。
	初期画面の表示
app.get('/',function(req,res){
    console.log('---GET Reqquest---');
    res.render('temp.ejs',{"bkcol0":"#D3D3D3",
                           "bkcol1":"#D3D3D3",
                           "bkcol2":"#D3D3D3",
                           "bkcol3":"#D3D3D3"});
});
	コンソール出力はデバッグ用。
	ボタンを押したときの処理、POSTで受取ます。
app.post('/',function(req,res){
    console.log('---POST Request---');
    var bkcol0='D3D3D3';
    var bkcol1='D3D3D3';
    var bkcol2='D3D3D3';
    var bkcol3='D3D3D3';
    if(req.body.btno==0){
        console.log('0番目が押された');
        if(onflg==true){
            return;
        }
        fs.writeFileSync(gpio1,'none');
        onflg=true;
    }
    if(req.body.btno==1){
        if(onflg==false){
            return;
        }
        console.log('1番目が押された');
        fs.writeFileSync(gpio2,1);
        bkcol1="#FFFFFF";
    }
    if(req.body.btno==2){
        if(onflg==false){
            return;
        }
        console.log('2番目が押された');
        fs.writeFileSync(gpio2,0);
        bkcol2="#FFFFFF";
    }
    if(req.body.btno==3){
        console.log('3番目が押された');
        fs.writeFileSync(gpio1,'mmc0');
        onflg=false;
    }
    if(onflg==true){
        bkcol0="#FFFFFF";
        bkcol3="#D3D3D3";
    }else{
        bkcol0="D3D3D3";
        bkcol3="D3D3D3";
    }
    res.render('temp.ejs',{"bkcol0":bkcol0,
                            "bkcol1":bkcol1,
                            "bkcol2":bkcol2,
                            "bkcol3":bkcol3});
});
	console.logはデバッグ用。onflgでボタンの背景色
	を変更。具体的な出力はユーザー権限が無いと出力出来ないのでsuしてから
	実行する必要有り。
	
	ウェブサーバーを作製してポート3131でlistenする
var server=app.listen(3131,function(){
    console.log('server ON');
});
	ブラウザでhttp://localhost:3131で画面が表示される。
	外部から接続するためには別途ルーター等の設定が必要。
JAVA,CSS の覚え書き

Javascript,CSSを使ったページを作成した時の覚え書き

セクション4：node.jsのテスト

目次
