SquareLine Studio ESP32 Tutorial- PART2 - Counter Project

hello welcome to part two of my square line plus esp32 tutorial this is lilyo T display AMOLED touch and in this tutorial we will make this simple project in square line studio and Arduino I we will use Square line studio and Arduino ID and we will make this counter which is a really simple project but using this project you will need to use images you will need to make your own fonts and you will need to interact with buttons so you'll need to connect your user interface files and your Arduino sketch if you missed first episode please check description and before this tutorial please watch my first tutorial how to set up this board and how to make simple user interface in square line studio so let's get started okay first I will make project folder on my desktop on or anywhere counter next in inside of this folder I will need my same file from last time you can download download that file from you can find it on description uh I need to rename it so name of the file and name of the folder needs to be the same and I need another folder which will be used for user interface files will use this folder for square line Studio files I will open this counter R2 a file and I need to add this AMOLED set set rotation one because in this project we will use different rotation of screen and now we can go to square line Studio I will leave this open I will go to create uino this is important part I will choose my desktop counter as my project files project folder desktop counter resolution in this screen orientation is 240 by 5 36 color depth is 16bit swap theme is like always dark and we can go to create make sure that in file project settings you have this Market flat export so we want to export all files to one folder which is this folder you can notice that now we have more folders because we decided that this will be project folder and first folder is is assets here we can put our fonts and images and they will shown here so we can use them in our project for example here I have PNG image of stopwatch and I can copy it to assets paste and now I have my image here so I can put it here next thing we can put here is our fonts fonts are are stored in C Windows fonts so for example you can use any font you have installed on your PC let's say this scoreable so I will go copy and paste it in counter assets there are many corals and now I can see these fonts here so let's make some fonts fonts to make font you need to go to this tab font I will call this font big Big Font I will choose regular Corell and I will choose size 16 and I will go to create I will add a label here I will return return from font to inspect and in label I can set text let's say uh 32 you can put here any number because uino sketch will change these numbers um and I will go to style text and font choose to our Big Font and I can see that it can be a little larger so I will return to font this part we can use to create new font and already created fonts are here so I can modify it to be I don't know 19 okay that's bad now I need to push buttons if I want the another button with same size I can just click here and duplicate this one so now I have two which are same size what else uh let's make another font which will be small font want also Coral let's try to let's try bold one and let's try 15 I will add a label here it will be static label and text want small font font is little too big so sorry here we can modify it perfect I will also add two labels on buttons one will be plus signed and here we can also check small or I can even Big Font put here on plus and this one will be reset and this one can be smaller font and let's say I'm happy with results which is not true but let's export files to see how this looks on our board yes I can also choose screen and I don't like this gray style so I will change background of mine screen to to this which is similar or to pure black and now I will go uh to export files remember I need to export files to this folder not to counter to root folder to UI folder so export export your fals and I will choose this and now files are exported and here is Trick what you do what you need to do now every time you export files all these files will be deleted and new will be created that is a reason why these files are not in same folder like our Arduino file because in um if they were this are doino file would also be deleted so each time you export your files you need to go in UE folder and copy these files you can all but these are and copy these files here and now when these header files are in the same folder like this counter they will will be visible and you can see them here and now we can upload this to see how this look and now we have our buttons our labels our image but when I press buttons nothing happens so in code first I will add I already have that but I will add an integer number which will be zero we can notice that name of this label is label one but in code it is named UI underline label one I will paste this function in Loop here this is this is function which will set value of this label to be this number here we need to put name of label and here we need to first we will convert this number to string and then we will convert to C string let's try now and now we have zero on our screen instead of this 32 now we need to interact with buttons I'll return to square line studio and here we have events so we can decide what will happen when each even when each button is pressed so I will click on plus and I will go to add event when button is clicked action will be so we have many action which which can be used but in this case we want to call function I will go to add function time function name will be increment increment number and this is important choose this don't do not export and I will do the same for reset add event one is clicked call function add function name reset number reset number do not export we made changes in our Square line Studio I will save it and I will export it export UI files every time I export files I need go I need to go back to UI file UI folder and copy or replace these files with new ones and now and now let's define what these functions do void increment number and in here I need to put this I just paste it from another function when we press number it will call increment number function when we press that button it will call increment number function and that function will be incrementing and I will duplicate this copy and paste function reset number we'll put number equal zero and now I can upload this and that's it our project is working thank you for watching thank you for your time I hope you learn something useful today goodbye

Channel: Volos Projects

Views: 5,708

Keywords:

Id: ZpV2pqzoTBE

Length: 18min 27sec (1107 seconds)

Published: Sun Jun 30 2024