3D Printed Encoder Knob
.jpg)
We cleverly combined the AS5600 module, 3D printing technology, Squareline UI design and Arduino programming to create a smart magnetic knob. The AS5600 module accurately senses the angle of rotation to provide high-precision feedback to the knob; 3D printing gives the knob its unique shape and durability. Design your favourite interface on Squareline and interact with MaTouch via Arduino.
Supplies


1、Firstly, you need a AS5600 module, a magnet, a Bearing and a 3Dprinted case, and assemble them.
2、The AS5600 uses I2C port for communication with controller, connected it to Matouch 4irch display.
SquareLine Design












1、click on "Create-->Makerfabs", select the 4 inch screen .
2、Modify the desired project name and location information, and then click “CREATE”.
3、Add the image we need to use, click “ADD FILE INTO ASSETS”.
4、click screen, switch to the screen Settings, click "brackground", add the image to the screen.
5、Add a image, change it brackground to set it to a knob.
6、Change its position and rotation point.
7、At this point, our LVGL graphical user interface has been designed. Click "ctrl s" to save, and then output the project code document.
Arduino Design














1、Open the output code file into the Arduino design.
2、Add a [driver library] (https://github.com/Makerfabs/LVGL-Usage-with-Squareline-MaTouch-Lesson/blob/main/lesson%203/AS5600_test) for the AS5600.
3、Add the library and define its pins, then enable the IIC pin.
4、Add an Angle conversion function.
5、Serial Monitor to print Angle value and then the Angle of the knob is designed as the original Angle value, because the rotation Angle of the SquareLine image is 10 times the original Angle, so it needs to be multiplied by 10.
Upload Code






1、Click on the code project document you just output. Copy the lv_conf.h file into the “src” folder in the LVGL folder in libraries.
2、Copy these four files into the Arduino library.
3、Go back to the Arduino, connect the screen with USB, select the com port and the board of the ESP32S3 and click upload.
Detailed Operation Video
Detailed Operation Video can find on our Youtube page, we also have a video series on this operation which can be viewed here
Source code can find on our Github:https://github.com/Makerfabs/LVGL-Usage-with-Squareline-MaTouch-Lesson/tree/main/lesson%203