Blog

Blog

PHODAL

最小物联网系统——Dashboard

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

或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签