Port to larger variants

[abrugsch]

Great project! There are several larger variants of the CYD - such as the 7" 800x480 (ESP32-8048S070C) and a 4.3" 480x272 (ESP32-4827S043) and 3.5" 480x320 (ESP32-3248S035) Do you think it would be a big deal to port to these other sizes/screen types?

[suchmememanyskill]

I don't have those other screens and it would be a decently sized effort, yes. Currently don't have any plans to do so

[abrugsch]

It looks like @dronecz is already on the 7" port: https://github.com/dronecz/CYD-Klipper

[suchmememanyskill]

Ideally the project structure is changed to support different screen sizes in a more dynamic way than ifdef-ing everything, hm.

For anyone developing such forks, i don't want to accept pr's without some discussion about the above

[dronecz]

@abrugsch I changed some code and I can compile it, but it does not work yet. It is stuck in Reset loop.

@suchmememanyskill I´m confused by your answers. You are writing that you do not have plans to support different screen sizes and will not accept PR´s without changing how the code is structured. Who should make changes to the structure? I´m not a SW developer and I made changes in my fork to see if I could make the display work with the minimum of changes, but I agree that for this task there should be more changes than ifdef´s for every possible display.

I tried to study your code and figure out how it works, but I have had not much time to do so. Do you have a block diagram of your code so I can more easily see how it works?

Did you consider using Squareline Studio to make UI instead of hard-coded elements?

Anyway, thank you for your project and your work!

[suchmememanyskill]

@abrugsch I changed some code and I can compile it, but it does not work yet. It is stuck in Reset loop.

Are you using the platformio plugin that shows a stack trace? If so, what's the stack trace?

@suchmememanyskill I´m confused by your answers. You are writing that you do not have plans to support different screen sizes and will not accept PR´s without changing how the code is structured. Who should make changes to the structure? I´m not a SW developer and I made changes in my fork to see if I could make the display work with the minimum of changes, but I agree that for this task there should be more changes than ifdef´s for every possible display.

I've had before that someone implements an entire feature without running it by me first. I don't want people to waste their time, i'm open to merging stuff like this if we first think out a sane plan of supporting different models first.

My suggestion: rewrite all code to calculate position and size based on screen width and height, so the ui 'scales' based on screen size.

Besides this, creating separate driver files per screen, and ifdef-ing between those in a header file

One fun thing will be distribution but you can create multiple builds/buttons on the website, i've already experimented with this

I tried to study your code and figure out how it works, but I have had not much time to do so. Do you have a block diagram of your code so I can more easily see how it works?

I don't. I can answer questions though, please contact me through discord (suchmememanyskill)

Did you consider using Squareline Studio to make UI instead of hard-coded elements?

I prefer to not use such tools to get more control over how everything works, rather than ui becoming a sort of black box

Anyway, thank you for your project and your work!

Thank you! @dronecz

[radry]

My suggestion: rewrite all code to calculate position and size based on screen width and height, so the ui 'scales' based on screen size.

All that needs to be done is to use global variables for all sizes and positions that are automatically calculated based on resolution and aspect ratio or screen size. Then replace the hardcoded sizes/positions with those global variables. The bigger problem is that the screens mentioned in the first post all have different aspect ratios. So to make sure the UI works well on every one of them needs some additional checks in the code. Luckily the UI in this project is very simple. I worked on the BTT LCD Firmware and implemented a vertical mode there. It was quite challenging but that UI is much more complicated.

I think as preparation for future support of other LCD sizes it would be good to change all hardcoded sizes to variables. In turn for every different LCD we can then create a separate file that calculate the necessary values. The first one will be the currently supported LCD. Based of that, creating new files for other LCDs will be much easier for everyone, because we just need to figure out a good way to calculate the sizes based of resolution and aspect ratio. @suchmememanyskill You are most familiar with the code. To prevent mistakes it would be good if you could do that initial change from hardcoded value to variable based sizes.

[suchmememanyskill]

@radry i'll look into it, yea. Only issue is that i don't have different screen sizes to check if my code works as expected. Is there a way i can emulate a screen with a different size on pc?

The first few screens i've made all use hardcoded values, but the more familiar i got the more i started using a #define i defined called SCREEN_WIDTH and SCREEN_HEIGHT. So some screens should already work as expected

[radry]

@suchmememanyskill

For the first step you just need to make sure it works on the current 2.8" LCD, when the elements use variables based of screen size.

I don't know how to emulate a different screen. I'd just use old school pen and paper to figure it out and then someone who owns a screen has to test it. I'm not a professional developer.

but the more familiar i got the more i started using a #define i defined called SCREEN_WIDTH and SCREEN_HEIGHT. So some screens should already work as expected

I'm not familiar with your code but a quick look showed that it still uses hardcoded values for button sizes for example. This might work fine for similar screen sizes but on a 7" screen it might look bad.

[suchmememanyskill]

@radry yeah i defo need a scale factor too to scale all gaps/sizes/fonts

For now i guess i can test the changes by just implementing a vertical orientation

[radry]

I think vertical mode is more complicated than landscape with different size. As I said I've done it myself for a different LCD UI. It creates a lot of new problems when suddenly the ui doesn't fit anymore and you have to rearrange elements. It's essentially rewriting the whole UI. When you keep landscape mode you just need to scale things correctly, not necessarily rearrange them.

Just be aware of this. Vertical mode is sure a good thing to have.

[suchmememanyskill]

No i agree some menus will not work vertical. I will likely also never release this. But it does show me if the ui tries to scale properly

[dronecz]

Are you using the platformio plugin that shows a stack trace? If so, what's the stack trace?<

Yes, I´m using PIO, but the restart of the display is so quick that IO has no time to connect the serial line. I managed to get 2 logs from Arduino:

[  1357][V][WiFiGeneric.cpp:362] _arduino_event_cb(): STA Disconnected: SSID: PICHNET, BSSID: ac:22:05:b5:2a:af, Reason: 2
[  1358][D][WiFiGeneric.cpp:1035] _eventCallback(): Arduino Event: 5 - STA_DISCONNECTED
[  1365][W][WiFiGeneric.cpp:1057] _eventCallback(): Reason: 2 - AUTH_EXPIRE
[  1371][D][WiFiGeneric.cpp:1077] _eventCallback(): WiFi Reconnect Running
[  1392][V][WiFiGeneric.cpp:97] set_esp_interface_ip(): Configuring Station static IP: 0.0.0.0, MASK: 0.0.0.0, GW: 0.0.0.0
WiFi Status: Disconnected
WiFi Status: Disconnected
[  3354][V][WiFiGeneric.cpp:362] _arduino_event_cb(): STA Disconnected: SSID: PICHNET, BSSID: ac:22:05:b5:2a:af, Reason: 2
[  3355][D][WiFiGeneric.cpp:1035] _eventCallback(): Arduino Event: 5 - STA_DISCONNECTED
[  3362][W][WiFiGeneric.cpp:1057] _eventCallback(): Reason: 2 - AUTH_EXPIRE
[  3369][D][WiFiGeneric.cpp:1081] _eventCallback(): WiFi AutoReconnect Running
WiFi Status: Disconnected
[  3440][V][WiFiGeneric.cpp:97] set_esp_interface_ip(): Configuring Station static IP: 0.0.0.0, MASK: 0.0.0.0, GW: 0.0.0.

ESP-ROM:esp32s3-20210327
Build:Mar 27 2021
rst:0x1 (POWERON),boot:0x8 (SPI_FAST_FLASH_BOOT)
SPIWP:0xee
mode:DIO, clock div:1
load:0x3fce3808,len:0x44c
load:0x403c9700,len:0xbe4
load:0x403cc700,len:0x2a68
entry 0x403c98d4
[   219][I][esp32-hal-psram.c:96] psramInit(): PSRAM enabled
Hello World
[   229][E][Preferences.cpp:503] getBytesLength(): nvs_get_blob len fail: global_config NOT_FOUND
Config version: 0
Clearing Global Config
[   241][E][Preferences.cpp:503] getBytesLength(): nvs_get_blob len fail: global_config NOT_FOUND
Screen init done
[   292][D][WiFiGeneric.cpp:1035] _eventCallback(): Arduino Event: 0 - WIFI_READY
[   325][V][WiFiGeneric.cpp:340] _arduino_event_cb(): STA Started
[   326][D][WiFiGeneric.cpp:1035] _eventCallback(): Arduino Event: 2 - STA_START
[  8318][V][WiFiGeneric.cpp:383] _arduino_event_cb(): SCAN Done: ID: 128, Status: 0, Results: 11
[  8318][D][WiFiGeneric.cpp:1035] _eventCallback(): Arduino Event: 1 - SCAN_DONE
WiFi Status: Disconnected
WiFi Status: Disconnected
WiFi Status: Disconnected
WiFi Status: Disconnected
PICHNET
WiFi Status: Disconnected
WiFi Status: Disconnected
...
...
WiFi Status: Disconnected
WiFi Status: Disconnected

[ 69665][V][WiFiGeneric.cpp:97] set_esp_interface_ip(): Configuring Station static IP: 0.0.0.0, MASK: 0.0.0.0, GW: 0.0.0.0

In the meantime, I was testing my changes and made it sort of work. I think that restarting is because of the WiFi stack. The device will restart 5-6 times before it will show a list of networks and after that again some restarts when I need to get to the screen where I have to set up the IP address of the Klipper machine. After a lot of patience, I was able to start the device to a fully working state and I took some photos.

To your more recent conversation @radry & @suchmememanyskill .

I think for multiple sizes of displays, it would be best to use Flex layout which can resize elements based on some values. I know that @suchmememanyskill does not want to use it but Squareline Studio would be perfect for this type of prototyping. Here is a quick demo, of how you can test different screen resolutions.

[suchmememanyskill]

Do you know how this is implemented? Or does squareline studio calculate the flex values ahead of time?

[OperatorB]

3.5" CYD port https://github.com/OperatorB/CYD-Klipper-3.5-display I am currently testing the device and fork. I was experiencing white screen>reboot>freeze event so far. Investigating... Do you have any sort of freeze or crash on 2.8" device?

[suchmememanyskill]

@OperatorB what do you mean with freeze?

I don't have any issues currently with my own displays. Note if core 0 (background core) stays locked for more than 10 seconds it restarts the device.

[radry]

@dronecz I have never used LVGL before. If flexbox can achieve relativ scaling and positioning (like percentage scaling in CSS), that would solve many of these problems.

[dronecz]

Do you know how this is implemented? Or does squareline studio calculate the flex values ahead of time?

I don´t fully understand your question, but here is an exported screen from the example so I hope it will answer some part of your question.

// This file was generated by SquareLine Studio
// SquareLine Studio version: SquareLine Studio 1.3.4
// LVGL version: 8.3.6
// Project name: CYD_Klipper

#include "../ui.h"

void ui_Screen1_screen_init(void)
{
    ui_Screen1 = lv_obj_create(NULL);
    lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_flex_flow(ui_Screen1, LV_FLEX_FLOW_ROW_WRAP);
    lv_obj_set_flex_align(ui_Screen1, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
    lv_obj_set_style_bg_color(ui_Screen1, lv_color_hex(0x3D3D3D), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Screen1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Container1 = lv_obj_create(ui_Screen1);
    lv_obj_remove_style_all(ui_Container1);
    lv_obj_set_height(ui_Container1, 218);
    lv_obj_set_flex_grow(ui_Container1, 1);
    lv_obj_set_x(ui_Container1, 0);
    lv_obj_set_y(ui_Container1, -40);
    lv_obj_set_align(ui_Container1, LV_ALIGN_CENTER);
    lv_obj_set_flex_flow(ui_Container1, LV_FLEX_FLOW_ROW_WRAP);
    lv_obj_set_flex_align(ui_Container1, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_SPACE_EVENLY);
    lv_obj_clear_flag(ui_Container1, LV_OBJ_FLAG_SCROLLABLE);      /// Flags

    ui_Button1 = lv_btn_create(ui_Container1);
    lv_obj_set_width(ui_Button1, 100);
    lv_obj_set_height(ui_Button1, 50);
    lv_obj_set_align(ui_Button1, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_Button1, LV_OBJ_FLAG_SCROLL_ON_FOCUS);     /// Flags
    lv_obj_clear_flag(ui_Button1, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_style_bg_color(ui_Button1, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Button1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_Button1, lv_color_hex(0xEDEDED), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_Button1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_Button1, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(ui_Button1, LV_BORDER_SIDE_FULL, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(ui_Button1, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_spread(ui_Button1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_x(ui_Button1, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_y(ui_Button1, 2, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Label1 = lv_label_create(ui_Button1);
    lv_obj_set_width(ui_Label1, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_Label1, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_Label1, LV_ALIGN_CENTER);
    lv_label_set_text(ui_Label1, "Print");

    ui_Button2 = lv_btn_create(ui_Container1);
    lv_obj_set_width(ui_Button2, 100);
    lv_obj_set_height(ui_Button2, 50);
    lv_obj_set_align(ui_Button2, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_Button2, LV_OBJ_FLAG_SCROLL_ON_FOCUS);     /// Flags
    lv_obj_clear_flag(ui_Button2, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_style_bg_color(ui_Button2, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Button2, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_Button2, lv_color_hex(0xEDEDED), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_Button2, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_Button2, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(ui_Button2, LV_BORDER_SIDE_FULL, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(ui_Button2, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_spread(ui_Button2, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_x(ui_Button2, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_y(ui_Button2, 2, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Label2 = lv_label_create(ui_Button2);
    lv_obj_set_width(ui_Label2, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_Label2, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_Label2, LV_ALIGN_CENTER);
    lv_label_set_text(ui_Label2, "Preheat");

    ui_Button3 = lv_btn_create(ui_Container1);
    lv_obj_set_width(ui_Button3, 100);
    lv_obj_set_height(ui_Button3, 50);
    lv_obj_set_align(ui_Button3, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_Button3, LV_OBJ_FLAG_SCROLL_ON_FOCUS);     /// Flags
    lv_obj_clear_flag(ui_Button3, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_style_bg_color(ui_Button3, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Button3, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_Button3, lv_color_hex(0xEDEDED), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_Button3, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_Button3, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(ui_Button3, LV_BORDER_SIDE_FULL, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(ui_Button3, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_spread(ui_Button3, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_x(ui_Button3, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_y(ui_Button3, 2, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Label3 = lv_label_create(ui_Button3);
    lv_obj_set_width(ui_Label3, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_Label3, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_Label3, LV_ALIGN_CENTER);
    lv_label_set_text(ui_Label3, "Filament");

    ui_Button4 = lv_btn_create(ui_Container1);
    lv_obj_set_width(ui_Button4, 100);
    lv_obj_set_height(ui_Button4, 50);
    lv_obj_set_align(ui_Button4, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_Button4, LV_OBJ_FLAG_SCROLL_ON_FOCUS);     /// Flags
    lv_obj_clear_flag(ui_Button4, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_style_bg_color(ui_Button4, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Button4, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_Button4, lv_color_hex(0xEDEDED), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_Button4, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_Button4, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(ui_Button4, LV_BORDER_SIDE_FULL, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(ui_Button4, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_spread(ui_Button4, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_x(ui_Button4, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_y(ui_Button4, 2, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Label4 = lv_label_create(ui_Button4);
    lv_obj_set_width(ui_Label4, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_Label4, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_Label4, LV_ALIGN_CENTER);
    lv_label_set_text(ui_Label4, "Calibration");

    ui_Button5 = lv_btn_create(ui_Container1);
    lv_obj_set_width(ui_Button5, 100);
    lv_obj_set_height(ui_Button5, 50);
    lv_obj_set_align(ui_Button5, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_Button5, LV_OBJ_FLAG_SCROLL_ON_FOCUS);     /// Flags
    lv_obj_clear_flag(ui_Button5, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_style_bg_color(ui_Button5, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Button5, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_Button5, lv_color_hex(0xEDEDED), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_Button5, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_Button5, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(ui_Button5, LV_BORDER_SIDE_FULL, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(ui_Button5, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_spread(ui_Button5, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_x(ui_Button5, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_y(ui_Button5, 2, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Label5 = lv_label_create(ui_Button5);
    lv_obj_set_width(ui_Label5, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_Label5, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_Label5, LV_ALIGN_CENTER);
    lv_label_set_text(ui_Label5, "Settings");

    ui_Button6 = lv_btn_create(ui_Container1);
    lv_obj_set_width(ui_Button6, 100);
    lv_obj_set_height(ui_Button6, 50);
    lv_obj_set_align(ui_Button6, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_Button6, LV_OBJ_FLAG_SCROLL_ON_FOCUS);     /// Flags
    lv_obj_clear_flag(ui_Button6, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_style_bg_color(ui_Button6, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Button6, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_Button6, lv_color_hex(0xEDEDED), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_Button6, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_Button6, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(ui_Button6, LV_BORDER_SIDE_FULL, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(ui_Button6, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_spread(ui_Button6, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_x(ui_Button6, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_ofs_y(ui_Button6, 2, LV_PART_MAIN | LV_STATE_DEFAULT);

    ui_Label6 = lv_label_create(ui_Button6);
    lv_obj_set_width(ui_Label6, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_Label6, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_Label6, LV_ALIGN_CENTER);
    lv_label_set_text(ui_Label6, "Info");

}

[suchmememanyskill]

I have started making the ui more responsive on the following branch: https://github.com/suchmememanyskill/CYD-Klipper/tree/setup-ports. Want to ask from some feedback so far. I advice you to not start porting until i'm fully done making the codebase 'port'-able

The following lines are added to platformio.ini that needs to be changed for each port

    ### Porting options ###
    # Defines the screen height
    -DCYD_SCREEN_HEIGHT_PX=240
    # Defines the screen width
    -DCYD_SCREEN_WIDTH_PX=320
    # Defines the pixel gap used for large gaps (like between buttons)
    -DCYD_SCREEN_BIG_GAP_PX=8
    # Defines the pixel gap used for small gaps (like between text and buttons)
    -DCYD_SCREEN_SMALL_GAP_PX=4
    # Defines the minimum pixel height of a button
    -DCYD_SCREEN_MIN_BUTTON_HEIGHT_PX=35
    # Defines the minimum pixel width of a button
    -DCYD_SCREEN_MIN_BUTTON_WIDTH_PX=35
    # Defines the size of font used
    -DCYD_SCREEN_FONT=&lv_font_montserrat_14
    # Defines the size of font used for small text
    -DCYD_SCREEN_FONT_SMALL=&lv_font_montserrat_10
    # Defines the size of the sizebar
    -DCYD_SCREEN_SIDEBAR_SIZE_PX=40
    # Defines the screen driver
    -DCYD_SCREEN_DRIVER_ESP32_2432S028R=1

The screen driver is loaded based on an ifdef tree, so if needs be you can define your own driver for each port.

I've currently only implemented macros, settings and the sidebar to be (decently) responsive

[OperatorB]

Unresponsive, seemingly not doing any good. What do you mean locked? A http request timeout can crash your code?

Heap space post-file-parse: 120316 bytes
Got 22 files. Request took 157ms, parsing took 27ms
CPU Speed: 80 MHz
CPU Speed: 80 MHz
CPU Speed: 240 MHz
Failed to fetch printer data: -1
Heap space pre-file-parse: 128944 bytes
E (3620684) task_wdt: Task watchdog got triggered. The following tasks did not reset the watchdog in time:
E (3620684) task_wdt:  - IDLE (CPU 0)
E (3620684) task_wdt: Tasks currently running:
E (3620684) task_wdt: CPU 0: wifi
E (3620684) task_wdt: CPU 1: IDLE
E (3620684) task_wdt: Aborting.
abort() was called at PC 0x40108620 on core 0
Backtrace: 0x4008384d:0x3ffbedec |<-CORRUPTED
ELF file SHA256: 1b04d9675f7481c0
Rebooting...

[suchmememanyskill]

@OperatorB well, more so that i'm starving the esp from doing it's background tasks. But how is requesting files taking more than 10 seconds....

[suchmememanyskill]

Changes are going well so far. I can adjust the sidebar length and everything seems to update accordingly

[OperatorB]

@OperatorB well, more so that i'm starving the esp from doing it's background tasks. But how is requesting files taking more than 10 seconds....

Thank you, understood. After my investigation I found there is an issue with GT911 library that was causing issue. Workaround was made, good to go now. @suchmememanyskill

[suchmememanyskill]

2 screens to go until i'm done porting, the wifi setup and the ip setup

[suchmememanyskill]

@OperatorB @dronecz @radry i am done making the ui responsive. Probably some things i've missed but i can't tell on my own screen. Could you all do a test port to the setup-ports branch and tell me if the scaling system works well?

You'll need to make your own defines in platformio.ini, then if needed create a new screen driver

[OperatorB]

@suchmememanyskill Great job! I have built your new branch and here are my quick notes:

platform.ini:

• should not include display-hardware specific defines rather device.h should
• ; -DCYD_SCREEN_DRIVER_ESP32_2432S028R=1 -DCYD_SCREEN_DRIVER_ESP32_3248S035C=1 does not work as intended

general:

• multiple device.cpp can not exist since same fn are defined

3.5" specific:

• RGB led control related stuff should be optional (no need for 2.8")
• touch calibration related stuff should be optional (no need for 3.5")
• after increasing size related defines, some proportions does not look good:
  1. toggle btn
  2. horizontal separator width
  3. sidebar temperature could be with line break instead of "/"

[suchmememanyskill]

I have ordered a 3.5 inch screen so i can also test porting it myself (in roughly 2 weeks due to shipping)

[Creo2005]

I have ordered a 3.5 inch screen so i can also test porting it myself (in roughly 2 weeks due to shipping)

Please give a link to the one you ordered. Thank you.

[suchmememanyskill]

I have ordered a 3.5 inch screen so i can also test porting it myself (in roughly 2 weeks due to shipping)

Please give a link to the one you ordered. Thank you.

@Creo2005 i prefer to only send out such links once i have tested and validated mine; i don't want to send links to products that don't work.

Once i have it in hand, i'll send it

[suchmememanyskill]

@OperatorB could you elaborate on the following:

What do you mean by this?

; -DCYD_SCREEN_DRIVER_ESP32_2432S028R=1 -DCYD_SCREEN_DRIVER_ESP32_3248S035C=1 does not work as intended

This is screen driver specific right?

RGB led control related stuff should be optional (no need for 2.8") touch calibration related stuff should be optional (no need for 3.5")

---

I have some notes too:

should not include display-hardware specific defines rather device.h should

I cannot do this, the screen driver makes use of global defines for it's config :(

multiple device.cpp can not exist since same fn are defined

Should be fixed now. I just ifdef out the file if the define for it is not set. Not great but does work

after increasing size related defines, some proportions does not look good:

toggle btn horizontal separator width sidebar temperature could be with line break instead of "/"

I ajusted the button size. Your font looks bigger than intended on the left side so it not fitting the text properly is not suprising, and i won't be changing the layout of the temp for it. What's wrong with the horizontal seperator width?

[Phil1988]

Nice development here! I'm also an owner of a 3,5" ESP32-3248S035 CYD and appreciate your work in this :) (So I don't have to fork and make things worse :D. )

[OperatorB]

@suchmememanyskill yes, of course. Here are some further notes:

What do you mean by this?

; -DCYD_SCREEN_DRIVER_ESP32_2432S028R=1 -DCYD_SCREEN_DRIVER_ESP32_3248S035C=1 does not work as intended

It is closely related to the device.cpp topic which you have answered by implementing an ifdef. Now this should be ok.

---

This is screen driver specific right?

RGB led control related stuff should be optional (no need for 2.8") touch calibration related stuff should be optional (no need for 3.5")

Right, RGB LED is only present on 3.5" size CYD as far I know. Touch calibration is a must only for xpt2046 resistive touch driver but keep in mind there exist 3.5" CYD capacitive(GT911) variant and resistive(xpt2046) variant.

---

should not include display-hardware specific defines rather device.h should

I cannot do this, the screen driver makes use of global defines for it's config :(

Makes sense at some level, understood. I have no alternative solution at this point.

---

multiple device.cpp can not exist since same fn are defined

Should be fixed now. I just ifdef out the file if the define for it is not set. Not great but does work

Should work, thanks, good enough.

---

I ajusted the button size. Your font looks bigger than intended on the left side so it not fitting the text properly is not suprising, and i won't be changing the layout of the temp for it. What's wrong with the horizontal seperator width?

I have played some time with font size, perhaps it is my liking (or my eye sight). Separator line width is again something that maybe looks weird for me prefer going more side-to-side.

[suchmememanyskill]

@OperatorB do you mind if i merge your driver into the codebase (once i got my own 3.5 inch screen) so i can develop multi device releases?

[suchmememanyskill]

Actually, it may be an idea to use https://github.com/rzeldent/esp32-smartdisplay instead of building my own drivers

[dronecz]

Actually, it may be an idea to use https://github.com/rzeldent/esp32-smartdisplay instead of building my own drivers

I did use it in my fork before, but had not yet time to try your branch for ports with it..

[suchmememanyskill]

Currently messing around with it, my display just displays white 😓

[suchmememanyskill]

I got it working on my 3.5 inch display, but rendering is really really slow. Hm

[suchmememanyskill]

Ported @OperatorB 's fork to the codebase as a new enviroment. I can now finally see the result of my ui rewrite efforts 🎉

Pushed a commit with the smartdisplay and fork changes

[suchmememanyskill]

[dronecz]

Currently messing around with it, my display just displays white 😓

I have had the same issue for the last 2 hours and I searched through issues for the esp32-smartdisplay library and found some, where it was recommended to switch to the develop branch so I did that and I can now see an example from esp32-smartdisplay-demo repo on my 2.8" display. I did use default_envs = esp32-2432S028Rv3 in platformio.ini file.

[suchmememanyskill]

@dronecz i've played around a bit with it on my 3.5 inch display and for maybe quick ports it's fine, but i really disagree with how it's implemented. At least there's support for it somewhat now as of the latest commit (see the commented out junk in platformio.ini)

[OperatorB]

I have played some time with drivers as well on idf framework and found LovyanGFX works quite decent. I can recommend it. It works with arduino framework as well, performance is good. It was planned for LVGL v9 that display drivers will be integrated to the lvgl library so it worth to keep an eye on that one as well. I did not follow up on it unfortunately.

[suchmememanyskill]

@dronecz would you mind testing out the smartdisplay driver in CYD-Klipper's setup-ports branch currently with your bigger screen? See the commented out config in platformio.ini for an example.