Html und CSS selber schreiben
-
Hallo zusammen,
ich habe jetzt ein wenig mit VIS her rum probiert.
Aber so richtig warm werde ich Aktuell leider noch nicht.
Daher Frage ich mich, ob man nicht selber ein HTML Gerüst bauen kann und mit CSS Formatiert.
Also ohne WYSWYG Editor.
Das habe ich wohl 20 mal schneller fertig als diese wilde geklicke sorry
Ich würde dann das fertige Layout in VIS mit widgets erweitern wollen um die Objekte zuordnen zu können.
Die Widgets müsste ich dann halt noch von Hand anpassen.
Eine Template Ebene wäre wohl cool.
Möglich wird das wohl sein, aber wie?
-
Hallo zusammen,
ich habe jetzt ein wenig mit VIS her rum probiert.
Aber so richtig warm werde ich Aktuell leider noch nicht.
Daher Frage ich mich, ob man nicht selber ein HTML Gerüst bauen kann und mit CSS Formatiert.
Also ohne WYSWYG Editor.
Das habe ich wohl 20 mal schneller fertig als diese wilde geklicke sorry
Ich würde dann das fertige Layout in VIS mit widgets erweitern wollen um die Objekte zuordnen zu können.
Die Widgets müsste ich dann halt noch von Hand anpassen.
Eine Template Ebene wäre wohl cool.
Möglich wird das wohl sein, aber wie? `
Du hast alle Möglichkeiten :- gar kein vis benutzen und nur Info bekommen und die visualisieren:
https://github.com/ioBroker/ioBroker.so … er/example
-
nur eigene HTML CSS verwenden, aber vis trotzdem benutzen um um Hosting sich keine Gedanken zu machen. Dafür einfach HTML Basic, wo alle CSS Einstellungen im vis einfach lehr sind. Dann kannst du praktisch fertige Bausteine mit binding einfügen.
-
du kannst eigene WidgetSet schreiben, wo du deine Widgets ohne viele Einstellungen machst. Nur OID und das War es.
-
Sorry das ich mich erst jetzt melde aber der Tag hat einfach zu wenig Stunden.
> - nur eigene HTML CSS verwenden, aber vis trotzdem benutzen um um Hosting sich keine Gedanken zu machen. Dafür einfach HTML Basic, wo alle CSS Einstellungen im vis einfach lehr sind. Dann kannst du praktisch fertige Bausteine mit binding einfügen.
Ich kann dir noch nicht so richtig folgen leider, daher bitte ich um Nachsicht.Mein erster Gedanken war:
Ich erstelle mir ein View. Dann erstelle ich dort ein wenig Text mach ein grep nach nach dem Text in Ordner /opt/iobroker und dann werde ich schon ein HTML Datei finden die dann frei schnauze Misshandeln kann.
Meine Überraschung war dann das der Text in JSON steht.
Meine Wunschvorstellung ist folgende:
Ich bastel mir ein Layout aus HTML, CSS, Jquery.
Dieses besteht dann wohl aus Tabs ( Navigation ) und vielleicht Dialoge.
Nur das zusammenspiel zwischen meinem Layout und Vis scheint mir nicht so einfach zu sein wie ich mir das erhofft hatte.
Widgets zu verwenden macht ja durchaus sinn, man muss die Welt ja nicht neu erfinden.
Kann ir da jemand auf die sprünge helfen?
-
Moin,
ist jetzt schon ziemlich lange her, doch ich konnte niemand anderes im Forum finden, der das gleiche vorhat. Bist du mit deinem eigenen HTML und CSS weiter gekommen?
Ich würde mich nämlich gerne von VIS abwenden und lieber meine eigene Seite von scratch entwickeln, weil mir VIS zu altbacken und diese ganze Widget-Fummlerei zu nervig ist.@Bluefox sagte in Html und CSS selber schreiben:
- gar kein vis benutzen und nur Info bekommen und die visualisieren:
Socket.io habe ich jetzt installiert und die Beispieldatei läuft auch schon. Wie würde man nun am effizientesten alle State-Changes visualisieren? Angenommen ich habe ein simples
<div>, das mir die Helligkeit einer Lampe anzeigen soll. Muss ich jetzt bei jedemonUpdate()das ganze Arraystatesdurchgehen und die entsprechenden Werte in die jeweiligen<div>s einsetzen? Oder geht das auch "intelligenter" mit z.B. einem event listener? Also dass ich nur die Helligkeit in dieses<div>schreibe, wenn auch genau dieser State geändert wurde.EDIT: Ich würde z.B. Handlebars benutzen, um im HTML-Dokument eine Art Platzhalter einzufügen und diese dann auffüllen zu lassen: http://handlebarsjs.com/guide/#nested-input-objects
Also,<div>{{shelly.blabla.helligkeit}}</div> -
Das könntet ihr euch auch mal anschauen.
https://forum.iobroker.net/topic/31521/test-widget-json-template
Da habt ihr weitgehend Freiheiten und müsstet euch nicht um den datenabruf kümmern.
Ob das für komplexe views noch performances ist müsste man testen.
Bei jeder Änderung würde der Inhalt neu geschrieben werden.
Ansonsten seit ihr an dem gleichen Punkt, an dem andere Entwickler sich die vis alternativ Adapter erstellt haben welche sich selbst um ein eigenes Layout kümmern. -
@OliverIO sagte in Html und CSS selber schreiben:
Das könntet ihr euch auch mal anschauen
Das kommt dem auch schon sehr nahe und hat auch diese "Templates", mit denen sich Platzhalter füllen lassen können.
@OliverIO sagte in Html und CSS selber schreiben:
Ansonsten seit ihr an dem gleichen Punkt, an dem andere Entwickler sich die vis alternativ Adapter erstellt haben welche sich selbst um ein eigenes Layout kümmern.
Von VIS möchte ich wirklich weg
Ist ja ganz schön mit dem WYSIWYG-Editor und dem Drag & Drop, aber selbst die Adapter der anderen Entwickler liegen mir nicht so. Für einzelne Buttons ganz schick, aber z.B. ganze Responsive-Designs haben bei mir nie funktioniert und VIS komplett zerstört. Ich musste über SSH die Config-Datei ändern, damit der VIS-Editor wieder aufrufbar war (Löschen im Editor ging nicht mehr). Und bei einem Adapter müsste man auch jedes einzelne Element in ein Widget umschreiben...Im Moment stelle ich es mir so vor, dass ich eine HTML-Seite baue, dabei schon auf ein schickes Responsive-Design setze (z.B. Bootstrap) und über den Socket.io-Adapter dann nur noch die Elemente dynamisch aktualisieren und agieren lasse.
-
@KLVN
Noch mal eine komplett vis unabhängige Methode.
Du installierst dir nur den folgenden Adapter
https://github.com/ioBroker/ioBroker.simple-api
Dann kannst du die Webseite komplett unabhängig von Vis aufbauen. Nachteil für Objekt und Statusänderung musst du Pollen. -
@OliverIO sagte in Html und CSS selber schreiben:
Du installierst dir nur den folgenden Adapter
https://github.com/ioBroker/ioBroker.simple-apiWären Sockets da nicht die bessere Methode?
Ich habe den ersten Versuch gestartet und Werte kann ich schon im HTML anzeigen lassen (ist der Code aus dem Beispiel):
onUpdate: function (id, state) { setTimeout(function () { console.log('NEW VALUE of ' + id + ': ' + JSON.stringify(state)); states[id] = state; document.getElementById('foo').innerHTML = states["shelly.0.white0.brightness"]["val"]; }, 0); },Nur erscheint mir das wenig sinnvoll, jetzt jedes einzelne Element in die
onUpdate()zu stecken und dann aktualisieren zu lassen. Wie würde man das besser angehen bzw. wie macht es VIS? Ließe sich das schon direkt im HTML einbetten? Also so etwas wie<div data-id="shelly.0.white0.brightness">und dann eine Funktion, die jedes<div>nimmt, die ID ausliest und dann ein Update durchführt. -
Hallo zusammen,
Ich kapere mal unverschämterweise diese Diskussion, fand das Thema recht passend:Ich suche eine möglichkeit innerhalb eines Vis.Views den Rechtsklick kpl. abzuschalten.. (für eine Visualisierung auf einem Touch Display... da ist das Kontextmenu welches gerne aufgeht nicht so toll.
es gibt ja die möglichkeit mittels: <body oncontextmenu="return false"> den rechtsklick zu unterbinden.. nur wie bekomme ich das in meine View ?
Eventuell hat ja jemand eine Idee ?
Gruss Ulrich
-
-
@OliverIO sagte in Html und CSS selber schreiben:
ähem, dann sind wir wieder bei socket.io wie von bluefox oben schon geschrieben.
Deshalb war ich verwundert darüber, weshalb du Simple-API vorgeschlagen hast
Für so eine kontinuierliche Verbindung finde ich Sockets besser und bin auch schon etwas weiter gekommen. Hier mein bisheriger Fortschritt:
Im Moment kann ich die States schon visualisieren (pull), aber noch keine selber setzen (push). Mit Vue.js soll es aber sehr einfach sein, so eine bi-direktionale Verbindung aufzubauen. Ich bastle mal weiter herum, denn wenn dieses Grundgerüst erst einmal steht, ist der Rest einfach.
