一步到位的智慧:BI可视化大屏在复杂环境中如何精准拾取目标
在可视化设计器中实现良好的组件拾取功能,是提升用户体验和设计效率的关键。它们不仅能够提升用户体验和操作效率,还能够增强设计的灵活性和精度,促进设计创新,并最终提升设计的质量和价值。因此,在可视化设计过程中,应充分考虑并优化拾取功能的设计和实现。
以下是基于最近这段时间,我们自己做配置化大屏不断思考与实现的说明:
1、首先明确拾取目标和范围
定义拾取对象:明确拾取功能将应用于哪些类型的组件,如文本框、按钮、图表、颜色、多种组件的集合等。
不同对象有不同的操作方式,这样可以大大简化我们的对设计结果的操作
2、分析拾取对象
在明确清楚了要拾取的对象的时候,那么我们就要考虑这些对象如何在大屏中展示

在我们的设计里边,包括页面级、图层级,也就是说一个大屏设计,可以有多个页面,页面之间可以通过联动设计跳转的交互事件,每个页面内是由图层组成的,每个图层就是一个组件,这些组件是自下而上的展示, 所以如上图所示页面---图层的组件承载的模式;
当然值得注意的是,我们系统中存在母版这个页面级的设定,一旦在母版中配置后,所有的页面都能看到母版中的组件,只是这些组件在最底层的,所以,母版往往拿来做整体页面的 划分与导航等内容框架的功能。
3、设计拾取元素的交互方式
- 点击拾取当个元素:拾取操作应直观易用,用户无需复杂学习即可上手。

鼠标点击画布中的元素后,右侧会自动展示组件的属性设置面板,左右点开图层,可以看到这个图层在本页面内容中的 层级位置
- 点击拾取多个组件:可以通过长按ctrl,或者框选,可以选中多个组件,这样可以对组件进行整体操作,比如移动、对齐等

在选中后,左侧的图层中可以看到两个元素被选中成为相对高亮的状态,可以整体移动,可以对齐操作,可以组成一个组。

4、提供拾取辅助功能
- 多层重叠组件的拾取:针对多层菜单等复杂界面,提供特殊的拾取技巧或辅助工具,如果存在多图叠加在一起时,可以通过左侧的图层选择,也可以在图上的通过右键,选择某个一个图

- 拾取预览效果:拾取完成后,提供预览图和属性表供用户校验拾取结果是否正确。
5、拾取颜色
在大屏设计时,往往要保持颜色一致性,那么需要选择已经存在的颜色,在颜色设计器中,提供了色彩拾取操作

6、优化拾取时的性能
- 减少资源占用:优化拾取算法,减少CPU和内存占用,提高响应速度。
- 异步处理:对于耗时的拾取操作,采用异步处理方式,避免阻塞用户界面。
......这里省略10000字,具体如何做的界面优化可以回头看看我们的源码,我主要以产品的角度讲解下。
在线demo:http://bi.bctools.cn
gitee地址:https://gitee.com/software-minister/jvs-bi
相关文章:
一步到位的智慧:BI可视化大屏在复杂环境中如何精准拾取目标
在可视化设计器中实现良好的组件拾取功能,是提升用户体验和设计效率的关键。它们不仅能够提升用户体验和操作效率,还能够增强设计的灵活性和精度,促进设计创新,并最终提升设计的质量和价值。因此,在可视化设计过程中&a…...
前端开发迎来新机会,全栈转型就靠这个!
在如今的开发世界,全栈开发者已成为许多前端开发者的新目标。随着技术的不断演进,前端不再局限于写页面和样式,而是逐渐向后端延伸,甚至触及数据库和云服务。如果你想在职业道路上更进一步,向全栈开发者靠拢࿰…...
关于less的基本使用
1、介绍及概述 1.1、解释 less 是方便开发人员书写CSS的一门预处理语言。浏览器只认识html /css /js格式的文件,所以直接引入.less文件,没有任何的效果,需要把less文件转换成css文件 1.2、概述 CSS弊端: 没有逻辑性、变量、函…...
python 将 aac 转为 mp3,保持原有目录结构
需要提前安装 FFmpeg import os import subprocess import time from concurrent.futures import ThreadPoolExecutor, as_completeddef convert_file(input_path, output_path):command [ffmpeg,-y, # 自动覆盖现有文件-i, input_path,-acodec, libmp3lame,-b:a, 192k,outpu…...
考研数据结构——C语言实现折半查找
首先定义了一个有序数组a,然后计算出数组的长度n。接着定义了一个要查找的元素x,值为79。binarySearch函数实现了二分查找算法,它接受数组、左右边界和目标值作为参数,通过不断缩小搜索范围来查找目标值。如果找到了目标值&#x…...
【游戏引擎】C++自制游戏引擎 Lunar Game Engine
Lunar-Game Engine 仓库位置 Lunar Game Engine Lunar GameEngie是几个渣渣业余写的基于C的游戏引擎。 相比于比较成熟的引擎,该引擎的特点如下 结构,标准混乱bug众多根本不能用! 最后的最后 To The Moon and Beyond! 简介 Luna Engine基于 C 和…...
使用【Sa-Token】实现Http Basic 认证
使用Sa-Token开源架构快速实现Http Basic 认证,如上图 1、springboot环境下直接添加starter即可 <!-- Sa-Token 权限认证,在线文档:https://sa-token.cc --> <dependency><groupId>cn.dev33</groupId><artifactI…...
layui table中的checkbox禁用问题
在项目开发中遇到table框已经选择过的数据不支持二次选择从而要禁用复选框不许选中,但会导致复选框全选时layui的table组件源码中赋值时是根据全部复选框的下标顺序来赋值到数组中返回给你,这样已被禁用复选框的数据也会被push到数组中导致数据错乱&…...
102.SAPUI5 sap.ndc.BarcodeScannerButton调用摄像头时,localhost访问正常,使用IP访问失败
目录 原因 解决办法 1.修改谷歌浏览器的setting 2.在tomcat中配置https访问 参考 使用SAPUI5的sap.ndc.BarcodeScannerButton调用摄像头时,localhost访问正常,使用IP访问时,一直打不开摄像头,提示getUserMedia()问题。 原因…...
20240923软考架构-------软考186-190答案解析
每日打卡题186-190答案 186、Mesh 化架构是把( )从业务进程中分离,分离后在业务进程中只保留很“薄”的Client部分,Client 通常很少变化,只负责与 Mesh进程通信,原来需要在SDK中处理的流量控制、安全等逻辑…...
基于Spring Boot的宠物咖啡馆平台【附源码】
基于Spring Boot的宠物咖啡馆平台(源码L文说明文档) 目录 4 系统设计 4.1 系统概述 4.2系统结构 4.3.数据库设计 4.3.1数据库实体 4.3.2数据库设计表 5系统详细实现 5.1 管理员模块的实现 5.1.1 用户信息管理 …...
C++模拟实现list:list、list类的初始化和尾插、list的迭代器的基本实现、list的完整实现、测试、整个list类等的介绍
文章目录 前言一、list二、list类的初始化和尾插三、list的迭代器的基本实现四、list的完整实现五、测试六、整个list类总结 前言 C模拟实现list:list、list类的初始化和尾插、list的迭代器的基本实现、list的完整实现、测试、整个list类等的介绍 一、list list本…...
Offer60:n个骰子的点数
题目:把n个骰子扔在地上,所有骰子朝上一面的点数之和为s。输入n,打印出s的所有可能的值出现的概率。 分析:要解决这个问题,我们需要先统计出每个点数出现的次数,然后把每个点数出现的次数除以,就能求出每个点数出现的概率了。我们…...
几种常见的索引类型扫描
第一种:index unique scan 索引唯一扫描,当可以优化器发现某个查询条件可以利用到主键、唯一键、具有外键约束的列,或者只是访问其中某行索引所在的数据的时候,优化器会选择这种扫描类型。第二种:index range scan 索…...
苹果CMS插件:优化蜘蛛访问内容,提升百度收录率
确保蜘蛛抓取原始内容 专为苹果CMS设计的广告管理插件,能够智能识别搜索引擎蜘蛛与普通访客,确保蜘蛛访问时展示原始内容,从而提升被百度等搜索引擎收录的几率。 广告显示提升收益 对于普通访客,该插件则优先显示广告内容&#…...
后端开发刷题 | 没有重复项数字的全排列
描述 给出一组数字,返回该组数字的所有排列 例如: [1,2,3]的所有排列如下 [1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2], [3,2,1]. (以数字在数组中的位置靠前为优先级,按字典序排列输出。) 数据范围:数字…...
Python中的“打开与关闭文件”:从入门到精通
引言 在日常生活中,我们经常会遇到需要读取或保存信息的情况,比如记录笔记、保存配置信息或者处理大量的数据文件等。对于程序员来说,如何高效、安全地管理这些信息显得尤为重要。Python中的文件操作功能强大且易于使用,可以帮助…...
9.23 My_string.cpp
my_string.h #ifndef MY_STRING_H #define MY_STRING_H#include <iostream> #include <cstring>using namespace std;class My_string { private:char *ptr; //指向字符数组的指针int size; //字符串的最大容量int len; //字符串当前…...
【android10】【binder】【3.向servicemanager注册服务】
系列文章目录 可跳转到下面链接查看下表所有内容https://blog.csdn.net/handsomethefirst/article/details/138226266?spm1001.2014.3001.5501文章浏览阅读2次。系列文章大全https://blog.csdn.net/handsomethefirst/article/details/138226266?spm1001.2014.3001.5501 目录 …...
Java — LeetCode 面试经典150题(一)
双指针 125.验证回文串 题目 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后,短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s,如果它是 回文串 ,返回…...
FastAPI ORM 封装:FastAPI 与 SQLModel 的无缝集成与快速开发
更多内容请见: 《Python Web项目集锦》 - 专栏介绍和目录 核心价值: SQLModel 是 FastAPI 作者 Tiangolo 为 Python Web 开发量身打造的"ORM 终极解决方案",它将 Pydantic 模型与 SQLAlchemy 深度融合,让开发者在编写 API 时无需在数据库模型和 API 模型之间反复…...
Python胶水代码变高性能引擎(Mojo原生编译实战手记)
第一章:Python胶水代码变高性能引擎(Mojo原生编译实战手记)Python 以其简洁语法和丰富生态成为数据科学与系统集成的“胶水语言”,但其解释执行机制常在数值计算、实时推理等场景遭遇性能瓶颈。Mojo 作为新兴的系统级编程语言&…...
利用快马平台与openclaw切换模型功能,快速构建待办事项应用原型
最近在尝试快速构建一个待办事项应用的原型时,发现InsCode(快马)平台的AI代码生成功能特别适合这种场景。通过平台内置的openclaw切换模型功能,可以快速比较不同AI模型生成的代码风格差异,大大缩短了原型开发周期。下面分享下我的实践过程&am…...
基于Wan 3D Causal VAE(Show-o2)的模型,重新完整地分析 10分钟的视频 对应多少 vison token
可以。这次我按 Show-o2 官方 432432 配置 和 Wan 3D Causal VAE 的公开时间压缩规则,把 10B token 且全部都是 vision token 的情况重新完整算一遍。下面的“大小”我统一按 未压缩 RGB 原始数据量 来算;如果你问的是实际 JPG / PNG / MP4 落盘大小,那会随压缩格式、码率和…...
SEO_10个提升网站排名的实用SEO技巧分享(370 )
SEO:10个提升网站排名的实用SEO技巧分享 在当今的互联网时代,一个网站的成功离不开搜索引擎优化(SEO)。SEO不仅仅是一套技术,更是一种思维方式。本文将详细分享十个实用的SEO技巧,帮助你提升网站的排名,吸…...
嵌入式软件框架设计:从基础到实战
1. 嵌入式软件框架设计基础作为一名在嵌入式领域摸爬滚打多年的工程师,我深刻体会到框架设计对项目成败的决定性影响。嵌入式系统与通用计算机系统最大的区别在于其资源受限性和实时性要求,这就决定了我们不能简单套用桌面开发的思维模式。程序框架本质上…...
微信好友检测神器:一键识别谁删了你,轻松管理社交圈
微信好友检测神器:一键识别谁删了你,轻松管理社交圈 【免费下载链接】WechatRealFriends 微信好友关系一键检测,基于微信ipad协议,看看有没有朋友偷偷删掉或者拉黑你 项目地址: https://gitcode.com/gh_mirrors/we/WechatRealFr…...
Infinity Pro书签迁移终极指南:从JSON文件到本地缓存的完整操作流程
Infinity Pro书签迁移终极指南:从JSON文件到本地缓存的完整操作流程 作为一名长期使用Infinity Pro的开发者,我深知书签迁移的痛点。每次换设备或重装系统,那些精心整理的技术资源库都要重新配置。本文将分享一套经过实战验证的迁移方案&…...
通过配置驱动前端页面的实现方法
通过配置驱动前端页面的实现方法 配置驱动开发(Configuration-Driven Development, CDD)是一种通过外部配置而非硬编码来控制应用行为的开发模式。在前端领域,这种模式可以显著提升页面灵活性和可维护性。以下是具体实现方案: 理解…...
实用指南:如何通过Energy Star X轻松提升Windows 11电池续航40%
实用指南:如何通过Energy Star X轻松提升Windows 11电池续航40% 【免费下载链接】EnergyStarX 🔋 Improve your Windows 11 devices battery life. A WinUI 3 GUI for https://github.com/imbushuo/EnergyStar. 项目地址: https://gitcode.com/gh_mirr…...
