UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?

[OliverIO]

@foxthefox said in Test Adapter tvprogram:

@oliverio
Ich habe mich damals extrem schwer getan die widgets für musiccast zu erstellen und da die basis dafür nicht wirklich gut dokumentiert ist und weil das iwie schwer zu debuggen ist.
Ich nehme gerne einen PR entgegen

Das eigentliche Problem hat nur indirekt mit vis und widgets zu tun.
Du hast deine Css-Anweisungen zu generell forumliert, so das diese Anweisungen auch andere
Elemente formatieren, auch wenn die mit deinen widgets gar nix zu tun haben.

Beispiel:

div.row      { width: 700px; }

durch diese Anweisung wird jedes div-Element, wleches als im Attribut class="row" drin stehen hat auf die Breite 700 Pixel gesetzt.
CSS-Anweisungen gelten immer im kompletten HTML-Dokument, egal wo sie stehen.
Es gibt da zwar noch eine Geltungsreihenfolge, durch die Funktionsweise von vis ist die aber eher zufällig.
Jetzt musst du dir vorstellen, jemand hat mehrere Adapter mit widgets geladen, in seinem CSS-Reiter stehen ebenfalls Anweisungen.
Die meisten kennen sich mit CSS sowieso nur rudimentär aus, da kann es dann schon passieren, das irgendwo anders jemand seine divs ebenfalls mit der Klasse "row" versieht und schwuppdiwupp ist das formatierungschaos fertig. die meisten können es leider nicht analysieren und den Fehler finden.

Deswegen sollte jeder, seine Anweisungen in einem Geltungsrahmen einsperren, so das sie ziemlich gesichert auch nur die Elemente trifft, die man auch beabsichtigt.

Bei dir kann man das machen, in dem du in der Datei musiccast.html jedes widget miut einem weiteren Klassennamen versiehst:

Beispiel:

https://github.com/foxthefox/ioBroker.musiccast/blob/c3a7c14cdc2aa21c3e5d3b7dd693d8e84a0044a3/widgets/musiccast.html#L24

<div class="vis-widget musiccast <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>" >

Hier habe ich jetzt einfach musiccast hinzugefügt. Das ist dann der Äußere Rahmen der Gültiggkeit.
Damit die CSS-Anweisungen das auch einhalten, Muss man alle CSS-Anweisungen das noch davor setzen:

Beispiel:

https://github.com/foxthefox/ioBroker.musiccast/blob/c3a7c14cdc2aa21c3e5d3b7dd693d8e84a0044a3/widgets/musiccast/css/style.css#L12

.musiccast div.row      { width: 700px; }

Dadurch wird diese Formatierungsanweisung nur noch getroffen, wenn ein Parent-Element (Also das widget div) die CSS-Klasse musiccast besitzt.

analog musst du das für alle deine widgets und alle deine CSS-Anweisungen machen

Hier noch ein kleiner Tipp, wie man widgets besser debuggen kann.
Transferiere alles Javascript in eine eigene Javascript-Datei in Funktionen und rufe aus dem Template nur noch die einzelnen Funktionen auf. die kannst du super im Browser bspw in chrome mit den developer tools tebuggen. Hilfestellung sind da natürlich die breakpoints, bzw. falls du die Stelle nicht gleich findest, einfach im javascript die Anweisung
debugger;
einfügen. Dann bleib bei geöffneten Developer Tools das javascript an dieser Stelle von alleine stehen.

Das widget-Template (also das was in der einen Html-Datei drin steht, wo die widgets definiert werden, wird kompiliert und ist dann tatsächlich extrem schwer zu debuggen.

[MCU]

@oliverio
Auf den Punkt bist du noch nicht eingegangen:
TV-Program Timetable wird plötzlich umgeschaltet auf TV-Program Control?: im Widget TV-Program Timetable1

[OliverIO]

@mcu sagte in Test Adapter tvprogram:

@oliverio
Auf den Punkt bist du noch nicht eingegangen:
TV-Program Timetable wird plötzlich umgeschaltet auf TV-Program Control?: im Widget TV-Program Timetable1

das habe ich dann nicht richtig verstanden.
kannst du das genauer beschreiben

[MCU]

@oliverio Ich habe in der VIS zwei Views: 1. TV-Program timetable1 2. TV-Program Control
Diese beiden Views sind in Jarvis als iFrame eingebunden.
Starte ich jetzt Jarvis sieht man oben View 1 und unten View 2:

Lässt man die Seite nun einige Zeit so stehen und macht was anderes (also nicht im Browser) erscheint , wenn man dann den Browser wieder anklickt folgendes:

Dort ist plötzlich im Widget von TV-Program timetable1 das TV-Program control widget zu sehen.

Das scheint ein VIS-Fehler zu sein.
Hab ein Thema aufgemacht: https://forum.iobroker.net/topic/41705/vis-changeview-per-control-data-fehlerhaft

[Oli]

@oliverio

Mir ist folgendes aufgefallen, weist du zufällig, warum die Info im Hintergrund startet, wenn ich das Widget über ein Dialog Widget öffne?

[OliverIO]

@oli sagte in Test Adapter tvprogram:

@oliverio

Mir ist folgendes aufgefallen, weist du zufällig, warum die Info im Hintergrund startet, wenn ich das Widget über ein Dialog Widget öffne?

ja, das geheimnis heisst z-index.
wahrscheinlich hat dein dialog einen höheren z-index, wie meine dialoge
das element/z-indes was niedriger ist erscheint hinter dem mit der höheren nummer

zusätzlich hat es noch etwas damit zu tun unter welchem eltern element der dialog angelegt wird. jquery legt die dialoge leider ausserhalb meines widgets an, wo leider wieder eine neue z-index rechnung beginnt, wie innerhalb des widgets.

hast du für deinen dialog so einen z-index gesetzt?
die dialoge bei mir haben alle z-index 12
das heißst dein dialog muss eine kleinere nummer wie 12 haben

[Oli]

@oliverio

der Dialog Button liegt auf z-index 1, ansonsten habe ich keinen gesetzt

[OliverIO]

@oli
der channel select dialog müsste dann auch hinten erscheinen?

[Oli]

@oliverio

ja, ich verwende die Dialog-Widgets vom Materialdesign-Adapter von @Scrounger, vielleicht kann er uns sagen, auf welchem z-Index seine Dialog-Widgets liegen?

Habe es gerade mit dem Jqui Dialog versucht, da funktioniert es

[MCU]

@oliverio Kannst du vielleicht die TV Program Control Daten bei Änderung mit Parameter favorites(false/true) pro Channel in ein DP tvprogram.0.programNow oder so als JSON schreiben.
Damit hätte man die Möglichkeit Alexa ansagen zu lassen, welches Programm gerade läuft und ob gerade ein Favoriten-Programm läuft.

Interessant wäre auch ein DP wo die Favoriten als JSON stehen mit deren Zeiten usw. War für die Anzeige von vorhandenen Favoriten mal angedacht tvprogram.0.favorites (false/true). JSON fände ich sinnvoller, da man dann auch direkt Alexa sagen lassen kann, wann die Favoriten-Sendung beginnt und endet usw.

Vielen Dank

[Scrounger]

@oli

Falls du / ihr den einstellbar braucht, kann ich das auch mit einbauen?

[OliverIO]

@oli
@scrounger

oder erst mal mit separater CSS-Anweisung versuchen:

#w00001channeldlg, w00001broadcastdlg {
z-index:300;
}

w00001 bitte mit deiner widgetID austauschen.

[OliverIO]

@mcu sagte in Test Adapter tvprogram:

@oliverio Kannst du vielleicht die TV Program Control Daten bei Änderung mit Parameter favorites(false/true) pro Channel in ein DP tvprogram.0.programNow oder so als JSON schreiben.
Damit hätte man die Möglichkeit Alexa ansagen zu lassen, welches Programm gerade läuft und ob gerade ein Favoriten-Programm läuft.

Interessant wäre auch ein DP wo die Favoriten als JSON stehen mit deren Zeiten usw. War für die Anzeige von vorhandenen Favoriten mal angedacht tvprogram.0.favorites (false/true). JSON fände ich sinnvoller, da man dann auch direkt Alexa sagen lassen kann, wann die Favoriten-Sendung beginnt und endet usw.

Vielen Dank

Ich bin aktuell dabei die ganze DP-Struktur zu überarbeiten, so das mehrere Fernseher gleichzeitig separat konfigurierbar sind.

Alle Datenpunkte, die minütlich zu aktualisieren sind, würde ich versuchen zu vermeiden.
Gern kann ich dazu aber auch sendto-Befehle bereitstellen.
bspw gibt es jetzt schon den sento-befehl "getFavoritesData"
übergibt man mit sendto an diesen Befehl ein Array mit den Titel der Favoritensendungen (aktuell aus dem config DP), erhält man ein Array mit allen Sendungen der nächsten Zeit.

In einem Script könnte das bspw für die Sendung "Heute" so eingesetzt werden:

sendTo("tvprogram.0","getFavoritesData",["heute"],(data)=>console.log(data));

Dieser Befehl wird vom widget Favorites verwendet.

Für die aktuellen Sendungen gibt es den folgenden Befehl

sendTo("tvprogram.0","getServerBroadcastsNow",(data)=>console.log(data));

Beide Befehle können direkt im Skriptadapter so eingesetzt werden.

[Oli]

@oliverio

leider funktioniert das mit dem CSS bei mir nicht, ist das gleiche Ergebnis wie vorher

CSS:

#w00302channeldlg, w00302.broadcastdlg {
z-index:300;
}

[OliverIO]

@oli sagte in Test Adapter tvprogram:

@oliverio

leider funktioniert das mit dem CSS bei mir nicht, ist das gleiche Ergebnis wie vorher

CSS:

#w00302channeldlg, w00302.broadcastdlg {
z-index:300;
}

hups kopierfehler, da fehlt noch eine raute und ein Punkt war noch zuviel

#w00302channeldlg, #w00302broadcastdlg {
   z-index:300;
}

[Oli]

@oliverio
sorry, dass ich weiter nerven muss, dass CSS mit dem Z-Index funktioniert leider nicht

[OliverIO]

@oli said in Test Adapter tvprogram:

@oliverio
sorry, dass ich weiter nerven muss, dass CSS mit dem Z-Index funktioniert leider nicht

dann hilft nur mal gemeinsam drauf schauen mit teamviewer oder ähnliches.

[Oli]

@oliverio

können wir gerne, was muss ich mir dafür downloaden?

[OliverIO]

@oli

https://www.teamviewer.com/de/download/windows/
Installation ist Optional, kann man auch direkt starten ohne Installation.
Wenn du ein Mikro und Lautsprecher am PC angeschlossen hast, können wir mal probieren, direkt darüber zu sprechen. Alternativ dann telefon

[Oli]

@oliverio

ist gestartet bei mir, wenn du Zeit hast können wir es Testen