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

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签