EECS 1021 Lab I: JavaFX Graphs & Arduino Student Version 3 March 2021

EECS Lab I: JavaFX Graphs + Arduino

Richard Robinson and James Andrew Smith

Summary
Engineering instrumentation systems often
send measurement data over USB (or similar)
to a main computer that collects, analyzes
and graphs that data. Here, we continue to
look at how jSerialComm and JavaFX can be
used to do so, using the potentiometer as the
input to be graphed.

Pre-Lab
• Do the previous labs (esp. JavaFX and
Arduino + serial topics).
• Review JavaFX setup Figure 1 Turn the potentiometer and send its value to a JavaFX graph in Part B.
o (consider installing JavaFX 15
if 11 doesn’t work)
• Review jSerialComm setup
• Make sure that your Arduino OLED and potentiometer are working
o Alternatives to the pot include soil moisture, light and mic sensors.
o OLED is a minor part here. Helpful but not critical.
• Watch the Lab I videos:
1. Part A, Part 1: https://youtu.be/Th5kzxcgAAk
2. Part A, Part 2: https://youtu.be/bItkpFXkC0o
3. Part A, Part 3: https://youtu.be/eODIqLQOuhM
4. Part B overview: https://youtu.be/08rrgGxTeOc
• Visit the GitHub page (https://github.com/rr-codes/LabI/) for
o further explanations, and
o downloading of templates for the Java and Arduino
programs

Material & software needed

• Hardware
o Grove Beginner kit
o Potentiometer
§ Alternate: moisture, light, mic
• Software
o Arduino IDE (as before)
o Java SDK 14 (as before)
o IntelliJ 2020 (as before)
o jSerialComm via Maven (as before)
o JavaFX (version 15 is preferred, but version 11 has been partially tested and should also work)

Copyright James Andrew Smith; you do not have permission to distribute this document
outside of York University
EECS 1021 Lab I: JavaFX Graphs & Arduino Student Version 3 March 2021

Marking Guide
• Demo to TA out of 1 (in lab, via Zoom)
o Part A Graph quadratic equation 0.4
o Part B JavaFX graph follows Arduino Pot 0.4
o Alternatively, moisture or light or mic sensors (0.4)
o (Mic is tricky because loud sounds need to last long)
o Cannot get USB working? 0.2 for OLED display only.
o Part C Table of Arduino data 0.2
o Alt sensors like in Part B are okay

Due date
You are expected to demonstrate part A, B and C during the lab. There is no lab report.

Intro
There is a GitHub page with the sample (template) code. You can download the templates
using the zip file found on that page. Within that zip file you’ll find the Java files and the
Arduino files.

Part A

The Part A files for creating a JavaFX graph using data sourced
from an equation are posted on GitHub. There are pieces missing
within the GitHub template.

In order to figure out what those missing parts are, review the
three-part series of videos for Part A:
Figure 2 The graph output for the quadratic
equation in Part A. Make sure to enter
o Part A, Part 1: https://youtu.be/Th5kzxcgAAk coefficient values in the console at the bottom
o Part A, Part 2: https://youtu.be/bItkpFXkC0o of the IntelliJ window.
o Part A, Part 3: https://youtu.be/eODIqLQOuhM

The videos show the building of the graph from simple, to complex. The names of classes and
methods in the videos are slightly different than that in the template, as is the equation to be
graphed. However, the structure is the same. If you follow along you’ll be able to make the
necessary modifications to the template.

Demonstrate to the TA that you can have the graph appear, showing the result for a quadratic
equation. Choose the coefficients unless the TA wishes to see particular values used.

Copyright James Andrew Smith; you do not have permission to distribute this document
outside of York University
EECS 1021 Lab I: JavaFX Graphs & Arduino Student Version 3 March 2021

Part B
Review this video (https://youtu.be/08rrgGxTeOc) to see how the JavaFX graph will capture the
potentiometer value bytes from your Grove or Arduino board. We use CoolTerm in “Hex Mode”
(see Figure 4 ) to examine the individual pieces of information that are being transmitted and
explain how they are interpreted for graphing.

Figure 3 Plot the potentiometer value on a JavaFX graph.

Below are two Arduino programs that you can choose for implementation in Part B. The simpler
one does not show anything on the OLED of your Grove board. The more complex one is like the
simpler one but breaks down information for you on the OLED. You can use either one if you are
able to show the graph in Java. If you cannot show the graph in Java, then use the more complex
one to show sensor feedback to the TA (for reduced marks).

#include <Arduino.h> #include <Arduino.h>

#include <U8x8lib.h>
void setup() {
Serial.begin(9600); auto display = U8X8_SSD1306_128X64_NONAME_HW_I2C(U8X8_PIN_NONE);
}
/* ----- setup --------- */
void sendPotentiometerData() { void setup() {
const auto value = analogRead(A0); Serial.begin(9600);
const byte data[] = {0, 0, highByte(value), lowByte(value)};
display.begin();
Serial.write(data, 4); display.setFlipMode(0);
Serial.println(); display.clearDisplay();
} display.setFont(u8x8_font_7x14B_1x2_r);

void loop() { }
sendPotentiometerData();
delay(1000); /* -------- Pot read function. ----------
} * Read the potentiometer value (or any other analogue sensor on A0)
* Break up the two bytes of data from A0 into "high" and "low"
* Move those two bytes into an array of four bytes.
* First two bytes are zero. Then high byte. Then low byte.
*
* Once the four bytes are done, send a "newline".
*
* Why bytes? Because the Java program is interpreting individual
* bytes of data. The Java program waits for the newline to signal
* that a particular round of data upload is done. */
void sendPotentiometerData() {
const auto value = analogRead(A0);
const byte data[] = {0, 0, highByte(value), lowByte(value)};

Copyright James Andrew Smith; you do not have permission to distribute this document
outside of York University
EECS 1021 Lab I: JavaFX Graphs & Arduino Student Version 3 March 2021

Serial.write(data, 4); // send 0,0, "high byte", "low byte"

Serial.println(); // send "newline"
}

// read A0 and display on OLED

void displayA0(){
const auto value = analogRead(A0);
const byte data[] = {0, 0, highByte(value), lowByte(value)};

display.setCursor(0,0); display.print("A0: ");

display.setCursor(5,0); display.print(value);
display.setCursor(0,2); display.print("Bytes 1,2: " + String(data[0]) + "," +
String(data[1]));
display.setCursor(0,4); display.print("Byte 3: " + String(data[2]));
display.setCursor(0,6); display.print("Byte 4: " + String(data[3]));

}
/* ---- loop -------- */
void loop() {
displayA0(); // show on OLED
sendPotentiometerData(); // write to serial port
delay(1000); // wait so you don't saturate
// the serial line and block
// potential reloads of Arduino code
}

Arduino: Pot on A0 + serial only Arduino: Pot on A0 to OLED display + serial

Figure 4 You can use CoolTerm to see the individual "hexadecimal" components of the data transmission.

On GitHub you can find the other Java source code files to make this demonstration happen.

Demonstrate to the TA that you can have the graph update based on input from a
potentiometer on the Arduino or Grove board (or equivalent analogue input device).

Copyright James Andrew Smith; you do not have permission to distribute this document
outside of York University
EECS 1021 Lab I: JavaFX Graphs & Arduino Student Version 3 March 2021

Part C

In Part C you are to turn the potentiometer (or alternative

analogue sensor) and send the values (0 – 1023) to a Java
program that will then place those values in a table along
with a time stamp.

In Part C you need to insert instructions into a method

called getTableView(). It’s a weird one as it contains
generics and a “Factory” called CellValueFactory. These
are advanced topics in Java, but even if you don’t fully
understand them you can use them in the context of
JavaFX graphics. Figure 5 Fill a table using data from your Arduino / Grove
board.
To help you along we’ll have you download the template
for the project from GitHub. Next, open up Main.java. Find the getTableView() method. Then,
follow the steps below:

1. Create an instance
of TableView<XYChart.Data<Number,
Number>>. The generic
parameter, XYChart.Data<Number,
Number>, represents the type of
class that is the model for each
row. In our case, each row does
indeed represent a singular data
point.
o Note that the inner <Number,
Number> generics are generic
types for
the XYChart.Data class itself.
They represent the type of
the x values, and the y
values, respectively. In our Figure 6 This is the getTableView() method in Main.java. Add in the source code as
case, both are Numbers. instructed here. Then, compile and run your program.
o Number is an abstract class, of
which specific number types such as Integer and Double inherit from.

Step 1: Fill in the black area. This is the name of the instance. Call it table.
var xxxxxx = new TableView<XYChart.Data<Number, Number>>();

Copyright James Andrew Smith; you do not have permission to distribute this document
outside of York University
EECS 1021 Lab I: JavaFX Graphs & Arduino Student Version 3 March 2021

2. Create a new TableColumn<XYChart.Data<Number, Number>, Number> instance. The

first generic parameter, XYChart.Data<Number, Number>, again represents the model
class for each row. The second generic parameter, Number, represents the type of
value in this specific column, which is a Number. The name of the column should
be called something like "Date" or "Time", as this is the timestamp for each data
point.
Step 2. The instance is called timeColumn. Name the column in TableColumn as either Date or
time. Fill these in in either the black or green sections.
var xxxxxxxx = new TableColumn<XYChart.Data<Number, Number>, Number>("xxxxxx");

3. Set the cell value factory of the column you just created. The cell value factory
determines how the specific value for the column should be extracted from the
row. For example, column.setCellValueFactory(row ->
row.getValue.getFooProperty()).

Step 3. As per the instructions above, we want to extract the property called XValueProperty()
here. You also need to fill in the name of the “set” Cell Value Factory method right after
timeColumn.
timeColumn.xxxxxxxxxxxxxx(row -> row.getValue().xxxxxxxxxxx());

4. Create a date format instance using DateFormat.getTimeInstance();

Step 4. The instance is called dateFormat.

var xxxxxxxxxx = DateFormat.getTimeInstance();

5. Create a converter, to convert between the number of milliseconds and a more

human readable timestamp. This can be done by creating a
new FormatStringConverter<Number> and specifying the date format created in (4).
Step 5. The instance is called converter. Feed dataFormat into it.

var xxxxxxx = new FormatStringConverter<Number>(xxxxxxx);

Copyright James Andrew Smith; you do not have permission to distribute this document
outside of York University
EECS 1021 Lab I: JavaFX Graphs & Arduino Student Version 3 March 2021

6. Set the cell factory of the column to specify this converter. This is done
via column.setCellFactory(c -> new
TextFieldDataCell<>(converter)) (where column is the name of the column
variable you created, and converter is the name of the converter you created in
(5)).

Step 6.
xxxxxx.setCellFactory(column -> new TextFieldTableCell<>(xxxxxxxx));

7. Repeat steps 2 and 3 for the second column, the value column. Name your value
column in the black areas below. The green area is the name of your data (value)
column.

Step 7.

var xxxxxxx = new TableColumn<XYChart.Data<Number, Number>, Number>("xxxxxx");

xxxxxx.setCellValueFactory(row -> row.getValue().YValueProperty());

8. Create a list of all the columns using the List.of() method. Then, set the columns
of the table using table.getColumns().setAll(list), where table is the name of
your table (in black, below) and list is the name of the list you just created.
Step 8.
xxxxxx.getColumns().setAll(List.of(timeColumn, xxxxx));

9. Return the table!

Step 9 Return table.

return xxxxxx;

Demonstrate to the TA that you can have the data upload to the Java program and change the
values in the table. You should use the potentiometer on the Arduino/Grove board, or an
alternative like the moisture sensor or light sensor.

Copyright James Andrew Smith; you do not have permission to distribute this document
outside of York University