Visualisierung

Webvisualisierung für die ioBroker-Plattform.

Die Entwicklung dieser Version wurde eingestellt. Bitte migrieren Sie Ihre Projekte auf vis-2.

Lizenzanforderungen

Der Adapter ist für alle Verwendungszwecke kostenlos.

Installation & Dokumentation

Online-Demos

Bindungen von Objekten

Normalerweise verfügen die meisten Widgets über ein ObjectID-Attribut, das mit einem Objekt-ID-Wert verknüpft werden kann. Es gibt jedoch noch eine weitere Möglichkeit, ein beliebiges Widget-Attribut an eine ObjectID zu binden.

Schreiben Sie einfach in das Attribut.{object.id} und es wird (nicht im Bearbeitungsmodus) an den Wert dieses Objekts gebunden. Bei Verwendung des speziellen Formats können Sie sogar einfache Operationen damit durchführen, z. B. Multiplikation oder Formatierung. Das Muster hat folgendes Format:

{objectID;operation1;operation2;...}

Folgende Operationen werden unterstützt:

• \* Multiplikation. Das Argument muss in Klammern stehen, z. B. "*(4)". In diesem Beispiel multiplizieren wir den Wert mit 4.
• \+ - addieren. Das Argument muss in Klammern stehen, z. B. "+(4,5)". In diesem Beispiel addieren wir den Wert 4,5.
• \- - Subtrahieren. Das Argument muss in Klammern stehen, z. B. "-(-674,5)". In diesem Beispiel subtrahieren wir vom Wert -674,5.
• / - Division. Das Argument muss in Klammern stehen, z. B. "/(0,5)". In diesem Beispiel teilen wir den Wert durch 0,5.
• % Modulo. Das Argument muss in eckigen Klammern stehen, z. B. "%(5)". In diesem Beispiel berechnen wir den Modulo von 5.
• round - Runden Sie den Wert.
• round(N) - Runde den Wert auf N Nachkommastellen, z. B. 34,678;round(1) => 34,7
• hex - Wert in Hexadezimalwert umwandeln. Alle Buchstaben sind kleingeschrieben.
• hex2 - Wert in Hexadezimalwert umwandeln. Alle Buchstaben werden kleingeschrieben. Ist der Wert kleiner als 16, wird eine führende Null hinzugefügt.
• HEX - Dasselbe wie Hexadezimal, nur in Großbuchstaben.
• HEX2 - das Gleiche wie hex2, aber in Großbuchstaben.
• date - Datum gemäß dem angegebenen Format formatieren. Das Format ist dasselbe wie in iobroker.javascript.
• min(N) - Wenn der Wert kleiner als N ist, nimm N, sonst den Wert
• max(M) - Wenn der Wert größer als M ist, nimm M, ansonsten den Wert
• sqrt - Quadratwurzel
• pow(n) - Potenz von N.
• pow - Zweierpotenz.
• floor - Math.floor
• ceil - Math.ceil
• json - Operation zum Abrufen von JSON- oder Objekteigenschaften. Z. B.{id;json(common.name.en)}
• random(R) - Math.random() * R, oder einfach Math.random(), wenn kein Argument angegeben wird
• formatValue(decimals) - Wert gemäß Systemeinstellungen formatieren und Dezimalstellen verwenden
• date(format) - Wert als Datum formatieren. Das Format sieht folgendermaßen aus:YYYY-MM-DD hh:mm:ss.sss
• momentDate(format, useTodayOrYesterday) - Wert mithilfe von Moment.js als Datum formatieren. Zulässige Formate müssen gemäß der Moment.js-Bibliothek eingegeben werden .useTodayOrYesterday=true das momentjs-Formatddd /dddd werden mit heute / gestern überschrieben
• array(element1,element2[,element3,element4]) - Gibt das Element mit dem angegebenen Index zurück. Beispiel:{id.ack;array(ack is false,ack is true)}

Sie können dieses Muster in jedem beliebigen Text verwenden, zum Beispiel

My calculations with {objectID1;operation1;operation2;...} are {objectID2;operation3;operation4;...}

oder Farbberechnungen:

#{objectRed;/(100);*(255);HEX2}{objectGreen;HEX2}{objectBlue;HEX2}

Um den Zeitstempel eines Objekts anzuzeigen, schreiben Sie.ts oder.lc (für die letzte Änderung) am Ende der Objekt-ID, z. B.:

Last change: {objectRed.lc;date(hh:mm)}

Es gibt noch eine weitere Möglichkeit, das Muster zu schreiben:

Hypotenuse of {height} and {width} = {h:height;w:width;Math.max(20, Math.sqrt(h*h + w*w))}

{h:height;w:width;h*w} wird als Funktion interpretiert:

value = (function () {
    var h = "10";
    var w = "20";
    return Math.max(20, Math.sqrt(h*h + w*w));
})();

Sie können beliebige JavaScript-Funktionen verwenden. Argumente müssen mit ':' definiert werden, andernfalls werden sie als Formel interpretiert.

Achten Sie auf die Datentypen. Alle sind als Zeichenketten definiert. Um sicherzustellen, dass der Wert als Zahl behandelt wird, verwenden Sie die Funktion `parseFloat`.

Hypotenuse of {height} and {width} = {h:height;w:width;Math.max(20, Math.sqrt(Math.pow(parseFloat(h), 2) + Math.pow(parseFloat(w), 2)))}

Spezielle Bindungen

Es gibt eine Reihe unterschiedlicher interner Bindungen, um zusätzliche Informationen in Ansichten bereitzustellen:

• username - zeigt den angemeldeten Benutzer an
• view - Name der aktuellen Ansicht
• wname - Widget-Name
• widget - ist ein Objekt mit allen Daten des Widgets. Kann nur im JS-Teil verwendet werden, wie z. B.{a:a;widget.data.name}
• wid - Name des eigentlichen Widgets
• language - kann seinde ,en oderru Die
• instance - Browserinstanz
• login - ob eine Anmeldung erforderlich ist oder nicht (z. B. zum Ein-/Ausblenden des Abmeldebuttons)
• local_* - wenn der Staatsname mit folgendem beginntlocal_ Es wird nicht an ioBroker gemeldet, aktualisiert aber alle Widgets, die von diesem Zustand abhängen. (Lokale Variable der aktuellen Browsersitzung)

Hinweis: Um ":" in Berechnungen (z. B. in einer Formel) zu verwenden, verwenden Sie stattdessen "::" .

Denken Sie daran , dass Stildefinitionen als Bindungen interpretiert werden, also verwenden Sie{{style: value}} oder einfach

{
	style: value
}

dafür.

Filter

Um die Gesamtzahl der Widgets in einer einzigen Ansicht darzustellen, können Sie Filter verwenden, um die Anzahl der gleichzeitig in der Ansicht angezeigten Widgets zu reduzieren.

Jedes Widget hat ein Feldfilter Wenn Sie es auf einen bestimmten Wert setzen, z.B.light Sie können also auch andere Widgets verwenden.(bars - filters, filter - dropdown) um zu steuern, welcher Filter tatsächlich aktiv ist.

Steuerungsschnittstelle

Vis erstellt 3 Variablen:

• control.instance - Hier sollte die Browserinstanz angegeben werden oderFFFFFFFF wenn jeder Browser kontrolliert werden muss.
• control.data - Parameter für den Befehl. Siehe die spezifische Befehlsbeschreibung.
• control.command - Befehlsname. Durch Schreiben dieser Variable wird der Befehl ausgelöst. Das bedeutet, dass vor der Ausführung des Befehls die Variablen „Instanz“ und „Daten“ mit Daten vorbereitet werden müssen.

Befehle:

• alert - Zeigt ein Warnfenster in der Visualisierung an. "control.data" hat das Format "message;title;jquery-icon". Titel und jquery-icon sind optional. Die Namen der Icons finden Sie hier . Um das Icon "ui-icon-info" anzuzeigen, schreiben SieMessage;;info Die

• changeView - Wechseln Sie zur gewünschten Ansicht. "control.data" muss den Namen der Ansicht enthalten. Sie können auch den Projektnamen als "project/view" angeben. Das Standardprojekt ist "main".

• refresh - die Ansicht neu laden, beispielsweise nachdem ein Projekt geändert wurde, sodass sie in allen Browsern neu geladen wird.

• reload - Dasselbe wie beim Aktualisieren.

• dialog - Dialogfenster anzeigen. Der Dialog muss in der Ansicht vorhanden sein. Eine der folgenden Optionen:

  • 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 Die

  control.data muss die ID des Dialog-Widgets haben, z. B.w00056 Die

• dialogClose

• popup - öffnet ein neues Browserfenster. Der Link muss angegeben werden incontrol.data z. B. http://google.com

• playSound - Audiodatei abspielen. Der Link zur Datei ist angegeben incontrol.data z. B. http://www.modular-planet.de/fx/marsians/Marsiansrev.mp3 . Sie können Ihre eigene Datei in vis hochladen und sie beispielsweise abspielen lassen./vis.0/main/img/myFile.mp3 Die

Wenn der Benutzer die Ansicht ändert oder beim Start, werden die Variablen von der Ansicht mit

• control.instance : Browserinstanz undack=true
• control.data : Projekt- und Ansichtsname im Formularproject/view z.B.main/view (Undack=true )
• control.command :changedView Undack=true

Sie können die JSON-Zeichenfolge oder das Objekt in Folgendes schreiben:control.command als{instance: 'AABBCCDD', command: 'cmd', data: 'ddd'} In diesem Fall werden die Instanz und die Daten aus einem JSON-Objekt entnommen.

Beispiel für einen JavaScript-Adapter:

setState('vis.0.control.command', {"instance": "*", "command": "refresh", "data": ""});

Standardansicht

Sie können für jede Ansicht die gewünschte Auflösung festlegen (Menü => Werkzeuge => Auflösung). Dies ist lediglich der visuelle Rahmen im Bearbeitungsmodus, der Ihnen die Bildschirmgröße auf einem bestimmten Gerät anzeigt. Im Echtzeitmodus ist er nicht sichtbar, und alle Widgets außerhalb des Rahmens sind sichtbar.

Zusätzlich können Sie festlegen, ob diese Ansicht für diese Auflösung als Standard verwendet werden soll.

Also jedes Mal, wennindex.html (ohne#viewName Wird die entsprechende Option aufgerufen, wird die für diese Bildschirmauflösung am besten geeignete Ansicht geöffnet. Ist nur eine Ansicht als „Standard“ gekennzeichnet, wird diese unabhängig von Bildschirmauflösung und -ausrichtung geöffnet.

Sie können beispielsweise zwei Ansichten erstellen, „Querformat-Mobil“ und „Hochformat-Mobil“, und zwischen diesen beiden Ansichten wird automatisch umgeschaltet, wenn Sie die Ausrichtung oder die Bildschirmgröße ändern.

Es gibt ein Hilfs-Widget namens „basic - Screen Resolution“, das die aktuelle Bildschirmauflösung und die am besten geeignete Standardansicht für diese Auflösung anzeigt.

Einstellungen

Neu laden, wenn die Wartezeit länger als

Es gibt eine Regel, nach der die gesamte VIS-Seite nach einer gewissen Zeit der Verbindungsunterbrechung neu geladen wird, um das Projekt zu synchronisieren. Sie können dies im Menü „Einstellungen…“ konfigurieren. Wenn Sie ein Intervall auf „Nie“ setzen, wird die Seite nie neu geladen.

Wiederverbindungsintervall

Legen Sie das Intervall zwischen den Verbindungsversuchen bei Verbindungsabbruch fest. Bei einer Einstellung von 2 Sekunden wird alle 2 Sekunden versucht, die Verbindung wiederherzustellen.

Dunkler Wiederverbindungsbildschirm

Manchmal (nachts) ist ein dunkler Ladebildschirm erforderlich. Mit dieser Option können Sie dies einstellen.

Beachten Sie, dass diese Einstellungen nur für die Wiederverbindung und nicht für die erste Verbindung gelten.

Changelog

WORK IN PROGRESS

• (bluefox) Removed usage of storage and uses localStorage instead.

1.5.5 (2024-04-12)

• (bluefox) Corrected small warning

1.5.4 (2023-11-29)

• (agav99) added the new binding operation for getting property of JSON or object
• (agav99) Checked the initialization of the local_ variables
• (agav99) fixed subscribeOidAtRuntime
• (stephanritscher) Added dynamic web manifest
• (agav99) Optimization for basic-view in widget8
• (oweitman) Changed binding regex to accept umlauts
• (mcm1957) Corrected first installation of vis

1.5.1 (2023-11-06)

• (bluefox) Changed License: it is now MIT, and the license check was removed

1.4.16 (2023-01-27)

• (bluefox) Corrected connection with "only port" URLs

1.4.15 (2022-04-10)

• (bluefox) Better check of the offline license

1.4.14 (2022-03-31)

• (bluefox) Corrected GUI bug

1.4.13 (2022-03-22)

• (pascal-hari) The group attributes will be replaced recursively

1.4.12 (2022-02-12)

• (bluefox) Fixed bug with the export of specific widgets

1.4.11 (2022-02-12)

• (bluefox) Removed ES6 commands to be supported by older browsers
• (oweitman) Fixed problem with update of grouped widgets
• (stephanritscher) Added web manifest to be able to handle vis as the web app

1.4.8 (2022-01-29)

• (bluefox) Added support for js-controller 4.x

1.4.7 (2021-12-28)

• (mswiege) Fixed subscribeOidAtRuntime if called with invalid IDs
• (bluefox) Added support of license manager

1.4.6 (2021-11-20)

• (bluefox) Added the license check even without internet

1.4.5 (2021-10-08)

• (jens-maus) Added frame-src spec to content-security-policy header fixing frame related content blocking issues (e.g. using KioskPro iOS app).
• (bluefox) Showed the extended error messages by license check
• (Scrounger) Patch visibility oid binding

1.4.4 (2021-08-31)

• (jobe451) Allowed to have ":" in the binding object IDs

1.4.3 (2021-07-11)

• (bluefox) Added possibility to check license offline (only special once)

1.4.0 (2021-07-01)

• (bluefox) Changed path for check of certificates
• (thost96) fixes for issues found by adapter-checker

1.3.10 (2021-05-25)

• (bluefox) Fixed the support of admin5

1.3.9 (2021-04-29)

• (agav99) Added support of local browser variables
• (Scrounger) Bug fix for null & NaN values in width and height
• (bluefox) Added support for admin5

1.3.8 (2021-03-03)

• (bluefox) fix play sounds on iOS Safari an android
• (Scrounger) visEditInspect: format dimension added
• (foxriver76) Replace travis and appveyor by the GitHub actions
• (Excodibur) Allow resources to be loaded as blob
• (Excodibur ) Allow resources to be loaded as blob

1.3.7 (2021-01-20)

• (Scrounger) Bug Fixed - Binding in JSON string

1.3.6 (2020-12-13)

• (twonky4) Corrected: old browser issue
• (rbaranga) Corrected: play sounds on iOS Safari
• (Scrounger) Added the optional arguments to support Material Design Widgets

1.3.4 (2020-10-04)

• (foxriver76) Corrected the error on older devices

1.3.3 (2020-09-21)

• (bluefox) Return de-bounce settings back
• (bluefox) Corrected error with {username} binding
• (bluefox) Fixed "show last change" option

1.3.1 (2020-09-18)

• (bluefox) Added the auto-focus option to the input widgets

1.3.0 (2020-09-17)

• (foxriver76) on pending getStates, try again instead of drop
• (foxriver76) fixed the file manager typos
• (Scrounger) Added momentDate for the bindings

1.2.12 (2020-09-08)

• (foxriver76) only parse arrays and json objects, not booleans, normal strings etc

1.2.11 (2020-08-25)

• (bluefox) The error message about the non-found chart view was fixed.

1.2.10 (2020-08-23)

• (gsicilia82/fceller) JSON strings will be parsed in VIS bindings

1.2.9 (2020-08-22)

• (bluefox) Charts are now supported

1.2.6 (2020-03-22)

• (bluefox) Added the better error message if license could not be parsed

1.2.4 (2020-02-11)

• (bluefox) Table widget was extended with the selected object ID.

1.2.3 (2019-12-14)

• (bluefox) Small changes in license handling were made

1.2.2 (2019-10-27)

• (bluefox) Preparations for js-controller 2.0. Check undefined adn null.

1.2.1 (2019-09-10)

• (bluefox) fixed upload of files

1.2.0 (2019-05-07)

• (bluefox) add translations

1.1.11 (2019-02-07)

• (bluefox) improve Bool HTML

1.1.10 (2019-01-30)

• Add Chinese support

1.1.8 (2018-10-29)

• (bluefox) File dialog was corrected

1.1.7 (2018-07-24)

• (bluefox) view8 corrected

1.1.6 (2018-07-18)

• (bluefox) support of new variables (see Special bindings )
• (bluefox) fix error if fast view changes
• (bluefox) fix "jqui - ctrl - IconState / val - Icon Bool"

1.1.5 (2018-06-10)

• (bluefox) show more information if widget cannot be rendered
• (bluefox) fix saving of widgets if they have bindings
• (bluefox) show error stack
• (bluefox) fix binding
• (Apollon77) fix testing
• (bluefox) fix for iobroker.pro and external socket.io settings
• (bluefox) A user variable was added into bindings.
• (bluefox) Fixed widget tabs

1.1.4 (2018-04-23)

• (bluefox) fix bool SVG

1.1.3 (2018-04-12)

• (bluefox) ignore click by scrolling on touch devices
• (bluefox) remove wrong state vis.0.command
• (bluefox) fix error with jPlot
• (bluefox) better widget behaviour in edit Mode (basic, jqui)
• Fix config dialog

1.1.2 (2018-02-02)

• (bluefox) Fixing the saving of project
• (bluefox) Fixing the background selector
• (bluefox) Fixing the null pointer problem
• (bluefox) Fixing the selection helper
• Update translations

1.1.1 (2018-01-07)

• (bluefox) The problem with view change on the touch devices fixed

1.0.5 (2017-11-19)

• (bluefox) show number of data points in every project

1.0.4 (2017-10-22)

• (bluefox) Add autocomplete for view CSS options
• (bluefox) change edit of view CSS background options

1.0.3 (2017-10-20)

• (bluefox) Fix parse of invalid bindings
• (bluefox) add moment.js

1.0.0 release candidate (2017-10-13)

• (bluefox) fix iframe and image updates
• (bluefox) fix fonts

0.15.7 (2017-10-01)

• (bluefox) allow update of images without additional query (but it works only in some very specific cases)
• (bluefox) zoom of iframes

0.15.5 (2017-07-24)

• (bluefox) Fix widgets upload

0.15.4 (2017-07-19)

• (bluefox) Add swipe

0.15.3 (2017-07-12)

• (bluefox) Add full screen widget
• (bluefox) Fix timestamp widget

0.15.2 (2017-07-07)

• (bluefox) Fix binding if it has "-" in the OID

0.15.1 (2017-06-30)

• (bluefox) Fix error with context menu
• (bluefox) Allow adding of class to view

0.15.0 (2017-05-25)

• (bluefox) fix copy of grouped widgets
• (bluefox) fix subscribe if empty states

0.14.7 (2017-05-19)

• (bluefox) add templates

0.14.6 (2017-05-16)

• (bluefox) Fix error by groups selection
• (apollon77) fix jqui-dialog for auto-open

0.14.3 (2017-05-11)

• (bluefox) fix export/import of grouped widgets

0.14.2 (2017-04-29)

• (bluefox) Fix install error

0.14.1 (2017-04-27)

• (bluefox) move beta to main
• (bluefox) fix choose filter
• (bluefox) fix error if some views do not exist
• (bluefox) fix binding problem, e.g. "a:-45?0" was detected as variable too.
• (bluefox) fix some font sizes
• (bluefox) fix undo
• (bluefox) fix themes change
• (bluefox) optimize load of pages
• (bluefox) check license
• (bluefox) fix basic views 8
• (bluefox) fix time picker if opened in dialog

0.14.0 (2017-04-10)

• (bluefox) add mandatory license input

0.12.7 (2017-02-09)

• (bluefox) prepare beta

0.12.6 (2017-01-29)

• (pmant) fix view copy
• (pmant) Improvements to context menu
• (pmant) usability improvements for both view dropdowns
• (bluefox) small fix of dragging

0.12.6 (2017-01-29)

• (pmant) add dropdown menu to views bar
• (pmant) sort widgets widget selector by name
• (bluefox) fix groupAttr in signals and visibility

0.12.2 (2016-12-04)

• (bluefox) fix errors with grouping

0.12.1 (2016-11-30)

• (bluefox) fix errors with containers

0.12.0 (2016-11-24)

• (bluefox) subscribe mode for faster state loading
• (bluefox) add grouping

0.10.15 (2016-11-06)

• (bluefox) remove weather-adapter.html
• (bluefox) clean config.js
• (bluefox) remove old widgets
• (bluefox) improve authentication in app
• (bluefox) allow creation of instance from helper widget

0.10.14 (2016-10-09)

• (bluefox) fix rendering of widgets
• (bluefox) working on relative positions.
• (bluefox) destroy widgets before views deletion

0.10.13 (2016-09-23)

• (bluefox) fixed errors for iPad 1
• (bluefox) start working on relative positions

0.10.12 (2016-09-16)

• (bluefox) group specific visibility of widgets and views

0.10.11 (2016-09-15)

• (bluefox) fix for iOS 10
• (bluefox) allow disabling of groups for performance

0.10.10 (2016-09-14)

• (bluefox) add text2speech widget
• (bluefox) try to fix problem with iOS 10

0.10.9 (2016-09-04)

• (bluefox) support of web-sockets force
• (bluefox) destroy unused views after 30 seconds
• (bluefox) do not show middle leading lines if top and bottom are shown
• (bluefox) let timestamp and last-change to show time as interval

0.10.7 (2016-07-09)

• (bluefox) add settings to reload vis
• (bluefox) add dark reload screen
• (bluefox) fix reload interval
• (bluefox) export/import
• (bluefox) add global script
• (bluefox) add 'not exist'/'not consist'/'exist' to signal and visibility
• (bluefox) fix OIDs in editor

0.10.5 (2016-06-15)

• (bluefox) fix select ID dialog
• (bluefox) add align help lines
• (bluefox) never store data in non-edit mode

0.10.4 (2016-06-14)

• (bluefox) fix drag and resize
• (Patrick) fix QuoJS
• (bluefox) support of milliseconds in formatDate
• (bluefox) support of getHistory
• (bluefox) support of show history instances
• (bluefox) grid
• (bluefox) add previews

0.10.3 (2016-05-30)

• (bluefox) update canJS
• (pmant) fixes bugs with dialogs on touchscreens
• (bluefox) speedUP show attributes at 300ms
• (bluefox) fix click on widget if signal is active

0.10.2 (2016-05-24)

• (bluefox) fix widgets with timestamps

0.10.1 (2016-05-23)

• (bluefox) change version

0.10.0 (2016-05-23)

• (bluefox) translates
• (bluefox) fix 'no widgets selected'
• (bluefox) change widget icons
• (bluefox) add signals
• (bluefox) add app.css for cordova
• (bluefox) change icons preview
• (bluefox) show properties of widget as icon
• (bluefox) fix error with external commands
• (bluefox) add types icon to preview
• (bluefox) support edit on iPad1
• (bluefox) change security settings

License

The MIT License (MIT)

Copyright (c) 2013-2024 Denis Haev dogafox@gmail.com, Copyright (c) 2013 hobbyquaker

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.