Test lovelace 5.x

M1R0O

Hi,
ich möchte gerne das Bild der Ring-Doorbell in Lovelace anzeigen lassen.
Den Ring-Adapter habe ich installiert.
Weiter komme ich nicht :confounded:
Ich schaffe es nicht, eine Entität zu erzeugen, oder die livestream-files in einer HTML-Karte darzustellen.

Kann mir jemand helfen?
Danke!

David G.

@m1r0o

Was bietet dir der Adapter denn an?
Serienmäßig geht es mit lovelace nur, wenn du einen Stream hast wo du ein jpg rausholen kannst. Falls der Adapter eine komplette Website mit stream bereitstellt kannst den als iframe einbinden.

Ansonsten musst man das über Umwege lösen.
Zb in vis eine view mit dem stream bauen und ich lovelace einbinden.

M1R0O

@david-g
Danke für die schnelle Antwort.
Der Adapter bietet ein livestream-file und eine livestream-url.

David G.

@m1r0o

Und die URL verweist auf was?
Einen Stream oder eine Website mit eingebettetem Player?
Nutzen kannst du ohne Umwege nur die zweite Variante.
Da auf http verwiesen wird aber auch nur, wenn lovelace auch auf http (also nicht https) läuft.

M1R0O

@david-g sagte in Test lovelace 3.x:

Zb in vis eine view mit dem stream bauen und ich lovelace einbinden.

Über vis scheint es zu klappen, das habe ich schon gelesen.
Wie klappt denn da die Einbindung in Lovelace?

David G.

@m1r0o
Bei den Karten gibt es eine Karte die sich Webseite nennt. Da einfach die URL zu der view eingeben.

M1R0O

@david-g
DAs klappt so halb. Der Stream ist nicht immer live.
Problem: Es gibt einen Datenpunkt: New livestream request. Wenn dieser Taster betätigt wird, aktualisiert sich die lievestream url, welche auf der Karte ebenfalls aktualisiert werden müsste.
Ist das realisierbar.

Danke

David G.

@m1r0o

So halb mit dem weg über vis oder direkt lovelace? Falls lovelace welche Karte?

M1R0O

@david-g Direkt Lovelace über die Website-Karte

XBiT

@m1r0o

Falls dein Stream ein MJPG ist dann so

      - type: markdown
        content: >
          # <center>Haustür</center>

          <a href="/lovelace/kamera-haustuer"><img
          src='{synology.0.SurveillanceStation.cameras.Haustür.linkMjpegHttpPath}'
          />

in den { } muss dein Datenpunkt rein
,
Beste Grüße
XBiT

David G.

@m1r0o sagte in Test lovelace 3.x:

@david-g Direkt Lovelace über die Website-Karte

Da gibt's leider keine Möglichkeit. Zumindest keine die ich wüsste außer den Umweg über vis.

M1R0O

@david-g
Mit vis habe ich mich nie beschäftigt, weiß leider gar nicht wo ich anfangen soll.

In diesem Thread wurde genau mein Problem gelöst:

In dem vom RING Adapter angelegten Datenpunkt ist die URL mit Angabe des Hostes abgelegt, dass war nicht so gut, ich habe den Hostnamen gegen die Host IP per Script getauscht.
on({id: 'ring.0.doorbell_21502358.livestream_url', change: "ne"}, async function (obj) {
var string = getState("ring.0.doorbell_21502358.livestream_url").val;
var newstring
newstring=string.replace("http://DESKTOP-RQ1PD76(SmartHome)","http://192.168.178.xxx");
log(newstring);
setState("ring.0.doorbell_21502358.livestream_url",newstring)
});
Aus "http://DESKTOP-RQ1PD76(SmartHome):8082/ring.0/doorbell_21502358/livestream21502358_1629730800258.mp4" ist nun
http://192.168.178.xxx:8082/ring.0/doorbell_21502358/livestream21502358_1629730800258.mp4 geworden.

Der Eintrag im HTML-Widget sieht jetzt so aus:
<video height="448px" width="800" autoplay muted loop="true">
        <source src="{ring.0.doorbell_21502358.livestream_url}" type="video/mp4">
</video>
Das klappt.

Ich habe mit ein Skript analog zum oberen geschrieben und den HTML-Eintrag in eine Markdown-Karte geschrieben. Die Karte bleibt aber weiß.

Ich weiß also nicht, was ich für Lovelace wo eintragen muss. Wenn du mir da einen Tipp geben kannst, würde ich versuchen es zu realisieren.

@XBiT: Das hat bei mir so nicht geklappt, danke.

David G.

@m1r0o

Du kannst das so nicht in markdown setzen.
Markdown ist was ganz "dummes" und kann nur was Text, Bilder und Tabellen anzeigen.

Du musst dir in vis (da habe ich auch keine Ahnung von) mit diesem HTML widget eine view bauen. Vermutlich am besten ganzseitige?

Diese kannst du dann als Website (nicht markdown) einbinden.

XBiT

@m1r0o

eine Möglichkeit wäre es noch es so zu versuchen wie bei der Tagesschau in 100sec.

  - type: markdown
    content: >-
      # <center>News</center>

      <video src='{0_userdata.0.Links.Tagesschau.URL.Tagesschau100s}'
      width="100%" height="100%" poster="/cards/tagesschau_100sec.png"
      autobuffer controls>

da der Wert von Datenpunkt

https://media.tagesschau.de/video/2023/0410/TV-20230410-1007-5800.webxxl.h264.mp4

ist also auch eine mp4 sollte es eventuell gehen.

EDIT: kann sein das noch autoplay rein muss damit es gleich abgespielt wird.

Beste Grüße
XBiT

David G.

@xbit

Das kannte ich noch gar nicht...
Hast du zufällig das Script für mich, was die URL generiert?

Mal gespannt, ob es bei einem stream funktioniert.

XBiT

@david-g

/* VIS Tagesschau_Link
parsed die Seite https://www.tagesschau.de/100sekunden/ und sucht nach der URL zum aktuellsten Video
{1}
02.03.2016 erstellt von pix
15.03.2016 zu Javascript Instanz 1 gewechselt
24.09.2016 umbenannt in VIS_Link_Tagesschau
11.11.2018 Skript angepasst und optimiert
03.05.2021 Skript angepasst
       tagesschau 100s mp4
       tagesschau Stream HTML-Link
{1}
todo: axios statt request() und etwas schöner machen
{1}
{1}
*/
const fC = false; // forceCreation für createState()
const logging = true;
const dppfad = '0_userdata.0.Links.Tagesschau.'
const idURL = dppfad + 'URL.Tagesschau';
const idURL100s = dppfad + 'URL.Tagesschau100s';
 
// ab hier nix mehr ändern
 
createState(idURL,"", fC, {
 
   name: "HTML-Seite mit Tagesschau-Stream",
 
   desc: "geparster Link aus tagesschau.de",
 
   type: "string",
 
   role: "text.url"
 
});
 
 
 
createState(idURL100s,"", fC, {
 
   name: "Link zu Tagesschau in 100s",
 
   desc: "geparster Link aus tagesschau.de",
 
   type: "string",
 
   role: "text.url"
 
});
 
 
 
function findeURL () {   
 
   let request = require('request');
 
   let film_url;
 
   try {
 
       // Tagesschau in 100s
 
       const link = "http://www.tagesschau.de/100sekunden/";
 
       let regexp = /https:\/\/media\.tagesschau\.de\/video\/\d*\/\d*\/TV-\d*-\d*-\d*\.webxxl\.h264\.mp4/gm;
 
       request(link, function (error, response, body) {
 
           if (!error && response.statusCode == 200) {
 
               let result_arr = regexp.exec(body);
 
               film_url = result_arr[0];
 
               setState(idURL100s, film_url);
 
               if (logging) log ("URL: " + film_url);
 
           } else  { // Error beim Einlesen
 
               log(error, 'error'); 
 
           }
 
       });   // Ende request 
 
   } catch (fehler) {
 
       log("Fehler (try): " + fehler, "error");
 
   }
 
 
 
 
 
   
 
   // nicht schön, aber nochmal für Stream
 
   let stream_url;
 
   try {
 
       //Tagesschau Stream als HTML
 
       const link = "https://www.tagesschau.de/multimedia/livestreams/";
 
       let regexp = /https:\/\/www\.tagesschau\.de\/multimedia\/livestreams\/livestream-\d*-\d*~player\.html/gm;
 
 
 
       request(link, function (error, response, body) {
 
           if (!error && response.statusCode == 200) {
 
               let result_arr = regexp.exec(body);
 
               stream_url = result_arr[0];
 
               setState(idURL, stream_url);
 
               if (logging) log ("HTML: " + stream_url);
 
           } else  { // Error beim Einlesen
 
               log(error, 'error'); 
 
           }
 
       });   // Ende request 
 
   } catch (fehler) {
 
       log("Fehler (try): " + fehler, "error");
 
   }
 
} // Ende findeURL
 
 
 
schedule("8 */1 * * *", findeURL); // jedeStunde um 8 nach voll
 
setTimeout(findeURL, 2000);

Bitte

M1R0O

@xbit
Das sieht gut aus, ist aber zu hoch für mich :face_with_rolling_eyes:

David G.

@m1r0o

Für dich wäre vermutlich nur der kurze Part interessant.

Zeug doch mal den Inhalt der Datenpunkte die mit dem Video zu tun haben. Evtl hilft das ja schon weiter.

XBiT

@m1r0o

aus dem was ich von dir gelesen habe sollte so deine Card aussehen.

type: markdown
content: >-
  # <center>Kamera</center>

  <video src='{ring.0.doorbell_21502358.livestream_url}' width="100%"
  height="100%" autobuffer autoplay controls>

Garfonso

@dave69 said in Test lovelace 3.x:

Resonanz isz aber hier, von dir abgsehen, eher mau. liegts an der Wetter App oder an Lovelace weil es zu wenige Nutzer damit gibt

Osterferien :-)

@dave69 said in Test lovelace 3.x:

Bei der Temp Kurve wären die min,max Werte schön

Min/Max (und noch viel mehr ;-) ) kann die mini-graph-card.

@dave69 said in Test lovelace 3.x:

Blockly wäre aber auch Neuland für mich.

Du kannst auch das "Rules" Ding vom Javascript Adapter nehmen, das ist noch etwas einfachers "wenn -> dann" zusammen klicken (also in deinem Fall: Wenn neuer Wert für den State mit kWh, setzte Wert * x State für Euro). Aber in eines der Script-Verfahren solltest du dich etwas einarbeiten für ioBroker.

@dave69 said in Test lovelace 3.x:

Kann man eigentlich die Schriftgröße der Werte oder die größe der Karte selbst öndern?

Vielleicht über das theme? Ich würde aber empfehlen, wenn dir die Karte nicht zusagt, erstmal zu gucken, ob es schon fertige Alternativen gibt. Entweder bei denen, die dabei sind oder bei den custom-cards.

@dave69 said in Test lovelace 3.x:

Vorherssage kommt aktuell, steht heuet auf Donerstag, aktuelle Temp. ist aber falsch, das muss dann ja aber ein Problem vom Widget sein das er den falschen DP nimmt.

Ne, das liegt am "Das Wetter" Adapter. Der schreibt die aktuelle Temperatur irgendwohin, wo ihn keiner sonst findet... schulterzuck Von den WetterAdaptern funktioniert mittlerweile der accuweather am besten für lovelace / type-detector, würde ich sagen. Der liefert die meisten Daten und den hab ich mit dem Entwickler mal gerade gezogen. ;-) (und ich empfehle trotzdem die Standard Wetter Karte zu nehmen und nicht die, die der Entwickler geklöppelt hat, weil die nach Updates öfter mal nicht geht und blos nicht eine alte Anleitung mit modifiziertem type-detector nehmen... Raum & Funktion auf accuweather.0.Summary und fertig )

Grundsätzlich zu Raum & Funktion: Die dienen eigentlich dem User um Geräte / Datenpunkte zu sortieren. Der type-detector guckt sich allerdings manchmal auch die Funktion an und guckt ob die passen kann, wenn er sich unsicher ist. Solange die Datenpunkte sauber angelegt sind (z.B. sogar mit Devices-Adapter & Alias) sollte das auch keine Rolle spielen (sonst gerne issue erzeugen). Raum ist immer egal, wie er heißt, es muss nur einer konfiguriert sein.

Community Forum

NEWS

Test lovelace 5.x

Support us

843

32.4k

81.5k

1.3m