> 原文出處：https://www.phodal.com/blog/bare-minimum-iot-system-dashboard-framework-dashing/
Dashboard對于一個需要及時查看應用狀態的物聯網系統來說是一個很不錯的東西，在接觸到了Dashing之后發現可以快速用于這個物聯網系統，于是便試著將他們整合到了一起
最后效果如下圖所示?
源碼地址：[https://github.com/gmszone/iot-dashboard](https://github.com/gmszone/iot-dashboard)
Dashboard是因為?[一個最小的物聯網系統設計方案及源碼](http://www.phodal.com/blog/bare-minimum-iot/)?而開發的
# Quick Dashboard
如果你看了上一篇介紹的話《[Dashboard 框架 dashing 入門及淺析](http://www.phodal.com/blog/dashboard-framework-dashing-quick-start-and-analytics/)》
1. Install the gem from the command line. Make sure you have Ruby 1.9+
~~~
$ gem install dashing
~~~
2. Generate a new project
~~~
$ dashing new sweet_dashboard_project
~~~
3. Change your directory to sweet_dashboard_project and bundle gems
~~~
$ bundle
~~~
4. Start the server!
~~~
$ dashing start
~~~
5. Point your browser at localhost:3030 and have fun!
# 添加溫度顯示
修改位置
~~~
jobs/sample.rb
~~~
因為溫度需要用到HTTP請求以及解析JSON，所以需要用到這三個庫
~~~
require "json"
require "net/http"
require "uri"
~~~
于是我們需要一個function來獲取json數據
~~~
def get_data(num)
uri = URI.parse("http://b.phodal.com/athome/"+num.to_s)
http = Net::HTTP.new(uri.host, uri.port)
request = Net::HTTP::Get.new(uri.request_uri)
response = http.request(request)
result=JSON.parse(response.body)
result
end
~~~
返回的結果，便是
~~~
[{"id":1,"temperature":14,"sensors1":18,"sensors2":12,"led1":0}]
~~~
我們還需要獲取id為2的數據，以便用來生成溫度對比情況，也就是圖中的綠色部分。于是
~~~
current_temperature = get_data(2)[0]["temperature"].to_i
last_temperature = get_data(1)[0]["temperature"].to_i
~~~
再將temperature sent出去
~~~
send_event('temperature', { current: current_temperature, last: last_temperature })
~~~
最后也就有了
~~~
require "rubygems"
require "json"
require "net/http"
require "uri"
def get_data(num)
uri = URI.parse("http://b.phodal.com/athome/"+num.to_s)
http = Net::HTTP.new(uri.host, uri.port)
request = Net::HTTP::Get.new(uri.request_uri)
response = http.request(request)
result=JSON.parse(response.body)
result
end
SCHEDULER.every '2s' do
current_temperature = get_data(2)[0]["temperature"].to_i
last_temperature = get_data(1)[0]["temperature"].to_i
send_event('temperature', { current: current_temperature, last: last_temperature })
end
~~~
添加一個數據大致以上面類似
~~~
sensors1 = get_data(2)[0]["sensors1"].to_i
send_event('sensors1', { value: sensors1})
~~~
于是也就有了圖2中的sensors1，當然我們還需要添加樣式到erb文件中
~~~
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="sensors1" data-view="Meter" data-title="Sensors1" data-min="0" data-max="40"></div>
</li>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="temperature" data-view="Number" data-title="Current Temperature" data-moreinfo="Celuis"></div>
</li>
~~~
# 添加溫度趨勢
方法大致以上面類似，主要還是存儲數據到points以及獲取數據
~~~
require "rubygems"
require "json"
require "net/http"
require "uri"
def get_data
uri = URI.parse("http://b.phodal.com/athome")
http = Net::HTTP.new(uri.host,uri.port)
request = Net::HTTP::Get.new(uri.request_uri)
response=http.request(request)
result=JSON.parse(response.body)
result.map do |data|
{x: data["id"].to_i, y: data["temperature"].to_i}
end
end
points=get_data
~~~
