Code
The code block(s) should be between ```c and ``` tags:
//Init of all Styles I use (cpp-file)
void StyleHelper::init()
{
styleInstance = this;
const std::lock_guard<std::recursive_mutex> lock(m_container->Frontend.LV_Mutex);
// default style
lv_style_init(&m_defaultStyle);
lv_style_set_border_width(&m_defaultStyle, 0);
lv_style_set_text_font(&m_defaultStyle, FontHelper::getSegoeui24());
lv_style_set_text_color(&m_defaultStyle, getFontColor());
lv_style_set_radius(&m_defaultStyle, 0);
lv_style_set_pad_all(&m_defaultStyle, 0);
lv_style_set_bg_opa(&m_defaultStyle, LV_OPA_COVER);
// container style
lv_style_init(&m_defaultContainerStyle);
lv_style_set_bg_opa(&m_defaultContainerStyle, LV_OPA_TRANSP);
// design style
lv_style_init(&m_designStyle);
lv_style_set_bg_color(&m_designStyle, COLOR_3(0xF26DF2));
lv_style_set_bg_opa(&m_designStyle, LV_OPA_50);
lv_style_set_border_color(&m_designStyle, lv_color_black());
lv_style_set_border_opa(&m_designStyle, LV_OPA_100);
lv_style_set_border_side(&m_designStyle, LV_BORDER_SIDE_FULL);
lv_style_set_border_width(&m_designStyle, 3);
lv_style_set_outline_color(&m_designStyle, lv_color_black());
lv_style_set_outline_opa(&m_designStyle, LV_OPA_100);
// style Text Button
lv_style_init(&m_styleTextButton);
lv_style_set_text_font(&m_styleTextButton, FontHelper::getSegoeui34());
lv_style_set_bg_color(&m_styleTextButton, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_bg_opa(&m_styleTextButton, LV_OPA_COVER);
lv_style_set_radius(&m_styleTextButton, LV_RADIUS_CIRCLE);
lv_style_set_pad_all(&m_styleTextButton, 5);
// style BaseSelectorBar
lv_style_init(&m_styleSelectorBar);
lv_style_set_bg_opa(&m_styleSelectorBar, LV_OPA_TRANSP);
lv_style_set_text_font(&m_styleSelectorBar, FontHelper::getSegoeui34());
lv_style_set_text_opa(&m_styleSelectorBar, LV_OPA_COVER);
lv_style_set_anim_speed(&m_styleSelectorBar, 30);
// style SwitchRocker
lv_style_init(&m_styleSwitchRocker);
lv_style_set_bg_opa(&m_styleSwitchRocker, LV_OPA_TRANSP);
lv_style_set_radius(&m_styleSwitchRocker, 15);
lv_style_set_border_width(&m_styleSwitchRocker, 3);
lv_style_set_border_color(&m_styleSwitchRocker, lv_palette_darken(LV_PALETTE_GREY, 1));
// style Button
lv_style_init(&m_styleButton);
lv_style_set_bg_color(&m_styleButton, lv_palette_darken(LV_PALETTE_BLUE, 4));
lv_style_set_bg_opa(&m_styleButton, LV_OPA_TRANSP);
lv_style_set_radius(&m_styleButton, 15);
// style Remote Button
lv_style_init(&m_styleRemoteButton);
lv_style_set_bg_color(&m_styleRemoteButton, lv_palette_darken(LV_PALETTE_BLUE, 1));
lv_style_set_bg_opa(&m_styleRemoteButton, LV_OPA_TRANSP);
lv_style_set_border_color(&m_styleRemoteButton, lv_palette_darken(LV_PALETTE_GREY, 1));
lv_style_set_border_width(&m_styleRemoteButton, 3);
lv_style_set_border_opa(&m_styleRemoteButton, LV_OPA_COVER);
lv_style_set_radius(&m_styleRemoteButton, 15);
// style pressed
lv_style_init(&m_styleButtonPressed);
lv_style_set_bg_opa(&m_styleButtonPressed, LV_OPA_50);
// style detail button
lv_style_init(&m_styleDetailButton);
lv_style_set_bg_color(&m_styleDetailButton, lv_palette_main(LV_PALETTE_GREY));
lv_style_set_bg_opa(&m_styleDetailButton, LV_OPA_COVER);
lv_style_set_radius(&m_styleDetailButton, LV_RADIUS_CIRCLE);
// labelStyle
lv_style_init(&m_labelStyle);
lv_style_set_bg_opa(&m_labelStyle, LV_OPA_TRANSP);
// style focused
lv_style_init(&m_styleFocused);
lv_style_set_bg_color(&m_styleFocused, lv_palette_main(LV_PALETTE_BLUE));
// style bg
lv_style_init(&m_bgStyle);
lv_style_set_bg_color(&m_bgStyle, getBgColor());
// style dropDownMenu
lv_style_init(&m_dropDownMenu);
lv_style_set_bg_color(&m_dropDownMenu, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_bg_opa(&m_dropDownMenu, LV_OPA_COVER);
lv_style_set_text_color(&m_dropDownMenu, getFontColor());
// style line
lv_style_init(&m_styleLine);
lv_style_set_line_width(&m_styleLine, 5);
lv_style_set_line_color(&m_styleLine, lv_color_black());
lv_style_set_line_rounded(&m_styleLine, true);
// style switch knob
lv_style_init(&m_styleSwitchKnob);
lv_style_set_bg_color(&m_styleSwitchKnob, lv_color_white());
lv_style_set_bg_opa(&m_styleSwitchKnob, LV_OPA_COVER);
lv_style_set_radius(&m_styleSwitchKnob, 20);
lv_style_set_pad_all(&m_styleSwitchKnob, -3);
// style switch indicator
lv_style_init(&m_styleSwitchIndicator);
lv_style_set_bg_color(&m_styleSwitchIndicator, lv_palette_main(LV_PALETTE_GREY));
lv_style_set_bg_opa(&m_styleSwitchIndicator, LV_OPA_COVER);
lv_style_set_radius(&m_styleSwitchIndicator, 20);
// style spinner indicator
lv_style_init(&m_styleSpinnerIndicator);
lv_style_set_arc_color(&m_styleSpinnerIndicator, lv_palette_main(LV_PALETTE_GREY));
lv_style_set_arc_opa(&m_styleSpinnerIndicator, LV_OPA_COVER);
lv_style_set_arc_rounded(&m_styleSpinnerIndicator, true);
lv_style_set_arc_width(&m_styleSpinnerIndicator, 30);
// style spinner knob
lv_style_init(&m_styleSpinnerKnob);
lv_style_set_bg_color(&m_styleSpinnerKnob, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_bg_opa(&m_styleSpinnerKnob, LV_OPA_COVER);
lv_style_set_radius(&m_styleSpinnerKnob, 20);
// style text area
lv_style_init(&m_textAreaStyle);
lv_style_set_text_align(&m_textAreaStyle, LV_TEXT_ALIGN_CENTER);
lv_style_set_text_font(&m_textAreaStyle, FontHelper::getSegoeui34());
lv_style_set_outline_width(&m_textAreaStyle, 3);
lv_style_set_outline_opa(&m_textAreaStyle, LV_OPA_60);
lv_style_set_outline_color(&m_textAreaStyle, lv_palette_main(LV_PALETTE_GREY));
// style text area selected
lv_style_init(&m_textAreaFocusedStyle);
lv_style_set_outline_width(&m_textAreaFocusedStyle, 3);
lv_style_set_outline_opa(&m_textAreaFocusedStyle, LV_OPA_60);
lv_style_set_outline_color(&m_textAreaFocusedStyle, lv_palette_main(LV_PALETTE_BLUE));
//pin buttons
lv_style_init(&m_stylePinButtons);
lv_style_set_bg_color(&m_stylePinButtons, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_bg_opa(&m_stylePinButtons, LV_OPA_COVER);
lv_style_set_text_align(&m_stylePinButtons, LV_TEXT_ALIGN_CENTER);
lv_style_set_text_font(&m_stylePinButtons, FontHelper::getSegoeui34());
lv_style_set_text_color(&m_stylePinButtons, getFontColor());
lv_style_set_radius(&m_stylePinButtons, LV_RADIUS_CIRCLE);
// style message box
lv_style_init(&m_msgBoxStyle);
lv_style_set_bg_color(&m_msgBoxStyle, lv_palette_lighten(LV_PALETTE_GREY, 1));
lv_style_set_bg_opa(&m_msgBoxStyle, LV_OPA_COVER);
lv_style_set_border_color(&m_msgBoxStyle, lv_color_black());
lv_style_set_border_width(&m_msgBoxStyle, 4);
lv_style_set_border_opa(&m_msgBoxStyle, LV_OPA_COVER);
lv_style_set_radius(&m_msgBoxStyle, 3);
// style drop down list
lv_style_init(&m_styleDropDownList);
lv_style_set_bg_color(&m_styleDropDownList, getBgColor());
lv_style_set_bg_opa(&m_styleDropDownList, LV_OPA_COVER);
lv_style_set_border_color(&m_styleDropDownList, lv_color_black());
lv_style_set_border_opa(&m_styleDropDownList, LV_OPA_COVER);
lv_style_set_border_width(&m_styleDropDownList, 4);
lv_style_set_radius(&m_styleDropDownList, 10);
lv_style_set_max_height(&m_styleDropDownList, 320);
lv_style_set_pad_row(&m_styleDropDownList, 20);
lv_style_set_text_font(&m_styleDropDownList, FontHelper::getSegoeui34());
// style drop down header
lv_style_init(&m_styleDropDownHeader);
lv_style_set_bg_color(&m_styleDropDownHeader, getBgColor());
lv_style_set_border_color(&m_styleDropDownHeader, lv_color_black());
lv_style_set_border_opa(&m_styleDropDownHeader, LV_OPA_COVER);
lv_style_set_border_width(&m_styleDropDownHeader, 4);
lv_style_set_radius(&m_styleDropDownHeader, 15);
// style OverView widget
lv_style_init(&m_styleOverViewWidget);
lv_style_set_bg_color(&m_styleOverViewWidget, lv_color_white());
lv_style_set_bg_opa(&m_styleOverViewWidget, LV_OPA_20);
lv_style_set_radius(&m_styleOverViewWidget, 10);
lv_style_set_shadow_width(&m_styleOverViewWidget, 55);
lv_style_set_shadow_color(&m_styleOverViewWidget, COLOR_OVERVIEW_BORDER);
lv_style_set_shadow_opa(&m_styleOverViewWidget, LV_OPA_COVER);
// style widget device state
lv_style_init(&m_styleWidgetDeviceState);
lv_style_set_radius(&m_styleWidgetDeviceState, 10);
lv_style_set_shadow_width(&m_styleWidgetDeviceState, 30);
lv_style_set_shadow_color(&m_styleWidgetDeviceState, COLOR_OVERVIEW_BORDER);
lv_style_set_shadow_opa(&m_styleWidgetDeviceState, LV_OPA_COVER);
//style slider main
lv_style_init(&m_styleSliderMain);
lv_style_set_bg_opa(&m_styleSliderMain, LV_OPA_50);
lv_style_set_bg_color(&m_styleSliderMain, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_radius(&m_styleSliderMain, LV_RADIUS_CIRCLE);
lv_style_set_outline_color(&m_styleSliderMain, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_outline_width(&m_styleSliderMain, 2);
lv_style_set_outline_pad(&m_styleSliderMain, 3);
//style slider indicator
lv_style_init(&m_styleSliderIndicator);
lv_style_set_bg_opa(&m_styleSliderIndicator, LV_OPA_COVER);
lv_style_set_bg_color(&m_styleSliderIndicator, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_radius(&m_styleSliderIndicator, LV_RADIUS_CIRCLE);
//style slider knob
lv_style_init(&m_styleSliderKnob);
lv_style_set_bg_opa(&m_styleSliderKnob, LV_OPA_COVER);
lv_style_set_bg_color(&m_styleSliderKnob, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_radius(&m_styleSliderKnob, LV_RADIUS_CIRCLE);
lv_style_set_pad_all(&m_styleSliderKnob, 6);
//style state disabled
lv_style_init(&m_styleStateDisabled);
lv_style_set_bg_color(&m_styleStateDisabled, lv_palette_main(LV_PALETTE_GREY));
lv_style_set_bg_opa(&m_styleStateDisabled, LV_OPA_50);
lv_style_set_outline_color(&m_styleStateDisabled, lv_palette_main(LV_PALETTE_GREY));
lv_style_set_outline_opa(&m_styleStateDisabled, LV_OPA_50);
//style date highlighted
lv_style_init(&m_styleDateHighlighted);
lv_style_set_radius(&m_styleDateHighlighted, 10);
lv_style_set_bg_color(&m_styleDateHighlighted, lv_palette_darken(LV_PALETTE_BLUE, 2));
lv_style_set_bg_opa(&m_styleDateHighlighted, LV_OPA_COVER);
// style History Item
lv_style_init(&m_styleHistoryItem);
lv_style_set_radius(&m_styleHistoryItem, 5);
lv_style_set_border_width(&m_styleHistoryItem, 3);
lv_style_set_border_color(&m_styleHistoryItem, lv_palette_darken(LV_PALETTE_GREY, 1));
//style History Detail
lv_style_init(&m_styleHistoryDetail);
lv_style_set_radius(&m_styleHistoryDetail, 5);
lv_style_set_border_width(&m_styleHistoryDetail, 3);
lv_style_set_border_color(&m_styleHistoryDetail, lv_palette_darken(LV_PALETTE_GREY, 1));
lv_style_set_border_side(&m_styleHistoryDetail, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_LEFT | LV_BORDER_SIDE_RIGHT);
//style Scrollbar
lv_style_init(&m_styleScrollBar);
lv_style_set_width(&m_styleScrollBar, 4);
lv_style_set_pad_right(&m_styleScrollBar, 15);
lv_style_set_pad_top(&m_styleScrollBar, 5);
lv_style_set_pad_bottom(&m_styleScrollBar, 5);
lv_style_set_radius(&m_styleScrollBar, 2);
lv_style_set_bg_opa(&m_styleScrollBar, LV_OPA_70);
lv_style_set_border_color(&m_styleScrollBar, lv_palette_darken(LV_PALETTE_GREY, 3));
lv_style_set_border_width(&m_styleScrollBar, 2);
lv_style_set_shadow_color(&m_styleScrollBar, lv_palette_darken(LV_PALETTE_GREY, 3));
lv_style_set_shadow_width(&m_styleScrollBar, 8);
lv_style_set_shadow_spread(&m_styleScrollBar, 2);
initStateStyles();
initButtonStyles();
initTheme();
}
//Here is the Constructor of the Calendar:
void Calendar::setUpUi()
{
for(int i = BASE_YEAR; i <= 2050; i++)
{
m_listYear += std::to_string(i) + "\n";
}
m_listYear.pop_back(); // remove the last \n
for(int i = 1; i <= 12; i++)
{
m_listMonth += std::to_string(i) + "\n";
}
m_listMonth.pop_back(); // remove the last \n
const std::lock_guard<std::recursive_mutex> lock(m_container->Frontend.LV_Mutex);
lv_obj_set_size(m_widget, 450, 390);
// Calender
m_calender = lv_calendar_create(m_widget);
lv_obj_set_size(m_calender, 450, 350);
lv_obj_align(m_calender, LV_ALIGN_BOTTOM_MID, 0, 0);
lv_obj_add_event_cb(m_calender, jmpDayChanged, LV_EVENT_VALUE_CHANGED, this);
// Year
m_dropDownYear = lv_dropdown_create(m_widget);
lv_obj_set_size(m_dropDownYear, 150, 50);
lv_obj_align(m_dropDownYear, LV_ALIGN_TOP_LEFT, 40, 0);
lv_dropdown_set_options(m_dropDownYear, m_listYear.c_str());
lv_obj_add_event_cb(m_dropDownYear, jmpYearChanged, LV_EVENT_VALUE_CHANGED, this);
lv_obj_add_event_cb(m_dropDownYear, jmpEventReady, LV_EVENT_READY, this);
lv_dropdown_set_symbol(m_dropDownYear, ImgHelper::getDropDown());
lv_obj_set_style_transform_angle(m_dropDownYear, 1800, LV_PART_INDICATOR | LV_STATE_CHECKED);
m_dropDownListYear = lv_obj_get_child(lv_dropdown_get_list(m_dropDownYear), 0);
lv_obj_set_style_text_font(m_dropDownYear, FontHelper::getSegoeui34(), LV_PART_MAIN);
lv_obj_add_style(m_dropDownYear, m_container->Frontend.Style->getStyleDropDownHeader(), LV_PART_MAIN);
lv_obj_set_local_style_prop(m_dropDownYear, LV_STYLE_PAD_LEFT, {20}, LV_PART_MAIN);
lv_obj_set_local_style_prop(m_dropDownYear, LV_STYLE_PAD_TOP, {3}, LV_PART_MAIN);
lv_obj_set_local_style_prop(lv_dropdown_get_list(m_dropDownYear), LV_STYLE_PAD_LEFT, {20}, LV_PART_MAIN);
// Month
m_dropDownMonth = lv_dropdown_create(m_widget);
lv_obj_set_size(m_dropDownMonth, 150, 50);
lv_obj_align(m_dropDownMonth, LV_ALIGN_TOP_RIGHT, -40, 0);
lv_dropdown_set_options(m_dropDownMonth, m_listMonth.c_str());
lv_obj_add_event_cb(m_dropDownMonth, jmpMonthChanged, LV_EVENT_VALUE_CHANGED, this);
lv_obj_add_event_cb(m_dropDownMonth, jmpEventReady, LV_EVENT_READY, this);
lv_dropdown_set_symbol(m_dropDownMonth, ImgHelper::getDropDown());
lv_obj_set_style_transform_angle(m_dropDownMonth, 1800, LV_PART_INDICATOR | LV_STATE_CHECKED);
m_dropDownListMonth = lv_obj_get_child(lv_dropdown_get_list(m_dropDownMonth), 0);
lv_obj_set_style_text_font(m_dropDownMonth, FontHelper::getSegoeui34(), LV_PART_MAIN);
lv_obj_add_style(m_dropDownMonth, m_container->Frontend.Style->getStyleDropDownHeader(), LV_PART_MAIN);
lv_obj_set_local_style_prop(m_dropDownMonth, LV_STYLE_PAD_LEFT, {20}, LV_PART_MAIN);
lv_obj_set_local_style_prop(m_dropDownMonth, LV_STYLE_PAD_TOP, {3}, LV_PART_MAIN);
lv_obj_set_local_style_prop(lv_dropdown_get_list(m_dropDownMonth), LV_STYLE_PAD_LEFT, {20}, LV_PART_MAIN);
// Today
lv_calendar_set_today_date(m_calender, m_selectedDate.year, m_selectedDate.month, m_selectedDate.day);
lv_calendar_set_showed_date(m_calender, m_selectedDate.year, m_selectedDate.month);
lv_calendar_set_highlighted_dates(m_calender, &m_selectedDate, 1);
}
Screenshot and/or video
Sometimes the selected date has a different color. So far I had green, blue, red and white.
Expected Color:
The styles are stored in the hpp-file as a private “lv_style_t”. In rare Occasions the style is wrong (slected date has wrong color). Is it possible that I used the init wrong?
