為了解決谷歌協作平台無法像一般網頁自由嵌入及編輯javascript,css樣式的問題找了很久
最近終於試出來了~幸好新版協作平台可以嵌入html語法
一開始發現台中市公發的空氣盒子位置被G0V政府公開資訊網空氣品質監測數據列表拿掉了??!!
原本用他們的js做資料讀取視覺化的方式就失效了~因為沒有對應的位置
只好開始爬文，後來發現，LASS官網有定期蒐集空氣盒子的數據並可以公開查詢
https://data.lass-net.org/data/last.php?device_id=(你的空氣盒子位址例如 74DA3895CXXX)
可以傳給你一份json檔長得像這樣
{"source": "last by IIS-NRL", "feeds": [{"AirBox2": {"gps_lat": 24.267, "gps_num": 9.0, "name": "XXXXX", "s_t0": 26.62, "area": "taichung", "gps_alt": 2.0, "timestamp": "2019-04-24T01:59:05Z", "app": "AirBox2", "gps_fix": 1.0, "s_d0_hourly_num": 9, "s_d0_hourly": 39.111111111111114, "gps_lon": 120.000, "s_d2": 28.0, "time": "01:59:05", "s_d0": 40.0, "s_d1": 51.0, "date": "2019-04-24", "s_h0": 100.0, "device_id": "74DA389XXXXXA"}}], "version": "2019-04-24T02:08:38Z", "num_of_records": 1, "device_id": "74DA3895C3AA"}
就去查這些代表的意思，再想說要怎麼解析這些數值
還好，查到某小學的xoops網站有做類似的樣式，讀到網頁原始碼後修改一下，就成功了，
特別做個紀錄並分享給需要的網友，不過如果懂得css的高手應該不會有這種初級問題:P
我這邊是沒有去改css div的命名直接照抄:P
感謝台南市進學國小校網Orz
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | <!DOCTYPE html><html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="http://ff.kis.v2.scr.kaspersky-labs.com/42829480-C370-9940-A51E-66D94F38BBC9/main.js" charset="UTF-8"></script> <style type="text/css"> body{ color:#202020; background-color: #FFFFFF; background-image: url(''); background-position: ; background-repeat: repeat; background-attachment:scroll; font-size:11pt; } a{ color:#005ca8; } a:hover{ color:#a40019; } .rightBlock .blockTitle{ font-size:1.5em; color:#6bbdff ; background-color: transparent; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; } .rightBlock a.block_config{ float:right; position:relative; z-index: 1; } .rightBlock .blockTitle{ border:none;height:40px;line-height:40px;margin-bottom:10px; } </style> </head> <body> <div class="rightBlock"> <h3 class="blockTitle">AirBox</h3> <div class="blockContent" style="clear:both;"> <div id="edimax" style="text-align:center;"> title="http://taqm.epa.gov.tw/taqm/tw/PsiMap.aspx" rel="nofollow"><img id="avatar" src="//www.chps.tn.edu.tw/dokuwiki/_media/ajax-loader.gif" alt="" width="100" /></a> <p><span id="status"></span></p> <p style="font-size:1.5em;"> PM2.5數值：<span id="pm25" style="color:blue;font-weight:bolder;font-size:1.5em;"></span>μg/m³</p> <canvas id="pm25_guage" style="width:200px;"></canvas><br> <p> 溫度：<span id="t" style="color:blue;font-weight:bolder;font-size:1.5em;"></span>°C，溼度： <span id="h" style="color:blue;font-weight:bolder;font-size:1.5em;"></span>% </p> 最後更新時間<br><span class="" id="time"></span> </div> <script type="text/javascript" src="//bernii.github.io/gauge.js/dist/gauge.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> var opts = { lines: 12, // The number of lines to draw angle: 0.15, // The length of each line lineWidth: 0.44, // The line thickness pointer: { length: 0.9, // The radius of the inner circle strokeWidth: 0.035, // The rotation offset color: '#000000' // Fill color }, limitMax: 'false', // If true, the pointer will not go past the end of the gauge colorStart: '#6FADCF', // Colors colorStop: '#8FC0DA', // just experiment with them strokeColor: '#E0E0E0', // to see which ones work best for you generateGradient: true, percentColors: [ [0.0, "#31cf00"], [0.36, "#31cf00"], [0.54, "#ff9a00"], [0.71, "#990000"], [1.0, "#ce30ff"] ] }; </script> <script type="text/javascript"> function update_pm25() { var ts = (new Date()).getTime(); var mac = '74DA3895C3AA'; //your device address 空氣盒子LASS對應位址 if (location.hash) { mac = location.hash; mac = mac.replace(/#/, ''); } $.ajax( { url: "https://cors.io/?" + "https://pm25.lass-net.org/data/last.php?" + $.param({ device_id: mac, ts: ts }), dataType: "json", success: function(response) { console.log(response); var j = null; if (response.feeds[0].AirBox) { j = response.feeds[0].AirBox; } if (response.feeds[0].AirBox2) { j = response.feeds[0].AirBox2; } if (j) { var name = j.device; var pm25 = parseInt(j.s_d0); var t = j.s_t0; var h = j.s_h0; var time = new Date(j.timestamp); time = time.toLocaleString(); var baseurl = '//www.chps.tn.edu.tw'; var img = '/dokuwiki/_media/psi:1.png'; var target = document.getElementById( 'pm25_guage'); // your canvas element var gauge = new Gauge(target).setOptions( opts); // create sexy gauge! gauge.maxValue = 100; // set max gauge value gauge.animationSpeed = 32; // set animation speed (32 is default value) gauge.set(pm25); // set actual value if (pm25 < 36) { // 低 img = '/dokuwiki/_media/psi:1.png'; status = '<span style="color:#31cf00">空品良好適合趴趴走</span>'; } else if (pm25 < 54) { // 中 img = '/dokuwiki/_media/psi:2.png'; status = '<span style="color:#ff9a00">可正常戶外活動，若不適者請戴口罩</span>'; } else if (pm25 < 71) { // 高 img = '/dokuwiki/_media/psi:3.png'; status = '<span style="color:#990000">不適者減少戶外活動，敏感族群建議戴口罩</span>'; } else { // 非常高 img = '/dokuwiki/_media/psi:4.png'; status = '<span style="color:#ce30ff">不適者減少戶外活動，敏感族群避免外出</span>'; } $('#edimax #name').text(name); $('#edimax #pm25').text(pm25); $('#edimax #t').text(t); $('#edimax #h').text(h); $('#edimax #time').text(time); $('#edimax #avatar').attr('src', baseurl + img); $('#edimax #status').html(status); } } }); } $(document).ready(function() { update_pm25(); setInterval(update_pm25, 1000 * 60 * 5); }); </script> </div> </body></html> |
END
