Introduction: Kids Mailduino

If you have children, you know what I am talking about. They see you every day (...and mostly the whole day) typing on your smartphone and communicating with everyone. And they want that too! But they are still too young for such a gadget. Anyway the first thing I had in mind before developing this application was to make my kids read and write, which is very important the first two years in the school. Indeed this is difficult at the beginning, that's why a little drawing add-on let them still enjoy the gadget.

Before I begin, I want to thank http://www.rinkydinkelectronics.com for all available libraries as well as code for using with the TFT touch display

What you need:

  • Arduino Mega 2560 Development board
  • A 3,2'' touch display and a suitable shield (don't forget the display pen!)
  • a SD card for saving the pictures your children drawn and all received mails.
  • Wifi ESP8266 module for connecting with the internet
  • Clock DS1703 module
  • Battery adapter depending on which battery you want to use,
  • A beautiful case
  • An internet access point. In case you do not have internet at home, you can use a HotPoint configured on you mobile.
  • Databank somewhere on a server, ready to be accessed by PHP.
  • One or more email Addresses, dependent on the amount of users( for example kid1@yourdomain,com, kid2@your_domain.com, ..)

Step 1: Connect the Hardware

Because the LCD screen and shield occupy all pins of the Mega 2560, I needed to add a second row socket connector to both sides of the Mega board and join by soldering the pins to be used, like Vin, 5V, GND, RX and TX from serial interface 1 and SDA and SCL. It does not look good but it works. Now you can connect the DS1703 and ESP8266 modules as well as the battery.

Regarding the ESP8266 module, I seem to have had luck. I connected RX and TX on the ESP directly to the TX and RX pins on the Mega side and it worked well. The best way of doing it is not that but I realized it too late. In case you are interested in a correct connection, see for example https://www.instructables.com/id/ESP8266-Wifi-Temperature-Logger/step2/ESP8266-Setup.

After that you can proceed plugging the LCD shield and touch display on the mega board. Insert your SD card so it is ready to be used.

Step 2: Loading the Software

To work with this gadget you need two software components. The first one is the arduino sketch and the second one, the PHP script running on your server and waiting for the HTTP GET requests coming direct from your arduino. The HTTP 1.0 protocol allowed on the ESP8266 is not as comfortable as one is today used to in a PC. You can send HTTP GET and HTTP POST, that's all. So you need a way to translate your HTTP GET requests from arduino in SMTP or whatever, and that is just the part implemented in the PHP script.

Arduino

This sketch was implemented and tested with Arduino 1.5.6beta with good results. It does not work with the newer version 1.6.0 (due to TFT calibration errors).

Before you load the arduino sketch you should edit it and set the configuration parameters according to your Internet access point. These are:

#define DEST_HOST "www.your_own_host.de"
#define SSID_HOME "FritzBoxHOME" 
#define PASS_HOME "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

DEST_HOSTist the IP address of your account in the server, where your PHP script will be running. On your root directory there, the sketch expects a folder named scripts, inside of which your PHP script was/will be uploaded. This can be modified wherever the word scripts is found.

SSID_HOMEand PASS_HOMEare the settings of your internet access point. In case of internet via Fritz Box, you find the settings on your Fritz Start Center. In case of internet via Mobile Hotspot, you get the setting (for android systems) under Settings->More Settings->Tethering and WLAN-Hotspot->MobileHotspot.

Download the Sketch and read first all following steps for a correct configuration. If all goes ok, after loading the sketch on your arduino, you see the main window with keyboard, some icons and the WIFI connection status bar (vertically on the right side of the screen) with green color for "Connected" or red for "No connected".

PHP

The PHP script works as an interface between arduino and an SMPT server, what you need for sending/receiving mails. Your arduino communicates with your server via HTTP GET requests and this script is an interpreter for all wished actions coming from your (arduino) gadget. He executes these actions, which are Read Mails, Send Mail, Send Pictures, etc.

Download the script and make the configurations explained in the next steps before uploading to server.

Attachments

Step 3: Using the Application: Users and Mail Settings

Users

This application was implemented for being used by three different users. There is one photo per user in form of a .c file (loaded together with the sketch into the RAM), which is one of the few formats permitted by the arduino UTFT library. This file can be created under the site JPG_to_C converter by converting a JPG photo of 32x32 pixels into a .c file.

Users (here concretely Samira, Kilian and Keanu) are defined in code as followed:

#define SENDER_CNT 3
//Photo .c Files:
extern unsigned int keanu[0x1024];
extern unsigned int kilian[0x1024];
extern unsigned int samira[0x1024];
char *key_sendername[SENDER_CNT] = { "Samira", "Kilian", "Keanu" };
unsigned int *icon_sendername[SENDER_CNT] = {samira, kilian, keanu};

So you just have to edit these code-lines and write your own user-names and picture-files, both things in the same order.

To change the user just click on the LoggedUsericon (see picture) and select the photo of the wished user. The currently logged user can send mails with or without attached pictures and read his/her received mails. Every user has an own Mailbox File in the home directory on the SD card, where mails text and attachment pictures will be saved. It is expected that every user has an own valid Mail account somewhere. This account will periodically be checked for downloading Mails to arduino and let the user read his/her mails.

Set Mail From and Mail To

After having selected a user, the field Mail From of the arduino message (HTTP GET request) wil be filled with his/her identification name and later (on the server, PHP sides) converted to his/her email address, before the real mail is sent.

To change the destination person, shown in the MailTo icon, just once again click on it until getting the wished person. In the same way, the Mail To field will now be filled with his identification name and later via PHP converted to the right email address.

* For more information see Step Sending a Mail

Step 4: Using the Application: Drawing

To draw a picture use the DrawPic icon in the main window. The rainbow icon is now only red before drawing.

All pictures ever drawn are saved in the SD card and public, so that a user can access to them for sending as an Attachment.

Because HTTP 1.0 does not allow you to send pictures in binary format, the drawn pictures here will be immediately converted to a self-made format and saved in a text file. This file will be received on the server (if sent) and reconverted to Picture.

To avoid the sending of very big pictures, there is an colored icon just at the middle of the right side of the screen, under CLEAR, which changes its color depending on the size of picture drawn until now. After reaching the red color, no pixel information will be written into the file anymore. This limits the size to 3K, which is enough for a fine picture.

This colored icon works also as an OK and must be touched when picture is ready. Now the rainbow icon shows a rainbow and this picture can be sent in the mail. Otherwise it was just saved in the SD pictures folder and can be viewed with the pictures browser.

Step 5: Using the Application: Send a Mail

For sending emails just make click on the envelope icon. An email in form of a HTTP GET request (first but later converted to a read mail) with or without attachment (depending on if there is a rainbow below right or not) will now be sent. A sent status bar will be filled with green color if the process is going good or in red, if the WIFI connection has problems.

The HTTP GET request includes some fields for creating later a real mail on the server side. From includes the name of the logged user and To includes the name of the person shown in the MailTo icon (see Users explanation). The PHP script receives a message the request and fills the fields with the configured values. All this must of course be set before sending mails by editing the PHP script before being uploaded on the server.

See the interesting part of the PHP script:

/*****************************************/
/*         SEND MAIL                     */
/*****************************************/
 if( (strlen($send_mail_from) > 0 && strlen($send_mail_to) > 0) 
     || strlen($get_image) > 0 || strlen($_POST["MailImage"])>0
     || strlen($end_image) > 0 || strlen($get_image_name) > 0
     || strlen($give_me_image) > 0  )
{
   $handy_light = 0;
   $to      = 'mama@your_domain.com';
   if( strcmp($send_mail_to, "Papa") == 0 )
     $to      = 'papa@your_domain.com';
   else if( strcmp($send_mail_to, "Keanu") == 0 )
   {
     $to      = 'keanu@your_domain.com';
     $handy_light = 1;
   }
   else if( strcmp($send_mail_to, "Kilian") == 0 )
   {
     $to      = 'kilian@your_domain.com';
     $handy_light = 1;
   }
   else if( strcmp($send_mail_to, "Samira") == 0 )
   {
     $to      = 'samira@your_domain.com';
     $handy_light = 1;
   }
   else if( strcmp($send_mail_to, "Mami") == 0 )
     $to      = 'gradnma@hotmail.com';
   else if( strcmp($send_mail_to, "Juanito") == 0 )
     $to      = 'oncle@hotmail.com';
   else if( strcmp($send_mail_to, "Javier") == 0 )
     $to      = 'myfriend@gmail.com';
  
   
   $subject = 'De: ' . $send_mail_from;
   $message = $mailbody;	  
   $headers = 'From: ' . $send_mail_from . '@your_domain.com' . "\r\n" .
              'Reply-To: ' . $send_mail_from . '@your_domain.com' . "\r\n" .
              'X-Mailer: PHP/' . phpversion();</p>

Now you only need to replace all my configured destination persons shown on the MailTo icon, called Mama, Papa, etc

mama@your_domain.com
papa@your_domain.com.. etc

with your wished addresses.

The PHP script must know if the destination person gets his/her mails via PC/Mobile/etc or Mailduino. Depending on this, the attached pictures will be converted to JPG prior sending (for not Mailduino recipiens) or sent directly in .c format (which is the only possible way for showing this on arduino TFT when reading mails with attachment). So, configure the users with Mailduino by setting the PHP variable $handy_light to true, otherwise false.

Step 6: Using the Application: Receive Mail

To read emails click on the Truckicon on the main window (keyboard window) and go to the emails window. Only the last 4 emails are shown, sorted by date (decreasing). All emails received are always saved in the mailbox file. Emails with HTML code can not be decoded and will be ignored, so in case you make a test with your usual mail software on PC, just set "only text" before sending.

To check if there are new mails, use the Truck icon on the upper side of the window. Every time that arduino registers no activity in the last 2 minutes, emails will be checked and downloaded. Arduino sends for this a HTTP GET request and the server PHP script checks the mail account. All new mails will be sent back to arduino with an easier format.If there are new mails a blue M appears on the right side at the bottom of the window and this always undependently of on which window you are now.

On an email field you see the received text in white and the sender address in red. In case the Fromfield contains a known person identifier, a photo of the sender will be shown instead of red text.

If the received email has a picture in attachment, the email received includes the name of the picutre under Subjectand now arduino requests this picture again via HTTP GET to the server. A new download starts now, to get all pixel information of the attached picture. In this time you can see the receive status bar showing the progress of the download.

If a mail contained a picture in the attachment, you see a rainbow at the right side of the mail field. A click on it opens the picture.

PHP configuration

On the server side, there also settings to configure, in order to check the wished account (and not the one of my children (:-) ). The HTTP GET request coming from arduino contains the name of the account to be checked and this will be saved in the PHP script in the variable named $get_mails_for. See following code and change the email address and email password of every possible account you want to check. 

/*****************************************/
 /*              RECEIVE MAILS            */
 /*****************************************/   
 else
 {
   if( strcmp($get_mails_for,"Keanu") == 0 )
   {
     $USER_NAME="keanu@your_domain.com"; 
     $USER_PASS="A123456b"; 
   }
   else if( strcmp($get_mails_for,"Kilian")==0 )
   {
     $USER_NAME="kilian@your_domain.com"; 
     $USER_PASS="A123456b"; 
   }
   else if( strcmp($get_mails_for,"Samira") == 0 )
   {
     $USER_NAME="samira@your_domain.com"; 
     $USER_PASS="A123456b"; 
   }
   else 
     $USER_NAME="default@your_domain.com"; 
   echo "Reading Mails for " . $get_mails_for . " from Server with PHP\n";
   $inbox = imap_open ("{". $MAIL_HOST . ":143}INBOX", $USER_NAME, $USER_PASS) or die("Can't connect IMAP-Server!");

Step 7: Using the Application: Pictures Browser

All pictures ever drawn are saved on the SD card and can be viewed by clicking on icon on the left side of the clock icon (main window). The browser shows the pictures reduced and sorted by name in a matrix of 3x3.

  • View a picture in original size by clicking on it. After that you come back to the browser by clicking anywhere on the picture.
  • The icon with a hand leads you to the next page.
  • The OK icon leads you back to the main window.

Step 8: Clock

For getting the current time with the clock application you need first to set your DS1307, in case it did not do it yet. For this you can load following arduino sketch and set the current time in (unix format):

 /* T(string_utctime)   */

#include  <Time.h>  
#include  <Wire.h>
#include   // a basic DS1307 library that returns time as a time_t
void setup()  
{ 
  Serial.begin(9600);
 setSyncProvider(RTC.get);   // the function to get the time from the RTC
  if(timeStatus()!= timeSet) 
     Serial.println("Unable to sync with the RTC");
  else
     Serial.println("RTC has set the system time");      
}
void loop()
{
  if(Serial.available())
  {
     time_t t = processSyncMessage();
     if(t >0)
     {
        RTC.set(t);   // set the RTC and the system time to the received value
        setTime(t);          
     }
  }
   digitalClockDisplay();  
   delay(1000);
}
void digitalClockDisplay(){
  // digital clock display of the time
  Serial.print(hour());
  printDigits(minute());
  printDigits(second());
  Serial.print(" ");
  Serial.print(day());
  Serial.print(" ");
  Serial.print(month());
  Serial.print(" ");
  Serial.print(year()); 
  Serial.println(); 
}
void printDigits(int digits){
  // utility function for digital clock display: prints preceding colon and leading 0
  Serial.print(":");
  if(digits < 10)
    Serial.print('0');
  Serial.print(digits);
}
/*  code to process time sync messages from the serial port   */
#define TIME_MSG_LEN  11   // time sync to PC is HEADER followed by unix time_t as ten ascii digits
#define TIME_HEADER  'T'   // Header tag for serial time sync message
time_t processSyncMessage() {
  // return the time if a valid sync message is received on the serial port.
  while(Serial.available() >=  TIME_MSG_LEN ){  // time message consists of a header and ten ascii digits
    char c = Serial.read() ; 
    Serial.print(c);  
    if( c == TIME_HEADER ) {       
      time_t pctime = 0;
      for(int i=0; i < TIME_MSG_LEN -1; i++){   
        c = Serial.read();          
        if( c >= '0' && c <= '9'){   
          pctime = (10 * pctime) + (c - '0') ; // convert digits to a number    
        }
      }   
      return pctime; 
    }  
  }
  return 0;
}

After setting your DS1307 you can use the gadget for getting current time by clicking on the clock icon on the main window.