帶有ILI9341的2.4英寸LCD顯示屏的留言板

描述

描述

你知道這個問題嗎，你已經(jīng)做飯了，你想讓所有的家人都來吃飯，但是沒有人對你的電話有反應(yīng)，第三次在整個房子里大喊大叫后沒有任何反應(yīng)你就走了（有點生氣，食物同時燒焦或變冷）在樓上發(fā)現(xiàn)您的孩子戴著耳機在畫畫？

這個項目是我對這個問題的回答！也許它會在類似的情況下幫助你。

問題

喊叫作為溝通方式并不總是最有效的解決方案。

解決方案

理念

因為我女兒最喜歡聽不見周圍的聲音，所以我想創(chuàng)建一個留言板，有很多閃爍的燈光來引起我女兒的注意，讓她閱讀上面的信息。留言板也應(yīng)該有不同類型的消息，這樣我的女兒就可以區(qū)分她是必須立即做出反應(yīng)還是有不著急的任務(wù)。這應(yīng)該是一種尊重我孩子隱私的方式，也應(yīng)該讓他了解不同的話題。此外，董事會應(yīng)該有可能做出回應(yīng)。

因為我不希望我的女兒擁有自己的智能手機并且我想聯(lián)系她，如果她在她的房間里，我認(rèn)為固定留言板是正確的解決方案。我和我的妻子需要一個我們可以在整個房子里使用的對應(yīng)物。在這種情況下，Android 應(yīng)用程序是正確的決定。

組件

為了實現(xiàn)前面描述的想法，我需要很多不同的組件來顯示一些消息，有燈光和聲音來吸引我女兒的注意力，還有按鈕來獲得一些響應(yīng)。

顯示器

為了顯示時間、消息和響應(yīng)文本等信息，我將使用帶有連接模塊ILI9341的 2.4 英寸 LCD 顯示屏。

燈光

為了引起我女兒的注意，我將使用 NeoPixel LED 環(huán)。除了閃爍功能，我將使用它來制作時鐘。

壓電蜂鳴器

為了在我女兒聽不到音樂的情況下發(fā)出聲音，我會使用壓電蜂鳴器。

按鈕

使用該按鈕，我們可以在主視圖和響應(yīng)視圖之間切換顯示屏上的屏幕。

留言板應(yīng)用程序

在下一節(jié)中，我將介紹在ESP32上實現(xiàn)留言板所需的所有功能。

MQTT 連接

要在留言板和 android 應(yīng)用程序之間進(jìn)行通信，我需要在ESP32上設(shè)置 wifi 連接。作為通信協(xié)議，我將使用MQTT 。如何設(shè)置MQTT 代理請查看我的項目 my_smarthome#1。我還將my_smarthome#1項目中的相同代碼用于ESP32上的MQTT連接。此外，我使用NTP客戶端來獲得正確的時間。

為了通過MQTT接收一些數(shù)據(jù)，我們需要定義一個回調(diào)函數(shù)。使用這個函數(shù)，我們獲取主題和有效負(fù)載并將它們保存在全局變量中，以便在主程序中使用它們。

為了通過MQTT發(fā)送一些數(shù)據(jù)，我們需要定義一個名為sendMQTTMessage() 的發(fā)布者函數(shù)。此函數(shù)獲取響應(yīng)文本并將其通過固定主題發(fā)送到遠(yuǎn)程設(shè)備。

時鐘

為了在留言板上實現(xiàn)數(shù)字時鐘，我編寫了一些函數(shù)來獲取所需格式的時間。

在getTime()函數(shù)中，我以ISO 8601之后的格式從NTP服務(wù)器獲取時間作為字符串。

要將 LED 環(huán)用作時鐘，我需要將小時和分鐘分開。為此，我編寫了getHours()和getMinutes()函數(shù)。

LED環(huán)

為了在留言板上引起注意，我們讓 LED 環(huán)以不同的顏色閃爍。通過blink()函數(shù)，我們可以輕松地使 LED 高頻閃爍并改變顏色。

此外，我們使用 LED 環(huán)來實現(xiàn)一種模擬時鐘，我們使用getHours()和getMinutes()函數(shù)來獲取當(dāng)前時間。LED 環(huán)的一個像素將以粉紅色顯示小時，另一個以綠松石色顯示分鐘。如果分鐘和小時指針需要位于同一像素上，則會顯示兩種顏色的組合。

如果有新消息到達(dá)，將調(diào)用ringAlarm ()函數(shù)。在這種情況下，LED 環(huán)將以不同的顏色逐個像素閃爍。以便將注意力吸引到留言板。

按鈕

為了在單擊按鈕后獲得快速反應(yīng)，我們定義了一些中斷服務(wù)例程(ISR)。ISR 應(yīng)該總是非?？?，因為主程序和其他較低的先前 ISR 將被中斷或阻止該過程。這就是為什么我們總是通過IRAM_ATTR定義將此函數(shù)加載到 RAM 中的原因。為了使按鈕去抖動，我們總是檢查自上次中斷消失以來已經(jīng)過去了多少毫秒。如果超過 200 毫秒，我們將運行 ISR。

顯示器

顯示屏是留言板的核心。在這里，我們將看到新消息到達(dá)、一個數(shù)字時鐘和一個用于選擇響應(yīng)文本的屏幕。為了智能使用固定在留言板上的顯示功能，我定義了很多功能。

主屏幕以標(biāo)題文本和數(shù)字時鐘為主。為了實現(xiàn)這一點，我定義了headerText()和clockText()函數(shù)。如果有消息到達(dá)，主屏幕將會改變。首先，根據(jù)消息的主題，顯示屏將閃爍紅色、黃色或綠色。這里我定義了三種：

• 緊急（紅色）
• 任務(wù)（黃色）
• 信息（綠色）

之后，消息文本將顯示在屏幕上。為此，我編寫了alarm() 、task() 、information()和messageText()函數(shù)。前三個幾乎相同，只是屏幕的顏色發(fā)生了變化。報警功能還有一個特點，就是壓電蜂鳴器會發(fā)出蜂鳴聲。

單擊黃色按鈕后將顯示響應(yīng)屏幕。在這里，我們可以看到一些要回答的默認(rèn)文本。

?

這是通過responseScreen()函數(shù)實現(xiàn)的。

通過單擊綠色按鈕，我們將更改下一個文本文件的課程。這以橙色矩形顯示給用戶。矩形將由drawChooseBox()函數(shù)繪制。

設(shè)置

現(xiàn)在我們必須設(shè)置所有組件。在這里，我們點亮 LED 環(huán)為用戶提供光學(xué)反饋，然后我們將連接到 wifi，設(shè)置 MQTT、NTP 連接，啟動顯示并打印“正在啟動..”。比我們必須為按鈕和壓電蜂鳴器設(shè)置數(shù)字引腳。

主循環(huán)

現(xiàn)在我們必須定義程序的邏輯。在這里，我們必須將我們之前定義的所有小程序部分組合成一個邏輯過程。

在第一部分中，我們開始通信并顯示帶有時鐘的主屏幕，并定義如果消息到達(dá)特定主題時會發(fā)生什么。例如，您可以看到，如果有緊急消息到達(dá)，我們會調(diào)用alarm()函數(shù)。報警后，我們將顯示標(biāo)題文本、消息文本和時鐘。

在第二部分中，我們定義如果按下黃色按鈕會發(fā)生什么。首先，我們將切換到響應(yīng)屏幕。選擇第一個文本。

如果按下綠色按鈕，則計數(shù)器將增加，并且依賴于計數(shù)器，將選擇另一個文本。如果計數(shù)器大于 5，計數(shù)器將被重置為零。所以選擇框會再次跳轉(zhuǎn)到第一個文本。

如果再次按下黃色按鈕，視圖將跳回主屏幕。如果計數(shù)器介于 0 和 4 之間，則留言板將發(fā)送相應(yīng)的消息，如果大于 4，則屏幕將跳回而不發(fā)送消息。

安卓應(yīng)用

要將消息發(fā)送到留言板，我想使用一個 android 應(yīng)用程序。這是我編寫的第一個 android 應(yīng)用程序，所以如果您發(fā)現(xiàn)一些需要改進(jìn)的地方，請告訴我 :)。

為了讓每個人都能本能地使用用戶界面，我搜索了一個消息框架，它實現(xiàn)了像 WhatsApp 或 Instagram（UX）這樣的 UI。為此，我找到了 stfalcon-studio/ChatKit，這是一個用于快速實現(xiàn)聊天的優(yōu)秀庫。

首先，我們將在Android Studio中創(chuàng)建一個新項目并選擇一個Basic Activity作為模板。

現(xiàn)在 Android Studio 將為我們創(chuàng)建一個項目結(jié)構(gòu)。你會發(fā)現(xiàn)很多實現(xiàn)MVC 模式的默認(rèn)文件。

活動在這里是應(yīng)用程序的一種入口點，在其他上下文中將是主要的。在移動應(yīng)用程序中，您并不總是具有相同的入口點，因為應(yīng)用程序可以從另一個應(yīng)用程序，在另一個活動中啟動。在我們的例子中，我們只需要一項活動。

在布局文件夾中，您將找到一些定義應(yīng)用程序視圖的 xml 文件。在 Android Studio 中，您可以在代碼或設(shè)計上下文中更改此文件。

AndriodManifest.xml定義有關(guān)您的應(yīng)用程序的基本信息。例如，您的應(yīng)用程序需要正確運行的權(quán)限。在我們的例子中，我們需要 INTERNET、ACCESS_NETWORK_STATE、WAKE_LOCK 和 READ_PHONE_STATE 權(quán)限。

在build.gradle文件中，您為構(gòu)建過程定義應(yīng)用程序的依賴項。這里我們需要包含paho和ChatKit框架。

現(xiàn)在讓我們開始開發(fā)應(yīng)用程序。一開始我們可以設(shè)計應(yīng)用程序的 UI。為此，在布局上單擊鼠標(biāo)右鍵，然后按New->Fragment->Fragment(Blank)。并將其命名為 message_fragment.xml。

要使用 C hatKit框架，請將以下小部件包含到您的message_fragment.xml中。

   android:id="@+id/messagesList"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_above="@+id/input" />

現(xiàn)在單擊“設(shè)計”按鈕并查看您的工作。

現(xiàn)在我們有了應(yīng)用程序的基本結(jié)構(gòu)。但是因為我們想通過MQTT發(fā)送消息，所以我們需要一個主題。因為留言板只對三個主題做出反應(yīng)，我們將通過單選按鈕實現(xiàn)選擇，但同時只有一個應(yīng)該處于活動狀態(tài)。為此，我們首先將一個 RadioGroup 拖到視圖中，然后將三個 RadioButton 拖到該組中。

現(xiàn)在將按鈕命名為緊急、任務(wù)和信息，例如我們?yōu)榱粞园宥x的主題。此外，您還必須像文本一樣設(shè)置按鈕的 id。現(xiàn)在轉(zhuǎn)到 xml 文件的代碼視圖。

通過id ，我們可以獲取有關(guān) java 類中按鈕狀態(tài)的信息。此外，我們將定義一個函數(shù)名稱，如果單擊RadioButton將調(diào)用該函數(shù)名稱。為了獲得默認(rèn)值，我們將緊急按鈕設(shè)置為選中：true 。

現(xiàn)在我們可以開始對按鈕的控制器進(jìn)行編程了。首先，我們將在MainActivity.java中定義一個私有靜態(tài)變量 topic 。

并且必須實現(xiàn)onRadioButtonClicked -函數(shù)，如果單擊RadioButton將調(diào)用該函數(shù)。在這里，我們對RadioButton 的id進(jìn)行switch-case 。如果一個案例是真的，我們設(shè)置相應(yīng)的主題。此外，我們定義了一個getTopic函數(shù)來查詢主題。在這里，我們還必須定義在調(diào)用函數(shù)時如果沒有單擊任何按鈕會發(fā)生什么。在我們的例子中，我們在按鈕定義中將默認(rèn)主題設(shè)置為緊急。

在這之后，我們可以關(guān)閉MainActivity.java并開始實現(xiàn)名為MessageFragment.java的message_fragment.xml的控制器。首先我們需要實現(xiàn)MQTT框架paho。一開始我們必須定義一個clientId和一個客戶端來啟動代理和我們的移動設(shè)備之間的連接。

在此之后，我們定義一個啟動連接的函數(shù)。我們稱之為startMQTT()。

在此函數(shù)中，我們將首先定義代理地址和MQTT端口。在這種情況下，我使用我在my_smarthome#1項目中設(shè)置的本地MQTT代理。在這里，您可以閱讀如何在樹莓派上設(shè)置MQTT代理。

然后我們嘗試連接到代理，如果成功，我們會通過祝酒詞向用戶提供簡短的反饋。還將訂閱我們在留言板上實現(xiàn)的響應(yīng)主題。

對于訂閱，我們還需要一個函數(shù)。我們稱之為subscribeMessage()。這里我們必須定義服務(wù)質(zhì)量 (qos)和我們想要訂閱的主題。為了獲得新消息的通知，我們必須設(shè)置一個回調(diào)函數(shù)，如果有新消息到達(dá)，它將調(diào)用onMessage () 函數(shù)。

在onMessage()函數(shù)中，我們必須將到達(dá)的消息轉(zhuǎn)換為String 。我們還需要為ChatKit消息視圖設(shè)置用戶和日期。

要將一些數(shù)據(jù)發(fā)送到留言板，我們還需要定義一個publishMessage()函數(shù)。在此函數(shù)中，我們轉(zhuǎn)換給定的有效負(fù)載并將其發(fā)布到主題上。

實現(xiàn)MQTT功能后，我們可以開始實現(xiàn)ChatKit -Framework。要使用這個庫，我們需要定義一個User和一個Message類。

讓我們從實現(xiàn)IUser接口的User開始。

該類描述了消息用戶的信息，例如用戶id、用戶名和頭像。我們在這種情況下不使用的最后一點，并且在返回 null 時不會在消息視圖中顯示任何內(nèi)容。

Message實現(xiàn)了IMessage接口，描述了消息的信息，如用戶、創(chuàng)建日期、id和內(nèi)容。

現(xiàn)在讓我們在MessageFragmant.java 中實現(xiàn)它。一開始我們必須定義一些對象，這些對象將描述消息流。

首先，我們使用視圖message_fragment.xml實現(xiàn)和鏈接對象。在 onSubmit 函數(shù)中，我們從用戶那里獲取輸入，將其顯示在屏幕上并將其發(fā)送到留言板。

留言板案例

我真的很高興我的大哥作為產(chǎn)品經(jīng)理花了這么多時間為留言板開發(fā)了一個功能強大且設(shè)計精良的案例。