Toogle switch for boolean settings #90
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| /* | ||
| * MORTAR - MOlecule fRagmenTAtion fRamework | ||
| * Copyright (C) 2024 Felix Baensch, Jonas Schaub (felix.baensch@w-hs.de, jonas.schaub@uni-jena.de) | ||
| * | ||
| * Source code is available at <https://github.com/FelixBaensch/MORTAR> | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in all | ||
| * copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| */ | ||
|
|
||
| package de.unijena.cheminf.mortar.gui.controls; | ||
|
|
||
| import javafx.animation.FillTransition; | ||
| import javafx.animation.ParallelTransition; | ||
| import javafx.animation.TranslateTransition; | ||
| import javafx.beans.property.BooleanProperty; | ||
| import javafx.beans.property.SimpleBooleanProperty; | ||
| import javafx.scene.control.Control; | ||
| import javafx.scene.effect.DropShadow; | ||
| import javafx.scene.paint.Color; | ||
| import javafx.scene.shape.Circle; | ||
| import javafx.scene.shape.Rectangle; | ||
| import javafx.util.Duration; | ||
|
|
||
| /** | ||
| * A toggle switch to en- and disable features in settings. | ||
| * | ||
| * @author Zeynep Dagtekin | ||
| * @version 1.0.0.0 | ||
| */ | ||
| public class ToggleSwitch extends Control { | ||
| //<editor-fold desc="private final class constants" defaultstate="collapsed"> | ||
| /** | ||
| * Button. | ||
| */ | ||
| private final Circle switchButton; | ||
| /** | ||
| * Background of the switch. | ||
| */ | ||
| private final Rectangle switchBackground; | ||
| /** | ||
| * Boolean property to keep track of the state. | ||
| */ | ||
| private final SimpleBooleanProperty switchedOn; | ||
|
There was a problem hiding this comment. Consider better variable naming, e.g. sth like "switchStateBooleanProperty" |
||
| /** | ||
| * transition of the Circle from one side to the other. | ||
| */ | ||
| private final TranslateTransition switchAnimation; | ||
| /** | ||
| * Color transition. | ||
| */ | ||
| private final FillTransition fillAnimation; | ||
JonasSchaub marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /** | ||
| * Parallel transition of color and Circle. | ||
| */ | ||
| private final ParallelTransition switchTransition; | ||
| //</editor-fold> | ||
| /** | ||
| * Constructor. | ||
JonasSchaub marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| */ | ||
| public ToggleSwitch() { | ||
| /** | ||
| * code inspired by "JavaFX UI: iOS Style Toggle Switch", uploaded by Almas Baimagambetov on YouTube | ||
| * https://youtu.be/maX5ymmQixM?si=v2ULa57-pjCmoQlf, 05/17/2024, 10:33 | ||
| */ | ||
| super(); | ||
| this.switchedOn = new SimpleBooleanProperty(false); | ||
|
There was a problem hiding this comment. Would be nice to turn the initial state into a constructor parameter and implement a separate parameter-less constructor calling this one here with a defined initial state (off/false). |
||
| this.switchBackground = new Rectangle(45, 18); | ||
| this.switchBackground.setArcWidth(18); | ||
| this.switchBackground.setArcHeight(18); | ||
| this.switchBackground.setLayoutX(-50); | ||
| this.switchBackground.setFill(Color.LIGHTGRAY); | ||
| this.switchBackground.setStroke(Color.DARKGRAY); | ||
| this.switchButton = new Circle(10); | ||
| this.switchButton.setCenterX(-40); | ||
| this.switchButton.setCenterY(9); | ||
| this.switchButton.setFill(Color.WHITE); | ||
| this.switchButton.setStroke(Color.DARKGRAY); | ||
| this.switchButton.setEffect(new DropShadow(5, Color.GRAY)); | ||
| this.switchAnimation = new TranslateTransition(Duration.seconds(0.25)); | ||
| this.switchAnimation.setNode(this.switchButton); | ||
| this.fillAnimation = new FillTransition(Duration.seconds(0.25)); | ||
|
There was a problem hiding this comment. Size parameters like the rectangle size, the circle size, etc., should be configurable via setters (getters are then also needed, of course). Also the colors and transition times. The values you are using here should be defined in class constants and used as defaults. Shadows should be able to be turned off and on. If we would do this more professionally, we would also define resizing and how the switch behaves for a given min/preferred/max height/width. But this goes beyond our current use case. |
||
| this.switchTransition = new ParallelTransition(this.switchAnimation, this.fillAnimation); | ||
| this.switchAnimation.setNode(this.switchButton); | ||
| this.fillAnimation.setShape(this.switchBackground); | ||
| getChildren().addAll(this.switchBackground, this.switchButton); | ||
|
There was a problem hiding this comment. Missing "this." statement |
||
| //Listener | ||
| this.switchedOn.addListener((observable, oldValue, newValue) -> { | ||
| boolean tmpIsOn = newValue.booleanValue(); | ||
| this.switchAnimation.setToX(tmpIsOn ? (44 - 18) : 0); | ||
|
There was a problem hiding this comment. These values refer to the rectangle sizes, right? Then please query them from the rectangle instead of writing them explicitly again. |
||
| this.fillAnimation.setFromValue(tmpIsOn ? Color.LIGHTGRAY : Color.web("#0099cc")); | ||
| this.fillAnimation.setToValue(tmpIsOn ? Color.web("#0099cc") : Color.LIGHTGRAY); | ||
| this.switchTransition.play(); | ||
| }); | ||
| //Mouse listener. | ||
| setOnMouseClicked(event -> this.switchedOn.set(!this.switchedOn.get())); | ||
|
There was a problem hiding this comment. Missing "this." statement. |
||
| } | ||
| // | ||
| //<editor-fold desc="properties" defaultstate="collapsed"> | ||
| /** | ||
| * returns switchButton. | ||
JonasSchaub marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * | ||
| * @return Circle | ||
| */ | ||
| public Circle getSwitchButton() { | ||
| return this.switchButton; | ||
| } | ||
| /** | ||
| * returns switchBackground. | ||
| * | ||
| * @return Rectangle | ||
| */ | ||
| public Rectangle getSwitchBackground() { | ||
| return this.switchBackground; | ||
| } | ||
| /** | ||
| * returns switchedOn to change the boolean state of the switch. | ||
| * | ||
| * @return SimpleBooleanProperty | ||
| */ | ||
| public SimpleBooleanProperty getSwitchedOn() { | ||
| return this.switchedOn; | ||
| } | ||
| /** | ||
| * returns switchAnimation which shows the visual transition of the Circle switchButton. | ||
| * | ||
| * @return TranslateTransition | ||
| */ | ||
| public TranslateTransition getSwitchAnimation() { | ||
| return this.switchAnimation; | ||
| } | ||
| /** | ||
| * returns fillAnimation to show the color change when clicked on. | ||
| * | ||
| * @return FillTransition | ||
| */ | ||
| public FillTransition getFillAnimation() { | ||
| return this.fillAnimation; | ||
| } | ||
| /** | ||
| * returns switchTransition to maintain a parallel animation for fillAnimation and switchAnimation. | ||
| * | ||
| * @return ParallelTransition | ||
| */ | ||
| public ParallelTransition getSwitchTransition() { | ||
| return this.switchTransition; | ||
| } | ||
| /** | ||
| * returns switchedOnProperty. | ||
| * | ||
| * @return BooleanProperty | ||
| */ | ||
| public BooleanProperty getSwitchedOnProperty() { | ||
| return this.switchedOn; | ||
| } | ||
| /** | ||
| * returns isSwitchedOn to change boolean state to true. | ||
|
There was a problem hiding this comment. Why is sth changed here? Or what does the comment mean? |
||
| * | ||
| * @return switch value. | ||
| */ | ||
| public boolean isSwitchedOn() { | ||
| return this.switchedOn.get(); | ||
| } | ||
| /** | ||
| * sets switchedOn to update new value. | ||
| * | ||
| * @param switchedOn boolean | ||
| */ | ||
| public void setSwitchedOn(boolean switchedOn) { | ||
| this.switchedOn.set(switchedOn); | ||
| } | ||
| /** | ||
| * returns valueProperty. | ||
| * | ||
| * @return BooleanProperty | ||
| */ | ||
| public BooleanProperty valueProperty() { | ||
|
There was a problem hiding this comment. I'd rename this to getSwitchStateProperty(). |
||
| return this.switchedOn; | ||
| } | ||
JonasSchaub marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| //</editor-fold> | ||
|
There was a problem hiding this comment. I think we need more instance variables for some of the parameters of the constructors and also getters and setters. There was a problem hiding this comment. Or maybe not, most variables can be queried from the rectangle/switch/animation. |
||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you describe your switch, what it does, etc. a little more here? Like, it's a circle on top of a rectangle, the transition is animated, the state on vs off is shown by coloring the rectangle differently, resizing is not implemented (yet), ...