sem/Greenify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD::added animations to buttons on dashboard screen

Browse Source 
EDIT::changed labels of distance in activities overview to km and km/L

EDIT::made firstCalculator.fxml have the right distance units and added the new extra activities screen
This commit is contained in:
Sem van der Hoeven
2019-04-05 09:54:34 +02:00
parent 4b07aa8072
commit 06daa4776f
5 changed files with 72 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/Client/src/main/java/greenify/client/controller/DashBoardController.java
View File

@@ -81,6 +81,10 @@ public class DashBoardController {
@FXML
private Button addFriendButton;
@FXML
private Button addExtraActivityButton;
@FXML
private Button addExtraActivityButton2;
@FXML
private TableView<Friend> friendsTable;
@FXML
private TableColumn<Friend, String> friendsColumn;
@@ -184,6 +188,7 @@ public class DashBoardController {
activitiesButton.setSkin(new MyButtonSkin(activitiesButton));
userButton.setSkin(new MyButtonSkin(userButton));
friendsButton.setSkin(new MyButtonSkin(friendsButton));
friendsColumn.setCellValueFactory(new PropertyValueFactory<>("Friend"));
scoreColumn.setCellValueFactory(new PropertyValueFactory<>("Score"));
globalUser.setCellValueFactory(new PropertyValueFactory<>("Friend"));
@@ -215,6 +220,11 @@ public class DashBoardController {
friendsTable.setItems(data);
updateLeaderboard();
updateAchievements();
calculateFootPrintButton.setSkin(new ClickButtonSkin(calculateFootPrintButton));
addFriendButton.setSkin(new ClickButtonSkin(addFriendButton));
addExtraActivityButton.setSkin(new ClickButtonSkin(addExtraActivityButton));
addExtraActivityButton2.setSkin(new ClickButtonSkin(addExtraActivityButton2));
}
/**
@@ -528,4 +538,44 @@ public class DashBoardController {
}
}
@SuppressWarnings("Duplicates")
private class ClickButtonSkin extends ButtonSkin {
/**
* button skin for the 'add activity' buttons.
* adds scale animations on entering, clicking and exiting the button
* @param button the button to set the skin of
*/
private ClickButtonSkin(Button button) {
super(button);
//transition to scale up on hover
final ScaleTransition scaleUp = new ScaleTransition(Duration.millis(100));
//add the node and the position to scale to
scaleUp.setNode(button);
scaleUp.setToX(1.1);
scaleUp.setToY(1.1);
//play the transition when hovered over the button
button.setOnMouseEntered(e -> scaleUp.playFromStart());
final ScaleTransition scaleMiddleDown = new ScaleTransition(Duration.millis(50));
scaleMiddleDown.setNode(button);
scaleMiddleDown.setToX(1.05);
scaleMiddleDown.setToY(1.05);
button.setOnMousePressed(e -> scaleMiddleDown.playFromStart());
final ScaleTransition scaleMiddleUp = new ScaleTransition(Duration.millis(50));
scaleMiddleUp.setNode(button);
scaleMiddleUp.setToX(1.1);
scaleMiddleUp.setToY(1.1);
button.setOnMouseReleased(e -> scaleMiddleUp.playFromStart());
final ScaleTransition scaleDown = new ScaleTransition(Duration.millis(100));
scaleDown.setNode(button);
scaleDown.setToX(1.0);
scaleDown.setToY(1.0);
button.setOnMouseExited(e -> scaleDown.playFromStart());
}
}
}

4
src/Client/src/main/java/greenify/client/controller/ExtraActivityController.java
View File

@@ -172,13 +172,13 @@ public class ExtraActivityController {
}
@SuppressWarnings("Duplicates")
public class ActivityButtonSkin extends ButtonSkin {
private class ActivityButtonSkin extends ButtonSkin {
/**
* button skin for the 'add activity' buttons.
* adds scale animations on entering, clicking and extiting the button
* @param button the button to set the skin of
*/
public ActivityButtonSkin(Button button) {
private ActivityButtonSkin(Button button) {
super(button);
//transition to scale up on hover

18
src/Client/src/main/resources/fxml/FirstCalculator.fxml
View File

@@ -20,7 +20,7 @@
<?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.RegisterWindowController">
<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>
<AnchorPane fx:id="calculatorTabs" prefHeight="92.0" prefWidth="820.0" style="-fx-background-color: #677069;">
<children>
@@ -178,7 +178,7 @@
</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="mi/year" wrappingWidth="49.0">
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="49.0">
<font>
<Font size="13.0" />
</font>
@@ -188,7 +188,7 @@
<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 mpg">
<Label fx:id="carTravelGasolineLabel" alignment="TOP_CENTER" contentDisplay="CENTER" text="0 km/L">
<font>
<Font size="13.0" />
</font>
@@ -197,7 +197,7 @@
</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 mpg">
<Label fx:id="carTravelDieselLabel" alignment="TOP_CENTER" contentDisplay="CENTER" text="0 km/L">
<font>
<Font size="13.0" />
</font>
@@ -207,7 +207,7 @@
<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="mi/year" wrappingWidth="49.0">
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="49.0">
<font>
<Font size="13.0" />
</font>
@@ -236,7 +236,7 @@
</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="mi/year" wrappingWidth="49.0">
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="49.0">
<font>
<Font size="13.0" />
</font>
@@ -246,7 +246,7 @@
<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 mpge">
<Label fx:id="carTravelElectricLabel" alignment="TOP_CENTER" contentDisplay="CENTER" text="0 km/Le">
<font>
<Font size="13.0" />
</font>
@@ -285,7 +285,7 @@
</font></TextField>
<HBox alignment="CENTER_LEFT" layoutX="659.0" layoutY="398.0" prefHeight="31.0" prefWidth="62.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="mi/year" wrappingWidth="63.0">
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="63.0">
<font>
<Font size="16.0" />
</font>
@@ -294,7 +294,7 @@
</HBox>
<HBox alignment="CENTER_LEFT" layoutX="659.0" layoutY="499.0" prefHeight="31.0" prefWidth="62.0" styleClass="km-yearBox">
<children>
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="mi/year" wrappingWidth="63.0">
<Text layoutY="3.0" strokeType="OUTSIDE" strokeWidth="0.0" text="km/year" wrappingWidth="63.0">
<font>
<Font size="16.0" />
</font>

29
src/Client/src/main/resources/fxml/dashboard.fxml
View File

@@ -1,12 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.chart.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.chart.PieChart?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
@@ -22,7 +15,7 @@
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane prefHeight="702.0" prefWidth="1032.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="greenify.client.controller.DashBoardController">
<AnchorPane prefHeight="702.0" prefWidth="1032.0" xmlns="http://javafx.com/javafx/8.0.172-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="greenify.client.controller.DashBoardController">
<children>
<AnchorPane fx:id="menuBar" prefHeight="703.0" prefWidth="216.0" style="-fx-background-color: #5a635c;">
<children>
@@ -56,7 +49,7 @@
<Line endX="104.0" layoutX="109.0" layoutY="223.0" startX="-100.0" stroke="#e3ffe8" strokeWidth="0.7" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" />
<Line fx:id="pathLine" endX="100.0" endY="28.0" fill="#1b9736" layoutX="8.0" layoutY="323.0" startX="-100.0" startY="28.0" stroke="#5a635c" />
</children></AnchorPane>
<AnchorPane fx:id="activitiesPane" layoutX="214.0" prefHeight="703.0" prefWidth="820.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="214.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<AnchorPane fx:id="activitiesPane" layoutX="214.0" prefHeight="703.0" prefWidth="820.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="214.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Text fill="#002c0c" layoutX="101.0" layoutY="74.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Activity Summary" AnchorPane.leftAnchor="60.0" AnchorPane.topAnchor="40.0">
<font>
@@ -136,32 +129,32 @@
</Label>
<Pane layoutX="290.0" layoutY="130.0" prefHeight="342.0" prefWidth="230.0" style="-fx-background-color: #f4fff4;">
<children>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="11.0" prefHeight="27.0" prefWidth="149.0" text="Gasoline miles">
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="11.0" prefHeight="27.0" prefWidth="149.0" text="Gasoline km">
<font>
<Font size="14.0" />
</font>
</Label>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="55.0" prefHeight="27.0" prefWidth="149.0" text="Gasoline mpg">
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="55.0" prefHeight="27.0" prefWidth="149.0" text="Gasoline km/L">
<font>
<Font size="14.0" />
</font>
</Label>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="99.0" prefHeight="27.0" prefWidth="149.0" text="Diesel miles">
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="99.0" prefHeight="27.0" prefWidth="149.0" text="Diesel km">
<font>
<Font size="14.0" />
</font>
</Label>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="143.0" prefHeight="27.0" prefWidth="149.0" text="Diesel mpg">
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="143.0" prefHeight="27.0" prefWidth="149.0" text="Diesel km/L">
<font>
<Font size="14.0" />
</font>
</Label>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="187.0" prefHeight="27.0" prefWidth="149.0" text="Electric miles">
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="187.0" prefHeight="27.0" prefWidth="149.0" text="Electric km">
<font>
<Font size="14.0" />
</font>
</Label>
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="231.0" prefHeight="27.0" prefWidth="149.0" text="Electric mpg">
<Label alignment="CENTER" contentDisplay="CENTER" layoutX="18.0" layoutY="231.0" prefHeight="27.0" prefWidth="149.0" text="Electric km/Le">
<font>
<Font size="14.0" />
</font>
@@ -279,7 +272,7 @@
<CheckBox fx:id="solarPanels" layoutX="195.0" layoutY="103.0" mnemonicParsing="false" prefHeight="27.0" prefWidth="55.0" />
</children>
</Pane>
<Button contentDisplay="RIGHT" layoutX="545.0" layoutY="14.0" mnemonicParsing="false" onAction="#openExtraActivities" style="-fx-background-color: transparent;" text="Add extra activity!" textFill="#147219">
<Button fx:id="addExtraActivityButton2" contentDisplay="RIGHT" layoutX="545.0" layoutY="14.0" mnemonicParsing="false" onAction="#openExtraActivities" style="-fx-background-color: transparent;" text="Add extra activity!" textFill="#147219">
<graphic>
<ImageView fitHeight="69.0" fitWidth="61.0" pickOnBounds="true" preserveRatio="true">
<image>
@@ -377,7 +370,7 @@
</children>
</VBox>
</children></AnchorPane>
<AnchorPane fx:id="dashboardPane" layoutX="215.0" prefHeight="703.0" prefWidth="820.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="214.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<AnchorPane fx:id="dashboardPane" layoutX="215.0" prefHeight="703.0" prefWidth="820.0" visible="false" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="214.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label fx:id="welcomebacktext" layoutX="69.0" layoutY="53.0" text="Welcome back user!" AnchorPane.leftAnchor="60.0" AnchorPane.topAnchor="40.0">
<font>
@@ -439,7 +432,7 @@
<Font size="20.0" />
</font>
</Label>
<Button contentDisplay="RIGHT" layoutX="568.0" layoutY="223.0" mnemonicParsing="false" onAction="#openExtraActivities" style="-fx-background-color: transparent;" text="Add extra activity" textFill="#147219">
<Button fx:id="addExtraActivityButton" contentDisplay="RIGHT" layoutX="568.0" layoutY="223.0" mnemonicParsing="false" onAction="#openExtraActivities" style="-fx-background-color: transparent;" text="Add extra activity" textFill="#147219">
<font>
<Font name="Corbel Bold" size="14.0" />
</font>

4
src/Client/src/main/resources/stylesheets/dashboardStyle.css
View File

@@ -53,10 +53,6 @@
-fx-border-color: #497251;
}
#calculateFootPrintButton:pressed {
-fx-border-color: #497251;
}
/*friends table*/
.table-view .column-header {
/*-fx-background-color: linear-gradient(#4b7a3d, #588c58);*/