iobroker-community-adapters / iobroker.webui Goto Github PK

View Code? Open in Web Editor NEW

13.0 9.0 2.0 55.15 MB

UI using WebComponents

License: MIT License

TypeScript 86.29% HTML 9.97% CSS 0.64% JavaScript 3.10%

iobroker visualization web-components

iobroker.webui's Introduction

ioBroker.webui

webui for ioBroker

Tutorial Videos (atm. in german only)

https://www.youtube.com/@jogibear9988

Description

This is a complete visualization system for ioBroker.

It includes features like:

own simple scripting language
binding to ioBroker objects including converters & javascript expressions
paste 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 hand over from outside to screen)
split view edit of 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

Installation

Dependecies

You need the Web Adapter installed. It works with the following settings:

Concepts

Description

The Designer uses Webcomponents, so the HTML you Design is inside of a Shdowroot of a Webcomponent. This mens, 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.

Custom Controls in WebUI

You can create own reusable CustomControls in WebUI. This can have individual Javascript, Properties and a template.

You can use Double-Bracket Syntax and Double-Curly-Braket Syntax of "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 could also include Javascript in your CustomControl or Screen. Also you could use export a function "init(instance)" wich will be called when your CustomControl will be instanciated. (and also the connected and disconnected functions could be used)

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.

More about Development

  $ npm run reflection

to recreate reflection files for Scripting wich are used for the property grid

  $ npm run build

to copy compiled files and node_modules to www folder so adapter is installable via github

  $ 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

1.2.2 (2024-03-11)

fix broken signals selector in scripts

1.2.1 (2024-03-11)

build broken after refactoring

1.2.0 (2024-03-11)

extracted some code for usability
better text edit
better split view (selection matches now)
round pixel values

1.1.4 (2024-03-02)

designer-update: mathML support, svg foreignObject support
better text edit support

1.1.3 (2024-02-29)

text edit now workin
package updates

1.1.2 (2024-02-27)

fix broken designer package

1.1.1 (2024-02-27)

designer and docking fixes

1.1.0 (2024-02-26)

support undock to new browser window
preview fixes for position: static in styles

1.0.56 (2024-02-26)

screenviewer - add also nodes from domparser head

1.0.55 (2024-02-22)

more designer fixes

1.0.54 (2024-02-22)

multiple designer fixes

1.0.53 (2024-02-19)

fix lazy bound lit event name

1.0.52 (2024-02-19)

fix captured local

1.0.51 (2024-02-19)

fix lazy loaded lit elments
fix script url

1.0.50 (2024-02-18)

again fix in class binding

1.0.49 (2024-02-18)

class is attribute in bindings
fix error logging

1.0.48 (2024-02-17)

fix wunderbaum error

1.0.47 (2024-02-15)

designer fixes with property grid

1.0.46 (2024-02-15)

designer updates

1.0.45 (2024-02-12)

update designer with bugfixes

1.0.44 (2024-02-11)

fix bindings in designer

1.0.43 (2024-02-11)

refresh tree when controls deleted

1.0.42 (2024-02-11)

fix grid resize
fix grid extension display

1.0.41 (2024-02-10)

better element drawing (with undo)
better title extension

1.0.40 (2024-02-10)

dblclick in solution should not change tool
designer update for performance fixes

1.0.39 (2024-02-09)

upgrade designer package once more to fix some issues

1.0.38 (2024-02-09)

fix blockly
add blockly templated string
work on adopted styles
update designer to fix snaplines

1.0.37 (2024-01-31)

designer fix for background

1.0.36 (2024-01-31)

upgade to new designer for better style encapsulation

1.0.35 (2024-01-30)

package upgrades (fix in designer for css patching)
typos

1.0.34 (2024-01-28)

indirect signal for $ access

1.0.33 (2024-01-24)

one more designer update

1.0.32 (2024-01-24)

fix for nested stylesheets

1.0.31 (2024-01-23)

string could be null

1.0.30 (2024-01-22)

better script errors

1.0.29 (2024-01-22)

remove a few errors

1.0.28 (2024-01-22)

npm upgrade for error of undoservice

1.0.27 (2024-01-22)

toast message on errors

1.0.26 (2024-01-22)

npm package upgrades

1.0.25 (2024-01-21)

use appendChild

1.0.24 (2024-01-21)

fix later loaded scripts

1.0.23 (2024-01-21)

twoway should only set first value
fix error with noParse

1.0.22 (2024-01-20)

fix binding with unit
fix refactor service missing command

1.0.21 (2024-01-19)

fix designer grid overlay
stecil ackage hacks

1.0.20 (2024-01-18)

fix broken split view

1.0.19 (2024-01-17)

simpler one way bindings with expressions

1.0.18 (2024-01-17)

text selection selects in designer

1.0.17 (2024-01-16)

fix opacity of D&D node

1.0.16 (2024-01-16)

fix drag drop of tree nodes

1.0.15 (2024-01-14)

support upper/lowercase and spaces in screens & controls

1.0.13 (2024-01-14)

correct event name in lit bindings

1.0.12 (2024-01-14)

upgrade baseCustomWebcomp for attribute binding

1.0.11 (2024-01-14)

API for reading object lists

1.0.10 (2024-01-14)

fix selected tool

1.0.9 (2024-01-14)

bugfix controls editor

1.0.8 (2024-01-14)

fix import/export

1.0.7 (2024-01-14)

bigger formula editor when multiline

1.0.6 (2024-01-14)

draw widgets when selected in tree

1.0.5 (2024-01-14)

bind to iobroker objects (via $ prefix)

1.0.4 (2024-01-14)

fix open screens in folders

1.0.3 (2024-01-14)

only lowercase folders

1.0.2 (2024-01-14)

variablen in convertern
configurable meta tags

1.0.1 (2024-01-13)

fix issue with npm

1.0.0 (2024-01-13)

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

0.23.3 (2024-01-04)

add local valueAsNumber property

0.23.2 (2024-01-03)

again fix runtime was not initialized

0.23.1 (2024-01-03)

fix runtime was not initialized

0.23.0 (2024-01-03)

todo, support 2way bindings too custom properties
code completition for iobrokerHandler and runtime
simple scripts, access value of event

0.22.7 (2023-12-25)

and one more...

0.22.6 (2023-12-25)

and one more fix on importmaps

0.22.5 (2023-12-25)

more fixes with import map

0.22.4 (2023-12-25)

work on export directive

0.22.3 (2023-12-25)

fix missing .js extensions

0.22.2 (2023-12-25)

fix scripts

0.22.1 (2023-12-25)

add open screen in blockly

0.22.0 (2023-12-25)

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

0.21.3 (2023-12-20)

fix set style

0.21.2 (2023-12-20)

more commands in blockly

0.21.1 (2023-12-19)

fixed paths

0.21.0 (2023-12-19)

start of blockly support

0.20.7 (2023-12-15)

fix importmap creation missed "/"

0.20.6 (2023-12-12)

few wunderbaum fixes

0.20.5 (2023-12-11)

better custom properties view

0.20.4 (2023-12-11)

fix in css prop binding

0.20.3 (2023-12-11)

update designer npm

0.20.2 (2023-12-11)

fix for class binding

0.20.1 (2023-12-11)

binding for classes

0.20.0 (2023-12-11)

allow bindings to css vars

0.19.3 (2023-12-10)

switch loglevel

0.19.2 (2023-12-10)

package updates

0.19.1 (2023-12-07)

fix load error

0.19.0 (2023-12-07)

waitForReady needs to be awaited

0.18.15 (2023-12-06)

fix missing null check

0.18.14 (2023-12-06)

fix normal binding unsubscribe

0.18.13 (2023-12-06)

fix historic binding unsubscribe

0.18.12 (2023-12-06)

remove bindings in customcontrols

0.18.11 (2023-12-06)

fix broken load historic

0.18.10 (2023-12-06)

load historic only when previous load is finished

0.18.9 (2023-12-05)

fix tooltips

0.18.8 (2023-12-05)

lazy remove the title

0.18.7 (2023-12-05)

better fix for monaco

0.18.6 (2023-12-05)

fix for monaco bug
title removed

0.18.5 (2023-12-05)

code completition for base custom webcomponent
object property type

0.18.4 (2023-12-03)

better text for historic bindings cancel

0.18.3 (2023-12-03)

fix reload in dynamics editor

0.18.2 (2023-12-03)

ui for historic binding
fixes in refactor view

0.18.1 (2023-12-03)

fixes in refactor service

0.18.0 (2023-12-01)

tooltip in solution explorer
npm upgrade of designer
refactor view for bindings and scripts

0.17.0 (2023-11-29)

remove 2 uneeded files
designer update

0.16.6 (2023-11-28)

check for invalid propertynames
move properties

0.16.5 (2023-11-27)

copy screen and custom controls

0.16.4 (2023-11-27)

fix usage of webui in windows

0.16.3 (2023-11-24)

extra style for font declarations, they are not allowed in shadow dom

0.16.2 (2023-11-23)

fix remove script command

0.16.1 (2023-11-23)

additional file dnd

0.16.0 (2023-11-23)

add additional files node and upload

0.15.1 (2023-11-22)

export as xml (screens & controls)
binding historic with reload
fix dialog

0.15.0 (2023-11-19)

uncloseable dialog
css properties for dialog
binding to historic data

0.14.1 (2023-11-12)

dialog centered

0.14.0 (2023-11-12)

add simple dialog

0.13.1 (2023-11-11)

two way bindings with expressions

0.13.0 (2023-11-09)

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)

0.12.3 (2023-09-20)

after eval removal, functions need a return

0.12.2 (2023-09-20)

events names for 2way bindings need a editor

0.12.1 (2023-09-20)

two way for indirect bindings

0.12.0 (2023-09-20)

support indirect bindings via {...} in signals (like in vis)

0.11.2 (2023-09-17)

check npm package name

0.11.1 (2023-09-16)

fix build on windows

0.11.0 (2023-09-11)

dragdrop fixes
screen/control size fixes
connected/disconnected callbacks

0.10.0 (2023-09-10)

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

0.9.0 (2023-09-06)

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)

0.8.0 (2023-09-03)

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

0.7.0 (2023-09-01)

screens and controls have now settings (width, height, useGlobalStyle)

0.6.0 (2023-09-01)

removed many uneeded files from installation

0.5.1 (2023-09-01)

show version in ui

0.5.0 (2023-09-01)

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)

0.4.0 (2023-08-30)

remove uneeded files from upload
remove icons into extra iobroker packages
support icon adapters
rename screens & controls

0.3.0 (2023-08-29)

default value for custom properties
open screens only once
property bindings default one way

0.2.3 (2023-08-28)

rework how custom controls are initalized

0.2.2 (2023-08-28)

better support & fixes of custom elements
enum properties in custom controls
sample custom controls

0.2.1 (2023-08-28)

null ref fix in bindings

0.2.0 (2023-08-28)

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

0.1.0 (2023-08-27)

initial public release

License

The MIT License (MIT)

iobroker.webui's People

Contributors

Stargazers

Watchers

Forkers

hakarune iobroker-archive

iobroker.webui's Issues

Installed packages not shown in Firefox

webui version: 1.0.37
Firefox: 115.7.0esr

After install and reload no installed packages shown under Controls->Designer
Chome browser works

/src/frontend/scripting/ScriptSystem.ts, scriptCommands javascript is called without passing the context

/frontend/scripting/ScriptSystem.ts scriptCommands javascript is called without passing the context variable.

This solution worked for me: at line 131 I replaced

(<any>c).compiledScript();

with

(<any>c).compiledScript(context);

Here the complete 'Javascript' case

                case 'Javascript': {
                    const script = await ScriptSystem.getValue(c.script, outerContext);
                    let context: { event: Event, element: Element } = outerContext; // make context accessible from script
                    (<any>context).shadowRoot = (<ShadowRoot>context.element.getRootNode());
                    (<any>context).instance = (<any>context).shadowRoot.host;
                    if (!(<any>c).compiledScript)
                        (<any>c).compiledScript = new Function('context', script);
                    (<any>c).compiledScript(context); 
                    break;
                }

and at line 192 I replaced

        if (javascriptCode) {
            try {
                const scriptUrl = URL.createObjectURL(new Blob([javascriptCode], { type: 'application/javascript' }));
                jsObject = await importShim(scriptUrl);
                if (jsObject.init) {
                    jsObject.init(instance);
                }
            } catch (err) {
                console.error('error parsing javascript', err)
            }
        }

with

        if (javascriptCode) {
            try {
		let compiledScript = new Function('context', javascriptCode);
		compiledScript({ root: instance, instance });
                /*const scriptUrl = URL.createObjectURL(new Blob([javascriptCode], { type: 'application/javascript' }));
                jsObject = await importShim(scriptUrl);
                if (jsObject.init) {
                    jsObject.init(instance);
                }*/
            } catch (err) {
                console.error('error parsing javascript', err)
            }
        }

Unable to install packages

When I double click on a package in suggestions, the footer bar shows that npm (tries?) installs the package.
In iobroker I can see, that the instance of webui is stopped and in the host section I get the error message "Exception-Code: ENOENT: spawn npm ENOENT" and "Issues with non-existing files or directories" "A process tries to access a non-existing file or directory."

Todo for v1.0

style editor (per screen, global)
how to store bindings, not how as it's done atm. converters should be possible, and more... maybe also js converters
implement binding converters
simple script language & editor for events
javascript for events
dynamic dialog for editing of bindings
dragdrop objects to elements should create bindings
relative bindings path for display-screens
Implement a registry for custom controls, normaly webcomponents (bspw: https://developer.visa.com/pages/chart-components/bar-chart, https://github.com/christianliebel/paint, https://wiredjs.com/,

create bundler run for designer and runtime

create a build run, wich minifies/bundles the designer and the runtime.

need to look how it works with import attributes (wich the designer uses), and the vscode integration (maybe remove it from designer and create a extra designer npm wich includes it correctly and not via lazy loading)

wich minifier/bundler should we use? parcel, esbuild, webpack, don't know...

Remove "esModuleShim" polyfill

The polyfill could be removed, if we have native support for import attributes in browser

Please fix issues reported by adapter checker

[E118] Versions in package.json and in io-package.json are different
[E145] No "common.news" found for actual version 0.0.15
[E500] node_modules found in repo. Please delete it
[E606] Current adapter version 0.0.20 not found in README.md
[E605] No actual year found in copyright. Please add "Copyright (c) 2023 [email protected]" at the end of README.md
[E701] No actual year found in LICENSE. Please add "Copyright (c) 2023 [email protected]" at the start of LICENSE
[E812] file test/ found in repository, but not found in .npmignore
[E813] file src/ found in repository, but not found in .npmignore
[W171] "common.title" is deprecated in io-package.json
[W105] "common.titleLang" should be translated into all supported languages (en, de, ru, pt, nl, fr, it, es, pl, uk, zh-cn)
[W109] "common.desc" should be translated into all supported languages (en, de, ru, pt, nl, fr, it, es, pl, uk, zh-cn)
[W164] Adapters without config "common.noConfig = true" should also set "common.adminUI.config = none"
[W172] "common.localLink" in io-package.json is deprecated. Please define object "common.localLinks": { "_default": "..." }
[W145] Each "common.news" should be translated into all supported languages (en, de, ru, pt, nl, fr, it, es, pl, uk, zh-cn)
[W202] Version of package.json (0.0.20) doesn't match latest version on NPM (0.0.12)
[W400] Cannot find "webui" in latest repository

Events - Javascript funktioniert nicht mehr

In der Runtime kommt beim Ausführen folgende Fehlermeldung:
`Uncaught SyntaxError: Identifier 'importMapWidgets' has already been declared (at importmap.js:1:1)
:8082/favicon.ico:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

IobrokerHandler.js:96 ioBroker handler ready.
:8082/dist/frontend/common/IobrokerHandler.js:1

   Failed to load resource: the server responded with a status of 404 (Not Found)

es-module-shims.js:743 Uncaught (in promise) TypeError: 404 Not Found http://ctrl01.fritz.box:8082/dist/frontend/common/IobrokerHandler.js
at doFetch (es-module-shims.js:743:21)
at async fetchModule (es-module-shims.js:751:17)
at async es-module-shims.js:823:40
at async loadAll (es-module-shims.js:469:5)
at async topLevelLoad (es-module-shims.js:541:5)
at async checkHash (runtime.html:73:17)
ScriptSystem.js:184 error parsing javascript TypeError: Failed to resolve module specifier "/webui/dist/frontend/common/IobrokerHandler.js". Invalid relative url or base scheme isn't hierarchical.
at resolveIfNotPlainOrUrl (es-module-shims.js:130:15)
at resolve (es-module-shims.js:410:38)
at es-module-shims.js:848:32
at Array.map ()
at es-module-shims.js:844:45
at async loadAll (es-module-shims.js:469:5)
at async topLevelLoad (es-module-shims.js:541:5)
at async ScriptSystem.assignAllScripts (ScriptSystem.js:178:28)
at async HTMLElement.loadScreenData (ScreenViewer.js:88:30)
assignAllScripts @ ScriptSystem.js:184`

Unterordner in Screen verwaltung (en: subfolders in screens)

Hi wäre super wenn man unterorner in der Screenverwaltung anlegen kann um mehr ordnung halten zu können.
Sonst wird die liste relativ lange

Danke

Planed Advanced features

Relative Bindings to Screens (you can hand over a Path to a Screen)
Relative Bindings inside of screens to a container
CustomControls via Screens Designer (you should also be able to define Properties. Maybe we create a "BaseCustomWebcomponent" directly in it?

date-input mit twoway-binding

Zieht man ein ioBroker-Objekt mit Typ Zahl (number) und Rolle Datum (date) aus dem Objektbaum in einen Screen wird nur ein Input-Feld mit oneway-Bindung erzeugt.
Bei einem Objekt mit Typ Zahl (number) und Rolle Zustand (state) wird ein twoway-Bindung erzeugt.

List of usable web-component packages

Here is a short list of usable packages.
Here are only packages listed wich have a "custom-element.json" so they could be easily integrated:

qing-button (https://github.com/mgenware/qing-button)

Remove JQuery & FancyTree

Switch to wunderbaum, the successor of fancytree.
WebComponent Designer already has a new package with wunderbaum support, webui switch is WIP

Planed features

bad request

wenn ich den klicke

lande ich hier

http://localhost:8101/%web_protocol%://localhost:%web_port%/webui/

Fix releasemanagement

Releasemanagement should be fixed

release tags are missing
github releases seems to be missing
README.md contains releasenotes of 0.0.10 although npm provides a 0.0.12
package.json states a 0.0.20 while io-package.json hspecifies 0.0.15

@alcazone/release-script should be configured and used to avoid inconstiencies

URIError: Failed to decode param '%web_protocol%://192.168.1.168:%web_port%/webui/'

after installation I get the following error:

URIError: Failed to decode param '%web_protocol%://192.168.1.168:%web_port%/webui/' at decodeURIComponent (<anonymous>) at decode_param (/opt/iobroker/node_modules/express/lib/router/layer.js:172:12) at Layer.match (/opt/iobroker/node_modules/express/lib/router/layer.js:148:15) at matchLayer (/opt/iobroker/node_modules/express/lib/router/index.js:585:18) at next (/opt/iobroker/node_modules/express/lib/router/index.js:226:15) at compression (/opt/iobroker/node_modules/compression/index.js:220:5) at Layer.handle [as handle_request] (/opt/iobroker/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/opt/iobroker/node_modules/express/lib/router/index.js:328:13) at /opt/iobroker/node_modules/express/lib/router/index.js:286:9 at Function.process_params (/opt/iobroker/node_modules/express/lib/router/index.js:346:12)

Versions:
ioBroker.webui: v0.11.0
ioBroker.admin: v6.10.1
ioBroker.docker: v8.1.0
Node.js: v18.17.1
NPM: 9.6.7

Dialog support

Add the Posibility to open a Screen as a Dialog

Aufruf "edit complex value" über eigenen Button

Der Aufruf von "edit complex value" sollte über einen eigenen Button anstelle des Linksclicks auf den Text "value" erfolgen.
So ist die Funktion - meiner Meinung nach - zu versteckt.

Not working

tsc not install, had to manually install.

After it still wouldn't start

> web-dev-server --node-resolve --open

sh: 1: web-dev-server: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `web-dev-server --node-resolve --open`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

tried to manually install web-dev but received error

/usr/bin/webpack-dev-server -> /usr/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/webpack-dev-server/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of webpack@^4.37.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.

+ [email protected]

I also tried to fork to use as a docker image, but it received same errors.

NPM 7 is required

NPM version: 6.14.15
npm install [email protected] --loglevel error --prefix "/opt/iobroker" (System call)
npm ERR! code ENOTSUP
npm ERR! notsup Unsupported engine for [email protected]: wanted: {"npm":">=7"} (current: {"node":"14.18.2","npm":"6.14.15"})
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Required: {"npm":">=7"}npm ERR! notsup Actual: {"npm":"6.14.15","node":"14.18.2"}
npm ERR! A complete log of this run can be found in:
npm ERR! /opt/iobroker/.npm/_logs/2021-12-22T23_08_47_311Z-debug.log
host.iobroker-qnap Cannot install [email protected]: 1
ERROR: Process exited with code 25

Hello ... I tried installing this adapter but npm 7 is required. The problem is that ioBroker does not currently support npm 7.

Compatibility check to js-controller 4.0

Dear Adapter developer,

with js-controller 4.0 object definitions are now also checked that min/max in only provided for number/mixed objects and that the type of the default value matches to the object type.

If something is not correct this is logged as 'warning' or 'info' log.

Please also make sure to update to the lastest @iobroker/testing dependency 2.5.4 or to accept the PR from Apollon77 for legacy testing!

Please spent some time to verify your adapter by ideally starting with a fresh instance and do some actions and verify the log. If you see a warn or info log there from these checks please adjust the adapter and fix the relevant cases.

For questions please refer to ioBroker/ioBroker.js-controller#1749

Please close the issue after you checked it.

Thank you very much for your support to get the best experience for the growing numbers of ioBroker users!

importmapCreator.js doesn't work on Window Machine

backend/ImportmapCreator.ts behaves incorrectly under windows due to the behavior of "path" module: it use the window path separator instead of "posix" one.

This ia an eaxample of a generated "importmap.js" file:

const importMapWidgets = {
    "imports": {
        "@vanillawc/wc-arrow": "\\webui.0.widgets\\node_modules\\@vanillawc\\wc-arrow\\dist\\wc-arrow-node.min.js",
        "@vanillawc/wc-arrow/": "\\webui.0.widgets\\node_modules\\@vanillawc\\wc-arrow/",
        "@vanillawc/wc-markdown": "\\webui.0.widgets\\node_modules\\@vanillawc\\wc-markdown\\index.js",
        "@vanillawc/wc-markdown/": "\\webui.0.widgets\\node_modules\\@vanillawc\\wc-markdown/",
        "emoji-picker-element": "\\webui.0.widgets\\node_modules\\emoji-picker-element\\index.js",
        "emoji-picker-element/": "\\webui.0.widgets\\node_modules\\emoji-picker-element/",
        "jquery": "\\webui.0.widgets\\node_modules\\jquery\\dist\\jquery.js",
        "jquery/": "\\webui.0.widgets\\node_modules\\jquery/"
    },
    "scopes": {}
};
importShim.addImportMap(importMapWidgets);

All related files are affected by this issue (importWidgetFilesRuntime.js, importWidgetFiles.js) and the browser is unable to load the modules.

This solution worked for me: at the beginning of the file I replaced

import path from 'path';

with

import path from 'path/posix';

The new generated "importmap.js" file is:

const importMapWidgets = {
    "imports": {
        "@vanillawc/wc-arrow": "/webui.0.widgets/node_modules/@vanillawc/wc-arrow/dist/wc-arrow-node.min.js",
        "@vanillawc/wc-arrow/": "/webui.0.widgets/node_modules/@vanillawc/wc-arrow/",
        "@vanillawc/wc-markdown": "/webui.0.widgets/node_modules/@vanillawc/wc-markdown/index.js",
        "@vanillawc/wc-markdown/": "/webui.0.widgets/node_modules/@vanillawc/wc-markdown/",
        "emoji-picker-element": "/webui.0.widgets/node_modules/emoji-picker-element/index.js",
        "emoji-picker-element/": "/webui.0.widgets/node_modules/emoji-picker-element/",
        "jquery": "/webui.0.widgets/node_modules/jquery/dist/jquery.js",
        "jquery/": "/webui.0.widgets/node_modules/jquery/"
    },
    "scopes": {}
};
importShim.addImportMap(importMapWidgets);

webui Custom Control get Property Changes in javascript

How to do webui Custom Control get Property Changes in javascript.for example i have levelbar custom controls? i bind levelbar div height to my property level and i want to get updates in custom controls and other properties? How to do subscribe properties changes

Think about to fix the issues found by adapter checker

I am an automatic service that looks for possible errors in ioBroker and creates an issue for it. The link below leads directly to the test:

https://adapter-check.iobroker.in/?q=https://raw.githubusercontent.com/iobroker-community-adapters/ioBroker.webui

[E145] No news found for actual version 0.0.13
[E154] common.dependencies must contain{"js-controller": ">=2.0.0"} or {"js-controller": ">=3.0.0"}
[E500] node_modules found in repo. Please delete it
[E605] No actual year found in copyright. Please add "Copyright (c) 2022 [email protected]" at the end of README.md
[E701] No actual year found in LICENSE. Please add "Copyright (c) 2022 [email protected]" at the start of LICENSE
[E812] file test/ found in repository, but not found in .npmignore
[E813] file src/ found in repository, but not found in .npmignore
Please check your pull request to latest: ioBroker/ioBroker.repositories#1552

I have also found warnings that may be fixed if possible.

[W400] Cannot find "webui" in latest repository

Thanks,
your automatic adapter checker.