Wer in seiner App Ergebnisse in Prozent grafisch anzeigen möchte oder einfach nur einen Timer laufen lassen will, der hübsch visualisiert sein soll, wünscht sich vielleicht manchmal mehr als eine simple Progress-Bar-Leiste. In mobilen Apps (auch in Desktop-Programmen) sieht man in letzter Zeit häufig runde Anzeigeelemente, die einen Wert anschaulich als mehr oder weniger eingefärbten Ring anzeigen. Auch als kontinuierlich animierter Fortschrittsanzeiger eignet sich ein Ring ziemlich gut. So einen Fortschrittsanzeiger gibt es noch nicht als vorgefertigtes Element in LiveCode – möglicherweise wird es in absehbarer Zeit ein Widget dafür geben (wer möchte, darf eines programmieren). Aber auch mit herkömmlichen Mitteln kann man so eine Circle-Progress-Bar problemlos in LiveCode als Group mit Properties und Funktionen realisieren. Ich habe das vor einiger Zeit (noch bevor es Widgets gab) einmal gemacht und stelle das Ergebnis gerne für Eure eigene Nutzung zur Verfügung.
Der LiveCode-Stack kann hier heruntergeladen werden:
Nach dem Start sieht es so aus wie in der obigen Abbildung zu sehen ist: Der ringförmige Fortschrittsanzeiger ist als Group umgesetzt und oben zu sehen. Er lässt sich über interne Properties beliebig an die gewünschte Größe und das gewünschte Aussehen anpassen. Im Stack kann man das über Schieberegler machen, die als eine Art Demo fungieren. Auch lassen sich die Farben aller Komponenten hier ändern.
Wer diesen Anzeiger in seinem eigenen Projekt verwenden möchte, geht am besten so vor.
- Öffne den Stack “circleprog.livecode” zusätzlich zu Deinem eigenen Projekt (“Open Stack”).
- Experimentiere mit den Schiebereglern und den Farben, bis Größe und Aussehen Deinen Vorstellungen entsprechen.
- Kopiere die Group (die Circle Progress Bar). Achte darauf, dass “Select Grouped” deaktiviert ist, damit Du die gesamte Gruppe kopierst und nicht nur ein Element daraus.
- Füge die Group jetzt in Deinen eigenen Stack ein. Nun kannst Du den circleprog-Stack schließen und aus dem Speicher entfernen.
- Um einen Wert zwischen 0 und 100 grafisch anzeigen zu lassen, verwendest Du in Deinem Skript folgenden Befehl:
set the cProgress of group “circleprog” to meinWert. Du kannst die Group selbstverständlich auch anders nennen oder mehrere davon verwenden, die unterschiedliche Namen haben. - Um den Text im circleprog zu ändern (oder auf leer zu setzen), verwende folgenden Befehl:
put “mein Text” into field 1 of group “circleprog” - Natürlich lassen sich grundlegende Werte wie der Hauptradius, die Ringbreite, die Textgröße, die Farben auch noch nachträglich ändern. Um dies einmalig zu machen, gib die folgenden Befehle einfach in der Message Box von LiveCode ein. Um es dynamisch im Programmverlauf zu machen, fügst Du die Befehle in Deine Skripte ein:
- set the cMainRadius of grp “circleprog” to meinWert – setzt den Hauptradius der Komponente auf den Wert meinWert – unter Beibehaltung der Ringbreite.
- set the cRingWidth of grp “circleprog” to meinWert – setzt die Breite des Ringes auf den Wert meinWert – unter Beibehaltung des Hauptradius.
- set the cTextSize of grp “circleprog” to meinWert. Dies setzt die Größe des Textes im Innern des Rings auf den Wert meinWert. Gleichzeitig wird der Text mittig im Ring ausgerichtet.
- Um Farben anzupassen, kannst Du das jeweilige Einzel-Element im Bearbeitungsmodus auswählen und die Farbe direkt im Property Inspector setzen oder mit dem Befehl set the backgroundcolor of graphic 1 / graphic 2 / graphic3 of grp “circleprog” to meineFarbe setzen.
- Dasselbe gilt für den Text: Am besten selektierst Du ihn im Bearbeitungsmodus und stellst dort Font und Textfarbe ein. Wenn Du die Textgröße anschließend mit der cTextSize Property (s.o.) setzt, wird er wieder automatisch sauber mittig ausgerichtet.
Viel Spaß mit der Verwendung des Circle Progress Anzeigers!
