ioBroker.vis 2
v2.10.7
ioBroker 平台的 WEB 視覺化。
要在ioBroker中使用此適配器，您需要接受適配器的源代碼許可證。此適配器的源代碼可在 CC BY-NC 許可下取得。
此外，您需要許可證才能使用該適配器。以下許可證版本可在 https://iobroker.net/www/pricing 上取得
線上示範
通常，大多數小部件都具有 ObjectID 屬性，並且該屬性可以與物件 ID 的某個值綁定。但是還有另一個選擇如何將小部件的任何屬性綁定到某個 ObjectID。
只需寫入屬性{object.id}例如{hm-rpc.0.OEQ1880105.4.ACTUAL_TEMPERATURE}它將綁定到該物件的值。如果您使用特殊格式，甚至可以用它進行一些簡單的操作，例如乘法或格式化。
例如，計算三角形的斜邊：
{h:javascript.0.myCustom.height;w:javascript.0.myCustom.width;Math.max(20, Math.sqrt(h*h + w*w))}將被解釋為函數：
value = await (async function () {
var h = (await getState('javascript.0.myCustom.height')).val;
var w = (await getState('javascript.0.myCustom.width')).val;
return Math.max(20, Math.sqrt(h * h + w * w));
})();
或者
{h:javascript.0.myCustom.height;w:javascript.0.myCustom.width;h*w}將簡單地將高度乘以寬度。
您可以使用任何JavaScript（瀏覽器）功能。參數必須用':'定義，如果沒有，它將被解釋為公式。
注意類型。它們全部被定義為字串。可以肯定的是，使用 parseFloat 函數該值將被視為數字。
所以我們的斜邊計算將是：
{h:javascript.0.myCustom.height;w:javascript.0.myCustom.width;Math.max(20, Math.sqrt(Math.pow(parseFloat(h), 2) + Math.pow(parseFloat(w), 2)))}
Patten 有以下格式：
{objectID;operation1;operation2;...}
支援以下操作：
* - 乘法。參數必須放在括號中，例如“*(4)”。在此範例中，我們將該值乘以 4。+ - 新增。參數必須放在括號中，例如“+(4.5)”。在此範例中，我們新增值 4.5。- - 減。參數必須位於括號中，例如“-(-674.5)”。在此範例中，我們從值 -674.5 中減去。/ - 除法。參數必須放在括號中，例如“/(0.5)”。在此範例中，我們將該值除以 0.5。% - 模數。參數必須放在括號中，例如“%(5)”。在此範例中，我們取 5 的模。round - 對數值進行四捨五入。round(N) - 將點後的值四捨五入 N 位，例如 34.678;round(1) => 34.7hex - 將值轉換為十六進位值。所有信件均為小寫。hex2 - 將值轉換為十六進位值。所有信件均為小寫。如果值小於 16，則會新增前導零。HEX - 與十六進制相同，但大寫。HEX2 - 與 hex2 相同，但大寫。date - 根據給定的格式格式化日期。格式與 iobroker.javascript 中的相同min(N) - 若值小於 N，則取 N，否則取值max(M) - 若值大於 M，則取 M，否則取值sqrt - 平方根pow(n) - N 的冪。pow - 2 的冪。floor - Math.floorceil - Math.ceiljson - 用於取得 json 或物件屬性的操作。例如， {id;json(common.name.en)}random(R) - Math.random() * R，或如果沒有參數則只是 Math.random()formatValue(decimals) - 根據系統設定格式化值並使用小數date(format) - 將值格式化為日期。格式如下：“YYYY-MM-DD hh:mm:ss.sss”momentDate(format, useTodayOrYesterday) - 使用 Moment.js 將值格式化為日期。必須根據 moment.js 庫輸入核准的格式。使用useTodayOrYesterday=true時， moment.js格式ddd / dddd會被今天 / 昨天覆蓋array(element1,element2[,element3,element4]) - 傳回索引的元素。例如： {id.ack;array(ack is false,ack is true)}您可以在任何文字中使用此模式，例如
My calculations with {objectID1;operation1;operation2;...} are {objectID2;operation3;operation4;...}
或顏色計算：
#{objectRed;/(100);*(255);HEX2}{objectGreen;HEX2}{objectBlue;HEX2}
若要顯示物件的時間戳，請在物件 ID 末尾寫入.ts或.lc （用於最後變更），例如：
Last change: {objectRed.lc;date(hh:mm)}
有許多不同的內部綁定可以在視圖中提供附加資訊：
username - 顯示登入用戶view - 實際視圖的名稱wname - 小部件名稱widget - 是一個包含 widget 所有資料的物件。只能在JS部分使用，如{a:a;widget.data.name}widgetOid - 使用小部件的 OID 在賦值部分分配小部件的值，例如{t:widgetOid.val;t}wid - 實際小部件的名稱language - 可以是de 、 en或ru 。instance - 瀏覽器實例login - 是否需要登入（例如，顯示/隱藏登出按鈕）local_* - 如果狀態名稱從local_開始，則不會回報給 ioBroker，但會更新所有取決於此狀態的小工具。 （目前瀏覽器會話的局部變數）注意：若要在計算中使用“:”（例如，在字串公式中），請改用“::”。
請記住，樣式定義將被解釋為綁定，因此請使用{{style: value}}或僅
{
style: value
}
為此。
若要在一個視圖上可視化所有小部件的數量，您可以使用篩選器來減少視圖上同時顯示的小部件的數量。
每個小部件都有一個字段filter 。如果您將其設為某個值，例如light ，那麼您可以使用其他小部件(bars - filters, filter - dropdown)來控制哪個過濾器實際上處於活動狀態。
Vis 創建了 3 個變數：
control.instance - 如果必須控制每個瀏覽器，則應在此處寫入瀏覽器實例或FFFFFFFF 。control.data - 指令參數。具體命令請參閱說明。control.command - 指令名稱。寫入此變數會觸發命令。這意味著在寫入命令之前，必須準備好「實例」和「資料」資料。命令：
alert - 在 vis-2 中顯示警報視窗。 「control.data」具有以下格式「message;title;jquery-icon」。標題和 jquery-icon 是可選的。圖標名稱可以在這裡找到。若要顯示圖示“ui-icon-info”，請寫入Message;;info 。
changeView - 切換到所需的視圖。 “control.data”必須具有視圖名稱。您也可以將專案名稱指定為project/view 。預設項目是main 。
refresh - 重新載入 vis-2，例如在專案變更為在所有瀏覽器上重新載入之後。
reload - 與刷新相同。
dialog - 顯示對話框視窗。對話方塊必須存在於視圖中。之一：
static - HTML - Dialog ，static - Icon - Dialog ，container - HTML - view in jqui Dialog ，container - ext cmd - view in jqui Dialog ，container - Icon - view in jqui Dialog ，container - Button - view in jqui Dialog 。 control.data必須具有對話框小部件的 id，例如w00056 。
dialogClose
popup - 開啟一個新的瀏覽器視窗。必須在control.data中指定鏈接，例如 http://google.com
playSound - 播放聲音檔。文件的連結在control.data中指定，例如，http://www.modular-planet.de/fx/marsians/Marsiansrev.mp3。您可以在 vis-2 中上傳自己的檔案並讓它播放，例如/vis-2.0/main/img/myFile.mp3 。重要的是，除非用戶在頁面上至少單擊一次，否則瀏覽器無法播放音訊。這是瀏覽器安全策略。在這裡您可以閱讀更多內容。
如果使用者變更視圖或在開始時，變數將由 vis-2 填入
control.instance ：瀏覽器實例且ack=truecontrol.data ：專案和檢視名稱，格式為project/view ，例如main/view （和ack=true ）control.command ： changedView和ack=true您可以將 JSON 字串或物件寫入control.command中，形式為{instance: 'AABBCCDD', command: 'cmd', data: 'ddd'} 。在這種情況下，實例和資料將從 JSON 物件中取得。
JavaScript 適配器範例：
setState ( 'vis-2.0.control.command' , { instance : '*' , command : 'refresh' , data : '' } ) ;如果將 JSON 編寫為字串，請確保它是可解析的，例如{"instance": "*", "command": "refresh", "data": ""} ，請注意" 。
您可以為每個視圖定義所需的解析度（選單=>工具=>解析度）。這只是編輯模式下的視覺邊框，用於向您顯示某些特定裝置上的螢幕尺寸。在即時模式下，它將不可見，並且邊框之外的所有小部件都將可見。
此外，您還可以定義是否必須將此視圖用作此解析度的預設視圖。
因此，每次呼叫index.html （不含#viewName ）時，都會開啟最適合此解析度的視圖。如果只有一個視圖具有“預設”標誌，則該視圖將獨立於螢幕解析度或方向上開啟。
例如，您可以建立兩個視圖“橫向-移動”和“縱向-移動”，當您變更方向或螢幕尺寸時，這兩個視圖將自動切換。
有一個幫助小部件“基本 - 螢幕解析度”，它顯示實際的螢幕解析度和最適合該解析度的預設視圖。
在write管理對話方塊中，您可以為每個ioBroker使用者配置read權限。
read標誌意味著該使用者可以在運行系統中存取該項目。 write標誌意味著該使用者可以在編輯模式下存取該項目。
當透過 ioBroker 管理適配器建立新使用者時，預設情況下它將擁有這兩種權限。
您也可以指定允許使用者在執行時間和編輯模式下存取哪些視圖。如果未在專案層級授予其中一項存取權限，則在檢視層級指定它們不會產生任何影響，因為整個專案將無法存取。
請注意，每當您嘗試存取目前使用者沒有權限的視圖時，使用者將看到項目選擇面板。
如果使用者沒有read權限，則該小部件將不會在執行時呈現。如果使用者沒有write權限，則小工具將不會以編輯模式呈現。
有一個規則，斷線一段時間後，整個VIS頁面將重新載入以同步專案。您可以在選單“設定...”中對其進行配置。如果將間隔設為“從不”，則頁面將永遠不會重新載入。
設定連線嘗試之間的時間間隔（如果已中斷連線）。如果設定 2 秒，它將每 2 秒嘗試建立一次連線。
有時（在晚上）需要有黑暗的加載畫面。透過這個選項，就可以設定了。
請注意，這些設定僅對重新連線有效，對首次連線無效。
CSS 中的 currentColor 關鍵字允許元素從其父元素繼承當前文字顏色。它在 SVG（可擴展向量圖形）中特別有用，因為它允許更動態的樣式並且更容易與 HTML 內容整合。
您可以使用 currentColor 關鍵字來取代 SVG 中接受顏色值的任何屬性的特定顏色值。下面是一個 SVG 中帶有圓圈的簡單範例：
< svg width = " 100 " height = " 100 " xmlns = " http://www.w3.org/2000/svg " >
< circle cx = " 50 " cy = " 50 " r = " 40 " fill = " currentColor " />
svg >在這種情況下，如果 SVG 採用父元素的顏色。例如，如果它用在選單中並且選單是紅色的，則圓圈將為紅色。
為了對 vis-2 編輯器本身進行調整、搜尋錯誤並進行偵錯，必須執行以下步驟。
透過 GitHub 使用者介面將 iobroker/iobroker.vis-2 儲存庫分叉到您自己的帳戶中
將儲存庫克隆到目錄中。從 GitHub 儲存庫複製 URL。該命令看起來像
git clone https://github.com//ioBroker.vis-2.git
使用 IDE 開啟下載的儲存庫
若要安裝和下載所有必要的庫，請在儲存庫根目錄的終端機中執行以下命令
npm run install-monorepo
npm run start
widgetOidasDateactiveWidgets視圖always render時的群組問題dialog和dialogClose關閉指令重新導向到小工具border-style下拉清單中重複的none版權所有 (c) 2021-2024 Denis Haev，https://github.com/GermanBluefox [email protected]，
知識分享署名-非商業性 (CC BY-NC)
http://creativecommons.org/licenses/by-nc/4.0/
短內容：被授權人可以複製、散佈、展示和表演該作品，並根據該作品製作衍生作品，前提是他們按照這些規定的方式向作者或授權人授予版權。被授權人只能出於非商業目的複製、分發、展示和表演該作品以及基於該作品製作衍生作品。 （免費用於非商業用途）。
