Update Slideshow

src/main/java/edu/kit/typicalc/view/content/infocontent/ImageSlide.java

@@ -21,29 +21,33 @@ public class ImageSlide extends Slide implements LocaleChangeObserver {
     private static final String SLIDE_LAYOUT_ID = "slideLayout";
     private static final String EXPLANATION_ID = "explanation";
 
+    private final VerticalLayout slideLayout;
     private final Span explanation;
     private final String explanationKey;
+    private final String imageKey;
 
     /**
-     * Create a new ImageSlide with the path of the image and a key for the text.
+     * Create a new ImageSlide with the key of the image and a key for the text.
      *
-     * @param imgPath the path of the image
+     * @param imgKey the key of the image
      * @param textKey key for the text
      */
-    public ImageSlide(String imgPath, String textKey) {
+    public ImageSlide(String imgKey, String textKey) {
-        VerticalLayout slideLayout = new VerticalLayout();
+        slideLayout = new VerticalLayout();
-        Image image = new Image(imgPath, StringUtils.EMPTY);
+        imageKey = imgKey;
         explanationKey = textKey;
         explanation = new Span(getTranslation(explanationKey));
         explanation.setId(EXPLANATION_ID);
-        slideLayout.add(image, explanation);
+        slideLayout.add(new Image(getTranslation(imgKey), StringUtils.EMPTY), explanation);
         slideLayout.setId(SLIDE_LAYOUT_ID);
         add(slideLayout);
     }
 
     @Override
     public void localeChange(LocaleChangeEvent event) {
+        slideLayout.removeAll();
         explanation.setText(getTranslation(explanationKey));
+        slideLayout.add(new Image(getTranslation(imageKey), StringUtils.EMPTY), explanation);
     }
 
 }

src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java

@@ -93,16 +93,17 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
     }
 
     private Carousel createScenarioCarousel() {
-        Slide slide1 = new ImageSlide(getTranslation("root.image1"), "root.text1");
+        Slide slide0 = new ImageSlide("root.image0", "root.text0");
-        Slide slide2 = new ImageSlide(getTranslation("root.image2"), "root.text2");
+        Slide slide1 = new ImageSlide("root.image1", "root.text1");
-        Slide slide3 = new ImageSlide(getTranslation("root.image3"), "root.text3");
+        Slide slide2 = new ImageSlide("root.image2", "root.text2");
-        Slide slide4 = new ImageSlide(getTranslation("root.image4"), "root.text4");
+        Slide slide3 = new ImageSlide("root.image3", "root.text3");
-        Slide slide5 = new ImageSlide(getTranslation("root.image5"), "root.text5");
+        Slide slide4 = new ImageSlide("root.image4", "root.text4");
-        Slide slide6 = new ImageSlide(getTranslation("root.image6"), "root.text6");
+        Slide slide5 = new ImageSlide("root.image5", "root.text5");
-        Slide slide7 = new ImageSlide(getTranslation("root.image7"), "root.text7");
+        Slide slide6 = new ImageSlide("root.image6", "root.text6");
-        Slide slide8 = new ImageSlide(getTranslation("root.image8"), "root.text8");
+        Slide slide7 = new ImageSlide("root.image7", "root.text7");
+        Slide slide8 = new ImageSlide("root.image8", "root.text8");
 
-        return new Carousel(slide1, slide2, slide3, slide4, slide5, slide6, slide7, slide8).withoutNavigation()
+        return new Carousel(slide0, slide1, slide2, slide3, slide4, slide5, slide6, slide7, slide8).withoutNavigation()
                 .withoutSwipe();
     }
 

src/main/resources/language/translation_de.properties

@@ -124,23 +124,25 @@ navigiert werden.
 root.linkText=Weitere Informationen zur Typinferenz findest du \u0020
 root.link=https://de.wikipedia.org/wiki/Typinferenz_nach_Hindley-Milner
 root.here=hier
-root.image1=/carousel/EnterTerm.png
+root.image0=/carousel/StartPage-german.jpg
+root.text0=Verwende die Knöpfe am unteren Ende der Seite, um durch die Slideshow zu navigieren.
+root.image1=/carousel/EnterTerm-german.jpg
 root.text1=Der Term \u03BBx.x wird in das Textfeld eingegeben.
-root.image2=/carousel/OpenTypeAssumptions.png
+root.image2=/carousel/OpenTypeAssumptions-german.jpg
 root.text2=Der Typannahmen-Knopf wird betätigt, um ein Fenster zur Eingabe von Typannahmen zu öffnen.
-root.image3=/carousel/EnterTypeAssumptions.png
+root.image3=/carousel/EnterTypeAssumptions-german.jpg
 root.text3=Eine Typannahme mit Variable "x" und Typ "int" wird hinzugefügt.
-root.image4=/carousel/ClickTypeButton.png
+root.image4=/carousel/ClickTypeButton-german.jpg
 root.text4=Der Typisieren-Knopf wird betätigt, um den Typinferenzalgorithmus zu starten.
-root.image5=/carousel/NavigateTree.png
+root.image5=/carousel/NavigateTree-german.jpg
 root.text5=Die Knöpfe am unteren Ende der Seite werden verwendet, um zwischen einzelnen Schritten des Algorithmus \
 zu wechseln.
-root.image6=/carousel/EndOfTree.png
+root.image6=/carousel/EndOfTree-german.jpg
 root.text6=Am Ende des Algorithmus sind der allgemeinste Unifikator, der finale Typ und der finale Herleitungsbaum \
 der Eingabe zu sehen.
-root.image7=/carousel/OpenExportDialog.png
+root.image7=/carousel/ClickShareButton-german.jpg
 root.text7=Der Teilen-Knopfs wird betätigt, um das entsprechende Dialogfenster zu öffnen.
-root.image8=/carousel/UseExportDialog.png
+root.image8=/carousel/UseShareDialog-german.jpg
 root.text8=In dem Dialogfenster sind der Permalink zur aktuellen Seite, der Latex-Code des Baums und die im Code \
 verwendeten Pakete aufgelistet.
 root.correctAssumptions=Korrigiere oder lösche die ungültigen Typannahmen (rot hinterlegt) \

src/main/resources/language/translation_en.properties

@@ -116,22 +116,24 @@ by a red border. The buttons at the bottom of the website can be used to navigat
 root.linkText=Further information on the type inference algorithm can be found \u0020
 root.link=https://en.wikipedia.org/wiki/Hindley%E2%80%93Milner_type_system
 root.here=here
-root.image1=/carousel/EnterTerm.png
+root.image0=/carousel/StartPage-english.jpg
+root.text0=Use the buttons at the bottom of the page to navigate through the slideshow.
+root.image1=/carousel/EnterTerm-english.jpg
 root.text1=The term \u03BBx.x is entered into the input field.
-root.image2=/carousel/OpenTypeAssumptions.png
+root.image2=/carousel/OpenTypeAssumptions-english.jpg
 root.text2=The type assumptions button is clicked to open up a dialog to enter type assumptions.
-root.image3=/carousel/EnterTypeAssumptions.png
+root.image3=/carousel/EnterTypeAssumptions-english.jpg
 root.text3=A type assumption with variable "x" and type "int" is being entered.
-root.image4=/carousel/ClickTypeButton.png
+root.image4=/carousel/ClickTypeButton-english.jpg
 root.text4=The type button is clicked to start the type inference algorithm.
-root.image5=/carousel/NavigateTree.png
+root.image5=/carousel/NavigateTree-english.jpg
 root.text5=The buttons at the bottom of the website can be used to navigate through the steps of the algorithm.
-root.image6=/carousel/EndOfTree.png
+root.image6=/carousel/EndOfTree-english.jpg
 root.text6=At the end of the algorithm the most general unifier, the final type and the final tree of the \
 entered term are being displayed.
-root.image7=/carousel/OpenExportDialog.png
+root.image7=/carousel/ClickShareButton-english.jpg
 root.text7=The share button is clicked to open up the corresponding dialog.
-root.image8=/carousel/UseExportDialog.png
+root.image8=/carousel/UseShareDialog-english.jpg
 root.text8=The dialog contains a permalink to the current page, the LaTeX-code of the tree and the packages needed \
 to compile the code.
 root.correctAssumptions=Correct or delete the invalid type assumptions (red background) before closing the dialog.