描述

描述

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

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

問題

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

解決方案

理念

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

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

組件

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

顯示器

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

燈光

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

壓電蜂鳴器

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

按鈕

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

留言板應用程序

在下一節中，我將介紹在ESP32上實現留言板所需的所有功能。

MQTT 連接

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

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

為了通過MQTT發送一些數據，我們需要定義一個名為sendMQTTMessage() 的發布者函數。此函數獲取響應文本并將其通過固定主題發送到遠程設備。

時鐘

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

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

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

LED環

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

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

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

按鈕

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

顯示器

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

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

• 緊急（紅色）
• 任務（黃色）
• 信息（綠色）

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

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

?

這是通過responseScreen()函數實現的。

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

設置

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

主循環

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

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

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

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

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

安卓應用

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

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

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

現在 Android Studio 將為我們創建一個項目結構。你會發現很多實現MVC 模式的默認文件。

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

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

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

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

現在讓我們開始開發應用程序。一開始我們可以設計應用程序的 UI。為此，在布局上單擊鼠標右鍵，然后按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" />

現在單擊“設計”按鈕并查看您的工作。

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

現在將按鈕命名為緊急、任務和信息，例如我們為留言板定義的主題。此外，您還必須像文本一樣設置按鈕的 id。現在轉到 xml 文件的代碼視圖。

通過id ，我們可以獲取有關 java 類中按鈕狀態的信息。此外，我們將定義一個函數名稱，如果單擊RadioButton將調用該函數名稱。為了獲得默認值，我們將緊急按鈕設置為選中：true 。

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

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

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

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

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

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

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

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

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

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

讓我們從實現IUser接口的User開始。

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

Message實現了IMessage接口，描述了消息的信息，如用戶、創建日期、id和內容。

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

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

留言板案例

我真的很高興我的大哥作為產品經理花了這么多時間為留言板開發了一個功能強大且設計精良的案例。