Add knobs for editing angles

This adds a new UI component to edit angles. The new radial knob control
allows smoothly transitioning from +180 to -180 degrees.

see #288 (github)

Author: llbit

ChangeLog.txt

@@ -1,5 +1,6 @@
 LATEST
 
+* Added radial knob control to improve editing angles like sun azimuth.
 * Fixed incorrect dark oak leaf color blending.
 * Added new solid color sky mode.
 * Fixed wrong texture for pink and gray glazed terracotta.

chunky/src/java/se/llbit/chunky/ui/AngleAdjuster.java

@@ -0,0 +1,79 @@
+/* Copyright (c) 2018 Jesper Öqvist <jesper@llbit.se>
+ *
+ * This file is part of Chunky.
+ *
+ * Chunky is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Chunky is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * You should have received a copy of the GNU General Public License
+ * along with Chunky.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package se.llbit.chunky.ui;
+
+import javafx.beans.property.SimpleDoubleProperty;
+import javafx.geometry.Point2D;
+import javafx.scene.control.Button;
+import javafx.scene.control.ContentDisplay;
+import javafx.scene.control.Label;
+import javafx.scene.control.Tooltip;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.StackPane;
+import se.llbit.math.QuickMath;
+
+/**
+ * A control for editing angles with a knob and text field.
+ */
+public class AngleAdjuster extends Adjuster<Double> {
+  private final Label knob;
+  private final ImageView dimple;
+  private final SimpleDoubleProperty angle = new SimpleDoubleProperty();
+
+  public AngleAdjuster() {
+    super(new SimpleDoubleProperty());
+    ImageView wheel = new ImageView(new Image(getClass().getResourceAsStream("jog_wheel.png")));
+    knob = new Label();
+    knob.setGraphic(wheel);
+    knob.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
+    knob.setOnMouseDragged(this::handleDrag);
+    knob.setOnMousePressed(this::handleDrag);
+    dimple = new ImageView(new Image(getClass().getResourceAsStream("jog_wheel_dimple.png")));
+    dimple.setTranslateX(16);
+    dimple.setDisable(true);
+    StackPane stackPane = new StackPane();
+    stackPane.getChildren().addAll(knob, dimple);
+    getChildren().setAll(nameLbl, valueField, stackPane);
+    angle.bindBidirectional(value);
+    angle.addListener((observable, oldValue, newValue) -> {
+      double angle = newValue.doubleValue();
+      angle = QuickMath.degToRad(angle);
+      dimple.setTranslateX(Math.cos(angle) * 16);
+      dimple.setTranslateY(- Math.sin(angle) * 16);
+    });
+  }
+
+  @Override public void setTooltip(String tooltip) {
+    super.setTooltip(tooltip);
+    knob.setTooltip(new Tooltip(tooltip));
+  }
+
+  private void handleDrag(MouseEvent event) {
+    Point2D pos = knob.localToParent(event.getX(), event.getY());
+    Point2D center = knob.localToParent(0, 0);
+    center = center.add(30, 30);
+    Point2D diff = new Point2D(pos.getX() - center.getX(), - (pos.getY() - center.getY()));
+    double angle = Math.atan2(diff.getY(), diff.getX());
+    setAndUpdate(QuickMath.radToDeg(angle));
+  }
+
+  @Override protected Double clamp(Number value) {
+    return value.doubleValue();
+  }
+}

chunky/src/java/se/llbit/chunky/ui/render/EntitiesTab.java

@@ -38,13 +38,15 @@
 import se.llbit.chunky.entity.Poseable;
 import se.llbit.chunky.renderer.scene.PlayerModel;
 import se.llbit.chunky.renderer.scene.Scene;
+import se.llbit.chunky.ui.AngleAdjuster;
 import se.llbit.chunky.ui.DoubleAdjuster;
 import se.llbit.chunky.ui.RenderControlsFxController;
 import se.llbit.chunky.entity.Entity;
 import se.llbit.chunky.entity.PlayerEntity;
 import se.llbit.json.Json;
 import se.llbit.json.JsonArray;
 import se.llbit.json.JsonObject;
+import se.llbit.math.QuickMath;
 import se.llbit.math.Vector3;
 
 import java.io.File;
@@ -217,15 +219,15 @@ private void updateEntity(Entity entity) {
       poseBox.setAlignment(Pos.CENTER_LEFT);
       poseBox.getChildren().addAll(new Label("Pose part"), partList);
 
-      DoubleAdjuster yaw = new DoubleAdjuster();
+      AngleAdjuster yaw = new AngleAdjuster();
       yaw.setTooltip("Modifies yaw of currently selected entity part.");
       yaw.setName("yaw");
 
-      DoubleAdjuster pitch = new DoubleAdjuster();
+      AngleAdjuster pitch = new AngleAdjuster();
       pitch.setTooltip("Modifies pitch of currently selected entity part.");
       pitch.setName("pitch");
 
-      DoubleAdjuster roll = new DoubleAdjuster();
+      AngleAdjuster roll = new AngleAdjuster();
       roll.setTooltip("Modifies roll of currently selected entity part.");
       roll.setName("roll");
 
@@ -240,24 +242,21 @@ private void updateEntity(Entity entity) {
 
       partList.getSelectionModel().selectFirst(); // Updates the pose parameters.
 
-      pitch.setRange(-Math.PI, Math.PI);
       pitch.onValueChange(value -> {
         withPose(entity, partList.getValue(), partPose -> {
-          partPose.set(0, Json.of(value));
+          partPose.set(0, Json.of(Math.toRadians(value)));
         });
         scene.rebuildActorBvh();
       });
-      yaw.setRange(-Math.PI, Math.PI);
       yaw.onValueChange(value -> {
         withPose(entity, partList.getValue(), partPose -> {
-          partPose.set(1, Json.of(value));
+          partPose.set(1, Json.of(Math.toRadians(value)));
         });
         scene.rebuildActorBvh();
       });
-      roll.setRange(-Math.PI, Math.PI);
       roll.onValueChange(value -> {
         withPose(entity, partList.getValue(), partPose -> {
-          partPose.set(2, Json.of(value));
+          partPose.set(2, Json.of(Math.toRadians(value)));
         });
         scene.rebuildActorBvh();
       });

chunky/src/java/se/llbit/chunky/ui/render/LightingTab.java

@@ -27,6 +27,7 @@
 import se.llbit.chunky.renderer.scene.Scene;
 import se.llbit.chunky.renderer.scene.Sky;
 import se.llbit.chunky.renderer.scene.Sun;
+import se.llbit.chunky.ui.AngleAdjuster;
 import se.llbit.chunky.ui.DoubleAdjuster;
 import se.llbit.chunky.ui.RenderControlsFxController;
 import se.llbit.chunky.ui.SimpleColorPicker;
@@ -44,8 +45,8 @@ public class LightingTab extends ScrollPane implements RenderControlsTab, Initia
   @FXML private DoubleAdjuster skyIntensity;
   @FXML private DoubleAdjuster emitterIntensity;
   @FXML private DoubleAdjuster sunIntensity;
-  @FXML private DoubleAdjuster sunAzimuth;
-  @FXML private DoubleAdjuster sunAltitude;
+  @FXML private AngleAdjuster sunAzimuth;
+  @FXML private AngleAdjuster sunAltitude;
   @FXML private CheckBox enableEmitters;
   @FXML private CheckBox enableSunlight;
   @FXML private SimpleColorPicker sunColor;
@@ -84,16 +85,12 @@ public LightingTab() throws IOException {
     sunIntensity.onValueChange(value -> scene.sun().setIntensity(value));
 
     sunAzimuth.setName("Sun azimuth");
-    sunAzimuth.setTooltip("The angle to the sun from north");
-    sunAzimuth.setRange(0, 360);
-    sunAzimuth
-        .onValueChange(value -> scene.sun().setAzimuth(QuickMath.degToRad(value)));
+    sunAzimuth.setTooltip("Change the angle to the sun from north.");
+    sunAzimuth.onValueChange(value -> scene.sun().setAzimuth(-QuickMath.degToRad(value)));
 
     sunAltitude.setName("Sun altitude");
-    sunAltitude.setTooltip("The angle to the sun above the horizon");
-    sunAltitude.setRange(0, 90);
-    sunAltitude
-        .onValueChange(value -> scene.sun().setAltitude(QuickMath.degToRad(value)));
+    sunAltitude.setTooltip("Change the angle to the sun above the horizon.");
+    sunAltitude.onValueChange(value -> scene.sun().setAltitude(QuickMath.degToRad(value)));
 
     enableEmitters.selectedProperty().addListener(
         (observable, oldValue, newValue) -> scene.setEmittersEnabled(newValue));
@@ -111,7 +108,7 @@ public LightingTab() throws IOException {
     skyIntensity.set(scene.sky().getSkyLight());
     emitterIntensity.set(scene.getEmitterIntensity());
     sunIntensity.set(scene.sun().getIntensity());
-    sunAzimuth.set(QuickMath.radToDeg(scene.sun().getAzimuth()));
+    sunAzimuth.set(-QuickMath.radToDeg(scene.sun().getAzimuth()));
     sunAltitude.set(QuickMath.radToDeg(scene.sun().getAltitude()));
     enableEmitters.setSelected(scene.getEmittersEnabled());
     enableSunlight.setSelected(scene.getDirectLight());