design analog clock

[liubingyan123]

Hi, I'm designing a watch with littlevgl. I want to design a analog watch with hour hand, minute hand and second hand, just as the folowing shows, but have no any idea, would you please offer me some advices ?

thank you!

[kisvegabor]

Hi,

First of all I suggest to use dev-v5.2 branch because there is a new line drawing algorithm in it which can draw perpendicular line ending. And it seems a good line drawing will be important to you.

So to do it you have two options:

1. Create a base object (lv_obj_create()) and set a new design function for it. It is a simple but you have no opportunity to store additional data in the object but it"s good the test the drawing part. It looks like like this:

bool clock_design(lv_obj_t * clock, const lv_area_t * mask, lv_design_mode_t mode)
{
    if(mode == LV_DESIGN_COVER_CHK) {
        return false;       /*A clock won't covert the whole area so return false*/
    } else if (mode == LV_DESIGN_DRAW_MAIN) {
        lv_opa_t opa_scale = lv_obj_get_opa_scale(clock);          /*Object level opacity*/

                /*Set-up a style for the background*/
        lv_style_t bg_style;
        lv_style_copy(&bg_style, &lv_style_plain);
        bg_style.body.main_color = LV_COLOR_BLUE;
        bg_style.body.grad_color = LV_COLOR_BLUE;
        bg_style.body.border.width = 3;
        bg_style.body.border.color = LV_COLOR_RED;
        bg_style.body.radius = LV_RADIUS_CIRCLE;
           /*Draw the background*/  
               lv_draw_rect(&clock->coords, mask, &bg_style, opa_scale);

                /*Create a line style*/
        lv_style_t line_style;
        lv_style_copy(&line_style, &lv_style_plain);
        line_style.line.color = LV_COLOR_BLACK;
        line_style.line.width = 4;
                /*Draw a line*/
        lv_point_t p1;
        lv_point_t p2;
        p1.x = clock->coords.x1 + 30;
        p1.y = clock->coords.y1 + 30;
        p2.x = clock->coords.x1 + 60;
        p2.y = clock->coords.y1 + 60;

        lv_draw_line(&p1, &p2, mask, &line_style, opa_scale);
    }

    return true;
}

[...]

    lv_obj_t * clock = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_pos(clock, 10, 10);
    lv_obj_set_size(clock, 100, 100);
    lv_obj_set_design_func(clock, clock_design);             /*Set a new design function*/

2. Create a new object type which can store additional data two. However it's a little bit more complicated. I can help you to create the new object type one the drawing works.

[liubingyan123]

ok，I got it。but if the hands have specific shapes, just like the following shows, it seems that line drawing woundn't achive it. so my requirement is t find a method to rotate pictue on screen, do you have any ideas? thank you very much! ![Uploading timg.jpg…]()

[kisvegabor]

Unfortunately the image rotate is not supported yet. :( So you can deal with lines and circles to make prettier hands.

[kisvegabor]

By the way we have discussion about a quite similar topic here: #290

[liubingyan123]

thank you!