最小物聯(lián)網(wǎng)系統(tǒng)——Dashboard

原文出處：https://www.phodal.com/blog/bare-minimum-iot-system-dashboard-framework-dashing/

Dashboard對于一個(gè)需要及時(shí)查看應(yīng)用狀態(tài)的物聯(lián)網(wǎng)系統(tǒng)來說是一個(gè)很不錯(cuò)的東西，在接觸到了Dashing之后發(fā)現(xiàn)可以快速用于這個(gè)物聯(lián)網(wǎng)系統(tǒng)，于是便試著將他們整合到了一起

最后效果如下圖所示?

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

Dashboard是因?yàn)?一個(gè)最小的物聯(lián)網(wǎng)系統(tǒng)設(shè)計(jì)方案及源碼?而開發(fā)的

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

因?yàn)闇囟刃枰玫紿TTP請求以及解析JSON，所以需要用到這三個(gè)庫

require "json"
require "net/http"
require "uri"

于是我們需要一個(gè)function來獲取json數(shù)據(jù)

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

返回的結(jié)果，便是

[{"id":1,"temperature":14,"sensors1":18,"sensors2":12,"led1":0}]

我們還需要獲取id為2的數(shù)據(jù)，以便用來生成溫度對比情況，也就是圖中的綠色部分。于是

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

添加一個(gè)數(shù)據(jù)大致以上面類似

  sensors1 = get_data(2)[0]["sensors1"].to_i
  send_event('sensors1',   { value: sensors1})

于是也就有了圖2中的sensors1，當(dāng)然我們還需要添加樣式到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>

添加溫度趨勢

方法大致以上面類似，主要還是存儲(chǔ)數(shù)據(jù)到points以及獲取數(shù)據(jù)

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