ReLayX2 - Electron/Browser (web)designer layout prototyping tool

[theSplit]

Einen wunderschönen guten Abend.



Ich bin die Tage mal meine Git Repos durchgegangen was interessant wäre, dabei bin ich über alten Quelltext gestoßen von einer Idee, welche mich schon länger beschäftigt hatte aber nur just 4 fun betrieben aber nicht fortgeführt wurde.

Konkret handelt es sich dabei um ein (Web)Designer Layout Prototyping tool. Dafür habe ich den ganzen alten Code nach bestem Wissen überarbeitet und finde das es ein guter Ansatz ist der Spaß bringen könnte.

Basis für die Entwicklung ins Vanilla Javascript und Electron für die Desktop Version. Das ganze Tool kann online genutzt werden: Klick für Github Browser Version funktioniert aber auch mit Electron auf dem Desktop.

Und hier suche ich hier nach Mitstreitern die die Idee weiter puschen können und wollen oder auch Leute mit Ideen zur Verbesserung des Tools

Aktuell sind noch Features geplant die das Layouting mit dem Werkzeug vereinfachen sollen, zum Beispiel:
- Beschriftungen für Elemente (in und für Electron) aktuell gehen Beschriftungen nur im Browser über Javascript-"prompt"-Dialog Eingabe
- Hineinladen von Bildern in Container mit Vorschau
- "Hot Corners" um Container in ihrer Größe ohne Positionsänderung zu verändern
- Import und Export des Layouts (kein Quellcode))
- Kreisförmige Container
- deine Idee hier..

Hier noch ein paar wichtige Links:
Das Repository | Live Browser Version | Letzter aktueller Release | Fehler/Wünsche und Bug Reports | Readme und aktuelle Keyboardshortcuts und generelle Nutzung

 

[theSplit]

Update: Beschriftungen (Labels) der Container ist nun funktionstüchtig und findet sich auch in der Online Live Version.

 

[theSplit]

Update: Bild-Drag & Drop funktioniert auf dem Desktop ohne weitere Umwege und die Designs lassen sich korrekt speichern und laden.

In der Browser Live Version funktioniert dies nur unter vorbehalt, Layouts lassen sich anlegen und mit Bildern bestücken, nach dem Speichern und neuem Laden sind diese Referenzen allerdings ungültig da die Bildateten in Base64 kodiert geladen werden und nicht wie in der Electron Version mit Pfadangabe.

Ich bin noch am überlegen ob es Sinn macht für den Browser extra Code zu entwickeln. Vielleicht hat auch jemand daran Interesse?
Nachtrag zum Speichern: Das Laden und Speichern von Bildern funktioniert nun auch im Browser.


Hier nochmal eine kurze Demo mit neuer Funktionalität (Desktop) und den, auch dafür verbesserten Labels.



Kurzer Guide zur Nutzung. Ein Containerelement muß ausgewählt sein, das Bild per Drag und Drop (PNG, JPG, GIF) wird dann in selbigen Container importiert.

 

[theSplit]

Hier noch etwas mehr Liebe: Hot Corners sind implementiert und auch eine Option die Ansicht von Bildern mit "Shift + I" ab oder einzuschalten.



Außerdem werden beim Drag und Drop die Bilder direkt angezeigt, was das unnötige Abwählen des aktiven Containers entfallen lässt.

 

[theSplit]

Neu hinzugefügt: "T"-Taste schaltet die Sichtbarkeit von Containern aus und an.

Hier eine ziemlich coole Demo mit Bildern mit Transparenzen in Aktion:

 

[theSplit]

Es gab noch ein paar Updates, Highlight:
Unter Electron werden die Daten in "saves" unter "slot_NUM.txt" abgelegt. NUM = Zahl 1 bis 9 für den jeweiligen Slot.
Im Browser wird aber nach wie vor der LocalStorage (limitiert auf 5 bzw. 10 MB je nach Browser) verwendet.

Außerdem wurde das Gruppieren wieder vereinfacht, vorher gab es bei der Auswahl etwas Schluckauf so das vorher abgewählt wurde.
Als nächstes Feature ist der Im- bzw. Export der geplant.

 

[theSplit]

Heute der erste Release (v0.2.2) für Windows und Linux - aktuell kein macOS Release weil keine macOS zur Hand.

Was es gibt:
- Windows 32 und 64 Bit Builds
- Linux 32 und 64 Bit (AppImages und .deb-Pakete)

Selbst bauen? Ist auch Möglich. Klick.

Letzter aktueller Release | Live Browser Version

Anstelle vom Import und Export war das Packaging dran um endlich mal einen nutzbaren Release zu haben.

Unter anderem noch folgende Änderungen:
- OpenSans wird als Default Schrift verwendet über alle Plattformen hinweg.
- Speicherort Fehlerbehebung [kw]saves/slot_NUM.txt[/kw] funktioniert nun korrekt unter den Electron Builds.