Merge branch 'finish_calculator_GUI' into 'master'

Finished calculator GUI

See merge request cse1105/2018-2019/oopp-group-43/template!47
This commit is contained in:
Sem van der Hoeven
2019-03-28 21:37:43 +00:00
4 changed files with 580 additions and 24 deletions

View File

@@ -1,33 +1,33 @@
package greenify.client.controller;
import greenify.client.rest.UserService;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.control.TextField;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.AnchorPane;
import javafx.util.Duration;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import java.text.DecimalFormat;
@Controller
public class CalculatorController {
@Autowired
UserService userService;
@FXML
private Button calculatorGetStartedButton;
@FXML
private Button calculatorTravelButton;
@FXML
private Button calculatorHomeButton;
@FXML
private Button calculatorFoodButton;
@FXML
private Button calculatorShoppingButton;
//navigation panes
@FXML
private AnchorPane getStartedPane;
@FXML
@@ -35,9 +35,11 @@ public class CalculatorController {
@FXML
private AnchorPane homePane;
@FXML
private AnchorPane foodPane;
private ScrollPane foodPane;
@FXML
private AnchorPane shoppingPane;
//'get started' pane
@FXML
private Slider peopleInHouseholdSlider;
@FXML
@@ -48,19 +50,80 @@ public class CalculatorController {
private Label annualIncomeLabel;
@FXML
private Button saveButton;
//travel pane
@FXML
private TextField publicTransitField;
@FXML
private TextField airplaneTravelField;
@FXML
private TextField carTravelGasolineField;
@FXML
private Slider carTravelGasolineSlider;
@FXML
private Label carTravelGasolineLabel;
@FXML
private TextField carTravelDieselField;
@FXML
private Slider carTravelDieselSlider;
@FXML
private Label carTravelDieselLabel;
@FXML
private TextField carTravelElectricField;
@FXML
private Slider carTravelElectricSlider;
@FXML
private Label carTravelElectricLabel;
//home pane
@FXML
private Slider cleanEnergyPurchasedSlider;
@FXML
private Label cleanEnergyPurchasedLabel;
@FXML
private Slider waterUsageSlider;
@FXML
private Label waterUsageLabel;
//food pane
@FXML
private Slider meatFishEggsSlider;
@FXML
private Label meatFishEggsLabel;
@FXML
private Slider grainsBakedGoodsSlider;
@FXML
private Label grainsBakedGoodsLabel;
@FXML
private Slider dairySlider;
@FXML
private Label dairyLabel;
@FXML
private Slider fruitsVegetablesSlider;
@FXML
private Label fruitsVegetablesLabel;
@FXML
private Slider snacksDrinksSlider;
@FXML
private Label snacksDrinksLabel;
//shopping pane
@FXML
private Slider goodsSlider;
@FXML
private Label goodsLabel;
@FXML
private Slider servicesSlider;
@FXML
private Label servicesLabel;
/**
* initializes the window, performs some actions before loading all other things.
* it sets the sliders to snap to the ticks
* it adds listeners to all the sliders for updating the label next to them
* it sets the sliders to snap to the ticks.
* it adds listeners to all the sliders for updating the label they are associated with.
*/
public void initialize() {
peopleInHouseholdSlider.setSnapToTicks(true);
annualIncomeSlider.setSnapToTicks(true);
//add listener to slider for amount of people in household
peopleInHouseholdSlider.valueProperty().addListener(new ChangeListener<Number>() {
@@ -78,6 +141,83 @@ public class CalculatorController {
annualIncomeLabel.setText("" + (newValue.intValue() * 1000));
}
});
addSliderListenerCarUsage(carTravelGasolineSlider, carTravelGasolineLabel, " km/L");
addSliderListenerCarUsage(carTravelDieselSlider, carTravelDieselLabel, " km/L");
addSliderListenerCarUsage(carTravelElectricSlider, carTravelElectricLabel, " km/Le");
cleanEnergyPurchasedSlider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
cleanEnergyPurchasedLabel.setText(newValue.intValue() + " %");
}
});
waterUsageSlider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
waterUsageLabel.setText(newValue.intValue() + "% of similar households");
}
});
addSliderListenerDailyServing(meatFishEggsSlider, meatFishEggsLabel);
addSliderListenerDailyServing(grainsBakedGoodsSlider, grainsBakedGoodsLabel);
addSliderListenerDailyServing(dairySlider, dairyLabel);
addSliderListenerDailyServing(fruitsVegetablesSlider, fruitsVegetablesLabel);
addSliderListenerDailyServing(snacksDrinksSlider, snacksDrinksLabel);
addSliderListenerGoodsServices(goodsSlider, goodsLabel);
addSliderListenerGoodsServices(servicesSlider, servicesLabel);
}
/**
* adds the listener to the given slider and displays it's output on a given label.
* @param slider the slider to attach the listener to.
* @param label the label to display the slider output on.
*/
private void addSliderListenerCarUsage(Slider slider, Label label, String unit) {
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
label.setText(newValue.intValue() + unit);
}
});
}
private void addSliderListenerDailyServing(Slider slider, Label label) {
DecimalFormat df = new DecimalFormat("0.0");
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
label.setText(df.format(newValue.doubleValue()) + " daily servings per person");
}
});
}
private void addSliderListenerGoodsServices(Slider slider, Label label) {
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
label.setText(newValue.intValue() + "€ / month");
}
});
}
private void addSlideInAnimation(Node node) {
Timeline timeline = new Timeline();
KeyValue keyValue = new KeyValue(node.translateXProperty(), 0, Interpolator.EASE_OUT);
KeyFrame keyFrame = new KeyFrame(Duration.millis(600), keyValue);
timeline.getKeyFrames().add(keyFrame);
timeline.play();
}
/**
@@ -100,11 +240,14 @@ public class CalculatorController {
* @param event the click of the button
*/
public void displayTravel(ActionEvent event) {
addSlideInAnimation(travelPane);
getStartedPane.setVisible(false);
travelPane.setVisible(true);
homePane.setVisible(false);
foodPane.setVisible(false);
shoppingPane.setVisible(false);
}
/**

View File

@@ -1,10 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import java.lang.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane prefHeight="703.0" prefWidth="820.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="greenify.client.controller.CalculatorController">
<children>
@@ -100,14 +113,14 @@
</font></Button>
</children>
</AnchorPane>
<AnchorPane fx:id="getStartedPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false" AnchorPane.leftAnchor="0.0">
<AnchorPane fx:id="getStartedPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" AnchorPane.leftAnchor="0.0">
<children>
<Text layoutX="224.0" layoutY="96.0" strokeType="OUTSIDE" strokeWidth="0.0" text="1. How many people live in your household?">
<font>
<Font size="19.0" />
</font>
</Text>
<Slider fx:id="peopleInHouseholdSlider" blockIncrement="1.0" layoutX="260.0" layoutY="147.0" majorTickUnit="1.0" max="6.0" min="1.0" minorTickCount="0" prefHeight="38.0" prefWidth="300.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" />
<Slider fx:id="peopleInHouseholdSlider" blockIncrement="1.0" layoutX="260.0" layoutY="147.0" majorTickUnit="1.0" max="6.0" min="1.0" minorTickCount="0" prefHeight="38.0" prefWidth="300.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" styleClass="slidertje" />
<Label fx:id="peopleInHouseHoldLabel" alignment="CENTER" contentDisplay="CENTER" layoutX="612.0" layoutY="70.0" prefHeight="38.0" prefWidth="44.0" text="0">
<font>
<Font size="20.0" />
@@ -133,11 +146,101 @@
</Label>
<Button fx:id="getStartedNextButton" layoutX="383.0" layoutY="406.0" mnemonicParsing="false" onAction="#displayTravel" styleClass="nextButton" text="Next" />
</children></AnchorPane>
<AnchorPane fx:id="travelPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0">
<AnchorPane fx:id="travelPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false">
<children>
<ScrollPane layoutX="158.0" layoutY="109.0" prefHeight="215.0" prefWidth="499.0">
<content>
<TextField prefHeight="33.0" prefWidth="497.0" />
<AnchorPane prefHeight="505.0" prefWidth="497.0">
<children>
<Text fill="#505050" layoutX="14.0" layoutY="27.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Gasoline">
<font>
<Font size="16.0" />
</font>
</Text>
<TextField fx:id="carTravelGasolineField" layoutX="14.0" layoutY="38.0" prefHeight="31.0" prefWidth="405.0" promptText="16.400">
<font>
<Font size="15.0" />
</font>
</TextField>
<HBox alignment="CENTER_LEFT" layoutX="419.0" layoutY="38.0" prefHeight="31.0" prefWidth="54.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="49.0">
<font>
<Font size="13.0" />
</font>
</Text>
</children>
</HBox>
<Slider fx:id="carTravelGasolineSlider" layoutX="14.0" layoutY="122.0" majorTickUnit="15.0" max="115.0" min="10.0" minorTickCount="0" prefHeight="14.0" prefWidth="453.0" showTickLabels="true" showTickMarks="true" />
<HBox alignment="CENTER" layoutX="204.0" layoutY="77.0" prefHeight="31.0" prefWidth="89.0" styleClass="km-indicator">
<children>
<Label fx:id="carTravelGasolineLabel" alignment="TOP_CENTER" contentDisplay="CENTER" text="0 km/L">
<font>
<Font size="13.0" />
</font>
</Label>
</children>
</HBox>
<HBox alignment="CENTER" layoutX="204.0" layoutY="239.0" prefHeight="31.0" prefWidth="89.0" styleClass="km-indicator">
<children>
<Label fx:id="carTravelDieselLabel" alignment="TOP_CENTER" contentDisplay="CENTER" text="0 km/L">
<font>
<Font size="13.0" />
</font>
</Label>
</children>
</HBox>
<Slider fx:id="carTravelDieselSlider" layoutX="14.0" layoutY="285.0" majorTickUnit="15.0" max="115.0" min="10.0" minorTickCount="0" prefHeight="14.0" prefWidth="453.0" showTickLabels="true" showTickMarks="true" />
<HBox alignment="CENTER_LEFT" layoutX="419.0" layoutY="200.0" prefHeight="31.0" prefWidth="54.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="49.0">
<font>
<Font size="13.0" />
</font>
</Text>
</children>
</HBox>
<TextField fx:id="carTravelDieselField" layoutX="14.0" layoutY="200.0" prefHeight="31.0" prefWidth="405.0" promptText="15.400">
<font>
<Font size="15.0" />
</font>
</TextField>
<Text fill="#505050" layoutX="14.0" layoutY="189.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Diesel">
<font>
<Font size="16.0" />
</font>
</Text>
<Text fill="#505050" layoutX="14.0" layoutY="354.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Electric">
<font>
<Font size="16.0" />
</font>
</Text>
<TextField fx:id="carTravelElectricField" layoutX="14.0" layoutY="365.0" prefHeight="31.0" prefWidth="405.0" promptText="14.900">
<font>
<Font size="15.0" />
</font>
</TextField>
<HBox alignment="CENTER_LEFT" layoutX="419.0" layoutY="365.0" prefHeight="31.0" prefWidth="54.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="49.0">
<font>
<Font size="13.0" />
</font>
</Text>
</children>
</HBox>
<Slider fx:id="carTravelElectricSlider" layoutX="14.0" layoutY="450.0" majorTickUnit="15.0" max="115.0" min="10.0" minorTickCount="0" prefHeight="14.0" prefWidth="453.0" showTickLabels="true" showTickMarks="true" />
<HBox alignment="CENTER" layoutX="204.0" layoutY="404.0" prefHeight="31.0" prefWidth="89.0" styleClass="km-indicator">
<children>
<Label fx:id="carTravelElectricLabel" alignment="TOP_CENTER" contentDisplay="CENTER" text="0 km/Le">
<font>
<Font size="13.0" />
</font>
</Label>
</children>
</HBox>
</children>
</AnchorPane>
</content></ScrollPane>
<Text layoutX="300.0" layoutY="36.0" strokeType="OUTSIDE" strokeWidth="0.0" text="How do you get around?">
<font>
@@ -153,13 +256,19 @@
<Font size="18.0" />
</font>
</Text>
<TextField fx:id="publicTransitField" alignment="CENTER_RIGHT" layoutX="158.0" layoutY="394.0" prefHeight="31.0" prefWidth="499.0" promptText="0" />
<TextField fx:id="publicTransitField" alignment="CENTER_RIGHT" layoutX="158.0" layoutY="394.0" prefHeight="31.0" prefWidth="499.0" promptText="0">
<font>
<Font size="18.0" />
</font></TextField>
<Text fill="#727272" layoutX="350.0" layoutY="476.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Airplane travel">
<font>
<Font size="18.0" />
</font>
</Text>
<TextField fx:id="airplaneTravelField" alignment="CENTER_RIGHT" layoutX="158.0" layoutY="495.0" prefHeight="31.0" prefWidth="499.0" promptText="0" />
<TextField fx:id="airplaneTravelField" alignment="CENTER_RIGHT" layoutX="158.0" layoutY="495.0" prefHeight="31.0" prefWidth="499.0" promptText="0">
<font>
<Font size="18.0" />
</font></TextField>
<HBox alignment="CENTER_LEFT" layoutX="659.0" layoutY="394.0" prefHeight="31.0" prefWidth="62.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="63.0">
@@ -181,9 +290,295 @@
<Button fx:id="travelNextButton" layoutX="383.0" layoutY="559.0" mnemonicParsing="false" onAction="#displayHome" styleClass="nextButton" text="Next" />
</children>
</AnchorPane>
<AnchorPane fx:id="homePane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false" />
<AnchorPane fx:id="foodPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false" />
<AnchorPane fx:id="shoppingPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false" />
<AnchorPane fx:id="homePane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false">
<children>
<Text layoutX="245.0" layoutY="36.0" strokeType="OUTSIDE" strokeWidth="0.0" text="How much do you use in your home?">
<font>
<Font size="20.0" />
</font>
</Text>
<Text fill="#727272" layoutX="177.0" layoutY="85.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Electricity">
<font>
<Font size="18.0" />
</font>
</Text>
<TextField layoutX="177.0" layoutY="105.0" prefHeight="31.0" prefWidth="434.0" promptText="1,570">
<font>
<Font size="15.0" />
</font>
</TextField>
<HBox alignment="CENTER_LEFT" layoutX="616.0" layoutY="105.0" prefHeight="31.0" prefWidth="54.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="€/year" wrappingWidth="41.0">
<font>
<Font size="13.0" />
</font>
<HBox.margin>
<Insets left="3.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<Slider fx:id="waterUsageSlider" blockIncrement="100.0" layoutX="177.0" layoutY="509.0" majorTickUnit="100.0" max="300.0" minorTickCount="0" prefHeight="24.0" prefWidth="499.0" showTickLabels="true" showTickMarks="true" />
<Slider fx:id="cleanEnergyPurchasedSlider" blockIncrement="25.0" layoutX="177.0" layoutY="188.0" minorTickCount="0" prefHeight="24.0" prefWidth="499.0" showTickLabels="true" showTickMarks="true" />
<Text fill="#6f6f6f" layoutX="238.0" layoutY="165.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Percent purchased from clean energy program:">
<font>
<Font size="15.0" />
</font>
</Text>
<HBox alignment="CENTER" layoutX="553.0" layoutY="146.0" prefHeight="27.0" prefWidth="55.0" styleClass="km-indicator">
<children>
<Label fx:id="cleanEnergyPurchasedLabel" text="0 %">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<Button layoutX="400.0" layoutY="547.0" mnemonicParsing="false" onAction="#displayFood" styleClass="nextButton" text="Next" />
<Text fill="#727272" layoutX="177.0" layoutY="255.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Natural gas">
<font>
<Font size="18.0" />
</font>
</Text>
<HBox alignment="CENTER_LEFT" layoutX="616.0" layoutY="262.0" prefHeight="31.0" prefWidth="54.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="€/year" wrappingWidth="41.0">
<font>
<Font size="13.0" />
</font>
<HBox.margin>
<Insets left="3.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<TextField layoutX="177.0" layoutY="262.0" prefHeight="31.0" prefWidth="434.0" promptText="2,000">
<font>
<Font size="15.0" />
</font>
</TextField>
<HBox alignment="CENTER_LEFT" layoutX="616.0" layoutY="325.0" prefHeight="31.0" prefWidth="54.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="€/year" wrappingWidth="41.0">
<font>
<Font size="13.0" />
</font>
<HBox.margin>
<Insets left="3.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<TextField layoutX="177.0" layoutY="325.0" prefHeight="31.0" prefWidth="434.0" promptText="3,100">
<font>
<Font size="15.0" />
</font>
</TextField>
<Text fill="#727272" layoutX="177.0" layoutY="316.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Heating oil &amp; other fuels">
<font>
<Font size="18.0" />
</font>
</Text>
<Text fill="#727272" layoutX="177.0" layoutY="383.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Living space area">
<font>
<Font size="18.0" />
</font>
</Text>
<TextField layoutX="177.0" layoutY="390.0" prefHeight="31.0" prefWidth="434.0" promptText="1,570">
<font>
<Font size="15.0" />
</font>
</TextField>
<HBox alignment="CENTER_LEFT" layoutX="616.0" layoutY="390.0" prefHeight="31.0" prefWidth="0.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="m²" textAlignment="CENTER" wrappingWidth="41.0">
<font>
<Font size="19.0" />
</font>
<HBox.margin>
<Insets left="3.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<Text fill="#727272" layoutX="177.0" layoutY="454.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Water usage">
<font>
<Font size="18.0" />
</font>
</Text>
<HBox alignment="CENTER" layoutX="298.0" layoutY="459.0" prefHeight="27.0" prefWidth="258.0" styleClass="km-indicator">
<children>
<Label fx:id="waterUsageLabel" text="0% of similar households">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
</children></AnchorPane>
<ScrollPane fx:id="foodPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false">
<content>
<AnchorPane prefHeight="1000.0" prefWidth="817.0">
<children>
<Text layoutX="146.0" layoutY="36.0" strokeType="OUTSIDE" strokeWidth="0.0" text="How much does the average person in your household eat?">
<font>
<Font size="20.0" />
</font>
</Text>
<Text fill="#727272" layoutX="146.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Meat, fish, eggs">
<font>
<Font size="18.0" />
</font>
</Text>
<Slider fx:id="meatFishEggsSlider" blockIncrement="2.5" layoutX="146.0" layoutY="205.0" majorTickUnit="2.5" max="7.5" minorTickCount="0" prefHeight="24.0" prefWidth="517.0" showTickLabels="true" showTickMarks="true" />
<HBox alignment="CENTER" layoutX="299.0" layoutY="149.0" prefHeight="31.0" prefWidth="220.0" styleClass="km-indicator">
<children>
<Label fx:id="meatFishEggsLabel" text="2.6 daily servings per person">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<Text fill="#727272" layoutX="519.0" layoutY="115.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Average: 2,6">
<font>
<Font size="15.0" />
</font>
</Text>
<Text fill="#727272" layoutX="519.0" layoutY="276.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Average: 4,4">
<font>
<Font size="15.0" />
</font>
</Text>
<HBox alignment="CENTER" layoutX="299.0" layoutY="310.0" prefHeight="31.0" prefWidth="220.0" styleClass="km-indicator">
<children>
<Label fx:id="grainsBakedGoodsLabel" text="4,4 daily servings per person">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<Slider fx:id="grainsBakedGoodsSlider" blockIncrement="4.5" layoutX="146.0" layoutY="366.0" majorTickUnit="4.5" max="13.5" minorTickCount="0" prefHeight="24.0" prefWidth="517.0" showTickLabels="true" showTickMarks="true" />
<Text fill="#727272" layoutX="146.0" layoutY="278.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Grains &amp; baked goods">
<font>
<Font size="18.0" />
</font>
</Text>
<Text fill="#727272" layoutX="146.0" layoutY="439.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Dairy">
<font>
<Font size="18.0" />
</font>
</Text>
<Slider fx:id="dairySlider" blockIncrement="2.5" layoutX="146.0" layoutY="527.0" majorTickUnit="2.5" max="7.5" minorTickCount="0" prefHeight="24.0" prefWidth="517.0" showTickLabels="true" showTickMarks="true" />
<HBox alignment="CENTER" layoutX="299.0" layoutY="471.0" prefHeight="31.0" prefWidth="220.0" styleClass="km-indicator">
<children>
<Label fx:id="dairyLabel" text="2,4 daily servings per person">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<Text fill="#727272" layoutX="519.0" layoutY="437.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Average: 2,4">
<font>
<Font size="15.0" />
</font>
</Text>
<Text fill="#727272" layoutX="524.0" layoutY="776.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Average: 3,7">
<font>
<Font size="15.0" />
</font>
</Text>
<HBox alignment="CENTER" layoutX="304.0" layoutY="810.0" prefHeight="31.0" prefWidth="220.0" styleClass="km-indicator">
<children>
<Label fx:id="snacksDrinksLabel" text="3,7 daily servings per person">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<Slider fx:id="snacksDrinksSlider" blockIncrement="3.7" layoutX="151.0" layoutY="866.0" majorTickUnit="3.7" max="11.0" minorTickCount="0" prefHeight="24.0" prefWidth="517.0" showTickLabels="true" showTickMarks="true" />
<Text fill="#727272" layoutX="151.0" layoutY="778.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Snacks, drinks etc.">
<font>
<Font size="18.0" />
</font>
</Text>
<Text fill="#727272" layoutX="151.0" layoutY="617.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Fruits &amp; vegetables">
<font>
<Font size="18.0" />
</font>
</Text>
<Slider fx:id="fruitsVegetablesSlider" blockIncrement="3.9" layoutX="151.0" layoutY="705.0" majorTickUnit="3.9" max="11.6" minorTickCount="0" prefHeight="24.0" prefWidth="517.0" showTickLabels="true" showTickMarks="true" />
<HBox alignment="CENTER" layoutX="304.0" layoutY="649.0" prefHeight="31.0" prefWidth="220.0" styleClass="km-indicator">
<children>
<Label fx:id="fruitsVegetablesLabel" text="3,9 daily servings per person">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<Text fill="#727272" layoutX="524.0" layoutY="615.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Average: 3,9">
<font>
<Font size="15.0" />
</font>
</Text>
<Button layoutX="378.0" layoutY="926.0" mnemonicParsing="false" onAction="#displayShopping" styleClass="nextButton" text="Next" />
</children>
</AnchorPane>
</content>
</ScrollPane>
<AnchorPane fx:id="shoppingPane" layoutY="85.0" prefHeight="618.0" prefWidth="820.0" visible="false">
<children>
<Text layoutX="133.0" layoutY="50.0" strokeType="OUTSIDE" strokeWidth="0.0" text="How much do you spend on each of the following?">
<font>
<Font size="20.0" />
</font>
</Text>
<Text fill="#727272" layoutX="133.0" layoutY="119.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Goods">
<font>
<Font size="18.0" />
</font>
</Text>
<Text fill="#727272" layoutX="133.0" layoutY="310.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Services">
<font>
<Font size="18.0" />
</font>
</Text>
<Text fill="#727272" layoutX="518.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Average: 1.520 € / month">
<font>
<Font size="15.0" />
</font>
</Text>
<Text fill="#727272" layoutX="518.0" layoutY="309.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Average: 3.428 € / month">
<font>
<Font size="15.0" />
</font>
</Text>
<Slider fx:id="goodsSlider" blockIncrement="1520.0" layoutX="133.0" layoutY="209.0" majorTickUnit="1520.0" max="4560.0" minorTickCount="0" prefHeight="24.0" prefWidth="554.0" showTickLabels="true" showTickMarks="true" />
<HBox alignment="CENTER" layoutX="335.0" layoutY="145.0" prefHeight="31.0" prefWidth="150.0" styleClass="km-indicator">
<children>
<Label fx:id="goodsLabel" text="1.520 € / month">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<HBox alignment="CENTER" layoutX="335.0" layoutY="348.0" prefHeight="31.0" prefWidth="150.0" styleClass="km-indicator">
<children>
<Label fx:id="servicesLabel" text="3.428 € / month">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</HBox>
<Slider fx:id="servicesSlider" blockIncrement="3428.0" layoutX="133.0" layoutY="418.0" majorTickUnit="3428.0" max="10284.0" minorTickCount="0" prefHeight="24.0" prefWidth="554.0" showTickLabels="true" showTickMarks="true" />
</children></AnchorPane>
</children>
</AnchorPane>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@@ -14,6 +14,9 @@
-fx-font-size: 16px;
-fx-font-weight: regular;
}
#calculatorTabs #saveButton:hover {
-fx-background-color: #9ec19c;
}
.nextButton {
-fx-background-color: #89a888;
@@ -36,6 +39,21 @@
-fx-padding: 0 0 0 3px;
}
.km-indicator {
-fx-background-color: #89a888;
-fx-background-radius: 5px;
-fx-border-radius: 5px;
}
.slider .track {
-fx-background-color: #d3d3d3;
}
.slider .thumb {
-fx-background-color: transparent;
-fx-background-image: url('../icons/leaficon.png');
-fx-padding: 12;
}