Introduction: Visuino : Nextion Lcd Based Acceleration to Angle Display

Picture of Visuino : Nextion Lcd Based Acceleration to Angle Display

I am always a fan of display modules and after coming across visuino nextion support I could not resist myself so i decided to use it as per my custom designed interface( however after this Intructable everyone can design their own).

Visuino not only simplifies the process but also saves much time. so your display starts working in minutes.

Some of the images in the Instructable are borrowed from the BoianM Instructables . And he has helped with some of the final editing of the Instructable.

Step 1: Components

Picture of Components

Hardware and softwares needed

  1. Arduino uno( or nano ,mega anyone can be used)
  2. MPU9250 10DOF 3D inertial measurement unit module with I2C interface(mpu6050 can also be used as visuino has its support as well)
  3. Nextion lcd 2.8 inch nx3224t028_011( any other nextion lcd will also work)
  4. Nextion LCD UART cable
  5. SD card of capacity less than 32gb and its adapter .
  6. jumper wires( male to female and male to male )
  7. NEXTION EDITOR( latest release)
  8. VISUINO7.8.2.9 or higher release
  9. ARDUINO IDE1.6.8 or higher release

Step 2: Developing Interface in Nextion Editor

Picture of Developing Interface in Nextion Editor

*Before proceeding please download nextion editor and install it on your pc.

*make sure you have fat32 formatted sdcard .

*make sure you have downloaded plain black wallpaper of 320*240 size( or you can resize in microsoft paint)

make sure you have generated font otherwise nextion editor will show error in compiling.

NOW FOLLOW THESE STEPS:

  1. CLICK new project->name it as visuino->device tab->choose nx3224t028_011 display->90 horizontal->character encoding ->ascii
  2. Display area will have a white 320*240 editable screen.
  3. Now we have generate fonts: tool->font generator->follow the wizard and select the generated font.
  4. Now in nextion editor add this black wallpaper in picture window(left bottom corner window) by clicking on + button. black wallpaper will appear in picture window as picture 0.
  5. In display window white screen will appear,now click on its attribute table(right hand side bottom corner window)
    click on sta->select image
    pic->double click->select picture 0(black wallpaper)

    now you will see that white screen becomes black in color.this will be used as background of interface.
  6. Now from toolbox window:
    click on text component->t0 newtext will appear on the display screen->drag over required area
    now click on its attribute table
    sta->crop image
    picc->double click->choose picture 0
    pco->choose cyan color
    txt->x
  7. Similarily repeat the process of adding two more text component t1 , t2 .place them one below the other by dragg ing them on screen.
  8. Now you should add 4 more text components to display roll,pitch,yaw text similarily by repeating the above procedure.
  9. Click on compile tab (this will generate tft file)
  10. You can also debug or run this in simulator by clicking on debug tab ,a new window will popup.
    under" instruction input area" window enter-> t0.txt="555"

    this will cause x->555 on display screen
  11. Click on file->open build folder->copy this visuino tft file into fat32 formatted sdcard.
  12. Insert this sdcard into nextion lcd and power it on.After successful update.power it off than remove the sdcard and power it again.

NOW YOU WILL SEE YOUR NEXTIO EDITOR INTERFACE ON LCD.

you can directly transfer visuino tft file attached here to sdcard .

Step 3: Start Visuino, and Select the Arduino Board Type

Picture of Start Visuino, and Select the Arduino Board Type

To start programming the Arduino, you will need to have the Arduino IDE installed from here: http://www.arduino.cc/ .

Please be aware that there are some critical bugs in Arduino IDE 1.6.6.

Make sure that you install 1.6.7 higher, otherwise this Instructable will not work!

The Visuino: https://www.visuino.com also needs to be installed.

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

Step 4: Visuino : Graphical Programming

Picture of Visuino : Graphical Programming
  1. Type "accelerattion"in the Filter Box of the Component Toolbox, then select the "Acceleration To Angle" component and drop it in the design area (Picture 1)
  2. Type "mpu" in the Filter box of the Component Toolbox then select the "Accelerometer Gyroscope Compass MPU9250 I2C" component , and drop it in the design area (Picture 1)
  3. Type "next" in the Filter box of the Component Toolbox then select the "Nextion Display" and drag it over design area. (Picture 1)
  4. Double click over the DisplayNextion1 component, and in the Elements Editor, add 3 Text Elements (Picture 2)
  5. Set the value of the "Element Name" of the second element to "t1" (Picture 3)
  6. Set the value of the "Element Name" of the third element to "t2" (Picture 3)
  7. Connect the components as shown on Picture 4

YOU CAN USE FILE ATTACHED.


Step 5: Generate, Compile, and Upload the Arduino Code

Picture of  Generate, Compile, and Upload the Arduino Code

please do not connect lcd until you upload the code to arduino uno.

UPLOAD TO UNO BY USING COM PORT.

THAN CONNECT LCD OTHERWISE CODE WILL NOT UPLOAD.


In Visuino, Press F9 or click on the button shown on image 1 to generate the Arduino code, and open the Arduino IDE In the Arduino IDE, click on the Upload button, to compile and upload the code

Step 6: Hardware and Jumper Connection Circuit

Picture of Hardware and Jumper Connection Circuit

CONNECTIONS

ARDUINO UNO TO MPU9250

A5->SCL

A4->SDA

VCC->=VCC

GND->GND

Connect 5V VCC Power, Ground,SDA, and SCL, to the MPU9250Module .

Connect the other end of the Ground wire to Ground pin of the Arduino board )

Connect the other end of the 5V VCC Power wire to the 5V power pin of the Arduino board

Connect the other end of the SDA wire to SDA/Analog pin 4 of the Arduino board

Connect the other end of the SCL wire to SCL/Analog pin 5 of the Arduino board

ARDUINO TO NEXTION LCD

TX->RX

RX->TX

VCC->VCC

GND->GND

Connect the other end of the Ground wire to Ground pin of the Arduino board

Connect the other end of the 5V VCC Power wire to the 5V power pin of the Arduino board

Connect the other end of the rx wire to tx pin(digital pin 2) of the Arduino board

Connect the other end of the tx wire to pin rx (digital pin 1)of the Arduino board

Step 7: Power Up the Setup and Play

Picture of Power Up the Setup and Play

powering up the setup by plugging in usb cable to arduino uno will show you live action.

congrats

you have successfully created the project.

Comments

Bateleur2 (author)2016-07-09

Works well, and you get to learn Nextion and Visuino at the same time. Thanks for sharing. I used the MPU 6050, but it works just as well, you just have to select it in the visuino IDE.

Ankitmishra (author)Bateleur22016-07-09

thanks.enjoy