JavaFX and SteelSeries gauges using FXML

Gerrit Grunwald, aka @hansolo_ on twitter, has just ported his Swing based gauges and meters framework known as SteelSeries to JavaFX as part of the JFXtras-lab project. I can't tell you how many times since Java AWT first came out, that I have had to use meters and gauges in an application. Also, I can't count how many times I have found a dearth of open source gauge frameworks out there in the wild. Needless to say, I have been watching Gerrit's progress for several months now.  Finally, he posted his work to jxftras-lab and I have been eagerly testing ever since.

One area I wanted to see is if Gerrit's gauges worked with JavaFX FXML. JavaFX FXML is an XML-based language that provides the structure for building a user interface separate from the application logic of your code. With the numerous options that Gerrit's gauges support, this is a must have. I am happy to report with a little back and forth with Gerrit over a few days, we now have a working version that supports FXML. You'll have to download and build the latest jfxtras-lab bits from github, here.

Here is an FXML snippet showing how to define a Radial gauge in FXML. This matches Gerrit's blog, showing the same settings using Java code, here.

<Radial fx:id="radialGauge" prefWidth="280" prefHeight="280" title="Temperature" >
  <unit>°C</unit>
  <lcdDecimals>2</lcdDecimals>
  <frameDesign>STEEL</frameDesign>
  <backgroundDesign>DARK_GRAY</backgroundDesign>
  <lcdDesign>STANDARD_GREEN</lcdDesign>
  <lcdDecimals>2</lcdDecimals>
  <lcdValueFont>LCD</lcdValueFont>
  <pointerType>TYPE14</pointerType>
  <valueColor>RED</valueColor>
  <knobDesign>METAL</knobDesign>
  <knobColor>SILVER</knobColor>
  <sections>
    <Section start="0" stop="37" color="lime"/>
    <Section start="37" stop="60" color="yellow"/>
    <Section start="60" stop="75" color="orange"/>
  </sections>
  <sectionsVisible>true</sectionsVisible>
  <areas>
    <Section start="75" stop="100" color="red"/>
  </areas>
  <areasVisible>true</areasVisible>
  <markers>
    <Marker value="30" color="magenta"/>
    <Marker value="75" color="aquamarine"/>
  </markers>
  <markersVisible>true</markersVisible>
  <threshold>40</threshold>
  <thresholdVisible>true</thresholdVisible>
  <glowVisible>true</glowVisible>
  <glowOn>true</glowOn>
  <trendVisible>true</trendVisible>
  <trend>RISING</trend>
  <userLedVisible>true</userLedVisible>
  <bargraph>true</bargraph>
  <radialRange>RADIAL_300</radialRange>
  <GridPane.rowIndex>0</GridPane.rowIndex>
  <GridPane.columnIndex>0</GridPane.columnIndex>
  <GridPane.halignment>CENTER</GridPane.halignment>
  <GridPane.valignment>CENTER</GridPane.valignment>
</Radial>

 

This produced the following display:

In FXML, you create a Java controller class. For this simple example, in the controller class, Gauge.java, I created a JavaFX Timeline that iterates from the minimum to the maximum value over 10 seconds, alternating with rising and falling values. The actual Radial Gauge is represented by the "radialGauge" member of the controller that is annotated with @FXML. This allows the FXML system to match the actual JavaFX Radial Control instance to the controller member variable based on the FXML"fx:id" attribute. The initialize method of the controller class is called once the FXML system has processed the XML and created all the JavaFX Nodes.

The main JavaFX application is contained in the class SteelFX and it loads the FXML file then assigns it to the JavaFX Scene.

 

The complete code is here:

SteelFX.java

Gauge.fxml

Gauge.java

 

Views: 10669

Comment

You need to be a member of Codetown to add comments!

Join Codetown

Happy 10th year, JCertif!

Notes

Welcome to Codetown!

Codetown is a social network. It's got blogs, forums, groups, personal pages and more! You might think of Codetown as a funky camper van with lots of compartments for your stuff and a great multimedia system, too! Best of all, Codetown has room for all of your friends.

When you create a profile for yourself you get a personal page automatically. That's where you can be creative and do your own thing. People who want to get to know you will click on your name or picture and…
Continue

Created by Michael Levin Dec 18, 2008 at 6:56pm. Last updated by Michael Levin May 4, 2018.

Looking for Jobs or Staff?

Check out the Codetown Jobs group.

 

Enjoy the site? Support Codetown with your donation.



InfoQ Reading List

Google Introduces Gemma, a New Open Source AI Model for Developers

Google announced the launch of Gemma, a new open source AI model. Developed using the technology that underpinned Google's Gemini AI models, Gemma aims to provide developers with advanced tools to create AI applications conscientiously.

By Daniel Dominguez

Baseline OpenAI end-to-end Chat Reference Architecture

Microsoft published the baseline OpenAI end-to-end chat reference architecture. This baseline contains information about components, flows and security. There are also details about performance, monitoring and deployment guidance. Microsoft also prepared the reference implementation to deploy and run the solution.

By Robert Krzaczyński

State of FinOps 2024: Reducing Waste and Embracing AI

In the 2024 State of FinOps survey, Engineering Enablement has been replaced by a focus on cost and waste reduction. This shows maturity of FinOps as the persona getting the most value from FinOps remains the engineer. The confluence of AI and FinOps observability aims to optimise cloud spend visibility and improve insights into early AI experimentation, as well as sustainability goals.

By Rafiq Gemmail

Java News Roundup: JDK 22 RC2, Multiple Releases in the Spring Ecosystem, Payara Platform

This week's Java roundup for February 19th, 2024 features news highlighting: JDK 22 in release candidate 2, the February 2024 edition of the Payara Platform, numerous milestone and point releases in the Spring ecosystem, multiple releases of Apache Tomcat and Log4j and Gradle 8.7-RC1.

By Michael Redlich

Vue 3.4 Released, Minimizes Reactive Computations, Speeds up Template Parsing

The Vue team recently released Vue 3.4. The new release features a new template parser that claims to be twice as fast and a more efficient reactivity system that reduces unnecessary component re-renders.

By Bruno Couriol

© 2024   Created by Michael Levin.   Powered by

Badges  |  Report an Issue  |  Terms of Service