客製化省道即時交通路況 diy ,讓自己變千里眼

snoopyhome

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

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

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

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

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

  照這個網站的流暢度來看, 應該花了不少錢在硬體上, 所以, 放心的給它refresh啦! 系統不怕人太多, 只怕人不用.

robert780

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

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

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

snoopyhome

  我試了一下, 它原來的網頁是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>