Hallo zusammen,
bin nun auch schon einige Jahre mit ioBroker unterwegs und hab im Grunde all die Jahre auch immer am UI gearbeitet.
Ich setze noch vis-1 ein, hier als zentrale Steuerung aber html/css/javascript.

Mittlerweile habe ich ein Menu als 3D-Würfel realisiert, vor allem um Platz zu sparen, aber eben auch mal etwas Neues auszuprobieren. Basiert auf three.js.

Anbei ein Screenshot und hier ein Demo-Video.
Mir geht es nur um einen Ideenaustausch, vielleicht hat jemand noch eine ganz andere Menüsteuerung erfunden.
Zur Verfügungstellen geht leider nicht, es sind einfach zuviele Abhängigkeiten und spezifischer js-Code vewendet worden.

Danke
ExMatador

@Gaspode
Es hat auf Anhieb funktioniert, alles, wirklich alles ist wieder da.
Diese Installation ist wirklich richtig gut.
Besten Dank
Gruß ExMatador

@kellerkind-86
Anbei meine config.yml

mqtt:
  enabled: true
  host: 192.168.178.98
  port: 1885              # Standard mqtt-Port ist 1883, darauf hört bei den ESPxx auch mosquitto, der es dann an den ioBroker.mqtt-client weitergibt (auch 1883)
                          # ioBroker.frigate hat einen eigenen mqtt-server, der nur auf 1885 hört
  topic_prefix: frigate

tls:
  enabled: False


birdseye:
  enabled: true
  width: 1280
  height: 720
  mode: continuous
  # layout:
  #  scaling_factor: 2.0

detectors:
  coral:
    type: edgetpu
    device: usb

go2rtc:
  #log:
  #  exec: trace

  streams:
    #----- Output ist MJPEG, Video.Transkodierung in H.264, Audio.Transkodierung in OPUS oder AAC
    CAM_EG:
      - rtsp://admin:xxx@192.168.178.84:554/cam/realmonitor?channel=1&subtype=1#audio=aac

    CAM_OG:
      - rtsp://admin:xxx@192.168.178.90:554/cam/realmonitor?channel=1&subtype=1&proto=Onvif

    #----- Output ist JPEG, Video.Transkodierung in H.264, kein Audio vorhanden
    CAM-3DPrinter:
      - ffmpeg:http://192.168.178.69:81/stream#video=h264 

    #----- Alle 4 LE232 Konfiguration: Video: H.264  Audio: AAC  (keine Transkodierung erforderlich)
    #      Alle 4 können den neuen Video-Standard H.265, das kann go2RTC aber nicht
    #      WebRTC kann AAC | OPUS | PCM   
    #      MSE    kann       OPUS | PCM 
    #      MJPEG  kann AAC        | PCM
    CAM-Eingang:
      - rtsp://admin:xxx@192.168.178.38:554/Port/cam/realmonitor?channel=1&subtype=1
    CAM-Terrasse:
      - rtsp://admin:xxx@192.168.178.39:554/Port/cam/realmonitor?channel=1&subtype=1
    CAM-Garten:
      - rtsp://admin:xxx@192.168.178.40:554/Port/cam/realmonitor?channel=1&subtype=1
    CAM-Garage:
      - rtsp://admin:xxx@192.168.178.41:554/Port/cam/realmonitor?channel=1&subtype=1

  webrtc:
    candidates:
      - 192.168.178.43:8555
      - stun:8555

cameras:
  CAM-Eingang:
    ffmpeg:
      output_args:
        record: preset-record-generic-audio-copy
      inputs:
        - path: rtsp://127.0.0.1:8554/CAM-Eingang
          input_args: preset-rtsp-generic
          roles:
            - detect
    detect:
      width: 704
      height: 576
      fps: 5

  CAM-Terrasse:
    ffmpeg:
      output_args:
        record: preset-record-generic-audio-copy
      inputs:
        - path: rtsp://127.0.0.1:8554/CAM-Terrasse
          input_args: preset-rtsp-generic
          roles:
            - detect
    detect:
      width: 704
      height: 576
      fps: 5

  CAM-Garten:
    ffmpeg:
      output_args:
        record: preset-record-generic-audio-copy
      inputs:
        - path: rtsp://127.0.0.1:8554/CAM-Garten
          input_args: preset-rtsp-generic
          roles:
            - detect
    detect:
      width: 704
      height: 576
      fps: 5

  CAM-Garage:
    ffmpeg:
      output_args:
        record: preset-record-generic-audio-copy
      inputs:
        - path: rtsp://127.0.0.1:8554/CAM-Garage
          input_args: preset-rtsp-generic
          roles:
            - detect
    detect:
      width: 704
      height: 576
      fps: 5

  CAM_EG:
    ffmpeg:
      output_args:
        record: preset-record-generic-audio-copy
      inputs:
        - path: rtsp://127.0.0.1:8554/CAM_EG
          input_args: preset-rtsp-generic
          roles:
            - detect
    detect:
      enabled: false

  CAM_OG:
    ffmpeg:
      output_args:
        record: preset-record-generic-audio-copy
      inputs:
        - path: rtsp://127.0.0.1:8554/CAM_OG
          input_args: preset-rtsp-generic
          roles:
            - detect
    detect:
      enabled: false

  CAM-3DPrinter:
    ffmpeg:
      inputs:
        - path: rtsp://192.168.178.43:8554/CAM-3DPrinter
          input_args: preset-rtsp-generic
          roles:
            - detect
    detect:
      enabled: false

objects:
  track:
    - person
    # - car

record:
  enabled: true
  retain:
    days: 0                  # Keine Standard-Aufzeichnung, nur im Falle von events
  events:
    retain:
      default: 10            # 10 Tage aufbewahren
      mode: active_objects   # motion: bei jeder Bewegung   # active_objects: nur bei Bewegung eines der Objekttypen (person, car)

# detect:                    # nur an der Kamera selbst angeben, nicht global für alle
#  enabled: false

version: 0.14

Gruß ExMatador

@christian-0
Ich schreibe jeden Tag um 23:58 den Energie-Verbrauch (kWh) des Tages und die Kosten (€) des Tages in die Influx-DB.
Mit diesen Tageswerten wird in Grafana der Tagesverbrauch (letzte 14 Tage), der Wochenverbrauch (letzte 14 Kalenderwochen) und der Monatsverbrauch (letzte 12 Monate) ermittelt und visualisiert. Natürlich kann man in Grafana auch andere Werte in der Zeitachse nehmen.
Für die Monatsauswertung sieht das Flux-Statement so aus:

Die Grafik sieht so aus - bin noch nicht so lange dabei (Zahlen sind auf dem Tablet besser zu erkennen als auf dem PC).

Viele Grüße
ExMatador

@chris-1
Hallo,
ich habe mir aus Google Maps Api (Kartendarstellung), der iOS App Overland (GPS-Tracker) und der Software von j. Berkemeier (Auswertung von GPX-Dateien) Link Text eine Karte gebaut, in der ich Wege aufzeichnen und anzeigen kann.
Ist nicht ganz einfach, funktioniert aber sehr gut - ähnlich zur iOS App "Wo ist".
Gruß ExMatador

@hub01
Mit Grafana geht das, auch zwei völlig voneinander unabhängige Charts zu synchronisieren. Dazu muss man mit Grafana-Variablen arbeiten, diese in die Grafana-URL aufnehmen und die URL via Binding visualisieren.
Habe so etwas ähnliches bereits umgesetzt.
Gruß ExMatador

@hub01
Das Ergebnis sieht so aus; alles mit VIS gemacht.

Im Editor wird für das oberste Chart ein Binding verwendet.

Die im Binding stehende URL passe ich über die beiden Buttons (links / rechts) an - ich ändere die 4 Variablen darin:

<iframe src="http://192.168.178.43:3000/d-solo/IUFr7Bj7z/iobroker-dashboard?orgId=1&var-startGasTag=-26h&var-stopGasTag=0h&var-startGasR2=-25h&var-stopGasR2=0h&panelId=63&refresh=10m&kiosk" width="1100" height="200" frameborder="0"></iframe>

Damit geht jeder Buttonclick nach links um 24h zurück und jeder Buttonclick nach rechts um 24h vor.
Damit kann man aber jede beliebige Grafana-Url, auch mehrere gleichzeitig, manipulieren.
Gruß ExMatador

@hub01
Ich habe auch Influx 2 im Einsatz. Dazu gehört die etwas gewöhnungsbedürftige Abfragesprache Flux. Bekommt man aber hin.
Gruß ExMatador

@tombox
OK, habe ich auf 4.3.1 aktualisiert.
Du schreibst "fix gps coordinate parsing" - aber an den DPs hat sich nichts geändert, oder ich sehe es nicht?

Ich denke, mit dem Containerabruf via remote.fetchViaAPI - alle 60s - komme ich gut zurecht. Ist zwar ein Polling statt mqtt-subscribe, aber was soll's.

Ich baue mir im Hintergrund ein json-File auf und bei jeder Änderung von lat/long ein gpx-File zur Anzeige im ioBroker mit Google Maps Api. Wenn nichts zurückkommt, steht das Auto halt und das zeige ich dann auch so auf der Karte an.

Vielen Dank
Gruß ExMatador

@stenmic
Hallo, ich habe ein paar Fragen rund um die Positionserkennung, also Latitude und Longitude.
Beide sind unter

bmw.0.WBAxxx.stream.vehicle.cabin.infotainment.navigation.currentLocation.latitude.value
bmw.0.WBAxxx.stream.vehicle.cabin.infotainment.navigation.currentLocation.longitude.value

auch zu finden.
Meine Fragen dazu:

1. Wieso steht der Wert in einem Verzeichnis?
2. Wieso gibt es unterhalb des Verzeichnisses die Values: c01 | c02 | c03 ? Die beiden ersten beinhalten den ganzzahligen Wert und die Nachkommastellen. Aktualisiert werden diese aber - so mein Gefühl - nur sporadisch.
3. Die o.g. Werte Lat & Long werden so etwa alle 2 - 3 Minuten aktualisiert. Das ist bei einer Autofahrt doch ziemlich selten, da gehen Km ins Land. Und eigentlich ist MQTT doch für nahezu Echtzeit ausgelegt. Kann man den Zyklus irgendwie forcieren oder blockt BMW da?
4. Kann oder besser darf man den remote.fetchViaAPI so oft wie man möchte auf "true" setzen oder geht das zu Lasten der Quotas?

Vielen Dank
Gruß ExMatador

Hallo zusammen,
bin nun auch schon einige Jahre mit ioBroker unterwegs und hab im Grunde all die Jahre auch immer am UI gearbeitet.
Ich setze noch vis-1 ein, hier als zentrale Steuerung aber html/css/javascript.

Mittlerweile habe ich ein Menu als 3D-Würfel realisiert, vor allem um Platz zu sparen, aber eben auch mal etwas Neues auszuprobieren. Basiert auf three.js.

Anbei ein Screenshot und hier ein Demo-Video.
Mir geht es nur um einen Ideenaustausch, vielleicht hat jemand noch eine ganz andere Menüsteuerung erfunden.
Zur Verfügungstellen geht leider nicht, es sind einfach zuviele Abhängigkeiten und spezifischer js-Code vewendet worden.

Danke
ExMatador

Hallo,
ich möchte in diesem VIS-Reiter ein globales Skript anlegen. Dabei benötige ich THREE.JS.
Das Einbinden via Import klappt nicht (Fehler: outside module).
Aber das Einbinden via require klappt auch nicht:
const THREE = require („THREE“)
Three habe ich im JavaScript Adapter hinzugefügt.
Vielleicht hat einer der Entwickler eine Idee.

Vielen Dank
Gruß ExMatador

@OliverIO

Hi,
So sieht jetzt das Ergebnis des THREE.js visualizer aus, der einen mp3-Radio-Stream verarbeitet.
War echt mühevoll, die 3D Engine im iobroker anzusprechen, kleinere Fehler sind beim Wechsel von Vis-Views immer noch vorhanden..
Danke dir für die Unterstützung.

Gruß ExMatador
Screen_Recording_20250429_195500_Chrome_001_001~2.mp4

Copyright (c) 2025 by Szenia Zadvornykh (https://codepen.io/zadvorsky/pen/vNVNYr)

@oliverio
Hi,
vielen Dank für deine Unterstützung, hab’s so eingebaut - was soll ich sagen: die Ladefehler sind weg
Jetzt hab ich vermutlich noch ein weiteres zeitliches Problem, denn manchmal kommt die Animation, aber häufig auch nicht.
Das liegt irgendwie am Audio-Element, das ja über createMediaStreamSource(stream) gebunden wird.
Ich ändere das Audio-Objekt an anderer Stelle, damit gibts noch Probleme.

Aber dank deiner Hilfe bin ich ein großes Stück weitergekommen.
VG
ExMatador

@OliverIO
Hallo, ich wende mich mal direkt an Dich.
Ich habe diesen Sourcecode-Ausschnitt jetzt im body eingebunden

<body>
    <audio id="song" src="" style="display:none;"></audio>
    <div class="container">
        <div class="play-btn">PLAY</div>
    </div>
    <div id="three-container"></div>

    <script type="module">
     
    import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js";
    import { OrbitControls } from "https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/OrbitControls-2.js";

Kommt natürlich noch viel mehr.
Ist das so in Ordnung?
Vermutlich nicht, denn es kommen merkwürdige vis-Fehler.
Als HTML-Dokument im Browser läuft es aber.

Ich habe das Thema "module" eher noch nicht richtig verstanden, sorry.
Danke
Gruß ExMatador

Hallo,
ich verwende des öfteren ein basic-HTML-Widget mit genau einem DP, in dem im Grunde ein html-Dokument als Sourcecode inkl. Javascript-Teile abgelegt ist (Client-seitige Verarbeitung).
Funktioniert auch ziemlich gut.
Jetzt möchte ich die 3D Bibliothek three.js verwenden. Bei dieser gibt es jedoch immer den Fehler

ReferenceError: THREE is not defined

Eingebunden im Head

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js" ></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/OrbitControls-2.js" ></script>

Mache ich das in einem separaten html-Dokument, klappt alles - im ioBroker nicht.
Was mache ich hier falsch? Jemand eine Idee?

Vielen Dank
Gruß ExMatador

@david-g
Hi,
ich verwende sowohl das audio als auch das Video-tag in einer kompletten html-Seite, dazu gehören auch die Controls wie play, mute, volume, forward/rewind und trackposition.
Es können mp4-Files angespielt werden, aber keine mkv.
Die Videos, die ja local vom Browser abgespielt werden, müssen via http erreichbar sein - mache ich über einen lokalen IIS.
Ich übergebe von einem vis-Dialog lediglich eine json-Liste von videos, die abgespielt werden sollen.
Klappt aber ziemlich gut, mittlerweile kam ich auch Radiosender abspielen.
Es fehlt mir noch eine Visualisierung der Frequenzen, vermutlich über das Mikrofon. Scheint mir recht schwierig zu sein.

Gruß ExMatador

@tbsjah
Ich hatte es aufgegeben.
Wie hast du es denn geschafft?
Gruß ExMatador