Layouten im Browser, mit simplem Javascript: ReLayX

[theSplit]

Hallo,

durch diesen Thread https://ngb.to/threads/14259-CSS-Boxen-floaten bin ich auf die Idee gekommen das layouten etwas zu vereinfachen und habe dafür ein Javascript verwendet damit man die Funktionalität gleich im Browser hat.

Dabei ist ReLayX enstanden - bisher ist das ganze zu 50% fertig, es lassen sich allerdings schnell und unkompliziert Layouts damit entwerfen die entweder Freiform oder an einem einem benutzerdefinierten Raster ausgerichtet und geblockt werden können.

Das ganze ist zu 50% fertig weil keine Speicher- (Speichern ist mit 1-9 nun möglich, laden mit Shift+1-9, Leeren aller Daten mit der Rücktaste) oder Exportfunktionen enthalten sind um die Layouts aus dem Programm heraus in Code zu wandeln, dafür können diese aber schnell erstellt und dann mittels Screenshot bzw. speichern des Canvas als Bilddatei, auf dem das Skript arbeitet, in Photoshop gezogen werden.

Dabei stehen Werkzeuge wie Spiegeln und Gruppierung zu Verfügung die allesamt mit dem Raster arbeiten das man in der Index.html des Skripts konfigurieren kann.

Ein paar Screenshots wie diese Funktionen aussehen folgen. Würde mich freuen wenn es von dem ein oder anderen hier getestet und kommentiert wie nutzbar das Skript ist. Die Hilfe ist beim Start eingeblendet und kann mit "i" ein- und ausgeblendet werden.

Folgend die Screenshots die einen kurzen Überblick geben, darunter das Projekt im Anhang.
PS: Falls das doch zuviel Werbung ist, würde ich einen Mod bitten den Thread nach Werbung zu verschieben - obwohl ich nicht weiß ob es die Zielgruppe treffen würde.

Und nun die Screenshots:


Der Programmcode (ältere Version) - zum Starten entpacken und die Index.html öffnen.
Anhang anzeigen ReLayX-master.zip

oder direkt auf Github (immer aktuell*) unter:
https://github.com/jrie/ReLayX

* Labels können hinzugefügt werden
* Speichern geht nun über den LocalStorage und nicht mehr SessionStorage

Vielen Dank im Voraus!

 

[theSplit]

Hallo, ich habe nun auf der Projektseite eine neue Version herausgebracht mit kleineren Veränderungen und bin nun auch endlich von dem schwarzen Background abgerückt der das Canvas eingesogen hat.
Hat jemand das Tool bisher wirklich mal nutzen können? Oder ist der Umweg über den Browser zu layouten, anstelle das gleich in einer anderen Anwendung direkt zu machen?

Ich frage daher, ich würde gerne ein Feature anfangen zu schreiben, mit dem es möglich sein soll Div Layout Code erstellen zu lassen, als HTML mit CSS, basierend auf den "geblockten" Layout und anderen Einstellung mittels CSS wie beispielsweise Floating/Clearing.
Eventuell könnte, wenn diese Idee funktioniert das ganze zu deklarieren, man auch mit FlexBox Layouts arbeiten was ja mehr oder minder Standard werden wird. Zumindest die Basics glaube ich covern zu können...

---

Ist die Frage, wäre das für den ein oder anderen interessant oder ist die Idee/Umsetzung nicht mehr lohnenswert/zeitgemäß, weil vielleicht schon andere Tools so etwas covern? (Das zu hören wäre gut, dann braucht man vielleicht keine zweite "Lösung"...)

Im weiteren hatte ich ja mal versuch an einer Desktop Version zu arbeiten, mich hatte aber die Motivation verlassen das gute Stück - auch mangels der Übung/Kenntnisse, in entsprechenden Code zu übersetzen. Dafür gab es einfach zu wenig Feedback.
Und auf dem Desktop hat man halt nicht die Browserumgebung, dafür aber mehr Freiheiten was Exportierung und andere Features angeht.

 

[KingJamez]

Ansich finde ich das eine Interessante Idee, wobei ich persönlich auf ein Gridlayout mit Sass setze, dadurch bin ich flexibel und schneller.

Das Tool selber kann ich so, in der Form nicht benutzen, der Linke rand des Grids wird bei mir nicht korrekt erkannt, ab dem Punkt auf dem Bild kann ich nicht weiter nach Links. Nach rechts kann ich allerdings aus dem Rand raus.

Dementsprechend ist auch die Auswahl der einzelnen Felder schwierig.

Für reines layouting finde ich ein extra Tool zu viel, dafür gibt es Mockup Tools, Sketch, AI, etc. Wenn man im nächsten schritt noch Prototypen und Designen könnte, wäre es schon wieder sehr cool.

Ich würde eine Option liefern, ob Flexbox oder normales Float genutzt werden soll. Den Weg, warum du über Canvas gehst verstehe ich nicht ganz, die Abweichungen zwischen dem Canvas und einer regulären CSS Box können erheblich sein. Wenn du mit reinen CSS (HTML)- Boxen arbeiten würdest, könntest du das ganze Tool viel schneller voran bringen und man hätte eine 1zu1 Ausgabe.

Die Shortcuts kann ich mir nicht merken, eine Werkzeugpalette und die Veränderungen des Cursors, bei bestimmten Aktionen wären gut (siehe Photoshop).

DesktopApp finde ich hier gar nicht falsch, würde allerdings, um Doppelarbeit zu sparen auf App.js, Electron, oder irgendwas anderes, was CrossPlattform apps erstellt, mit JS und HTML.

Meine Arbeitsumgebung, damit du den Fehler evtl. finden kannst, ich kann aber auch gerne mal auf die suche gehen, am leichtesten wäre es, wenn du mir einen Ansatz gibst, wo ich mal schauen soll im Code.

MacBook Pro
3 Monitore (2* 1920*1080, 1* Retina MbB)
OSX 10.11.5
Getestet mit
Chromium: 51.0.2704.106
Chrome: 51.0.2704.103
FF - aber der geht

 

[theSplit]

Danke für dein Feedback KingJamez, ich versuche mal nach der Problemsuche darauf einzugehen.

Zur Problemlösung:
Ich bin mir nicht ganz sicher ob ich aus dem Thumbnail so richtig schlau werde was in Chrome schief läuft. Kannst du eine große Ansicht in deinen Beitrag hineineditieren?
Hast du die Startparameter für den Skriptaufruf in der Index HTML abgeändert?

Falls ja, hast du vermutlich Startpunkt oder Endpunkt für das Grid nicht korrekt angepasst.

Ansonsten, wenn das nicht der Fall ist.

Stellen im Code die Relevant sein könnten:
Die Parameter für das Grid, also die Parameter mit dem das Skript aufgerufen wird, werden hier ermittelt:
https://github.com/jrie/ReLayX/blob/master/js/ReLayX.js#L81
bis Zeile 95.

Vielleicht liefert Chromium einen anderen Datentyp für typeof(gridStart)
typeof (gridStart) === "object"

Ich sehe aber gerade, da ist ein kleiner "Denkfehler" - dort wo er die Werte einließt wird nur "GridStart" überprüft und zum ermitteln der hinteren Grenzen des Gitters anstelle von "GridEnd" auch GridStart auf Typ Object überprüft (Zeile 89) - dass ist so nicht ganz korrekt.


Die Zeichenroutine für das Grid findest du hier:
https://github.com/jrie/ReLayX/blob/master/js/ReLayX.js#L345

Wenn ich mich richtig erinnere gab es mal ein Problem mit halben Pixelangaben (in Chrome?) - ob das immer noch der Fall ist kann ich dir aber spontan nicht sagen; aber falls das Grid nur verschoben ist, hat es damit nicht zu tun und er "scheint" es ja auch zu zeichnen.


----------

Zu deinem Feedback:

Für reines layouting finde ich ein extra Tool zu viel, dafür gibt es Mockup Tools, Sketch, AI, etc. Wenn man im nächsten schritt noch Prototypen und Designen könnte, wäre es schon wieder sehr cool.

Wenn das Tool (Boilerplate) Code generieren könnte, wäre man theoretisch nicht nur auf das reine Layouten beschränkt und es würde nützlicher werden, weil man dann sein Layout direkt im Browser ansehen könnte, so jedenfalls die Idee.

Kannst du etwas ins Detail gehen was du mit Prototyping und Designen indirekt meinst? Mockup Tools sagen mir aber ein klein wenig etwas und ich verstehe auch den Sinn dahinter.

Ich würde eine Option liefern, ob Flexbox oder normales Float genutzt werden soll. [...]

Mit Flexbox habe ich leider bisher nur wenig machen können, aber wenn die Einteilung (programmiertechnisch) von "logischen" Einheiten/Blöcke einmal programmiert ist, kann man vermutlich die Layouts als Basis-Code zur weiteren Anpassung, im Editor der Wahl, generieren lassen.

Den Weg, warum du über Canvas gehst verstehe ich nicht ganz, die Abweichungen zwischen dem Canvas und einer regulären CSS Box können erheblich sein. Wenn du mit reinen CSS (HTML)- Boxen arbeiten würdest, könntest du das ganze Tool viel schneller voran bringen und man hätte eine 1zu1 Ausgabe.

Das Canvas habe ich deßhalb gewählt weil man darauf direkt damit interagieren kann wenn man es ein wenig so entwickelt. Und damit man sich im Browser eine Vorstellung davon machen kann, wie man mit dem Platz umgeht. Dazu müsste man lediglich einen Browser der Wahl im Basismodus starten und das Skript laden, und man hat ein "praktisches" 1 zu 1 Feedback wie das Layout im Browser wirkt.

Der Weg, das direkt im Browser umzusetzen stelle ich mir schwer vor, so etwas wie das Grundgitter kann man nicht über Parameter direkt steuern, also vermutlich nur Bilder die repeated werden mit diversen Background Images aus denen das "Mustergitter" erzeugt wird , den Fensterbereich klickbar machen könnte man jedoch wiederum mit etwas Tricksereien.

Über diesen Ansatz/Modus könnte man aber intensiver nachdenken, vermutlich wäre dies sogar noch um einiges einfacher. Das müsste man mit den Kernfunktionalitäten testen in wie weit es umsetzbar wäre. Um somit erstellte "Divs" allerdings frei zu positionieren müsste man sie eben aber auch positionieren - und dann würde man den normalen Layoutflow zerstören. Oder man muß darauf basierend eine "statische" Ansicht basteln, die Probleme wären wie beim Canvans, meiner Meinung nach die gleichen das gezeichnete in Layout zu übersetzen.

Die Shortcuts kann ich mir nicht merken, eine Werkzeugpalette und die Veränderungen des Cursors, bei bestimmten Aktionen wären gut (siehe Photoshop).

Die Shortcuts sind in der Tat etwas was die Nutzung kompliziert macht - aber so komplex sie auch sein mögen, sie sind unabdingbar damit so etwas wie "Spiegeln" horizontal oder vertikal funktioniert oder andere Funktionen. Auch wenn man dies mit Schaltflächen lösen kann. Aber die Grundentscheidung Shortcuts zu nutzen liegt unter anderem daran: Weniger Aufwand, weil keine "GUI" erstellt werden muß und damit die Zeichenfläche "sauber" von Fremdelementen bleibt.

DesktopApp finde ich hier gar nicht falsch, würde allerdings, um Doppelarbeit zu sparen auf App.js, Electron, oder irgendwas anderes, was CrossPlattform apps erstellt, mit JS und HTML.

Stimmt, wäre eine Option das so zu machen. Wobei ich außer bei Electron das ja auch von Atom-Editor genutzt wird, nicht weiß in weit diese Komponenten funktionieren. Wäre also auf meiner Seite sehr Arbeitsintensiv aber so fern eine gute Dokumentation vorliegt kann ich mir diese Technologien gerne ansehen. Ist aber eben nicht eine Sache von 5-10 Minuten..

Aber man muß sich für eine Plattform entscheiden, ausloten ob diese die Anforderungen (gut) erfüllt oder ob es Limitierungen in irgend einer Form gibt und falls ja/nein sich auch mit der Technologie vertraut machen.

Im Browser ist das schon relativ klar was geht und was nicht, ohne jetzt auf einzelne Technologien im Detail einzugehen.
Auf dem Desktop hat man nicht die schöne Browserumgebung, hat aber wieder andere Vorteile, je nachdem in welcher Sprache... it aint easy glaube ich sich auf etwas einzuschießen. Vor allem auch wenn dann noch Fragen wie Hardwareanforderungen/Performance/Features und Co mit denen man entwickeln könnte einhergehen.

Fernab, das ist alles gutes Futter auch wenn mich manches schon wieder ins Kreiseln bringt!

 

[KingJamez]

Also ich war jetzt mal ein bisschen auf der Suche,
[src=javascript]
typeof (gridStart) // object
[/src]
auch die Initialisierungsparameter scheinen zu stimmen, ich kann hier keinen Fehler erkennen.
Wenn ich allerdings deine CSS bearbeite
[src=css]
#mainContainer{
/*text-align: center;*/
width: 100%;

}
[/src]
ist das Problem fast weg, ich komme dann nur nicht genau bis an die Außenkanten, evtl. ist das aber auch Programmbedingt, oder bedingt durch mein Trackpad. Das Problem scheint zu sein, sobald du centerest, egal wie ob mit "margin: 0 auto" oder mit "text-align: center".
Der Bereich um den nach Rechts verschoben wird (um zu zentrieren), steht mir auf dem Canvas beriech nicht zur Verfügung und wird nach rechts hin rausgeschoben. Das Problem kann auch MacOS intern sein, durch das Retina display. Lässt sich ja aber leicht feststellen, wenn ein Windows/ Linux Nutzer mal das Tool startet.

Halbe Pixelangaben in Chrome sehe ich nicht als das Problem, die Rendertechnik wurde überarbeitet, damit sind viele alte Probleme weg, aber ein paar neue da, das führt den Thread dann aber Off- Topic.

Kannst du etwas ins Detail gehen was du mit Prototyping und Designen indirekt meinst? Mockup Tools sagen mir aber ein klein wenig etwas und ich verstehe auch den Sinn dahinter.

Prototyping erklärt sich am besten wenn man sich bestehende Tools ansieht. Facebook geht hier einen Intressanten weg und nennt es Design Prototyping .
Mit Design meine ich, am ende auch Bilder und Designelemente einladen kann.

Das Canvas habe ich deßhalb gewählt weil man darauf direkt damit interagieren kann wenn man es ein wenig so entwickelt. Und damit man sich im Browser eine Vorstellung davon machen kann, wie man mit dem Platz umgeht. Dazu müsste man lediglich einen Browser der Wahl im Basismodus starten und das Skript laden, und man hat ein "praktisches" 1 zu 1 Feedback wie das Layout im Browser wirkt.

Richtig, beantwortet aber nicht die Frage, Layouts sind heute nicht mehr starr und Responsive Layouts mit Canvas umzusetzen, wird dann ordentlich anstrengend.

Der Weg, das direkt im Browser umzusetzen stelle ich mir schwer vor, so etwas wie das Grundgitter kann man nicht über Parameter direkt steuern, also vermutlich nur Bilder die repeated werden mit diversen Background Images aus denen das "Mustergitter" erzeugt wird , den Fensterbereich klickbar machen könnte man jedoch wiederum mit etwas Tricksereien.

Click Handler sind hier kein Problem, da kommt es eher auf die Struktur des Codes an, das alles ganz sauber läuft. Für das Grundgitter fällt mir spontan SVG ein, oder weiterhin Canvas, nur für das Gitter!

Über diesen Ansatz/Modus könnte man aber intensiver nachdenken, vermutlich wäre dies sogar noch um einiges einfacher. Das müsste man mit den Kernfunktionalitäten testen in wie weit es umsetzbar wäre. Um somit erstellte "Divs" allerdings frei zu positionieren müsste man sie eben aber auch positionieren - und dann würde man den normalen Layoutflow zerstören. Oder man muß darauf basierend eine "statische" Ansicht basteln, die Probleme wären wie beim Canvans, meiner Meinung nach die gleichen das gezeichnete in Layout zu übersetzen.

Frei Zeichenbar stellt immer ein Problem dar, weil man dann absolute Posititionierung nutzen müsste, allerdings setzt der Masonry Effekt (Pinterest) das ja auch ein. Man könnte vorher diverse Grundeinstellungen tätigen, anhand dieser Grundeinstellungen kann man dann mit HTML Elementen "zeichnen", denkbar wären: "Masonry Effekt", "Static Grid", "Flex Grid", "Columns", "Rows".

Weniger Aufwand, weil keine "GUI" erstellt werden muß und damit die Zeichenfläche "sauber" von Fremdelementen bleibt.

Ok, aber das Aufwand argument zählt nicht und "Fremdelemente" kann man ausblenden/ einblenden, wie du es mit der Info auch tust

Stimmt, wäre eine Option das so zu machen. Wobei ich außer bei Electron das ja auch von Atom-Editor genutzt wird, nicht weiß in weit diese Komponenten funktionieren. Wäre also auf meiner Seite sehr Arbeitsintensiv aber so fern eine gute Dokumentation vorliegt kann ich mir diese Technologien gerne ansehen. Ist aber eben nicht eine Sache von 5-10 Minuten..

Ich arbeite öfters mit electron. Der gesamte Code ist clientseitig, es simple Events, mit denen ich Clientseitig mit Electron interagieren kann, was aber kaum nötig ist. Electron selber ist nicht, wie App.js zb. ein Server, sondern wirklich eher ein Browser den man auf Steroide bringen kann.

 

[theSplit]

Ich habe das ganze mal unter Chrome unter Linux getestet und zumindest die Darstellung funktionierte.

Aber was nicht richtig hingehauen hat war das Zeichnen der Maus, hier wurden falsche Werte verwendet, deßhalb konnte man die Maus auch nicht "innerhalb" der Canvas Zonen voll verwenden. Das habe ich auf Github behoben. (DrawMouse)

Im weiteren gab es noch Probleme in Chrome mit den zeichnen generell, dort ist das ganze jetzt vereinfacht. (CheckMouseDown, CheckMouseUp Funktionen).

Getestet unter Google Chrome für Linux.

Proof:

KingJamez, teste bitte nochmal mit dieser Version.

 

[KingJamez]

getestet und bestätigt! es geht jetzt auch bei mir.