如果你家有小孩，一定能懂我做這個(gè)項(xiàng)目的初衷。我們每天都會(huì)玩著手機(jī)，敲著鍵盤跟朋友聊天，小孩子看見(jiàn)了就想模仿，但出于保護(hù)眼睛等一系列考慮，我們又不能讓他們過(guò)早的接觸電子設(shè)備。所以我就想到，能不能做一個(gè)小玩意讓他們也嘗試著學(xué)習(xí)閱讀和書寫呢？不過(guò)項(xiàng)目剛開(kāi)始時(shí)確實(shí)挺困難，所以我又不斷添加新功能以保持它對(duì)孩子的吸引力。

在開(kāi)始寫教程之前，我想感謝http://www.rinkydinkelectronics.com，我從上面汲取了很多營(yíng)養(yǎng)，從各種庫(kù)到代碼，有了它們我才能玩轉(zhuǎn)這塊TFT觸摸屏。

所需零配件：

·Arduino Mega 2560開(kāi)發(fā)板。

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

·一張SD卡，用來(lái)保存孩子的涂鴉。

·ESP8266 WiFi模塊，以便設(shè)備連接互聯(lián)網(wǎng)。

·DS1703時(shí)鐘模塊。

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

·一個(gè)漂亮的殼子

·設(shè)定好一個(gè)互聯(lián)網(wǎng)接入點(diǎn)，這樣即使你不在家也可連上熱點(diǎn)使用設(shè)備。

·在服務(wù)器上創(chuàng)建一個(gè)隨時(shí)能通過(guò)PHP訪問(wèn)的數(shù)據(jù)庫(kù)。

·為不同的孩子創(chuàng)建不同的電郵地址。

第一步：連接硬件

由于屏幕和外殼占據(jù)了Mega 2560的所有接口，所以我不得不在Mega開(kāi)發(fā)板兩邊又焊接了幾個(gè)接口，雖然看起來(lái)丑了點(diǎn)，但至少管用了。這樣我們準(zhǔn)備的 DS1703和ESP8266模塊，甚至電池都可以順利連接了。

說(shuō)到ESP8266 WiFi模塊，這次我算是走了狗屎運(yùn)，連接時(shí)我直接將ESP8266模塊的RX和TX接口連上了Mega開(kāi)發(fā)板上的TX和RX接口，幸運(yùn)的是，它居然運(yùn)行無(wú)誤。其實(shí)這不是正確的連接方法，我推薦你們還是參考下下面這個(gè)網(wǎng)頁(yè)的連接方法吧：

隨后你就可以將觸摸屏連上Mega開(kāi)發(fā)板并套上保護(hù)殼了。對(duì)了，別忘了插入準(zhǔn)備好的SD卡。

第二步：載入軟件

想要運(yùn)行該設(shè)備，你需要兩個(gè)軟件組件。第一個(gè)是Arduino Sketch，第二個(gè)則是運(yùn)行在你服務(wù)器上的PHP腳本和來(lái)自Arduino的HTTP Get請(qǐng)求。ESP8266上使用的HTTP 1.0協(xié)議有些過(guò)時(shí)，用起來(lái)有些不舒服，你只能通過(guò)它發(fā)送HTTP Get請(qǐng)求和HTTP Post請(qǐng)求。所以你需要將來(lái)自Arduino的HTTP Get請(qǐng)求轉(zhuǎn)換成STMP（簡(jiǎn)單電子郵件協(xié)議）或其他格式，而這正是PHP腳本的一部分。

Arduino

在Arduino 1.5.6 beta上，該Sketch的運(yùn)行和測(cè)試都進(jìn)行的很順利，但升級(jí)到最新的1.6.0就不行了（出現(xiàn)了TFT校準(zhǔn)錯(cuò)誤）。所以在你加載這個(gè)Sketch之前，請(qǐng)對(duì)其進(jìn)行編輯并根據(jù)你的互聯(lián)網(wǎng)接入點(diǎn)設(shè)置相應(yīng)參數(shù)。下面是范例：

#define DEST_HOST “www.your_own_host.de”

#define SSID_HOME “FritzBoxHOME”

#define PASS_HOME “ABCDEFGHIJKLMNOPQRSTUVWXYZ”

記住，DEST_HOST并不是你在服務(wù)器上的IP地址，所以你的PHP腳本不會(huì)在那里運(yùn)行。在你的根目錄里，Sketch會(huì)建立一個(gè)名為“Scripts”的文件夾，而你的PHP腳本最終會(huì)上傳到這里。

SSID_HOME 和PASS_HOME則是互聯(lián)網(wǎng)接入點(diǎn)的設(shè)置。想要通過(guò)路由器上網(wǎng)（我用的是德國(guó)的Fritz Box路由），你就要進(jìn)入路由器設(shè)置中心對(duì)其進(jìn)行配置。想使用移動(dòng)熱點(diǎn)的話，你就要進(jìn)入設(shè)置-》更多設(shè)置-》WLAN熱點(diǎn)-》移動(dòng)熱點(diǎn)對(duì)其進(jìn)行配置（安卓系統(tǒng)）。

下載了Sketch之后記得先閱讀詳細(xì)步驟并做出正確的配置調(diào)整。如果一切運(yùn)行正常，在加載了Sketch之后，你就會(huì)看到主界面，上面會(huì)顯示鍵盤，一些圖標(biāo)和WiFi狀態(tài)欄（綠色為已連接，紅色則為斷開(kāi)）。

PHP

PHP腳本在這個(gè)項(xiàng)目中起了很重要的作用，它是Arduino開(kāi)發(fā)板和SMPT服務(wù)器之間的接口，你可以通過(guò)它收發(fā)郵件。它可以將開(kāi)發(fā)板上反饋來(lái)的HTTP Get請(qǐng)求轉(zhuǎn)換成相應(yīng)的動(dòng)作，完成閱讀郵件，發(fā)送郵件和圖片等工作。

第三步：使用應(yīng)用程序：用戶和郵件設(shè)置

用戶

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

創(chuàng)建三個(gè)用戶時(shí)可使用下列代碼（三個(gè)用戶分別為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};

你在創(chuàng)建用戶時(shí)只需修改用戶名和圖片就行了，其他代碼完全相同。

更換用戶時(shí)，你只需點(diǎn)擊Logged User圖標(biāo)并選擇要使用的用戶就好。登陸的用戶可以發(fā)送郵件或閱讀收到的郵件，每個(gè)用戶在SD卡的根目錄上都會(huì)有自己專用的信箱文檔，你的郵件和郵件中的附圖都會(huì)保存在這里。未來(lái)，我想讓該設(shè)備能定期掃描郵箱并下載郵件供用戶閱讀。

設(shè)定郵件發(fā)送人和收件人

選擇好用戶后，HTTP Get請(qǐng)求就會(huì)記錄用戶的相關(guān)信息，隨后便會(huì)在服務(wù)器上生成用戶的郵件地址。

想要改變收件人，只需點(diǎn)擊Mail To圖標(biāo)并在其中進(jìn)行選擇就好。與上一步相同，設(shè)備會(huì)記錄收件人的相關(guān)信息，然后通過(guò)PHP轉(zhuǎn)換出正確的郵件地址。

更多詳細(xì)信息請(qǐng)參閱第六步：發(fā)送郵件。

第四步：使用應(yīng)用程序：涂鴉

想要畫畫，點(diǎn)擊彩虹圖標(biāo)就行，該圖標(biāo)在作畫前是紅色的。

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

由于HTTP 1.0的限制，你無(wú)法采用二進(jìn)制發(fā)送圖片，所以孩子的涂鴉會(huì)轉(zhuǎn)換成一種特有格式并保存在一個(gè)文本文檔中，發(fā)送后服務(wù)器便會(huì)將其重新轉(zhuǎn)換為圖片。

為了避免發(fā)送的圖片體積過(guò)于龐大，在屏幕中央右側(cè)還會(huì)顯示一個(gè)彩色圖標(biāo)，它會(huì)根據(jù)圖片的大小不斷變色。如果該圖標(biāo)變紅，就說(shuō)明圖片體積已達(dá)上限，自此SD卡就不會(huì)繼續(xù)記錄信息了。最大圖片體積為3K，這對(duì)孩子的涂鴉來(lái)說(shuō)絕對(duì)足夠了。

彩色圖標(biāo)還會(huì)充當(dāng)確認(rèn)鍵，畫圖完成時(shí)你需要點(diǎn)擊它進(jìn)行確認(rèn)。隨后彩虹圖標(biāo)就會(huì)顯現(xiàn)出來(lái)，這時(shí)你就可以將圖片添加進(jìn)郵件了。如果你暫時(shí)不想發(fā)送，該圖片會(huì)被保存在SD中，隨后你可以通過(guò)圖片瀏覽器回看這些圖片。

第五步：使用應(yīng)用程序：發(fā)送郵件

發(fā)郵件也很簡(jiǎn)單，只要點(diǎn)擊信封圖標(biāo)，就可以發(fā)出一封郵件（原始郵件是HTTP Get請(qǐng)求，隨后會(huì)轉(zhuǎn)換為可讀郵件）。如果系統(tǒng)工作正常，發(fā)送狀態(tài)欄會(huì)呈綠色，若WiFi連接出現(xiàn)問(wèn)題，狀態(tài)欄則會(huì)變成紅色。

HTTP Get請(qǐng)求包含了許多服務(wù)器端的郵件信息，包括用戶的姓名和收件人的姓名。而PHP腳本則會(huì)收到一條包含請(qǐng)求和配置值的信息。當(dāng)然，我們必須在PHP腳本上傳到服務(wù)器前搞定這些設(shè)置，這樣郵件系統(tǒng)才能正常工作。

下面是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 = ‘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’ 。 “ ” 。

‘Reply-To： ’ 。 $send_mail_from 。 ‘@your_domain.com’ 。 “ ” 。

‘X-Mailer： PHP/’ 。 phpversion（）;

你只需要將我的發(fā)件人Mama，Papa等改成你想要的名字就好。

mama@your_domain.com

papa@your_domain.com.。 etc

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

PHP 腳本需要獲知是否收件人已經(jīng)通過(guò)PC，手機(jī)或Mailduino收到了郵件。只有這樣，它才能決定是否執(zhí)行對(duì)圖片的轉(zhuǎn)換工作，以便收件人在不同的設(shè)備上看到正常的圖片（普通設(shè)備會(huì)轉(zhuǎn)換為JPG，Mailduino則會(huì)直接讀取.c格式的文檔）。所以，請(qǐng)將PHP變量$handy_light設(shè)為true或 false（應(yīng)對(duì)不同的收信設(shè)備）。

第六步：使用應(yīng)用程序：接收郵件

想閱讀郵件的話，你需要點(diǎn)擊卡車圖標(biāo)，這樣就能進(jìn)入郵件界面了。不過(guò)屏幕上只會(huì)顯示最近的四封郵件，所有收到的郵件都保存在郵箱文檔里。該設(shè)備無(wú)法讀取采用HTML代碼的郵件，所以在正式使用前我推薦你先在PC上做下測(cè)試，將設(shè)定改為“僅文本”。

想要看看是否收到了新郵件？很簡(jiǎn)單，只需點(diǎn)擊主界面上部的卡車圖標(biāo)就好。只要用戶在兩分鐘內(nèi)沒(méi)有活動(dòng)，系統(tǒng)就會(huì)自動(dòng)檢查并下載新郵件。在整個(gè)過(guò)程中，開(kāi)發(fā)板會(huì)發(fā)送一個(gè)HTTP Get請(qǐng)求，隨后PHP腳本便會(huì)開(kāi)始檢查新郵件，所有新郵件都會(huì)以較為簡(jiǎn)單的格式回傳到Arduino開(kāi)發(fā)板。如果收到了新郵件，界面右下方就會(huì)出現(xiàn)一個(gè)藍(lán)色的M圖標(biāo)來(lái)提醒你。

在郵件域中，標(biāo)準(zhǔn)文本呈白色，發(fā)送人地址則為紅色。為了保證發(fā)送域包含一個(gè)已知人的標(biāo)識(shí)符，屏幕上會(huì)顯示發(fā)送人的頭像。

如果郵件內(nèi)含有圖片，那么收到的郵件會(huì)包含圖片的名字，Arduino會(huì)通過(guò)HTTP Get再次向服務(wù)器發(fā)起請(qǐng)求，這時(shí)設(shè)備就會(huì)開(kāi)始新的下載，你就能看到原始的全像素圖片了。此外，你可以通過(guò)接收狀態(tài)欄來(lái)了解下載的狀態(tài)。

如果郵件內(nèi)含有圖片，你會(huì)在郵件域的右邊看到一片彩虹，點(diǎn)擊它就能打開(kāi)圖片。

PHP配置

如果你想隨時(shí)查看賬戶，服務(wù)器端也有些設(shè)置需要改變。來(lái)自Arduino的HTTP Get請(qǐng)求包含了賬戶的名字，這些會(huì)保存在一個(gè)名為$get_mails_for的變量PHP腳本中。請(qǐng)參考下列代碼并修改你想查看的郵件地址和密碼。

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

/* 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 ”;

$inbox = imap_open （“{”。 $MAIL_HOST 。 “：143}INBOX”， $USER_NAME， $USER_PASS） or die（“Can‘t connect IMAP-Server！”）;

第七步：使用應(yīng)用程序：圖片瀏覽器

用戶的所有畫作都會(huì)存儲(chǔ)在SD卡上，只要點(diǎn)擊時(shí)鐘圖標(biāo)左邊的圖標(biāo)就可進(jìn)入圖片瀏覽模式，圖片瀏覽器中的圖片會(huì)按名字呈九宮格排列。

想要看原始大小的圖片，你只需點(diǎn)擊它就行?？赐曛?，隨便點(diǎn)擊以下圖片就能回到剛剛的瀏覽界面。

如上圖所示，手型圖標(biāo)可以讓你進(jìn)入下一頁(yè)。

確認(rèn)圖標(biāo)則可以讓你回到主界面。

第八步：時(shí)鐘界面

想要激活該設(shè)備的時(shí)鐘功能，你需要先對(duì)你的DS1307時(shí)鐘模塊進(jìn)行設(shè)置。只需加載下列Arduino Sketch并調(diào)好時(shí)間就行（記得用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;

}

設(shè)定好你的DS1307后，只需點(diǎn)擊主界面上的時(shí)鐘圖標(biāo)就可以用該設(shè)備查看當(dāng)前時(shí)間了。

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