Buttons mit Text über dem Bild

Moin,

ich versuche gerade, eigene Buttons zu erstellen. Da ich mit Glaseffekten arbeite, kommen also eigene Images zur Anwendung - je eins für EIN und AUS. Darüber möchte ich gerne einen Text zur Beschriftung. Meine Versuche:

  • ToggleButton mit Text. Fast Perfekt - nur erscheint der Text nicht auf, sondern rechts neben dem Button.
  • ToggleImage mit extra Textfeld: Fast perfekt, wenn der Hintergrund vom text transparent ist. Allerdings nimmt er auch den Fokus, damit muss man zum Bedienen neben dem Text klicken. Stellt man das Textfeld in der Reihenfolge unter das Toglleimage, ist es natürlich unsichtbar. Gibt es etwas Unsichtbares, dass einen Klick entgegennimmt und das man über den gesamten Button legen kann ?

Einzige Lösung bisher sind für jeden Button seperate Images mit Text, aber das ufert ziemlich aus. Außerdem habe ich auch so einige Association-Elemente in der Visu.

Wie bekomme ich am besten Buttons (Toggle+Image) mit eigenen Grafiken und Text über der Grafik ertstellt ?

Guten Morgen TomW,

wenn ich dich richtig verstanden habe, dann wäre die Lösung, dass du als höchste Ebene ein transparentes Bild verwendest, welches dann den Schaltvorgang auslöst.

Darunter kannst du dann so viele Textinfos, Stati und Images packen wie du Lust und Platz hast. Derartige Konstruktionen habe ich massenhaft im Einsatz :wink:

Sollte dies nicht so von dir gemeint sein, dann poste doch mal deine Versuche :slight_smile:

Gruß aus der Nachbarschaft
Hans

Dabke und Ja: So ist das gemeint. Klappt aber nicht bei den Associations - da scheint das Image nur Boolean zu akzeptieren…

Hallo TomW,

ehrlich gesagt verstehe ich nicht was du meinst :confused:

Ein Beispiel könnte hilfreich sein :smiley:

Gruß
Hans

Hi Tom,
ich bastel auch gerade fleißig mit IPS und hab die gleiche Problemstellung. Für mich habe ich eine passende Lösung gefunden. Ich nehme auch ein Toogle Image und davor einen weiteren einfachen Toggle Button, der komplett transparent ist und nur Schrift besitzt. Beides lege ich auf die gleiche IPS Variablennummer. So kann ich wo auch immer drauf drücken und kann schalten. Das klappt auch mit Association.

@Hans: Also bei den Togglebuttons mache ich das so:

  1. Ein ToggleImage mit 2 Bildern auf die Var
  2. Darüber einen transparenten Text
  3. Darüber ein unsichtbares Image auf die gleiche Var wie in 1)

abgesehen davon, dass man weiter im Dahsboard blind arbeiten muss, funktioniert das wie gewünscht: Das Image wechselt den Inhalt und man kann die ganze Fläche antippen.

Mit einem AssociationImage in 1+3 klappt dieser Trick nicht, da es sich dann nicht mehr aktivieren lässt.

@Marco: Danke, das probiere ich jetzt mal !

Hm … mit den AssociationButton habe ich eigtl. genau das gleiche Problem: Sobald der transparente Associationbutton drüber ist, kommt nix mehr. Ich habe das Image und den Button auf die gleiche VarID

Ohne den Button funktioniert es - abgesehen davon, dass genau da, wo der Text ist, nicht getippt werden kann.

Hallo TomW,

dein Problem der Sichtbarkeit kannst du leicht lösen, indem du bei Darstellung auf transparente Bilder klickst :wink: Dies Problem war der Grund warum ich den Entwickler Andreas gebeten hatte, diese Funktion doch bitte auch wieder in IPSStudio einzubauen. Wenn transparente Darstellung aktiviert ist wird das Laden der Seiten bei der Bearbeitung etwas länger dauern und ggfs. das ganze Bild zittern. Aber es funktioniert wie du hier siehst.

Transparenz aus.PNGTransparenz ein.PNG

Dann hattest du noch den Weihnachtswunsch der freien Textplatzierung. Eigentlich kann man den Text doch recht gut ausrichten wie du hier siehst:

Text Wetter.PNG

Jetzt schaue ich nochmal ob ich verstehe was du mit den Assoziations Buttons machen willst.

Gruß
Hans

Hallo TomW,

das liegt daran, dass dein Text auf der höchsten Ebene liegt. Den musst du eine Stufe nach hinten schieben, so dass die Toggle Funktion auf der obersten Ebene liegt.

Ggfs. musst du die Toggle Funktion auch programmieren. Hier siehst du die Realisierung einer Toggle Funktion auf einen Homematic RGBW Controller mit Anzeige der eingestellten Helligkeit mittels eines Images Button und eines Variablen Labels.

Toggle Barschrank aus.PNG Toggle Barschrank ein.PNG

Gruß
Hans

Hallo TomW,

schau mal hier ein Screenshot aus IPSView so wie ich es mache:

Unbenannt1.PNG Unbenannt2.png Unbenannt3.png

Bild 1 zeigt wie es in IPSVIew aussieht, hier liegen das Associate Image und der Button übereiander, der Button ist transparent bis auf den Text. Ein kleines Minus gibt es wie ich auch gerade gesehen habe, wenn ich auf das Image klicke, sehe ich die kleinen Symbole mit in der Auswahl, wenn ich auf den Text klicke dann sehe ich nur den Text.

Vielleicht hilft das ja weiter.

Uih, das sind wirklich schöne Buttons. Aber ich glaube, ich habe mich etwas irreführend ausgedrückt: Mit „über“ meinte ich eher „auf“, also so soll das werden / ist es:

Unbenannt.PNG

Die gelbe Füllung mache ich über Associations, mit 10 verschiedenen Images. in dem schwarzen Rechteck ist ein Text - der verschwindet aber, wenn ich den in den Hintergrund schiebe.

Moin,

als ich das Icon sah dachte ich sofort daran, dass TomW wohl die Enterprise Oberfläche nachbilden will :slight_smile: Es ist schon erstaunlich, welche Assoziationen durch ein einzelnes Bild ausgelöst werden. Dann fiel mir noch ein, dass ich zu Mediola Zeiten das schon mal gesehen habe nämlich hier http://forum.mediola.com/viewtopic.php?f=4&t=469&sid=597ef2585a6f655f28b54650c8ed4a52&start=180.

Ob das geht so wie du es vorhast kann ich nicht sagen, da mir die Icons fehlen, um damit die Konstellationen durchzuspielen. Es sieht so aus, als wenn du 10 Zustände darstellen möchtest. Vielleicht hilft dir dieser Artikel des Entwicklers Andreas ja weiter http://ipsview.brownson.at/?p=613.

Gruß
Hans

erwischt … ja, das ganze Problem ist letztendlich auf diesen Tick zurückzuführen…

Die Doku von Andreas beschreibt mein Vorhaben ziemlich genau, jedoch setzt auch er den Text eben neben die Images. Das eigtl. Problem entsteht aber, wenn der Text auf dem Bild liegt, so wie oben.

Möglicherweise helfen mir ValueButtons - jedoch sehe ich dann das Problem, dass meine Var eben nicht die vorgegebenen Werte annehmen kann, sondern im Prinzip alle von 0-100 (Dimmstufen)