icon

    Nextion Display - Control Font Color Using Commands

    userHead Ron.Cutts Jul 17.2024
    0 225 Medium

    In this project we are going to make a project with VL53L0X is a Time of Flight distance sensor to measure the distance of the obstacle and display the distance of the obstacle on the Nextion Display. If the distance will be too short the font of the displayed distance will change from Black to Red.

    You will learn how to send commands for changing font color from Arduino to Nextion Display using Visuino program.

    Check my other Nextion projects to get more ideas!

    Watch the Video!

    STEP 1
    What You Will Need
    Arduino UNO (or any other board)Nextion DisplayVL53L0X is a Time of Flight distance sensorBreadboardJumper wiresNextion Editor program: Download NextionVisuino program: Download Visuino
    STEP 2
    The Circuit
    Connect Nextion Display VCC red wire to Arduino 5V pinConnect Nextion Display GND black wire to Arduino GND pinConnect Nextion Display Yellow wire (RX) wire to Arduino TX pinConnect Nextion Display Blue wire (TX) wire to Arduino RX pinConnect TimeOfFlight Sensor pin[VCC] to Arduino pin[3.3V]Connect TimeOfFlight Sensor pin[GND] to Arduino pin[GND]Connect TimeOfFlight Sensor pin[SDA] to Arduino pin[SDA]Connect TimeOfFlight Sensor pin[SCL] to Arduino pin[SCL]
    STEP 3
    Nextion Editor
    Download Nextion Editor and Install itStart Nextion EditorIn the Nextion Editor click on the "New" buttonIn the Window set the name for the Project like "VL53L0X-Distance"In the "Setting" window select the Model of your Nextion Display & click "Ok"Select Display Direction 90 & click "Ok"In the Menu select "Tools">"Font Generator"In the Font creator window set the "Height" to 40 & set the name for your font and click "Generate Font", Save the Font, you will be asked "Add the generated font?" Click YesIn the Editor on the left in the "Toolbox" find: "Text" & drag it to the right

     

    In the Toolbar click on the "Compile" buttonIn the Menu Select "File" > "TFT File Output"Set the Output folder & click on the "Output" buttonSave the File to the SD cardInsert the SD card to your Nextion DisplayPower the Arduino and you will notice that the Nextion Display will start to Update it selfOn the Finish disconnect the power and remove the SD card from the Nextion display
    STEP 4
    Start Visuino, and Select the Arduino UNO Board Type

    Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "Arduino UNO" as shown on Picture 2

    STEP 5
    In Visuino Add & Set Components
    Add "Nextion Display" componentDouble click on the "DisplayNextion1" And in the Elements window drag "Text" to the left sideDrag "Command" to the left side and in the properties window set "Command" to t0.pco=1024, this means black colorDrag "Command" to the left side and in the properties window set "Command" to t0.pco=1024, this means black colorDrag another "Command" to the left side and in the properties window set "Command" to t0.pco=63488 -red color

     

    Note: to get the value for the color select the Text Element in Nextion editor and in the properties window search for "pco" and you will see the value number for the selected color

     

    Add "Time Of Flight Laser Ranger VL53L0X" componentAdd "Analog Multi Source" componentAdd "Analog To Text" component, and in the properties window set "Precision" to 0Add "Compare Analog Value" and in the properties window set "Compare Type" to ctBigger and "Value" to 50Add another "Compare Analog Value" and in the properties window set "Compare Type" to ctSmaller and "Value" to 50
    STEP 6
    In Visuino Connect Components
    Connect "LaserRanger1" pin Sensor [I2C] to Arduino pin I2C [In]Connect "LaserRanger1" pin Sensor [I2C] to Arduino pin I2C [In]Connect "LaserRanger1" pin [Distance mm] to "MultiSource1"pin [In]Connect "MultiSource1" pin [0] to "AnalogToText1"pin [In]Connect "MultiSource1" pin [1] to "Compare1"pin [In]Connect "MultiSource1" pin [2] to "Compare2"pin [In]Connect "AnalogToText1"pin [Out] to "DisplayNextion1" > "Text1" pin [In]Connect "Compare1"pin [Out] to "DisplayNextion1" > "Command1" pin [Clock]Connect "Compare2"pin [Out] to "DisplayNextion1" > "Command2" pin [Clock]Connect "DisplayNextion1" Pin[Out] to "Arduino" > "Serial [0]" pin [In]
    STEP 7
    Generate, Compile, and Upload the Arduino Code

    Before Uploading Disconnect RX pin on Arduino and connect it back after the Upload.

    In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.

    STEP 8
    Play

    If you power the Arduino module and put the obstacle in front of the VL53L0X sensor Nextion display will show the distance of the obstacle in mm, if the distance is lower then 50mm the font color will change to red.

    This approach of using commands can also be used for changing other properties in the Nextion display.

    Congratulations! You have completed your project with Visuino. Also attached is the Visuino project, that I created for this Instructable, you can download it here and open it in Visuino: https://www.visuino.eu

    icon Nextion- VL53L0X.zip 1KB Download(0)
    License
    All Rights
    Reserved
    licensBg
    0
    userHead
    Ron.Cutts Dec 09.2023
    251 M-point
    11 Makelogs
    background
    Related Makelogs
    More from this category