# Koordinatensystem dynamisch anpassen



## DonnaDuesentrieb (23. Mai 2016)

Moin allerseits!
Wir haben in der Uni die Aufgabe, ein Koordinatensystem zu erstellen, dort Punkte (bekommen wir als x-y-Koordinaten in einer HTML-Datei) und diese miteinander zu verbinden.
Momentan muss man bei uns die Punkte noch in zwei Arrays manuell eingeben, aber das bekommen wir sicher noch hin, die aus der HTMl-Datei zu nehmen.
Unser größtes Problem, bei dem wir einfach nicht weiterkommen bzw. unsere Kenntnisse wohl nicht ausreichen, ist die dynamische Anpassung des Koordinatensystems. Also, dass das Ganze bei einem Ausreisserwert von sagen wir mal 1000 sich automatisch verkleinern bzw. die Skalierung so anpassen würde, dass die ganze Kurve inklusive solcher Ausreisser zu sehen ist mit passender Achsenbezeichnung. Könntet ihr uns da weiterhelfen?

Bisher haben wir das hier:


```
import java.awt.*;
import java.applet.Applet;

public class graph extends java.applet.Applet {
                        //Array x-Werte(Dichte)
    private double[] WerteX= {3.2 , 5.5, 6.5, 7.0};
 
                        //Array y-Werte(Druck)
    private double[] WerteY= {0.0 , 100.0, 320.0, 550.0};


    public void init() {
                        // Hintergrundfarbe schwarz
        setBackground (Color.black);
    }

    public void paint (Graphics g) {
        float x, y;
        int xnorm, ynorm, i;

        // ACHSEN ZEICHNEN -----------------------------------------------

        g.setColor(Color.red);                // Koordinatenbezeichnung x-Achse
        g.setFont(new Font("Arial", Font.BOLD, 20));
     
        for (i=0; i<=12; i+=3) {
            g.drawString(String.valueOf(i), 100+i*50, 670);
        }
                                               //Koordinatenbezeichnung y-Achse
         for (i=0; i<=12;i++)   {          
        g.drawString ( String.valueOf(i*50),80 ,650-50*i );
        }
      
     
                        // Vordergrundfarbe Rot fuer die Achsen
        g.setColor (Color.red);

                        // X-Achse zeichnen (schon skaliert auf 500%)
        g.drawLine (0, 650, 650, 650);

                        // Y-Achse zeichnen (schon skaliert auf 500%)
        g.drawLine (100, 0, 100, 650);

                        // Skaleneinteilung fuer die X-Achse zeichnen
        for (i = 100; i <= 750; i += 150){
            g.drawLine (i, 0, i, 650);
        }

                                                  // Skaleneinteilung fuer die Y-Achse zeichnen
        for (i = 0; i <= 650; i += 50){
            g.drawLine (100, i, 750, i);
        }
        int size = WerteX.length;

        g.setColor (Color.white);
                                                //X-Achse Werte hochskaliert,Punkte
        for (i=0; i<size; i++)    {             
            g.fillOval ((int)WerteX[i][I]*50+100-3, 650-(int)WerteY[i][I]-3, 6, 6);
        }                      
          
        for (i=0; i<size; i++) {
        g.drawLine ((int)WerteX[i][I]*50+100, 650-(int)WerteY[i][I],(int)WerteX[i+1]*50+100, 650-           (int)WerteY[i+1]);
        }
      
    }

}
```

Das ganze Ding lassen wir uns mit folgender Html-Datei im Appletviewer anzeigen:


```
<html>
<head>
</head>
<body>

<Applet code="graph.class" width="700" height="700"></Applet>


</body>
</html>
```


----------



## Joose (23. Mai 2016)

Code bitte in Code-Tags packen, danke! 
[code=java] ... dein code [/code]


----------



## dayaftereh (23. Mai 2016)

Ich würde mal sagen du brauchst eine Transformation vom Punkte Koordinatensystem in das Bildschirm Koordinatensystem. Wobei mit Punkte Koordinatensystem, das von den Arrays gemeint ist und mit Bildschirm das auf dem du zeichnest...

Ganz einfach könntest du es machen mit einem Faktor (fx, fy) den du mal die Punkte (x, y) aus den Arrays nimmst. Diesen Faktor kannst du dann erhöhen bzw. erniedrigen so das es passt, am besten mit einem MouseListener für das MauseWheel.

EDIT


```
p_i × f = b_i
```

p_i: Punkt i
f: Faktor 
b_i: Bildschirm Punkt i


----------



## DonnaDuesentrieb (23. Mai 2016)

dayaftereh hat gesagt.:


> Ich würde mal sagen du brauchst eine Transformation vom Punkte Koordinatensystem in das Bildschirm Koordinatensystem. Wobei mit Punkte Koordinatensystem, das von den Arrays gemeint ist und mit Bildschirm das auf dem du zeichnest...
> 
> Ganz einfach könntest du es machen mit einem Faktor (fx, fy) den du mal die Punkte (x, y) aus den Arrays nimmst. Diesen Faktor kannst du dann erhöhen bzw. erniedrigen so das es passt, am besten mit einem MouseListener für das MauseWheel.
> 
> ...



Vielen Dank für deine Antwort! Ich glaube, wir sollen das so machen, dass sich das Koordinatensystem automatisch selbst anpasst...


----------



## JStein52 (23. Mai 2016)

DonnaDuesentrieb hat gesagt.:


> ist die dynamische Anpassung des Koordinatensystems


Dynamisch in Bezug auf was ?  Änderung der Fenstergrösse durch den Benutzer ?


----------



## DonnaDuesentrieb (23. Mai 2016)

Dynamisch in Bezug auf die Skalierung und die Darstellung des ganzen Koordinatensystems. Wir hatten bisher überlegt, irgendwie den minimalen und maximalen Wert aus dem Array für die X- und dem für die Y-Werte rauszubekommen und diese irgendwie so in den Teil mit der Skalierung einzubringen, dass sich die Achsen automatisch anpassen...


----------



## JStein52 (23. Mai 2016)

Ja, diese Idee ist ja auch genau richtig. Und das ergibt dann die Faktoren fx und fy die oben erwähnt wurden. Und was ist aktuell gerade das Problem ?


----------



## DonnaDuesentrieb (23. Mai 2016)

...es hapert an der Umsetzung  Was müssen wir damit jetzt genau machen? Und wie bekommen wir den Min und den Max Wert? Wir sind leider ziemliche Anfänger und haben für den bisherigen Code schon Ewigkeiten gebraucht.


----------



## Cromewell (23. Mai 2016)

DonnaDuesentrieb hat gesagt.:


> Min und den Max Wert


Was ist denn für euch Min und Max ? Niedrigste x oder y, oder der, der beides am niedrigsten hat?


----------



## DonnaDuesentrieb (23. Mai 2016)

Ich hätte jetzt gedacht, einmal niedrigsten und höchsten aus dem X-Array und einmal niedrigsten und höchsten aus dem Y-Array und damit dann jeweils X- und Y-Achse anpassen.


----------



## DonnaDuesentrieb (25. Mai 2016)

Hat vielleicht noch jemand eine Idee oder einen Tip,bitte? :-( Wir wissen nicht, wie wir unsere Überlegung als Code darstellen sollen.


----------



## JStein52 (25. Mai 2016)

Ihr habt doch die x- und die y-Koordinaten in diesen beiden Arrays oder ? dann sucht ihr euch daraus jeweils das Maximum und das Minimum. Der Bereich dazwischen ist der den ihr mit eurer Zeichenfläche (den Achsen) abdecken müsst. Angenommen die kleinste X-Koordinate ist -10 und die grösste 90. Dann müsst ihr einen Bereich von 100 Einheiten darstellen können (xMax - Xmin). Wenn nun euere Fensterbreite 1600 Pixel ist dann entspricht 1 Zeicheneinheit eben 1600/(xMax-xMin) Pixeln. Genau so in y-Richtung.
Jetzt könnt ihr bei diesen Berechnungen natürlich noch Platz für Ränder lassen und evtl. runden. Aber das Prinzip sollte klar sein oder ?


----------



## JStein52 (25. Mai 2016)

dayaftereh hat gesagt.:


> p_i * f = b_i
> 
> p_i: Punkt i
> f: Faktor
> b_i: Bildschirm Punkt i


Das entspricht dieser Formel.


----------



## DonnaDuesentrieb (25. Mai 2016)

JStein52 hat gesagt.:


> Ihr habt doch die x- und die y-Koordinaten in diesen beiden Arrays oder ? dann sucht ihr euch daraus jeweils das Maximum und das Minimum. Der Bereich dazwischen ist der den ihr mit eurer Zeichenfläche (den Achsen) abdecken müsst. Angenommen die kleinste X-Koordinate ist -10 und die grösste 90. Dann müsst ihr einen Bereich von 100 Einheiten darstellen können (xMax - Xmin). Wenn nun euere Fensterbreite 1600 Pixel ist dann entspricht 1 Zeicheneinheit eben 1600/(xMax-xMin) Pixeln. Genau so in y-Richtung.
> Jetzt könnt ihr bei diesen Berechnungen natürlich noch Platz für Ränder lassen und evtl. runden. Aber das Prinzip sollte klar sein oder ?



Vielen Dank, ja, so ungefähr hatten wir das schon überlegt, wir wissen nur nicht, wie wir das als Code aufschreiben können.


----------



## JStein52 (25. Mai 2016)

Habt ihr jetzt Probleme mit der graphischen Darstellung, Zeichnen von Achsen etc. oder mit dieser Berechnung ?


----------



## Nisbo (7. Aug 2016)

Ich stehe gerade vor einem ähnlichen Problem, Anpassung der Y Achse an dynamische Werte aus einen Datenbank und irgendwie komme ich mit der Lösung von hier nicht klar


```
private double scaleYD(double yMin, double yMax){
        // 182 Pixel / (630 Watt - 600 Watt)
        // 182 / 30
        // = 6,066666666666667
        // 630 Watt / 6,066666666666667 = 103,8461538461538 Pixel
      
        double factor = 182 / (yMax-yMin);
      
        return factor;
    }
```

Meine Y Achse ist 182 Pixel hoch, jetzt nehmen wir mal an ich habe als Minimum 600 Watt und als Maximum 630 Watt, macht dann eine Differenz von 30 Watt ala 30 Pixel die darzustellen sind.

// 182 Pixel / (630 Watt - 600 Watt)
// 182 / 30
// = 6,066666666666667

damit hätten wir dann einen Faktor von 6,066666666666667

Will ich jetzt den Maximalwert darstellen dann kommt aber nicht 182 raus
 // 630 Watt / 6,066666666666667 = 103,8461538461538 Pixel

Also wo liegt jetzt mein Denkfehler ?


----------



## JCODA (7. Aug 2016)

@Nisbo wenn du schon Minimum = 600 und Maximum 630 wählst, und deine Achso somit nur 30 "Einheiten" hat, dann musst du von jeder Date dein Minimum abziehen 
so ergibt sich :
630-600 = 30
30*6,066666 = 182


----------



## Nisbo (7. Aug 2016)

Danke, funktioniert


----------

