Womit erstellt man (solche) grafischen Oberflächen?

[dmant]

Hallo,

Wie erstellt man grafische Oberflächen? Ich versuche mal zu erklären wie ich das meine..

Also mit PHP und HTML und MySQL erstelle ich mir derzeit meine "GUIs". Der Browser startet im Autostart und Kiosk Fullscreen Modus und ich habe die mysql Datenbank, php und weiteres wo ich einfach die Hintergrund setzen kann und gut...

Nun habe ich mir verschiedene angesehen aber ich verstehe nur Bahnhof.

Womit erstellt man "relativ" einfach so grafische Oberflächen wie z.b. mit php?

Mit qr creator z.b. Bekomme ich ein fenster hin... Aber das ich einfach nur grau und eckig und die Buttons und ja... Gefällt mir alles absolut garnicht..

Was gibt es alles für Möglichkeiten für einen Einstieg für "hin und wieder" aber schon "schön"

Ich hoffe meine Erklärung ist einigermaßen verständlich.

Danke.

[cronoik]

Welche Programmiersprache ist denn deine "hin und wieder"-Programmiersprache?

[reox]

Welche Programmiersprache ist denn deine "hin und wieder"-Programmiersprache?

Ich vermute PHP.

Naja es gibt eine reihe von CMS Systemen und natürlich tonnenweise CSS Libs wie Bootstrap.
Aber was genau soll die GUI Library tun? Auf dem Backend System ein Frontend erstellen, zB anhand von Datenbank Feldern? Ein bestehendes Frontend aufhübschen? Was ist dein Ziel das du erreichen willst?

[Meillo]

Du musst verschiedene Aspekte unterschieden:

1) Welche Technologien werden verwendet? (webbasiert, nativ, ... fuer welche Programmiersprache, fuer welche Plattformen)
2) Wie einfach ist es oder wieviel Aufwand ist noetig? (z.B. Tk vs. GTK/Qt)
3) Wie schoen sieht es aus bzw. wie sehr kann man das Aussehen anpassen? (da spielt Theming mit rein)

Wo liegen fuer dich die Prioritaeten?

[Lord_Carlos]

Frontend wuerde ich in Angular mit z.B. Metal machen. Guck dir mal die Beispiele an: https://material.angularjs.org/latest/demo/autocomplete
Backend wuerde ich auch in node machen, es sei den php liegt dir nahe.

Alles in php + bootstrap geht sicherlich auch. Waere nicht mein Bier.

[dmant]

Also,

ich erstelle Websites in PHP, MySQL etc. Aber die Frage war an allgemeine grafischen Oberflächen gerichtet.

Also ich mache einfach mal ein Beispiel.

Wenn ich eine Android App haben möchte.. nehme ich Android Studio, mittels XML Files kann ich alles relativ "einfach" und "schnell" sehr "hübsch" machen.

Nun habe ich mein System.. Und ich möchte dem nun ein Interface verpassen.

Mit Touch und kA... Und ob jetzt Debian oder Raspbian oder was auch immer.. lassen wir jetzt mal dahin getellt..

nehmen wir mal den Raspberry... den gibt es mit Touchscreen usw. Ok. Raspbian basiert auch Debian.. Ich hoffe hier gibt es jetzt nicht so böse Kommentare gibt wie z.b. im Ubuntuforum... nun gut...

generell lässt sich das aber auch an ein eigenen Serversystem umsetzen.

Also nehmen wir mal einen Debian Server oder einen Raspberry mit Touch als "Basis"... "Debian bzw. Raspbian" ok..

Nun erstelle ich Scripts per Bash oder PHP oder wie auch immer.. Nun möchte ich ein grafisches Frontend aber eben "hübsch".

Ich erstelle mir einen Router oder NAS oder was auch immer. Ein Touch Display und möchte nun User anlegen für meinen NAS.. als hübschen Nebeneffekt möchte ich aber eben ein hübsches Frontend.

Buttons mit Animationen hier... Status dort.. was man auch eben "live" aktualisieren kann.. Wie ein "Programm" eben...

Bei PHP würde ich jetzt mit PHP und MySQL und Apache (local) und Chromium im Kioskmodus und Fullscreen arbeiten... aber auch chromium hat manchmal error.. gerade nach 2 - 3 tagen Dauerlaufzeit.. und ja.. das ist alles so ein murks..

gibt es da nicht eine einfache möglichkeit ein hübsches Live Frontend zu basteln? Was sich die daten einfach in einer Schleife aus der MySQL Tabelle holt.. und die Uhrzeit Live anzeigt und eben so "einfache" Dinge..

Bei PHP.. wenn ich einen Button habe.. läd die ganze Seite neu.. man sieht die refreshs und und und...

Das will ich alles vermeiden...

Ich finde keine passenden Beispiele.. aber so etwas z.b...

https://www.asustor.com/images/kindedit ... _40437.jpg

oder

https://aphnetworks.com/review/asustor_ ... e/ss11.jpg

Womit erstellt man so etwas....

[thoerb]

Bei PHP.. wenn ich einen Button habe.. läd die ganze Seite neu.. man sieht die refreshs und und und...
Das will ich alles vermeiden...

Dafür verwendet man Ajax (Json). Die Frage ist, willst du nun PHP verwenden und eine Weboberfläche bauen, oder würdest du dich auch in eine andere Programmiersumgebung einarbeiten wollen um das ganze nativ umsetzen zu können?

[Lord_Carlos]

Bei PHP.. wenn ich einen Button habe.. läd die ganze Seite neu.. man sieht die refreshs und und und...

Wenn Webbasierend OK ist, und du eher SQL Daten anzeigen willst, dann ist Angular + Metal ganz nett. Daten werden nachgeladen ohne das die Seite neu laedt.
Ich habe schon Angular "seiten" geschrieben, die in einer Java app eingebettet sind und jetzt in Krankenhaeuser benutzt werden. Fuer die benutzter sieht es aus wen jedes andere Desktop Program.
Also das mit java war nur weil es zusammen mit was alten Ausgeliefert wird.

Electron framework + Angular ist ganz beliebt.

Wenn du etwas haben willst was Unix Benutzter erstellt dann eher nicht so.

[dmant]

Ja,

also ich bin absolut gewillt auch etwas neues zu lernen. Wie ich ja oben schrieb hab ich mir auch schon QTCreator und Co angeschaut.

Nur womit ist sowas möglich?

Also ich sage mal so.. am ende soll ein Icon oder eine *.sh ein

ein Doppelklick bzw ein ./Name im Terminal und das Frontend startet.. und ja.. da ist eben alles.. und ich bin nicht mehr auch apache... chromium dies das jenes angewiesen.

pyGUI und Co.. das ist mir alles iwie zu "statisch" oder ich bin einfach nur zu blöd es "schön" hinzubekommen. Aber daher ja eben die Frage.. wie/womit macht man das?

Wenn man jetzt z.b. an die Software Kodi denkt... ja.. die haben ein nettes GUI.. Laut den DEVs ist das auf C++ aufgesetzt.. also das wäre dann glaube ich auch wieder Overkill...

Also ich brauche was womit ich eine "schöne" GUI machen kann und dann klicke ich auf einen Button wird dann mysql abgefragt oder ein script (bash script) ausgeführt.. und andersherum... "uhrzeit.sh" könnte jetzt jede sek die uhrzeit an die gui senden und die gui weiss.. ok.. uhrzeit.. muss ich da anzeigen....

aber ich denke wahrscheinlich wie immer viel viel zu kompliziert

[Meillo]

Deine Frage ist sehr allgemein und unspezifisch, darum scheint mir, irren die Leute mit ihren Antworten auch ein bisschen rum.

Grundsaetzlich muss man wohl Web-UIs und andere UIs unterscheiden. Das sind zwei sehr unterschiedliche Welten. Es wuerde den Antwortenden helfen, wenn du dich fuer eine der zwei Welten entscheiden koenntest.

Dir scheint viel an dem Begriff ``huebsch'' zu liegen. Ich kann das nachvollziehen, tue mir aber eher schwer damit, weil fuer mich der Programmieraufwand und die Funktionalitaet im Vordergrund stehen. Man kann fast mit jeder Technologie die Dinge huebsch machen, es erfordert oft nur mehr Aufwand. Der Weg der leider oft gegangen wird: Statt ein Button-Widget zu verwenden (weil das zu haesslich aussieht), nimmt man ein Bild, dem man On-Click-Events anhaengt. Das ist deutlich ``huebscher'', aber nur bei einfachster Bedienung gleichwertig. Alternative Bedienkonzepte wie Tab und Enter kennt es nicht oder Alt plus Shortkey. Aus solchen Gruenden ist fuer mich huebsch eher eine Quelle von tendenziell schlechterer Bedienbarkeit, gepaart mit mehr Programmieraufwand.

Aber nun gut: Die Moeglichkeit alles aus Bildern zusammenzusetzen hast du immer. Das ist der meiste Aufwand, bietet dir aber voellige Freiheit. Das geht sowohl im Web als auch in nativen Toolkits. Du verwendest einfach gar keine Widgets, sondern nur Bilder an die du Events haengst.

Wenn du nicht so weit gehen willst, dann solltest du unterscheiden zwischen dem Default-Aussehen eines Toolkits und konfigurierbaren Styles. Letztere lassen sich oft mit wenigen Befehlen ueber das ganze Interface drueber legen. Aber sie sind Grenzen unterworfen, da Widgets grundsaetzlich skalierbar ausgelegt sind und daher deren Aussehen auch skalierbar sein muss.


Konkret: Wenn du webbasiert arbeiten willst, dann findest du in den Antworten bisher bereits genug Stichwoerter. Wenn du eine native GUI haben willst, die sich mit wenig Aufwand erstellen laesst, dann schau dir Tk und dessen Styles an. Das wenigstens einfach und wenig Aufwand. (Ohne Style wirst du Tk sicher unmoeglich finden.) Ggf. kannst du dort ein fullscreen Canvas-Widget verwenden und deine UI pixelgenau aus Bilder zusammenzusetzen. Tk gibt's fuer alle modernen Scriptsprachen.

[thoerb]

Ich beschäftige mich seit ein paar Wochen mit Java-Swing. Mit der Netbeans-IDE kann man sich da ganz einfach was zusammen klicken. Bei Youtube gibt es eine Menge Tutorials dazu. Hat halt den Nachteil, dass du dafür die Java-Laufzeitumgebung benötigst. Und Swing ist halt vom Look nicht mehr ganz so frisch. Aber was Farben betrifft usw. kann man da ja selbst einiges machen.

Hier z.B: https://www.youtube.com/watch?v=SpKANTHXwmo

[dmant]

Nunja...

wie erstelle ich meine "GUIs".. egal ob WEB oder nicht...

Photoshop bzw GIMP...

Und dann wird alles aus daraus zusammengebaut.. ja.. genau das suche ich.. und welche ist da am "besten" und "einfachsten"?

Debian/Raspbian ONLY natürlich.

[MSfree]

Wenn man jetzt z.b. an die Software Kodi denkt... ja.. die haben ein nettes GUI.. Laut den DEVs ist das auf C++ aufgesetzt.. also das wäre dann glaube ich auch wieder Overkill...

Das sind doch zwei völlig unterscheidliche Welten.

Eines ist die Welt, die in einem Webbrowser läuft. Die eigentliche Anwendungen laufen auf dem Server, erzeugen HTML und Javascript, liefern das an den Browser, der die Sachen anzeigt. Die Deisgnarbeit für die Darstellung liegt also letztlich im HTML und Javscript, egal, welches Framework man nimmt.

Die andere Welt sind Anwendungen, die auf den Client laufen. Egal on LibreOffice, Kodi oder sogar Firefox sind in C/C++ geschrieben. Die Designabrbeit liegt hier im "richtigen" Anwenden von Toolkits wie GTK, KDE, Motif, Athena Widgets oder sogar Bare Metall X11-Aufrufen.

Es gibt kaum ein Toolkit, das sich für native Clientanwendungen und Weboberflächene gleichzeitig eignet. Das beste Toolkit ist das, in dem man sich am besten auskennt. Das Petentrezept gibt es schon gar nicht.

[Meillo]

wie erstelle ich meine "GUIs".. egal ob WEB oder nicht...

Photoshop bzw GIMP...

Dann ist recht klar, dass du einfach Bilder auf einem Canvas anordnen willst, denen du Events zuordnest. Das geht mit jedem Toolkit. Dabei ist das Aussehen der Toolkit-Widgets egal, weil du von denen eh nichts zu sehen bekommst. Alles was du machst, ist es Bilder, die du in Photoshop/Gimp erstellt hast, auf auf der Fensterflaeche zu positionieren und Events an sie zu haengen.

Ich wuerde sagen, dass es beliebig ist, welches Toolkit du verwendest. Es sollte vor allem zu deiner bevorzugten Programmiersprache und deiner IDE passen. (Ich kann dir keines empfehlen.)

[dmant]

Ja.. Welche könnte ich denn da nehmen?

Android Studio vereint das alles...

Also... Ja... Ich würde sowas sehr Quick and dirty umsetzen.

Nen bashscript was in ner while läuft...

If gui running... Sende jede sek Uhrzeit an gui...

Und eben alles andere auch.. Beim click führe bash Script aus.. Warte auf Antwort... Alles Quick and dirty.

Die gui entsteht in photoshop/gimp.

[reox]

Android Studio vereint das alles...

Android is ne ganz andere Sache. Hier gibts eine definierte API und definierte GUI Elemente. Alles was du in Android Studio so elegant machen kannst, sind die bestehenden Elemente verwenden.
Das gibt es zB bei QT auch und nennt sich da qtcreator

Also wenn du dich für ein Toolkit entscheidest, gibt es dort eben vorgefertigte IDEs (oder eben nicht).

[Lord_Carlos]

Wie Meillo schon schrieb, alle Elementer selber mit GIMP erstellen ist richtig viel Aufwand. Vor allem wenn man mal schnell die Farbe aendern will. Oder die Aufloesung des Programmes.
Und ich bezweifle das die meisten es so hinbekommen das es auch nur annähernd so gut aussieht wie ein vorhandenes Framework.

Wenn du einfach und gutaussehend haben willst kann ich das wirklich nicht empfehlen.

Ich wuerde sagen, dass es beliebig ist, welches Toolkit du verwendest. Es sollte vor allem zu deiner bevorzugten Programmiersprache und deiner IDE passen. (Ich kann dir keines empfehlen.)

Also wenn du z.B. pures php + html nimmst kannst du die besten Bilder erstellen und es wird immernoch nicht toll sein.
Das hier hast du ja dann immernoch:

Bei PHP.. wenn ich einen Button habe.. läd die ganze Seite neu.. man sieht die refreshs und und und...

________________________
Edit: Wenn es nicht schoen sein muss, guck dir mal Tkinter an, zusammen mit python.
https://www.youtube.com/watch?v=RJB1Ek2Ko_Y
Qt ist glaube ich ein ganz anderes Tier.

[heisenberg]

Die verbreiteten Skripsprachen(ruby, python, perl, ...) haben da vermutlich alle irgendwelche Toolkits die dem Paradigma der Skriptsprachen folgen:

Mit vergleichsweise wenig Aufwand zu Ergebnissen kommen. (Im Vergleich zu C/C++).

Ansonsten gäbe es da noch Gambas(Open Source Visual Basic).

Meine Empfehlung wäre da Dir eine Skriptsprache auszusuchen, falls Du noch keinen Favouriten hast. Mit Bash ist man begrenzt und es ist hilfreich, wenn man sich mit einer leistungsfähigeren Skriptsprache auskennt, bzw. Kompetenz dort aufbaaut, die man nutzen kann, wenn bash aufgrund der Begrenzungen nicht mehr sinnvoll einsetzbar ist.

Vielleicht gibt's hier ein paar Leute, die mit Skriptsprachen und GUIs schon Erfahrung gemacht haben.

[eggy]

Wie ich ja oben schrieb hab ich mir auch schon QTCreator und Co angeschaut.

Dann hast Du nicht aber nicht richtig oder nur recht kurz hingeschaut.
In den mitgelieferten Beispielen gibt es schon haufenweise Codeschnipsel, wie man von ner gewöhnlichen GUI wegkommt. Eigene Buttons, Stylesheets, GraphicItems. Schau Dir mal das Dashboard oder Coffe Machine Example an, wahrscheinlich beides nicht was Du willst, aber mögliches Touchinterface. Das Beispiel "Qt Quick Extra" zeigt auch ne ganze Menge möglicher Elemente, die muss man sich dann nur noch entsprechend zusammenbasteln. Und dann gibts noch die Basisbeispiele zu QML, in der Regel malt man einfach nen Bild, schnipselt das auseinander und sagt QML welche Teilbereiche welche Funktionalitäten auslösen.

Mit Qt bzw oder mit Qt und QML kann man auch wirklich schöne Oberflächen bauen, ist halt die Frage was man selbst als schön empfindet und wieviel Zeit man gewillt ist da reinzustecken.

Im youtube Kanal von Qt gibts ne Reihe "Build with Qt" da zeigen sie manchmal ganz interessante Sachen, oder einfach mal generisch "QML interface" in die Suche werfen, erster Treffer https://www.youtube.com/watch?v=ShFsZJO84xY zeigt schon paar simple Sachen die sich mit QML relativ schnell machen lassen.

Nimm die Sprache mit der Du Dich am wohlsten fühlst, die Funktionalität Deiner Anwendung wird dich schon genug fordern, wenn das fertig ist, würd ich mich nochmal auf die GUI konzentrieren, "form follows function" oder so ähnlich.

[bluestar]

Ich würde einfach Python vernwenden, ein Fullscreen-Fenster mit "Web-Browser-Komponente" bauen und mir gewisse Python-Funktionen ins Javascript hineinimportieren.

Dann kannst du deine GUI mit HTML + Javascript machen, die wiederum Aktionen in Python auslösen (Scripte starten,etc.)

Ich hab spontan für Linux kein Tutorial gefunden, aber für Windows: https://www.youtube.com/watch?v=2kbeBzEQfXE

Und dann hab ich doch noch was gefunden: https://github.com/balenalabs/balena-wpe

[eggy]

Für Python wäre ttk eher was.

[dmant]

Ich habe mir jetzt nochmal QTCreator zugelegt.

Jetzt mal schauen wie das geht.. Erstmal nur irgendwie ein Fesnter bekommen.

Mit der IDE vertrau machen.. und sowas eben...