Added functionality to select important annotations and ui changes

- Added CSS for the race view & welcome screen
- Added view to select important annotations
- Annotations are enabled/disabled when the user changes the important annotations

Tags: #story[926]

src/main/java/seng302/controllers/Controller.java

@@ -18,12 +18,8 @@ import seng302.models.Yacht;
 import seng302.models.parsers.StreamParser;
 import seng302.models.parsers.XMLParser;
 
-
 import java.io.IOException;
 import java.net.URL;
-import java.text.DateFormat;
-import java.text.SimpleDateFormat;
-import java.util.*;
 import java.util.ResourceBundle;
 import java.util.Timer;
 import java.util.TimerTask;
@@ -56,6 +52,7 @@ public class Controller implements Initializable {
         try{
             contentPane.getChildren().removeAll();
             contentPane.getChildren().clear();
+            contentPane.getStylesheets().add(getClass().getResource("/css/master.css").toString());
             contentPane.getChildren().addAll((Pane) FXMLLoader.load(getClass().getResource(jfxUrl)));
         }
         catch(javafx.fxml.LoadException e){
@@ -71,6 +68,8 @@ public class Controller implements Initializable {
         //DateFormat format = new SimpleDateFormat("dd/MM/yyyy HH:mm:ss");
         //format.setTimeZone(TimeZone.getTimeZone("GMT-8"));
         //realTime.setText(format.format(new Date()));
+        contentPane.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+        teamList.getStylesheets().add(getClass().getResource("/css/master.css").toString());
     }
 
     /**
@@ -138,7 +137,9 @@ public class Controller implements Initializable {
 
     private void updateTeamList() {
         ObservableList<Yacht> data = FXCollections.observableArrayList();
+
         teamList.setItems(data);
+
         boatNameCol.setCellValueFactory(
                 new PropertyValueFactory<>("boatName")
         );

src/main/java/seng302/controllers/ImportantAnnotationController.java

@@ -0,0 +1,125 @@
+package seng302.controllers;
+
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.control.Button;
+import javafx.scene.control.CheckBox;
+import javafx.scene.layout.AnchorPane;
+import javafx.stage.Stage;
+
+import java.net.URL;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.ResourceBundle;
+
+public class ImportantAnnotationController implements Initializable {
+    /*
+     * JavaFX Outlets
+     */
+    @FXML
+    private CheckBox boatWakeSelect;
+
+    @FXML
+    private CheckBox boatSpeedSelect;
+
+    @FXML
+    private CheckBox boatTrackSelect;
+
+    @FXML
+    private CheckBox boatNameSelect;
+
+    @FXML
+    private AnchorPane annotationSelectWindow;
+
+    @FXML
+    private Button closeButton;
+
+    private RaceViewController parent;
+    private Map<String, Boolean> importantAnnotations;
+    private Stage stage;
+
+    ImportantAnnotationController(RaceViewController parent, Stage stage){
+        this.parent = parent;
+        importantAnnotations = new HashMap<>();
+        this.stage = stage;
+    }
+
+    /**
+     * Sets whether or not an annotation is considered important
+     * @param name The annotation name
+     * @param isSet True if annotation is important
+     */
+    private void setAnnotation(String name, Boolean isSet){
+        importantAnnotations.put(name, isSet);
+    }
+
+    /**
+     * Sends an update to the parent controller when the important
+     * annotations have changed
+     */
+    private void sendUpdate(){
+        this.parent.importantAnnotationsChanged(this.importantAnnotations);
+    }
+
+    /**
+     * Load the current state of the 'important annotations'
+     * @param currentState hashmap containing the states of each annotation
+     */
+    void loadState(Map<String, Boolean> currentState){
+        this.importantAnnotations = currentState;
+
+        // Initialise checkboxes
+        for (String key : importantAnnotations.keySet()){
+            switch (key){
+                case "BoatWake":
+                    boatWakeSelect.setSelected(importantAnnotations.get(key));
+                    break;
+
+                case "BoatSpeed":
+                    boatSpeedSelect.setSelected(importantAnnotations.get(key));
+                    break;
+
+                case "BoatTrack":
+                    boatTrackSelect.setSelected(importantAnnotations.get(key));
+                    break;
+
+                case "BoatName":
+                    boatNameSelect.setSelected(importantAnnotations.get(key));
+                    break;
+
+                default:
+                    break;
+            }
+        }
+    }
+
+    /**
+     * View did load
+     * @param location .
+     * @param resources .
+     */
+    @Override
+    public void initialize(URL location, ResourceBundle resources) {
+        boatWakeSelect.setOnAction(event -> {
+            setAnnotation("BoatWake", boatWakeSelect.isSelected());
+            sendUpdate();
+        });
+
+        boatSpeedSelect.setOnAction(event -> {
+            setAnnotation("BoatSpeed", boatSpeedSelect.isSelected());
+            sendUpdate();
+        });
+
+        boatTrackSelect.setOnAction(event -> {
+            setAnnotation("BoatTrack", boatTrackSelect.isSelected());
+            sendUpdate();
+        });
+
+        boatNameSelect.setOnAction(event -> {
+            setAnnotation("BoatName", boatNameSelect.isSelected());
+            sendUpdate();
+        });
+
+        closeButton.setOnAction(event -> stage.close());
+    }
+}

src/main/java/seng302/controllers/RaceViewController.java

@@ -1,26 +1,27 @@
 package seng302.controllers;
 
-import com.sun.scenario.effect.impl.sw.sse.SSEBlend_SRC_OUTPeer;
 import javafx.animation.Animation;
 import javafx.animation.KeyFrame;
 import javafx.animation.Timeline;
 import javafx.beans.value.ChangeListener;
 import javafx.beans.value.ObservableValue;
-import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
 import javafx.fxml.FXMLLoader;
+import javafx.scene.Scene;
+import javafx.scene.control.Button;
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.Slider;
 import javafx.scene.layout.AnchorPane;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.VBox;
 import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
 import javafx.scene.text.Text;
 import javafx.stage.Stage;
+import javafx.stage.StageStyle;
 import javafx.util.Duration;
 import javafx.util.StringConverter;
 import seng302.models.*;
-import seng302.models.parsers.ConfigParser;
 import seng302.models.parsers.StreamParser;
 
 import java.io.IOException;
@@ -43,6 +44,8 @@ public class RaceViewController extends Thread{
     @FXML
     private Slider annotationSlider;
     @FXML
+    private Button selectAnnotationBtn;
+    @FXML
     private CanvasController includedCanvasController;
 
     private ArrayList<Yacht> startingBoats = new ArrayList<>();
@@ -52,6 +55,8 @@ public class RaceViewController extends Thread{
     private ArrayList<Yacht> boatOrder = new ArrayList<>();
     private Race race;
     private Stage stage;
+    private Integer annotationLevel;
+    private Map<String, Boolean> importantAnnotations = new HashMap<>();
 
     public void initialize() {
 
@@ -79,9 +84,53 @@ public class RaceViewController extends Thread{
 //        windDirectionText.setText(String.format("%.1f°", windDirection));
 //        windArrowText.setRotate(windDirection);
         includedCanvasController.timer.start();
+
+        selectAnnotationBtn.setOnAction(event -> {
+            loadSelectAnnotationView();
+        });
     }
 
+    /**
+     * Important annotations have been changed, update this view
+     * @param newImportantAnnotations HashMap containing whether or not annotations
+     *                                are important
+     */
+    void importantAnnotationsChanged(Map<String, Boolean> newImportantAnnotations){
+        this.importantAnnotations = newImportantAnnotations;
+        setAnnotations((int)annotationSlider.getValue());
+    }
 
+    /**
+     * Loads the "select annotations" view in a new window
+     */
+    private void loadSelectAnnotationView() {
+        try {
+            FXMLLoader fxmlLoader = new FXMLLoader();
+            Stage stage = new Stage();
+
+            // Set controller
+            ImportantAnnotationController controller = new ImportantAnnotationController(this, stage);
+            fxmlLoader.setController(controller);
+
+            // Load FXML and set CSS
+            fxmlLoader.setLocation(getClass().getResource("/views/importantAnnotationSelectView.fxml"));
+            Scene scene = new Scene(fxmlLoader.load(), 469, 248);
+            scene.getStylesheets().add(getClass().getResource("/css/master.css").toString());
+            stage.initStyle(StageStyle.UNDECORATED);
+
+            stage.setScene(scene);
+            stage.show();
+
+            controller.loadState(importantAnnotations);
+
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+    Map<String, Boolean> getImportantAnnotations(){
+        return importantAnnotations;
+    }
 
     private void initializeSettings() {
         displayFps = true;
@@ -93,13 +142,13 @@ public class RaceViewController extends Thread{
             }
         });
 
-        //SLIFER STUFF BELOW
+        //SLIDER STUFF BELOW
         annotationSlider.setLabelFormatter(new StringConverter<Double>() {
             @Override
             public String toString(Double n) {
                 if (n == 0) return "None";
                 if (n == 1) return "Low";
-                if (n == 2) return "Medium";
+                if (n == 2) return "Important";
                 if (n == 3) return "All";
 
                 return "All";
@@ -112,7 +161,7 @@ public class RaceViewController extends Thread{
                         return 0d;
                     case "Low":
                         return 1d;
-                    case "Medium":
+                    case "Important":
                         return 2d;
                     case "All":
                         return 3d;
@@ -303,6 +352,7 @@ public class RaceViewController extends Thread{
     private void showOrder() {
         positionVbox.getChildren().clear();
         positionVbox.getChildren().removeAll();
+        positionVbox.getStylesheets().add(getClass().getResource("/css/master.css").toString());
 
 //        for (Boat boat : boatOrder) {
 //            positionVbox.getChildren().add(new Text(boat.getShortName() + " " + boat.getSpeedInKnots() + " Knots"));
@@ -310,11 +360,17 @@ public class RaceViewController extends Thread{
 
         for (Yacht boat : StreamParser.getBoatsPos().values()) {
             if (boat.getBoatStatus() == 3) {  // 3 is finish status
-                positionVbox.getChildren().add(new Text(boat.getPosition() + ". " +
+                Text textToAdd = new Text(boat.getPosition() + ". " +
-                        boat.getShortName() + " (Finished)"));
+                        boat.getShortName() + " (Finished)");
+                textToAdd.setFill(Paint.valueOf("#d3d3d3"));
+                positionVbox.getChildren().add(textToAdd);
+
             } else {
-                positionVbox.getChildren().add(new Text(boat.getPosition() + ". " +
+                Text textToAdd = new Text(boat.getPosition() + ". " +
-                        boat.getShortName() + " "));
+                        boat.getShortName() + " ");
+                textToAdd.setFill(Paint.valueOf("#d3d3d3"));
+                textToAdd.setStyle("");
+                positionVbox.getChildren().add(textToAdd);
             }
 
         }
@@ -401,16 +457,41 @@ public class RaceViewController extends Thread{
                     }
                 }
                 break;
+            // Important Annotations
             case 2:
                 for (RaceObject ro : includedCanvasController.getRaceObjects()) {
                     if(ro instanceof BoatGroup) {
                         BoatGroup bg = (BoatGroup) ro;
+
+                        if (importantAnnotations.containsKey("BoatName") && importantAnnotations.get("BoatName")){
                             bg.setTeamNameObjectVisible(true);
-                        bg.setVelocityObjectVisible(false);
+                        }
+                        else{
+                            bg.setTeamNameObjectVisible(false);
+                        }
+
+                        if (importantAnnotations.containsKey("BoatSpeed") && importantAnnotations.get("BoatSpeed")){
+                            bg.setVelocityObjectVisible(true);
+                        }
+                        else{
+                            bg.setTeamNameObjectVisible(false);
+                        }
+
+                        if (importantAnnotations.containsKey("BoatTrack") && importantAnnotations.get("BoatTrack")){
                             bg.setLineGroupVisible(true);
+                        }
+                        else{
+                            bg.setLineGroupVisible(false);
+                        }
+
+                        if (importantAnnotations.containsKey("BoatWake") && importantAnnotations.get("BoatWake")){
+                            bg.setWakeVisible(true);
+                        }
+                        else{
                             bg.setWakeVisible(false);
                         }
                     }
+                }
                 break;
             case 3:
                 for (RaceObject ro : includedCanvasController.getRaceObjects()) {

src/main/resources/css/master.css

@@ -0,0 +1,166 @@
+/**
+Background colours
+ */
+.background-blue{
+    -fx-background-color: #119796;
+}
+
+.background-dark{
+    -fx-background-color: #2C2c36;
+}
+
+/**
+Exit button with no background
+ */
+.clear-exit-btn{
+    -fx-background-insets: 0;
+    -fx-background-color:  #119796;
+    -fx-border-style: none;
+}
+
+/**
+Buttons
+ */
+.blue-ui-btn{
+    -fx-background-color: #119796;
+    -fx-text-fill: #fff;
+}
+
+.text-white {
+    -fx-text-fill: white !important;
+    -fx-fill:white !important;
+}
+
+/**
+Sliders
+ */
+.ui-slider .thumb {
+    -fx-background-color: rgb(60, 60, 60);
+    -fx-border-radius: 10;
+    -fx-border-color: darkgray;
+}
+
+.ui-slider .track{
+    -fx-background-color: #119796;
+}
+
+.ui-slider .axis{
+    -fx-tick-label-fill: white;
+}
+
+.ui-slider .axis .axis-label{
+    -fx-text-fill: white;
+}
+
+/**
+Checkbox
+ */
+.ui-checkbox .box{
+    -fx-background-color: white;
+    -fx-graphic:none;
+    -fx-shape: none;
+}
+
+.ui-checkbox .box .mark{
+    -fx-background-image: none;
+    -fx-image: none;
+    -fx-graphic: none;
+    -fx-shape: none;
+}
+
+.ui-checkbox:selected .box{
+    -fx-background-color: #119796;
+    -fx-shape: none;
+}
+
+.ui-checkbox:selected .box .mark{
+    -fx-background-color: #119796;
+    -fx-shape: none;
+    -fx-graphic: none;
+}
+
+/**
+Table
+ */
+.ui-table{
+    -fx-background-color: transparent;
+}
+
+.ui-table:focused{
+    -fx-background-color: transparent;
+}
+
+.ui-table .column-header-background{
+    -fx-background-color: white
+}
+
+.ui-table .column-header-background .label{
+    -fx-background-color: transparent;
+    -fx-text-fill: black;
+}
+
+.ui-table .column-header {
+    -fx-background-color: transparent;
+}
+
+.ui-table .table-cell{
+    -fx-text-fill: white;
+    -fx-border-style: none;
+}
+
+.table-row-cell{
+    -fx-background-color: #119796;
+    -fx-background-insets: 0, 0 0 1 0;
+    -fx-padding: 0.0em; /* 0 */
+    -fx-border-style: none;
+}
+
+.table-row-cell:odd{
+    -fx-background-color: #0e6d6c;
+    -fx-background-insets: 0, 0 0 1 0;
+    -fx-padding: 0.0em; /* 0 */
+    -fx-border-style: none;
+}
+
+.table-row-cell:selected {
+    -fx-background-color: #005797;
+    -fx-background-insets: 0;
+    -fx-border-style: none;
+}
+
+/**
+Remove scroll bars
+ */
+.ui-table *.scroll-bar:horizontal *.increment-button,
+.ui-table *.scroll-bar:horizontal *.decrement-button {
+    -fx-background-color: null;
+    -fx-background-radius: 0;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+
+.ui-table *.scroll-bar:horizontal *.increment-arrow,
+.ui-table *.scroll-bar:horizontal *.decrement-arrow {
+    -fx-background-color: null;
+    -fx-background-radius: 0;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+    -fx-shape: null;
+}
+
+.ui-table *.scroll-bar:vertical *.increment-arrow,
+.ui-table *.scroll-bar:vertical *.decrement-arrow {
+    -fx-background-color: null;
+    -fx-background-radius: 0;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+    -fx-shape: null;
+}
+
+.ui-table *.scroll-bar:vertical *.increment-button,
+.ui-table *.scroll-bar:vertical *.decrement-button {
+    -fx-background-color: null;
+    -fx-background-radius: 0;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}

src/main/resources/views/MainView.fxml

@@ -9,7 +9,7 @@
 
 <AnchorPane fx:id="contentPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.controllers.Controller">
    <children>
-      <GridPane nodeOrientation="LEFT_TO_RIGHT" prefWidth="800.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+      <GridPane nodeOrientation="LEFT_TO_RIGHT" prefWidth="800.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <columnConstraints>
           <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
         </columnConstraints>
@@ -18,23 +18,23 @@
             <RowConstraints maxHeight="52.0" minHeight="52.0" prefHeight="52.0" vgrow="SOMETIMES" />
             <RowConstraints maxHeight="0.0" percentHeight="8.0" prefHeight="0.0" vgrow="SOMETIMES" />
             <RowConstraints maxHeight="28.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="55.0" minHeight="55.0" percentHeight="5.0" prefHeight="55.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="55.0" minHeight="55.0" percentHeight="9.0" prefHeight="55.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="0.0" minHeight="0.0" percentHeight="23.0" prefHeight="0.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="0.0" minHeight="0.0" percentHeight="29.0" prefHeight="0.0" vgrow="SOMETIMES" />
             <RowConstraints maxHeight="93.0" minHeight="72.0" prefHeight="72.0" vgrow="SOMETIMES" />
           <RowConstraints maxHeight="283.0" minHeight="262.0" prefHeight="283.0" vgrow="SOMETIMES" />
         </rowConstraints>
          <children>
-            <Label alignment="CENTER" text="Welcome to Race Vision" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
+            <Label alignment="CENTER" text="Welcome to Race Vision" textFill="WHITE" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
                <font>
                   <Font size="40.0" />
                </font>
             </Label>
-            <Label text="Your live AC35 livestream" GridPane.halignment="CENTER" GridPane.rowIndex="1">
+            <Label text="Your live AC35 livestream" textFill="WHITE" GridPane.halignment="CENTER" GridPane.rowIndex="1">
                <font>
                   <Font size="20.0" />
                </font>
             </Label>
-            <Label text="Livestream Status:" GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="BOTTOM">
+            <Label text="Livestream Status:" textFill="WHITE" GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="BOTTOM">
                <font>
                   <Font size="28.0" />
                </font>
@@ -44,17 +44,17 @@
                   <Font size="27.0" />
                </font>
             </Label>
-            <Button fx:id="streamButton" mnemonicParsing="false" onAction="#startStream" text="Click to stream" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
+            <Button fx:id="streamButton" mnemonicParsing="false" onAction="#startStream" styleClass="blue-ui-btn" text="Click to stream" GridPane.halignment="CENTER" GridPane.rowIndex="4" />
-            <Button fx:id="switchToRaceViewButton" disable="true" mnemonicParsing="false" onAction="#switchToRaceView" text="Watch Race" GridPane.halignment="CENTER" GridPane.rowIndex="7" GridPane.valignment="TOP" />
+            <Button fx:id="switchToRaceViewButton" disable="true" mnemonicParsing="false" onAction="#switchToRaceView" styleClass="blue-ui-btn" text="Watch Race" GridPane.halignment="CENTER" GridPane.rowIndex="7" GridPane.valignment="TOP" />
-            <TableView fx:id="teamList" maxWidth="500.0" prefHeight="200.0" prefWidth="210.0" GridPane.halignment="CENTER" GridPane.rowIndex="5">
+            <TableView fx:id="teamList" maxWidth="661.0" prefHeight="324.0" prefWidth="629.0" styleClass="ui-table" GridPane.halignment="CENTER" GridPane.hgrow="NEVER" GridPane.rowIndex="5" GridPane.vgrow="NEVER">
               <columns>
                   <TableColumn fx:id="posCol" editable="false" maxWidth="74.0" minWidth="74.0" prefWidth="74.0" resizable="false" sortable="false" text="Position" />
                 <TableColumn fx:id="boatNameCol" editable="false" maxWidth="171.0" minWidth="171.0" prefWidth="171.0" resizable="false" sortable="false" text="Boat Name" />
-                <TableColumn fx:id="shortNameCol" editable="false" maxWidth="107.0" minWidth="107.0" prefWidth="107.0" resizable="false" sortable="false" text="Short Name" />
+                <TableColumn fx:id="shortNameCol" editable="false" maxWidth="155.18472290039062" minWidth="107.0" prefWidth="155.18472290039062" resizable="false" sortable="false" text="Short Name" />
-                  <TableColumn fx:id="countryCol" editable="false" maxWidth="147.0" minWidth="147.0" prefWidth="147.0" resizable="false" sortable="false" text="Country" />
+                  <TableColumn fx:id="countryCol" editable="false" maxWidth="258.9999694824219" minWidth="147.0" prefWidth="258.9999694824219" resizable="false" sortable="false" text="Country" />
               </columns>
                <GridPane.margin>
-                  <Insets />
+                  <Insets top="10.0" />
                </GridPane.margin>
             </TableView>
             <Label fx:id="realTime" text="Local time" visible="false" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="BOTTOM" />

src/main/resources/views/RaceView.fxml

@@ -28,36 +28,37 @@
         <RowConstraints />
     </rowConstraints>
     <children>
-        <AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.rowSpan="3">
+        <AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #2C2c36;" GridPane.rowSpan="3">
             <children>
-                <Label layoutX="11.0" layoutY="259.0" text="Team Position" />
+                <Label layoutX="11.0" layoutY="259.0" text="Team Position" textFill="WHITE" />
-                <Label layoutX="13.0" layoutY="432.0" text="Settings" />
+                <Label layoutX="13.0" layoutY="432.0" text="Settings" textFill="WHITE" />
-                <Label layoutX="11.0" layoutY="14.0" text="Timer" />
+                <Label layoutX="11.0" layoutY="14.0" text="Timer" textFill="WHITE" />
-                <Label layoutX="11.0" layoutY="88.0" text="Wind direction" />
+                <Label layoutX="11.0" layoutY="88.0" text="Wind direction" textFill="WHITE" />
-                <Circle fx:id="windBackgroundCircle" blendMode="DARKEN" fill="#76baf8" layoutX="110.0" layoutY="166.0" radius="35.0" stroke="#686868" strokeType="INSIDE" strokeWidth="3.0" />
+                <Circle fx:id="windBackgroundCircle" blendMode="DARKEN" fill="#3dcdc8" layoutX="110.0" layoutY="166.0" radius="35.0" stroke="#d7d7d7" strokeType="INSIDE" strokeWidth="3.0" />
-                <Text fx:id="windArrowText" fill="#686868" layoutX="86.0" layoutY="186.0" strokeType="OUTSIDE" strokeWidth="0.0" text="↑">
+                <Text fx:id="windArrowText" fill="#a8a8a8" layoutX="86.0" layoutY="186.0" strokeType="OUTSIDE" strokeWidth="0.0" text="↑">
                     <font>
                         <Font name="AdobeArabic-Regular" size="55.0" />
                     </font>
                 </Text>
-                <Text fx:id="windDirectionText" fill="#a8a7a7" layoutX="171.0" layoutY="214.0" strokeType="OUTSIDE" strokeWidth="0.0" text="0.0°" textAlignment="RIGHT">
+                <Text fx:id="windDirectionText" fill="#d3d3d3" layoutX="171.0" layoutY="214.0" strokeType="OUTSIDE" strokeWidth="0.0" text="0.0°" textAlignment="RIGHT">
                     <font>
                         <Font name="System Bold" size="13.0" />
                     </font>
                 </Text>
-                <CheckBox fx:id="toggleFps" layoutX="21.0" layoutY="453.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="143.0" selected="true" text="Show FPS" />
+                <CheckBox fx:id="toggleFps" graphicTextGap="0.0" layoutX="21.0" layoutY="453.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="143.0" selected="true" styleClass="ui-checkbox" text="Show FPS" textFill="WHITE" />
-            <VBox fx:id="positionVbox" layoutX="12.0" layoutY="280.0" prefHeight="140.0" prefWidth="200.0" />
+            <VBox fx:id="positionVbox" layoutX="12.0" layoutY="280.0" prefHeight="140.0" prefWidth="200.0" styleClass="text-white" />
             <Pane layoutX="11.0" layoutY="30.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="51.0" prefWidth="193.0">
                <children>
-                  <Text fx:id="timerLabel" layoutX="-26.0" layoutY="34.0" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" textAlignment="CENTER" wrappingWidth="246.0">
+                  <Text fx:id="timerLabel" fill="#f8f8f8" layoutX="-26.0" layoutY="34.0" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" textAlignment="CENTER" wrappingWidth="246.0">
                      <font>
                         <Font size="25.0" />
                      </font>
                   </Text>
                </children>
             </Pane>
-            <Slider fx:id="annotationSlider" blockIncrement="1.0" layoutX="38.0" layoutY="527.0" majorTickUnit="1.0" max="3.0" minorTickCount="0" prefHeight="51.0" prefWidth="170.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" />
+            <Slider fx:id="annotationSlider" blockIncrement="1.0" layoutX="38.0" layoutY="527.0" majorTickUnit="1.0" max="3.0" minorTickCount="0" prefHeight="51.0" prefWidth="170.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" styleClass="ui-slider" />
-            <Label layoutX="10.0" layoutY="499.0" text="Annotations" />
+            <Label layoutX="10.0" layoutY="499.0" text="Annotations" textFill="WHITE" />
+            <Button fx:id="selectAnnotationBtn" layoutX="35.0" layoutY="578.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="170.0" styleClass="blue-ui-btn" text="Select Annotations" textFill="WHITE" />
             </children>
         </AnchorPane>
         <AnchorPane fx:id="contentAnchorPane" prefHeight="960.0" prefWidth="1280.0" style="-fx-background-color: skyblue;" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowSpan="2147483647" GridPane.valignment="TOP">

src/main/resources/views/importantAnnotationSelectView.fxml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.control.*?>
+<?import javafx.scene.text.*?>
+<?import java.lang.*?>
+<?import javafx.scene.layout.*?>
+
+<AnchorPane fx:id="annotationSelectWindow" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="248.0" prefWidth="469.0" styleClass="background-blue" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+   <children>
+      <Text fill="WHITE" layoutX="26.0" layoutY="52.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Select important annotations">
+         <font>
+            <Font size="24.0" />
+         </font>
+      </Text>
+      <CheckBox fx:id="boatWakeSelect" layoutX="26.0" layoutY="80.0" mnemonicParsing="false" style="-fx-border-width: 0; -fx-background-insets: 0;" text="Boat Wakes" textFill="#e7e7e7" />
+      <CheckBox fx:id="boatSpeedSelect" layoutX="26.0" layoutY="111.0" mnemonicParsing="false" text="Boat Speed" textFill="#e7e7e7" />
+      <CheckBox fx:id="boatTrackSelect" layoutX="26.0" layoutY="142.0" mnemonicParsing="false" text="Boat Tracks" textFill="#e7e7e7" />
+      <CheckBox fx:id="boatNameSelect" layoutX="26.0" layoutY="175.0" mnemonicParsing="false" text="Boat Name" textFill="#e7e7e7" />
+      <Button fx:id="closeButton" layoutX="424.0" layoutY="-1.0" mnemonicParsing="false" prefHeight="11.0" prefWidth="49.0" style=": 0;" text="X" textFill="#ffffff4e">
+         <font>
+            <Font size="24.0" />
+         </font>
+         <styleClass>
+            <String fx:value="background-blue" />
+            <String fx:value="clearExitButton" />
+         </styleClass>
+      </Button>
+   </children>
+</AnchorPane>