Aktuelles

Auf meinem neuen privaten Blog schreibe ich auch über andere Programmiersprachen, Unternehmertum und Gesundheit. Aktuell fällt es mir schwer für diese Webseite neue Inhalte zu entwickeln. Ich werde wohl meine Kleinen Helfer für den Alltag in Zukunft in HTML, CSS, Javascript, Node.js, graph.js und der Software Electron schreiben.

Meine aktuellen Projekte sind:

1. Hausautomatisation mit Shellys, Fhem und Amazon Alexa
2. Dashboard für die Hausautomatisation
3. BMI Rechner und Dokumantation von Biowerten (Pikflowmeter [Luft), Sauerstoffsettigung, Blutwerte (Zucker), Gewicht, BMI, Puls und Blutdruck) WebApp in einem eigenen Dashboard.
4. Dokumentationsplattform für Winkelmann.Software mit Bookstack
5. RasperryPi als Mini Server für Datenbanken und Hausautomatisation
6. Dokumentation von Installationsskripten in MS Word mit Anleitung zu MS Word
7. Privater Umstiegt und Gewerblicher Umstiegt von Windows 11 auf Linux Ubuntu mit Software Ersatz und Konfigurationsanleitung

Die Webseite Freepascal.de bleibt ersteinmal Online, genau wie der YouTube Channel. Meine neue Webseite findet Ihr hier www.andre-winkelmann.de

Wir werden huier online einen kleinen Hausverwalter mit eigener GUI im Lightmode und Darkmode entwickeln.

Das Minimal Viable Product (MVP)

Ablaufplan für die Entwicklung des HasuverwalterOS

Entwicklungsstand vom HausverwalterOS herunterladen

Web: https://hausverwalteros.freepascal.de 

Grafische Benutzeroberfläche – General User Interface kurz GUI

Jeder kennt sie die modernen Benutzeroberflächen der Software des alltäglichen Bedarfs, wie das E-Mail-Programm Thunderbird Mail oder dazu die passenden Produkte von Microsoft Outlook.  In diesen Programmen wird der Standard Header des Form1 geändert. Es befinden sich im Programm Kopf mehr Buttons, eine Suche, das Nutzerprofil, eine Hintergrundgrafik und die Caption in der Mitte. Dieser ist dazu auch noch wählbar in verschiedenen Designs wie Hell, dunkel, Modus des Betriebssystems verfügbar. Ab Windows 11 hat Windows sogar runde Ecken mit diesem Header.

Die Lazarus-IDE bietet hier nur sehr wenig Möglichkeiten dies im Standard Form1 anzupassen. Selbst ein Dunkelmodus gibt es nicht.

Ich berate und schule euch gerne. Meine Erfahrung im Bereich Lazarus und Freepascal geht auf jahrelange Softwareentwicklung zurück. Von eigener Anwendungssoftware über Hilfssoftware und Individuallösungen. Für Schulungen nutzte ich eigene Unterlagen und meine Homepage FreepascalDE.

Auftragsarbeiten für Firmen kann ich in kleineren Umfang durchführen. Sprechen Sie mich noch heute an und wir finden eine Lösung.

Alle Beratungen, Schulungen und Auftragsarbeiten werden über meine Firma Andre Winkelmann (Einzelunternehmer) durchgeführt. Die Webseite von Winkelmann.Software findet ihr hier.

Bitte denkt daran ausreichend Zeit einzuplanen. Am Abend vor einer Klassenarbeit ist nicht der richtige Zeitpunkt mit dem lernen anzufangen.

Hinweise 10% der Einnahmen gehen bei einer Kontaktaufnahme über eines der Kontaktformulare von FreepascalDE auch an FreepascalDE.

70 Euro pro Stunde Netto / 83,30 Euro pro Stunde Brutto

Kontaktdaten:

Telefon: 0 20 43 – 20 58 95

Kontaktformular:

Allgemeines und ein wenig Theorie zur TImageList

Die Komponente TImageList ist für das speichern und ablegen von Bildern dar. Die Komponente erstellt einem Index für die Bilder. Der Index kann durch einen Doppelklick auf die Komponente per Drag and Drop verwaltet werden siehe Abbildung 1.00 von TImageList.

Abb. 1.01 Bildeditor leer

Um Bilder und Grafiken zur TImageList hinzuzufügen können wir nun auf den Button hinzufügen klicken und Bilder, Icons oder andere Grafiken auswählen. In meinem Beispiel werde ich Icons auswählen und diese in einem TMainMenü verwenden. Ihr bekommt kostenlose Icons unter Flaticon.com. Ich habe dazu bereits einen Artikel geschrieben. Kostenpflichtige Icons gibt auf Stockfotoseiten wie fotolia.com und stockfoto.com für die kommerzielle Nutzung und bereits in verschiedenen schönen Farben.

Abb. 1.02 Icons

Ich habe mir die folgenden drei Icons kostenlos in der Größe von 16×16 Pixel heruntergeladen siehe Abbildung 1.01. Mit einem Klick im Bildeditor auf Hinzufügen können wir die zu unserer TImage List hinzufügen.

Abb. 1.03 Bild Editor mit Icon

In Abbildung 1.02 sehen wir nun den Bildeditor mit den hinzugefügten Bildern. Das Pluszeichen hat den Index 0 erhalten, der geöffnete Ordner hat den Index 1 erhalten und der Pfeil nach rechts hat den Index 2 erhalten. Wie bereits erwähnt möchte ich die Icons im Beispiel gleich in einem TMainMenu verwenden und dafür möchte ich den Index ändern. Der geöffnete Ordner soll den Index 0 erhalten, der Pfeil den Index 1 und das Pluszeichen den Index 2. Mit den Buttons >>Nach oben bewegen<< und >>nach unten bewegen<< kannst du die Icons neu positionieren siehe Abbildung 1.03 Bildeditor mit sortieren Icons.

Mit den anderen Buttons replace.. können wir die vorhandenen Icons ersetzen. Mit löschen können wir Einzeleinträge löschen. Mit leeren können wir die gesamte Liste löschen. Mit den Buttons sichern und alles sichern können wir die Einstellungen speichern.
Man kann bei der TMainMenü Komponente auch einzelne Icons hinzufügen, genau wie bei einem BitBtn einem Button mit Bild. Wieso solltest du also eine TImageList nutzen? Es ist eigentlich ganz einfach den sind die Indexierungen einmal festgelegt in den Komponenten, kann die GUI schnell modernisiert werden ohne jede Komponente neu anzufassen zu müssen. Du kannst dir sicher vorstellen das bei einem großen Programm, das auswechseln aller Icons von Hand sehr viel Arbeit in Anspruch nimmt. Hast du z.B. verschiedene Buttons mit jetzt speichern, kannst du hier eine TImageList nehmen und immer auf den selben IconIndex verweisen. Das Design ändern sich schnell für Software Programme. Früher waren 3D Icons mit Farbverläufen modern. Heute sind es Flat Icons, die nur in 2D dargestellt sind. Ihr müsstet für euer Programm bei der Nutzung einer TImageList also nur ein modernes Icon Set kaufen, es nach eurer Liste sortieren und die Designanpassung eurer Software wäre fertig.

Gut, kommen wir zu einem kleinen Beispiel:

Abb. 1.04 TImageList im Einsatz

Zieht in eurem TForm ein TMainMenu hinein und erstellt ein Menü mit der Struktur:
Datei

• Öffnen (geöffneter Ordner, ImageIndex 0)
• Neu (Pluszeichen, ImageIndex 2)
• Info (Pfeil rechts, ImageIndex 1)

Wie du ein TMainMenu erstellt erfährst in der Lazarus und Free Pascal Komponenten Bibliothek unter TMainMenu.
Gehe nun in den Objektinspektor und wähle in der Hauptkomponente und in allen MenuItems des TMainMenu unter der Eigenschaft SubMenuImages die erstellte ImageList1 aus. Du kannst für jeden Eintrag eine TImageList auswählen, wenn du das möchtest. Dies ist allerdings nicht sinnvoll. Man sollte pro Komponentenart maximal eine TImageList haben. Ich meine also für alle TBitBtn, für alle TTreeView, für alle TMainMenu’s usw. Jetzt kannst du bei jedem Eintrag im Objektinspektor unter Eigenschaften den ImageIndex auswählen. Aktuell stehen diese auf -1 um kein Image anzuzeigen. Nach dem zuweisen der Icons sollte dein TForm1 wie in Abbildung 1.03 aussehen.

Für dich zum herunterladen:

software-timagelist (650kb)