This tutorial is on how to create a usable HMI using an Arduino Mega, (TFT: LGDP4535) 2.8 touch screen shield, a WiFi shield from Dragino, AM2301 temp/ humid digital sensors, and Android App "Blynk".

So I was browsing instructables and came across this amazing tutorial on BLYNK. It is a android app that lets push data to your phone from arduino through wifi. I decided to use the app in the project simply because it is a convenient way to communicate with you arduino.

This tutorial is going to be more based on creating the touchscreen and enabling functions that can be controlled over wifi than the sensory equipment itself.

Really the application options are endless, this is a simple example of a Garden HMI because that requires some easy sensory and I/O modules. For my sensors I am simply using AM2301 digital temp and humidity sensors.

Also, I was able to find the libraries for the tft touchscreen at various places so there is probably repetitive things.On my to do list is to combine them all and just make a master library.

Step 1: Required Material

Materials:

1 Dragino yun shield: http://www.amazon.com/dp/B00PHCWACW/ref=sr_ph_1?m=AOH6XRQMY2VG3&ie=UTF8&qid=1439592984&sr=sr-1&keywords=dragino+yun

1 TFT Screen: http://www.amazon.com/gp/product/B00UAA2XIC?psc=1&redirect=true&ref_=oh_aui_detailpage_o05_s00

1 Arduino Mega: http://www.amazon.com/Arduino-Mega-2560-MEGA-R3/dp/B006H0DWZW/ref=sr_1_1?s=pc&ie=UTF8&qid=1439593064&sr=1-1&keywords=arduino+mega

2 DHT21 or AM2301 Digital Sensors: http://www.amazon.com/gp/product/B00R4KGG6Q?psc=1&redirect=true&ref_=oh_aui_detailpage_o02_s00

1 9v power adapter for arduino

Step 2: Configure IDE & Arduino

In this first step we will be:

1. First configuring the arduino to work with the dragino yun shield

2. Configuring the yun shield via http client so that it can connect to your network

3. Review some things I have learned that may assist you with the dragino yun shield.

Configuring the Arduino:

So there are a few things that need to happen for your arduino mega to work with the dragino yun shield:

1. You have to short the atmega16u2 before your dragino can communicate with your board.

Heads Up:

This will remove your devices usb serial port, but once short is removed the atmega16u2 will reboot and the COM will re-appear.

2. You must add a reconfigured board to your "board.txt" file with in your Arduino AVR files:

Mine looks like this:

YOURINSTALLDIRECTORY /hardware/arduino/avr/boards.txt

3. Once you have located this text file add this to it ( I am also adding UNO as well)

##############################################################

mega2560Yun.name=Arduino Mega 2560 -- Dragino Yún mega2560Yun.upload.via_ssh=true

mega2560Yun.vid.0=0x2341 mega2560Yun.pid.0=0x0044 mega2560Yun.vid.1=0x2341 mega2560Yun.pid.1=0x003f mega2560Yun.upload.tool=avrdude mega2560Yun.upload.protocol=arduino mega2560Yun.upload.maximum_size=258048 mega2560Yun.upload.maximum_data_size=8192 mega2560Yun.upload.speed=57600 mega2560Yun.upload.disable_flushing=true mega2560Yun.upload.use_1200bps_touch=true mega2560Yun.upload.wait_for_upload_port=true

mega2560Yun.bootloader.tool=avrdude mega2560Yun.bootloader.low_fuses=0xff mega2560Yun.bootloader.high_fuses=0xd8 mega2560Yun.bootloader.extended_fuses=0xfd mega2560Yun.bootloader.file=stk500v2/stk500boot_v2_mega2560.hex mega2560Yun.bootloader.unlock_bits=0x3F mega2560Yun.bootloader.lock_bits=0x0F

mega2560Yun.build.mcu=atmega2560 mega2560Yun.build.f_cpu=16000000L mega2560Yun.build.board=AVR_MEGA2560 mega2560Yun.build.core=arduino mega2560Yun.build.variant=mega

##############################################################

unoyun.name=Arduino Uno -- Dragino Yún unoyun.upload.via_ssh=true unoyun.vid.0=0x2341 unoyun.pid.0=0x0043 unoyun.vid.1=0x2341 unoyun.pid.1=0x0001 unoyun.upload.tool=avrdude unoyun.upload.protocol=arduino unoyun.upload.maximum_size=32256 unoyun.upload.maximum_data_size=2048 unoyun.upload.speed=57600 unoyun.upload.disable_flushing=true unoyun.upload.use_1200bps_touch=true unoyun.upload.wait_for_upload_port=true unoyun.bootloader.tool=avrdude unoyun.bootloader.low_fuses=0xff unoyun.bootloader.high_fuses=0xde unoyun.bootloader.extended_fuses=0x05 unoyun.bootloader.file=optiboot/optiboot_atmega328.hex unoyun.bootloader.unlock_bits=0x3F unoyun.bootloader.lock_bits=0x0F unoyun.build.mcu=atmega328p unoyun.build.f_cpu=16000000L unoyun.build.board=AVR_YUN unoyun.build.core=arduino unoyun.build.variant=standard

##############################################################

Step 3: Configure Dragino Yun

Next we have to configure the Dragino Yun after we have it placed on the Arduino Mega and everything is powered up. You can also place the TFT shield on the board as well, just insert right into the top of the Dragino.

1. Once the arduino has been powered on you will see a yellow "power" led on the Dragino. After a few minutes you will see a Flashing Led under "WiFi". Once that led starts flashing go into your wireless connections and connect to the "Draginoxxxxx". If you do not see it you may not have 9v adapter plugged in because it will not work otherwise.

2. Once connected open up Chrome (or any browser supporting java). Yun Shield has the default IP 192.168.240.1 <-------- enter that into the URL address bar.

3. The default username (not needed in http client) and password is:

Username = root

Password = dragino

4. Once you have accessed the http client for dragino click on the system button in the top right corner. This should bring you to a page where you can modify the board name and pass <--- need this for sketch upload. There is also a drop down menu to connect to a wireless network. Enter your information.. change board pass or name as needed... and connect to your local wireless network and then hit configure and restart at the bottom.

5. Once this has been done you will then be able to connect back to you local connection and still access the board.

6. At this point open your arduino IDE and click on tools:

a. Select the correct board (Atmega 2560 ~ Dragino Yun)

b. Verify that the port is available.

(If it is not available you may have to wait for your yun shield to connect, try restarting the IDE or yun shield VIA restart button on back (5 sec hold = wifi restart.....30 sec hold = wifi reset)

7. Once correct board and port are selected (Dragino can now be accessed @ 192.168.1.xxx <--IP should be in tools/ port drop down) At this point you can probably upload a simple sketch such as blink to ensure you can communicate with your board.

(If there is an error with the password it most likely means that your board is not communicating with the Dragino Yun shield)

Have Questions?

Check this WIKI

Step 4: Configure TFT/ Libraries / Homescreen

The TFT shield that I found has the LGDP4535 chip in it. You may need to check with the TFT manufacturer as to which libraries to use. It was a pain to try and locate any for this one.

IF USING WITH ARDUINO UNO YOU MUST LOOK IN LGDP4535.cpp UNCOMMENT LINE 15 AND COMMENT OUT LINE 14.

THAT WAY YOUR USING:

#include "uno_24_shield.h"

INSTEAD OF

#include "mega_24_shield.h"

HOWEVER IF YOU ARE USING A MEGA LEAVE EVERYTHING AS IS!!

WARNING!! YOU CAN GET THE TOUCHSCREEN AND DRAGINO WORKING WITH THE UNO, BUT THERE IS NOT ENOUGH PINS AVAILABLE!!

ok... so I'll be honest... I did a bit of mix matching with the libraries here. I could of down some consolidating with the libraries, but since it worked.. I just made small modifications to the libraries and the "HomeScreen" Library is my own creation. Kind of crude, but it works on the fly. It's the HMI's homescreen, because it is simpler to just call a header file I just created one with the configuration settings.

To edit HomeScreen:

Just change the header file... use note pad on Windows... or Gedit on Linux.

You must be somewhat fimiliar with the formatting of a .cpp / .h file. Do a litte looking around, real easy to figure out.

NOTE:// There is debugging yet to be done with this HMI screen and the buttons

Alright back to the TFT touchscreen:

1. First install those libraries.

2. Test for functionality ---> Use examples <-----

a. Try some examples out and make sure that the pins on your TFT shield are the same as the example.

b. Verified to work with LGDP4535 2.8" TFT

3. Follow this tutorial

here is some good code for calibration:

[code]

#include

#define YP A3

#define XM A2

#define YM 9

#define XP 8

int TS_MINX = 0;

int TS_MINY = 0;

int TS_MAXX = 1023;

int TS_MAXY = 1023;

#define MINPRESSURE 10

#define MAXPRESSURE 1000

typedef struct

{

int x;

int y;

} XY;

TouchScreen ts(XP, YP, XM, YM, 300);

#define BLACK 0x0000

#define WHITE 0xFFFF

LGDP4535 tft;

TSPoint getNextTouch()

{

TSPoint point;

{

digitalWrite(13, HIGH);

point = ts.getPoint();

digitalWrite(13, LOW);

pinMode(XM, OUTPUT);

pinMode(YP, OUTPUT);

}

while(!(point.z > MINPRESSURE && point.z < MAXPRESSURE));

return point;

}

TSPoint getNextRawTouch()

{

TSPoint point;

{

digitalWrite(13, HIGH);

point = ts.getRawPoint();

digitalWrite(13, LOW);

pinMode(XM, OUTPUT);

pinMode(YP, OUTPUT);

}

while(!(point.z > MINPRESSURE && point.z < MAXPRESSURE));

return point;

}

void setup()

{

Serial.begin(9600);

tft.reset();

tft.begin();

ts.min_x = TS_MINX;

ts.min_y = TS_MINY;

ts.max_x = TS_MAXX;

ts.max_y = TS_MAXY;

ts.width = tft.width();

ts.height = tft.height();

ts.orientation = 0;

calibrate:

tft.fillScreen(BLACK);

tft.setTextColor(WHITE);

tft.setCursor(0, 0);

tft.println("Screen Calibrationnn" "Tap to Continue...");

TSPoint point;

point = getNextRawTouch();

tft.fillScreen(BLACK);

tft.setCursor(0,0);

tft.print("Slide in from the top.");

point = getNextRawTouch();

tft.fillScreen(WHITE);

TS_MINY = point.y;

delay(100);

tft.fillScreen(BLACK);

tft.setCursor(0,0);

tft.print("Slide in from the right.");

point = getNextRawTouch();

tft.fillScreen(WHITE);

TS_MAXX = point.x;

delay(100);

tft.fillScreen(BLACK);

tft.setCursor(0,0);

tft.print("Slide in from the bottom.");

point = getNextRawTouch();

tft.fillScreen(WHITE);

TS_MAXY = point.y;

delay(100);

tft.fillScreen(BLACK);

tft.setCursor(0,0);

tft.print("Slide in from the left.");

point = getNextRawTouch();

tft.fillScreen(WHITE);

TS_MINX = point.x;

delay(100);

tft.fillScreen(BLACK);

ts.min_x = TS_MINX;

ts.min_y = TS_MINY;

ts.max_x = TS_MAXX;

ts.max_y = TS_MAXY;

tft.setCursor(0,0);

tft.println("Your ADC calibrations values are:");

tft.print("TS_MINX = ");

tft.println(TS_MINX);

tft.print("TS_MINY = ");

tft.println(TS_MINY);

tft.print("TS_MAXX = ");

tft.println(TS_MAXX);

tft.print("TS_MAXY = ");

tft.println(TS_MAXY);

tft.println();

tft.print("The orientation of the touch screen should be zero with these values.n" "Touch anywhere to test the screen. The coordinates will be in the upper left corner.");

}

void loop()

{

tft.setCursor(0,0);

tft.setTextColor(WHITE);

TSPoint p = getNextTouch();

tft.fillScreen(BLACK);

tft.print('(');

tft.print(p.x);

tft.print(',');

tft.print(p.y);

tft.print(')');

delay(100);

}

//This code is also from ceez blog

Step 5: Download Blynk App

The BLYNK webpage can be found at http://www.blynk.cc/

1.Download the app and get the libraries from in the Git Hub repository.

2.When you get to the webpage look a the page tree in the top left and lick on BLYNK LIBRARY

3. Notice BlynkSimpleYun.h.... This library is what you must include with the Dragino Shield.

4. After you add the library to your arduino IDE look through some of the examples... it will give you a good feel of whats going on with some of the Functions.

5. Blynk has a good community site, check it out if you have questions.

Step 6: The Code

Now for the code:

There is a little bit of debugging that I am in the process of doing.

The layout of the HMI is mostly contained in the header file labeled (Homescreen.h) you will see in the code where I called the different functions of the library.

Functions:

h.background();
h.boxes();

h.text();

h.buttons();

..............................................................................................

The "h" is simply the name I declared for class Homescreen

My intentions with this is that you can go into the header file and change or modify the way the homescreen displays. The functions for this file can be found in the LGDP4535.h file. Simply open it and view the list of functions with assigned variables.

example:

fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t c);

tft1.fillRect(0, 0, 210, 25, 5, Blue);

This has a specific format tft1 is a re-declaration of class LDGP4535.

" .fillRect " is the function

and " (0,0, 210, 25, 5, Blue) "

is ---> (x, y, w, h, Color)

all must be max of 16bit and integers

------> Anyways this should be a good jumping off point for you to pick a color and create your own HMI. Your going to have to mess with it and critique the code a little bit so it will achieve what you desire.

Screen Buttons and Relay Board Addition:

So the buttons are meant to be part of the HMI relay control. I have yet to implement this in code, but you can add the relay to whatever digital pins you desire. Take a look at the boolean in the "Touch()" function of the code, that is where the logic for the buttons are (feel free to improve). Either way, what I would do for the relay is simply create a new function for it and create a flag bit that will enable if the button is pressed. Pass that value to your relay function and the flag will enable the relay. Code as you would like :)

// THIS CODE IS WORKING, BUT THERE IS ALWAYS ROOM FOR IMPROVEMENT... JUST SAYING

ENJOY :)