|
如果你家有小孩，一定能懂我做這個項目的初衷。我們每天都會玩著手機，敲著鍵盤跟朋友聊天，小孩子看見了就想模仿，但出于保護眼睛等一系列考慮，我們又不能讓他們過早的接觸電子設備。所以我就想到，能不能做一個小玩意讓他們也嘗試著學習閱讀和書寫呢？不過項目剛開始時確實挺困難，所以我又不斷添加新功能以保持它對孩子的吸引力。 在開始寫教程之前，我想感謝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 在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 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卡的根目錄上都會有自己專用的信箱文檔，你的郵件和郵件中的附圖都會保存在這里。未來，我想讓該設備能定期掃描郵箱并下載郵件供用戶閱讀。 設定郵件發送人和收件人 選擇好用戶后，HTTP Get請求就會記錄用戶的相關信息，隨后便會在服務器上生成用戶的郵件地址。 想要改變收件人，只需點擊Mail To圖標并在其中進行選擇就好。與上一步相同，設備會記錄收件人的相關信息，然后通過PHP轉換出正確的郵件地址。 更多詳細信息請參閱第六步：發送郵件。 第四步：使用應用程序：涂鴉 想要畫畫，點擊彩虹圖標就行，該圖標在作畫前是紅色的。 所有的畫作都會保存在SD卡上，用戶可以找到它們并將其添加到郵件中。 由于HTTP 1.0的限制，你無法采用二進制發送圖片，所以孩子的涂鴉會轉換成一種特有格式并保存在一個文本文檔中，發送后服務器便會將其重新轉換為圖片。 為了避免發送的圖片體積過于龐大，在屏幕中央右側還會顯示一個彩色圖標，它會根據圖片的大小不斷變色。如果該圖標變紅，就說明圖片體積已達上限，自此SD卡就不會繼續記錄信息了。最大圖片體積為3K，這對孩子的涂鴉來說絕對足夠了。 彩色圖標還會充當確認鍵，畫圖完成時你需要點擊它進行確認。隨后彩虹圖標就會顯現出來，這時你就可以將圖片添加進郵件了。如果你暫時不想發送，該圖片會被保存在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 = '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(); 你只需要將我的發件人Mama，Papa等改成你想要的名字就好。 mama@your_domain.com papa@your_domain.com.. etc 此外你還可以修改郵箱地址。 PHP腳本需要獲知是否收件人已經通過PC，手機或Mailduino收到了郵件。只有這樣，它才能決定是否執行對圖片的轉換工作，以便收件人在不同的設備上看到正常的圖片（普通設備會轉換為JPG，Mailduino則會直接讀取.c格式的文檔）。所以，請將PHP變量$handy_light設為true或false（應對不同的收信設備）。 第六步：使用應用程序：接收郵件 想閱讀郵件的話，你需要點擊卡車圖標，這樣就能進入郵件界面了。不過屏幕上只會顯示最近的四封郵件，所有收到的郵件都保存在郵箱文檔里。該設備無法讀取采用HTML代碼的郵件，所以在正式使用前我推薦你先在PC上做下測試，將設定改為“僅文本”。 想要看看是否收到了新郵件？很簡單，只需點擊主界面上部的卡車圖標就好。只要用戶在兩分鐘內沒有活動，系統就會自動檢查并下載新郵件。在整個過程中，開發板會發送一個HTTP Get請求，隨后PHP腳本便會開始檢查新郵件，所有新郵件都會以較為簡單的格式回傳到Arduino開發板。如果收到了新郵件，界面右下方就會出現一個藍色的M圖標來提醒你。 在郵件域中，標準文本呈白色，發送人地址則為紅色。為了保證發送域包含一個已知人的標識符，屏幕上會顯示發送人的頭像。 如果郵件內含有圖片，那么收到的郵件會包含圖片的名字，Arduino會通過HTTP Get再次向服務器發起請求，這時設備就會開始新的下載，你就能看到原始的全像素圖片了。此外，你可以通過接收狀態欄來了解下載的狀態。 如果郵件內含有圖片，你會在郵件域的右邊看到一片彩虹，點擊它就能打開圖片。 PHP配置 如果你想隨時查看賬戶，服務器端也有些設置需要改變。來自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 PHP\n"; $inbox = imap_open ("{". $MAIL_HOST . ":143}INBOX", $USER_NAME, $USER_PASS) or die("Can't connect IMAP-Server!"); 第七步：使用應用程序：圖片瀏覽器 用戶的所有畫作都會存儲在SD卡上，只要點擊時鐘圖標左邊的圖標就可進入圖片瀏覽模式，圖片瀏覽器中的圖片會按名字呈九宮格排列。 想要看原始大小的圖片，你只需點擊它就行�？赐曛螅S便點擊以下圖片就能回到剛剛的瀏覽界面。 如上圖所示，手型圖標可以讓你進入下一頁。 確認圖標則可以讓你回到主界面。 第八步：時鐘界面 想要激活該設備的時鐘功能，你需要先對你的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 = 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 = '0' && c |
