Template file for using CYD with Squareline Studio/VSC/Platformio

[peteDDD]

I have worked out some of the finer points of developing projects for the CYD using Squareline Studio for UI development with Visual Studio Code/Platformio. I am happy to share my this template which includes an interactive UI demo that also use the RGB LED. One can then simply remove the files from the UI folder and export new files from Squareline Studio. There are also notes and some .h files you can copy to build your own template (if for some reason you would want to). The Squareline Studio project file is also included.

Feel free to add this to the git hub for ESP32-Cheap-Yellow-Display

This is NOT intended to be a tutorial on Squareline Studio. For that I can suggest the following:
1: the tutorial series by Squareline Studio starting here basics 1
followed by
2: this tutorial which shows how to tie the UI to real world interfaces (like what I did with the RGB LED) https://www.youtube.com/watch?v=PTKjjDPNIdM

Here is the template: UPDATED 23 September 2024
CYD_Squareline_Studio_VSC_Platformio_demo_Template.zip

[thebrando]

Thanks for this, I was struggling getting my first app running on my cyd. This made it very easy for me to get it going.

[peteDDD]

@thebrando glad to help. pay it forward when you can.

[flixmyswitch]

July 2024 I am having complie issue with this can someone confirm its still good.

[peteDDD]

It would be most helpful if you provided more details such as the error messages you are getting, but please nonetheless, try this...

In platformio.ini change
platform = espressif32
to
platform = [email protected]

This will "lock-in" the version of the platform. I have found lots of issues lately resulting from changes in the platform because the syntax of many commands have changed as a result of recent updates.

I just compiled the code with this change without issue.

[flixmyswitch]

Thanks i know its user error. I unzip the code into a folder. Open that folder in VSC and compile it. I change what you said above.

I have reread the TXT file instruction and cant see what I am doing wrong

Compiling .pio\build\cyd\src\src\ui\ui.c.o
In file included from .pio/libdeps/cyd/lvgl/src/misc/lv_log.h:16,
from .pio/libdeps/cyd/lvgl/lvgl.h:25,
from src/ui/components/../ui.h:15,
from src/ui/components/ui_comp_hook.c:6:
.pio/libdeps/cyd/lvgl/src/misc/../lv_conf_internal.h:41:18: fatal error: ../../lv_conf.h: No such file or directory
#include "../../lv_conf.h" /Else assume lv_conf.h is next to the lvgl folder/
^~~~~~~~~~~~~~~~~
compilation terminated.
In file included from .pio/libdeps/cyd/lvgl/src/misc/lv_log.h:16,
from .pio/libdeps/cyd/lvgl/lvgl.h:25,
from src/ui/components/../ui.h:15,
from src/ui/components/ui_comp.c:6:
.pio/libdeps/cyd/lvgl/src/misc/../lv_conf_internal.h:41:18: fatal error: ../../lv_conf.h: No such file or directory
#include "../../lv_conf.h" /Else assume lv_conf.h is next to the lvgl folder/
^~~~~~~~~~~~~~~~~
compilation terminated.
*** [.pio\build\cyd\src\src\ui\components\ui_comp_hook.c.o] Error 1
*** [.pio\build\cyd\src\src\ui\components\ui_comp.c.o] Error 1
In file included from .pio/libdeps/cyd/lvgl/src/misc/lv_log.h:16,
from .pio/libdeps/cyd/lvgl/lvgl.h:25,
from src/ui/components/../ui.h:15,
from src/ui/components/ui_comp_screen1.c:6:
.pio/libdeps/cyd/lvgl/src/misc/../lv_conf_internal.h:41:18: fatal error: ../../lv_conf.h: No such file or directory
#include "../../lv_conf.h" /Else assume lv_conf.h is next to the lvgl folder/
^~~~~~~~~~~~~~~~~
compilation terminated.
In file included from .pio/libdeps/cyd/lvgl/src/misc/lv_log.h:16,
from .pio/libdeps/cyd/lvgl/lvgl.h:25,
from src/ui/screens/../ui.h:15,
from src/ui/screens/ui_Screen1.c:6:
.pio/libdeps/cyd/lvgl/src/misc/../lv_conf_internal.h:41:18: fatal error: ../../lv_conf.h: No such file or directory
#include "../../lv_conf.h" /Else assume lv_conf.h is next to the lvgl folder/
^~~~~~~~~~~~~~~~~
compilation terminated.
In file included from .pio/libdeps/cyd/lvgl/src/misc/lv_log.h:16,
from .pio/libdeps/cyd/lvgl/lvgl.h:25,
from src/ui/components/../ui.h:15,
from src/ui/components/ui_comp_screen_1.c:6:
.pio/libdeps/cyd/lvgl/src/misc/../lv_conf_internal.h:41:18: fatal error: ../../lv_conf.h: No such file or directory
#include "../../lv_conf.h" /Else assume lv_conf.h is next to the lvgl folder/
^~~~~~~~~~~~~~~~~
compilation terminated.
*** [.pio\build\cyd\src\src\ui\components\ui_comp_screen1.c.o] Error 1
*** [.pio\build\cyd\src\src\ui\screens\ui_Screen1.c.o] Error 1
*** [.pio\build\cyd\src\src\ui\components\ui_comp_screen_1.c.o] Error 1
In file included from .pio/libdeps/cyd/lvgl/src/misc/lv_log.h:16,
from .pio/libdeps/cyd/lvgl/lvgl.h:25,
from src/ui/ui.h:15,
from src/ui/ui.c:6:
.pio/libdeps/cyd/lvgl/src/misc/../lv_conf_internal.h:41:18: fatal error: ../../lv_conf.h: No such file or directory
#include "../../lv_conf.h" /Else assume lv_conf.h is next to the lvgl folder/
^~~~~~~~~~~~~~~~~
compilation terminated.
*** [.pio\build\cyd\src\src\ui\ui.c.o] Error 1
In file included from .pio/libdeps/cyd/lvgl/src/misc/lv_log.h:16,
from .pio/libdeps/cyd/lvgl/lvgl.h:25,
from src/main.cpp:17:
.pio/libdeps/cyd/lvgl/src/misc/../lv_conf_internal.h:41:18: fatal error: ../../lv_conf.h: No such file or directory
#include "../../lv_conf.h" /Else assume lv_conf.h is next to the lvgl folder/
^~~~~~~~~~~~~~~~~
compilation terminated.
*** [.pio\build\cyd\src\src\main.cpp.o] Error 1

[peteDDD]

Please read and act on the file "Squareline Studio us projects instructions.txt in the NECESSARY TEMPATE FILES directory.

Note particularly the following:
Next you have to copy files to different locations. These files are in the directory "NECESARY TEMPLATE FILES"
copy lv_conf.h to .pio\libdeps\cyd\lv_conf.h
copy User_Setup.h to .pio\libdeps\cyd\TFT_eSPI
(these paths are noted in the comment at the top of each file)

[amirzohaib]

Thanks for the Template, i got it to work.
I rewrote the Readme (That text file should be at the Parent directory with large "README FIRST!!" written.
I made it a bit more beginner friendly

TEMPLATE FOR USING CHEAP YELLOW DISPLAY WITH SQUARELINE STUDIO AND PLATFORMIO ARDUINO FRAMEWORK

Extract:
Extract the zip to a folder where you wish to keep your new project.
(You may want to keep a folder just for the template and duplicate that for each new project).
In Visual Studio Code with Platformio, open the template folder with 'Open Project'.
When you first open the folder containing this template, platformio will ask to build the project,
click yes and it will download the necessary libraries and dependencies.
you might need to install a GIT downloader if download fails

Copy lv_conf.h and replace User_Setup.h:
These files have been modified to work with CYD,
These files are in the directory "NECESARY TEMPLATE FILES"
copy lv_conf.h to .pio\libdeps\cyd\lv_conf.h
copy and replace User_Setup.h to .pio\libdeps\cyd\TFT_eSPI
(these paths are noted in the comment at the top of each file)

Test the Template:
This template includes a simple project from Squareline Studio ("SLS")
The project has a blue button. When it is pressed, the ball will drop and bounce off the button.
It is already in the src/ui directory. You can build and upload this project to your CYD as a test if you like.
Click Platform IO - Project Tasks - cyd - General - Upload to build and upload the san
Check that all of the fonts you used in the SLS project are turned on. These start at line 366 of lv_conf.h
"1" indicates that you need the font, "0" indicates that you do not need the font.
For this example you will need #define LV_FONT_MONTSERRAT_16 1 in your lv_conf

CYD2USB Variant:
For Much better colors on the CYD2USB Variant, add all this to the void setup() in main.cpp

tft.setRotation(1); // Landscape orientation 1 = CYC usb on right, 2 for ver
tft.invertDisplay(1); // if your colors are inverted
tft.writecommand(ILI9341_GAMMASET); //Gamma curve selected
tft.writedata(2);
delay(120);
tft.writecommand(ILI9341_GAMMASET); //Gamma curve selected
tft.writedata(1);

Create and Upload your own SLS Project:
Make sure your project has the following Settings
Width:320
Height: 240
Depth: 16-bit
Board Group: Arduino
Board: Arduino with TFT_eSPI (Note the LVGL Version, make sure its the same as in platfomio.ini lib-dep)
Set UI Files Export Path: the path to your projects's src/ui folder.
for example: C:\Users\owner\Documents\PlatformIO\Projects\CYD Project\src\ui
Set LVGL Include Path to lvgl.h
From the Template folder, go to \src\ui and delete everything
You will be exporting your SLS ui into that directory and replacing the ball example.
You should now be able to build your project and further edit the main.cpp code to add necessary real-world
interfaces, etc.

[peteDDD]

Thanks again for this. I finally updated the zip package and used your Readme to create a new README FIRST.md including a graphic on the Square Line Studio settings.

THE NEW ZIP PACKAGE IS NOW IN THE FIRST POSTING OF THIS MESSAGE STRING.

[peteDDD]

Thanks. I'm traveling now but will review it when I return.

…

On Mon, Jul 15, 2024, 01:01 amirzohaib ***@***.***> wrote: Thanks for the Template, i got it to work. I rewrote the Readme (That text file should be at the Parent directory with large "README FIRST!!" written. I made it a bit more beginner friendly TEMPLATE FOR USING CHEAP YELLOW DISPLAY WITH SQUARELINE STUDIO AND PLATFORMIO ARDUINO FRAMEWORK Extract: Extract the zip to a folder where you wish to keep your new project. (You may want to keep a folder just for the template and duplicate that for each new project). In Visual Studio Code with Platformio, open the template folder with 'Open Project'. When you first open the folder containing this template, platformio will ask to build the project, click yes and it will download the necessary libraries and dependencies. you might need to install a GIT downloader if download fails Copy lv_conf.h and replace User_Setup.h: These files have been modified to work with CYD, These files are in the directory "NECESARY TEMPLATE FILES" copy lv_conf.h to .pio\libdeps\cyd\lv_conf.h copy and replace User_Setup.h to .pio\libdeps\cyd\TFT_eSPI (these paths are noted in the comment at the top of each file) Test the Template: This template includes a simple project from Squareline Studio ("SLS") The project has a blue button. When it is pressed, the ball will drop and bounce off the button. It is already in the src/ui directory. You can build and upload this project to your CYD as a test if you like. Click Platform IO - Project Tasks - cyd - General - Upload to build and upload the san Check that all of the fonts you used in the SLS project are turned on. These start at line 366 of lv_conf.h "1" indicates that you need the font, "0" indicates that you do not need the font. For this example you will need #define LV_FONT_MONTSERRAT_16 1 in your lv_conf CYD2USB Variant: For Much better colors on the CYD2USB Variant, add all this to the void setup() in main.cpp tft.setRotation(1); // Landscape orientation 1 = CYC usb on right, 2 for ver tft.invertDisplay(1); // if your colors are inverted tft.writecommand(ILI9341_GAMMASET); //Gamma curve selected tft.writedata(2); delay(120); tft.writecommand(ILI9341_GAMMASET); //Gamma curve selected tft.writedata(1); Create and Upload your own SLS Project: Make sure your project has the following Settings Width:320 Height: 240 Depth: 16-bit Board Group: Arduino Board: Arduino with TFT_eSPI (Note the LVGL Version, make sure its the same as in platfomio.ini lib-dep) Set UI Files Export Path: the path to your projects's src/ui folder. for example: C:\Users\owner\Documents\PlatformIO\Projects\CYD Project\src\ui Set LVGL Include Path to lvgl.h From the Template folder, go to \src\ui and delete everything You will be exporting your SLS ui into that directory and replacing the ball example. You should now be able to build your project and further edit the main.cpp code to add necessary real-world interfaces, etc. — Reply to this email directly, view it on GitHub <#102 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANQI5JX3YAH3HFNWFBL4OKDZMNQS7AVCNFSM6AAAAABBB26SU6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMBUG4ZDMMQ> . You are receiving this because you authored the thread.Message ID: <witnessmenow/ESP32-Cheap-Yellow-Display/repo-discussions/102/comments/10047262 @github.com>

[GthiN89]

Thanks man, extremely helpfull.

[gpena208777]

Does this work for the Capacitive USBC variant?

[peteDDD]

I don't know what " Does this work for the Capacitive USBC variant" is. There was only one version of the CYD when I wrote this.

…

On Sun, Aug 25, 2024 at 1:16 PM gpena208777 ***@***.***> wrote: Does this work for the Capacitive USBC variant? — Reply to this email directly, view it on GitHub <#102 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANQI5JW7JEV7HKBSBT7ZLB3ZTINPJAVCNFSM6AAAAABBB26SU6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANBUGQZTCMA> . You are receiving this because you authored the thread.Message ID: <witnessmenow/ESP32-Cheap-Yellow-Display/repo-discussions/102/comments/10444310 @github.com>

[peteDDD]

NOTE THAT THE ZIP HAS BEEN UPDATED TO INCLUDE A FULL README FIRST.md FILE.

See the updated link to the zip in the first message of this string.

[Roger-505]

Thank you so much!!