sakumaELC

手順

1.室温測定スイッチの追加

2.連続で室温測定

3.室温をファイルに記録とブラウザに表示

4.ファイルのダウンロード機能追加

1.室温測定スイッチの追加

temp.htmlの編集

前回のコードに追記します


<!DOCTYPE html>
<html>
<head>    
    <title>temp</title>
    <link rel="stylesheet" href="style.css"> 
</head>
    <body>
        <nav>
            <h1>temp</h1>
        </nav>  
        <div>
            <p>
            <textarea><%= value %></textarea>
            <%# valueで温度テータを受け取る %>
            </p>        
        </div>
        <%# ----測定スイッチ追加--- %>
        <div>
            <a href="/shot">測定</a>
        </div>
        <%# ----測定スイッチ追加--- %>
    </body>
</html>

app.jsの編集

pi@raspberrypi:~/temp_rec $ sudo vim app.js

'/'を'/shot'に書き換え:測定のリクエストをここ「app.get('/shot')」で受け取る

app.get('/',)を書き直し


const fs = require('fs'); //ファイルを読み込むfsの準備
const express = require('express'); //サーバーを立てるexpressの準備
const app = express(); //expressの装備
const ejs = require('ejs'); //ejsブラウザ表示用ファイルの準備

app.use(express.static('public')); //静的ファイル（画像や表示画面設定するファイル）のファルダ指定
app.use(express.urlencoded({extended: false}));
app.engine('ejs',ejs.renderFile); //ejsを指定
// app.get('/',)を書き直し
app.get('/', (req, res)=> {
    res.render('temp.ejs', {value:""});
});
// '/'を'/shot'に書き換え:測定のリクエストをここ「app.get('/shot')」で受け取る'
app.get('/shot', (req, res) => {
    let data_th = [];
    let temp = () => {
        let buff = fs.readFileSync('/sys/bus/w1/devices/28-3c01b556b5e5/w1_slave');
        let data_sp = buff.toString().split("=");
        data_th.push(data_sp.pop());
        let data_dig = (data_th.map(Number))/100;
        data_th = [];
        let data_rou = (Math.round(data_dig))/10;
        return data_rou;
    }
    res.render('temp.ejs',{value:temp()}); // ブラウザに表示する画面用ファイルの指定と、value:を使って温度データを画面と一緒にしてrenderで画面をブラウザに送る
});
app.listen(3000); // 3000番ポートでサーバーを立てる

表示の確認

$ node app.js

トップページではテキストボックス内に何も表示されませんが(res.render('temp.ejs', {value:""});) 参照エラーにならないようにvalue:無しを送ります。

'測定'をクリックすると室温が表示されます。

2.連続で室温測定

setIntervalを使って連続で測定します。

app.jsの編集

温度測定の関数tempをapp.get()の外へ出す。

app.get('shot',)はtempを1回呼び出しへ書き換え。

app.get('rec',)を追加。

temp()の最終行にconsole.log()を追加、returnを削除


    const fs = require('fs');
    const express = require('express');
    const app = express();
    const ejs = require('ejs');
    
    app.use(express.static('public'));
    app.use(express.urlencoded({extended: false}));
    app.engine('ejs',ejs.renderFile);
    let data_th = [];
    let intervalId = ""; //追加 setIntervalの停止操作用ID
    let tm = 3000; //追加 連続測定の間隔時間設定 (ミリ秒)
    // 追加　tempを関数の外へ出す
    let temp = () => {
        let buff = fs.readFileSync('/sys/bus/w1/devices/28-3c01b556b5e5/w1_slave');
        let data_sp = buff.toString().split("=");
        data_th.push(data_sp.pop());
        let data_dig = (data_th.map(Number))/100;
        data_th = [];
        let data_rou = (Math.round(data_dig))/10;
        console.log(data_rou); //追加
    }
    app.get('/', (req, res)=> {
        res.render('temp.ejs', {value:""});
    });
    app.get('/shot', (req, res) => {
        res.render('temp.ejs',{value:temp()});
    });
    // 追加 以下を追加
    app.get('/rec', (req, res) => {
        intervalId = setInterval(temp, tm);
    });
    app.listen(3000);

$ node app.js

3秒ごとにターミナルに測定表示されます。

プログラムの終了。「ctrl」+「C」


pi@raspberrypi:~/temp_rec $ node app.js
18.3
18.4
18.4
18.4
18.5
18.4
18.4
^C

3.室温をファイルに記録とブラウザに表示

app.jsの編集



const fs = require('fs');
const express = require('express');
const app = express();
const ejs = require('ejs');

app.use(express.static('public'));
app.use(express.urlencoded({extended: false}));
app.engine('ejs',ejs.renderFile);
let data_th = [];
let data_rec = []; //追加　連続記録格納用
let intervalId = ""; 
let tm = 3000;
let today = new Date(); //追加　記録時間表示用
let count = 0; //追加　測定された回数
let num_rec = 10; //追加　記録する数の設定
let temp = () => {
    count++;
    let buff = fs.readFileSync('/sys/bus/w1/devices/28-3c01b556b5e5/w1_slave');
    let data_sp = buff.toString().split("=");
    data_th.push(data_sp.pop());
    let data_dig = (data_th.map(Number))/100;
    data_th = [];
    let data_rou = (Math.round(data_dig))/10;
    if(count===num_rec){ //2880){
        fs.writeFile("./temp.csv",data_rec.toString(), (err)=>{
            if(err){
            throw err
        }else{
            console.log("temp.csvが作成されました。");
        }    
        });
        data_rec = [];
        count=0;  
    }
    data_rec.push("\n"+data_rou+","+today.getDate()+"日"+today.getHours()+"時"+today.getMinutes()+"分") //追加 室温と日付を入れる 
    console.log(data_rou);
    return data_rou; // 追加
}
app.get('/', (req, res)=> {
    res.render('temp.ejs', {value:""});
});
app.get('/shot', (req, res) => {
    res.render('temp.ejs',{value:temp()});
});

app.get('/rec', (req, res) => {
    intervalId = setInterval(temp, tm);
    res.render('temp.ejs',{value:"記録開始"+today}); //追加ブラウザの表示
});
//追加
app.get('/showData',(req,res)=>{
    res.render('temp.ejs', {value:data_rec});
});
app.get('/reset',(req,res)=>{
    clearInterval(intervalId);
    data_rec = [];
    res.render('temp.ejs', {value:""});
});
app.listen(3000);

if(count===num_rec){

測定した数countが指定した数num_recになったらファイルへ書き込む

fs.writeFile("./temp.csv",data_rec.toString(),

./このディレクトリ(temp_rec)内にtemp.csvというファイルを作成し、data_recを書き込む。

toStoring()文字列型に変換して渡す。

２回目の書き込みもファイル名が同じなので上書きになります。

temp.ejsの編集

表示とリセットスイッチの追加


<!DOCTYPE html>
<html>
<head>    
    <title>temp</title>
    <link rel="stylesheet" href="style.css"> 
</head>
    <body>
        <nav>
            <h1>temp</h1>
        </nav>  
        <div>
            <p>
            <textarea><%= value %></textarea>
            <%# valueで温度テータを受け取る %>
            </p>        
        </div>
        <div>
            <a href="/shot">測定</a>
        <%# ----スイッチ追加--- %>
        <a href="/showData">表示</a>
        <a href="/reset">リセット</a>
        <%# ----スイッチ追加--- %>
        </div>
    </body>
</html>

表示の確認

pi@raspberrypi:~/temp_rec $ node app.js

ブラウザでurl「ラズパイのIPアドレス:3000」を表示

「記録」をクリック

測定が開始され設定した秒数ごとに値がターミナルに表示されます。

「表示」をクリックするとテキストボックスに測定値が表示されます。

「リセット」をクリックするとsetIntervalが停止して値を格納している変数内のクリアとテキストボックスとクリアになります。


pi@raspberrypi:~/temp_rec $ node app.js
21.4
21.6
21.6
21.6
21.6
21.6
21.6
21.6
21.6
21.6
temp.csvが作成されました。

4.ファイルダウンロード機能の追加

temp.ejsの編集

javascriptのコードを追加してファイルのダウンロード機能を装備します。


<!DOCTYPE html>
<html>
<head>    
    <title>temp</title>
    <link rel="stylesheet" href="style.css"> 
</head>
    <body>
        <nav>
            <h1>temp</h1>
        </nav>  
        <div>
            <p>
        <%# ----id追加--- %>
            <textarea id="showOut"><%= value %></textarea>
            <%# valueで温度テータを受け取る %>
            </p>        
        </div>
        <div>
            <a href="/shot">測定</a>
        
        <a href="/showData">表示</a>
        <a href="/reset">リセット</a>
        </div>
        <%# ----ファイルをダウンロードするスクリプト追加--- %>
        <script>
        let data=document.querySelector('#showOut').value;
        let fileIn;
        let fileLine;
        let thValue;
        document.querySelector('#download').addEventListener('click',() => {
            let blob=new Blob([data],{type:"text/plan"}); //ダウンロードするデータを作成
            let link=document.createElement('a'); //リンクを作成
            link.href=URL.createObjectURL(blob); //URLを作成
            link.download="temp_rec.csv"; //ファイル名
            link.innerText="ダウンロードする"; //リンクの表示テキスト
            document.body.appendChild(link); //リンクをbodyに追加
        });
        </script>
    </body>
</html>

app.jsの編集

保存したファイルの読み込みとテンプレートにファウルの内容を表示する機能の追加


const fs = require('fs');
const express = require('express');
const app = express();
const ejs = require('ejs');

app.use(express.static('public'));
app.use(express.urlencoded({extended: false}));
app.engine('ejs',ejs.renderFile);
let data_th = [];
let data_rec = []; 
let intervalId = ""; 
let tm = 3000;
let today = new Date();
let count = 0; 
let num_rec = 10;
let temp = () => {
    count++;
    let buff = fs.readFileSync('/sys/bus/w1/devices/28-3c01b556b5e5/w1_slave');
    let data_sp = buff.toString().split("=");
    data_th.push(data_sp.pop());
    let data_dig = (data_th.map(Number))/100;
    data_th = [];
    let data_rou = (Math.round(data_dig))/10;
    if(count===num_rec){
        fs.writeFile("./temp.csv",data_rec.toString(), (err)=>{
            if(err){
            throw err
        }else{
            console.log("temp.csvが作成されました。");
        }    
        });
        data_rec = [];
        count=0;  
    }
    data_rec.push("\n"+data_rou+","+today.getDate()+"日"+today.getHours()+"時"+today.getMinutes()+"分")
    console.log(data_rou);
    return data_rou; // 追加
}
app.get('/', (req, res)=> {
    res.render('temp.ejs', {value:""});
});
app.get('/shot', (req, res) => {
    res.render('temp.ejs',{value:temp()});
});

app.get('/rec', (req, res) => {
    intervalId = setInterval(temp, tm);
    res.render('temp.ejs',{value:"記録開始"+today});
});
app.get('/showData',(req,res)=>{
    res.render('temp.ejs', {value:data_rec});
});
// 追加
app.get('/showFile',(req,res)=>{
    let data_file = fs.readFileSync('./temp.csv');
    res.render('temp.ejs', {value:data_file});
});
app.get('/reset',(req,res)=>{
    clearInterval(intervalId);
    data_rec = [];
    res.render('temp.ejs', {value:""});
});
app.listen(3000);

表示と操作の確認

pi@raspberrypi:~/temp_rec $ node app.js

「ファイルの表示」をクリックすると保存しておいたtemp.csvの内容がテキストボックスに表示されます。

「download」ボタンをクリックして表示された「ダウンロードする」をクリックするとtemp.csvの内容をコピーしたtemp_rec.csvがダウンロードされます。

ラズベリーパイと同じローカルネットワークのPCからブラウザの操作でラズパイの温度センサで測定記録したファイルをダウンロードすることができました。

最後まで閲覧頂きありがとうございました。

ラズベリーブログ

Pages