uniapp develops Android TV — smart toilet big screen (1)

Recently, the company intends to expand its business and do a smart toilet project, which involves monitoring large screens and sensors; I am responsible for large screen drawing and data reception. At present, part of the project has been completed, so take this opportunity to make a stage summary.
This article mainly explains some ideas of the project and uses uniapp to realize the display and adaptation of the large screen.

Tools and techniques used

1. uniapp + native plug-in development
2. Android tablet or TV
3. AxureRP9

Overall structure:

This development is carried out using uniapp. The native plug-in encapsulates the TCP service. The specific plug-in development process can be found in uniapp development of Android native plug-ins , which is not the focus of this section.

1. Draw the design draft according to the toilet layout

The user provides the layout drawings to be developed and designed, and then draws the design draft through AxureRP9.
Through the design draft, we can accurately know the x and y corresponding to each element when drawing a large screen later, which can help us draw a large screen faster.
e.g. drawing
e.g. final effect

2. Perform front-end layout according to the design draft

2.1 Canvas draws large screen pages

During the development process, canvas is used to draw the layout of the central toilet, which are basically not the same, so custom development is required. The sides, the head, and the top can be drawn in the normal way, which is also faster to write. During the development process, each toilet belongs to an independent page. In order to facilitate subsequent development, we extract the logic of the canvas part separately.

canvasThe main APIs used

// 获取 canvas画布
ctx = uni.createCanvasContext('toilet1Canvas');

/**
 * 绘制 可以使用/正在使用图标
 */
async function drawUseIcon() {
    let {
            path: successImgUrl
    } = await getImageInfo(successImg);
    let {
            path: errorImgUrl
    } = await getImageInfo(errorImg);

    ctx.drawImage(successImgUrl, 645, 25, 140, 30);
    ctx.drawImage(errorImgUrl, 805, 25, 140, 30);
    ctx.draw(true);

    // 绘制文字
    ctx.setFontSize(16);
    ctx.setFillStyle('#ffffff');
    ctx.fillText('可以使用', 710, 45);
    ctx.fillText('正在使用', 870, 45);
    ctx.draw(true);
}

// 绘制线条
ctx.beginPath();
ctx.setLineWidth(10);
ctx.strokeStyle = "#1e7bf2";
ctx.moveTo(0, 79);
ctx.lineTo(1035, 79);

ctx.closePath();
ctx.stroke();
        

2.2 Adapt to the large screen page

In fact, during the development process, large-screen page drawing and canvas drawing will not cause too much hindrance. Search the Internet to find the canvas api, and you can complete the drawing according to your needs.
A little bit cumbersome is to adapt the page designed for development:

1. The final project will be applied to Android TV, the specific model is undecided
2. The size ratio of the current design draft is not necessarily consistent with the TV
3. 在开发的过程中采用的是浏览器、平板进行的测试，怎样让完成适配的页面，无论什么环境设备下都能合理的展示呢

我所经历过与适配相关的也就是 rem、rpx 或者 通过一些三方适配插件进行，但是这些都不适合当下的场景，因为它不仅仅有文字还有 canvas。
最终，我想到了 —— scale，直接对当前页面W、H 进行缩放不就可以了吗。
针对问题三：如果当前设备的比例与设计稿的比例不一致，那么按设计稿比例进行缩放，根据设备W、H 与 设计稿进行比较，等比占满其中的一项；然后使用一个合适的背景图，那不就满足了嘛！！

备注：

1. 在后续的实际开发中，还发现了个问题：我们需要将适配后的页面，居于当前设备屏幕的中心，因此我们还需要设置一下原点transformOrigin；
2. 屏幕的分辨率与尺寸是没关系的，在实际测试中通过uni.getSystemInfo 获取的windowWidth windowHeight，在 TV 中并不一定会比你使用的 电脑显示器大。

以下适配方法的代码，大家可以进行参考：
页面的设计稿：1920 * 969；

/**
 * 处理当前 页面视图的适配
 * 用于适配 不同大小的 TV
 */
function viewAdaptive() {
    // 获取当前视图大小
    return new Promise((resolve, reject) => {
        uni.getSystemInfo({
            success: (res) => {
                let {
                    windowWidth,
                    windowHeight
                } = res;
                // 设计稿的尺寸
                let designWidth = 1920;
                let designHeight = 969;
                let designScale = designWidth / designHeight; // 约为 1.98
                // 计算当前按设计比例 应有的大小
                let width = designScale * windowHeight;
                let height = windowWidth / designScale;
                // 分别存储当前 X Y 的缩放比
                let scaleX, scaleY;
                let scaleWidth, scaleHeight;
                if (!(width > windowWidth)) {
                    // 以宽度为基准，等比例缩放
                    scaleWidth = width;
                    scaleHeight = scaleWidth / designScale;
                } else if (!(height > windowHeight)) {
                    // 以高度为基准等比例缩放
                    scaleHeight = height;
                    scaleWidth = scaleHeight * designScale;
                }

                scaleX = scaleWidth / designWidth;
                scaleY = scaleHeight / designHeight;

                let originX = 0, originY = 0;
                originX = windowWidth - scaleWidth;
                originY = windowHeight - scaleHeight;

                resolve({
                    windowWidth,
                    windowHeight,
                    scaleX,
                    scaleY,
                    originX,
                    originY,
                })
            }
        })
    })
}

在之后的阶段中，可预见的问题有：

1. TV 中怎样自启动应用App（因为大部分TV是在安卓做的二次封装，之前采用的自启动插件测试无效，目前暂无思路）
2. 通过原生安卓插件启 TCP 服务与 硬件进行通讯(已封装完成，但是测试过程中还是有瑕疵)
3. TV 连接wifi 将本地 SQLite 数据库数据上传到云（已测试 获取wifi状态、请求云端数据无误）

Well, here is the end of the summary of the first stage of the smart toilet big screen. If you have other questions or better methods, you can delete them in the comment area in time; Experience or ideas please guide the younger brother.
The road ahead is long, even if the environment is very turbulent, just do what you should do, learn more, and summarize more. Excessive anxiety will not have any positive effect! On the road of seeking knowledge, I would like to encourage you with you ! ! !