Can't figure out how to get the right bar item

[abehterev]

Hi there.
I wrapped u8g2 and mui into my small project. Frankly speaking it's just a play with creating a menu and esp32c3 mini board using PlatformIO. I got the mui blink code from here and I had to change some dimensions in order to fix a top horizontal line crossing the menu caption. So the config code is almost the same. I can't understand whether is a bug or my hands the bars had the correct framing around but wrong main progress instead, take a look at my video

mui.mp4

, could you please help me with this?

fds_t fds_data[] = 

        MUI_FORM(1)
        MUI_STYLE(1)
        MUI_LABEL(5, 1, "MUI Blink")
        MUI_STYLE(0)
        MUI_XY("HR", 0,11)
        MUI_DATA("GP", 
            MUI_10 "Numeric (MSE)|"
            MUI_12 "Progress Bar (MSE)|"
            MUI_14 "Progress Pie (MSE)|"
            MUI_20 "Numeric (MUD)|"
            MUI_22 "Progress Bar (MUD)|"
            MUI_24 "Progress Pie (MUD)")
        MUI_XYA("GC", 5, 17, 0) 
        MUI_XYA("GC", 5, 29, 1) 
        MUI_XYA("GC", 5, 41, 2) 
        MUI_XYA("GC", 5, 53, 3) 

        MUI_FORM(10)
        MUI_STYLE(1)
        MUI_LABEL(5, 1, "Numeric (MSE)")
        MUI_STYLE(0)
        MUI_XY("HR", 0,11)
        MUI_LABEL(5,17, "Light:")
        MUI_LABEL(5,29, "Time:")
        MUI_LABEL(5,41, "Duty:")
        MUI_XY("NB", 50, 17)
        MUI_XY("NT", 50, 29)
        MUI_XY("ND", 50, 41)
        MUI_XYAT("GO", 20, 53, 1, " Exit ") 

        MUI_FORM(12)
        MUI_STYLE(1)
        MUI_LABEL(5, 1, "Bar Graph (MSE)")
        MUI_STYLE(0)
        MUI_XY("HR", 0,11)
        MUI_LABEL(5,17, "Light:")
        MUI_LABEL(5,29, "Time:")
        MUI_LABEL(5,41, "Duty:")
        MUI_XY("BB", 50, 17)
        MUI_XY("BT", 50, 29)
        MUI_XY("BD", 50, 41)
        MUI_XYAT("GO", 60, 50, 1, " Exit ") 

        MUI_FORM(14)
        MUI_STYLE(1)
        MUI_LABEL(5, 1, "Pie Graph (MSE)")
        MUI_STYLE(0)
        MUI_XY("HR", 0,11)
        MUI_LABEL(5,17, "Light")
        MUI_LABEL(37,17, "Time")
        MUI_LABEL(69,17, "Duty")
        MUI_STYLE(9)
        MUI_XYAT("PB", 6, 49, 17, "0|2|4|6|8")
        MUI_XYAT("PT", 38, 49, 17, "0|2|4|6|8")
        MUI_XYAT("PD", 70, 49, 17, "0|2|4|6|8")
        MUI_STYLE(0)
        MUI_XYAT("GO", 20, 53, 1, " Exit ") 

        MUI_FORM(20)
        MUI_STYLE(1)
        MUI_LABEL(5, 8, "Numeric (MUD)")
        MUI_STYLE(0)
        MUI_XY("HR", 0,11)
        MUI_LABEL(5,23, "Light:")
        MUI_LABEL(5,35, "Time:")
        MUI_LABEL(5,47, "Duty:")
        MUI_XY("nB", 50, 23)
        MUI_XY("nT", 50, 35)
        MUI_XY("nD", 50, 47)
        MUI_XYAT("GO", 20, 60, 1, " Exit ") 

        MUI_FORM(22)
        MUI_STYLE(1)
        MUI_LABEL(5, 8, "Bar Graph (MUD)")
        MUI_STYLE(0)
        MUI_XY("HR", 0,11)
        MUI_LABEL(5,23, "Light:")
        MUI_LABEL(5,35, "Time:")
        MUI_LABEL(5,47, "Duty:")
        MUI_XY("bB", 50, 23)
        MUI_XY("bT", 50, 35)
        MUI_XY("bD", 50, 47)
        MUI_XYAT("GO", 20, 60, 1, " Exit ") 

        MUI_FORM(24)
        MUI_STYLE(1)
        MUI_LABEL(5, 8, "Pie Graph (MUD)")
        MUI_STYLE(0)
        MUI_XY("HR", 0,11)
        MUI_LABEL(5,21, "Light")
        MUI_LABEL(37,21, "Time")
        MUI_LABEL(69,21, "Duty")
        MUI_STYLE(9)
        MUI_XYAT("pB", 6, 49, 21, "0|2|4|6|8")
        MUI_XYAT("pT", 38, 49, 21, "0|2|4|6|8")
        MUI_XYAT("pD", 70, 49, 21, "0|2|4|6|8")
        MUI_STYLE(0)
        MUI_XYAT("GO", 20, 60, 1, " Exit ") 
        ;

 muif_t muif_list[] = {
        MUIF_U8G2_FONT_STYLE(0, u8g2_font_helvR08_tr),
        MUIF_U8G2_FONT_STYLE(1, u8g2_font_helvB08_tr),
        // MUIF_U8G2_FONT_STYLE(9, u8g2_font_streamline_interface_essential_loading_t),
        MUIF_U8G2_FONT_STYLE(9, u8g2_font_percent_circle_25_hn),

        MUIF_RO("HR", mui_hrule),
        MUIF_U8G2_LABEL(),
        MUIF_RO("GP", mui_u8g2_goto_data),
        MUIF_BUTTON("GC", mui_u8g2_goto_form_w1_pi),

        MUIF_U8G2_U8_MIN_MAX("NB", &blink_light, 0, 4, mui_u8g2_u8_min_max_wm_mse_pi),
        MUIF_U8G2_U8_MIN_MAX("NT", &blink_time, 0, 4, mui_u8g2_u8_min_max_wm_mse_pi),
        MUIF_U8G2_U8_MIN_MAX("ND", &blink_duty, 0, 4, mui_u8g2_u8_min_max_wm_mse_pi),

        MUIF_U8G2_U8_MIN_MAX_STEP("BB", &blink_light, 0, 4, 1, MUI_MMS_4X_BAR, mui_u8g2_u8_bar_wm_mse_pf),
        MUIF_U8G2_U8_MIN_MAX_STEP("BT", &blink_time, 0, 4, 1, MUI_MMS_4X_BAR, mui_u8g2_u8_bar_wm_mse_pf),
        MUIF_U8G2_U8_MIN_MAX_STEP("BD", &blink_duty, 0, 4, 1, MUI_MMS_4X_BAR, mui_u8g2_u8_bar_wm_mse_pf),

        MUIF_VARIABLE("PB", &blink_light, mui_u8g2_u8_opt_line_wa_mse_pi),
        MUIF_VARIABLE("PT", &blink_time, mui_u8g2_u8_opt_line_wa_mse_pi),
        MUIF_VARIABLE("PD", &blink_duty, mui_u8g2_u8_opt_line_wa_mse_pi),

        MUIF_U8G2_U8_MIN_MAX("nB", &blink_light, 0, 4, mui_u8g2_u8_min_max_wm_mud_pi),
        MUIF_U8G2_U8_MIN_MAX("nT", &blink_time, 0, 4, mui_u8g2_u8_min_max_wm_mud_pi),
        MUIF_U8G2_U8_MIN_MAX("nD", &blink_duty, 0, 4, mui_u8g2_u8_min_max_wm_mud_pi),

        MUIF_U8G2_U8_MIN_MAX_STEP("bB", &blink_light, 0, 4, 1, MUI_MMS_4X_BAR, mui_u8g2_u8_bar_wm_mud_pf),
        MUIF_U8G2_U8_MIN_MAX_STEP("bT", &blink_time, 0, 4, 1, MUI_MMS_4X_BAR, mui_u8g2_u8_bar_wm_mud_pf),
        MUIF_U8G2_U8_MIN_MAX_STEP("bD", &blink_duty, 0, 4, 1, MUI_MMS_4X_BAR, mui_u8g2_u8_bar_wm_mud_pf),

        MUIF_VARIABLE("pB", &blink_light, mui_u8g2_u8_opt_line_wa_mud_pi),
        MUIF_VARIABLE("pT", &blink_time, mui_u8g2_u8_opt_line_wa_mud_pi),
        MUIF_VARIABLE("pD", &blink_duty, mui_u8g2_u8_opt_line_wa_mud_pi),

        /* a button for the menu... */
        MUIF_BUTTON("GO", mui_u8g2_btn_goto_wm_fi)

    };

[olikraus]

Strange, can you paste the complete code so that I can compile the example?

[olikraus]

The problem is the font alignment: https://github.com/abehterev/esp32c3_playground/blob/f0cca1b7ec925355f8cd8ff46af291c9d51c48da/lib/display/src/mui.cpp#L182

MUI is optimized and tested only with baseline (setFontPosBaseline) as a font reference position. You need to remove u8g2.setFontPosTop(); (of course you also need to adjust y position of all the elements).

[olikraus]

I will update the documentation...

[abehterev]

Hi. Thank you for your investigation. I fixed the code following your suggestion and recompiled it. Unfortunately it didn't help. It became better, but still the frames out of their range, while the button is ok. Code in the repo is updated too. Sorry for the late answer I had to check it twice.

video_2024-12-23_21-37-01.mp4

[olikraus]

Like I said, calling setFontTopPos will not work. You need to locate, find and remove all calls to that function... https://github.com/abehterev/esp32c3_playground/blob/69a0efbbcc36f10636713670a800c6953419498b/lib/display/src/demo.cpp#L8

[abehterev]

That was my fault - I forgot to remove it from the display init. Sorry again for bothering you. :-(
Everything is work ok for now. Many thanks!