// Grafik Routinen #define GRAFIK // #include "handlebme280.h" #include "main.h" #include "grafik.h" // Definition der diversen Farben #define TEXTCOLOTR_TFAUSSEN 0x57d3F7 #define BACKGROUND_COLOR 0xD3F0FF #define TEXTCOLOR 0x0000FF #define TEXTCOLOR_FEUCHTE 0xFF0000 #define TEXTCOLOR_XACHSE 0x0000FF #define TEXTCOLOR_INFO 0x404040 #define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT / 10 * (LV_COLOR_DEPTH / 8)) uint32_t draw_buf[DRAW_BUF_SIZE / 4]; static lv_obj_t *chart; static lv_coord_t bmewert[MAXREADINGS]; static lv_coord_t bmewert_hum[MAXREADINGS]; void setup_grafik(void) { lv_init(); lv_display_t *disp; disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf)); for (int i = 0; i < MAXREADINGS; i++) { bmewert[i] = 0; bmewert_hum[i] = 30; } } void buildarc(ARC arc) { lv_obj_set_size(arc.arc, arc.size, arc.size); lv_arc_set_rotation(arc.arc, 180); lv_arc_set_bg_angles(arc.arc, 0, 180); lv_arc_set_value(arc.arc, arc.value+arc.value_offset); lv_obj_align(arc.arc, LV_ALIGN_LEFT_MID, arc.x, arc.y); lv_obj_remove_style(arc.arc, NULL, LV_PART_KNOB); // Style this arc static lv_style_t style_arc; lv_style_init(&style_arc); lv_style_set_arc_width(&style_arc, 20); lv_style_set_arc_rounded(&style_arc, false); lv_obj_add_style(arc.arc, &style_arc, LV_PART_MAIN); lv_obj_add_style(arc.arc, &style_arc, LV_PART_INDICATOR); lv_obj_t *low_label = lv_label_create(arc.arc); char valuelow[10]; sprintf(valuelow, "%d", arc.lowvalue); lv_label_set_text(low_label, valuelow); lv_obj_align(low_label, LV_ALIGN_LEFT_MID, 5, 8); static lv_style_t style_low_label; lv_style_init(&style_low_label); lv_style_set_text_font(&style_low_label, &lv_font_montserrat_10); lv_obj_add_style(low_label, &style_low_label, 0); lv_obj_t *value_label = lv_label_create(arc.arc); char value[10]; sprintf(value, arc.valformat, arc.value + arc.value_offset); // Serial.println(value); lv_label_set_text(value_label, value); lv_obj_align(value_label, LV_ALIGN_LEFT_MID, 38 + arc.value_xoffset, 0); static lv_style_t style_value_label; lv_style_init(&style_value_label); lv_style_set_text_font(&style_value_label, &lv_font_montserrat_18); lv_obj_add_style(value_label, &style_value_label, 0); lv_obj_t *high_label = lv_label_create(arc.arc); char valuehigh[10]; sprintf(valuehigh, "%d", arc.highvalue); lv_label_set_text(high_label, valuehigh); lv_obj_align(high_label, LV_ALIGN_LEFT_MID, 90, 8); static lv_style_t style_high_label; lv_style_init(&style_high_label); lv_style_set_text_font(&style_high_label, &lv_font_montserrat_10); lv_obj_add_style(high_label, &style_high_label, 0); /* lv_obj_t * unit_label = lv_label_create(arc.arc); lv_label_set_text(unit_label, arc.unit); lv_obj_align(unit_label, LV_ALIGN_LEFT_MID, 48, 8); static lv_style_t style_unit_label; lv_style_init(&style_unit_label); lv_style_set_text_font(&style_unit_label, &lv_font_montserrat_12); lv_obj_add_style(unit_label, &style_unit_label, 0); */ } void showAussenData(float val, bool what) { ta_label = lv_label_create(lv_screen_active()); lv_label_set_text(ta_label," "); tta_label = lv_label_create(lv_screen_active()); lv_label_set_text(tta_label," "); fa_label = lv_label_create(lv_screen_active()); lv_label_set_text(fa_label," "); tfa_label = lv_label_create(lv_screen_active()); lv_label_set_text(tfa_label," "); static lv_style_t style_ta_label; lv_style_init(&style_ta_label); lv_style_set_text_font(&style_ta_label, &lv_font_montserrat_16); lv_obj_add_style(ta_label, &style_ta_label, 0); lv_obj_add_style(fa_label, &style_ta_label, 0); static lv_style_t style_tta_label; lv_style_init(&style_tta_label); lv_style_set_text_font(&style_tta_label, &lv_font_montserrat_10); lv_style_set_text_color(&style_tta_label, lv_color_hex(TEXTCOLOTR_TFAUSSEN)); lv_obj_add_style(tta_label, &style_tta_label, 0); lv_obj_add_style(tfa_label, &style_tta_label, 0); } void lv_create_main_gui(void) { // Create a text label aligned on top: https://docs.lvgl.io/master/widgets/label.html time_label = lv_label_create(lv_screen_active()); lv_label_set_text(time_label, "17:30"); lv_obj_align(time_label, LV_ALIGN_TOP_MID, 0, 8); // Set font type and font size. More information: https://docs.lvgl.io/master/overview/font.html static lv_style_t style_time_label; lv_style_init(&style_time_label); lv_style_set_text_font(&style_time_label, &lv_font_montserrat_28); lv_obj_add_style(time_label, &style_time_label, 0); // Create a text label aligned on top: https://docs.lvgl.io/master/widgets/label.html date_label = lv_label_create(lv_screen_active()); lv_label_set_text(date_label, "Dienstag, 12. Dezember 2024"); lv_obj_align(date_label, LV_ALIGN_TOP_MID, 0, 38); // Set font type and font size. More information: https://docs.lvgl.io/master/overview/font.html static lv_style_t style_date_label; lv_style_init(&style_date_label); lv_style_set_text_font(&style_date_label, &lv_font_montserrat_12); lv_obj_add_style(date_label, &style_date_label, 0); /* Refresh-Symbol anzeigen lv_obj_t * refresh_label = lv_label_create(lv_screen_active()); lv_label_set_text(refresh_label, LV_SYMBOL_REFRESH); lv_obj_align(refresh_label, LV_ALIGN_CENTER, 0, -45); */ /*Create an Arc*/ lv_obj_t *aTemp = lv_arc_create(lv_screen_active()); arcTemp.arc = aTemp; buildarc(arcTemp); lv_obj_t *aHum = lv_arc_create(lv_screen_active()); arcHum.arc = aHum; buildarc(arcHum); lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(BACKGROUND_COLOR), LV_PART_MAIN); showAussenData(0, true); showAussenData(0, false); // show2lines(); } void setValuetoArc(ARC arc, float value) { int r = arc.highvalue - arc.lowvalue; int v = (value - arc.lowvalue) * 100 / r; arc.value = v; lv_arc_set_value(arc.arc, arc.value); lv_obj_t *value_label = lv_obj_get_child(arc.arc, 1); char valuestr[10]; sprintf(valuestr, arc.valformat, value); lv_label_set_text(value_label, valuestr); if (strcmp(arc.name, "humi") == 0) { if (value < arc.green) { lv_obj_set_style_arc_color(arc.arc, lv_palette_main(LV_PALETTE_GREEN), LV_PART_INDICATOR); } else if (value < arc.yellow) { lv_obj_set_style_arc_color(arc.arc, lv_palette_main(LV_PALETTE_YELLOW), LV_PART_INDICATOR); } else { lv_obj_set_style_arc_color(arc.arc, lv_palette_main(LV_PALETTE_RED), LV_PART_INDICATOR); } } } #define CONTAINER_WIDTH SCREEN_WIDTH #define CONTAINER_HEIGHT SCREEN_HEIGHT - 140 #define LEFTAXIS_WIDTH 25 #define RIGHTAXIS_WIDTH 15 #define CHART_WIDTH (CONTAINER_WIDTH - LEFTAXIS_WIDTH - RIGHTAXIS_WIDTH - 40) #define CHART_HEIGHT (CONTAINER_HEIGHT) void drawChart() { Serial.println("draw_chart "); int scaleHeight = 85; // Create a container to display the chart and scale lv_obj_t *container_row = lv_obj_create(lv_screen_active()); lv_obj_set_size(container_row, CONTAINER_WIDTH, CONTAINER_HEIGHT); lv_obj_align(container_row, LV_ALIGN_BOTTOM_MID, 0, -4); // Set the container in a flexbox row layout aligned center lv_obj_set_flex_flow(container_row, LV_FLEX_FLOW_ROW); lv_obj_set_flex_align(container_row, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER); lv_obj_set_scrollbar_mode(container_row, LV_SCROLLBAR_MODE_OFF); static lv_style_t style_container_row; lv_style_set_pad_row(&style_container_row, 0); // lv_style_set_bg_color(&style_container_row, lv_palette_lighten(LV_PALETTE_LIGHT_BLUE, 4)); lv_obj_add_style(container_row, &style_container_row, 0); lv_obj_set_style_border_side(container_row, LV_BORDER_SIDE_NONE, LV_PART_MAIN); lv_obj_set_style_bg_color(container_row, lv_color_hex(BACKGROUND_COLOR), LV_PART_MAIN); // linke Axe lv_obj_t *scaleT = lv_scale_create(container_row); lv_obj_set_size(scaleT, 30, scaleHeight); lv_scale_set_mode(scaleT, LV_SCALE_MODE_VERTICAL_LEFT); static const char *scaleT_labels[6] = {"15°C", "20°C", "25°C", "30°C", "35°C"}; lv_scale_set_text_src(scaleT, scaleT_labels); lv_scale_set_label_show(scaleT, true); lv_scale_set_total_tick_count(scaleT, 21); lv_scale_set_major_tick_every(scaleT, 5); lv_obj_set_style_length(scaleT, 0, LV_PART_ITEMS); lv_obj_set_style_length(scaleT, 0, LV_PART_INDICATOR); lv_obj_set_style_line_width(scaleT, 0, LV_PART_ITEMS); lv_obj_set_style_line_width(scaleT, 0, LV_PART_INDICATOR); lv_obj_set_style_line_width(scaleT, 0, LV_PART_MAIN); lv_scale_set_range(scaleT, 15, 35); static lv_style_t style_scaleT; lv_style_init(&style_scaleT); lv_style_set_text_font(&style_scaleT, &lv_font_montserrat_10); lv_style_set_text_color(&style_scaleT, lv_color_hex(TEXTCOLOR)); // lv_style_set_bg_color(&style_scaleT, lv_color_hex(0xFF00FF)); lv_obj_add_style(scaleT, &style_scaleT, 0); // Create a chart // Info: die Breite eines X-Abschnittes (von vertikaler Linie zu vertikaler Linie) beträgt 55 Pixel chart = lv_chart_create(container_row); lv_obj_set_size(chart, CHART_WIDTH, CHART_HEIGHT); lv_chart_set_type(chart, LV_CHART_TYPE_LINE); /*Show lines and points too*/ lv_chart_set_point_count(chart, MAXREADINGS); lv_chart_set_div_line_count(chart, 5, 5); lv_chart_set_range(chart, LV_CHART_AXIS_SECONDARY_Y, 40, 100); lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 15, 35); lv_obj_set_style_size(chart, 0, 0, LV_PART_INDICATOR); // No points on line lv_obj_set_scrollbar_mode(chart, LV_SCROLLBAR_MODE_OFF); lv_obj_set_style_border_width(chart, 0, LV_PART_MAIN); // No border lv_obj_set_style_bg_color(chart, lv_color_hex(BACKGROUND_COLOR), LV_PART_MAIN); // lv_obj_set_style_pad_right(chart, -10, LV_PART_MAIN); // No border /*Add data series*/ lv_chart_series_t *ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_BLUE), LV_CHART_AXIS_PRIMARY_Y); lv_chart_set_ext_y_array(chart, ser1, (lv_coord_t *)bmewert); lv_chart_series_t *ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_SECONDARY_Y); lv_chart_set_ext_y_array(chart, ser2, (lv_coord_t *)bmewert_hum); lv_chart_refresh(chart); /*Required after direct set*/ // rechte Axe lv_obj_t *scale = lv_scale_create(container_row); lv_obj_set_size(scale, 30, scaleHeight); lv_scale_set_mode(scale, LV_SCALE_MODE_VERTICAL_RIGHT); static const char *scale_labels[5] = {"40%", "55%", "70%", "85%", "100%"}; lv_scale_set_text_src(scale, scale_labels); lv_scale_set_label_show(scale, true); lv_scale_set_total_tick_count(scale, 21); lv_scale_set_major_tick_every(scale, 5); lv_obj_set_style_length(scale, 0, LV_PART_ITEMS); lv_obj_set_style_length(scale, 0, LV_PART_INDICATOR); lv_obj_set_style_line_width(scale, 0, LV_PART_ITEMS); lv_obj_set_style_line_width(scale, 1, LV_PART_INDICATOR); lv_obj_set_style_line_width(scale, 0, LV_PART_MAIN); lv_obj_set_style_bg_color(scale, lv_color_hex(BACKGROUND_COLOR), LV_PART_MAIN); lv_scale_set_range(scale, 40, 100); static lv_style_t style_scale; lv_style_init(&style_scale); lv_style_set_text_font(&style_scale, &lv_font_montserrat_10); lv_style_set_text_color(&style_scale, lv_color_hex(TEXTCOLOR_FEUCHTE)); lv_obj_add_style(scale, &style_scale, 0); // X-Achse lv_obj_t *xscale = lv_scale_create(chart); lv_obj_set_size(xscale, 220, 30); lv_scale_set_mode(xscale, LV_SCALE_MODE_HORIZONTAL_TOP); //static const char *xscale_labels[6] = {"200", "150", "100", "50", "0"}; //lv_scale_set_text_src(xscale, xscale_labels); lv_scale_set_label_show(xscale, true); lv_scale_set_total_tick_count(xscale, 21); lv_scale_set_major_tick_every(xscale, 5); lv_obj_set_style_length(xscale, 0, LV_PART_ITEMS); lv_obj_set_style_length(xscale, 0, LV_PART_INDICATOR); lv_obj_set_style_line_width(xscale, 0, LV_PART_ITEMS); lv_obj_set_style_line_width(xscale, 0, LV_PART_INDICATOR); lv_obj_set_style_line_width(xscale, 0, LV_PART_MAIN); lv_scale_set_range(xscale, -110, 0); lv_obj_set_pos(xscale, 5, -25); static lv_style_t style_xscale; lv_style_init(&style_xscale); lv_style_set_text_font(&style_xscale, &lv_font_montserrat_10); lv_style_set_text_color(&style_xscale, lv_color_hex(TEXTCOLOR_XACHSE)); lv_obj_add_style(xscale, &style_xscale, 0); // Text als Überschrift an die Axen lv_obj_t *feuchte_label = lv_label_create(lv_screen_active()); lv_label_set_text(feuchte_label, "Feuchte"); lv_obj_align(feuchte_label, LV_ALIGN_RIGHT_MID, -3, 8); lv_obj_t *temp_label = lv_label_create(lv_screen_active()); lv_label_set_text(temp_label, "Temperatur"); lv_obj_align(temp_label, LV_ALIGN_LEFT_MID, 3, 8); // Set font type and font size. More information: https://docs.lvgl.io/master/overview/font.html static lv_style_t style_tf_label; lv_style_init(&style_tf_label); lv_style_set_text_font(&style_tf_label, &lv_font_montserrat_10); lv_obj_add_style(feuchte_label, &style_tf_label, 0); lv_obj_add_style(temp_label, &style_tf_label, 0); /* ganz unten etwas Info anzeigen */ // Style dafür static lv_style_t style_info_label; lv_style_init(&style_info_label); lv_style_set_text_font(&style_info_label, &lv_font_montserrat_8); lv_style_set_text_color(&style_info_label, lv_color_hex(TEXTCOLOR_INFO)); // Versionsnummer, IP-Adresse und Datum lv_obj_t *version_label = lv_label_create(lv_screen_active()); char ver[40]; sprintf(ver, "V %s %s %s", VERSION, VDATE, VTIME); lv_label_set_text(version_label, ver); lv_obj_align(version_label, LV_ALIGN_BOTTOM_RIGHT, -4, 0); lv_obj_add_style(version_label, &style_info_label, LV_PART_MAIN); } void showRate(int r) { char rate[20]; sprintf(rate, "Rate: %ds", r); lv_label_set_text(bmr_label, rate); } void updatechartData(float value, float humvalue) { int i = 0; for (i = 0; i < MAXREADINGS - 1; i++) { bmewert[i] = bmewert[i + 1]; bmewert_hum[i] = bmewert_hum[i + 1]; } bmewert[MAXREADINGS - 1] = value; bmewert_hum[MAXREADINGS - 1] = humvalue; lv_chart_refresh(chart); } void setAussenDataValues(float val, bool what, struct tm t) { if (what) { lv_label_set_text_fmt(ta_label,"Taussen:\n%.1f °C", val); lv_obj_align(ta_label, LV_ALIGN_TOP_LEFT, 10, 10); lv_label_set_text_fmt(tta_label,"%02d:%02d\n", t.tm_hour, t.tm_min); lv_obj_align(tta_label, LV_ALIGN_TOP_LEFT, 10, 45); } else { lv_label_set_text_fmt(fa_label,"Fa:\n%.0f %%", val); lv_obj_align(fa_label, LV_ALIGN_TOP_RIGHT, -10, 10); lv_label_set_text_fmt(tfa_label,"%02d:%02d\n", t.tm_hour, t.tm_min); lv_obj_align(tfa_label, LV_ALIGN_TOP_RIGHT, -23, 45); } } void show2lines() { int x1 = 104; int x2 = x1 + 56; static lv_point_precise_t line1_points[] = { {x1, 70}, {x1, 220} }; static lv_point_precise_t line2_points[] = { {x2, 70}, {x2, 220}}; static lv_style_t style_line; lv_style_init(&style_line); lv_style_set_line_width(&style_line, 1); lv_style_set_line_color(&style_line, lv_palette_main(LV_PALETTE_BLUE)); lv_obj_t *line1, *line2; line1 = lv_line_create(lv_screen_active()); lv_line_set_points(line1, line1_points, 2); lv_obj_add_style(line1, &style_line, 0); line2 = lv_line_create(lv_screen_active()); lv_line_set_points(line2, line2_points, 2); lv_obj_add_style(line2, &style_line, 0); } void showResetTime(struct tm tinfo) { static lv_style_t style_info_label; lv_style_init(&style_info_label); lv_style_set_text_font(&style_info_label, &lv_font_montserrat_8); lv_style_set_text_color(&style_info_label, lv_color_hex(TEXTCOLOR_INFO)); char date[20]; strftime(date, 20, "%d-%m-%Y %H:%M", &tinfo); lv_obj_t *resdate_label = lv_label_create(lv_screen_active()); lv_label_set_text(resdate_label, date); lv_obj_align(resdate_label, LV_ALIGN_BOTTOM_LEFT, 4, 0); lv_obj_add_style(resdate_label, &style_info_label, LV_PART_MAIN); } void setDateTime(char *time, char *date) { lv_label_set_text(time_label, time); lv_label_set_text(date_label, date); }