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/
短内容：被许可人可以复制、分发、展示和表演该作品，并根据该作品制作衍生作品，前提是他们按照这些规定的方式向作者或许可人授予版权。被许可人只能出于非商业目的复制、分发、展示和表演该作品以及基于该作品制作衍生作品。 （免费用于非商业用途）。
