【IoT를 실감하자! 】 취득한 온도 센서의 그래프를 스마트 폰으로 보자!
이번에는 monaca를 사용하여 그래프를 만듭니다!
monaca의 이용 등록
이용등록은 아래의 요령으로 실시합시다
monaca에서 앱 만들기
먼저 로그인 후 대시보드를 확인합니다.
개발 시작을 클릭합니다.
그러면 아래와 같은 화면이 나오므로, 「Monaca.io로 개발」을 클릭합니다.
그러면 아래와 같이 템플릿을 선택하는 화면이 나오므로 스크롤하여
니프티 클라우드 모바일 백엔드 템플릿을 선택합니다.
위 화면을 스크롤하여
니프티 클라우드 모바일 백엔드 템플릿을 선택
선택 후, 아래의 팝업이 나오므로
프로젝트 이름을 temper_chart로 프로젝트 만들기를 클릭합니다.
그러면 아래와 같은 개발 환경이 표시됩니다.
monaca로 그래프 그리기
이번에는 Chart.js을 이용한다. Chart.js를 이용한 후, 그래프에 mBaaS로부터 취득한 데이터를 반영시키는 코드가 아래와 같습니다. (monaca의 index.html에 설명)
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="components/loader.js"></script>
<script src="js/ncmb-2.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script>
var data = {
labels: [],
datasets: [
{
label: "Prime and Fibonacci",
fillColor: "rgba(251,180,196,0.2)",
strokeColor: "rgba(254,230,170,1)",
pointColor: "rgba(254,230,170,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
function displayLineChart() {
var ncmb = new NCMB("YOUR_APPLICATIONKEY", "YOUR_CLIENTKEY");
//プレイヤーがTaroのスコアを降順で取得
var Temperature = ncmb.DataStore("Temperature");
Temperature.order("date", true)
.limit(30)
.fetchAll()
.then(function(results){
console.log("Successfully retrieved " + results.length + " scores.");
for (var i = 0; i < results.length; i++) {
var object = results[i];
data.labels[i] = i;
data.datasets[0].data[i] = object.temperature;
}
var ctx = document.getElementById("lineChart").getContext("2d");
var options = { };
var lineChart = new Chart(ctx).Line(data, {
scaleShowVerticalLines: false,
scaleShowHorizontalLines: false,
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 0.1,
scaleStartValue : 25.5,
});
})
.catch(function(err){
console.log(err);
});
}
</script>
</head>
<body onload="displayLineChart();">
<div class="box">
<canvas id="lineChart" height="300" width="480"></canvas>
</div>
</body>
</html>
그리고 위의 코드를 실제 디버깅하고 스마트 폰에 그래프를 표시합시다!
monaca는 디버그 앱 를 출시하고 있기 때문에 그것을 활용합시다!
위의 앱을 사용하여 디버그하면 아래와 같이 그래프가 표시됩니다.
이런 식으로 데이터를 그래프로 쓰면 단번에 본격적인 느낌이 나옵니다!
monaca에서 mBaaS를 이용하는 포인트
첫째, SDK 불러오기
아래의 코드로 하고 있습니다.
index.html
<script src="js/ncmb-2.0.0.min.js"></script>
SDK 초기화
다음은 자신이 만든 서버 환경에 저장하기 위한 준비로서 SDK의 초기화를 실시합니다.
그것이 아래에 있습니다.
index.html
var ncmb = new NCMB("YOUR_APPLICATIONKEY", "YOUR_CLIENTKEY");
데이터스토어에서 데이터 검색
조작할 클래스를 지정합니다.
index.html
var Temperature = ncmb.DataStore("Temperature");
그런 다음 date 열을 내림차순으로 정렬하여 30개 데이터를 검색합니다.
index.html
Temperature.order("date", true)
.limit(30)
.fetchAll()
.then(function(results){
for (var i = 0; i < results.length; i++) {
var object = results[i];
data.labels[i] = i;
data.datasets[0].data[i] = object.temperature;
}
var ctx = document.getElementById("lineChart").getContext("2d");
var lineChart = new Chart(ctx).Line(data, {
scaleShowVerticalLines: false,
scaleShowHorizontalLines: false,
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 0.1,
scaleStartValue : 25.5,
});
})
.catch(function(err){
console.log(err);
});
Temperature.order("date", true)로 내림차순으로 데이터 정렬
.limit(30)으로 데이터를 30개 취득하고 있습니다.
아니 - IoT가 쉽게 할 수있는 시대가되었다 ...
Reference
이 문제에 관하여(【IoT를 실감하자! 】 취득한 온도 센서의 그래프를 스마트 폰으로 보자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/fumishitan/items/cb4153a5fca8af1d49a7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
