neue Visualisierung "webui" (alternative zu vis & vis-2)

Blockmove

Falscher Text

jogibear9988

ja, toIsoString gibt UTC zurück.

versuchs mal mit : .toLocaleString("lt")
https://stackoverflow.com/a/69462557/579623

Blockmove

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

@blockmove

ja, toIsoString gibt UTC zurück.

versuchs mal mit : .toLocaleString("lt")
https://stackoverflow.com/a/69462557/579623

Tja, so einfach ist es nicht.
Ich hab das Inputfeld auf Typ datetime-local stehen.
Das Format finde ich auch ganz gut so.

Ein .toISOString erzeugt: 2023-01-01T00:00:00.028Z
Ein .toLocaleString erzeugt: 1.1.2023, 01:00:00

Mit dem Format von toLocaleString kommt nun das Inputfeld nicht klar.

Smilie108

@Blockmove @jogibear9988
wenn ich

<input type="date" id="theDate" bind-prop:value-as-number='{"signal":"?dateselect","twoWay":true}' @focus="aktday" autofocus style="position:absolute;left:80px;top:7px;">

und dann

export function aktday(event: FocusEvent, eventRaisingElement: Element, shadowRoot: ShadowRoot, instance: HTMLElement) {
   var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;       
document.getElementById("theDate").value = today;
}

Im Javascript eingebe dachte ich es müsste gehen aber bekomme dann

Uncaught TypeError: jsObject is null
    assignAllScripts http://192.168.1.91:8082/webui/dist/frontend/scripting/ScriptSystem.js:209

bzw    else {
                            e.addEventListener(evtName, (evt) => {
                                if (!jsObject[script])
                                    console.warn('javascritp function named: ' + script + ' not found, maybe missing a "export" ?');
                                else
                                    jsObject[script](evt, e, shadowRoot, instance);
                            });
                        }
                    }
                    catch (err) {
                        console.warn('error assigning script', e, a);
                    }

Beim Element habe ich auf autofocus dachte das würdee beim laden den focus auslösen oder nicht ?

Danke im voraus

den werte wenn ich in auswähle als ts bekomme ich auch in den iobrocker wollte nur das mit dem aktuellen tag noch lösen

Blockmove

@Smilie108
Also zur Anzeige funktioniert dieses Binding bei mir:

new Date(__0).toISOString().split('T')[0];

Wenn du die __0 weglässt, wird das aktuelle Datum genommen.

Worlik

@jogibear9988 Kann man eigentlich irgendwie die absolute Positionierung komplett abschalten? Ich baue gerade eine Responsive Design für Handy, Tablet und PC und es wäre einfach absolut genial, wenn man nicht jedes mal position: absolute und das andere Gedöns rausschmeißen kann. Grundsätzlich packt er ja beim Drag-Drop alles korrekt in den DOM, aber fügt eben immer die Position hinzu. Ich vermute fast, ich sehe nur irgendeinen Schalter nicht. Oder geht das tatsächlich nicht?

Blockmove

@jogibear9988

Hallo Jochen,
wollte auch gerade was mit Javascript testen und bekomme auch den Fehler

Uncaught SyntaxError: Identifier 'importMapWidgets' has already been declared (at importmap.js:1:1)
:8082/favicon.ico:1 
        
        
       Failed to load resource: the server responded with a status of 404 (Not Found)
IobrokerHandler.js:96 ioBroker handler ready.
:8082/dist/frontend/common/IobrokerHandler.js:1 
        
        
       Failed to load resource: the server responded with a status of 404 (Not Found)
es-module-shims.js:743 Uncaught (in promise) TypeError: 404 Not Found http://ctrl01.fritz.box:8082/dist/frontend/common/IobrokerHandler.js
    at doFetch (es-module-shims.js:743:21)
    at async fetchModule (es-module-shims.js:751:17)
    at async es-module-shims.js:823:40
    at async loadAll (es-module-shims.js:469:5)
    at async topLevelLoad (es-module-shims.js:541:5)
    at async checkHash (runtime.html:73:17)
ScriptSystem.js:184 error parsing javascript TypeError: Failed to resolve module specifier "/webui/dist/frontend/common/IobrokerHandler.js". Invalid relative url or base scheme isn't hierarchical.
    at resolveIfNotPlainOrUrl (es-module-shims.js:130:15)
    at resolve (es-module-shims.js:410:38)
    at es-module-shims.js:848:32
    at Array.map (<anonymous>)
    at es-module-shims.js:844:45
    at async loadAll (es-module-shims.js:469:5)
    at async topLevelLoad (es-module-shims.js:541:5)
    at async ScriptSystem.assignAllScripts (ScriptSystem.js:178:28)
    at async HTMLElement.loadScreenData (ScreenViewer.js:88:30)
assignAllScripts @ ScriptSystem.js:184

Kann es sein, dass der Pfad hier:

es-module-shims.js:743 Uncaught (in promise) TypeError: 404 Not Found http://ctrl01.fritz.box:8082/dist/frontend/common/IobrokerHandler.js

nicht stimmt?

webui-Version: 0.22.7

VG
Dieter

jogibear9988

@blockmove

wie sieht der import im script oben aus?? so:

import { iobrokerHandler } from "/webui/dist/frontend/common/IobrokerHandler.js";
import { Runtime } from "/webui/dist/frontend/common/Runtime.js";

Blockmove

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

@blockmove

wie sieht der import im script oben aus?? so:

import { iobrokerHandler } from "/webui/dist/frontend/common/IobrokerHandler.js";
import { Runtime } from "/webui/dist/frontend/common/Runtime.js";

Ja

import { iobrokerHandler } from "/webui/dist/frontend/common/IobrokerHandler.js";
import { Runtime } from "/webui/dist/frontend/common/Runtime.js";

/**
* buttonclick - 'click' event of <button>
* @param {PointerEvent} event
* @param {Element} eventRaisingElement
* @param {ShadowRoot} shadowRoot
* @param {HTMLElement} instance
*/
export function buttonclick(event, eventRaisingElement, shadowRoot, instance) {
    alert("Test");
}

jogibear9988

@worlik

im moment nicht, ich brauche da noch eine wirkliche strategie, was soll dann beim ziehen passieren?

Im Moment ist es so: Parent ist display:grid, dann zieht man zwischen den grid zellen hin und her, parent ist display:flex, dann ändert man nur die dom reihenfolge, alles andere ist absolut.

Die abstraktion dafür ist hier: https://github.com/node-projects/web-component-designer/tree/master/packages/web-component-designer/src/elements/services/placementService (falls es jm. interessiert)
Da kann man sicher noch vieles verbessern, oder auch noch andere Placement modi einfügen

jogibear9988

@blockmove

ich prüfe es nacher. Bin gerade nicht am PC

Worlik

@jogibear9988 Also mir würde es reichen, wenn man vielleicht eine Auswahlmöglichkeit hätte für die folgenden Varianten:

Inline = keinen Displaystyle und keine Positionierung einfügen
Absolute = Aktuelles Verhalten
Grid = display: grid
Flex = display: flex

Könnte man als Einstellung für den Designer einfach aus einer Liste wählen. Man könnte das für neue Varianten dann einfach erweitern.

Ich habe auch gut 20 kleinere Bugs bemerkt (z.B. geht das Stylesheettab und Javascript bei Escape einfach zu oder der Codeeditor zeigt in der Splitview aktuellen Code nicht an, wenn man Dinge per Drag'n'Drop in den Designer zieht). Müssen die Kleinigkeiten alle als einzelner Report auf Github?

Habe aber nun alles in webui umgesetzt was ich vorher in vis hatte (plus einiges mehr). Vis hab ich schon gelöscht.

Blockmove

@worlik said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988 Also mir würde es reichen, wenn man vielleicht eine Auswahlmöglichkeit hätte für die folgenden Varianten:

Inline = keinen Displaystyle und keine Positionierung einfügen

Absolute = Aktuelles Verhalten

Grid = display: grid

Flex = display: flex

Könnte man als Einstellung für den Designer einfach aus einer Liste wählen. Man könnte das für neue Varianten dann einfach erweitern.

Fände ich auch besser so.
Das Weglöschen der styles geht zwar im Code schnell. Aber als Voreinstellung beim Anlegen neuer Elemente wäre es schon praktisch.

Worlik

@blockmove @jogibear9988 Vielleicht könnte es auch noch eine Variante "Automatisch => Aktuelles Verhalten" geben. Die wäre dann Default. Wenn ich das richtig verstehe, wird die Variante aktuell anhand des Zielcontainers gewählt. Das funktioniert aber in der Praxis selten, weil der Zielcontainer dafür ein Padding braucht oder Größer sein muss. Bei einem Margin gilt immer der umgebende Container und es ist schwierig das Ziel zu treffen. So weiß man im Prinzip selten, was genau das System dann tut. Wäre es vielleicht möglich den DOM-Pfad bei der Drag-Operation irgendwo anzuzeigen, an welchem dann eingefügt wird? Bei einem Grid bekommt man zum Beispiel im Moment nur etwas eingefügt, wenn nicht alle columns gefüllt sind (weil dann noch Platz im Grid ist). Hat man ein 3er Grid und da sind 3 Sachen schon drin, müsste ja in der zweiten Zeile nun ein neuer Eintrag erzeugt werden, da man hier aber kein "Ziel" hat, lässt sich nichts einfügen. Verstehst du, wie ich das meine?

jogibear9988

@worlik said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988 Also mir würde es reichen, wenn man vielleicht eine Auswahlmöglichkeit hätte für die folgenden Varianten:

Inline = keinen Displaystyle und keine Positionierung einfügen

Absolute = Aktuelles Verhalten

Grid = display: grid

Flex = display: flex

Könnte man als Einstellung für den Designer einfach aus einer Liste wählen. Man könnte das für neue Varianten dann einfach erweitern.

Ich habe auch gut 20 kleinere Bugs bemerkt (z.B. geht das Stylesheettab und Javascript bei Escape einfach zu oder der Codeeditor zeigt in der Splitview aktuellen Code nicht an, wenn man Dinge per Drag'n'Drop in den Designer zieht). Müssen die Kleinigkeiten alle als einzelner Report auf Github?

Habe aber nun alles in webui umgesetzt was ich vorher in vis hatte (plus einiges mehr). Vis hab ich schon gelöscht.

Die Frage ist ja, Ich füge kein position absolute hinzu, wo soll das element laden wenn du es reinziehst? An welcher position?

Irgendwo sollte die Bugs halt erfasst sein. Kannst in einem Ticket auch ne Liste mchen. Ich hoffe das irgendwann mehr Leute mitarbeiten, sonst wird die Liste einfach nur größer...

jogibear9988

@worlik said in neue Visualisierung "webui" (alternative zu vis):

@blockmove @jogibear9988 Vielleicht könnte es auch noch eine Variante "Automatisch => Aktuelles Verhalten" geben. Die wäre dann Default. Wenn ich das richtig verstehe, wird die Variante aktuell anhand des Zielcontainers gewählt. Das funktioniert aber in der Praxis selten, weil der Zielcontainer dafür ein Padding braucht oder Größer sein muss. Bei einem Margin gilt immer der umgebende Container und es ist schwierig das Ziel zu treffen. So weiß man im Prinzip selten, was genau das System dann tut. Wäre es vielleicht möglich den DOM-Pfad bei der Drag-Operation irgendwo anzuzeigen, an welchem dann eingefügt wird? Bei einem Grid bekommt man zum Beispiel im Moment nur etwas eingefügt, wenn nicht alle columns gefüllt sind (weil dann noch Platz im Grid ist). Hat man ein 3er Grid und da sind 3 Sachen schon drin, müsste ja in der zweiten Zeile nun ein neuer Eintrag erzeugt werden, da man hier aber kein "Ziel" hat, lässt sich nichts einfügen. Verstehst du, wie ich das meine?

Wenn dein grid vorher eine Größe hat, und auch schon Spalten und Zeilen fest gelegt sind, dann geht das mit dem DragDrop einfach, ansonsten haperts da noch.
Ich weiß das der support dafür noch nicht so gut ist, aber das ist eben auch sehr viel arbeit, und da hab ich noch viel anderes was für mir höhere Prio hat.
Ich hatte hierzu hier auch zig Designer verlinkt: https://github.com/node-projects/web-component-designer/issues/28 das man schauen kann was man wie lösen ode rbesser machen kann. Aber wie gesagt, das braucht alles Zeit und Manpower

jogibear9988 created this issue in node-projects/web-component-designer

open look at other designers for ideas #28

Worlik

@jogibear9988 Ich würde das Element als Child des Elements einfügen, in welches man es zieht. Zur Zeit wird das ja sogar entsprechend markiert (grün hervorgehoben). Im moment wird das auch ganz genau so schon im DOM eingefügt, aber eben dann mit Positionierungsdaten versehen. Das schlimmste ist im Moment, das die Positionsdaten auch hinzugefügt werden, wenn man das Element anklickt und dabei versehentlich ein Drag-Event auslöst. Danach ist dann erstmal das Layout zerschossen und man muss es via Code-Editor wieder fixen oder hoffen, dass der DOM ansonsten nicht verändert wurde.

jogibear9988

@blockmove said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

@blockmove

wie sieht der import im script oben aus?? so:

import { iobrokerHandler } from "/webui/dist/frontend/common/IobrokerHandler.js";
import { Runtime } from "/webui/dist/frontend/common/Runtime.js";

Ja

import { iobrokerHandler } from "/webui/dist/frontend/common/IobrokerHandler.js";
import { Runtime } from "/webui/dist/frontend/common/Runtime.js";

/**
* buttonclick - 'click' event of <button>
* @param {PointerEvent} event
* @param {Element} eventRaisingElement
* @param {ShadowRoot} shadowRoot
* @param {HTMLElement} instance
*/
export function buttonclick(event, eventRaisingElement, shadowRoot, instance) {
    alert("Test");
}

Mach im Monent aus der relativen URL (im Import) einfach mal ne absolute, also "http://ip:port/" davor, ich schau wie ich den import später als standard einfüge.

Odr wenn du ihn nicht brauchst, schmeiß Ihn raus.

jogibear9988

@worlik

du kannst auch immer im "styles" tab im propertygrid das position wieder löschen.

Ja ist im Moment nicht optimal, für nicht absolut positionierte Layouts. Ideen sammeln, und ich schau was ich dann iwann umsetze

Blockmove

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

@worlik

du kannst auch immer im "styles" tab im propertygrid das position wieder löschen.

Ja ist im Moment nicht optimal, für nicht absolut positionierte Layouts. Ideen sammeln, und ich schau was ich dann iwann umsetze

Nur kein Stress. Das gehört sicher nicht zu den A-Themen.
Man kann mit dem Designer recht gut arbeiten.

Wie sieht es eigentlich mit Doku aus?
Vielleicht wäre ein Wiki nicht schlecht?
Da könnte ich evtl. auch helfen.

NEWS