avril
2012
Ces derniers temps, dans la version 2.0, mon app j’ai commencé à intégrer des icônes monochrome dans le style Metro. Ce n’est pas vraiment pour essayer de faire une UI pour Windows 8 (BEURK !) mais plutôt pour continuer à utiliser un type de design que certaines de nos icônes utilisaient déjà dans la version 1.0 (programmée en JavaFX Script). D’un autre coté le style est simple, avec peu ou pas de couleur et on peut rapidement en créer des nouvelles sans se casser à tête (ou la souris) à passer des heures et des heures à dessiner un truc sans être content du résultat (ce qui est gonflant quand à la base on est ni artiste ni graphic designer).
De base, toutes les icônes sont blanches sur fond transparent (avec quelques rares fois, des tons de gris), mais parfois il y a besoin de faire des changements de couleur notamment pour indiquer qu’il y a des erreurs ou qu’au contraire tout est OK. C’est là justement qu’arrive l’effet ColorAdjust qui permet de faire varier les couleurs d’un nœud en modifiant leurs valeurs HSBC (hue – saturation – brightness – contrast).
Et donc, avant de pouvoir mettre les bonnes valeurs dans le code, il me fallait coder un petit test qui permet de voir rapidement les valeurs à mettre dans les différents paramètres de l’effet. Chaque paramètre peut voir sa valeur varier entre [-1, 1], une valeur de 0 signifiant que le paramètre n’est pas modifié par l’effet.
Voilà une bonne petite occasion de mettre en place des bindings simple avec une GUI très légère :
*
* @author Fabrice
*/
public class Main extends Application {
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
ClassLoader classLoader = getClass().getClassLoader();
URL imageURL = classLoader.getResource("test/resources/Error.png");
Image image = new Image(imageURL.toExternalForm());
final ImageView imageView = ImageViewBuilder.create().image(image).build();
ColorAdjust colorAdjust = ColorAdjustBuilder.create().build();
imageView.setEffect(colorAdjust);
//
Label saturationLabel = LabelBuilder.create().text("Saturation").style("-fx-text-fill: white;").build();
GridPane.setConstraints(saturationLabel, 0, 0);
Slider saturationSlider = SliderBuilder.create().value(50).build();
colorAdjust.saturationProperty().bind(saturationSlider.valueProperty().divide(50).subtract(1));
GridPane.setConstraints(saturationSlider, 1, 0);
GridPane.setHgrow(saturationSlider, Priority.ALWAYS);
Label saturationValueLabel = LabelBuilder.create().style("-fx-text-fill: white;").minWidth(75).maxWidth(75).build();
saturationValueLabel.textProperty().bind(colorAdjust.saturationProperty().multiply(100).asString("%.2f%%"));
GridPane.setConstraints(saturationValueLabel, 2, 0);
//
Label hueLabel = LabelBuilder.create().text("Hue").style("-fx-text-fill: white;").build();
GridPane.setConstraints(hueLabel, 0, 1);
Slider hueSlider = SliderBuilder.create().value(50).build();
colorAdjust.hueProperty().bind(hueSlider.valueProperty().divide(50).subtract(1));
GridPane.setConstraints(hueSlider, 1, 1);
GridPane.setHgrow(hueSlider, Priority.ALWAYS);
Label hueValueLabel = LabelBuilder.create().style("-fx-text-fill: white;").minWidth(75).maxWidth(75).build();
hueValueLabel.textProperty().bind(colorAdjust.hueProperty().multiply(100).asString("%.2f%%"));
GridPane.setConstraints(hueValueLabel, 2, 1);
//
Label brightnessLabel = LabelBuilder.create().text("Brightness").style("-fx-text-fill: white;").build();
GridPane.setConstraints(brightnessLabel, 0, 2);
Slider brightnessSlider = SliderBuilder.create().value(50).build();
colorAdjust.brightnessProperty().bind(brightnessSlider.valueProperty().divide(50).subtract(1));
GridPane.setConstraints(brightnessSlider, 1, 2);
GridPane.setHgrow(brightnessSlider, Priority.ALWAYS);
Label brightnessValueLabel = LabelBuilder.create().style("-fx-text-fill: white;").minWidth(75).maxWidth(75).build();
brightnessValueLabel.textProperty().bind(colorAdjust.brightnessProperty().multiply(100).asString("%.2f%%"));
GridPane.setConstraints(brightnessValueLabel, 2, 2);
//
Label contrastLabel = LabelBuilder.create().text("Contrast").style("-fx-text-fill: white;").build();
GridPane.setConstraints(contrastLabel, 0, 3);
Slider contrastSlider = SliderBuilder.create().value(50).build();
colorAdjust.contrastProperty().bind(contrastSlider.valueProperty().divide(50).subtract(1));
GridPane.setConstraints(contrastSlider, 1, 3);
GridPane.setHgrow(contrastSlider, Priority.ALWAYS);
Label contrastValueLabel = LabelBuilder.create().style("-fx-text-fill: white;").minWidth(75).maxWidth(75).build();
contrastValueLabel.textProperty().bind(colorAdjust.contrastProperty().multiply(100).asString("%.2f%%"));
GridPane.setConstraints(contrastValueLabel, 2, 3);
//
GridPane sliderGrid = GridPaneBuilder.create().children(saturationLabel, saturationSlider, saturationValueLabel,
hueLabel, hueSlider, hueValueLabel,
brightnessLabel, brightnessSlider, brightnessValueLabel,
contrastLabel, contrastSlider, contrastValueLabel).build();
MenuItem openItem = MenuItemBuilder.create().text("Open").onAction(new EventHandler() {
@Override
public void handle(ActionEvent arg0) {
FileChooser dialog = FileChooserBuilder.create().build();
File file = dialog.showOpenDialog(imageView.getScene().getWindow());
if (file != null) {
URI uri = file.toURI();
Image image = new Image(uri.toString());
imageView.setImage(image);
}
}
}).build();
Menu fileMenu = MenuBuilder.create().text("File").items(openItem).build();
MenuBar menuBar = MenuBarBuilder.create().menus(fileMenu).build();
BorderPane root = BorderPaneBuilder.create().top(menuBar).center(imageView).bottom(sliderGrid).build();
primaryStage.setTitle("Test_ColorAdjust");
primaryStage.setScene(new Scene(root, 500, 500, Color.BLACK));
primaryStage.show();
}
}
1 Commentaire + Ajouter un commentaire
Commentaires récents
- Back from the future… dans
- Back from the future… dans
- Static linking = does not Compute dans
- Paquetage x 2 dans
- Why you little… dans
[…] Petit programme pour tester ColorAdjust par bouye (01/04/2012 10:36) Ces derniers temps, dans la version 2.0, mon app j’ai commencé à intégrer des icônes monochrome dans le style Metro. Ce n’est pas vraiment pour essayer de faire une UI pour Windows 8 (BEURK !) mais plutôt pour continuer à utiliser un type de design que certaines de nos icônes utilisaient déjà dans la version 1.0 (programmée en JavaFX Script). D’un autre coté le style est simple, avec peu ou pas de couleur et on […] […]