neue Visualisierung "webui" (alternative zu vis & vis-2)
-
@smilie108 said in neue Visualisierung "webui" (alternative zu vis):
@jogibear9988
Kannst du dir wenn du mal zeit hast am test unter smilie108 den sample 2 ansehen und mir sagen was ich machen muss das das javascript richtig ist ?Danke im voraus ;)
so sollte es gehen:
/** * @param {BaseScreenViewerAndControl} instance */ export function init(instance) { const toggleMenuButton = instance.shadowRoot.querySelector('.toggle-menu'); const sidebar = instance.shadowRoot.querySelector('.sidebar'); //debugger; toggleMenuButton.addEventListener('click', function() { sidebar.classList.toggle('open'); }); }aber auch mit blockly:
(nee okay, damit geht es nicht, da fehlt das toggle... da baue ich was, muss ĂŒberlegen)
aber mit javascript direkt am event:
in den scripten gibt es noch 2 globale variablen IOB und RUNTIME, wenn du z.B. einen screen öffnen willst, signale steuern usw....
Check my ioBroker webui - a vis alternative
see: https://github.com/iobroker-community-adapters/ioBroker.webui -
in den scripten gibt es noch 2 globale variablen IOB und RUNTIME, wenn du z.B. einen screen öffnen willst, signale steuern usw....
@jogibear9988
mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?Sorry aber so manche verknĂŒpfung ist mir noch nicht ganz klar ;
Danke
-
@jogibear9988
mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?Sorry aber so manche verknĂŒpfung ist mir noch nicht ganz klar ;
Danke
@smilie108 said in neue Visualisierung "webui" (alternative zu vis):
@jogibear9988
mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?Sorry aber so manche verknĂŒpfung ist mir noch nicht ganz klar ;
Danke
ich bin sicher das das open mit dem code gesezt wird, was es bewirkt bin ich nicht sicher...
Dein ganzer html code ist ja falsch, da ist body, html und ein script tag enthalten.ich rÀum mal auf...
bei mir geht der click nun, wenn ich deine mediaquery anpasse (die gröĂe darin).Eine Media query bezieht sich immer auf den ganzen browser, nicht auf die gröĂe des kleinen designer fensters. Das ist html standard da kann ich nix machen.
musst mal im sampe "responsive/simple" schauen, da hab ich ein beispiel fĂŒr eine "container-query", die geht dann auch in dem designer fenster richtig.
wenn du html&css code in webui kopierst, musst du es schon ein bisschen anpassen. body & html tags sollten raus, im css code musst dann auch die Verweise von body&html Àndern (meist passt es wenn du diese durch :host ersetzt, aber das kann man nicht pauschal sagen.
HĂ€ngt einfach damit zusammen, das jeder webui screen seinen content in einem shadowdom rendert, dadurch kannst du ja auch mehrere darstellen.Check my ioBroker webui - a vis alternative
see: https://github.com/iobroker-community-adapters/ioBroker.webui -
@smilie108 said in neue Visualisierung "webui" (alternative zu vis):
@jogibear9988
mhm bist du dir da sicher ? weil eigentlich sollte er dann das menue einfahren geht aber nicht. can es sein das das sidebar.classlist.toggle('open') nicht greift ?Sorry aber so manche verknĂŒpfung ist mir noch nicht ganz klar ;
Danke
ich bin sicher das das open mit dem code gesezt wird, was es bewirkt bin ich nicht sicher...
Dein ganzer html code ist ja falsch, da ist body, html und ein script tag enthalten.ich rÀum mal auf...
bei mir geht der click nun, wenn ich deine mediaquery anpasse (die gröĂe darin).Eine Media query bezieht sich immer auf den ganzen browser, nicht auf die gröĂe des kleinen designer fensters. Das ist html standard da kann ich nix machen.
musst mal im sampe "responsive/simple" schauen, da hab ich ein beispiel fĂŒr eine "container-query", die geht dann auch in dem designer fenster richtig.
wenn du html&css code in webui kopierst, musst du es schon ein bisschen anpassen. body & html tags sollten raus, im css code musst dann auch die Verweise von body&html Àndern (meist passt es wenn du diese durch :host ersetzt, aber das kann man nicht pauschal sagen.
HĂ€ngt einfach damit zusammen, das jeder webui screen seinen content in einem shadowdom rendert, dadurch kannst du ja auch mehrere darstellen.@jogibear9988
Ok danke fĂŒr die informationen ;) habe das mal eben wie von dir oben beschrieben mit dem chatgpt probiert und dachte das passt dann schon
Sorry
Aber danke -
bsw in deinem screen:
* { container-type: inline-size; }dadurch wird jedes element zu einem container fĂŒr eine container query. sicher nicht gewollt, oder?
.dashboard { height: 100vh; }das element mit der klasse "dashboard" wird 100% der viewport höhe groĂ. ja kann man so machen, wenn man den screen nun aber in einen anderen packt, ist dieser 100% so groĂ wie das browser fenster.
Ich wĂŒrde da einfach ":host {height: 100% }" schreiben. dann ist der screen so groĂ wie sein container, wenn er der Ă€Ăerste ist passt das ja auchich hab mal noch mehr angepasst...
Check my ioBroker webui - a vis alternative
see: https://github.com/iobroker-community-adapters/ioBroker.webui -
bsw in deinem screen:
* { container-type: inline-size; }dadurch wird jedes element zu einem container fĂŒr eine container query. sicher nicht gewollt, oder?
.dashboard { height: 100vh; }das element mit der klasse "dashboard" wird 100% der viewport höhe groĂ. ja kann man so machen, wenn man den screen nun aber in einen anderen packt, ist dieser 100% so groĂ wie das browser fenster.
Ich wĂŒrde da einfach ":host {height: 100% }" schreiben. dann ist der screen so groĂ wie sein container, wenn er der Ă€Ăerste ist passt das ja auchich hab mal noch mehr angepasst...
-
im moment ist drag/drop im projektbaum kaputt: https://github.com/mar10/wunderbaum/issues/82
-
drag drop geht wieder
-
@jogibear9988 Danke
@smilie108
hab mal ein beispiel mit funktionierendem menĂŒ gemacht: http://129.159.205.3:8082/webui/runtime.html#screenName=responsive/sample2/sample2Check my ioBroker webui - a vis alternative
see: https://github.com/iobroker-community-adapters/ioBroker.webui -
So alles Notwendige meiner ioBroker-Funktionen habe ich nun auf webui umgezogen đ
vis 1 ist deinstalliert.
Alles was jetzt noch fehlt ist Zeit đ
@jogibear9988 nochmal herzlichen Dank fĂŒr deine tolle Arbeit!
Der Einstieg war wegen meiner fehlenden HTML-Kenntnissen zwar steiniger als bei vis oder vis 2, aber fĂŒr mich hat sich der Umstieg gelohnt.Was ich die letzten Tage erst entdeckt habe, ist wie nĂŒtzlich chatgpt bei html und css ist.
The difference beetween Man and Boys:
The price of their toys đ -
So alles Notwendige meiner ioBroker-Funktionen habe ich nun auf webui umgezogen đ
vis 1 ist deinstalliert.
Alles was jetzt noch fehlt ist Zeit đ
@jogibear9988 nochmal herzlichen Dank fĂŒr deine tolle Arbeit!
Der Einstieg war wegen meiner fehlenden HTML-Kenntnissen zwar steiniger als bei vis oder vis 2, aber fĂŒr mich hat sich der Umstieg gelohnt.Was ich die letzten Tage erst entdeckt habe, ist wie nĂŒtzlich chatgpt bei html und css ist.
@blockmove Kannst du mal Screenshots oder so zeigen?
Bin ja auch blutiger AnfĂ€nger mit WebUI und wĂŒrde gerne mal sehen wie es aussehen könnte.
Bitte keine Fragen per PN, die gehören ins Forum!
Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
-
@blockmove Kannst du mal Screenshots oder so zeigen?
Bin ja auch blutiger AnfĂ€nger mit WebUI und wĂŒrde gerne mal sehen wie es aussehen könnte.
@wendy2702
Hi etwas ist zb schon hier unter
Screenshots sind hier:
https://forum.iobroker.net/topic/72159/zeigt-her-eure-webui-visualisierung
Das sind meine AnfÀnge und weiteres ;) -
@smilie108
hab mal ein beispiel mit funktionierendem menĂŒ gemacht: http://129.159.205.3:8082/webui/runtime.html#screenName=responsive/sample2/sample2@jogibear9988 DAAANNNKKEEE ;) wollte heute abend schon schauen wie das geht ;) aber ist eh einfacher als ich dachte
Nochmals vielen Dank fĂŒr all deine BmĂŒhungen. -
@smilie108
hab mal ein beispiel mit funktionierendem menĂŒ gemacht: http://129.159.205.3:8082/webui/runtime.html#screenName=responsive/sample2/sample2 -
@jogibear9988
muss und oder kann ich denn die toggle funktion mit dem menu anklicken auch nchmal setzen damit er das menue wieder ausblendet ? geht das auch ĂŒber ein set property?@smilie108 said in neue Visualisierung "webui" (alternative zu vis):
@jogibear9988
muss und oder kann ich denn die toggle funktion mit dem menu anklicken auch nchmal setzen damit er das menue wieder ausblendet ? geht das auch ĂŒber ein set property?hĂ€? versteh die frage nicht....
Das menĂŒ wird doch schon ein/ausgeblendetCheck my ioBroker webui - a vis alternative
see: https://github.com/iobroker-community-adapters/ioBroker.webui -
@smilie108 said in neue Visualisierung "webui" (alternative zu vis):
@jogibear9988
muss und oder kann ich denn die toggle funktion mit dem menu anklicken auch nchmal setzen damit er das menue wieder ausblendet ? geht das auch ĂŒber ein set property?hĂ€? versteh die frage nicht....
Das menĂŒ wird doch schon ein/ausgeblendet -
@jogibear9988
HI ne wenn du bei dir am test den link anklickst lÀd er zwar die seite aber menue bleibt offen@smilie108 said in neue Visualisierung "webui" (alternative zu vis):
@jogibear9988
HI ne wenn du bei dir am test den link anklickst lÀd er zwar die seite aber menue bleibt offenin meinem bsp. gefixt, aber nur bei link1
ich setze einfach das class attribute auf sidebar, dadurch verschwindet das open. Mit Javascript wĂŒrde auch toggle gehen, in meiner simplen scriptsprache gibts das noch nicht, baue ich aber noch ein -
Hallo Jochen,
ich wollte heute das erstemal bind-prop:class verwenden.
Eigenlich was recht Simples. Einfach nur bei nem span die Klasse umschalten um einen Text mit einer Animation blinken zu lassen.
Also abhÀngig vom Wert einer Variable zwischen zwei class umschalten.
Aber ich kriegs nicht gebacken đ
Ich hab auf dem Testserver mal einen Screen erstellt (blockmove/bindpropclassKannst du mir bitte auf die SprĂŒnge helfen?
Vielen Dank und Viele GrĂŒĂe
DieterThe difference beetween Man and Boys:
The price of their toys đ -
@wendy2702 said in neue Visualisierung "webui" (alternative zu vis):
@blockmove Kannst du mal Screenshots oder so zeigen?
Bin ja auch blutiger AnfĂ€nger mit WebUI und wĂŒrde gerne mal sehen wie es aussehen könnte.
Hallo wendy,
hier mal screenshot von einem Teil meienr Visu.
Mir geht es aktuell erstmal um die FunktionalitÀt und nicht das Design. Da ist noch massiv Luft nach oben.
Was grafisch alles möglich ist, siehst du ja bei den Screenshot von @Smilie108.
Ich hab mich in den letzten Jahren oft mit vis rumgeÀrgert. Dann hab ich mir vis-2 angeschaut.
Da hakte es zum dem Zeitpunkt auch noch an ganz vielen Ecken.
Also hab ich mir die anderen Visualisierungen angeschaut und bin dann bei webui hÀngengeblieben.
Da es ganz nah an HTML bleibt, ist es meiner Meinung nach auch recht zukunftssicher.VG
DieterThe difference beetween Man and Boys:
The price of their toys đ -
@wendy2702 said in neue Visualisierung "webui" (alternative zu vis):
@blockmove Kannst du mal Screenshots oder so zeigen?
Bin ja auch blutiger AnfĂ€nger mit WebUI und wĂŒrde gerne mal sehen wie es aussehen könnte.
Hallo wendy,
hier mal screenshot von einem Teil meienr Visu.
Mir geht es aktuell erstmal um die FunktionalitÀt und nicht das Design. Da ist noch massiv Luft nach oben.
Was grafisch alles möglich ist, siehst du ja bei den Screenshot von @Smilie108.
Ich hab mich in den letzten Jahren oft mit vis rumgeÀrgert. Dann hab ich mir vis-2 angeschaut.
Da hakte es zum dem Zeitpunkt auch noch an ganz vielen Ecken.
Also hab ich mir die anderen Visualisierungen angeschaut und bin dann bei webui hÀngengeblieben.
Da es ganz nah an HTML bleibt, ist es meiner Meinung nach auch recht zukunftssicher.VG
Dieter@blockmove Danke fĂŒr die Antwort.
Werde mich mal versuchen.
Bitte keine Fragen per PN, die gehören ins Forum!
Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen BeitrĂ€ge zu scrollen? Wenn du dich fĂŒr ein Konto anmeldest, kommst du immer genau dorthin zurĂŒck, wo du zuvor warst, und kannst dich ĂŒber neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und BeitrĂ€ge positiv bewerten, um anderen Community-Mitgliedern deine WertschĂ€tzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden đ
Registrieren AnmeldenSupport us
399
Online32.9k
Benutzer83.2k
Themen1.3m
BeitrÀge