Update annotation documentation

content/howto/annotate/index.md

@@ -15,17 +15,31 @@ The general annotation process is as follows:
 
 ## Annotation interface
 
-The annotation interface can be opened on any page by clicking the icon in the top-right corner.
+The annotation interface can be opened on any page by clicking the **annotate** button in the top-right corner.
 
-{{ figures(images=["howto/annotate/open_interface.png", "howto/annotate/buttons.png"], height=150, caption="Image annotation mode") }}
+{{ figure(image="howto/annotate/annotate.png", height=200, caption="Open image annotation tools") }}
 
-From top to bottom:
+To annotate, you can draw *rectangular shapes* or *polygons*, as well as add a [*median point*](#median-point) to an existing line on a shape. You can also *move* and *delete* existing elements.
 
-- You can draw *rectangular shapes*,
-- Or *polygons*;
-- The third button allows you to *select* already existing shapes on the image;
-- The \[x\] closes the interface;
-- Under the annotation buttons, whether the interface is open or closed, is a *zoom*.
+{{ figure(image="howto/annotate/annotation_tools.png", height=350, caption="Annotation tools and batch annotation") }}
+
+If you create elements one by one, a pop-up opens up when you finish drawing a shape, asking you to select an element type. However, if you toggle the [**batch annotation**](#batch-annotation) mode, you can pre-set an element type, then draw shapes that will create elements of this type without the pop-up opening, allowing you to annotate faster.
+
+### Median point
+
+The median point tool can be used to turn a simple shape into a more complex one, by adding a new point in the middle of a line that's part of an existing polygon. The point that will be created shows up in orange when you hover over a line, and is created when you click on that line. You can then drag this new point to change the polygon's shape, using the move tool.
+
+{{ figure(image="howto/annotate/median_point.png", height=500, caption="Example usage of the median point tool") }}
+
+### Batch annotation
+
+In order to quickly create a number of elements of the same type, without having to select that type every time in the [element creation pop-up](#element-creation), you can use the batch annotation mode. For example, this can be useful when annotating all the text lines on an image.
+
+To use the batch annotation mode, you need to first select either the **rectangle** or **polygon** tool; then you have to toggle the **batch creation** switch, and select the **type** of the elements to be created.
+
+You can then draw your rectangles or polygons on the image, and the elements will be created as the shapes are finished, with no additional operation.
+
+{{ figure(image="howto/annotate/batch_annotation.png", height=400, caption="Example usage of the batch annotation mode") }}
 
 ## Element tree
 
@@ -49,14 +63,19 @@ Once you have drawn a shape on the image, a pop-up window opens for element crea
 When creating an element, you **have to** select its *type*, and you *can* give it a name and assign it a class.
 Once an element is created, it shows up on the image and in the element tree.
 
+You can also use the **batch annotation** mode to create elements without this pop-up window opening. See [the dedicated subsection]batch-annotation).
+
 ## Transcription
 
-You can add transcriptions to existing elements by clicking the **\[A+\]** button next to an element in the element tree.
-This opens up a pop-up window into which you can type your text.
+You can add transcriptions to existing elements by selecting them (in the children tree or by clicking on them on the image directly). Type your transcription in the **new transcription** field in the details panel on the right, and create it either by clicking the **+** button or by pressing the <kbd>Enter</kbd> key. To add a line break to your transcription, use <kbd>Shift</kbd> + <kbd>Enter</kbd>.
+
+{{ figure(image="howto/annotate/transcription.png", height=450, caption="Add a transcription to an element") }}
+
+You can also add transcriptions to an element by clicking the **\[A+\]** button next to it in the element tree on the left of the image. This opens up a pop-up window into which you can type your text.
 
-{{ figure(image="howto/annotate/transcription.png", height=300, caption="Element transcriptions modal") }}
+You can edit or delete an existing transcription from the **transcriptions** section in the details panel, just above the transcription creation field.
 
-Pressing the <kbd>Enter</kbd> key will create the transcription immediately. To add a line break, use <kbd>Shift</kbd> + <kbd>Enter</kbd>.
+{{ figure(image="howto/annotate/edit_delete_transcription.png", height=400, caption="Edit or delete a transcription") }}
 
 ## Element transformation: rotation and mirroring