問題
我有一個網址,一直重新整理可以取得最新監視器畫面,我想把它放入 Node-RED Dashboard 中,必須即時更新。
ChatGPT 回答
您可以使用 Node-RED 中的 ui_template 節點將圖像放入 Dashboard 中,並使用 JavaScript 編寫自定義程式碼來每秒更新圖像。
以下是實現此操作的步驟:
- 在 Node-RED 中拖放 ui_template 節點,將其與 http request 節點相連接。您可以使用 http request 節點來獲取最新的監視器畫面。
- 將 ui_template 節點的 Type 設置為 angular,Size設置為 4x4(您可以根據需要調整大小)。
- 將下面的代碼貼上到 Template 文本框中:
<div>
<img id="cam" src="" style="max-width:100%; max-height:100%;" />
</div>
<script>
(function(scope) {
var img = document.getElementById('cam');
setInterval(function() {
img.src = "/cam?url=" + new Date().getTime();
}, 1000);
})(scope);
</script>
- 修改代碼中的 /cam 為您的圖像 URL。如果您的圖像 URL 需要其他查詢參數,請將它們添加到此處的查詢字串中。
- 單擊 Done 按鈕保存更改,然後部署您的流程。
- 現在,在 Dashboard 中將顯示最新的監視器畫面,每秒更新一次。
值得注意的是,由於每秒請求一次圖像,這樣做可能會對服務器產生負擔。如果您的服務器無法處理這樣的負載,建議您減少更新頻率。