Edzelf / Esp-radio

Internet radio based on Esp8266 and VS1053.
MIT License
618 stars 200 forks source link

How to change text size ILI9341 #160

Open onurguc opened 5 years ago

onurguc commented 5 years ago

Hi,

How can I make the text size bigger on ILI9341. I went into config files but I wasn't able find something that works.

Thanks, -Onur

Edzelf commented 5 years ago

If your display is not a 160x128 type, you have to edit the documents/Arduino/libraries/ TFT_ILI9163C-master/_settings/TFT_ILI9163C_settings.h file (_TFTWIDTH, _TFTHEIGHT, _GRAMWIDTH and _GRAMHEIGHT. Then change the height and width parameters in calls to tft.xxxxxx in the sketch.

If you just want to change the text size, add calls to tft.setTextSize(x) in the sketch.

onurguc commented 5 years ago

My display type is 320x240. I'm using the adafruit library and it's actually set correctly as 320 and 240. Text size has (a) here. What should I change it to? Like (e)?

I dont know the pattern.

Thanks, -Onur

Ed Smallenburg notifications@github.com, 25 Şub 2019 Pzt, 11:02 tarihinde şunu yazdı:

If your display is not a 160x128 type, you have to edit the documents/Arduino/libraries/ TFT_ILI9163C-master/_settings/TFT_ILI9163C_settings.h file (_TFTWIDTH, _TFTHEIGHT, _GRAMWIDTH and _GRAMHEIGHT. Then change the height and width parameters in calls to tft.xxxxxx in the sketch.

If you just want to change the text size, add calls to tft.setTextSize(x) in the sketch.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Edzelf/Esp-radio/issues/160#issuecomment-466908665, or mute the thread https://github.com/notifications/unsubscribe-auth/AF89jTvTYmdSAH7O-9syp9o2jZ0luW3wks5vQ5ihgaJpZM4bPJcK .

onurguc commented 5 years ago

[image: WhatsApp Image 2019-02-25 at 22.19.22.jpeg] I managed to change the text size from 1 to 2 but it messed up the clock on top right corner. Also the rest of the characters looks pixelated.

Check the below right screen with the right resolution. This sketch is using u8g2 library

[image: WhatsApp Image 2019-02-25 at 22.19.22-2.jpeg]

Onur Gucukoglu onurguc@yahoo.com, 25 Şub 2019 Pzt, 18:14 tarihinde şunu yazdı:

My display type is 320x240. I'm using the adafruit library and it's actually set correctly as 320 and 240. Text size has (a) here. What should I change it to? Like (e)?

I dont know the pattern.

Thanks, -Onur

Ed Smallenburg notifications@github.com, 25 Şub 2019 Pzt, 11:02 tarihinde şunu yazdı:

If your display is not a 160x128 type, you have to edit the documents/Arduino/libraries/ TFT_ILI9163C-master/_settings/TFT_ILI9163C_settings.h file (_TFTWIDTH, _TFTHEIGHT, _GRAMWIDTH and _GRAMHEIGHT. Then change the height and width parameters in calls to tft.xxxxxx in the sketch.

If you just want to change the text size, add calls to tft.setTextSize(x) in the sketch.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Edzelf/Esp-radio/issues/160#issuecomment-466908665, or mute the thread https://github.com/notifications/unsubscribe-auth/AF89jTvTYmdSAH7O-9syp9o2jZ0luW3wks5vQ5ihgaJpZM4bPJcK .

Edzelf commented 5 years ago

Sorry, but I cannot see your images. What is WhatsApp?

djmaj0 commented 5 years ago

Sorry, but I cannot see your images. What is WhatsApp?

I have same problem. I changed "dsp_setTextSize ( 1 )" to "dsp_setTextSize ( 2 )" 20190320_201345 what i need to do now?

djmaj0 commented 5 years ago

Also is there possible to add font with characters like "ľ š č ť ž ý á ä ú ň ô" or central europian character set? As you can see instead of Rádio Best FM" it shows me "Rdio Best FM"

AlexVichter commented 4 years ago

Dear Ed, your Web Radio project supports the ILI9341 display. I can find in your description only the wiring diagram for the Display with the following pins:

But my display 3.2 TFT SPI 240x320 ILI9341 has another pins:

Can you please advise the wiring diagram for this variant to ESP32 according to the actual .ino sketch?

Should I change any variables in your .ino sketch to adopt my ILI9341? If yes, which file and which lines in it?

Perhaps my questions are stupid, but I cannot find this information in project files.

Thanks a lot for your help and support!

RufRudolf commented 4 years ago

I have same problem. I changed "dsp_setTextSize ( 1 )" to "dsp_setTextSize ( 2 )" 20190320_201345 what i need to do now?

Hi, I wonder if someone properly solved this issue. I encountered same problem with font "size 2" but haven't found a solution for it anywhere on the internet. So at least I want to share my experimental solution since the result is ok:

I use the red ILI9341 2,8'' 240x320 display from Keenso which is a nice size for the project setup :) So after having changed dsp_setTextSize(1) to dsp_setTextSize(2) in the sketch I also adapted #define TIMEPOS -52 to #define TIMEPOS -92 to allow more space for larger time string but to keep it sofar at the right end of the line; since I haven't found any documentation of the font characteristics I had to count the pixel of "size 2" characters and try.

To avoid the new time string to become a mess it is important to take care of the refresh mechanism in ILI9341.h You will find it at the end of the header file in section "DISPLAYTIME": Due to the fact that one character of font "size 2" has a hight of 14 pixels and lenght of 11 pixels while "size 1" is 8 pixels high and 6 pixels wide you have to adapt dsp_fillRect(pos, 0, 6, 8, BLACK) to dsp_fillRect(pos, 0, 11, 14, BLACK) and pos+=6 to pos+=11 since the overwriting of pixels is done character by character for changing parts only - now with bigger area (11x14 istead of 6x8 pixels).

I additionally changed the size of "yellow area" of the display bottom from 4 to 8 lines to enhance handling of long strings there. It is also defined in ILI9341.h as a vector: scrseg_struct tftdata[TFTSECS]={ { false, WHITE, 0, 8, "" }, { false, CYAN, 20, 64, "" }, { false, YELLOW, 90, 32, "" } //4 lines at the bottom { false, GREEN, 90, 32, "" } } Bold type changed to { false, YELLOW, 90, 64, "" } //8 lines at the bottom

I hope it helps though if someone will find a proper documentation of the font sizes please add this to this thread. I add a picture of the result to let you have an impression:

rufoRadio

blotfi commented 4 years ago

You can change the fonts by adding in ILI9341.h add #include <Fonts/FreeSans9pt7b.h>

also

bool dsp_begin()
{
  tft = new Adafruit_ILI9341 ( ini_block.tft_cs_pin,
                               ini_block.tft_dc_pin ) ;            // Create an instant for TFT

  tft->begin();                                                    // Init TFT interface
  tft->setFont( & FreeSans9pt7b);
  return ( tft != NULL ) ;
}
blotfi commented 4 years ago

with original font and double size

dsp_setTextSize ( 2 ) ; 

Here is the file you should use as

ILI9341.h
// ILI9341.h
//
// Contributed by Uksa007@gmail.com
// Separated from the main sketch to allow several display types.
// Includes for various ILI9341 displays.  Tested on 320 x 240.
// Requires Adafruit ILI9341 library, available from library manager.
// Below set your dsp_getwidth() and dsp_getwidth() to suite your display.

#include <Adafruit_ILI9341.h>
#include <Fonts/FreeSans9pt7b.h>

// Color definitions for the TFT screen (if used)
// TFT has bits 6 bits (0..5) for RED, 6 bits (6..11) for GREEN and 4 bits (12..15) for BLUE.
#define BLACK   ILI9341_BLACK
#define BLUE    ILI9341_BLUE
#define RED     ILI9341_RED
#define GREEN   ILI9341_GREEN
#define CYAN    GREEN | BLUE
#define MAGENTA RED | BLUE
#define YELLOW  RED | GREEN
#define WHITE   RED | BLUE | GREEN

// Data to display.  There are TFTSECS sections
#define TFTSECS 4
scrseg_struct     tftdata[TFTSECS] =                        // Screen divided in 3 segments + 1 overlay
{                                                           // One text line is 8 pixels
  { false, WHITE,   0,  8, "" },    // 1 top line
  { false, CYAN,   20, 64, "" },    // 8 lines in the middle
  { false, YELLOW, 90, 32, "" },    // 4 lines at the bottom
  { false, GREEN,  90, 32, "" }         // 4 lines at the bottom for rotary encoder
} ;

Adafruit_ILI9341*     tft = NULL ;                                  // For instance of display driver

// Various macro's to mimic the ILI9341 version of display functions
#define dsp_setRotation()       tft->setRotation ( 3 )             // Use landscape format (3 for upside down)
#define dsp_print(a)            tft->print ( a )                   // Print a string 
#define dsp_println(b)          tft->println ( b )                 // Print a string followed by newline 
#define dsp_fillRect(a,b,c,d,e) tft->fillRect ( a, b, c, d, e ) ;  // Fill a rectange
#define dsp_setTextSize(a)      tft->setTextSize(a)                // Set the text size
#define dsp_setTextColor(a)     tft->setTextColor(a)               // Set the text color
#define dsp_setCursor(a,b)      tft->setCursor ( a, b )            // Position the cursor
#define dsp_erase()             tft->fillScreen ( BLACK ) ;        // Clear the screen
#define dsp_getwidth()          320                                // Adjust to your display
#define dsp_getheight()         240                                // Get height of screen
#define dsp_update()                                               // Updates to the physical screen
#define dsp_usesSPI()           true                               // Does use SPI

bool dsp_begin()
{
  tft = new Adafruit_ILI9341 ( ini_block.tft_cs_pin,
                               ini_block.tft_dc_pin ) ;            // Create an instant for TFT

  tft->begin();                                                    // Init TFT interface
//  tft->setFont( & FreeSans9pt7b);
  return ( tft != NULL ) ;
}

//**************************************************************************************************
//                                      D I S P L A Y B A T T E R Y                                *
//**************************************************************************************************
// Show the current battery charge level on the screen.                                            *
// It will overwrite the top divider.                                                              *
// No action if bat0/bat100 not defined in the preferences.                                        *
//**************************************************************************************************
void displaybattery()
{
  if ( tft )
  {
    if ( ini_block.bat0 < ini_block.bat100 )              // Levels set in preferences?
    {
      static uint16_t oldpos = 0 ;                        // Previous charge level
      uint16_t        ypos ;                              // Position on screen
      uint16_t        v ;                                 // Constrainted ADC value
      uint16_t        newpos ;                            // Current setting

      v = constrain ( adcval, ini_block.bat0,             // Prevent out of scale
                      ini_block.bat100 ) ;
      newpos = map ( v, ini_block.bat0,                   // Compute length of green bar
                     ini_block.bat100,
                     0, dsp_getwidth() ) ;
      if ( newpos != oldpos )                             // Value changed?
      {
        oldpos = newpos ;                                 // Remember for next compare
        ypos = tftdata[1].y - 5 ;                         // Just before 1st divider
        dsp_fillRect ( 0, ypos, newpos, 2, GREEN ) ;      // Paint green part
        dsp_fillRect ( newpos, ypos,
                       dsp_getwidth() - newpos,
                       2, RED ) ;                          // Paint red part
      }
    }
  }
}

//**************************************************************************************************
//                                      D I S P L A Y V O L U M E                                  *
//**************************************************************************************************
// Show the current volume as an indicator on the screen.                                          *
// The indicator is 2 pixels heigh.                                                                *
//**************************************************************************************************
void displayvolume()
{
  if ( tft )
  {
    static uint8_t oldvol = 0 ;                         // Previous volume
    uint8_t        newvol ;                             // Current setting
    uint16_t       pos ;                                // Positon of volume indicator

    newvol = vs1053player->getVolume() ;                // Get current volume setting
    if ( newvol != oldvol )                             // Volume changed?
    {
      oldvol = newvol ;                                 // Remember for next compare
      pos = map ( newvol, 0, 100, 0, dsp_getwidth() ) ; // Compute position on TFT
      dsp_fillRect ( 0, dsp_getheight() - 2,
                     pos, 2, RED ) ;                    // Paint red part
      dsp_fillRect ( pos, dsp_getheight() - 2,
                     dsp_getwidth() - pos, 2, GREEN ) ; // Paint green part
    }
  }
}

//**************************************************************************************************
//                                      D I S P L A Y T I M E                                      *
//**************************************************************************************************
// Show the time on the LCD at a fixed position in a specified color                               *
// To prevent flickering, only the changed part of the timestring is displayed.                    *
// An empty string will force a refresh on next call.                                              *
// A character on the screen is 8 pixels high and 6 pixels wide.                                   *
//**************************************************************************************************
void displaytime ( const char* str, uint16_t color )
{
  static char oldstr[9] = "........" ;             // For compare
  uint8_t     i ;                                  // Index in strings
  uint16_t    pos = dsp_getwidth() + TIMEPOS ;     // X-position of character, TIMEPOS is negative

  if ( str[0] == '\0' )                            // Empty string?
  {
    for ( i = 0 ; i < 8 ; i++ )                    // Set oldstr to dots
    {
      oldstr[i] = '.' ;
    }
    return ;                                       // No actual display yet
  }
  if ( tft )                                       // TFT active?
  {
    dsp_setTextColor ( color ) ;                   // Set the requested color
    for ( i = 0 ; i < 8 ; i++ )                    // Compare old and new
    {
      if ( str[i] != oldstr[i] )                   // Difference?
      {
        //dsp_fillRect ( pos, 0, 6, 8, BLACK ) ;     // Clear the space for new character
        dsp_fillRect(pos, 0, 11, 14, BLACK);      // Clear the space for new character
        dsp_setCursor ( pos, 0 ) ;                 // Prepare to show the info
        dsp_print ( str[i] ) ;                     // Show the character
        oldstr[i] = str[i] ;                       // Remember for next compare
      }
      pos += 11 ;                                   // Next position
    }
  }
}

`