[Modul] [BETA] JSLive - animierte Javaskript Anzeigen für IP-Symcon und IPSView

Link zum Wiki

Liebe Symcon Community,

Wichtig: Dieses Modul ist im Status einer BETA, es kann/wird Fehler enthalten, auch kann es noch zu größeren Änderungen kommen!
Bitte beachte die Infos, zum Melden von Fehler und Feature-Request. (Siehe unten)

Es ist so weit, nach Monaten von Arbeit, kann und darf ich Heute nun eine neue Modulsammlung vorstellen. Es hat viele Nerven gekostet, auch hat jetzt wahrscheinlich der ein oder andere ein paar graue Haare mehr.

Was ist JSLive und wie funktioniert es?
JSLive (Javascript-Live) wurde von mir entwickelt, um Variablen in IP-Symcon mittels Javascript live dazustellen und verändern zu können. Dafür nutzt es als Ausgabequelle den Webhook von IPS.

Warum wurde dafür ein Modulsammlung entwickelt?
Sicherlich gibt es für viele der unten genannten Module bereits Lösungen, diese sind aber zumeist schwer in der Konfiguration, nicht anpassbar, oder halt eben nicht Live.
Für meine Visualisierung verwende ich IPS-View, und genau dafür habe ich das Modul entwickelt.
Wenn ich auf mein Tablet schau möchte ich bei bestimmtem werten Änderungen Live sehen, damit ich rechtzeitig darauf reagieren kann.

Ziele des Moduls?

  • Native Integration in IP-Symcon ohne Zusatzsoftware
  • Verwendung auf jeden Betriebsystem möglich
  • Leicht einzurichten
  • Individuell anpassbar
  • Verwendbar in IPS-View und AIO-Neo
  • Für Experten vollumgänglich anpassbar, in jedes Modul kann auch ein eigenes Template Vorlage geladen werden, oder durch die Verwendung des Custom Moduls.

Wo kann ich die Modulsammlung herunterladen?
Das Modul ist im Symcon-Store unter den Titel „JSLive“ in der Beta Verfügbar.

Wo bekomme ich weitere Informationen zum Modul her?

Welche Vorraussetzungen muss mein IPS erfüllen?
Es ist nur nötig das ihr ein IPS mit der Version 5.3 oder höher verwendet.

Wie kann ich die Module in IPSView und AIO Neo einbetten?
Du kannst entweder die Module per Webview Element einbetten, oder du verwendest die ~HTMLBox die bei jedem Modul mit erstellt wird.

Welche Inhalte sind aktuell vorhanden und welche sind für die Zukunft noch geplant.
Die Module werden etappenweise ausgerollt. Nachfolgend befindet sich eine Liste mit den aktuellen Status der Entwicklung:

  • JSLive Splitter - BETA - DOKU
  • JSLive AdvTextfield - BETA
  • JSLive Chart – BETA
  • JSLive ChartRadar – BETA
  • JSLive ColorPicker – BETA
  • JSLive Custom – ALPHA
  • JSLive DateTimePicker – BETA
  • JSLive DoughnutPie – BETA - DOKU
  • JSLive Gauge - BETA - DOKU
  • JSLive Calender – BETA
  • JSLive Progressbar - BETA

Warum werden die Module etappenweise ausgerollt?
Dieses dient zur Erleichterung bei der Behebung von Fehler und Umsetzung von Feature-Requests.
Derzeit ist geplant jede Woche ein neues Modul auszurollen, sofern es zum Ende der Woche die finale Alphaphase erreicht hat und das Modul der Vorwoche Fehlerfrei läuft.

Wie melde ich Fehler und Feature-Requests?
Aufgrund der Vielzahl an unterschiedlichen Modulen, bitte ich darum Fehler und Feature-Requests unter folgenden Link zumelden:

Info für Symcon Mitarbeiter.
Ohne die stetige Verbesserung von Symcon wäre dieses Modul so nicht möglich, dafür DANKE. Da ich in Zukunft plane das Modul als Stable zu releasen, wäre es bereits jetzt schön, wenn ihr einmal einen Blick über das Projekt werfen könnten und mir vorab festgestellte Probleme mitteilen könnten. (Ich rede hier von Einhaltung der Richtlinien). Gerne schicke euch vorab eine Version mit allen Modulen.

Danksagung
Ich möchte mich hiermit bei @Fonzo und @Burki24 für die tatkräftige Unterstützung beim Testen und Finden der Fehler bedanken. Danke das ihr so viel Zeit für dieses Projekt geopfert habt, ohne euch wäre ein Release in der Qualität nicht möglich gewesen.
Danke.

Gruß:
Swen

P.S. Beispiele folgen im übernächsten Post und Rechtschreibfehler könnt ihr behalten :grin:

Kleine Anleitung zum Import vorgefertigen Konfigurationen von@Burki24
13 „Gefällt mir“

0.9.9.5

  • Gauge Fix: Needle options don´t work on Compass
  • Gauge Add: More Needle Options
  • Gauge Add: Needle Circle Options to RadialGauges

0.9.9.4

  • Chart Fix empty space on Barcharts
  • Chart Fix, No Axes defined on new Instances

0.9.9.3

  • Chart Overhaul Axes Generation
  • Chart Fix: Stacked Charts
  • Chart Fix: Bool Charts (Axes)

0.9.9.0

  • Add: JSLiveCalendar Modul

0.9.7.5 Build 3

  • Chart Add: Stacked Axes
  • Chart Add: New Options „Start at Zero“ and „Override Start at Zero“ (only use for Barcharts)
  • Chart Fix: Bool variables not show stepped line
  • Chart Fix: Async Loading don`t load Same ID

0.9.7.5 Build 2

  • RadarChart Fix: ScaleOptions not changed

0.9.7.5

  • Dougtnut/Pie Fix: Show NAN when no Profil selected
  • Chart Fix: Staggerd not work if one Dataset group is set 0

0.9.7.4

  • Gauge Fix: Font only updatet on ValueChange

0.9.7.3

  • Gauge Rem: Color Unit from Ticks
  • Gauge Add: FontStyle Unit to Plate
  • DoughnutPie Fix: Configurationbug if Title in Dataset not Set
  • DoughnutPie Change: Profil configuration from Variable to Dataset
  • DoughnutPie Fix: FontSize cant be changed if FontFamiliy not set
  • RadarChart Fix: Configurationbug if Title in Dataset not Set

0.9.7.1

  • All Modules: Add Override Size Option

0.9.7

  • Add: Colorpicker Modul
  • Chart: Fix Datareduction „Live“ on HighRes Charts

0.9.5.1

  • Gauge: Add option exactTicks
  • Gauge: Add ValueBox Font Color
  • Gauge: FIx Compass not loading after FontFamily defined
  • Charts/Radchart: Add override Pointstyle und Pointsize to Datasets

0.9.5

  • Add: JSLiveProgressbar

0.9.4

  • Gauge: Fix Preloaddata bug
  • Gauge: Fix Min/Max no float value allow
  • Add: JSLiveChart
  • Add: JSLiveChartRadar

0.9.2 Build 2

  • Gauge: Fix Pullmode
  • Add: DougtnutPie Modul
  • Fix: Configuration Export no Script export

0.9.2

  • Fix: Alpha-Slider Bug
  • Add: Instance-Name and Date to Export-Filename

0.9.1

  • Add Modul JSLive (Splitter)
  • Add Modul JSLiveGauge

Beispiel einer Gauge: (Wichtig: der Kreis und Text in der mitten wurden mit IPS-View drübergelegt.)
Gauge
17916-SymconJSLiveGauge.json (2,6 KB)

Beispiel2: Gauge2
41736-SymconJSLiveGauge.json (2,5 KB)

Na denn von mir auch mal ein kleines Beispiel:

GIF 23.05.2021 20-54-37

NACHTRAG: Hier mal ein Demo zum Importieren in das Modul:
56359-SymconJSLiveGauge.json (2,1 KB)

Bitte dran denken, die Variablen-ID nach dem Import an Eure anpassen !!!

Super gemacht, hab’s gleichmal (als Html Code) ausprobiert.
Gut wäre es, wenn ein Beispiel, z.B. Leistungsgauge aus dem Vorschlag von den eingestellten Parametern erklärt wäre.

Ich bin dran

2 „Gefällt mir“

Hoffe das reicht euch so. :smiley:

3 „Gefällt mir“

Genial, das hat mir im IPS Studio bisher immer gefehlt!
Gruß, Michael

Für das Wochenende ist der Release des DougtnutPIe Moduls angesetzt.

Was euch erwartet:
image
22734-SymconJSLiveDoughnutPie.json (4,2 KB)

image
53436-SymconJSLiveDoughnutPie (1).json (2,4 KB)

1 „Gefällt mir“

Topp, was du da entwickelst. Das gefällt mir sehr gut.

Eine Frage noch zum Verständnis. Ist das „nur“ für IPSView oder auch für das Webfront? Das konnte ich aus der Doku nicht 100% erkennen.

Geht auch einfach in die Webfront, man(n) muß/müßte die Pixel allerdings anpassen, hier ein Bild mit Auto = 0 , guggst Du :wink:

1 „Gefällt mir“

Sehr schön. Dann mache ich mich auch mal ans Werk :slight_smile:

Habe schon überlegt ob ich für IPSview nochmal eine eigne Htmlbox erstellen (Versteckt) die dann immer die automatische höhe hat und für die Iframe höhe dann schonmal mit einer Höhe beim erstellen vor zudefinieren.

1 „Gefällt mir“

Der Text meint den Höhe iframe für die Webfrontausgabe?

Ja :grin:, hab mich etwas schlecht ausgedrückt.

Ändern wirst du ihn dann trotzdem können, aber z.B. beim anlegen einer Gauge würde die Höhe erstmal mit 500px definiert sein.

Herzlichen Dank für die Umsetzung!
Ich verwende im Moment Grafana, möchte aber - wenn alles läuft - auf dein Modul umstellen.
Ein Fehler ist mir aufgefallen:
Wenn Werte aktualisiert werden, fällt mir ab und zu die Nadel kurzzeitig ganz nach unten.
Durch Zufall habe ich jetzt aber festgestellt, dass dies nur auf meinem Android-Tablet passiert.
Starte ich die View über den Browser am Windows-PC und lasse beide Anzeigen (Tablet und PC-Monitor) parallel laufen, so stelle ich dies nur am Tablet fest.

Hast du eine Idee, was das sein kann?

Gruß
Peter

Fehler Nadel

Aktuell noch nicht, wenn du die gauge im bowser öffnest dann rechtsklick untersuchen wird dann etwas in der console angezeigt, irgend ein Fehler?

Mit was öffnest du die Gauge auf den Android Tablet?

Acer

P.S. Ich bau nachher noch ein paar debug ausgaben in Javascript-Console ein.

Fehler wird keiner angezeigt. Am PC funktioniert es aber auch und am Tablet gibt es keinen Rechtsklick.
Der Fehler tritt aber tatsächlich nur am Tablet mit IPSView auf.
Ich habe es gerade nochmals mit IPSView und auch dem WebFront am PC probiert → kein einziger Aussetzer.
IPSView läuft am Tablet mit der aktuellsten Version.

Vermute, das da werte nicht richtig angekommen, bzw zu hoch gesetzt werden.
Ich schau gleich nochmal in den code.

Es muss auf jeden Fall etwas mit der Kombination IPSView am Android-Tablet zu tun haben, denn sonst konnte ich den Fehler noch nirgendwo feststellen.