INFO: Dieses Forum nutzt Cookies...
Cookies sind für den Betrieb des Forums unverzichtbar. Mit der Nutzung des Forums erklärst Du dich damit einverstanden, dass wir Cookies verwenden.

Es wird in jedem Fall ein Cookie gesetzt um diesen Hinweis nicht mehr zu erhalten. Desweiteren setzen wir Google Adsense und Google Analytics ein.

Antwort schreiben 
 
Themabewertung:
  • 0 Bewertungen - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
(Pseudo) 3D - Buttons auf LCD Display
29.05.2014, 16:22
Beitrag #1
(Pseudo) 3D - Buttons auf LCD Display
Hallo Forum,

da ich die 2D - Buttons aus der Library von H.Karlsen auf Dauer etwas langweilig fand, habe ich mir einen Sketch geschrieben, der so ein wenig 3D Look für die Buttons reinbringt.
Benutzte Hardware siehe hier: http://www.amazon.de/SainSmart-Entwicklu...LCD-Schirm
Eigentlich ist es mehr Mathematik (Grundrechenarten) als alles andere Smile
Man kann in dem Sketch so ziemlich jeden Bestandteil der Buttons parametrieren.
Die Parameter werden in einem Struct-Array abgelegt, ebenso wie die möglichen Farbkombinationen.
Naja und hier eben der Code (Kommentare dürften ausreichend sein):
Code:
#include <UTFT.h>
#include <UTFT_Geometry.h>
// eingebundene Fonts
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
// Struktur Farbschema
typedef struct color_sheme
{
  word lu;      // Farbe Frame links & oben
  word sepa;    // Farbe Separator
  word butt;    // Farbe Button
  word rl;      // Farbe Frame rechts & unten
};
color_sheme c_record[4]; // Anzahl entsprechend Farbschemata

// Struktur Koordinaten- und Eigenschaftenschema
typedef struct button_sheme
{
  int x1;       // x Position oben links
  int y1;       // y Position oben links
  int x2;       // x Position unten rechts
  int y2;       // y Position unten rechts
  int th;       // Rahmenstärke
  boolean sep;  // Separator zwischen Rahmen und Button Ja / Nein
  boolean pre;  // Button gedrückt Ja / Nein
  char fon;     // Font f. Beschriftung B -> Big S -> Small
  String text;  // Beschriftungstext
  word stcolor; // Farbe Beschriftungstext
};
button_sheme b_record[4]; // Anzahl entsprechend Buttonanzahl

// Hardwareinstanzen
UTFT myGLCD(ITDB32S, 38, 39, 40, 41);
UTFT_Geometry geo(&myGLCD);
void setup() {
  /* Mögliche Farbschemata der Buttons.
   Kann man natürlich erweitern.
   Dann aber Anzahl von struct color_sheme anpassen */
  c_record[0] = (color_sheme) {
    VGA_WHITE , VGA_SILVER, VGA_GRAY, VGA_BLACK
  };
  c_record[1] = (color_sheme) {
    VGA_FUCHSIA , VGA_RED, VGA_PURPLE, VGA_MAROON
  };
  c_record[2] = (color_sheme) {
    VGA_YELLOW , VGA_LIME, VGA_OLIVE, VGA_GREEN
  };
  c_record[3] = (color_sheme) {
    VGA_AQUA , VGA_BLUE, VGA_TEAL, VGA_NAVY
  };
  /* Koordinaten + Eigenschaften der Buttons
   Anzahl von strcut button_sheme anpassen */
  b_record[0] = (button_sheme) {
    20, 20, 120, 70, 6, true , true, 'S', "Unpressed", VGA_WHITE
  };
  b_record[1] = (button_sheme) {
    140, 20, 240, 70, 6, true , false, 'S', "Pressed", VGA_WHITE
  };
  b_record[2] = (button_sheme) {
    120, 90, 300, 140, 6, true , true, 'B', "Pressed", VGA_RED
  };
  b_record[3] = (button_sheme) {
    40, 160, 220, 210, 6, true , false, 'B', "Unpressed", VGA_LIME
  };
  // LCD initialisieren
  myGLCD.InitLCD();
  myGLCD.clrScr();
  // vier Buttons erstellen
  drawButt(0, 1);
  drawButt(1,1);
  drawButt(2,2);
  drawButt(3,3);
  }
  
// Hier ist nix zu tun
void loop() {}

// Funktion erstellt einen Button
void drawButt(int indbutt, int indcol)
{
  word lu, rl, tempcolor, stringcolor, stringbackcolor;
  uint8_t* tempfont;
  int slen;
  // Übernahme Koordinaten - siehe Struktur oben
  int ix1 = b_record[indbutt].x1;
  int iy1 = b_record[indbutt].y1;
  int ix2 = b_record[indbutt].x2;
  int iy2 = b_record[indbutt].y2;
  // Übernahme Eigenschaften - siehe Struktur oben
  int it = b_record[indbutt].th;
  boolean isep = b_record[indbutt].sep;
  boolean pres = b_record[indbutt].pre;
  // Übernahme Eigenschaften Beschriftung - siehe oben
  char font = b_record[indbutt].fon;
  String stext = b_record[indbutt].text;
  word strcolor = b_record[indbutt].stcolor;
  // Übernahme Farben je nach Status pres
  if (pres == false) lu = c_record[indcol].lu; else lu = c_record[indcol].rl;
  if (pres == false) rl = c_record[indcol].rl; else rl = c_record[indcol].lu;
  word sepa = c_record[indcol].sepa;
  word butt = c_record[indcol].butt;
  // Frame oben und links
  myGLCD.setColor(lu);
  myGLCD.fillRect(ix1, iy1, ix2, iy1 + it);
  myGLCD.fillRect(ix1, iy1, ix1 + it, iy2);
  // Frame unten und rechts
  myGLCD.setColor(rl);
  myGLCD.fillRect(ix1 + it + 1, iy2, ix2, iy2 - it);
  myGLCD.fillRect(ix2, iy1 + it + 1, ix2 - it, iy2);
  // Schrägschnitt unten links und oben rechts
  geo.fillTriangle(ix1, iy2 , ix1 + it , iy2 - it, ix1 + it , iy2);
  geo.fillTriangle(ix2 - it, iy1 + it, ix2 , iy1 , ix2, iy1 + it);
  // Wenn Separator zwischen Frame und Button
  if (isep == true)
  {
    myGLCD.setColor(sepa);
    myGLCD.drawLine(ix1 + it + 1, iy2 - it - 1, ix2 - it - 1, iy2 - it - 1);
    myGLCD.drawLine(ix2 - it - 1, iy1 + it + 1, ix2 - it - 1, iy2 - it - 1);
    // Buttonfläche zeichnen
    myGLCD.setColor(butt);
    myGLCD.fillRect(ix1 + it + 2, iy1 + it + 2, ix2 - it - 2, iy2 - it - 2);
  }
  else
  {
    // Buttonfläche zeichnen wenn Separator zwischen Frame und Button
    myGLCD.setColor(butt);
    myGLCD.fillRect(ix1 + it + 1, iy1 + it + 1, ix2 - it - 1, iy2 - it - 1);
  }
  tempcolor = myGLCD.getColor();
  tempfont = myGLCD.getFont();
  if (font == 'S') myGLCD.setFont(SmallFont);
  if (font == 'B') myGLCD.setFont(BigFont);
  // Wenn Höhe der Buttonfläche für Font zu klein und Font = BigFont -> umschalten auf Smallfont
  if (myGLCD.getFontYsize() >= (iy2 - it) - (iy1 + it) - 4 && font == 'B') myGLCD.setFont(SmallFont);
  // Wenn Breite der Buttonfläche für String zu klein -> kürzen des Strings
  if (myGLCD.getFontXsize() * stext.length() >= ix2 - ix1 - 2 * it - 4)
  {
    slen = stext.length(); // Anzahl Zeichen des String
    for (int i = slen; i >= 1; i--)
    {
      stext = stext.substring(0, i);
      if (myGLCD.getFontXsize() * stext.length() <= ix2 - ix1 - 2 * it - 4) break;
    }
  }
  // Darstellung Beschriftung
  stringcolor = myGLCD.getColor();
  stringbackcolor = myGLCD.getBackColor();
  myGLCD.setBackColor(butt);
  myGLCD.setColor(strcolor);
  // Textposition wird über Fontgröße und Abmessungen herausgerechnet
  myGLCD.print(stext, (((ix2 - ix1) / 2) + ix1) - (myGLCD.getFontXsize()*stext.length() / 2), (((iy2 - iy1) / 2) + iy1) - (myGLCD.getFontYsize() / 2));
  myGLCD.setBackColor(stringbackcolor);
  myGLCD.setColor(stringcolor);
  myGLCD.setFont(tempfont);
  myGLCD.setColor(tempcolor);
}
Meinungen sind wie immer gern gesehen!

Grüße Ricardo

Nüchtern betrachtet...ist besoffen besser Big Grin
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
04.06.2014, 01:09 (Dieser Beitrag wurde zuletzt bearbeitet: 04.06.2014 01:17 von ArduTux.)
Beitrag #2
RE: (Pseudo) 3D - Buttons auf LCD Display
Hallo Ricardo
Grad mal den "Sketch" drauf geschoben.
Dachte ich muss erst durchs lbyrinth als ich den Screen sah Rolleyes

Ich finde die vom optischem Design her, recht ansprechend.
Der 3D Effekt bleibt den doch eher aus, aber deswegen ja auch dein Titel => (Pseudo).

Ist das bei dir auch, das gerade das VGA_BLUE eher auf dem Glas vom Screen erscheint als unter dem Glas, wie alle anderen Farben?
Vielleicht benötige ich auch ne Brille...

Ich hatte mal drüber nachgedacht das eben gerade für den 3D effekt auszunutzen. Aber alle Buttons als Bedingung mit blauem Rand irgendwo, damit der optische effekt durch kommt? Ich weiß nich ...

Alles in allem ne tolle Arbeit, den Code hab ich gespeichert Big Grin wenn ich mal von meinen Grafiken runter komme dann brauche ich ja solche Ansätze dringender. Zur Zeit bin ich noch auf diesen .raw Trip

Wenn der Henning seine tinyFat nicht weiter entwickelt, dahingehnd das auch Verzeichnisse funktionieren, muss ich mal was anderes für die Optik ausprobieren. Bin da irgendwie drauf festgenagelt durch die UTFT_tinyFat von Ihm. Nerft bißchen... aber das Thema gehört hier nicht hin.

Als Menue Button oder Main-Tabs sind die Buttons von dir super zu gebrauchen. Bei einer größeren Anzahl von Buttons sind die irgendwann ja leider nicht mehr schön an zu sehen wenn die zu sehr komprimiert werden müssen von der Geometrie her.

EDIT:
Zieh mal am unteresten Button wo ja das VGA_BLUE unten rechts den Bleuen Winkel hat. ganz um den Button herum.

Dann siehste ws ich mit dem Effekt meine, dann ist die Schrift vom Button optisch quasi tiefer im Screen drin als wäre die im Glaskasten drin. Und NEIN ich habe keine Drogen genommen! Big Grin

gruß

In unserer Gesellschaft ist das Gehirn am gerechtestesten Verteilt! Jeder glaubt, er habe genug davon.
Hardware: SainSmart Mega 2560 R3 + 3,2" LCD-Touch-Screen
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
04.06.2014, 06:57
Beitrag #3
RE: (Pseudo) 3D - Buttons auf LCD Display
Moin ArduTux,

danke für das Lob, Meinung und den Tipp ganz unten Smile
Was hast du für Schlafzeiten?
Zitat:Zieh mal am unteresten Button wo ja das VGA_BLUE unten rechts den Bleuen Winkel hat. ganz um den Button herum.
Ja, VGA_BLUE ist auch aus meiner Sicht die "attraktivste" Variante. Aber das liegt wohl generell an den Farbkombinationen. Aber man kann Sie ja ändern.
Grundsätzlich bin ich einfach von diesem Artikel ausgegangen:
http://de.wikipedia.org/wiki/Schaltfl%C3%A4che weil ich selbst nicht so eine Vorstellung hatte was einen 3D Effekt ausmacht. Wäre cool wenn es irgendwo eine bessere Beschreibung gäbe, dann würde ich die nochmal umsetzen.
Zitat:Ist das bei dir auch, das gerade das VGA_BLUE eher auf dem Glas vom Screen erscheint als unter dem Glas, wie alle anderen Farben? Vielleicht benötige ich auch ne Brille...
Dein Eindruck ist schon richtig. Woher das kommt wüsste ich auch gern.

Grüße Ricardo

Nüchtern betrachtet...ist besoffen besser Big Grin
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
04.06.2014, 20:45
Beitrag #4
RE: (Pseudo) 3D - Buttons auf LCD Display
... jo das passt schon, schlafen kan ich ja noch genug wenn ich Tod bin Wink

Hab gerade nochmal bei Gimp geschaut wie das mit den Buttons Maschiert.

Das wichtigste ist wohl das es 2 Rahmen geben muss. Einen Äußeren und einen Inneren. Bei den Farben sollte man wohl für den Äußeren-Rahmen etwas dunkleres nehmen als der Innere-Rahmen.

Harte Kanten scheinen den Tiefeneffekt zu fördern und Weiche Kanten eher die Unpressed bzw. der effekt beult sich eher nach aussen.

kein Plan...

In unserer Gesellschaft ist das Gehirn am gerechtestesten Verteilt! Jeder glaubt, er habe genug davon.
Hardware: SainSmart Mega 2560 R3 + 3,2" LCD-Touch-Screen
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Antwort schreiben 


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste