ioBroker.webui
!Number of Installations
!Stable version
webui for ioBroker
!image
Tutorial Videos (atm. in german only)
https://www.youtube.com/@jogibear9988
Description
This is a complete visualization system for ioBroker.
It includes features like:
- simple scripting language
- binding to ioBroker objects including converters & javascript expressions
- pasting of images from clipboard
- drag&drop of external images
- drag&drop of ioBroker objects to automaticy create bindings
- drag&drop of ioBroker objects to Properties to create Bindings to them
- relative signal paths to ioBroker objects in screens (the full path can be handed over from outside into the screen)
- split view editing of layout and html code
- global stylesheet support
- usage of npm packages containing webcomponents
- screens inside of screens
- use all icon packages from ioBroker
- use charts from ioBroker
- use combined signals object id's e.g. "webui.0.test3.{webui.0.test3.select}" -> this will use the value from webui.0.test3.select for the signal name
There is more information about specific topics in the wiki (the German section has a few more articles than the English one).
Installation
$3
- You need the Web Adapter installed. It works with the following settings: !image
Concepts
$3
The Designer uses Web Components, so the HTML you design is inside of a Shadowroot of a Webcomponent. This means, you cannot style
or inside of the Stylesheet. To style the outer Layout, use the ":host" selector.
This also means, you cannot use "on..." eventhandlers. Use the "@..." event assignment.
$3
You can create your own reusable CustomControls in WebUI, each of which can have its own Javascript, Properties and a template.
You can use Double-Bracket Syntax and Double-Curly-Bracket Syntax of the "BaseCustomWebcomponent" to create bindings from the Template to the properties defined in the Designer. Curylbrackets create two way Bindings.
If you use the Bindings Dialog, you can Bind to a Property with ??Propertyname and to IoBroker Object in the Property via ?Propertyname.
In Scripts you can also write to Signals defined in Custom Properties.
You can include Javascript in your CustomControl or Screen.
In addition, you can export a function init(instance) wich will be called when your CustomControl will be instantiated.
Finally, connected() and disconnected() functions can be defined to be called when ...
Sponsoring
If you want to help the development, sponsor this project at https://github.com/sponsors/jogibear9988
Developing
* Install Repository as Adapter in IOBroker
* Download the Repository to an extra "dev" directory, do not develop inside the ioBroker Node_modules directory.
* Do the following steps inside of the "dev" dirctory.
* Install dependencies
``
$ npm install
* Compile Typescript after doing changes (or press Ctrl + Shift + B in VsCode and select "tsc watch")
`
$ npm run tsc
* Adjust 'config.js' to match you ip-adress and port for your iobroker
(The config.js in the repository root will be replaced with the one in '/config' when running 'npm build')
`
window.iobrokerHost = '192.168.1.2';
window.iobrokerPort = '8082';
window.iobrokerSocketScriptUrl = 'http://' + window.iobrokerHost + ':' + window.iobrokerPort + '/lib/js/socket.io.js';
* Run the app in a local server
`
$ npm start
* Navigate Chrome to [localhost:8000]() to see the app.
$3
- Run
`
$ npm run reflection
to recreate reflection files for Scripting wich are used for the property grid
- Run
`
$ npm run build
to copy compiled files and node_modules to www folder so adapter is installable via github
- Run
`
$ npm run release
$ npm publish
to create correct release commit for iobroker, Be carefull this also pushes to git repo.
Be sure to edit "CHANGELOG.md" before, the text in "## WORK IN PROGRESS" in README.Md will be used for version info
Info about the Adapter.
The Adapter is based on the following Designer component:
https://github.com/node-projects/web-component-designer
You need to create a screen "start", this is the first one called when you open runtime.html,
but you can change this via query parameter:
runtime.html?screenName=screen2
Changelog
$3
- npm upgrades for firefox fixes
$3
- upgrade designer once more
$3
- fix package.lock
$3
- fix package.lock
$3
- update npm packages again (for fixes in box quads)
$3
- update npm packges (fixes box quads)
$3
- update npm packges
$3
- fix after connection changes
$3
- update npms
$3
- fix bug in bundled code
- use minified code for config
$3
- fix some boxQuads edge cases
$3
- clear cache on reload
$3
- object changed to all clients
$3
- forgett to parse bindings
$3
- fix reload custom controls
$3
- better nameing
- changed object notification
$3
- anaother small fix in signal handling
$3
- script command wrong name fix
$3
- designer and script updates
$3
- fix NaN check
$3
- Support css prop suggestions
$3
- Test one more release
$3
- Fix setting Props with simple scripts
$3
- SimpleScripts should be able to set Properties
$3
- NaN not NaN
$3
- update npms
$3
- remove nod 18 from github actions
$3
- update packages
- script support for properties
$3
- starting indirect binding fix
$3
- complexer indirect bindings
$3
- update packages
$3
- fix xml import
$3
- edit string in visu property grid
- bindings to properties did not work (in designer)
- html setting did not work sometimes
$3
- fix error in screenviewer
- update npms
- rename global styles
- allow styling of dialog
$3
- fix null error on props
$3
- escape xml
- switch to official selector package
$3
- fix bindings in custom controls
$3
- switch again to old module shims (error in new one)
$3
- first load of css bindings
- fix get box quads with slots
- fix es module shims
$3
- revert back es module shims, leads to errors
$3
- hopefully fix package upload by changed name
$3
- cleanup www dir
$3
- one more fix in gulpfile
$3
- fix gulp should work again
$3
- fix paste in events assignment
- iobroker Signal Selector
- binding to width and height in custom controls
$3
- local signals browser
- style completition fixes
- special bindings for "ring" cameras
$3
- fix scripts with empty names on css
- css props with only bindings are not shown
- remove of css prop should remove binding?
- Open Screen in sub screen command
$3
- fix in designer with svgs
$3
- add a few packages
- run simple script cmd and update get parent screen
- update packages, downgrade monaco
- fix backup
$3
- copy & paste events
$3
- support null value
$3
- use name in classlist
$3
- copy path for screens/controls
$3
- fix error in script system
$3
- compile fix
$3
- fix wrong shadow root used
$3
- small typo fix
$3
- better refcatoring
$3
- fix screen settings
$3
- screens are now ex- & imported as xml
$3
- fix compilation
$3
- switch combo in complex prop editor
$3
- selector for properties
$3
- internal control properties
- internal screen properties
$3
- raise errors on unimplemented commands
- wrong script upgrade
$3
- wrong default in script
$3
- fix base custom webcomp bindings
$3
- fix errors with script system, wrong parent used
$3
- fix typo in screenviewer
$3
- fixes in margin & padding
- work on simpleScripts, add conditions
- fix _getDomElements in screen viewer
$3
- update npm packages
$3
- designer updates
- add find methods
$3
- small designer tweaks
$3
- update designer
$3
- one more designer update
$3
- update designer
$3
- fix offset finding in box drawing
$3
- update edit text in designer
$3
- update designer
$3
- fix load subfolders
$3
- screens grid view
$3
- fix icons view path
$3
- add a icons view
$3
- show undo count
$3
- better tooltip for multiplex
- remove unused solution entries
$3
- fix iframe d&d
$3
- better evt editor for new events
$3
- show events on webui controls
$3
- work on events
$3
- add events service for manifest
$3
- fix getDomelement
$3
- support classlist in setElementProperty
$3
- fix screen & parent screen access
$3
- fixes for blockly
$3
- fix firefox
$3
- try faster loading
$3
- fix change root style
$3
- fix null ref
$3
- few small changes
$3
- fix scripts not workin
$3
- update packages
$3
- fix screenviewer styles
$3
- fix first div styled from designer when zoom
$3
- fix zooming of child screens
$3
- one more spec. calculation fix
$3
- need to await stylesheet parse
$3
- fix specificity calculation
$3
- fix in designer property grid
$3
- stretch property for screenviewer
- screennames in property list (property services now async)
$3
- fix typo in bindingshelper
$3
- fix style parsing and style bindings at runtime
$3
- fix in manifest parser of designer
$3
- fix manifest parsing
$3
- bindings inside of css
$3
- fix remove of ctx menu
$3
- fix stylesheet matching
$3
- fix edit text in transformed surface
$3
- more fixes with transformed elements
$3
- designer transformation fixes
$3
- fix transform combinations in designer
- fix treeview jump to
$3
- few more small designer fixes
$3
- fix in designer
$3
- Add screen contextmenu
- support editing of repeat in grid colum/row templates
- designer updates
- force styles
$3
- designer update
$3
- expand/collapse of child nodes in tree
- undock all windows
$3
- jump to all css declarations
$3
- jump to styles
$3
- better icons
$3
- remove metro ui
$3
- fix delay command
$3
- fixes after package updates
$3
- removed missing prop
$3
- add delay in blockly & npm updates
$3
- nicer two way bindings
$3
- fix toastify
$3
- fix for controller v6
$3
- compact mode on controler 6 support
$3
- fix encoding for all files
$3
- fix gulp5 copy breaks fonts
$3
- fix compile error
$3
- fix copy of font
$3
- stretch support in screens
$3
- support relative signal paths in scripts
$3
- parameter support for scripts
$3
- designer upd
$3
- designer updates for toolbars
$3
- designer update
$3
- disabled control fix
$3
- add dayjs for date formating
$3
- add a indirection level in complex signal binding
$3
- package upgrades
$3
- try fix runtime once more
$3
- runtime should not load designer
$3
- fix used wrong script system
$3
- one more small runtime fix
$3
- fix runtime once more
$3
- fix runtime
$3
- designer upgrade for new features
$3
- fix broken signals selector in scripts
$3
- build broken after refactoring
$3
- extracted some code for usability
- better text edit
- better split view (selection matches now)
- round pixel values
$3
- designer-update: mathML support, svg foreignObject support
- better text edit support
$3
- text edit now workin
- package updates
$3
- fix broken designer package
$3
- designer and docking fixes
$3
- support undock to new browser window
- preview fixes for position: static in styles
$3
- screenviewer - add also nodes from domparser head
$3
- more designer fixes
$3
- multiple designer fixes
$3
- fix lazy bound lit event name
$3
- fix captured local
$3
- fix lazy loaded lit elments
- fix script url
$3
- again fix in class binding
$3
- class is attribute in bindings
- fix error logging
$3
- fix wunderbaum error
$3
- designer fixes with property grid
$3
- designer updates
$3
- update designer with bugfixes
$3
- fix bindings in designer
$3
- refresh tree when controls deleted
$3
- fix grid resize
- fix grid extension display
$3
- better element drawing (with undo)
- better title extension
$3
- dblclick in solution should not change tool
- designer update for performance fixes
$3
- upgrade designer package once more to fix some issues
$3
- fix blockly
- add blockly templated string
- work on adopted styles
- update designer to fix snaplines
$3
- designer fix for background
$3
- upgade to new designer for better style encapsulation
$3
- package upgrades (fix in designer for css patching)
- typos
$3
- indirect signal for $ access
$3
- one more designer update
$3
- fix for nested stylesheets
$3
- string could be null
$3
- better script errors
$3
- remove a few errors
$3
- npm upgrade for error of undoservice
$3
- toast message on errors
$3
- npm package upgrades
$3
- use appendChild
$3
- fix later loaded scripts
$3
- twoway should only set first value
- fix error with noParse
$3
- fix binding with unit
- fix refactor service missing command
$3
- fix designer grid overlay
- stecil ackage hacks
$3
- fix broken split view
$3
- simpler one way bindings with expressions
$3
- text selection selects in designer
$3
- fix opacity of D&D node
$3
- fix drag drop of tree nodes
$3
- support upper/lowercase and spaces in screens & controls
$3
- correct event name in lit bindings
$3
- upgrade baseCustomWebcomp for attribute binding
$3
- API for reading object lists
$3
- fix selected tool
$3
- bugfix controls editor
$3
- fix import/export
$3
- bigger formula editor when multiline
$3
- draw widgets when selected in tree
$3
- bind to iobroker objects (via $ prefix)
$3
- fix open screens in folders
$3
- only lowercase folders
$3
- variablen in convertern
- configurable meta tags
$3
- fix issue with npm
$3
- new script command: CalculateSignalValue
- javascript code completition
- better types in code completition
- fix writing of child nodes if content is bound at design time
- use monaco editor in expressions
- use custom var names in expressions
- Screens & Controls can have subfolders
- decl. shadow dom support in screen viewer
- allow 'local_' as tag prefix for local vars
$3
- add local valueAsNumber property
$3
- again fix runtime was not initialized
$3
- fix runtime was not initialized
$3
- todo, support 2way bindings too custom properties
- code completition for iobrokerHandler and runtime
- simple scripts, access value of event
$3
- and one more...
$3
- and one more fix on importmaps
$3
- more fixes with import map
$3
- work on export directive
$3
- fix missing .js extensions
$3
- fix scripts
$3
- add open screen in blockly
$3
- work on esbuild (but not yet ready, delayed till blockly is ESM)
- bugfixes with scripts
- remove typescript, use javascript directly
- typed value on SetValue function
$3
- fix set style
$3
- more commands in blockly
$3
- fixed paths
$3
- start of blockly support
$3
- fix importmap creation missed "/"
$3
- few wunderbaum fixes
$3
- better custom properties view
$3
- fix in css prop binding
$3
- update designer npm
$3
- fix for class binding
$3
- binding for classes
$3
- allow bindings to css vars
$3
- switch loglevel
$3
- package updates
$3
- fix load error
$3
- waitForReady needs to be awaited
$3
- fix missing null check
$3
- fix normal binding unsubscribe
$3
- fix historic binding unsubscribe
$3
- remove bindings in customcontrols
$3
- fix broken load historic
$3
- load historic only when previous load is finished
$3
- fix tooltips
$3
- lazy remove the title
$3
- better fix for monaco
$3
- fix for monaco bug
- title removed
$3
- code completition for base custom webcomponent
- object property type
$3
- better text for historic bindings cancel
$3
- fix reload in dynamics editor
$3
- ui for historic binding
- fixes in refactor view
$3
- fixes in refactor service
$3
- tooltip in solution explorer
- npm upgrade of designer
- refactor view for bindings and scripts
$3
- remove 2 uneeded files
- designer update
$3
- check for invalid propertynames
- move properties
$3
- copy screen and custom controls
$3
- fix usage of webui in windows
$3
- extra style for font declarations, they are not allowed in shadow dom
$3
- fix remove script command
$3
- additional file dnd
$3
- add additional files node and upload
$3
- export as xml (screens & controls)
- binding historic with reload
- fix dialog
$3
- uncloseable dialog
- css properties for dialog
- binding to historic data
$3
- dialog centered
$3
- add simple dialog
$3
- two way bindings with expressions
$3
- fix upercase screen names in runtime
- raster in designer is now adjustable
- copy object nodes now copies complete string
- context menu to directly edit custom element
- fix handler path in script
- uiChangedView now workin
- error when importing invalid file (for example html instead of json)
$3
- after eval removal, functions need a return
$3
- events names for 2way bindings need a editor
$3
- two way for indirect bindings
$3
- support indirect bindings via {...} in signals (like in vis)
$3
- check npm package name
$3
- fix build on windows
$3
- dragdrop fixes
- screen/control size fixes
- connected/disconnected callbacks
$3
- new script commands
- bugfix with bindings and empty events
- select exported function in javascript
- bugfix in save of screens
- typescript in scripts
- started work on translateable runtime
$3
- signal selector in properties
- screen selector in properties
- new screen had style in scripts
- indirect value/property acces from scripts via editor
- list multiple undo entries (on hold of undo)
$3
- update designer to add and fix some commands
- move screen/control scripts out of html code
- add a javascript editor view
- bugfix when states where null after a fresh install
- designer addons do now work again
- docking framework updated, cause of bugs with undocking
$3
- screens and controls have now settings (width, height, useGlobalStyle)
$3
- removed many uneeded files from installation
$3
- show version in ui
$3
- signal as property type
- removed svg-image control
- shorter custom control tag name
- better dynamics editor
- dock ui fixes
- control ui from backend (switch view, reload)
$3
- remove uneeded files from upload
- remove icons into extra iobroker packages
- support icon adapters
- rename screens & controls
$3
- default value for custom properties
- open screens only once
- property bindings default one way
$3
- rework how custom controls are initalized
$3
- better support & fixes of custom elements
- enum properties in custom controls
- sample custom controls
$3
- null ref fix in bindings
$3
- Import/Export of Screens/Images/Controls
- Define your own Controls directly in webui
- Drag/Drop of Icons/Images to Properties
- Drag/Drop of objects to Bindings-Editor Signalname
- Basic functionality of CustomControls
$3
- initial public release
License
The MIT License (MIT)
Copyright (c) 2025 jogibear9988