IoT를 사용하여 졸음 앱을 만들어 보았습니다.

19909 단어 BluemixSensorTagIoT
몇 년 전부터 유행해왔던 "수면용 BGM"
다만, 검색이나 재생을 위해서 스마트폰이나 PC를 괴롭히고 있으면 반대로 눈이 즐겁게 온다. . .

그런 고민을 해결하기 위해 IoT 애플리케이션을 만들어 보았습니다.

개요



간단한 음악 플레이어 웹 응용 프로그램을 만듭니다.
음악 재생을 버튼 제어에서 Websocket에서 얻은 데이터를 바탕으로 한 제어로 변경하고 있습니다.
데이터의 취득은, node-red로 거의 코딩하지 않고 실시할 수 있었습니다.

준비하는 것



작성에 다음을 사용했습니다.
・Bluemix(node-red)
・sensortag

각각의 환경 구축이나 사용 방법에 대해서는, 이하를 참고해 주세요.
준비 중

음악 플레이어 앱 만들기



먼저 원본 음악 플레이어를 만듭니다.
다음을 참고로 html, js 파일을 작성하십시오.
샘플 코드는 가능한 한 간단합니다.

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>快眠プレイヤー</title>
        <script type="text/javascript" src="js/control.js"></script>
    </head>
    <body>
        <h1>快眠プレイヤー</h1>
        <div>
            <audio id="myMusic" controls loop>
                <source src="music/sample.mp3">
        </div>
        <form>
            <input type="button" value="再生" onclick="start_music()">
            <input type="button" value="停止" onclick="start_pause()"><br>
            <input type="button" value="音量アップ" onclick="volume_up()">
            <input type="button" value="音量ダウン" onclick="volume_down()">
        </form>
    </body>
</html>

※이번은, 음성 파일에 mp3를 사용합니다. 브라우저에 따라 정상적으로 재생되지 않을 수 있습니다.

control.js
// 再生
function start_music(){
    var audioObj = document.getElementById("myMusic");
    audioObj.play();
}
// 一時停止
function start_pause(){
    var audioObj = document.getElementById("myMusic");
    audioObj.pause();
}
// 音量アップ
function volume_up(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume + 0.1;
}
// 音量ダウン
function volume_down(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume - 0.1;
}

그런 다음 mp3 파일을 준비합니다.

그리고 준비한 파일을 다음과 같이 폴더에 저장합니다.

GoodSleepMusic
├ index.html
├ control.js
　└ music
　　└ Sample.mp3

이것으로 기초가 되는 음악 플레이어는 완성되었습니다.

SensorTag와의 연결



그런 다음 NodeRed에서 SensorTag보다 밝기를 얻고 검색된 데이터를 WebSocket으로 전송하는 흐름을 만듭니다.
다음을 복사하여 흐름을 만듭니다.
[{"id":"7945edfe.269dd4","type":"ibmiot in","z":"86357cf8.9262c","authentication":"boundService","apiKey":"","inputType":"evt","deviceId":"sensortag001","applicationId":"","deviceType":"+","eventType":"+","commandType":"","format":"json","name":"IBM IoT","service":"registered","allDevices":false,"allApplications":"","allDeviceTypes":true,"allEvents":true,"allCommands":"","allFormats":"","qos":0,"x":50,"y":120,"wires":[["1a9df657.84aac2","84b8dc15.667d7"]]},{"id":"25b07664.5f77a2","type":"debug","z":"86357cf8.9262c","name":"","active":false,"console":"false","complete":"false","x":570,"y":120,"wires":[]},{"id":"1a9df657.84aac2","type":"function","z":"86357cf8.9262c","name":"ペイロード","func":"\nreturn {payload:msg.payload.d};","outputs":1,"noerr":0,"x":194.5,"y":174.75,"wires":[["e35eee88.5025a"]]},{"id":"e35eee88.5025a","type":"function","z":"86357cf8.9262c","name":"","func":"return {payload:{\n    a: msg.payload.light}};","outputs":1,"noerr":0,"x":340.5,"y":205.75,"wires":[["25b07664.5f77a2","b3b48eb4.25a2b"]]},{"id":"9e13b636.e551b8","type":"websocket out","z":"86357cf8.9262c","name":"","server":"14d557ff.17ae9","client":"","x":1000,"y":180,"wires":[]},{"id":"b3b48eb4.25a2b","type":"delay","z":"86357cf8.9262c","name":"","pauseType":"delay","timeout":"30","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":620,"y":200,"wires":[["9e13b636.e551b8","bb663078.55ae88"]]},{"id":"bb663078.55ae88","type":"debug","z":"86357cf8.9262c","name":"","active":false,"console":"false","complete":"false","x":850,"y":140,"wires":[]},{"id":"84b8dc15.667d7","type":"debug","z":"86357cf8.9262c","name":"","active":false,"console":"false","complete":"false","x":250,"y":100,"wires":[]},{"id":"14d557ff.17ae9","type":"websocket-listener","z":"","path":"/wss/sensorData","wholemsg":"false"}]

SensorTag 데이터로 제어로 변경



마지막으로 음악 플레이어 앱 만들기에서 만든 소스를 다시 작성합니다.

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>快眠プレイヤー</title>
        <script type="text/javascript" src="js/control.js"></script>
    </head>
    <body>
        <h1>快眠プレイヤー</h1>
        <div>
            <audio id="myMusic" controls loop>
                <source src="music/sample.mp3">
        </div>
        <form>
            <input type="button" value="スタンバイ" onclick="standby_music()">
            <!--<input type="button" value="再生" onclick="start_music()">-->
            <input type="button" value="停止" onclick="start_pause()"><br>
            <input type="button" value="音量アップ" onclick="volume_up()">
            <input type="button" value="音量ダウン" onclick="volume_down()">
        </form>
    </body>
</html>

control.js
/*
// 再生
function start_music(){
    var audioObj = document.getElementById("myMusic");
    audioObj.play();
}
*/

// スタンバイ
var socket;
//以下のxxxxには、アプリケーション名を入れてください
var wsUrl = 'wss://xxxx.mybluemix.net/wss/sensorData';
var playFlag = 0;

function standby_music() {

    socket = new WebSocket(wsUrl);
    socket.onmessage = function (e) {
        //WebSocketのデータを取得
        var sensorData = JSON.parse(e.data);
        //再生中の時の制御を行う
        v.addEventListener("play", function () {playFlag = 1;},
            function () { playFlag = 0; });

        if (playFlag == 0) {
            //明るさが１０Lux以下の時音楽再生
            if (sensorData.a <= 10) {
                var audioObj = document.getElementById("myMusic");
                audioObj.play();
            }
        }
    }
}

// 一時停止
function start_pause(){
    var audioObj = document.getElementById("myMusic");
    audioObj.pause();
}
// 音量アップ
function volume_up(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume + 0.1;
}
// 音量ダウン
function volume_down(){
    var audioObj = document.getElementById("myMusic");
    audioObj.volume = audioObj.volume - 0.1;
}

대기 버튼을 누르고 sensortag가 밝기를 10Lux 이하로 감지하면 음악이 재생됩니다.

Bluemix에 배포



로컬 환경의 상태에서도 사용 가능합니다만, 모처럼이므로 Bluemix에 배포해 보겠습니다.
이번에는 Git에서 배포합니다.
여기에서는 버전 관리에 대해서는 생략합니다.
이하는 개인용의 환경이므로 모두 master 브랜치로 행하고 있습니다.

우선, 배포를 하고 싶은 어플리케이션의 페이지에 액세스 해, 화면 옆의 탭으로부터 「Overview」를 선택.


화면 하단의 Continuous delivery에서 View toolchain을 클릭합니다.


Toolchain 설정 화면이 나오므로 "Git"을 클릭합니다.


응용 프로그램의 디렉토리가 표시됩니다.
'음악 플레이어 앱 만들기'에서 만든 GoodSleepMusic 아래의 파일, 폴더를 'public' 아래에 복사합니다. (GoodSleepMusic 필요 없음)


완성!



마지막으로 응용 프로그램에 반영을 기다리고 다시 시작합니다.
그런 다음 재부팅이 완료되면 다음 URL에 액세스하면됩니다. (XXXX는 애플리케이션 이름)
htps : // 홉 x. myb 에미 x. 네 t/무시 c. HTML

이제 스마트폰에서 버튼을 눌러 방을 어둡게 하면 됩니다.
반드시 “수면용 BGM”의 효과를 최대한 받을 수 있을 것입니다.

※효과에는 개인차가 있습니다. 개인의 감상이며, 효과·효능을 나타내는 것은 아닙니다.
IBM Cloud (이전 Bluemix) 신용 계정으로 업그레이드 절차
핸즈온 리포트 @ 2017/12/3 IBM BMXUG 겨울 공부회

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage