5. Web-Apps mit Elm

5.4 Svg-Grafiken in Elm

Alle Beispiel-Programme zu diesem Teilkapitel finden Sie in session-2023-12-18.zip

Svg-Elemente

In der Datei web05svg.html Hier sehen Sie eine Html-Seite mit einem Svg-Objekt, welches vier Unterobjekte enthält: ein Rechteck, zwei Kreise und eine Gerade. Ein Svg-Objekt ist ein Spezialfall eines Html-Objekts, aber es besteht auch aus einem Tag-Namen (rect, circle, line etc.), einer Attributliste (Position, Farbe, etc.) und einer Kinderliste. In unserem Beispiel hat aber nur das oberste Svg-Element Kinder.

In Elm geht das ganz analog. Hier sehen Sie meinen Elm-Code, der die fast gleiche Webseite erzeugt: Web05Svg.elm.

Svg-Events

Auch Svg-Elemente können "lauschen", etwa nach Mausklicks. Genauso, wie Sie mit Html.Events.onClick ButtonClicked ein Attribut erzeugen können, das spezifiziert, dass der Knopf bei Klick die Nachricht ButtonClicked erzeugen soll, so können Sie mit Svg.Events.onClick dies einem beliebigen Svg-Element hinzufügen. Als Beispiel-App hier Web07SvgClick.elm. Das ist einfach ein Kreis, der auf Knopfdruck die Farbe wechselt.

Maus-Position

Um Spaß mit Grafiken zu haben, müssen Sie auf die Maus-Position reagieren können. Dazu müssen Sie ein weiteres Elm-Paket installieren:

elm install mpizenberg/elm-pointer-events

Hier sehen Sie eine einfache App, die ein umrandetes Svg-Feld erzeugt und auf Mausklick die Mauskoordinaten angibt: Web06Mouse.elm. Die entscheidenden Code-Zeilen sind:

type Msg                        
    = MouseClicked Mouse.Event

Hier definieren wir einen Datentyp Msg. Die Nachricht soll an unseren Elm-Code gesendet werden, wenn der Nutzer mit der Maus in das Svg-Feld klickt. Als Payload sollen die Maus-Koordinaten angehängt werden. In Elm wird standardmäßig mehr angehängt, nämlich ein Objekt vom Typ Mouse.Event, der unter anderem eine Variable offsetPos vom Typ (Float, Float) enthält. Als nächstes die Funktion update, in der wir auf diese Nachricht reagieren:

update : Msg -> Model -> Model
update message model =
    case message of
        MouseClicked mouseEvent ->
            -- wir fangen die Payload im Bezeichner 'mouseEvent'
            { clickPosition = mouseEvent.offsetPos }                        
                    

Schließlich gibt es in der Funktion view noch die Stelle, wo wir aus der Klickposition, also einem (Float, Float), ein Html-Text-Element erzeugen. Schauen Sie sich das im Quelltext selber an.