使用JavaFX实现数据监控GUI(一)

 

一、       项目介绍

1.      关于JavaFX的介绍、教程及Scene Builder的安装，请参考https://www.yiibai.com/javafx/

2.      项目背景介绍

已知某一机床有4个传感器，分别是振动传感器、电流传感器、人体红外传感器及超声波传感器，这些传感器会实时的进行数据传输。该客户端主要用于实时的展示原始数据，并使用原始数据对当前机床状态以及传感器健康状态进行预测（这里不会真正进行预测，直接使用随机生成的数据），然后对预测的结果进行统计并展示。项目最终结果如下图：

2.1    原始数据(左上角)

振动传感器具有x、y、z三个方向的值

2.2    机床状态的折线图(右上角)

机床共有4种状态，分别：idle、loading、low、high。随着时间的变化，机床会在这四种状态中不断的切换。故横坐标是时间，纵坐标是4种状态。

2.3    传感器健康状态(左下角)

用进度条表示每个传感器健康状态占总状态的百分比，并且每个进度条后有一个警示灯，当传感器处于非健康状态时其颜色会转变为红色。

2.4    机床状态的饼图(右下角)

用于展示各个机床状态占总状态的比例。

 

二、       创建项目

1.点击File->New->Other；

 

2.选择JavaFXProject，然后Next；

 

3.给一个项目名称，这里就叫做MyProject，然后点击Finish；

 

三、       创建包及FXML文件

1.       创建包

删除原始的application包，再新建四个包：team.pku、team.pku.model、team.pku.view、team.pku.util。

 

2.       创建FXML文件

2.1在team.pku.view包上点击右键，然后New->other；

 

2.2选择New FXML Document；

 

2.3指定文件名为RootLayout，Finish；

2.4按照上述步骤依次创建LineChartOfLatheStatus.fxml、PieChartOfLatheStatus.fxml、RawDataOverview.fxml、SensorHealthChart.fxml，结果如下图：

 

 

四、       设计FXML文件

1.       设计RootLayout.fxml

1.1在RootLayout.fxml文件上点击右键，然后点击Open with SceneBuilder。

删除自带的AnchorPane，在添加BorderPane；

 

1.2在TOP位置上加入一个MenuBar；

1.3在CENTER位置上加入一个GridPane，并调整为2*2；

 

2.设计RawDataOverview.fxml

 

3.设计SensorHealthChart.fxml

 

4.设计PieChartOfLatheStatus.fxml

 

5.设计LineChartOfLatheStatus.fxml

由于需要将横纵坐标均改为CategoryAxis，而我当前的JavaFX Scene Builder无法满足该需求，因此只能直接修改文件。