Hi,
I am having difficulties centering text consisting of two printf next to each other.
I would like to center the icon below the headline and its corresponding temperature in the middle of the screen. I am unsure how to do that though. Is there a way to calculate how wide the text is going to be so I can dynamically set an offset?
it.get_text_ bounds(…) can be used to get the width but you would need to create a temp string first with the actual text using sprintf(…) or vsnprintf(…)
get_text_bounds (int x, int y, const char *text, Font *font, TextAlign align, int *x1, int *y1, int *width, int *height)
As an uglier alternative solution, perhaps you could get away with a few more hardcoded if scenario spacings based on the presence/absence of a negative sign (< 0) and if the temp has more than 1 digit (less than -9 or more than 9).
It’s looking slick so fair enough if you want to get it pixel perfect though.
/config/esphome/epaper-frame-wohnzimmer.yaml:535:110: warning: ISO C++ forbids converting a string constant to 'char*' [-Wwrite-strings]
const char tmp_icon_string = sprintf("%s", icon_map[id(current_weather_condition).state.c_str()].c_str());
^
/config/esphome/epaper-frame-wohnzimmer.yaml:537:192: error: invalid conversion from 'char' to 'const char*' [-fpermissive]
Soo this seems to work, it doesn’t feel very elegant though.
If anyone has suggestions on how to improve it, I would be very happy!
For example do I need to store calculated_x, calculated_y, calculated_height even though I never use it?
Looks like you got it working while I was drafting reply. Nice work.
// Need to declare regular int in your code. The address of operator & will make them int *
//for the get_text_bounds() function
int calculated_width;
int calculated_height;
int calculated_x;
int calculated_y;
//c_str is an array of char
char buffer[32];
vsnprintf(buffer, sizeof(buffer), "%s", icon_map[id(current_weather_condition).state.c_str()].c_str() );
//calculate the width of the icon text, location isn't important
it.get_text_bounds(0, 0, buffer, id(font_mdi_large), TextAlign::TOP_LEFT, &calculated_x, &calculated_y, &calculated_width, &calculated_height);
//print icon text offset from center of screen on left side
it.printf(412-calculated_width-10, weather_current_offset + 10, id(font_mdi_large), color_white, TextAlign::TOP_LEFT, "%s", icon_map[id(current_weather_condition).state.c_str()].c_str());
Can’t you just align that with TextAlign::Right and add the offset you want in from the right? It should then self centre from the right boundary, shouldn’t it. Perhaps that doesn’t play nice when you it moves from single to double digit.
// Aligned on right edge
it.print(it.get_width(), 0, id(my_font), TextAlign::TOP_RIGHT, "Right aligned");
Not sure I follow. Aligning the text to the icon will make the distance correct but won’t center the two elements as the icons needs centering as well.
Text align left the Icon and offset it in from the left edge to where you want it.
Then text align right the degrees and degree sign in from the right, with the appropriate offset from the right side.
That should right justify the text element, so that when it moves to double digits the number fills in from the right(backwards or R to L) from the right side offset, if that makes sense.
I thought I would post my solution here for others facing this:
Create a header file (“e.g. text_utils.h”) which you include in the esp yaml file.
In this header, define several overloads of the same function to calculate the width given different types: i.e. string, int, float, and time.
Then, in all lambda calls, invoke GetTextWidth without worrying about the type and it will be resolved accordingly
int GetTextBounds(esphome::display::Display* it, esphome::font::Font *font, const char *buffer)
{
int x1 = 0; // A pointer to store the returned x coordinate of the upper left corner in.
int y1 = 0; // A pointer to store the returned y coordinate of the upper left corner in.
int width = 0; // A pointer to store the returned text width in.
int height = 0; // A pointer to store the returned text height in.
it->get_text_bounds(0, 0, buffer, font, TextAlign::TOP_LEFT, &x1, &y1, &width, &height);
return width;
}
int GetTextWidth(esphome::display::Display* it, esphome::font::Font *font, const char* formatting, const char *raw_text){
char temp_buffer[80];
sprintf(temp_buffer, formatting, raw_text);
return GetTextBounds(it, font, temp_buffer);
}
... // overloads for int and float
// Calculate the width of time format
int GetTextWidth(esphome::display::Display* it, esphome::font::Font *font, const char* formatting, esphome::ESPTime time){
auto c_tm = time.to_c_tm();
size_t buffer_length = 80;
char temp_buffer[buffer_length];
strftime(temp_buffer, buffer_length, formatting, &c_tm);
return GetTextBounds(it, font, temp_buffer);
}
Using it within lambda is quite trivial:
// Estimating total length of text
int day_size = GetTextWidth(&it, id(day_font), "%d", id(hass_time).now());
int icon_size = GetTextWidth(&it, id(font_mdi_large), "%s", weather_icon_map[id(condition_now).state.c_str()].c_str());
int temperature_size = GetTextWidth(&it, id(temperature_font), "%s°C", id(temperature_now).state.c_str());
@jambuu
Today I had the issue that the overloads gave some errors.
I changed things like esphome::font::Font , esphome::display::Display* and esphome::ESPTime and got my overloads working again.
I wanted to update this topic with my findings, but surprisingly found out that you already changed your examples just today! What a coincidence!
(and thanks again for sharing)
Hi @jjansen85, totally coincidence, I had postpone the update of home assistant due to lack of time and got some time to look into the problem, great that you also fixed it.
I realize I am definitely “late to the party”, but I thought I would throw in a slightly more efficient version that directly uses a Font method (which is what the Display method does on the second line of its code):
// Get the width (in pixels) of a char string using a given Font
int get_text_width(esphome::font::Font *font, const char *text)
{
int width, x_offset, baseline, height;
font->measure(text, &width, &x_offset, &baseline, &height);
return width;
}
Specifying a TextAlign value does not affect the actual width value returned (only the x and/or y values which are not returned in either implementation here).
