tomo2020のアイコン画像
tomo2020 2021年05月08日作成
製作品 製作品 閲覧数 899
tomo2020 2021年05月08日作成 製作品 製作品 閲覧数 899

「早く寝なさい」と言うのに疲れたあなたへ おやすみタイマー

「早く寝なさい」と言うのに疲れたあなたへ おやすみタイマー

妻がなかなかお風呂に入らない、夜更しをする。そんな悩みを解決したいと思って「おやすみタイマー」というガジェットを作りました。

デモ動画

動作デモ

ここに動画が表示されます

設定画面

ここに動画が表示されます

システム概要

システム概要は以下の図の通りです。

システム概要図

時刻設定はブラウザから設定でき、設定ファイル(JSON)に保存が可能です。
設定された時刻になると音声が流れます。

使用した部品は以下の通りです。

汚いですが、結線した状態の写真です。

結線

ソースコード

ソースコード

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://unpkg.com/obniz@3.x/obniz.js" crossorigin="anonymous" ></script> <title>おやすみタイマー</title> </head> <body> <div id="obniz-debug"></div> <div class="container"> <h1>おやすみタイマー</h1> <h2>設定した時間になると音声が流れます</h2> <form> <p>お風呂時間<input type="time" id="bathTimeText"></p> <p>おやすみ時間<input type="time" id="sleepTimeText"></p> <button type="button" id="saveButton">保存</button> </form> </div> <script> //put your obniz ID var obniz = new Obniz("OBNIZ_ID_HERE"); var sleepSoundFlg = false; var bathSoundFlg = false; var sleepTime; var bathTime; var mp3; var filename = "setting.json"; GetSettingJsonData(); //during obniz connection obniz.onconnect = async function() { $("#saveButton").on("click", async function() { var saveData = { sleepTime:$("#sleepTimeText").val(), bathTime:$("#bathTimeText").val()}; var form = new FormData(); form.append('file', new Blob([JSON.stringify(saveData)]), filename); await fetch('/users/me/repo/'+ filename,{ method: "POST", body: form, credentials: "include" }) .then(result => { sleepTime = $("#sleepTimeText").val(); bathTime = $("#bathTimeText").val(); console.log('Success:', result); alert("設定を保存しました。") }) .catch(error => { console.error('Error:', error); alert("設定の保存に失敗しました。") }); }); mp3 = obniz.wired("Grove_MP3", {gnd:0, vcc:1, mp3_rx:2, mp3_tx:3}); await mp3.initWait(); function MatchTime(){ var nowTime = new Date(); var nowHour = set2fig( nowTime.getHours() ); var nowMin = set2fig( nowTime.getMinutes() ); var nowTimeMsg = nowHour + ":" + nowMin; console.log(`nowTime=${nowTimeMsg}, sleepTime=${sleepTime}, bathTime=${bathTime}`); if(sleepTime == nowTimeMsg){ if(!sleepSoundFlg){ sleepSoundFlg = true; mp3.play(1); obniz.display.print('Sleep Sound On'); } }else{ sleepSoundFlg = false; } if(bathTime == nowTimeMsg){ if(!bathSoundFlg){ bathSoundFlg = true; mp3.play(2); obniz.display.print('Bath Sound On'); } }else{ bathSoundFlg = false; } } setInterval(MatchTime,5000); }; function GetSettingJsonData(){ var data = fetch('/users/me/repo/'+ filename ,{ method: "GET", credentials: "include" }).then(res=>res.json()) .then(function(json) { $("#sleepTimeText").val(json.sleepTime); $("#bathTimeText").val(json.bathTime); console.log(`sleepTime=${json.sleepTime}, bathTime=${json.bathTime}`); sleepTime = json.sleepTime; bathTime = json.bathTime; }); } function set2fig(num) { // 桁数が1桁だったら先頭に0を加えて2桁に調整する var ret; if( num < 10 ) { ret = "0" + num; } else { ret = num; } return ret; } </script> </body> </html>
1
tomo2020のアイコン画像
プログラミングが楽しくなってきた初心者です。
ログインしてコメントを投稿する