在開始寫教程之前
，我想感謝http://www.rinkydinkelectronics.com，我從上麵汲取了很多營養，從各種庫到代碼，有了它們我才能玩轉這塊TFT觸摸屏。

 

 

·Arduino Mega 2560開發板。

 

·一塊3.2英寸的觸摸屏和保護殼，別忘了觸控筆。

 

·一張SD卡，用來保存孩子的塗鴉。

 

·ESP8266 WiFi模塊
，以便設備連接互聯網。

 

·DS1703時鍾模塊。

 

·電池適配器（找適合你所用電池的哦）。

 

·一個漂亮的殼子

 

·設定好一個互聯網接入點，這樣即使你不在家也可連上熱點使用設備。

 

·在服務器上創建一個隨時能通過PHP訪問的數據庫。

 

·為不同的孩子創建不同的電郵地址。

 

 

 

由於屏幕和外殼占據了Mega 2560的所有接口，所以我不得不在Mega開發板兩邊又焊接了幾個接口，雖然看起來醜了點

，但至少管用了。這樣我們準備的 DS1703和ESP8266模塊
，甚至電池都可以順利連接了。

 

 

說到ESP8266 WiFi模塊，這次我算是走了狗屎運，連接時我直接將ESP8266模塊的RX和TX接口連上了Mega開發板上的TX和RX接口，幸運的是
，它居然運行無誤。其實這不是正確的連接方法，我推薦你們還是參考下下麵這個網頁的連接方法吧：

 

隨後你就可以將觸摸屏連上Mega開發板並套上保護殼了。對了，別忘了插入準備好的SD卡。

 

 

 

想要運行該設備
，你需要兩個軟件組件。第一個是Arduino Sketch，第二個則是運行在你服務器上的PHP腳本和來自Arduino的HTTP Get請求。ESP8266上使用的HTTP 1.0協議有些過時，用起來有些不舒服
，你隻能通過它發送HTTP Get請求和HTTP Post請求。所以你需要將來自Arduino的HTTP Get請求轉換成STMP（簡單電子郵件協議）或其他格式，而這正是PHP腳本的一部分。

 

 

在Arduino 1.5.6 beta上，該Sketch的運行和測試都進行的很順利，但升級到最新的1.6.0就不行了（出現了TFT校準錯誤）。所以在你加載這個Sketch之前
，請對其進行編輯並根據你的互聯網接入點設置相應參數。下麵是範例：

 

#define DEST_HOST "www.your_own_host.de"

 

#define SSID_HOME "FritzBoxHOME"

 

#define PASS_HOME "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

 

記住，DEST_HOST並不是你在服務器上的IP地址，所以你的PHP腳本不會在那裏運行。在你的根目錄裏
，Sketch會建立一個名為“Scripts”的文件夾，而你的PHP腳本最終會上傳到這裏。

 

SSID_HOME和PASS_HOME則是互聯網接入點的設置。想要通過路由器上網（我用的是德國的Fritz Box路由），你就要進入路由器設置中心對其進行配置。想使用移動熱點的話，你就要進入設置->更多設置->WLAN熱點->移動熱點對其進行配置（安卓係統）。

 

下載了Sketch之後記得先閱讀詳細步驟並做出正確的配置調整。如果一切運行正常，在加載了Sketch之後，你就會看到主界麵，上麵會顯示鍵盤，一些圖標和WiFi狀態欄（綠色為已連接，紅色則為斷開）。

 

 

PHP腳本在這個項目中起了很重要的作用，它是Arduino開發板和SMPT服務器之間的接口
，你可以通過它收發郵件。它可以將開發板上反饋來的HTTP Get請求轉換成相應的動作，完成閱讀郵件，發送郵件和圖片等工作。

 

 

 

 

該程序可供三個不同用戶使用，每個用戶都可設定自己的頭像（.c文件
，和Sketch一起上傳到RAM中）。這個格式比較少見
，你可以通過網站JPG_to_C converter將一張32x32的JPG圖片轉換成一個.c文件。

 

創建三個用戶時可使用下列代碼（三個用戶分別為Samira
，Kilian和Keanu）：

 

#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};

 

你在創建用戶時隻需修改用戶名和圖片就行了
，其他代碼完全相同。

 

更換用戶時

，你隻需點擊Logged User圖標並選擇要使用的用戶就好。登陸的用戶可以發送郵件或閱讀收到的郵件，每個用戶在SD卡ka的de根gen目mu錄lu上shang都dou會hui有you自zi己ji專zhuan用yong的de信xin箱xiang文wen檔dang，你ni的de郵you件jian和he郵you件jian中zhong的de附fu圖tu都dou會hui保bao存cun在zai這zhe裏li。未wei來lai，我wo想xiang讓rang該gai設she備bei能neng定ding期qi掃sao描miao郵you箱xiang並bing下xia載zai郵you件jian供gong用yong戶hu閱yue讀du。

 

設定郵件發送人和收件人

 

選擇好用戶後
，HTTP Get請求就會記錄用戶的相關信息，隨後便會在服務器上生成用戶的郵件地址。

 

想要改變收件人
，隻需點擊Mail To圖標並在其中進行選擇就好。與上一步相同，設備會記錄收件人的相關信息
，然後通過PHP轉換出正確的郵件地址。

 

更多詳細信息請參閱第六步：發送郵件。

 

 

想要畫畫，點擊彩虹圖標就行，該圖標在作畫前是紅色的。

 

 

所有的畫作都會保存在SD卡上，用戶可以找到它們並將其添加到郵件中。

 

由於HTTP 1.0的de限xian製zhi，你ni無wu法fa采cai用yong二er進jin製zhi發fa送song圖tu片pian
，所suo以yi孩hai子zi的de塗tu鴉ya會hui轉zhuan換huan成cheng一yi種zhong特te有you格ge式shi並bing保bao存cun在zai一yi個ge文wen本ben文wen檔dang中zhong
，發fa送song後hou服fu務wu器qi便bian會hui將jiang其qi重zhong新xin轉zhuan換huan為wei圖tu片pian。

 

 

 

為wei了le避bi免mian發fa送song的de圖tu片pian體ti積ji過guo於yu龐pang大da，在zai屏ping幕mu中zhong央yang右you側ce還hai會hui顯xian示shi一yi個ge彩cai色se圖tu標biao，它ta會hui根gen據ju圖tu片pian的de大da小xiao不bu斷duan變bian色se。如ru果guo該gai圖tu標biao變bian紅hong
，就jiu說shuo明ming圖tu片pian體ti積ji已yi達da上shang限xian
，自zi此ciSD卡就不會繼續記錄信息了。最大圖片體積為3K，這對孩子的塗鴉來說絕對足夠了。

 

彩(cai)色(se)圖(tu)標(biao)還(hai)會(hui)充(chong)當(dang)確(que)認(ren)鍵(jian)，畫(hua)圖(tu)完(wan)成(cheng)時(shi)你(ni)需(xu)要(yao)點(dian)擊(ji)它(ta)進(jin)行(xing)確(que)認(ren)。隨(sui)後(hou)彩(cai)虹(hong)圖(tu)標(biao)就(jiu)會(hui)顯(xian)現(xian)出(chu)來(lai)
，這(zhe)時(shi)你(ni)就(jiu)可(ke)以(yi)將(jiang)圖(tu)片(pian)添(tian)加(jia)進(jin)郵(you)件(jian)了(le)。如(ru)果(guo)你(ni)暫(zan)時(shi)不(bu)想(xiang)發(fa)送(song)，該(gai)圖(tu)片(pian)會(hui)被(bei)保(bao)存(cun)在(zai)SD中，隨後你可以通過圖片瀏覽器回看這些圖片。

 

 

 

發郵件也很簡單，隻要點擊信封圖標，就可以發出一封郵件（原始郵件是HTTP Get請求，隨後會轉換為可讀郵件）。如果係統工作正常，發送狀態欄會呈綠色，若WiFi連接出現問題
，狀態欄則會變成紅色。

 

 

HTTP Get請求包含了許多服務器端的郵件信息，包括用戶的姓名和收件人的姓名。而PHP腳本則會收到一條包含請求和配置值的信息。當然，我們必須在PHP腳本上傳到服務器前搞定這些設置，這樣郵件係統才能正常工作。

 

 

下麵是PHP腳本中很有趣的一部分：

 

/*****************************************/

 

/* 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 = '''''''';

 

if( strcmp($send_mail_to, "Papa") == 0 )

 

$to = '''''''';

 

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'''' . "rn" .

 

''''Reply-To: '''' . $send_mail_from . ''''@your_domain.com'''' . "rn" .

 

''''X-Mailer: PHP/'''' . phpversion();

 

你隻需要將我的發件人Mama，Papa等改成你想要的名字就好。

 

 

.. etc

 

此外你還可以修改郵箱地址。

 

PHP腳本需要獲知是否收件人已經通過PC，手機或Mailduino收到了郵件。隻有這樣，它才能決定是否執行對圖片的轉換工作
，以便收件人在不同的設備上看到正常的圖片（普通設備會轉換為JPG，Mailduino則會直接讀取.c格式的文檔）。所以
，請將PHP變量$handy_light設為true或false（應對不同的收信設備）。

 

 

 

想(xiang)閱(yue)讀(du)郵(you)件(jian)的(de)話(hua)，你(ni)需(xu)要(yao)點(dian)擊(ji)卡(ka)車(che)圖(tu)標(biao)，這(zhe)樣(yang)就(jiu)能(neng)進(jin)入(ru)郵(you)件(jian)界(jie)麵(mian)了(le)。不(bu)過(guo)屏(ping)幕(mu)上(shang)隻(zhi)會(hui)顯(xian)示(shi)最(zui)近(jin)的(de)四(si)封(feng)郵(you)件(jian)，所(suo)有(you)收(shou)到(dao)的(de)郵(you)件(jian)都(dou)保(bao)存(cun)在(zai)郵(you)箱(xiang)文(wen)檔(dang)裏(li)。該(gai)設(she)備(bei)無(wu)法(fa)讀(du)取(qu)采(cai)用(yong)HTML代碼的郵件
，所以在正式使用前我推薦你先在PC上做下測試，將設定改為“僅文本”。

 

想xiang要yao看kan看kan是shi否fou收shou到dao了le新xin郵you件jian？很hen簡jian單dan，隻zhi需xu點dian擊ji主zhu界jie麵mian上shang部bu的de卡ka車che圖tu標biao就jiu好hao。隻zhi要yao用yong戶hu在zai兩liang分fen鍾zhong內nei沒mei有you活huo動dong，係xi統tong就jiu會hui自zi動dong檢jian查zha並bing下xia載zai新xin郵you件jian。在zai整zheng個ge過guo程cheng中zhong，開kai發fa板ban會hui發fa送song一yi個geHTTP Get請求，隨後PHP腳本便會開始檢查新郵件，所有新郵件都會以較為簡單的格式回傳到Arduino開發板。如果收到了新郵件，界麵右下方就會出現一個藍色的M圖標來提醒你。

 

在郵件域中
，標準文本呈白色，發送人地址則為紅色。為了保證發送域包含一個已知人的標識符，屏幕上會顯示發送人的頭像。

 

如果郵件內含有圖片，那麼收到的郵件會包含圖片的名字，Arduino會通過HTTP Get再(zai)次(ci)向(xiang)服(fu)務(wu)器(qi)發(fa)起(qi)請(qing)求(qiu)，這(zhe)時(shi)設(she)備(bei)就(jiu)會(hui)開(kai)始(shi)新(xin)的(de)下(xia)載(zai)，你(ni)就(jiu)能(neng)看(kan)到(dao)原(yuan)始(shi)的(de)全(quan)像(xiang)素(su)圖(tu)片(pian)了(le)。此(ci)外(wai)，你(ni)可(ke)以(yi)通(tong)過(guo)接(jie)收(shou)狀(zhuang)態(tai)欄(lan)來(lai)了(le)解(jie)下(xia)載(zai)的(de)狀(zhuang)態(tai)。

 

如果郵件內含有圖片，你會在郵件域的右邊看到一片彩虹
，點擊它就能打開圖片。

 

 

如果你想隨時查看賬戶，服務器端也有些設置需要改變。來自Arduino的HTTP Get請求包含了賬戶的名字，這些會保存在一個名為$get_mails_for的變量PHP腳本中。請參考下列代碼並修改你想查看的郵件地址和密碼。

 

/*****************************************/

 

/* 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 PHPn";

 

$inbox = imap_open ("{". $MAIL_HOST . ":143}INBOX", $USER_NAME, $USER_PASS) or die("Can''''t connect IMAP-Server!");

 

 

 

用戶的所有畫作都會存儲在SD卡上，隻要點擊時鍾圖標左邊的圖標就可進入圖片瀏覽模式，圖片瀏覽器中的圖片會按名字呈九宮格排列。

 

 

想要看原始大小的圖片

，你隻需點擊它就行。看完之後
，隨便點擊以下圖片就能回到剛剛的瀏覽界麵。

 

如上圖所示
，手型圖標可以讓你進入下一頁。

 

確認圖標則可以讓你回到主界麵。

 

 

 

想要激活該設備的時鍾功能，你需要先對你的DS1307時鍾模塊進行設置。隻需加載下列Arduino Sketch並調好時間就行（記得用unix格式）：

 

/* T(string_utctime) */

 

#include

 

#include

 

#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;

 

}

 

設定好你的DS1307後

，隻需點擊主界麵上的時鍾圖標就可以用該設備查看當前時間了。

 

一個DIY的兒童電腦就完成啦
，大家快試試吧！

 

推薦閱讀：