Blog | Phodal - A Growth Engineerhttp://www.phodal.com/blog/2014-10-20T08:17:55.445237+00:00Blog最小物联网系统——Dashboard2014-02-12T11:46:56+00:002014-10-20T08:17:55.445237+00:00Phodal Huanghttp://www.phodal.com/blog/author/root/http://www.phodal.com/blog/bare-minimum-iot-system-dashboard-framework-dashing/Dashboard对于一个需要及时查看应用状态的物联网系统来说是一个很不错的东西,在接触到了Dashing之后发现可以快速用于这个物联网系统,于是便试着将他们整合到了一起
最后效果如下图所示
<img height="350px" src="https://raw.github.com/gmszone/iot-dashboard/master/doc/screenshot.png" title="Dashboard"/>
源码地址:[https://github.com/gmszone/iot-dashboard][1]
[1]: https://github.com/gmszone/iot-dashboard
Dashboard是因为 [一个最小的物联网系统设计方案及源码][3] 而开发的
[3]: http://www.phodal.com/blog/bare-minimum-iot/
#Quick Dashboard#
如果你看了上一篇介绍的话《[Dashboard 框架 dashing 入门及浅析][2]》
[2]: http://www.phodal.com/blog/dashboard-framework-dashing-quick-start-and-analytics/
1. Install the gem from the command line. Make sure you have Ruby 1.9+
<pre><code class="bash">$ gem install dashing
</code></pre>
2. Generate a new project
<pre><code class="bash">$ dashing new sweet_dashboard_project
</code></pre>
3. Change your directory to sweet_dashboard_project and bundle gems
<pre><code class="bash">$ bundle
</code></pre>
4. Start the server!
<pre><code class="bash">$ dashing start
</code></pre>
5. Point your browser at localhost:3030 and have fun!
#添加温度显示#
修改位置
<pre><code class="bash"> jobs/sample.rb
</code></pre>
因为温度需要用到HTTP请求以及解析JSON,所以需要用到这三个库
<pre><code class="ruby">require "json"
require "net/http"
require "uri"
</code></pre>
于是我们需要一个function来获取json数据
<pre><code class="ruby">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
</code></pre>
返回的结果,便是
<pre><code class="javascript">[{"id":1,"temperature":14,"sensors1":18,"sensors2":12,"led1":0}]
</code></pre>
我们还需要获取id为2的数据,以便用来生成温度对比情况,也就是图中的绿色部分。于是
<pre><code class="ruby">current_temperature = get_data(2)[0]["temperature"].to_i
last_temperature = get_data(1)[0]["temperature"].to_i
</code></pre>
再将temperature sent出去
<pre><code class="ruby"> send_event('temperature', { current: current_temperature, last: last_temperature })
</code></pre>
最后也就有了
<pre><code class="ruby">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
</code></pre>
添加一个数据大致以上面类似
<pre><code class="ruby"> sensors1 = get_data(2)[0]["sensors1"].to_i
send_event('sensors1', { value: sensors1})
</code></pre>
于是也就有了图2中的sensors1,当然我们还需要添加样式到erb文件中
<pre><code class="html">
<li data-col="1" data-row="1" data-sizex="1" data-sizey="1">
<div data-id="sensors1" data-max="40" data-min="0" data-title="Sensors1" data-view="Meter"></div>
</li>
<li data-col="1" data-row="1" data-sizex="1" data-sizey="1">
<div data-id="temperature" data-moreinfo="Celuis" data-title="Current Temperature" data-view="Number"></div>
</li>
</code></pre>
#添加温度趋势#
方法大致以上面类似,主要还是存储数据到points以及获取数据
<pre><code class="ruby">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
</code></pre>