Giter VIP home page Giter VIP logo

Comments (11)

holgerlembke avatar holgerlembke commented on September 10, 2024 1

@martinberlin Thanks.

A class-wrapper would be nice. I could do it... It needs some more functions, I miss a rectangle with round edges, I have it on my list...

Here the problem was/is the missing bits of information in https://epdiy.readthedocs.io/en/latest/api.html or source code and my unwillingness to dig into it. That is why I build some new basic examples. This will go into it.

Do I have to call epd_font_properties_default after assigning a font?

My only change to epdiy is EpdRect makeEpdRect(int x, int y, int w, int h);, I do not really like to change stuff in "no my libs".

So, next example is a clock.
grafik

from epdiy.

yanyuandi avatar yanyuandi commented on September 10, 2024 1
void drawString(int x, int y, const char *str, const EpdFont *ziti)
{   
    EpdFontProperties font_props = epd_font_properties_default();
    font_props.flags = EPD_DRAW_ALIGN_CENTER;
    int bound_x, bound_y, bound_x1, bound_y1, bound_w, bound_h;
    bound_x = x;
    bound_y = y;
    epd_get_text_bounds(ziti, str, &bound_x, &bound_y, &bound_x1, &bound_y1, &bound_w, &bound_h, &font_props);
    ESP_LOGI("main", "bound_x=%d, bound_y=%d, bound_x1=%d, bound_y1=%d, bound_w=%d, bound_h=%d", bound_x,bound_y, bound_x1, bound_y1, bound_w, bound_h);

    int cursor_x = bound_x1;
    int cursor_y = bound_y1 + bound_h;
    epd_write_string(ziti, str, &cursor_x, &cursor_y, fb, &font_props);

    EpdRect rect = {
        .x = x - bound_w / 2,
        .y = y,
        .width = bound_w,
        .height = bound_h};

    epd_draw_rect(rect, 0x0, fb);
}

112

@holgerlembke you can try this function,and you can get the result like the image behind the code

from epdiy.

martinberlin avatar martinberlin commented on September 10, 2024

If I see this correctly, from the top of my head, the thing is that epd_write_string x,y start is the lower left corner.
Need to try this myself. But if you try for example making a small gray circle at x,y:

epd_fill_circle(x, y, 4, 125, epaperFrameBuffer);

And then drawing the font you can check what is the starting point to draw the font.
That would explain what is happening here.

from epdiy.

holgerlembke avatar holgerlembke commented on September 10, 2024

All nice and good. But how to solve the task "draw a rectangle around a given text"?

If I have a box with x/y (top/left corner), calc the bounding box and and the height to top (y+=height), I should be at the bottom.

That seems not to work. /me confused.

from epdiy.

martinberlin avatar martinberlin commented on September 10, 2024

Holger what you can easily make here is a helper function where you can pass the Font and x, y origin of the text and this function will draw both the text and the rectangle for you.

I can help you to do this but first would be nice if you try it yourself.

from epdiy.

holgerlembke avatar holgerlembke commented on September 10, 2024

Easily? Looks like my skills are overrated... All I get is that:

grafik

Example is in https://github.com/holgerlembke/epdiy/tree/main/examples/Basics/F_Text_in_Rectangle

I have no idea what to do.

from epdiy.

martinberlin avatar martinberlin commented on September 10, 2024

Can’t you just make a function to offset that rectangle X pixels down depending on the font size?
Will take a look

from epdiy.

holgerlembke avatar holgerlembke commented on September 10, 2024

I can make a lot of things.

But I really want to understand what happens here. If it is a bug, if I'm stupid or what else.

from epdiy.

martinberlin avatar martinberlin commented on September 10, 2024

Try this:

void Text_In_Rectangle_Hlpr(int x, int y, char * text) {
  const EpdFont* font = &FiraSans_20;
  EpdFontProperties font_props = epd_font_properties_default();
  const int margin = 2;

  printf("Attempt to write a font at x:%d y:%d\n\n", x, y);
  EpdRect r = epd_get_string_rect(font, text, x, y, margin, &font_props);

  // Offset EpdRect to half y size of the font - a margin (does not have to be the same)
  r.y -= font->advance_y - (margin*2);
  epd_draw_rect(r, 0, fb);
  epd_write_string(font, text, &x, &y, fb, &font_props);
}

It's just an example so feel free to copy only relevant parts. You are doing wrong the write_string in my opinion.
I would also directly pass the Font to the function so then you can reuse it for different fonts and can adapt to the size. Note that I'm using the advance_y property of the font struct itself to calculate the offset of the rectangle.

Changing topic @vroland
I feel that many users have a hard time trying to draw stuff with epdiy. Maybe for some users it will would be easier that I make a C++ wrapper around a known library like Adafruit GFX. And then you can use their guides and documentation to draw easy stuff the way you want.
But I like more the way epdiy Fonts work of course. It's just that for many in my opinion the way it is to draw something more or less complex now, is quite hard to grasp. That's of course my humble opinion after trying to do support here.

from epdiy.

martinberlin avatar martinberlin commented on September 10, 2024

Do I have to call epd_font_properties_default after assigning a font?

no. You can just make font_props local if it’s the same for all fonts and just pass it around. The fonts part I like but the code itself to print a single text is a bit too verbose.

from epdiy.

martinberlin avatar martinberlin commented on September 10, 2024

This is resolved as per yanyuandi answer. @holgerlembke please write a helper function or contribute to the repository making a pull-request making a function that will work generically.

from epdiy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.