Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[jampr]

Hi zusammen,

ich habe mir das widget vom template kopiert und wollte ein Eigenes unter eigenem Namen draus machen. Doch dummerweise wird es in meiner VIS nicht angezeigt. Auch nach iobroker visdebug iobroker.snapcast nicht. Auch nach Löschen der offline Inhalte vom Browser und Restart des Web-Adapters. Weiß jemand, was ich falsch mache?

pi@raspi4:/opt/iobroker# iobroker visdebug iobroker.snapcast
Modify "/opt/iobroker/node_modules/iobroker.vis/www/cache.manifest"
Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets"
Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser/css/style.css"
Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser/js/pathbrowser.js"
Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser.html"

pathbrowser.html:

<!--
	ioBroker.vis template Widget-Set

	version: "0.0.1"

	Copyright 2020 Author author@mail.com
-->
<!-- here you can include so many css as you want -->
<link rel="stylesheet" href="widgets/pathbrowser/css/style.css" />
<!-- here you can include so many js-files as you want -->
<script type="text/javascript" src="widgets/pathbrowser/js/pathbrowser.js"></script>
 
<script id="pathbrowser"
		type="text/ejs"
		class="vis-tpl"
		data-vis-prev='<div id="prev_pathbrowser" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="width: 280px; height: 159px;" > <div class="template-class vis-widget-prev-body " style="padding:2px">pathbrowser</div>'
		data-vis-attrs="oid/id;myColor/color;htmlText/text;"
		data-vis-attrs0="group.extraPath;extraAttr"
		data-vis-set="pathbrowser"
		data-vis-type="helper"
		data-vis-name="pathbrowser">
	<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 230px; height: 210px" id="<%= this.data.attr('wid') %>"><%
		vis.binds['pathbrowser'].createWidget(this.data.wid, this.view, this.data, this.style);
	%></div>
</script>

pathbrowser/js/pathbrowser.js

/*
	ioBroker.vis template Widget-Set

	version: "0.0.1"

	Copyright 2020 Author author@mail.com
*/
"use strict";

// add translations for edit mode
$.extend(
	true,
	systemDictionary,
	{
		// Add your translations here, e.g.:
		// "size": {
		// 	"en": "Size",
		// 	"de": "Größe",
		// 	"ru": "Размер",
		// 	"pt": "Tamanho",
		// 	"nl": "Grootte",
		// 	"fr": "Taille",
		// 	"it": "Dimensione",
		// 	"es": "Talla",
		// 	"pl": "Rozmiar",
		// 	"zh-cn": "尺寸"
		// }
	}
);

// this code can be placed directly in pathbrowser.html
vis.binds["pathbrowser"] = {
	version: "0.0.1",
	showVersion: function () {
		if (vis.binds["pathbrowser"].version) {
			console.log("Version pathbrowser: " + vis.binds["pathbrowser"].version);
			vis.binds["pathbrowser"].version = null;
		}
	},
	createWidget: function (widgetID, view, data, style) {
		var $div = $("#" + widgetID);
		// if nothing found => wait
		if (!$div.length) {
			return setTimeout(function () {
				vis.binds["pathbrowser"].createWidget(widgetID, view, data, style);
			}, 100);
		}

		var text = "HALLO";/*
		text += "OID: " + data.oid + "</div><br>";
		text += 'OID value: <span class="pathbrowser-value">' + vis.states[data.oid + ".val"] + "</span><br>";
		text += 'Color: <span style="color: ' + data.myColor + '">' + data.myColor + "</span><br>";
		text += "extraAttr: " + data.extraAttr + "<br>";
		text += "Browser instance: " + vis.instance + "<br>";
		text += 'htmlText: <textarea readonly style="width:100%">' + (data.htmlText || "") + "</textarea><br>";
*/
		$("#" + widgetID).html(text);

		// subscribe on updates of value
		function onChange(e, newVal, oldVal) {
			$div.find(".pathbrowser-value").html(newVal);
		}
		if (data.oid) {
			vis.states.bind(data.oid + ".val", onChange);
			//remember bound state that vis can release if didnt needed
			$div.data("bound", [data.oid + ".val"]);
			//remember onchange handler to release bound states
			$div.data("bindHandler", onChange);
		}
	}
};

vis.binds["pathbrowser"].showVersion();

[wendy2702]

@jampr Wenn alles zum erstellen eines Widgets befolgt wurde kannst du mal ein

iobroker upload all

versuchen.

[jampr]

@wendy2702
Leider keine Änderung. Der Befehl macht ja nur den Upload für alle Adapter.

was meinst du mit 'alles zum Erstellen eines Widgets'?

Ich habe das Template benutzt, um https://github.com/jampr21/ioBroker.snapcast zu erstellen. Und im Widget-Verzeichnis das Template umbenannt.

[wendy2702]

@jampr Gibt hier irgendwo ne Anleitung zum erstellen eigener Widgets... wenn ich die nur auf die Schnelle finden würde.

[jampr]

ja, ich finde dazu auch wenig. Außer ein paar Forums-Beiträge.

[Glasfaser]

@jampr

Beispiel :

https://forum.iobroker.net/topic/35311/vis-eigenes-widget-erstellen

https://forum.iobroker.net/topic/42086/vorstellung-shelly-style-widgets

[jampr]

@glasfaser
danke. Aber ich verstehe nicht, wie ich so ein Widget einem Adapter hinterlegen kann. https://github.com/jampr21/ioBroker.snapcast/tree/main/widgets
Das exportierte Widget sieht auch anders aus, als das vom Adapter. Hat sich da was geändert?

[OliverIO]

@jampr sagte in neues Widget wird nicht angezeigt:

@glasfaser
danke. Aber ich verstehe nicht, wie ich so ein Widget einem Adapter hinterlegen kann. https://github.com/jampr21/ioBroker.snapcast/tree/main/widgets
Das exportierte Widget sieht auch anders aus, als das vom Adapter. Hat sich da was geändert?

widgets existieren nur im rahmen eines adapters.
auch wenn du keinen exchten adapter javascript code schreiben möchtest, sondern einfach nur widgets bereit stellen möchtest.

damit du alle voraussetzungen dafür schaffst ist es das beste, das adapter creator script zu starten.
da wirst du alles wichtige gefragt und kannst auch angeben, das du nur widgets machen möchtest.

https://github.com/ioBroker/create-adapter

das script erzeugt dir dann im richtigen verzeichnis dein adapter inklusive probe widget, welches du im vis auch ausprobieren kannst. Als Startpfad empfehle ich dir /opt/iobroker. dein adapter wird dann unter /opt/iobroker/node_modules/ioBroker.deinAdapterName erzeugt

auf basis dessen, passt du dann dein widget entsprechend an.

[jampr]

@oliverio
genau. Mit dem create adapter habe ich ja meinen Adapter auch angelegt. Incl. Widget (namens template). Der Adapter funktioniert auch einwandfrei. Auch Änderungen am main oder an den admin-Seiten klappen hervorragend. Nur dieses Widget bekomme ich nicht zu greifen. Ich habe den Code schon in nem basic-html vorbereitet und dachte, das ich das template-widget einfach umbenenne und dann meinen Code in das Adapter-Widget überführe. Dummerweise scheitere ich direkt beim umbenennen (s. Post 1).

Im ersten Code-Abschnitt steht ja auch:

Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser/js/pathbrowser.js"
Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser.html"

Aber ich sehe es im vis-Editor nicht. Ich habe diverse Browser probiert und cache natürlich auch gelöscht. Ich sehe das Ding einfach nicht links im Menü.

[OliverIO]

@jampr sagte in neues Widget wird nicht angezeigt:

@oliverio
genau. Mit dem create adapter habe ich ja meinen Adapter auch angelegt. Incl. Widget (namens template). Der Adapter funktioniert auch einwandfrei. Auch Änderungen am main oder an den admin-Seiten klappen hervorragend. Nur dieses Widget bekomme ich nicht zu greifen. Ich habe den Code schon in nem basic-html vorbereitet und dachte, das ich das template-widget einfach umbenenne und dann meinen Code in das Adapter-Widget überführe. Dummerweise scheitere ich direkt beim umbenennen (s. Post 1).

Im ersten Code-Abschnitt steht ja auch:

Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser/js/pathbrowser.js"
Upload "/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser.html"

Diesen Ausschnitt verstehe ich nicht? was soll das bedeuten? Das sind deine Dateien? Siehe unten mein Hinweis wie man Änderungen Uploaded

Aber ich sehe es im vis-Editor nicht. Ich habe diverse Browser probiert und cache natürlich auch gelöscht. Ich sehe das Ding einfach nicht links im Menü.

Also das Probe-Widget, welches zusammen mit deinem Adapter generiert wird funktioniert?
Wenn du dann sachen änderst, musst du die Änderungen noch "hochladen" mit

iobroker upload snapcast

Zu beachten ist, das sich in deiner Datei
/opt/iobroker/node_modules/iobroker.snapcast/widgets/pathbrowser.html
jedesmal mindestens ein Zeichen ändern muss (ich füge am Ende einfach leerzeichen ein oder lösche diese.
Sonst wird nichts hochgeladen, auch wenn es so aussieht.

Es gibt wohl auch eine Möglichkeit das Caching auszuschalten, das hat bei mir aber noch nie richtig funktioniert. Also deswegen immer mit iobroker upload ...

[jampr]

@oliverio
mir scheint, ich kann da ändern, was ich will. Da passiert nix. Ich habe in einem anderen Adapter auch eine Variante des Templates gefunden, die auch angelistet wird. Nach einer Änderung in nem HTML-Tag incl Space im js taucht die Änderung nicht auf.

edit:
natürlich incl des

iobroker upload x

sogar mit zus

iobroker visdebug iobroker.snapcast