FLBK-Wiki

Gozintograph: Unterschied zwischen den Versionen

← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Keine Bearbeitungszusammenfassung
Zeile 25: Zeile 25:
<html>
<html>
<div id="gozinto_small" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<div id="gozinto_small" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script>
<script>
var brd = JXG.JSXGraph.initBoard('gozinto', {
// JSXGraph erst starten, wenn MediaWiki das DOM fertig aufgebaut hat
    boundingbox: [-1, 10, 15, -1],
document.addEventListener("DOMContentLoaded", function () {
    axis: false,
    showNavigation: false
});
 
// -------------------------------------------------------------
// Hilfsfunktion: Rechteck als Polygon aus 4 Punkten erzeugen
// -------------------------------------------------------------
function createRect(x,y,w,h,labelText) {
    let p1 = brd.create('point', [x, y],      {visible:false, fixed:false});
    let p2 = brd.create('point', [x+w, y],    {visible:false, fixed:false});
    let p3 = brd.create('point', [x+w, y-h],  {visible:false, fixed:false});
    let p4 = brd.create('point', [x, y-h],    {visible:false, fixed:false});


     let poly = brd.create('polygon', [p1,p2,p3,p4], {
     var brd = JXG.JSXGraph.initBoard('gozinto_small', {
         fillColor:'#3498db',
        boundingbox: [-1, 10, 15, -1],
        fillOpacity:0.8,
         axis: false,
        borders:{strokeWidth:2, strokeColor:'#1f4e78'},
         showNavigation: false
         hasInnerPoints:true
     });
     });


     let label = brd.create('text',
     // -------------------------------------------------------------
         [ ()=>(p1.X()+p3.X())/2,
    // Rechteck als Polygon
          ()=>(p1.Y()+p3.Y())/2,
    // -------------------------------------------------------------
          labelText ],
    function createRect(x,y,w,h,labelText) {
         {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14}
        let p1 = brd.create('point', [x, y],      {visible:false});
    );
         let p2 = brd.create('point', [x+w, y],    {visible:false});
        let p3 = brd.create('point', [x+w, y-h],   {visible:false});
         let p4 = brd.create('point', [x, y-h],     {visible:false});


    return {p1:p1,p2:p2,p3:p3,p4:p4,centerX:()=> (p1.X()+p3.X())/2, centerY:()=> (p1.Y()+p3.Y())/2};
        let poly = brd.create('polygon', [p1,p2,p3,p4], {
}
            fillColor:'#3498db',
            fillOpacity:0.8,
            vertices:{visible:false},
            borders:{strokeWidth:2, strokeColor:'#1f4e78'}
        });


// -------------------------------------------------------------
        brd.create('text',
// Hilfsfunktion: Kreis-Knoten mit Punkt + Beschriftung
            [ ()=>(p1.X()+p3.X())/2,
// -------------------------------------------------------------
              ()=>(p1.Y()+p3.Y())/2,
function createCircleNode(x,y,labelText){
              labelText ],
    let p = brd.create('point', [x,y], {visible:false});
            {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14}
    let c = brd.create('circle', [p, 0.35], {
         );
        strokeColor:'black',
        fillColor:'white',
         fillOpacity:1
    });


    let t = brd.create('text',[()=>p.X(), ()=>p.Y(), labelText],
        return {p1:p1,p3:p3,
        {anchorX:'middle', anchorY:'middle', fontSize:12, strokeColor:'black'}
                centerX:()=> (p1.X()+p3.X())/2,
     );
                centerY:()=> (p1.Y()+p3.Y())/2};
     }


     return p;
     // -------------------------------------------------------------
}
    // Kreis-Knoten
    // -------------------------------------------------------------
    function createCircleNode(x,y,labelText){
        let p = brd.create('point', [x,y], {visible:false});
        brd.create('circle', [p, 0.35], {
            strokeColor:'black',
            fillColor:'white'
        });
        brd.create('text',[()=>p.X(), ()=>p.Y(), labelText],
            {anchorX:'middle', anchorY:'middle', fontSize:12});
        return p;
    }


// -------------------------------------------------------------
    // -------------------------------------------------------------
// Linien erstellen, die immer verbunden bleiben
    // Linien
// -------------------------------------------------------------
    // -------------------------------------------------------------
function connect(A, B, arrow){
    function connect(A, B, arrow){
    if(arrow){
        if(arrow){
         return brd.create('arrow', [A, B], {strokeWidth:2});
            return brd.create('arrow', [A, B], {strokeWidth:2});
        }
         return brd.create('line', [A, B], {straightFirst:false, straightLast:false, strokeWidth:2});
     }
     }
    return brd.create('line', [A, B], {
        straightFirst:false, straightLast:false, strokeWidth:2
    });
}


// -------------------------------------------------------------
    // -------------------------------------------------------------
// Rechtecke für EINZELTEILE (oben)
    // Einzelteile
// -------------------------------------------------------------
    // -------------------------------------------------------------
let E1 = createRect(0,8,2,1,'E1');
    let E1 = createRect(0,8,2,1,'E1');
let E2 = createRect(3,8,2,1,'E2');
    let E2 = createRect(3,8,2,1,'E2');
let E3 = createRect(6,8,2,1,'E3');
    let E3 = createRect(6,8,2,1,'E3');
let E4 = createRect(9,8,2,1,'E4');
    let E4 = createRect(9,8,2,1,'E4');


// -------------------------------------------------------------
    // -------------------------------------------------------------
// Rechtecke für BAUTEILE (unten)
    // Bauteile
// -------------------------------------------------------------
    // -------------------------------------------------------------
let B1 = createRect(0.5,3,2,1,'B1');
    let B1 = createRect(0.5,3,2,1,'B1');
let B2 = createRect(3.5,3,2,1,'B2');
    let B2 = createRect(3.5,3,2,1,'B2');
let B3 = createRect(6.5,3,2,1,'B3');
    let B3 = createRect(6.5,3,2,1,'B3');
let B4 = createRect(9.5,3,2,1,'B4');
    let B4 = createRect(9.5,3,2,1,'B4');
let B5 = createRect(12.5,3,2,1,'B5');
    let B5 = createRect(12.5,3,2,1,'B5');


// -------------------------------------------------------------
    // -------------------------------------------------------------
// Beispielkanten (wie von dir definiert)
    // Verbindung
// Struktur:  E → Kreis → B
    // -------------------------------------------------------------
// -------------------------------------------------------------
    function makeConnection(E, B, amount, yMid){
        let cx = ()=> (E.centerX() + B.centerX())/2;
        let cy = yMid;


function makeConnection(E, B, amount, yMid){
        let circlePoint = createCircleNode( cx(), cy, amount );
    let cx = ()=> (E.centerX() + B.centerX())/2;
    let cy = yMid;


    let circlePoint = createCircleNode( cx(), cy, amount );
        connect([()=>E.centerX(), ()=>E.centerY()-0.5], circlePoint, false);
        connect(circlePoint, [()=>B.centerX(), ()=>B.centerY()+0.5], true);
    }


     connect( [()=>E.centerX(), ()=>E.centerY()-0.5], circlePoint, false );
     // -------------------------------------------------------------
     connect( circlePoint, [()=>B.centerX(), ()=>B.centerY()+0.5], true );
    // Kanten
}
    // -------------------------------------------------------------
    makeConnection(E1, B1, "2", 6);
     makeConnection(E2, B1, "1", 6);


// B1: E1 & E2
    makeConnection(E1, B2, "2", 6);
makeConnection(E1, B1, "2", 6);
    makeConnection(E2, B2, "1", 6);
makeConnection(E2, B1, "1", 6);


// B2: E1 & E2
    makeConnection(E1, B3, "1", 6);
makeConnection(E1, B2, "2", 6);
    makeConnection(E2, B3, "1", 6);
makeConnection(E2, B2, "1", 6);
    makeConnection(E3, B3, "1", 6);


// B3: E1 & E2 & E3
    makeConnection(E1, B4, "2", 6);
makeConnection(E1, B3, "1", 6);
    makeConnection(E3, B4, "1", 6);
makeConnection(E2, B3, "1", 6);
    makeConnection(E4, B4, "1", 6);
makeConnection(E3, B3, "1", 6);


// B4: E1 & E3 & E4
    makeConnection(E1, B5, "1", 6);
makeConnection(E1, B4, "2", 6);
    makeConnection(E4, B5, "2", 6);
makeConnection(E3, B4, "1", 6);
makeConnection(E4, B4, "1", 6);
 
// B5: E1 & E4
makeConnection(E1, B5, "1", 6);
makeConnection(E4, B5, "2", 6);


});
</script>
</script>
</html>
</html>


== Beispiel 2: Rezeptstruktur eines Gerichts ==
== Beispiel 2: Rezeptstruktur eines Gerichts ==
Abgerufen von „https://wiki.flbk-hamm.de/Gozintograph“