VAPS XT入门29:滚动数字

系列索引:VAPS XT入门系列索引

本文拆自官方示例中的RollingDigitsExample。

实现的效果就和飞机的高度计一样,左侧显示数值刻度线,右侧显示当前值。就当前状况项目来看,还是很常用的功能。

你需要了解:

首先创建一个根工程RollingDigit

滚动数字

在根工程中添加一个画面对象(Graphical Object, GO)ScrollingDigit,在默认属性中添加一个Float类型变量名为Value,类型为Input,默认值为0,In Drawing Unit为FALSE。绘图单位为Hundredth_Of_MM

向GO中添加一个IntData用于缓存。

向GO中添加一个ClippingRegion,用于将数字的部分隐藏起来。坐标为(-450,-625) (450,625)

clippingregion

向ClippingRegion中添加一个SimpleGroup用于管理内部控件。

向SimpleGroup中添加两个Text控件,用于显示数字,因为只是数字所以Text就够了。

两个文字控件分别为Text_0 Text_1,居中对齐,控件大小为(0,0),文字宽度为1,字体为F4,Y位置分别为0,1000,容量为1,只显示一个字符就可以了。

text

界面设计完成,接下来要处理一些逻辑。

在Data Flow中添加

1
ClipToInt(.Value)    -> IntData_1.Value

左侧是将.Value属性值(也就是传进来的参数)限制在Int范围内,右侧是将参数保存的缓存中待用。

1
IntData_1.Value % 10 -> Text_0.DataString

左侧是将值限制在0-9的范围内,然后将值转换为字符并显示在默认文本框中。

1
(IntData_1.Value + 1) % 10 -> Text_1.DataString

将当前值的下一值限制在0-9范围内,同时显示在不可见文本框中。

1
(ClipToFloat(IntData_1.Value) - .Value) * ClipToFloat(1000 du) -> SimpleGroup_1.Position.Y

控件的绘图基准是Hundredth_Of_MM,默认是每英寸2540个单位像素,而第二个文本框在第一个文本框上方1000个单位。

du就是display unit,即显示单元,默认1du=1pix。

先计算输入的值与不大于这个值最大的整数(即ceil运算)的差值。比如输入为1.5,那么IntData_1.Value值就是1,Text_0.DataString值就是1,Text_1.DataString值就是2,ClipToFloat就是保证IntData_1的值在Float范围内,两个相减就是1 - 1.5 = -0.5,左侧值就是 -0.5 * 1000 = -500du,那就是SimpleGroup_1的位置在默认基础上向下移动500个像素,受到ClippingRegion控件影响,Text_0的一半被遮住,而Text_1的一半显示在控件中。

result

滚动刻度线

添加一个GO,命名为ScrollingScale。在其内部添加一个ClippingRegion用于屏蔽部分界面,位置是(1750,3150) (4250,10150)

再添加一个SimpleGroup用于管理,位置为(2667,6578.6)

在SimpleGroup中添加一个TransformGroup界面用于对界面进行移动旋转等操作。

在TransformGroup中添加一根线,设置始终点坐标(4675,1650) (4675,12050)

scale

添加一个LinearTicks用于批量生成整数值线条。起点是(4150,1650) 终点是(4150,12050) 线条长度为1050,4条线。

num

添加一个LinearTicks用于显示数值线条。起点(4375,1650) 终点(4375,12050) 线条长度为600,16条线。

num

这是在控件内部查看的效果,如果是在顶层的GO中查看的话,会发现部分线条被隐藏了。

scale

在添加四个Text用于显示数值,将四个控件调整为居中,宽度为1,大小为(0,0) 容量根据显示内容调整,位置分别为(3600,1650) (3600,5116.37) (3600,8583.33) (3600,12050)

numbers

显示值

用于显示当前的高度值,就是把可以滚动的数值组合起来。

为什么滚动数值没有边框呢?因为它们将使用统一的边框。

添加一个Format用于最终显示,添加一个FloatData作为原始数据缓存,然后添加三个IntData作为数值缓存。

再添加三个ScrollingDigit数字显示控件,位置分别为(6800,6850) (6150,6850) (5500,6850)

添加五条线将三个数字框起来。

numbers

然后添加数据流

1
2
3
ClipToInt(FloatData_1.Value) -> IntData_1.Value
IntData_1.Value / 10 -> IntData_2.Value
IntData_2.Value / 10 -> IntData_3.Value

从数据源获取数据

1
2
3
FloatData_1.Value -> ScrollingDigit_1.Value
ClipToFloat(IntData_2.Value) + IfElse(IntData_1.Value % 10 == 9,FloatData_1.Value - ClipToFloat(IntData_1.Value),0) -> ScrollingDigit_2.Value
ClipToFloat(IntData_3.Value) + IfElse(IntData_1.Value % 100 == 99,FloatData_1.Value - ClipToFloat(IntData_1.Value),0) -> ScrollingDigit_3.Value

设置数字需要显示的值

1
LinearInterpolation(0, 300 du, -1400 du, -11800 du, FloatData_1.Value * 1 du)	ScrollingScale_1.Position.Y	

此语句用于调整刻度尺的显示值。

输入方位是0-300du,输出是-0~-10400du,输入值FloatData_1.Value限制在0-300,然后会自动输出范围内值。

比如说输入0,那么就会输出-0。

滑动栏

滑动栏作为数据源,在实际使用时,数据应该是通过通信传过来的。但是我们没有场景,只能模拟了。

既然是模拟就简单一点。直接使用InputObjects中的KnobFinite控件,并将其最大值设置为300

knobfinite

效果为

result

如果你有问题,如果是简单的问题可以发邮件给免费解惑,如果涉及难问题或者需要提供附加的服务(比如授权、大工程集成编译、多分区相关,或者作为中间商联系Presagis)可以联系上海亥伯智能科技有限公司 邮箱


VAPS XT入门29:滚动数字
https://feater.top/vapsxt/vapsxt-rolling-digits
作者
JackeyLea
发布于
2022年6月13日
许可协议