2home 打造桃花源

標題: 客製化省道即時交通路況 diy ,讓自己變千里眼 [打印本頁]
作者: 2home    時間: 2014-6-11 20:41     標題: 客製化省道即時交通路況 diy ,讓自己變千里眼

大家可能會有和我一樣的需求,前往2home 的即時路況如何,有沒有塞車,有沒有下雨,有沒有異常,最好連手機都可以一目了然,在前往的途中,只要手機能上網 reload 一次,就可把所有預設的監視畫面出現在同一個網頁.

其實利用 省道即時交通資訊網就可以了,再加上一點網頁語法就可以了.取得即時交通資訊網的畫面很簡單,只要找到您要的監視畫面,再按滑鼠 右鍵,複製圖片連結,製作成網頁就可以了,

省道即時交通資訊網
http://168.thb.gov.tw/navigate.do#


下面的連結是從桃園大溪到花蓮鳳林 的預設監視畫面,只要reload 就會出現最新的畫面,可以很清楚看見所有的畫面

http://www.2home.com.tw/bbs/dd.html
作者: snoopyhome    時間: 2014-6-12 10:10

站大, 可以在<html>和<body>之間, 再加上
<meta http-equiv="refresh" content="5" >
就不用自己手動refresh了.

content="5"是表示5秒自動refresh, 可以自調整.
作者: rdmigo    時間: 2014-6-12 11:24

手癢ㄛ....好癢ㄛ!
又忘光語法...
就給它打包回來...

在+5秒翻一次..真方便!





作者: rdmigo    時間: 2014-6-12 11:32

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>由桃園台9 to 鳳林 即時路況/5s </title>
<head>
<meta http-equiv="refresh" content="5" >


<body>


台3線-大溪鎮員林路(39K+450)<br>
<img src=http://210.242.136.66/T3-39K+450/snapshot?t=1402487287843><br>

縣道110線-三轄區復興路(110線)(25K+950)<br>
<img src=http://210.242.136.66/C110-25K+950/snapshot?t=1402487341199><br>

台9線-新店區北宜路二段(11K+300)<br>
<img src=http://210.242.136.66/T9-11K+300/snapshot?t=1402487380377><br>

台9線-北宜公路坪林橋(38K+400)<br>
<img src=http://210.242.136.66/T9-38K+400/snapshot?t=1402487420044><br>

台9線-頭城鎮北宜公路山下,往頭城方向(68K+510)<br>
<img src=http://210.242.136.67/T9-68K+510/snapshot?t=1402487762997><br>

縣道191甲線-礁溪鄉192線<br>
<img src=http://210.242.136.67/C191A-1K+800/snapshot?t=1402487856908><br>

縣道191甲線-礁溪鄉台7線叉路之南100M,往北方向<br>
<img src=http://210.242.136.67/C191A-4K+500/snapshot?t=1402487921725><br>

縣道191甲線-五結鄉羅東聯絡道叉口之北550M，往北方向<br>
<img src=http://210.242.136.67/C191A-11K+450/snapshot?t=1402487999329><br>

台9線-蘇澳鎮武荖坑橋南50M派出所前，附掛中央分隔島標示牌桿<br>
<img src=http://210.242.136.67/T9-99K+150/snapshot?t=1402488059355><br>

台9線-蘇澳鎮蘇澳新火車站南，中央分隔島<br>
<img src=http://210.242.136.67/T9-101K+400/snapshot?t=1402488115332><br>

台9線-蘇澳鎮蘇港路/蘇花路叉路,往南方向(105K+415<br>
<img src=http://210.242.136.67/T9-105K+415/snapshot?t=1402488183613><br>

台9線-東澳南幸福水泥前,往北方向(120K+210)<br>
<img src=http://210.242.136.67/T9-120K+210/snapshot?t=1402488313449><br>

台9線-秀林鄉蘇花公路和中北上方向,往南方向(161K+320<br>
<img src=http://210.242.136.67/T9-161k+320/snapshot?t=1402488383867><br>

台9線-秀林鄉崇德舊管制站之南,崇德南下方向(179K+700)<br>
<img src=http://210.242.136.67/T9-179K+700-3/snapshot?t=1402488435907><br>

台9線-花蓮市嘉里三街及新生橋叉路之北順樁路側,往南方向<br>
<img src=http://210.242.136.67/T9-199K+515/snapshot?t=1402488517784><br>

台9線-壽豐鄉台9及進鯉魚潭叉路北,往北方向(212K+100<br>
<img src=http://210.242.136.67/T9-212K+100/snapshot?t=1402488589621><br>

台9線-壽豐鄉和榮路橋北中華路2段32巷南，中央分隔島,用原基礎<br>
<img src=http://210.242.136.67/T9-219K+800/snapshot?t=1402488686999><br>

台9線-壽豐鄉中央分隔島,附掛號誌桿,往南方向(224K+900)<br>
<img src=http://210.242.136.67/T9-224K+900/snapshot?t=1402488744001><br>

台11丙線-壽豐鄉台11丙18K+200與台9線228k+600路口以東200公尺,距台9線200公尺向西方向<br>
<img src=http://210.242.136.67/T11C-18K+200/snapshot?t=1402488787926><br>

台9線- 鳳林鎮逆樁路側(233K+320)<br>
<img src=http://210.242.136.67/T9-233K+320/snapshot?t=1402118256867><br>

</body>
</html>


複製另存新檔..就可以在家慢慢看...有空在弄成有框架方式!
作者: rdmigo    時間: 2014-6-12 11:36


如果我這樣玩...不知道會不會被揍....


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>由桃園台9 to 鳳林 即時路況/5s </title>
</head>
<meta http-equiv="refresh" content="5" >


<body>


台3線-大溪鎮員林路(39K+450)<br>
<img src=http://210.242.136.66/T3-39K+450/snapshot?t=1402487287843><br>

縣道110線-三轄區復興路(110線)(25K+950)<br>
<img src=http://210.242.136.66/C110-25K+950/snapshot?t=1402487341199><br>

台9線-新店區北宜路二段(11K+300)<br>
<img src=http://210.242.136.66/T9-11K+300/snapshot?t=1402487380377><br>

台9線-北宜公路坪林橋(38K+400)<br>
<img src=http://210.242.136.66/T9-38K+400/snapshot?t=1402487420044><br>

台9線-頭城鎮北宜公路山下,往頭城方向(68K+510)<br>
<img src=http://210.242.136.67/T9-68K+510/snapshot?t=1402487762997><br>

縣道191甲線-礁溪鄉192線<br>
<img src=http://210.242.136.67/C191A-1K+800/snapshot?t=1402487856908><br>

縣道191甲線-礁溪鄉台7線叉路之南100M,往北方向<br>
<img src=http://210.242.136.67/C191A-4K+500/snapshot?t=1402487921725><br>

縣道191甲線-五結鄉羅東聯絡道叉口之北550M，往北方向<br>
<img src=http://210.242.136.67/C191A-11K+450/snapshot?t=1402487999329><br>

台9線-蘇澳鎮武荖坑橋南50M派出所前，附掛中央分隔島標示牌桿<br>
<img src=http://210.242.136.67/T9-99K+150/snapshot?t=1402488059355><br>

台9線-蘇澳鎮蘇澳新火車站南，中央分隔島<br>
<img src=http://210.242.136.67/T9-101K+400/snapshot?t=1402488115332><br>

台9線-蘇澳鎮蘇港路/蘇花路叉路,往南方向(105K+415<br>
<img src=http://210.242.136.67/T9-105K+415/snapshot?t=1402488183613><br>

台9線-東澳南幸福水泥前,往北方向(120K+210)<br>
<img src=http://210.242.136.67/T9-120K+210/snapshot?t=1402488313449><br>

台9線-秀林鄉蘇花公路和中北上方向,往南方向(161K+320<br>
<img src=http://210.242.136.67/T9-161k+320/snapshot?t=1402488383867><br>

台9線-秀林鄉崇德舊管制站之南,崇德南下方向(179K+700)<br>
<img src=http://210.242.136.67/T9-179K+700-3/snapshot?t=1402488435907><br>

台9線-花蓮市嘉里三街及新生橋叉路之北順樁路側,往南方向<br>
<img src=http://210.242.136.67/T9-199K+515/snapshot?t=1402488517784><br>

台9線-壽豐鄉台9及進鯉魚潭叉路北,往北方向(212K+100<br>
<img src=http://210.242.136.67/T9-212K+100/snapshot?t=1402488589621><br>

台9線-壽豐鄉和榮路橋北中華路2段32巷南，中央分隔島,用原基礎<br>
<img src=http://210.242.136.67/T9-219K+800/snapshot?t=1402488686999><br>

台9線-壽豐鄉中央分隔島,附掛號誌桿,往南方向(224K+900)<br>
<img src=http://210.242.136.67/T9-224K+900/snapshot?t=1402488744001><br>

台11丙線-壽豐鄉台11丙18K+200與台9線228k+600路口以東200公尺,距台9線200公尺向西方向<br>
<img src=http://210.242.136.67/T11C-18K+200/snapshot?t=1402488787926><br>

台9線- 鳳林鎮逆樁路側(233K+320)<br>
<img src=http://210.242.136.67/T9-233K+320/snapshot?t=1402118256867><br>

</body>
</html>
作者: 2home    時間: 2014-6-12 11:56

今天前往2home的路線,從監視畫面看,天氣不錯,沒有塞車沒有下雨,騎機車開車都不錯!

剛才發現 蘇花公路是全省最密集有監視器的地方,可能是在監控落石及坍方的問題.

http://www.2home.com.tw/bbs/dd.html
作者: rdmigo    時間: 2014-6-12 12:03

2home 發表於 2014-6-12 11:56
今天前往2home的路線,從監視畫面看,天氣不錯,沒有塞車沒有下雨,騎機車開車都不錯!

剛才發現 蘇花公路 ...


嘿ㄚ....穩熱鼠人...已經是曬魚乾ㄟ等級了...


對ㄛ...在後台設定及時更新ㄛ...
好像比語法強....
作者: 2home    時間: 2014-6-12 12:13

rdmigo 發表於 2014-6-12 12:03
嘿ㄚ....穩熱鼠人...已經是曬魚乾ㄟ等級了...


即時更新太快,若又多人同時使用,可能會癱瘓即時交通路況的網站哦! 我還是用手動就好,有需要了解再reload 就好了,這樣也有個好處,可以慢慢看每個監視畫面.

如果是使用手機觀看,不要做框架比較好,若用電腦看可以做框架將鑑視畫面集中 ,若有需要再設10秒 自動 reload 一次,所以可以考慮製作 手機網頁,和電腦網頁 兩種,供不同機型使用.
作者: snoopyhome    時間: 2014-6-12 13:28

rdmigo 發表於 2014-6-12 11:36
如果我這樣玩...不知道會不會被揍....

<meta>要和<meta>放在一起啦, 雖然會動, 但是, "不美觀"...
作者: rdmigo    時間: 2014-6-12 13:33

snoopyhome 發表於 2014-6-12 13:28
要和放在一起啦, 雖然會動, 但是, "不美觀"...


會更新就好啦....
主要也是看現況而已..
有時差不是重點...
不過突然流量大滿載..
也不是很好吧!
作者: snoopyhome    時間: 2014-6-12 13:42

2home 發表於 2014-6-12 12:13
即時更新太快,若又多人同時使用,可能會癱瘓即時交通路況的網站哦! 我還是用手動就好,有需要了解再reloa ...

  嗯, 站大說的沒錯, 手機和桌機的畫面不同會比較容易看.

  另外提2種作法不知可不可行:

  作法1: 把一個html嵌多個iframe, 用table包起來, 畫面小一點, 每個都設10秒左右refresh, 就可以整條路線"一目瞭然". 因為我們只是要看大略狀況, 畫面不用大. 或者, 帶台Pad.

  作法2: 把路線分段, 存成不同的html檔, 人在某一段時, 就連結某個對應的html, 不過, 這樣做, 感覺很麻煩, 如果能寫個小程式加上GPS來load對應的html, 才會比較好用.

  照這個網站的流暢度來看, 應該花了不少錢在硬體上, 所以, 放心的給它refresh啦! 系統不怕人太多, 只怕人不用.
作者: robert780    時間: 2014-6-12 13:50

手機有一個APP  "ITSGood RoadCam"  也可以看

舉凡國道,省道,快速道路通通有

也可以記錄觀看攝影機的位置

作者: snoopyhome    時間: 2014-6-12 14:56

本帖最後由 snoopyhome 於 2014-6-12 15:05 編輯

  我試了一下, 它原來的網頁是0.1秒就refresh一次, 如果各位有興趣, 可以試試我的笨方法, 把您想要的影像做成html.

  1. 開啟chrome瀏覽器, 連上該系統, 選擇好區域和您想要的監視器. 對著影像按右鍵, 選"檢視元素".


  2. 在畫面下半部, 會有該影像的html碼, 按Ctrl + C, 貼到文字編輯器.
按這裡顯示圖片

  3. 取出src=""中的網址, 按Ctrl + C.
按這裡顯示圖片

  4. 以文字編輯器開啟dd.html, 貼到<img src=""中.
按這裡顯示圖片

  5. 再取出onload="refreshMJpeg後方的網址, 按Ctrl + C.
按這裡顯示圖片

  6. 把網址貼到dd.html的onload="refreshMJpeg(this, '')第二個參數的單引號中.
按這裡顯示圖片

以下是我斗膽借站大的dd.html來測試的範本, 其中, 要記得加入jquery的reference喔.
按這裡顯示圖片

目前, Jquery有1.X和2.X, 請記得把上圖的src=""路徑和檔名改成您的路徑和檔名喔.
JQuery下載: http://jquery.com/download/

如果0.1秒太短, 可以把
                        obj.src = url + "?t=" + new Date().getTime();
                    }, 100);
的100改成您要的秒數. javascript的1000是一秒.

dd.html原始內容(我已到原網站下載它的refreshMJpeg 函數, 小小改一下):
<html>
    <head>
        <script src="C:UsersyoungDesktopjquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function refreshMJpeg(obj, url) {
                if ($("IMG").length > 0) {
                    cctvTimer = setTimeout(function () {
                        lastCctvUrl = obj.src;
                        obj.src = url + "?t=" + new Date().getTime();
                    }, 100);
                }
            }
        </script>
    </head>
    <body>
        <table>
        <tr>
            <td>
                台3線-大溪鎮員林路(39K+450)<br>
                <img src="http://210.242.136.66/T3-39K+450/snapshot?t=1402554022653" width="320px" height="240px" onload="refreshMJpeg(this, 'http://210.242.136.66/T3-39K+450/snapshot')">
            </td>
            <td>
                縣道110線-三轄區復興路(110線)(25K+950)<br>
                <img src="http://210.242.136.66/C110-25K+950/snapshot?t=1402554788531" width="320px" height="240px" onload="refreshMJpeg(this, 'http://210.242.136.66/C110-25K+950/snapshot')"><br>
            </td>
            <td>
                台9線-新店區北宜路二段(11K+300)<br>
                <img src="http://210.242.136.66/T9-11K+300/snapshot?t=1402554193363" width="320px" height="240px" onload="refreshMJpeg(this, 'http://210.242.136.66/T9-11K+300/snapshot')"><br>
            </td>
        </tr>
        </table>
    </body>
</html>




歡迎光臨 2home 打造桃花源 (http://2home.com.tw/bbs/) Powered by Discuz! X2