此解决方案采用完全开放的组织架构,将仪表创建切分为:仪表盘、指针、度量刻度以及背景几个部分,这些部分既相互关联,又充分独立,当创建新的仪表的时候,可以根据需要将其进行任意组合,例如圆盘仪表盘+椭圆刻度+三角指针,就可以构建如下仪表:
![](http://www.ucancode.com/xnews/kite_needle.gif)
UCanCode仪器仪表图形是由一组可以灵活绘制并显示进度的类构成, 这些类采用柔性设计, 各个部分可以灵活定制. 主要由三个部分构成:
(注意:仪器仪表组件模块只有在您额外订购的情况下才提供)
1) 背景: UCanCode仪器仪表图形的背景直接采用任何E-Form++可视化图形组件库现成的图形类来构成, 您可以使用任何E-Form++可视化图形组件库图形类来作为其背景, 例如直线"矩形"椭圆"图像"圆弧"复合图形等等. 如果您选择什么图形类来作为其背景, 则将UCanCode的仪器仪表图形从该类派生, 例如从CFOButtonShape派生, 则仪表的背景是一个矩形按钮.
2) 刻度: UCanCode仪器仪表的刻度缺省情况下提供了线性刻度和椭圆弧刻度两种, 您可以任选一种, 或者从这两种类作派生, 来创建新的刻度类, 在使用的时候, 需要参考示例程序将其同背景图形粘贴起来.
3) 指针: UCanCode仪器仪表图形的指针可以非常广泛, 可以使矩形进度条"线性指针"圆弧指针"数字指针等等, 使用的时候, 需要多少指针, 就将多少指针同背景图形粘贴起来即可. 如下图, 有些同时又线性指针和数字指针两种. 同时指针类本身是完全可以派生的. 您如果需要定制指针, 则只需要从相应的类完成派生即可.
E-Form++产品中,我们预先在CFODrawShape基类中预定了几个专门处理仪表图形的虚函数,通过覆盖这些虚函数就可以将刻度和指针等同背景关联起来。函数如下:
public: /************************************************************************* |* |* The following virtual methods defined for meter classes. |* "************************************************************************/
// Gen meter's start point. virtual CPoint GetMeterStartPoint();
// Gen meter's end point. virtual CPoint GetMeterEndPoint();
// Gen meter's bounding rectangle. virtual CRect GetMeterRect();
// Obtain the main point. virtual CPoint GetMeterMainPoint();
// Obtain the main point. virtual CPoint GetMeterNumberMainPoint();
|
1. 缺省刻度条: 1). CFOPMeterScale
![](http://www.ucancode.com/linear_scale.gif)
类CFOPMeterScale 定义了一种线性的刻度, 通过属性Minimum 和属性Maximum来设定最大值和最小值, 如上图.
2). CFOPMeterEllipticalScale
另外一种刻度类是CFOPMeterEllipticalScale, 是一种沿着椭圆的刻度. 可以设定StartAngle以及SweepAngle.
![](http://www.ucancode.com/circle_scale.gif)
2. 下列指针类为系统提供:
1) CFOPIndicatorNeedle
指针, 类CFOPIndicatorNeedle定义了一个简单的指针, 指针中心点由参数 PivotPoint 设定.
枚举 FOPIndicatorNeedleStyle定义了指针的各种风格. 如下图.
![](http://www.ucancode.com/line_needle.gif)
下面的示例图显示了如何使用CFOPIndicatorNeedle中的fpKite风格, 缺省角度值是60, 使用了CFOPMeterEllipticalScale椭圆盘. 指针的宽度值设置为10.
![](http://www.ucancode.com/kite_needle.gif)
2) CFOPIndicatorBar
进度条, 类CFOPIndicatorBar现实一个矩形进度条,可以设定其最大值,最小值, 如下图.
![](http://www.ucancode.com/bar_indicator.gif)
类CFOPIndicatorBar 定义了一个矩形进度条, 可以分段显示不同的值, 通过一个类Phase来设定各段值的最大值"最小值以及每段值得颜色等,如下图:
![](http://www.ucancode.com/multi_bar.gif)
3) CFOPIndicatorElliptical
椭圆进度条, 类CFOPIndicatorElliptical是改进度条的定义类. 如下图所示.
![](http://www.ucancode.com/circle_indicator.gif)
4) CFOPIndicatorSlider
游标指针, 类CFOPIndicatorSlider是其定义类, 本身就是一个方块游标, 本身是从类CObject派生下来, 以便可以序列化或者运行时类型识别, 您可以设定其Pen和Brush. 属性Dimensions用于设定其大小. 枚举FOPIndicatorSliderStyle 定义了缺省风格. 包括fpTriangles 和 fpBar风格.
![](http://www.ucancode.com/bar_lin.gif)
5) CFOPIndicatorKnob
旋钮指针, CFOPIndicatorKnob定义了一个椭圆形的旋钮指针,在旋钮指针的圆弧的中心有一个小的三角形,颜色为属性值 MarkerColor设定, 从这个类派生新的类, 可以重新自定义外观.
![](http://www.ucancode.com/knob_gauge.gif)
3. Piston shape:
![](http://www.ucancode.com/Gauge_1.gif)
4. Advance shape:
![](http://www.ucancode.com/vc80_control_example.gif)
5.Animate flash ellipse shape:
![](http://www.ucancode.com/vc_animate_control.gif)
6. Animate text control:
![](http://www.ucancode.com/vc_marquee_control.gif)
7. Tank shape:
![](http://www.ucancode.com/vc_new_static_control.gif)
8. New tank shape:
![](http://www.ucancode.com/vc_draw_control.gif)
9. Advance real-time control:
10. Pie progress control shape:
![](http://www.ucancode.com/mfc_pie_control_example.gif)
11. Animate line shape:
![](http://www.ucancode.com/mfc_animate_control.gif)
12. Real-time chart control:
![](http://www.ucancode.com/vc_real_time_chart_component_control.gif)
13. New style switch control:
![](http://www.ucancode.com/mfc_gdi_draw_example.gif)
14. Vertical slider control:
![](http://www.ucancode.com/mfc_slider_control_example.gif)
15. Horizontal slider control:
![](http://www.ucancode.com/mfc_progress_control_example.gif)
16. New style chart control:
![](http://www.ucancode.com/vc_stock_chart_control.gif)
17. Carry animate shape:
![](http://www.ucancode.com/mfc_rich_text_control.gif)
18. New style switch shape:
![](http://www.ucancode.com/Gauge_2.gif)
19. New style chart control:
![](http://www.ucancode.com/free_vc_chart_control.gif)
| |
下面是使用E-Form++可视化源码组件库企业版本进行监控系统应用开发的基本步骤:
1. 设计需要的监控系统元件:
此步骤可以通过E-Form++提供的ShapeDesigner应用程序来进行设计,此工具可以直接将Microsoft Visio或者ConceptDraw等专业图形工具设计的元件导入(SVG文件)进来使用使用,当然您也可以通过ShapeDesigner本身提供的丰富的基本 图形来设计需要的监控系统元件。在设计时,可以很方便的直接将画布上设计的元件通过Copy, Paste的方式将元件放到左边的工具盒中,如下图(注:此ShapeDesigner 本身的源代码一并随E-Form++正式版本提供,可根据需要进行定制):
我们在设计元件的时候也可以对复合元件中的单个子元件定义一些便于以后识别和操作的Key ID值,这些值可以在以后通过调用GetKeyID来直接获取。
2. 设计监控系统需要的图形界面:
E-Form++提供了专门的界面设计工具DiagramEditor, 在此工具中,我们可以轻松的应用通过上面的ShapeDesigner设计的各种监控系统元件来搭建图形界面。在搭建界面时,根据需要我们可以为特定的元件指定相应的Key ID值,这些Key ID值便于我们在具体的程序中进行控制,例如我们可以控制开关的关与开,灯的闪烁等等。设计好的图形界面我们可以保存为单一的xdg文件,如下图所示:(注:此DiagramEditor 本身的源代码一并随E-Form++正式版本提供,可根据需要进行定制):
3. 构建监控应用程序:
通过E-Form++可视化图形组件库提供的集成在Visual Studio的AppWizard(应用程序创建向导)来自动产生监控系统的框架代码,可将上面我们通过DiagramEditor设计的xdg文件导入到此程序中作为资源文件,当我们需要装载一个设计界面的时候就调用如下函数:
LoadXdgFromResource(...); 如果我们需要切换到新的界面,也可以同样调用该函数来装载新的界面。参考示例NetworkDemo.
4. 动画和实时数据的处理:
外部数据的采集我们可以通过View类或则Window类的定时器来进行采集,当需要更新界面上的元件的状态的时候,可以直接通过我们上面设计的Key值来获取图形元件或者元件中的子图形。
5. 事务的处理:
通过覆盖相应的虚函数来时间各种事务的处理,例如我们只需要覆盖CFOPCanvasCore类的如下虚函数即可响应按钮的事件:
virtual void DoButtonClickEvent(CFODrawShape *pShape, const int &nSel);
在开发实际仪表图形的时候, 您当前的图形需要从类CFODrawShape或者该类的子类派生下来, 派生的图形类本身将作为仪表图形的背景来使用, 所以具体选用哪个类来进行派生, 主要看哪个类同您的仪表图形的背景接近些. 此外您需要在派生类中定义一个刻度的类, 一般直接使用类CFOPMeterScale或者类CFOPMeterEllipticalScale, 当然也可以使用这两个类本身的,接下来还要创建一个新的指针对向,可以选择从类CFOPIndicatorBar, CFOPIndicatorElliptical, CFOPIndicatorSlider, CFOPIndicatorSliderElliptical, CFOPIndicatorNeedle, 或则 CFOPIndicatorKnob之一来创建对向即可。
所有的东西就这样, 参看示例程序: GaugeDemo
所有的仪表需要的各个部分充分组件化,任何部分均可以通过类的派生或者虚函数的重载来进行扩充和定制. 而仪表的背景则可以使用任何Form++企业版本提供的图形组件来构成, 当然您也可以使用复合图形来创建风格千变万化的仪表, 参考示例:GaugeDemo, 如下:
![](http://www.ucancode.com/xnews/gaugedemo.gif)
E-Form++可视化组件库为画布上的任何图形均设定了能独立启动的定时器功能,这也意味中只要您希望某个图形动起来就可以让其动起来,这为开发任何高级的工业控制以及仿真应用提供了最直接的解决办法。
同时系统还有如下特点:
![项目符号](http://www.ucancode.com/bullet4p.gif) |
100% MFC设计,并提供所有的源代码,毫无保留。 |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
超过30万行有效代码,以及超过300个C++扩展类。 |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
自动代码产生程序以及完整的开发文档,帮助您快速构建各种基于Form++的应用。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
提供开发高级应用系统的完善的可扩展的界面控制功能。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
提供一行代码修改属性并支持Undo/Redo功能。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
用户可根据自己的需要对画布、组件、操作等各种操作进行自定义。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
同时支持单页面或者多页面应用程序。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
对组件进行布局、间隔、顺序编排。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
打印、打印预览以及输出到图象。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
绘制直线、标注线、曲线、矩形、椭圆、添加文本、以及图片等。 d |
![项目符号](http://www.ucancode.com/bullet4p.gif) |
提供超过40个各种开发示例程序。 d |
HMI Demo示例简单的展示了如何定义多页面工控界面,如下所示:
产品中心
下载HMI Demo案例
下载此示范方案
购买全部源代码: 正式版本的E-Form++可视化图形组件库企业版本提供此解决方案的全部源代码, 单击下面的按钮向UCanCode订购:
|