在这篇文章中，我将分享如何在基于Java Raspberry Pi的应用中使用Medusa Javafx库来显示天气数据！
介绍
我的同事最近问我 - 您能使我的Java应用程序看起来更令人兴奋吗？我耳朵的音乐 - 一个创意项目总是很高兴。
有问题的项目是一个气象站app that runs on a Raspberry Pi，它是由PI4J Java库构建的，用于读取衡量湿度，温度和气压的传感器，然后与Java的Arcgis Maps SDK集成，以在线托管位置和数据在线托管位置和数据。
的想法是，应该在屏幕上显示现场天气数据，还插入了Raspberry Pi，以放弃最新数据读数。
当我拾取项目时，该应用使用了由按钮和标签组件组成的基本Javafx UI显示屏，看起来像这样：
我们俩都同意这看起来可能更具吸引力，因此制定了以下标准来升级UI：
- 该应用程序应显示温度读数（从连接到Raspberry Pi传感器的传感器）。显示器应该能够显示读取，单元并显示负值。
- 该应用也应显示相对湿度百分比读取
- 它也应以气压计的方式显示大气压力，其中压力读数反映了天气条件（如下图）。 < 。压力将指向预期的天气状况。图像来自：https://scottishmerchants.com/
使用Javafx建造
JavaFX（用于台式机，移动和嵌入式系统的开源，下一代客户应用程序平台）具有许多有用的框UI控件，以构建现代交互式桌面应用程序。这些包括按钮，复选框，列表视图，标签等，可以以无数方式进行配置和设计。我在工作中使用了很多年！
javafx当然是超出这些核心基本控件的完全可扩展的 - 但是，没有用于显示量规或拨号控件以显示数据的盒子提供，这是该应用程序所需的。因此，这个项目是一个有趣的机会来构建一个视觉吸引人的应用程序，因此我环顾四周，寻找可以轻松提供类似界限的开源Javafx库。
美杜莎Javafx库
GitHub repo for Medusa是其创作者Gerrit Grunwald维护的众多现代外观UI量规控制的绝佳资源。 Gerrit还维护了我一直喜欢尝试其他Java项目的Charts Javafx库。
找到美杜莎回购是一种快乐，因为它为我自己设计了如此美丽的UI，为我节省了很多时间和精力。看到Javafx的功能在此仓库中亮相 - Javafx似乎并没有经常谈论这一切（也许我只是在错误的地方！）如此之多的尊重和感谢，这也是如此的尊重，这也是如此。这个图书馆倡导和展示Javafx真正有能力的图书馆！
麻烦射击美杜莎
我最初很难弄清楚如何在美杜莎中构建控件。这是我希望开始的一些资源：
- 您可以在其原始release blog post中找到有关Medusa的非常有用的背景和文档。
- 有一个演示您可以运行以查看所有仪表的交互式运行（请参见上图）。克隆Medusa github repo，并运行
DemoLauncher类。您还可以在medusademo GitHub repo中运行其他演示。 - 您可以在FXML中使用Medusa仪表定义UI布局，从而允许您编写现代的MVC样式应用程序。您只需要确保您的
Controller类实现Initializable类，并覆盖initialize方法。 Medusademo仓库中还有一个example demo。
public class Controller implements Initializable {
@Override
public void initialize(URL url, ResourceBundle rB){
}
}
- 如果您重新配置了量规，并且值不显示，则可能是因为您必须将值可视性设置为
true。美杜莎库控制着引擎盖下的许多初始控制行为，因此，在构建控制器时，请准备撤消其中的一些。 - 您可以使用
FGauge类使您的仪表看起来非常漂亮 - 基本上可以给它们带来周围和一些额外的样式（见下文）。
使用美杜莎
我将MEDUSA JAVAFX库导入到该应用程序的现有构建中。通过Gradle实现：
implementation 'eu.hansolo:medusa:17.1.7'
i然后确保将其添加到应用程序模块info.java中所需的模块列表：
requires eu.hansolo.medusa;
（您可能还必须添加以下实现和模块：javafx.swing，eu.hansolo.toolboxfx，eu.hansolo.toolbox）
在事后看来，如果我意识到可以在FXML中初始化控件，我将立即在资源目录中设置main.fxml。相反，我将所有控制UI配置添加到Controller类中，然后回顾性地进行了重构。因此，如果您正在阅读本文并在项目开头找到自己... 节省了一些时间，并立即设置了main.fxml 。稍后会节省您的重构。
注意：我无法找到一种在FXML中使用SectionBuilder的仪表的方法，因此看来这确实必须保留在Controller类中。让我知道您是否找到了其他方法！
定制美杜莎
我设置了数字样式控件（LCD皮肤类型），用于在我的main.fxml文件中显示温度和湿度读数。我选择了一个Javafx [Gridpane](https://openjfx.io/javadoc/20/javafx.graphics/javafx/scene/layout/GridPane.html)来显示它们，因此如果在应用程序中添加了更多数据传感器，将来可以轻松扩展该应用程序。
<GridPane maxWidth="Infinity" StackPane.alignment="CENTER">
<padding>
<Insets topRightBottomLeft="25"/>
</padding>
<Gauge fx:id="humidityGauge" GridPane.rowIndex="0" GridPane.columnIndex="0"
skinType="LCD"
maxWidth="Infinity"
maxHeight="75"
prefWidth="250"
prefHeight="100"
title="Humidity"
lcdDesign="GRAY_PURPLE"
oldValueVisible="false"
maxMeasuredValueVisible="false"
minMeasuredValueVisible="false"
unit="\%" />
<Gauge fx:id="digitalTempGauge" GridPane.rowIndex="0" GridPane.columnIndex="1"
skinType="LCD"
maxWidth="Infinity"
maxHeight="75"
prefWidth="250"
prefHeight="100"
title="Temperature"
lcdDesign="GRAY_PURPLE"
oldValueVisible="false"
maxMeasuredValueVisible="false"
minMeasuredValueVisible="false"
unit="ºC"/>
</GridPane>
对于大气压力表，由于我想模仿一个旧式的晴雨表，所以我想使用FGauge类来使其更更好的样式，好像在表盘前方包裹着玻璃一样。仪表还必须由许多部分组成，因此我选择了SkinType.SECTION。这种规格的配置需要使用SectionBuilder，尽管看起来您可以在FXML中使用SectionBuilder（再次，让我知道您是否找到了一种方法）。因此，我在控制器类中构建了压力表：
barometerGauge = GaugeBuilder.create()
.skinType(Gauge.SkinType.SECTION)
.needleColor(lcdFontColor)
.title("Atmospheric Pressure")
.unit(" mbar")
.unitColor(Color.WHITE)
.titleColor(Color.WHITE)
.valueVisible(true)
.valueColor(Color.WHITE)
.markersVisible(true)
.decimals(0)
.minValue(940)
.maxValue(1060)
.animated(true)
.knobColor(Color.FLORALWHITE)
.highlightSections(true)
.sections(
SectionBuilder.create()
.start(1040)
.stop(1060)
.text("VERY DRY")
.color(lcdBackgroundColor)
.highlightColor(Color.FLORALWHITE)
.textColor(Gauge.DARK_COLOR)
.build(),
SectionBuilder.create()
.start(1020)
.stop(1040)
.text("FAIR")
.color(lcdBackgroundColor)
.highlightColor(Color.FLORALWHITE)
.textColor(Gauge.DARK_COLOR)
.build(),
SectionBuilder.create()
.start(1000)
.stop(1020)
.text("CHANGE")
.color(lcdBackgroundColor)
.highlightColor(Color.FLORALWHITE)
.textColor(Gauge.DARK_COLOR)
.build(),
SectionBuilder.create()
.start(970)
.stop(1000)
.text("RAIN")
.color(lcdBackgroundColor)
.highlightColor(Color.FLORALWHITE)
.textColor(Gauge.DARK_COLOR)
.build(),
SectionBuilder.create()
.start(940)
.stop(970)
.text("STORMY")
.color(lcdBackgroundColor)
.highlightColor(Color.FLORALWHITE)
.textColor(Gauge.DARK_COLOR)
.build())
.build();
FGauge barometerFGauge = new FGauge(barometerGauge, GaugeDesign.TILTED_BLACK, GaugeDesign.GaugeBackground.WHITE);
vBox.getChildren().addAll(barometerFGauge);
我很喜欢仪表设计的可配置方式 - 例如，在晴雨表中，我能够自定义针和截面背景颜色，以匹配LCD样式温度和湿度测量值，以链接整个颜色方案表盘。我还能够自定义突出显示的颜色，以旋转到不同部分，以反映当前的天气状况。
结论
在不确定如何设置仪表的最初绊脚石之后，一旦将它们全部拉在一起，我就非常喜欢使用Medusa Javafx库。仪表很容易配置，看起来非常光滑，现代，并且易于集成到现有的应用程序逻辑中。
其他奖励是我的同事喜欢它，并且对从基本Javafx UI到更现代的UI的改头换面感到满意！
如果您想查看该项目使用的完整Javafx代码，请查看Controller class here和main.fxml here。
，如果您想学习如何将Raspberry Pi连接到Java应用程序，请查看我的同事博客，介绍如何在ArcGIS Developers blog上建立气象站！
