大屏开发的学习和部署总结

简介:

本文全文发表于公司内部技术论坛,本处发布删除了对公司内部产品的介绍和使用部分。

去年12月份,我和一个同事受命去学习传说中的大屏开发技术。但我对最新的前端知识不精,对Node.js语言不懂,于是我们开始了一段奇妙的旅程。这里是近期学习开发工作的小结,很多仅仅是个人理解,并不一定正确。

大屏是什么

这里不讲LED点阵大屏那种比较粗糙的单色大屏,只讲彩色的。大屏我的理解就是定制化的大型屏幕,这块屏幕首先是大,一般按照米来计算长宽,每一块大屏通常由很多小屏幕拼接起来并进行整体的控制。这种大屏一般是定制化的,长宽比例不固定,里面有多少块小屏也说不好,分辨率或粗或细。广义上,比如机场候机口座位旁竖放的单块显示器屏幕、会议室里的大屏幕显示器等都属于广义上的大屏,大屏上的页面一般都是Web网页。

做一个大屏要哪些系统

大屏一般为了展示,交互性较少。一般一个完整的大屏系统分为三块:

  1. 大屏:也就是大家看到的大屏幕,一般以展现为主,有一块屏幕一直展示,也有几块屏幕轮播,但极少有与用户交互的成分;
  2. 控制界面(可选):大屏的一些简单配置、控制显示的系统,有在PC上,也有在Pad上。当然,如果是一块死的,没有任何交互、轮播选择的大屏,可以是没有控制界面的。
  3. 查询界面(可选):大屏中展示的数据如果有任何疑问,大屏本身是不负责解答和更详细的根据需求下钻展示的。而查询界面说白了其实就是普通的应用系统,能够进行数据探索、下钻、分析,发现问题,解答疑问。

做大屏需要考虑什么

做大屏和做普通的PC、Mobile端界面还是有区别的,主要表现在:

  1. 定制性高。因为分辨率、长款比、屏幕规格比较特殊,通用性低,一般具体的大屏项目化多于产品化,产品化的大屏开发难度要高于项目化的大屏开发难度。不同的情况下有不同的考虑要点:

    • 长宽比:一般的屏幕可以自适应,但是如果长宽比严重失调的时候,自适应后显示效果大打折扣,需要去根据实际比例去针对性的设计;
    • 分辨率:同样面积下,像素大小差别大,甚至有的颗粒感比较明显,这时候如果显示细腻的图形,则不会有良好的效果;
    • 屏幕色彩表现力:如果能有16位色、24位色最好,有的屏幕色彩表现力若,色域有偏差,显示偏色,那么就该慎重考虑渐变色的使用,对于背景色,保险起见多数用暗色,如黑色、湛蓝,这样也更能视觉聚焦;
  2. 度量单位选择的不同。一般来说PC显示器用px为度量单位的居多,这种度量方式开发最为方便。近距离观看的设备(PC显示器、移动设备,甚至包括电视)上均需适配的则用pt居多。在大屏项目中,如果需要适配不同大小的大屏则需要考虑使用相对度量单位,如em、rem,使页面在不同大小的屏幕上能等比放大、缩小。
  3. 空间局限 大屏界面没有交互,甚至连滚动条都不能存在,因此,一屏就是一屏,一屏多少像素一个点都不会多,一个点都不会少。在这空间内要尽可能多的把信息有主次的传递出来。
  4. 显示控制分离:大屏展现出来的部分没有互动,不代表整个大屏解决方案没有互动的成分,大屏的控制端和展现端分离,控制端是一个富交互的模块。
  5. 长时间显示:网页在用户观看时打开,用户浏览后关闭,而大屏则有可能十几个小时甚至几十天连续不断在一个页面运行而不关闭。在这种情况下,功能上需要支持定时刷新,这个刷新不是全页面的刷新而是异步的数据上的刷新,性能上要求没有内存泄露,一旦内存泄露长时间运行必定会导致网页崩溃。
目录
相关文章
|
Linux
centos 8 换阿里源
centos 8 换阿里源
3621 0
|
7月前
|
XML JSON 网络协议
利用HTTP POST协议实现简单的RPC协议:WireShark抓包分析
通过这种方式,我们可以使用HTTP POST实现简单的RPC协议,并使用WireShark进行抓包分析。这不仅可以帮助我们理解RPC协议的工作原理,也可以帮助我们调试和优化我们的代码。
371 30
|
9月前
|
存储 人工智能 算法
AAAI 2025| S5VH: 基于选择性状态空间的高效自监督视频哈希
AAAI 2025 论文 S5VH 提出基于选择性状态空间模型的高效自监督视频哈希方法,通过双向 Mamba 层和 Self-Local-Global 学习范式,显著提升视频检索性能与推理效率。
462 16
|
消息中间件 分布式计算 负载均衡
ZooKeeper在哪些场景中被使用?
【6月更文挑战第21天】ZooKeeper在哪些场景中被使用?
526 38
|
移动开发 监控 网络协议
每个端侧产品都需要的用户体验监控
ARMS RUM 是阿里云应用实时监控服务(ARMS)下的用户体验监控(RUM)产品,覆盖 Web/H5、各类平台小程序、Android、iOS、Flutter、ReactNative、Windows、macOS 等平台框架。接入 SDK 后会主动采集端侧页面性能、资源加载、API 调用、异常崩溃、卡顿、用户操作、系统信息等数据,还支持事件、日志、异常等数据按需自定义上报以满足业务数据分析需求,提供全面的性能分析、异常分析、产品分析、会话分析能力,帮助快速跟踪定位问题原因,提升产品用户使用体验。
884 111
|
11月前
|
Ubuntu Linux 虚拟化
CentOS7扩容踩坑记录(最后只有ubuntu成功)
这篇博客记录了一次尝试给CentOS根分区扩容的过程。作者在VMware中扩展了虚拟磁盘,但最终未能成功将新分区合并到现有卷组中,因为原有分区未创建物理卷(PV)和卷组(VG)。过程中遇到了多个问题,如分区文件正在使用中等。最终作者提醒读者在操作前务必先检查当前的分区和卷组状态。
238 4
CentOS7扩容踩坑记录(最后只有ubuntu成功)
|
SQL 关系型数据库 MySQL
阿里云数据库使用教程、购买、价格、连接数据库全流程
阿里云数据库使用涉及购买、创建及登录步骤。支持MySQL、SQL Server等引擎。购买时选择所需配置、地域和可用区。创建数据库和账号后,通过DMS登录。在同一地域内,ECS需将IP加入RDS白名单以实现内网连接。详细流程见阿里云官方文档。
1731 2
|
消息中间件 网络协议 Kafka
Kafka【付诸实践 02】消费者和消费者群组+创建消费者实例+提交偏移量(自动、手动)+监听分区再平衡+独立的消费者+消费者其他属性说明(实例源码粘贴可用)【一篇学会使用Kafka消费者】
【2月更文挑战第21天】Kafka【付诸实践 02】消费者和消费者群组+创建消费者实例+提交偏移量(自动、手动)+监听分区再平衡+独立的消费者+消费者其他属性说明(实例源码粘贴可用)【一篇学会使用Kafka消费者】
589 3
|
Java API 计算机视觉
常用的视频帧提取工具和方法总结
视频理解任务最基础也是最主要的预处理任务是图像帧的提取。因为在视频理解任务中,视频可以看作是由一系列连续的图像帧组成的。因此,要对视频进行理解和分析,首先需要从视频中提取出每一帧的图像。
1040 0
|
人工智能 达摩院 语音技术
用1张图像生成数字人,快来制作你的AI视频吧~
最近魔搭上线了一项新能力——仅需输入单张人像照片,利用文字或语音驱动即可秒级生成数字人AI视频!这让小编的短视频UP梦又重新启航燃起了希望!它完全解救了社恐星人,图生视频能力替你说话、唱歌、讲段子、吟诗....无需再对着摄像头NG,一整个绝绝子叠buff!
用1张图像生成数字人,快来制作你的AI视频吧~