Dashboard对于一个需要及时查看应用状态的物联网系统来说是一个很不错的东西，在接触到了Dashing之后发现可以快速用于这个物联网系统，于是便试着将他们整合到了一起

最后效果如下图所示

源码地址：https://github.com/gmszone/iot-dashboard

Dashboard是因为 一个最小的物联网系统设计方案及源码 而开发的

Quick Dashboard

如果你看了上一篇介绍的话《Dashboard 框架 dashing 入门及浅析》

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

SCHEDULER.every '2s' do
  send_event('tempdata', points: points)
end