I have been moving my OWM app to run on LVGL. One thing that I was never happy with was the 5 day forecast graphs, they are hard to read at a glance as the days were not easy to see. So I have added colours to the charts that change by day. Code below in case anyone else is interested. Does not look like I can add a picture yet (first post).
#include <Arduino.h>
#include “ui.h”
#include “ui_helpers.h”
#define noOfDays 4
///////////////////// VARIABLES ////////////////////
lv_obj_t * ui_Screen1;
int dayStart[noOfDays] = {0,4,10,16};
int dayEnd[noOfDays] = {3,9,15,23};
String dayLabel[noOfDays] = {“Mon”,“Tue”,“Wed”,“Thur”};
lv_color_t dayColor[noOfDays]; //color for the days
///////////////////// SCREENS ////////////////////
static lv_obj_t * chart1;
static lv_chart_series_t * ser1;
static void draw_event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target(e);
lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
if(lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) { //TBD - add labels with time
if(dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text ) {
const char * month[] = {"J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"};
// lv_snprintf(dsc->text, dsc->text_length, “%s”, month[dsc->value]); //set to time from data
}
}
/*Add the faded area before the lines are drawn*/
if(dsc->part == LV_PART_ITEMS) {
if(!dsc->p1 || !dsc->p2) return;
/*Add a line mask that keeps the area below the line*/
lv_draw_mask_line_param_t line_mask_param;
lv_draw_mask_line_points_init(&line_mask_param, dsc->p1->x, dsc->p1->y, dsc->p2->x, dsc->p2->y,
LV_DRAW_MASK_LINE_SIDE_BOTTOM);
int16_t line_mask_id = lv_draw_mask_add(&line_mask_param, NULL);
/*Draw a rectangle*/
lv_draw_rect_dsc_t draw_rect_dsc;
lv_draw_rect_dsc_init(&draw_rect_dsc);
draw_rect_dsc.bg_opa = LV_OPA_50;
int myId = dsc->id;
for (int i=0;i<4;i++) {
if (myId >= dayStart[i]){
draw_rect_dsc.bg_color =dayColor[i];
}
}
lv_area_t a;
a.x1 = dsc->p1->x;
a.x2 = dsc->p2->x - 1;
a.y1 = LV_MIN(dsc->p1->y, dsc->p2->y);
a.y2 = obj->coords.y2;
lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
/*Remove the masks*/
lv_draw_mask_free_param(&line_mask_param);
lv_draw_mask_remove_id(line_mask_id);
for (int i=0;i<4;i++) {
if (myId == dayStart[i]){
lv_point_t size;
lv_txt_get_size(&size, dayLabel[i].c_str(), LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);
lv_area_t a;
// a.y2 = obj->coords.y2; //text at bottom
// a.y1 = a.y2 - size.y - 10;
a.y1 = obj->coords.y1; //text at top
a.y2 = a.y1 + size.y + 10;
a.x1 = dsc->p1->x;
a.x2 = a.x1 + size.x + 10;
lv_draw_rect_dsc_t draw_rect_dsc;
lv_draw_rect_dsc_init(&draw_rect_dsc);
draw_rect_dsc.bg_color = dayColor[i];
draw_rect_dsc.radius = 3;
lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
lv_draw_label_dsc_t draw_label_dsc;
lv_draw_label_dsc_init(&draw_label_dsc);
draw_label_dsc.color = lv_color_white();
a.x1 += 5;
a.x2 -= 5;
a.y1 += 5;
a.y2 -= 5;
lv_draw_label(dsc->draw_ctx, &draw_label_dsc, &a, dayLabel[i].c_str(), NULL);
lv_draw_line_dsc_t draw_line_dsc; //draw vertical lines
lv_draw_line_dsc_init(&draw_line_dsc);
draw_line_dsc.color = lv_palette_main (LV_PALETTE_GREY);
lv_point_t myP1;
myP1.x = dsc->p1->x;
myP1.y = obj->coords.y1;
lv_point_t myP2;
myP2.x = dsc->p1->x;
myP2.y = obj->coords.y2;
lv_draw_line (dsc->draw_ctx, &draw_line_dsc, &myP1, &myP2);
}
}
}
}
void lv_owm_chart_1(lv_obj_t * ui_Screen1)
{
/Create a chart1/
chart1 = lv_chart_create(ui_Screen1);
lv_obj_set_size(chart1, 600, 350);
lv_obj_center(chart1);
lv_chart_set_type(chart1, LV_CHART_TYPE_LINE); /Show lines and points too/
lv_chart_set_div_line_count(chart1, 6, 0);
lv_chart_set_axis_tick(chart1, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 6, 5, true, 40);
lv_chart_set_axis_tick(chart1, LV_CHART_AXIS_PRIMARY_X, 10, 5, 24, 1, true, 30);
lv_chart_set_point_count (chart1, 24);
lv_obj_add_event_cb(chart1, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
lv_chart_set_update_mode(chart1, LV_CHART_UPDATE_MODE_CIRCULAR);
/*Add data series*/
ser1 = lv_chart_add_series(chart1, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
uint32_t i;
for(i = 0; i < 24; i++) {
lv_chart_set_next_value(chart1, ser1, lv_rand(20, 90));
}
}
///////////////////// SCREENS ////////////////////
void ui_Screen1_screen_init(void)
{
ui_Screen1 = lv_obj_create(NULL);
dayColor[0] = lv_palette_main (LV_PALETTE_GREEN);
dayColor[1] = lv_palette_main (LV_PALETTE_ORANGE);
dayColor[2] = lv_palette_main (LV_PALETTE_LIME);
dayColor[3] = lv_palette_main (LV_PALETTE_BLUE);
lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE); /// Flags
lv_owm_chart_1 (ui_Screen1);
}
void ui_init(void)
{
lv_disp_t * dispp = lv_disp_get_default();
lv_theme_t * theme = lv_theme_default_init(dispp, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_RED),
false, LV_FONT_DEFAULT);
lv_disp_set_theme(dispp, theme);
ui_Screen1_screen_init();
lv_disp_load_scr(ui_Screen1);
}