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

Hardware and softwares needed

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

Step 2: 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:

CLICK new project->name it as visuino->device tab->choose nx3224t028_011 display->90 horizontal->character encoding ->ascii
Display area will have a white 320*240 editable screen.
Now we have generate fonts: tool->font generator->follow the wizard and select the generated font.
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.
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.
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
Similarily repeat the process of adding two more text component t1 , t2 .place them one below the other by dragg ing them on screen.
Now you should add 4 more text components to display roll,pitch,yaw text similarily by repeating the above procedure.
Click on compile tab (this will generate tft file)
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
Click on file->open build folder->copy this visuino tft file into fat32 formatted sdcard.
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

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.

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 Nano as shown in Picture 2

Step 4: Visuino : Graphical Programming

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)
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)
Type "next" in the Filter box of the Component Toolbox then select the "Nextion Display" and drag it over design area. (Picture 1)
Double click over the DisplayNextion1 component, and in the Elements Editor, add 3 Text Elements (Picture 2)
Set the value of the "Element Name" of the second element to "t1" (Picture 3)
Set the value of the "Element Name" of the third element to "t2" (Picture 3)
Connect the components as shown on Picture 4

YOU CAN USE FILE ATTACHED.

anglesTestnextion.owarduino
Download

Step 5: 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