描述

描述

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

這個(gè)項(xiàng)目是我對(duì)這個(gè)問(wèn)題的回答！也許它會(huì)在類似的情況下幫助你。

問(wèn)題

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

解決方案

理念

因?yàn)槲遗畠鹤钕矚g聽(tīng)不見(jiàn)周?chē)穆曇?，所以我想?chuàng)建一個(gè)留言板，有很多閃爍的燈光來(lái)引起我女兒的注意，讓她閱讀上面的信息。留言板也應(yīng)該有不同類型的消息，這樣我的女兒就可以區(qū)分她是必須立即做出反應(yīng)還是有不著急的任務(wù)。這應(yīng)該是一種尊重我孩子隱私的方式，也應(yīng)該讓他了解不同的話題。此外，董事會(huì)應(yīng)該有可能做出回應(yīng)。

因?yàn)槲也幌Ｍ业呐畠簱碛凶约旱?a target='_blank' class='arckwlink_none'>智能手機(jī)并且我想聯(lián)系她，如果她在她的房間里，我認(rèn)為固定留言板是正確的解決方案。我和我的妻子需要一個(gè)我們可以在整個(gè)房子里使用的對(duì)應(yīng)物。在這種情況下，Android 應(yīng)用程序是正確的決定。

組件

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

顯示器

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

燈光

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

壓電蜂鳴器

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

按鈕

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

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

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

MQTT 連接

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

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

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

時(shí)鐘

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

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

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

LED環(huán)

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

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

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

按鈕

為了在單擊按鈕后獲得快速反應(yīng)，我們定義了一些中斷服務(wù)例程(ISR)。ISR 應(yīng)該總是非?？欤?yàn)橹鞒绦蚝推渌^低的先前 ISR 將被中斷或阻止該過(guò)程。這就是為什么我們總是通過(guò)IRAM_ATTR定義將此函數(shù)加載到 RAM 中的原因。為了使按鈕去抖動(dòng)，我們總是檢查自上次中斷消失以來(lái)已經(jīng)過(guò)去了多少毫秒。如果超過(guò) 200 毫秒，我們將運(yùn)行 ISR。

顯示器

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

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

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

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

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

?

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

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

設(shè)置

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

主循環(huán)

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

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

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

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

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

安卓應(yīng)用

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

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

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

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

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

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

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

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

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

要使用 C hatKit框架，請(qǐng)將以下小部件包含到您的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è)計(jì)”按鈕并查看您的工作。

現(xiàn)在我們有了應(yīng)用程序的基本結(jié)構(gòu)。但是因?yàn)槲覀兿胪ㄟ^(guò)MQTT發(fā)送消息，所以我們需要一個(gè)主題。因?yàn)榱粞园逯粚?duì)三個(gè)主題做出反應(yīng)，我們將通過(guò)單選按鈕實(shí)現(xiàn)選擇，但同時(shí)只有一個(gè)應(yīng)該處于活動(dòng)狀態(tài)。為此，我們首先將一個(gè) RadioGroup 拖到視圖中，然后將三個(gè) RadioButton 拖到該組中。

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

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

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

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

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

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

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

然后我們嘗試連接到代理，如果成功，我們會(huì)通過(guò)祝酒詞向用戶提供簡(jiǎn)短的反饋。還將訂閱我們?cè)?/font>留言板上實(shí)現(xiàn)的響應(yīng)主題。

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

訂閱消息（）

?

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

onMessage()

?

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

發(fā)布消息（）

?

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

讓我們從實(shí)現(xiàn)IUser接口的User開(kāi)始。

用戶類

?

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

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

消息類

?

現(xiàn)在讓我們?cè)?/font>MessageFragmant.java 中實(shí)現(xiàn)它。一開(kāi)始我們必須定義一些對(duì)象，這些對(duì)象將描述消息流。

?

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

?

留言板案例

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

?

?