redesigned ui

added modal window

Author: cansik

src/main/kotlin/ch/bildspur/annotator/Main.kt

@@ -26,13 +26,15 @@ class Main : Application() {
         controller.stage = primaryStage
         primaryStage.addEventHandler(WindowEvent.WINDOW_SHOWN) { controller.handleWindowShownEvent() }
 
-        primaryStage.title = "OpenCV Sample Annotator"
+        primaryStage.title = "OpenCV Sample Annotator - ${Main.VERSION}"
         primaryStage.scene = Scene(root)
         primaryStage.show()
         System.out.println()
     }
 
     companion object {
+        const val VERSION = "0.1"
+
         @JvmStatic
         fun main(args: Array<String>) {
             launch(Main::class.java)

src/main/kotlin/ch/bildspur/annotator/ui/MainViewController.kt

@@ -12,6 +12,7 @@ import javafx.scene.Scene
 import javafx.scene.canvas.Canvas
 import javafx.scene.canvas.GraphicsContext
 import javafx.scene.control.Alert
+import javafx.scene.control.Label
 import javafx.scene.input.KeyCode
 import javafx.scene.input.KeyEvent
 import javafx.scene.input.MouseEvent
@@ -31,6 +32,9 @@ class MainViewController {
     @FXML
     var canvas: Canvas? = null
 
+    @FXML
+    var infoText: Label? = null
+
     var positivesFile: File by Delegates.notNull()
 
     var annotationImages: List<AnnotationImage> by Delegates.notNull()
@@ -45,6 +49,8 @@ class MainViewController {
 
     var scaleFactor = 1.0
 
+    var imageCounter = 0
+
     fun handleWindowShownEvent() {
         showSettingsView()
     }
@@ -55,6 +61,7 @@ class MainViewController {
         val controller = loader.getController<SettingsViewController>()
 
         val settingStage = Stage()
+        settingStage.initOwner(stage)
         settingStage.initModality(Modality.WINDOW_MODAL)
         settingStage.title = "OpenCV Sample Annotator Settings"
         settingStage.scene = Scene(root)
@@ -80,6 +87,7 @@ class MainViewController {
         canvas!!.onMouseReleased = EventHandler<MouseEvent> { handleMouseReleased(it) }
 
         canvas!!.isFocusTraversable = true
+        canvas!!.requestFocus()
 
         gc = canvas!!.graphicsContext2D
         resizeCanvas()
@@ -93,10 +101,10 @@ class MainViewController {
     }
 
     fun loadNextImage() {
-        if (!imageIterator.hasNext()) {
+        imageCounter++
+
+        if (!imageIterator.hasNext())
             saveAndClose()
-            exitProcess(0)
-        }
 
         activeImage = imageIterator.next()
         initImage()
@@ -111,6 +119,7 @@ class MainViewController {
         alert.showAndWait()
 
         stage.close()
+        exitProcess(0)
     }
 
     fun resizeCanvas() {
@@ -119,6 +128,8 @@ class MainViewController {
     }
 
     fun initImage() {
+        infoText!!.text = "$imageCounter of ${annotationImages.size}"
+
         calculateScaleFactor()
         redrawCanvas()
     }
@@ -182,8 +193,6 @@ class MainViewController {
     }
 
     fun handleMouseReleased(e: MouseEvent) {
-        val m = Vector2(e.x, e.y)
-
         if (dragged) {
             println("dragged!")
         } else {
@@ -201,6 +210,10 @@ class MainViewController {
         loadNextImage()
     }
 
+    fun finishClicked(e: ActionEvent) {
+        saveAndClose()
+    }
+
     fun vectorToScreen(v: Vector2): Vector2 {
         return v.scale(scaleFactor)
     }

src/main/resources/view/MainView.fxml

@@ -2,20 +2,24 @@
 
 <?import ch.bildspur.annotator.ui.control.ResizableCanvas?>
 <?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ButtonBar?>
+<?import javafx.scene.control.Label?>
 <?import javafx.scene.layout.*?>
 <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0"
             prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1"
             fx:controller="ch.bildspur.annotator.ui.MainViewController">
     <children>
-        <ButtonBar nodeOrientation="RIGHT_TO_LEFT" prefHeight="40.0" prefWidth="408.0"
-                   style="-fx-background-color: #696969;" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
-                   AnchorPane.topAnchor="0.0">
-            <buttons>
-                <Button mnemonicParsing="false" onAction="#nextClicked" text="Next"/>
-                <Button mnemonicParsing="false" onAction="#clearClicked" text="Clear"/>
-            </buttons>
-        </ButtonBar>
+        <AnchorPane prefHeight="40.0" prefWidth="408.0" style="-fx-background-color: #ecf0f1;"
+                    AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+            <children>
+                <Button layoutX="15.0" layoutY="7.0" mnemonicParsing="false" onAction="#clearClicked" text="Clear"
+                        AnchorPane.leftAnchor="15.0"/>
+                <Button layoutX="75.0" layoutY="7.0" mnemonicParsing="false" onAction="#nextClicked" text="Next"
+                        AnchorPane.leftAnchor="75.0"/>
+                <Label fx:id="infoText" alignment="CENTER_RIGHT" layoutX="360.0" layoutY="12.0" prefHeight="17.0"
+                       prefWidth="130.0" text="1 of 1" AnchorPane.rightAnchor="16.0"/>
+                <Button layoutX="132.0" layoutY="7.0" mnemonicParsing="false" onAction="#finishClicked" text="Finish"/>
+            </children>
+        </AnchorPane>
         <ResizableCanvas fx:id="canvas" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
                          AnchorPane.rightAnchor="0.0"
                          AnchorPane.topAnchor="40.0"/>