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

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签