我通常使用智能显示器“Google Nest Hub”，但最终我只将它用于喜欢的图像和时钟显示。 . .
我想如果是这样的话，我可以自己制作，所以我使用 Cordova 和 Android 创建了自己的自定义智能显示器。以下简称自定义智能显示器 (CSD)。
首先，在简要说明配置后，我将解释其中使用的基本技术。
作为一个函数，首先会添加以下两个函数，但我想在以后扩展它。
・时间显示
・喜欢的图像的背景显示
- 背景音乐播放
系统配置
配置如下。
・安卓平板电脑
这是运行我们这次将创建的 Cordova 应用程序的 Android 平板电脑。由于它将作为智能显示器安装，我认为它应该更大。就我而言，我使用的是亚马逊 Fire 8 英寸安卓平板电脑。
・BLE扬声器
这不是必需的。我在安卓平板上播放音乐，但如果你担心音质，最好准备一个可以通过BLE/蓝牙连接的外接扬声器。 Google 的智能扬声器 Google Nest Mini 也可以是扬声器。
・树莓派
安排音乐播放和背景图像的内容文件，启动 Node.js 服务器，并与 Android 平板电脑和 ESP32 通信。它总会开始。它不一定是 Raspberry Pi，普通 PC 就可以了。
・ESP32
虽然可以使用 Android 平板电脑的触摸屏进行操作，但我们可以使用红外遥控器进行操作。为了处理红外线，需要一个红外线发射/接收单元，并采用ESP32对其进行控制。就我而言，我使用了 M5StickC。
・红外线发送/接收单元
一种发射和接收红外线的装置。使用 Grove 电缆连接到 ESP32。
・红外线遥控
用于发射红外线的遥控器。它通常以“兼容国内外厂商的电视遥控器”的名义销售。任何红外线代码都可以，所以如果我必须选择一个，我认为最好选择一个带有大按钮的，即使放在桌子上也可以使用。
屏幕结构
背景图片通常显示您喜欢的图片并定期更新。此外，时间和日期显示在左下角。
由于Android有照度传感器，所以会定期测量照度，当周围变暗时，背景图像关闭，背景为黑色，时间和日期显示在屏幕中央。
由于音乐将在后台播放，因此选择要播放的音乐文件的屏幕将通过屏幕点击或红外遥控器的红外传输显示。
使用的技术
・使用科尔多瓦
・使用Vue、Vuex、Bootstrap作为前端
・总是显示
・最大画面显示
・照度测量
・UDP发送/接收
・固定应用程序启动
·音量控制
・音乐播放
・红外线发送/接收
采用科尔多瓦
有一种方法可以将浏览器用作 CSD 应用程序，但正如我稍后将解释的，如果您想一直显示它而不恢复，或者如果您想固定启动应用程序，则无法使用浏览器，并且本机应用程序是合适的。此外，有些东西使用 Android Studio 创建为完全原生的应用程序，但使用 Cordova，使用富有表现力的 HTML 和 Javascript 很容易实现。
参考
Cordova 应用程序开发备忘录
始终显示
在 Android 上，如果您什么都不做，显示屏会关闭。虽然是一个方便的功能，但如果想要一直作为智能显示器显示，还是需要采取措施的。
有一个 Cordova 插件，所以我使用了它。
// 画面常時On
window.powermanagement.acquire();
只需调用上面的。 . .
最大屏幕显示
在浏览器的情况下，地址栏等显示在顶部和底部，这有点像智能显示的方式。
如果是 Cordova 应用程序，它将显示在整个显示屏上，无需任何特殊设置。
照度测量
Android有各种传感器，比如加速度传感器，所以没有理由不使用它们。这一次，我们将使用照度传感器。它被称为 android.sensor.light。
我创建了一个 Cordova 插件来使用照度传感器。
Cordova 应用程序开发备忘录（插件版）
// 照度取得開始
const light_type = "android.sensor.light";
samplesensor.addDevice(light_type);
// 定期的に照度を取得し、背景表示変更
setInterval(async () =>{
const values = await samplesensor.getValue(light_type);
this.background_change_dark(values[0] < BRIGHTNESS_THRESHOLD);
}, BRIGHTNESS_UPDATE_INTERVAL);
UDP传输/接收
我想在 Node.js 服务器和 Pull 和 Push 之间进行双向通信，Pull 使用 HTTP Post (Json)，但是 Push 需要作为服务器启动，所以我很容易使用 UDP 接收。
我还创建了一个 Cordova 插件。
Cordova 应用程序开发备忘录（插件版）
我像这样使用它。
// UDPパケット受信開始
sampleudp.initialize(UDP_LOCAL_PORT);
sampleudp.registerReceiveListener(this.onUdpReceived);
console.log("SampleUdp initialized");
// ・・・
onUdpReceived: async function(data){
console.log("udp received: ", data);
// ・・・
}
应用程序固定启动
大多数现代 Android 允许固定启动应用程序。如果将本次创建的 Cordova 应用设置为固定启动，按返回键不会返回主屏幕，Cordova 应用会一直启动，非常方便。
由于是 Android OS 的标准功能，无需特别开发。
音量控制
从 Cordova 应用程序控制 AndroidOS 的媒体音量。我为此使用了一个插件。
我像这样使用它。
// 音量を上げる
volume_up: function(){
console.log("volume up");
cordova.plugins.VolumeControl.getVolume(volume =>{
volume = parseFloat(volume);
if( volume >= 1.0 - VOLUME_STEP )
volume = 1.0;
else
volume += VOLUME_STEP;
cordova.plugins.VolumeControl.setVolume(volume);
this.volume = volume;
});
},
// 音量を下げる
volume_down: function(){
console.log("volume down");
cordova.plugins.VolumeControl.getVolume(volume =>{
volume = parseFloat(volume);
if( volume <= VOLUME_STEP )
volume = 0.0;
else
volume -= VOLUME_STEP;
cordova.plugins.VolumeControl.setVolume(volume);
this.volume = volume;
});
音乐播放
这是 Cordova 的标准功能。使用以下插件。
我像这样使用它。
this.media = new Media(this.play_item, () =>{
// 再生完了
}, (err) =>{
// エラー発生
});
this.media.play();
红外线传输/接收
对于红外传输和接收，我们依靠 ESP32 来帮助。
它可以通过 UDP 与 Node.js 服务器进行双向通信，当 ESP32 附带的红外发射/接收单元检测到红外信号时，它会通过 UDP 数据包通知 Node.js 服务器。此外，如果您想发送红外信号，请通过从 Node.js 服务器向 ESP32 发送 UDP 数据包来告知它。
使用的 Cordova 插件列表
・cordova-plugin-device
・cordova-plugin-media
・cordova-plugin-networkinterface
・cordova-plugin-powermanagement
・cordova-plugin-samplesensor（自制）
・cordova-plugin-sampleudp（自制）
・cordova-plugin-volume-control
在最后
目前，我们正在制作一本介绍这种定制智能显示器（CSD）的介绍材料和定制方法的书。 . .
暂且把源码集上传到下面的GitHub。
细节在书中。 . .
就这样
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308633159.html