ich mache bei svg irgendwas falsch

Pitwheazle · Mittwoch 26. April 2023, 18:11

Ich möchte jetzt (für verschiedene Aufgaben) Kreissegmente erstellen.
Mein view für ein 90° Kreissegment:

def winkel(req):
    angle = 90 
    print("Winkel: " + str(angle))
    radius = 50 
    print("radius: "+ str(radius))
    centerX = 50 
    print("centerX: " + str(centerX))
    centerY = 50
    print("centerY: "+ str(centerY)) 
    startX = centerX + radius *  math.cos(angle *  math.pi / 180 / 2) 
    print("startX: "+ str(startX))
    startY = centerY + radius *  math.sin(angle *  math.pi / 180 / 2) 
    print("startY: " + str(startY))
    endX = centerX + radius *  math.cos(-angle *  math.pi / 180 / 2) 
    print("endX: " + str(endX))
    endY = centerY + radius *  math.sin(-angle *  math.pi / 180 / 2)
    print("endY: "+ str(endY))
    largeArcFlag = 0 #(angle <= 180) ? 0 : 1 
    sweepFlag = 0 

    context = dict(angle = angle, radius = radius, 
                   centerX = centerX, centerY = centerY, startX = startX, startY = startY, endX = endX, endY =  endY, 
                   largeArcFlag = largeArcFlag, sweepFlag = sweepFlag )
    return render(req, 'core/aufgabe.html', context)

die Ausgabe dazu:

Code: Alles auswählen

Winkel: 90
radius: 50
centerX: 50
centerY: 50
startX: 85.35533905932738
startY: 85.35533905932738
endX: 85.35533905932738
endY: 14.644660940672622

mein Template:

Code: Alles auswählen

{% load static %}
{% load l10n %}

<html lang="de">
    <head>       
        <title>Rechentrainer von Peter Doll</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
...
    </head>
...
<body>
    <div class="container">
        {% block content %}
                <h2> Winkel {{angle}}°</h2>
                <p>
                {% include "svg/winkel.svg" %} 
                </p>
        {% endblock %}
    </div>
</body>

und mein svg Code:

Code: Alles auswählen

<svg width="100" height="100">

  <text x="10" y="15" class="text">{{angle}}°</text>

  <path d="M {{startX}}, {{startY}}
          A {{radius}}, {{radius}} 0 {{largeArcFlag}} {{sweepFlag}} {{endX}}, {{endY}}
          L {{centerX}}, {{centerY}}
          Z"
        fill="yellow" />

  <path d="M 85, 85
          A 50, 50 0 0 0 85, 15
          L 50, 50
          Z"
        fill="yellow" />
 </svg>

und jetzt zum Problem: Der untere path wird wunderbar erstellt und erzeugt ein 90° Kreissegment - der obere Code mit den {{...}} wird nicht angezeigt obwohl es (etwa) die gleichen Werte sind.
... irgendwas mache ich wieder falsch!

Sirius3 · Mittwoch 26. April 2023, 18:47

String stückelt man nicht mit + zusammen, sondern man verwendet Formatstrings.
Variablennamen werden komplett klein geschrieben.
Zum Umrechnen von Grad in Radians gibt es eine fertige Funktion, das sollte man nicht selbst programmieren.

Code: Alles auswählen

def winkel(req):
    angle = 90 
    radius = 50 
    center_x = 50 
    center_y = 50
    start_x = center_x + radius * math.cos(math.radians(angle) / 2) 
    start_y = center_y + radius * math.sin(math.radians(angle) / 2) 
    end_x = center_x + radius * math.cos(-math.radians(angle) / 2) 
    end_y = center_y + radius * math.sin(-math.radians(angle) / 2)
    large_arc_flag = 0 #(angle <= 180) ? 0 : 1 
    sweep_flag = 0 
    print(f"Winkel: {angle}")
    print(f"radius: {radius}")
    print(f"centerX: {center_x}")
    print(f"centerY: {center_y}")
    print(f"startX: {start_x}")
    print(f"startY: {start_y}")
    print(f"endX: {end_x}")
    print(f"endY: {end_y}")
    context = dict(
        angle=angle, radius=radius, 
        centerX=center_x, centerY=center_y,
        startX=start_x, startY=start_y,
        endX=end_x, endY=end_y, 
        largeArcFlag=large_arc_flag, sweepFlag=sweep_flag)
    return render(req, 'core/aufgabe.html', context)

Und wie sieht jetzt das Ergebnis aus? Daran solltest Du doch erkennen können, was falsch ist.

Pitwheazle · Mittwoch 26. April 2023, 20:42

OK, werde ich mich drum kümmern.
Der zweite Pfad erzeugt ein Kreissegment:
Bild

und wenn ich den zweiten Pfad lösche, entsteht (wie beschrieben) ... nix:
Bild

... nur {{angle}} wird angezeigt.
Nachtrag:
Wenn ich auch nur eine Zahl durch eine Variable ersetze also z.B. so:

Code: Alles auswählen

  <path d="M {{startX}}, 85
          A 50, 50 0 0 0 85, 15
          L 50, 50
          Z"
        fill="yellow" />

wird auch kein Kreissegment erzeugt. Irgendwas stimmt mit der Übergabe der Variablen mit {{...}} nicht.

sparrow · Donnerstag 27. April 2023, 04:50

Was genau das Templatesystem rendert, kann man sich im Browser ansehen, indem man sich den Quelltext der Seite anzeigen lässt.

Und soweit mir bekannt müssen die geschweiften Klammern frei stehen. Also {{ x }} - nicht {{x}}

Pitwheazle · Donnerstag 27. April 2023, 09:13

Sirius3 hat geschrieben: ↑Mittwoch 26. April 2023, 18:47 Zum Umrechnen von Grad in Radians gibt es eine fertige Funktion, das sollte man nicht selbst programmieren.

Mal eine prinzipielle Frage: Die fertige Funktion macht doch wahrscheinlich nichts anderes als meine Gleichung? Der Vorteil liegt darin dass ich etwas Code spare?

sparrow hat geschrieben: ↑Donnerstag 27. April 2023, 04:50 Und soweit mir bekannt müssen die geschweiften Klammern frei stehen. Also {{ x }} - nicht {{x}}

Nö, das geht auch so.

sparrow hat geschrieben: ↑Donnerstag 27. April 2023, 04:50 Was genau das Templatesystem rendert, kann man sich im Browser ansehen, indem man sich den Quelltext der Seite anzeigen lässt.

Da hätte ich mal wieder selbst drauf kommen können! Prima! Das ist die Lösung: Die Werte werden mit Komma übergeben statt mit Punkten - warum auch immer.
Das Problem hatten wir schon mal:
viewtopic.php?t=55814
da hatten @sirius9 und @__blackjack__ schon drauf hingewiesen, dass da keine Kommas drin sein dürfen und irgenwo in meinem Programm die Punkte in Kommas umgewandelt werden. Ich habe das damals so gelöst, dass ich die Werte gerundet habe. Das könnte ich ja wieder so lösen. Vielleicht sollte ich jetzt mal auf die Suche gehen, wo diese Umwandlung erfolgt. Hat jemand eine Idee, wo ich da suchen kann? Ich habe für die Konstruktion der Kreissegmente eine vereinfachte Umgebung erstellt und meinen restlichen Rechentrainer-Code entfernt.
Liegt das am

Code: Alles auswählen

load l10n

im Template?
Nachtrag: ich habe es entfernt - das hilft nicht.

__blackjack__ · Donnerstag 27. April 2023, 09:19

Ja das liegt am ``load l10n``. Wie man das steuert, für ”alles”, für bestimmte Abschnitte im Template, oder auf Ebene einzelner Werte, steht in der Dokumantation: https://docs.djangoproject.com/en/4.1/t ... ormatting/

Edit: Okay, es liegt nicht am ``load l10n`` aber an der lokalisierten Formatierung und zur Steuerung braucht man ``load l10n``. Sofern man das nicht grundsätzlich komplett deaktivieren will.

Pitwheazle · Donnerstag 27. April 2023, 10:19

Okay, und was bedeutet das für mein Problem? Ich glaube ich wandele die Werte einfach wieder in Ganzzahlen.

Sirius3 · Donnerstag 27. April 2023, 11:00

So schwierig ist der Artikel, den __blackjack__ verlinkt hat, ja nicht zu verstehen. Du hast Lokalisierung eingeschaltet, also mußt Du das für die Fälle, in denen Du das nicht möchtest, wieder ausschalten:

Code: Alles auswählen

<svg width="100" height="100">

  <text x="10" y="15" class="text">{{angle}}°</text>

{% localize off %}
  <path d="M {{startX}}, {{startY}}
          A {{radius}}, {{radius}} 0 {{largeArcFlag}} {{sweepFlag}} {{endX}}, {{endY}}
          L {{centerX}}, {{centerY}}
          Z"
        fill="yellow" />
{% endlocalize %}
</svg>

Pitwheazle · Donnerstag 27. April 2023, 12:15

Stimmt, Danke. Ich muss allerdings das {% localize off %} im Template einfügen und nicht im svg Code.