樹莓派:4. 樹莓派搭建美觀的物聯網溫度伺服器-ECharts、HTML5、JavaScript / ECharts gauge使用示例
1. 效果
2. 簡介
1. 其中儀表的部分使用的是ECharts的gauge控制元件實現。
2. CGI使用自動重新整理的方式每隔3秒自動執行一次,gauge控制元件每隔3秒讀取CGI的html文件,並且解析出溫度,顯示到錶盤上。
3. HTML程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>ECharts</title>
<!-- 來自百度CDN -->
<script src="./esl.js"></script >
</head>
<body>
<img src="city2.jpg" height="100%" width="100%">
<h1 align="left" style="color:black;font-size:40px;">物聯網溫度檢測 </h1>
<hr size="1" width="100%" color="black" noshade="noshade" />
<iframe id = "hellocgi" src="cgi-bin/hello.cgi" width="0" height ="0"></iframe>
<!--#exec cgi="cgiProgram.cgi"-->
<div id="main2" style="height:600px" align="left"></div>
<script type="text/javascript">
var timeTicket;
// 路徑配置
require.config({
paths:{
'echarts' : './echarts' ,
'echarts/chart/bar' : './echarts',
'echarts/chart/line' : './echarts',
'echarts/chart/gauge' : './echarts'
}});
// 使用
require([
'echarts',
'echarts/chart/bar', // 使用柱狀圖就載入bar模組,按需載入
'echarts/chart/line',
'echarts/chart/gauge'],
function (ec) {
var myChart2 = ec.init(document.getElementById('main2'));
var option2 = {
tooltip : {formatter: "{a} <br/>{b} : {c}%"},
series : [{
name:'物聯網溫度',
type:'gauge',
detail : {formatter:'{value}攝氏度'},
data:[{value: 0, name: ''}]
}]};
clearInterval(timeTicket);
timeTicket = setInterval(function(){
var d = window.frames["hellocgi"].document;
var str = d.getElementsByTagName('h1')[0].innerHTML;
option2.series[0].data[0].value = str;
//option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart2.setOption(option2, true);
}, 2000);
// 為echarts物件載入資料
myChart2.setOption(option2);
}
);
</script>
<hr size="1" width="100%" color="black" noshade="noshade" />
</body>
</html>
4. 檔案列表
5. 原始碼下載
相關推薦
樹莓派:4. 樹莓派搭建美觀的物聯網溫度伺服器-ECharts、HTML5、JavaScript / ECharts gauge使用示例
1. 效果 2. 簡介 1. 其中儀表的部分使用的是ECharts的gauge控制元件實現。 2. CGI使用自動重新整理的方式每隔3秒自動執行一次,gauge控制元件每隔3秒讀取CGI的
高併發程式設計系列:4種常用Java執行緒鎖的特點,效能比較、使用場景
高併發程式設計系列:4種常用Java執行緒鎖的特點,效能比較、使用場景 http://youzhixueyuan.com/4-kinds-of-java-thread-locks.html 在Java併發程式設計中,經常遇到多個執行緒訪問同一個 共享資源 ,這時候作為開發者
(小程式篇:一)mac搭建小程式本地測試伺服器
mac搭建小程式本地測試伺服器 根據教程逐步搭建:https://www.jianshu.com/p/61f50ee77dec 可能遇到的問題: npm未安裝,使用終端語句時報錯npm: command not found,參考教程安裝npm:https://blog.c
和我一起搭建私有物聯網雲平臺
和我一起搭建私有物聯網雲平臺 背景(不看也罷) “預計2020年全球的物聯網裝置將達到500億臺”這句話已經被我無恥地在各種材料、PPT中引用過無數次了,但這並不妨礙物聯網已經成為或即將成為下一個浪潮之巔的事實,各大、小公司都想借助物聯網的風口再起飛一波。於是,很多公司紛紛
海天味業預報:2019年AI/機器人和物聯網將扮演主角!
數字化轉型在很長一段時間內一直是許多公司的首要任務,並且可能還會持續一段時間。 但是2019年的轉型是做什麼呢? 研究公司Forrester Research剛剛釋出了一份預測報告, 以下是海天味業為你播報的重點內容。 數字化運營可操作化 該公司表示,今年是“現實扼殺了轉型理想”的一年,董事
Unity3d搭建HTTP弱聯網的伺服器搭建及客戶端編寫(一)之java伺服器
HTTP弱聯網java伺服器 通過tomcat搭建java伺服器(linux 1、java環境搭建 java環境較容易搭建,在網上很容易找到相關的教程。 2、tomcat環境搭建 開始配置tomcat: 複製解壓後的檔案到 /opt
LoRa vs NB-IoT:12個角度看哪個物聯網標準更具優勢?
近期全球低功耗廣域網(LPWAN)市場的激增可歸因於多個因素。機器學習和 M2M 通訊標準的快速發展發揮了重要作用,加之全球對物聯網服務的需求不斷增長、低價的 LPWAN 工具和節能機會的增多。 預計在2022 年,全球 LPWAN 市場的價值將會提升
利用 esp8266 搭建簡單物聯網專案
接[上一篇部落格](https://www.cnblogs.com/ZhengBlogs/p/esp8266_1.html),這次還是關於 **esp8266** --> **物聯網** # 一、雲端資料監控:DHT11 + NodeMcu +Dweet.io 1. 接上一篇部落格的接線及相關配置不變( DH
樹莓派開發筆記(二):qt開發環境搭建:樹莓派qt編譯和宿主機qt交叉編譯
樹莓派開發筆記(二):qt開發環境搭建:樹莓派qt編譯和宿主機qt交叉編譯前話 前面已經成功執行樹莓派,下面使用qt開發樹莓派產品。搭建樹莓派qt編譯環境(不推薦:開發編譯速度慢) 安裝樹莓派的桌面版本,可以直接配置qt環境,此種方法總是卡卡的,所
雲中樹莓派(4):利用聲音感測器控制Led燈
1. 聲音感測器及其配置 聲音感測器如下圖所示: 將 VCC 引腳接入樹莓派 5V 引腳,將 GND 引腳接入樹莓派 GND 引腳,將 OUT 引腳接入樹莓派 GPIO20。 要注意,模組在環境聲音強度達不到設定閾值時,OUT輸出高電平(1),當外界環境聲音強度超過設定閾值時
Qt5.4(later)樹莓派2 交叉編譯環境搭建
費了好大力氣,終於把Qt5的交叉環境搞定了,這裡記錄一下具體的實現過程。google出來的文章都是很老的移植方法,很多博文裡面 提供的下載連結均已失效。 1. 準備工具 * qt-everywhere-opensource-src-5.4.1.tar* 2015-0
簡單物聯網:外網訪問內網路由器下樹莓派Flask服務器
分配 amp con 樹莓派 轉發規則 添加 局域網 輸入 pytho 最近做一個小東西,大概過程就是想在教室,宿舍控制實驗室的一些設備。 已經在樹莓上搭了一個輕量的flask服務器(在樹莓派下搭flask在其他隨筆有說明),在實驗室的路由器下,任何設備都是可以訪問的;但是
樹莓派apache2.4源碼包安裝
include error: apt-get 重新編譯 問題: ror 成功 樹莓派 官方 1.安裝apr-1.6.3.tar.gz apr-util-1.6.1.tar.bz2 httpd-2.4.34.tar.gz (源碼包下載centos7的就行,樹莓派版本官方deb
NetBSD 7.1正式釋出:支援樹莓派Zero以及更好的Linux相容性
2017-03-16 15:06 來源:cnbeta網站(台州) 我來投稿 小程式創業扶持計劃 實現月入10萬創業夢 (原標題:NetBSD 7.1正式釋出:支援樹莓派Zero以及更好的Lin
經驗分享:利用樹莓派開發板製作無線路由器
摸索了一個禮拜,總算將自己手上的樹莓派開發板製作成了一個無線路由器。 無線路由器在資料包的傳輸中會進行NAT轉化,並生成NAT表,資料包必須先通過LAN口進入路由器,再由WLAN口出路由器進入Internet,然後才能在Internet上找到對應的伺服器…以上為
樹莓派入門(三)- 基本設定:時區、密碼、apt-get源、上傳下載
樹莓派基本設定 更改時區 修改root、pi密碼 更換apt為阿里雲源 使用lrzsz,上傳下載檔案 更改時區 輸入命令 sudo dpkg-reconfigure tzdata 上下箭頭移動游標,
樹梅派應用23:QT+樹莓派實現一個簡單的播放器
說起樹莓派,買了也有一段時間了,但是始終都沒有做出什麼好玩的裝置出來,恰好最近在學C++,看到樹莓派放在牆角吃了一年多灰,為何不利用它來學一下程式設計呢? 先給我的工作臺來個特寫: 說幹就幹,在經歷了一番折騰以後,先準備所需的器材和必要的零部件,在這裡我簡單的羅列一下:先是
樹梅派應用18:用樹莓派DIY一個智慧家居伺服器
其實這東西我自己已經用了一年了~現在就來寫個教程~嘿嘿…… 先上個圖 有點亂23333 這是我的房間書櫃,也是我的工作臺……書櫃的側邊是樹莓派搭建的物聯網伺服器~ 來一隻近圖~ 這就是伺服器的近照啦~ 我用的是樹莓派A+作為伺服器的主控,所有的工作都由它完成。 樹莓派A+是
樹莓派:設定與軟體安裝
拿到樹莓派後,你需要進行一些初始化設定,以便於用起來更方便。除此之外,你可能需要安裝一些軟體,以便樹莓派能實現更加強大的功能。 常見初始化設定 1)設定密碼: 樹莓派的預設使用者名稱是pi,沒有密碼。這意味著別人可以隨意使用你的樹莓派。你可以在終端中為pi使用者設定密碼: $sudo
樹莓派:開機使用
eth0 Link encap:Ethernet HWaddr b8:27:eb:d8:ed:f4 inet6 addr: fe80::9b8b:c0de:d083:6ddd/64 Scope:Link UP BROADCAST MULTICAS