G
GeoTeach
New member
- Beiträge
- 3
- Punkte Reaktionen
- 1
Hallo allerseits
Ich nutze in meinem Geografie-Unterricht gerne Wirkungsgefüge um komplexe Systeme zu visualisieren.
Wirkungsgefüge verbinden Elemente durch Beziehungen:
In einem Anflug von Selbstüberschätzung habe ich versucht, das Erstellen von Wirkungsgefügen zu digitalisieren (und eine Art Simulation hinzufügen).
Viele Probleme konnte ich ausmerzen, doch jetzt scheitere ich an den Textboxen:
Die Kreise repräsentieren die Elemente. Das Rechteck repräsentiert die Beziehung zwischen den Elementen (in der ersten Abbildung als weisser Pfeil dargestellt). Momentan werden Beziehungen nur als Rechteck zwischen die Elemente gezwängt (in der Abbildung weiss). Ziel ist, dass die Beziehung als Pfeil dargestellt wird, vom Quell-Element-Kreis zum Ziel-Element-Kreis (in der Abbildung schwarz, hab' ich von Hand reingezeichnet).
Aber das kriege ich nicht hin. Meine Idee war, die Mittelpunkte der Element-Kreise als Vektor zu interpretieren. Die Textboxen müssen dann parallel zu diesem Vektor sein. Das hat aber nicht geklappt.
Hat jemand Ideen wie ich die Texte mitsamt der Rechtecke dynamisch so drehen lassen kann, dass sie passend zwischen 2 Elementen stehen?
Ich habe von html sehr wenig Ahnung und von Javascript ein bisschen. Daher wär's für mich besser, wenn es eher mittels Javascript umsetzbar wäre.
Ich bin für jeden Vorschlag dankbar!
Vielen Dank im Voraus!
Liebe Grüsse aus der Schweiz
Adrian
PS: Ich habe absichtlich ALLES in eine einzige html-Datei geschrieben. Dann müssen die Schüler nur runterladen und draufklicken. Alles andere führt oft zu Komplikationen...
Hier der vermutlich relevante Javascript-Code, der die Beziehungen zeichnen soll. Der restliche Code steht in der Zipdatei.
Ich nutze in meinem Geografie-Unterricht gerne Wirkungsgefüge um komplexe Systeme zu visualisieren.
Wirkungsgefüge verbinden Elemente durch Beziehungen:
In einem Anflug von Selbstüberschätzung habe ich versucht, das Erstellen von Wirkungsgefügen zu digitalisieren (und eine Art Simulation hinzufügen).
Viele Probleme konnte ich ausmerzen, doch jetzt scheitere ich an den Textboxen:
Die Kreise repräsentieren die Elemente. Das Rechteck repräsentiert die Beziehung zwischen den Elementen (in der ersten Abbildung als weisser Pfeil dargestellt). Momentan werden Beziehungen nur als Rechteck zwischen die Elemente gezwängt (in der Abbildung weiss). Ziel ist, dass die Beziehung als Pfeil dargestellt wird, vom Quell-Element-Kreis zum Ziel-Element-Kreis (in der Abbildung schwarz, hab' ich von Hand reingezeichnet).
Aber das kriege ich nicht hin. Meine Idee war, die Mittelpunkte der Element-Kreise als Vektor zu interpretieren. Die Textboxen müssen dann parallel zu diesem Vektor sein. Das hat aber nicht geklappt.
Hat jemand Ideen wie ich die Texte mitsamt der Rechtecke dynamisch so drehen lassen kann, dass sie passend zwischen 2 Elementen stehen?
Ich habe von html sehr wenig Ahnung und von Javascript ein bisschen. Daher wär's für mich besser, wenn es eher mittels Javascript umsetzbar wäre.
Ich bin für jeden Vorschlag dankbar!
Vielen Dank im Voraus!
Liebe Grüsse aus der Schweiz
Adrian
PS: Ich habe absichtlich ALLES in eine einzige html-Datei geschrieben. Dann müssen die Schüler nur runterladen und draufklicken. Alles andere führt oft zu Komplikationen...
Hier der vermutlich relevante Javascript-Code, der die Beziehungen zeichnen soll. Der restliche Code steht in der Zipdatei.
Javascript:
function drawRelations() {
const svg = document.getElementById('visualisierung').querySelector('svg');
relations.forEach((relation, index) => {
const sourceElement = elements.find(el => el.beschreibung === relation.quelle.beschreibung);
const targetElement = elements.find(el => el.beschreibung === relation.ziel.beschreibung);
if (!sourceElement || !targetElement) return;
const sourceAngle = elements.indexOf(sourceElement) * angleIncrement - Math.PI / 2;
const targetAngle = elements.indexOf(targetElement) * angleIncrement - Math.PI / 2;
const sourceX = centerX + polygonRadius * Math.cos(sourceAngle);
const sourceY = centerY + polygonRadius * Math.sin(sourceAngle);
const targetX = centerX + polygonRadius * Math.cos(targetAngle);
const targetY = centerY + polygonRadius * Math.sin(targetAngle);
const distance = Math.sqrt((targetX - sourceX) ** 2 + (targetY - sourceY) ** 2);
// Berechnung der Mitte zwischen den beiden Elementen
const midX = (sourceX + targetX) / 2;
const midY = (sourceY + targetY) / 2;
// Berechnung des Winkels zwischen den beiden Elementen
const angle = Math.atan2(targetY - sourceY, targetX - sourceX);
// Berechnung der Breite und Höhe des Rechtecks
const rectWidth = distance - elementRadius * 2;
const rectHeight = elementRadius * 1.6; // 80% des Element-Kreis-Durchmessers
// Erstellen eines Rechtecks
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', midX - rectWidth / 2);
rect.setAttribute('y', midY - rectHeight / 2);
rect.setAttribute('width', rectWidth);
rect.setAttribute('height', rectHeight);
rect.setAttribute('fill', 'white');
rect.setAttribute('stroke', 'black');
// Text für die Beziehung im Rechteck
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.textContent = relation.quelle.beschreibung + ' wirkt ' + relation.operator + ' ' + relation.operand + ' auf ' + relation.ziel.beschreibung + ' ein';
let fontSize = getMaxFontSize4Relations(text.textContent, rectWidth, rectHeight);
text.setAttribute('font-size', fontSize);
text.setAttribute('x', midX);
text.setAttribute('y', midY);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('dominant-baseline', 'middle');
svg.appendChild(rect);
svg.appendChild(text);
});
}
, habe ich mich dazu entschieden, alles selber zu schreiben. Auch um Lernfortschritte mit Javascript und html zu machen.