LASS Field Try 1 之即時PM2.5資訊儀表板介面
編輯歷史
| 時間 | 作者 | 版本 |
|---|---|---|
| 2015-12-13 13:34 | r540 | |
顯示 diff（295 行未修改）
|
||
| 2015-11-27 01:43 – 01:51 | r401 – r539 | |
顯示 diff（10 行未修改）
準備步驟
+ *方法一：
*請參考 LASS Field Try 1 之即時數據呈現系統 文件之說明，並完成所有步驟
*登入 ThingSpeak.com 後，選擇 Apps -> Plugins -> New，然後選擇 Google Gauge，並點擊 Create
（265 行未修改）
*a點選 Make Public，接著點選 Save*
點選網頁上方 Apps/Plugins/ 後方，/Edit前方的連結，即可看到類似範例中使用儀表板介面的即時 PM2.5資訊
+ *方法二：
+ *若您的 ThingSpeak.com帳號不支援製作儀表板介面，亦可直接使用下列連結製作，其中 site 是感測點的安裝位置（可為機關行號名稱、明顯地標、或其他顯而易懂的名稱），city 為感測點的安裝城市，district 為感測點的安裝鄉鎮區，channel 為 ThingSpeak 的 channel ID，apikey 為該channel 的讀取 API KEY
+ *http://nrl.iis.sinica.edu.tw/LASS/PM25.php?site=中央研究院&city=台北市&district=南港區&channel=61022&apikey=XZMEBWCDJQYPJ146
+ *方法三：
+ *若您沒有ThingSpeak帳號，或者不方便自行執行lass_pm25_to_thinkspeak.py的程式，您可以跳過ThingSpeak相關的步驟，直接使用 LASS 為您備份的上傳資料內容，並依照下列方法（二選一）製作儀表板網頁，其中device_id即為設備的編號：
+ *若您想指定地理位置資訊（例如：台北市南港區中央研究院）
+ *http://nrl.iis.sinica.edu.tw/LASS/show.php?site=中央研究院&city=台北市&district=南港區&device_id=FT1_001
+ *若您不想指定地理位置資訊，允許系統依照您上傳資料中的GPS座標自行辨認位置
+ *http://nrl.iis.sinica.edu.tw/LASS/show.php?device_id=FT1_001
常見問題與答案
（2 行未修改）
|
||
| 2015-11-26 15:28 – 15:36 | r386 – r400 | |
顯示 diff（29 行未修改）
* <body>
* <center>
- * <h1>PM2.5 即時資訊</h1>
+ * <h1>PM2.5 即時資訊：XXX（YYYZZZ）</h1>
* <font size="+2">
- * 地點：XXX（YYYZZZ）<br>
- * 時間：<span id="lastupdate"> </span>
+ * 時間：<span id="lastupdate"> </span><br>
+ * 溫度：</b><span id="temperature"></span>℃；濕度：</b><span id="humidity"></span>%
* </font>
* </center>
（91 行未修改）
* displayData(p);
* }
+ **
+
+ p = data.field2;
+ * $('#temperature').html(p);
*
- * });
+ * p = data.field3;
+ * $('#humidity').html(p);
+ *** });
*
* $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/1/last.json?timezone=Asia%2FTaipei', function(data) {
（26 行未修改）
*
*<script type="text/javascript">
- * var series_1_channel_id = 61022;
+ * var series_1_channel_id = 6channel_id
* var series_1_field_number = 1;
* var series_1_read_api_key = '';
（114 行未修改）
|
||
| 2015-11-08 12:21 – 12:21 | r383 – r385 | |
顯示 diff（37 行未修改）
*
* <center>
- * <div id="container">
+ * <table border=0 width=800><tr>
+ * <td width=450>
* <div id="inner">
* <div id="gauge_div"></div>
* </div>
- * </div>
+ * </td>
+ * <td width=350>
+ * <ul>
+ * <li><b>針對一般民眾的活動建議：</b><span id="suggestion1"></span></li>
+ * <li><b>針對敏感性族群的活動建議：</b><span id="suggestion2"></span></li>
+ * </ul>
+ * </td>
+ * </tr></table>
* <div id="chart-container">
* <img alt="Ajax loader" src="//thingspeak.com/assets/loader-transparent.gif"/>
（54 行未修改）
* // get the data point
* p = data.field1;
- *
- * // if there is a data point display it
+ **
+
+ if (p<=35){
+ * $('#suggestion1').html("正常戶外活動。");
+ * $('#suggestion2').html("正常戶外活動。");
+ * } else if (p<=53){
+ * $('#suggestion1').html("正常戶外活動。");
+ * $('#suggestion2').html("有心臟、呼吸道及心血管疾病的成人與孩童感受到癥狀時，應考慮減少體力消耗，特別是減少戶外活動。");
+ * } else if (p<=70){
+ * $('#suggestion1').html("任何人如果有不適，如眼痛，咳嗽或喉嚨痛等，應該考慮減少戶外活動。");
+ * $('#suggestion2').html("<ol><li>有心臟、呼吸道及心血管疾病的成人與孩童，應減少體力消耗，特別是減少戶外活動。</li><li>老年人應減少體力消耗。</li><li>具有氣喘的人可能需增加使用吸入劑的頻率。</li></ol>");
+ * } else {
+ * $('#suggestion1').html("任何人如果有不適，如眼痛，咳嗽或喉嚨痛等，應減少體力消耗，特別是減少戶外活動。");
+ * $('#suggestion2').html("<ol><li>有心臟、呼吸道及心血管疾病的成人與孩童，以及老年人應避免體力消耗，特別是避免戶外活動。</li><li>具有氣喘的人可能需增加使用吸入劑的頻率。</li></ol>");
+ * }
+ ** // if there is a data point display it
* if (p) {
* p = Math.round((p / max_gauge_value) * 100);
（151 行未修改）
|
||
| 2015-11-01 02:53 – 02:53 | r371 – r382 | |
顯示 diff（60 行未修改）
* #chart-container { width: 800px; height: 250px; display: block; margin: 5px 15px 15px 0; overflow: hidden; }
*</style>
- *在 JavaScript 的欄位中輸入下列內容，其中 channel_id 為您的LASS設備在 ThingSpeak 中的 Channel 代碼，api_key 則為該 Channel 的 API Key
+ *在 JavaScript 的欄位中輸入下列內容，其中 channel_id 為您的LASS設備在 ThingSpeak 中的 Channel 代碼（並非 Channel 名稱），api_key 則為該 Channel 的 API Key
*<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
*<script type='text/javascript' src='https://www.google.com/jsapi'></script>
（192 行未修改）
|
||
| 2015-10-31 16:44 – 17:02 | r1 – r370 | |
顯示 diff- Untitled
+ LASS Field Try 1 之即時PM2.5資訊儀表板介面
- This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
+ 前情提要
+ *LASS 的第一個 Field Try 即將展開
+ *LASS Field Try #1 - 大家一起來
+ *LASS Field Try 第一彈：PM2.5量測裝設指南
+ *LASS Field Try 1 之即時數據呈現系統
+ *使用者需要一個類似儀表板般可以即時知道PM2.5濃度的視覺化介面
+ *例如：FT1_001 的即時PM2.5資料（https://thingspeak.com/apps/plugins/25091）
+ *以下介紹如何建立一個和上面例子中一樣的網頁
+
+ 準備步驟
+ *請參考 LASS Field Try 1 之即時數據呈現系統 文件之說明，並完成所有步驟
+ *登入 ThingSpeak.com 後，選擇 Apps -> Plugins -> New，然後選擇 Google Gauge，並點擊 Create
+ *在出現的網頁中，首先於 Name 欄位輸入 "PM2.5 量測 @ XXX（YYYZZZ）"，其中XXX為您的裝設地點的簡稱，YYY為縣市名稱，ZZZ為鄉鎮區名稱
+ *在 HTML 欄位中輸入下列內容，其中 <title></title> 中的 YYY為縣市名稱，ZZZ為鄉鎮區名稱；內文中地點後方的XXX為您的裝設地點的簡稱，YYY為縣市名稱，ZZZ為鄉鎮區名稱
+ *<html>
+ * <head>
+ * <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ * <script type="text/javascript" src="//thingspeak.com/highcharts-3.0.8.js"></script>
+ * <script type="text/javascript" src="//thingspeak.com/exporting.js"></script>
+ *
+ * <title>PM2.5 即時資訊 @ YYYZZZ</title>
+ *
+ * %%PLUGIN_CSS%%
+ * %%PLUGIN_JAVASCRIPT%%
+ *
+ * </head>
+ *
+ * <body>
+ * <center>
+ * <h1>PM2.5 即時資訊</h1>
+ * <font size="+2">
+ * 地點：XXX（YYYZZZ）<br>
+ * 時間：<span id="lastupdate"> </span>
+ * </font>
+ * </center>
+ *
+ * <center>
+ * <div id="container">
+ * <div id="inner">
+ * <div id="gauge_div"></div>
+ * </div>
+ * </div>
+ * <div id="chart-container">
+ * <img alt="Ajax loader" src="//thingspeak.com/assets/loader-transparent.gif"/>
+ * </div>
+ * <hr>
+ * 註：以上量測結果仍屬實驗階段，其正確性與代表性僅供參考，正確資料仍以環保署公佈為主。
+ * <br>
+ * Powered by <a href="https://www.facebook.com/groups/1607718702812067/">LASS</a> & <A href="https://sites.google.com/site/cclljj/NRL">IIS-NRL</a> & <a href="https://thingspeak.com">ThingSpeak.com</a>
+ * </center>
+ * </body>
+ *</html>
+ *在 CSS 的欄位中輸入
+ *<style type="text/css">
+ * body { background-color: white; }
+ * #container { width: 100%; display: table; }
+ * #inner { vertical-align: top; display: table-cell; }
+ * #gauge_div { width: 450px; margin: 0 auto; }
+ * #chart-container { width: 800px; height: 250px; display: block; margin: 5px 15px 15px 0; overflow: hidden; }
+ *</style>
+ *在 JavaScript 的欄位中輸入下列內容，其中 channel_id 為您的LASS設備在 ThingSpeak 中的 Channel 代碼，api_key 則為該 Channel 的 API Key
+ *<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
+ *<script type='text/javascript' src='https://www.google.com/jsapi'></script>
+ *<script type='text/javascript'>
+ *
+ * // set your channel id here
+ * var channel_id = 12345;
+ * // set your channel's read api key here if necessary
+ * var api_key = '123456789'ABCDEF;
+ * // maximum value for the gauge
+ * var max_gauge_value = 100;
+ * // name of the gauge
+ * var gauge_name = 'PM2.5';
+ *
+ * // global variables
+ * var chart, charts, data;
+ *
+ * // load the google gauge visualization
+ * google.load('visualization', '1', {packages:['gauge']});
+ * google.setOnLoadCallback(initChart);
+ *
+ *
+ *
+ * // display the data
+ * function displayData(point) {
+ * data.setValue(0, 0, gauge_name);
+ * data.setValue(0, 1, point);
+ * chart.draw(data, options);
+ * }
+ *
+ * // load the data
+ * function loadData() {
+ * // variable for the data point
+ * var p;
+ *
+ * // get the data from thingspeak
+ * $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {
+ *
+ * // get the data point
+ * p = data.field1;
+ *
+ * // if there is a data point display it
+ * if (p) {
+ * p = Math.round((p / max_gauge_value) * 100);
+ * displayData(p);
+ * }
+ *
+ * });
+ *
+ * $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/1/last.json?timezone=Asia%2FTaipei', function(data) {
+ *
+ * var now = new Date(data.created_at)
+ * $('#lastupdate').html(now.toString());
+ *
+ * });
+ * }
+ *
+ * // initialize the chart
+ * function initChart() {
+ *
+ * data = new google.visualization.DataTable();
+ * data.addColumn('string', 'Label');
+ * data.addColumn('number', 'Value');
+ * data.addRows(1);
+ *
+ * chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
+ * options = {width: 450, height: 450, redFrom: 53, redTo: 100, yellowFrom:35, yellowTo: 53, greenFrom:0, greenTo:35, minorTicks: 5};
+ *
+ * loadData();
+ *
+ * // load new data every 15 seconds
+ * setInterval('loadData()', 15000);
+ * }
+ *
+ *</script>
+ *
+ *
+ *<script type="text/javascript">
+ * var series_1_channel_id = 61022;
+ * var series_1_field_number = 1;
+ * var series_1_read_api_key = '';
+ * var series_1_results = 2000;
+ * var series_1_color = '#ff0000';
+ *
+ * // chart title
+ * var chart_title = '';
+ * // y axis title
+ * var y_axis_title = 'PM2.5';
+ *
+ * // user's timezone offset
+ * var my_offset = new Date().getTimezoneOffset();
+ * // chart variable
+ * var my_chart;
+ *
+ * // when the document is ready
+ * $(document).on('ready', function() {
+ * // add a blank chart
+ * addChart();
+ * // add the first series
+ * addSeries(series_1_channel_id, series_1_field_number, series_1_read_api_key, series_1_results, series_1_color);
+ * });
+ *
+ * // add the base chart
+ * function addChart() {
+ * // variable for the local date in milliseconds
+ * var localDate;
+ *
+ * // specify the chart options
+ * var chartOptions = {
+ * chart: {
+ * renderTo: 'chart-container',
+ * defaultSeriesType: 'line',
+ * backgroundColor: '#ffffff',
+ * events: { }
+ * },
+ * title: { text: chart_title },
+ * plotOptions: {
+ * series: {
+ * marker: { radius: 3 },
+ * animation: true,
+ * step: false,
+ * borderWidth: 0,
+ * turboThreshold: 0
+ * }
+ * },
+ * tooltip: {
+ * // reformat the tooltips so that local times are displayed
+ * formatter: function() {
+ * var d = new Date(this.x + (my_offset*60000));
+ * var n = (this.point.name === undefined) ? '' : '<br>' + this.point.name;
+ * return this.series.name + ':<b>' + this.y + '</b>' + n + '<br>' + d.toDateString() + '<br>' + d.toTimeString().replace(/\(.*\)/, "");
+ * }
+ * },
+ * xAxis: {
+ * type: 'datetime',
+ * title: { text: 'Date' }
+ * },
+ * yAxis: { title: { text: y_axis_title } },
+ * exporting: { enabled: false },
+ * legend: { enabled: false },
+ * credits: {
+ *// text: 'ThingSpeak.com',
+ *// href: 'https://thingspeak.com/',
+ * text: '',
+ * href: '',
+ *
+ * style: { color: '#D62020' }
+ * }
+ * };
+ *
+ * // draw the chart
+ * my_chart = new Highcharts.Chart(chartOptions);
+ * }
+ *
+ * // add a series to the chart
+ * function addSeries(channel_id, field_number, api_key, results, color) {
+ * var field_name = 'field' + field_number;
+ *
+ * // get the data with a webservice call
+ * $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/fields/' + field_number + '.json?offset=0&round=2&results=' + results + '&api_key=' + api_key, function(data) {
+ *
+ * // blank array for holding chart data
+ * var chart_data = [];
+ *
+ * // iterate through each feed
+ * $.each(data.feeds, function() {
+ * var point = new Highcharts.Point();
+ * // set the proper values
+ * var value = this[field_name];
+ * point.x = getChartDate(this.created_at);
+ * point.y = parseFloat(value);
+ * // add location if possible
+ * if (this.location) { point.name = this.location; }
+ * // if a numerical value exists add it
+ * if (!isNaN(parseInt(value))) { chart_data.push(point); }
+ * });
+ *
+ * // add the chart data
+ * my_chart.addSeries({ data: chart_data, name: data.channel[field_name], color: color });
+ * });
+ * }
+ *
+ * // converts date format from JSON
+ * function getChartDate(d) {
+ * // offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
+ * return Date.parse(d) - (my_offset * 60000);
+ * }
+ *
+ *</script>
+ *a點選 Make Public，接著點選 Save*
+ 點選網頁上方 Apps/Plugins/ 後方，/Edit前方的連結，即可看到類似範例中使用儀表板介面的即時 PM2.5資訊
+
+ 常見問題與答案
+
+ *
|
||
| 2015-10-31 16:43 | r0 | |
顯示 diff+ Untitled
+ This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
|
||