VIS Adapter Verständnisfrage

kmxak

Nabend.

Vielleicht kann mir ja einer den Aufbau des VIS näher bringen.

VIS verstehe ich als "Web Server".

Wenn ich bei mir an der Homepage was Scripe habe ich, nehmen wir mal eine simple HTML Seite, einen html tag einen body sowie head.

Nun ziehe ich meine Widgets in den Editor. Befinden wir uns nun im body bereich?

Sind rechts bei Scripte die Sachen im head?

Wo sind die CSS sachen? Internal External oder wo muss ich die im VIS verstehen?

Hoffe man versteht worauf ich hinaus will. Möchte halt mal verstehen was hinter dem VIS steckt ist tue mich dort immer noch etwas schwer.

eric2905

Moin,

schau Dir mal unsere Dokus zu dem Adapter an :

VIS selber ==> http://www.iobroker.net/docu/?page_id=2754&lang=de

VIS und seine Zusatzmodule ==> http://www.iobroker.net/docu/?page_id=2412&lang=de

VIS steht für Visualisierung. Es ist ein Adapter, mit dessen Hilfe man eine webbasierte Anzeige bauen kann (die einzelne Seite wird View genannt).

Dafür werden vorgefertigte Widgets auf die später anzuzeigende Oberfläche platziert und konfiguriert. Die geladenen / installierten Widgets werden Links in VIS angezeigt.

Zu jedem dieser Widgets gibt es in dessen Konfigstruktur (wird, nach Markierung des platzierten Widgets, rechts in VIS angezeigt) auch einen CSS-Teil. Ebenso gibt es den für die gesamte View.

Gruß,

Eric

Von unterwegs getippert

Jey Cee

Ich glaube kmxak wollte es etwas technischer wissen.

Die CSS Sachen sind intern und können nicht direkt bearbeitet werden. Mit dem CSS Bereich im rechten Menü kann man aber die internen CSS Sachen über schreiben.

Wenn du den Aufbau bessere verstehen möchtest kannst du auch einfach mal ein einfaches view bauen, dann im Browser aufrufen und F12 drücken.

Dann kannst du den Quelltext und den Aufbau sehen.

Gesendet von Unterwegs

kmxak

danke aber in der doku wird nur alles erklärt. ich interessiere mich wie vis aufgebaut ist.

weiß nicht wie ich das besser beschreiben soll.

Wenn ich nun einen script habe das aus JS besteht (gehört in einer normalen Seite in den Head Tag) und etwas HTML (Body Tag) splitte ich das nun in Vis und stecke den JS Teil bei Scripte rein und für den HTML Teil nehme ich ein Basic HTML Widget?

Oder kann man sowas gar nicht auf VIS anwenden?

Geht irgendwie PHP in VIS?

EDIT: Ja genau. Ok das könnte ich mal machen mit dem F12.

Das mit dem CSS fange ich langsam an durchzublicken dank dem Meterial Design und den Vorlagen 8-)

Uhula

Aber nicht erschrecken. Die Debug-Anzeige mit [F12] wird dich am Anfang erschlagen … Wenn du den HTML-Code genau eines Widgets sehen möchtest, dann klicke zur Laufzeit im Chrome-Browser via Rechtsklick darauf und wähle im Menü "Element untersuchen". Dann wird die Debug-Anzeige auf dem zugehörigen HTML-Code positioniert.

Geht im ioBroker.vis Editor auch, da dieser aber ein eigenes Kontextmenü beim Rechtsklick hat, musst du hier zusätzlich noch die [Umschalt] Taste gedrückt halten um an das Chrome-Browsermenü zu gelangen.

ioBroker.vis mischt

mumurik

Wenn ich nun einen script habe das aus JS besteht (gehört in einer normalen Seite in den Head Tag) und etwas HTML (Body Tag) splitte ich das nun in Vis und stecke den JS Teil bei Scripte rein und für den HTML Teil nehme ich ein Basic HTML Widget?

Oder kann man sowas gar nicht auf VIS anwenden?

@kmxak
Das ist aktuell ebenfalls meine Herausforderung, gibt es dazu eine Antwort?

Ich stehe aktuell vor einem Problem, wo ich leider selbst nicht weiterkomme. Ich würde gerne in meine Visualisierung das folgende Javascript einbetten:

Einbindung des API-Javascripts im <head>-Bereich deiner Website:
<script type="text/javascript"
src="http://www.fussball.de/static/layout/fbde2/egm//js/widget2.js">
</script>

Ausgabe des Wettbewerbs – Einbindung im <body>-Bereich deiner Website:
<div id="widget1"></div>
<script type="text/javascript">
new fussballdeWidgetAPI().showWidget('widget1', '027NCB6HCG000000VS541L4FVT9UCIBC');
</script>

Welches Vis-Widget nehme ich dazu?

Jey Cee

@mumurik basic HTML ist das richtige

mumurik

@Jey-Cee

basic HTML-Widget für beides? sowohl den <head>-Teil als auch den <body>-Teil?

Habe gerade probiert, funktioniert leider nicht, es wird nichts angezeigt

Jey Cee

@mumurik document type hast du angegeben?

mumurik

@Jey-Cee nein, wo soll ich den document type angeben, sorry, stehe gerade auf dem Schlauch

Jey Cee

@mumurik

<!DOCTYPE HTML>

Das muss einfach am Anfang stehen.

mumurik

@Jey-Cee

MarcusW

@Jey-Cee sagte in VIS Adapter Verständnisfrage:

@mumurik
<!DOCTYPE HTML>
Das muss einfach am Anfang stehen.

Ich habe das selbe Problem und bereits verschiedene Möglichkeiten getestet. Es wird jedoch nichts angezeigt (html widget).
Was kann ich ändern?

<!DOCTYPE HTML>
<head><script type="text/javascript"
		src="http://www.fussball.de/static/layout/fbde2/egm//js/widget2.js">
	</script></head>
<body><div id="widget1"></div>
	<script type="text/javascript">
		new fussballdeWidgetAPI().showWidget('widget1', '027PSMSM50000000VS541L4FVUP2QSGB');
	</script></body>
</html>

MarcusW

Das Problem besteht immer noch, habe den code etwas geändert, immer noch keine Anzeige. Nach einer Recherche, müsste es eigentlich nun richtig sein. Das Widget wurde neu erstellt.

Community Forum

NEWS

VIS Adapter Verständnisfrage

Support us

564

32.7k

82.5k

1.3m