2D-Grafik Div. Punkte zur Sinuskurve verbinden

[Exflame]

Hallo Leute,

ich steh gerade total auf dem Schlauch. Ich programmiere gerade ein Programm, das eine gewünschte Frequenz an einen Mikrocontroller sendet und dieser mit 2500 Werten beantwortet.
Diese Werte sollen die Sinuskurve bilden, dich ich dann in meinem Programm zeichnen soll. Das ganze möchte ich in einem JPanel anzeigen lassen.

Nun steh ich total auf dem Schlauch und weiß nicht, wie ich das umsetzen soll. Ich hab mir schon JFreeChart angeschaut (LineChartDemo4), aber die wollen nur einzelne Punke (Start / Ende). Mit Polygon hab ich es auch schon versucht, bin aber daran gescheitert.

Kurz zur Erklärung:

Ich bekomme die gesagten 2500 Werte! z.B. (kleiner Ausschnitt von der Ausgabe):

1136.448.123.386.1054.1671.1811.1378.671.174.229.798.1491.1831.1585.922.297.140.558.1264.1774.1736.1178.482.127.355.1011.1645.........
(wird noch durch den "." gesplittet, das ich ein eindimensionales Array erhalte)

Und daraus soll ich die Sinuskurve bilden. Habt ihr mir eine Idee? Ich komm gerade selber nicht drauf und brauch nur einen "anschubser!" :autsch:

Danke Euch schon mal!

VG
Exflame

 

[Marco13]

Hm. Sowas wie http://www.java-forum.org/codeschnipsel-u-projekte/122994-einfacher-funktionsplotter.html geht in diese Richtung, aber vielleicht nicht ganz: Es ist vermutlich aufwändiger, als es hier sein müßte. Aber wenn man dort den Teil mit
"// Erstelle eine Funktion, die geplottet werden soll"
ändert zu

        // Erstelle eine Funktion, die geplottet werden soll
        // und weise sie dem SimplePlotPanel zum plotten zu
        final int values[] = { 1136,448,123,386,1054,1671,1811,1378,671,174,229,798,1491,1831,1585,922,297,140,558,1264,1774,1736,1178,482,127,355,1011,1645 };
        Function function = new Function()
        {
            @Override
            public float compute(float argument)
            {
                if (argument < 0)
                {
                    return 0;
                }
                if (argument >= values.length)
                {
                    return 0;
                }
                return values[(int)argument] * 0.001f;

            }
        };
        plotPanel.setFunction(function);

Wird schonmal die Kurve gezeichnet (noch ziemlich eckig - es sind ja nur diskrete Werte). Kannst ja mal schauen, ob das hilft, wenn nicht kann man sich ggf. nochmal was einfacheres, kompakteres überlegen.

 

[Exflame]

He, danke für Deine Antwort!!

Hm, kann es sein, das es sich hier um ein HTML handelt? Ich sollte die ganze Sache einem JPanel einfügen bzw. das JPanel überschreiben...... Bei "Function" fängt mein Eclipse an zu maulen. Im Buch "JavaInsel" ist auch nichts drin.... :noe:

Das ist mein JPanel, bei dem ich die Kurve anzeigen sollte:

           //----- JPanel für aktuell-laufender Sinus -----
		    this.jp4 = new JPanel(null);
		    this.jp4.setBounds(10,500,375,105);
		    this.c.add(jp4);

Nicht besonders groß, aber ich kann noch variieren....

 

[vanny]

Du benötigst wohl einen Algo für eine Interpolation deiner Daten, such mal nach B-Spline oder Bezierkurven, da sollte sich was finden lassen.

Gruß Vanny

 

[Marco13]

Hmmmm --- was mit HTML?!? Gezeichnet wird dort im SimplePlotPanel (was ein JPanel ist). Wenn's nicht hilft, poste mal schon vorhandenen Code, dann kann man schauen, wie man dort was einfügen kann.

Aber... die Tatsache, dass dei Größe des Zeichenbereichs sich ändern kann, ist gerade so etwas, was ein bißchen "mehr drumherum" notwendig macht. Einfach mit drawLine was zeichnen geht (wenn man sich nicht genau überlegt, wie man's macht) immer von einer bestimmten Fenstergröße aus. Bei diesem Plotter kann man das alles einstellen.

 

[Exflame]

Hm, das mit dem Plotter hört sich echt gut an.... Ist das eine extra Methode?
Ich sitze schon fast den ganzen Tag dran. Das mit dem Plotter hab ich noch nicht gerafft... Sorry!
Das hab ich bis jetzt:

  			//----- JPanel 4 -----
  			g = jp4.getGraphics();
  			g.drawRect(0,0,373,103);
  			g.setColor(Color.red);
  			g.drawLine(0, 51, 373, 51);
  			
  			//----- SinusKurve Test 18.02.12 -----  	
  			for(pz=0;pz<this.anzahlWerte;pz++)
  			{
  				p.add(new Point(pz,(this.werteSinus[pz]-this.mittelWert)));		
  			}
  			Iterator<Point> it = p1.iterator();									

  			while(it.hasNext())													//läuft die ArrayList durch
  			{
  				if(aktuellerPunkt!=null)
  				{
  					letzterPunkt=aktuellerPunkt;
  				}
  				aktuellerPunkt = it.next();
  				
  				if(letzterPunkt!=null)
  				{
  					g.setColor(Color.black);
  					g.drawLine(letzterPunkt.x,letzterPunkt.y,aktuellerPunkt.x,aktuellerPunkt.y);
  				}
  			}

Und funktioniert natürlich noch nicht. ;( Und wenn es funktioniert hätte, dann wäre es mit Sicherheit keine schöne Kurve gewesen, sondern erst ein paar Ecken....

 

[Exflame]

Ich versuche mich gerade wieder an den SimplePlotPanel. Lässt sich aber nicht importieren..... ???:L
Muss ich noch was bestimmtes bei Eclipse einbinden? Package bzw. Libaries?

 

[bERt0r]

Ich würde die Punkte (also die Extrempunkte und Wendepunkte) in ein GeneralPath Shape packen, das kannst du dann einfach mit drawShape() zeichnen: GeneralPath#curveTo() bzw. geht bei einer Sinuskurve quadTo vielleicht auch?

 

[Marco13]

Und funktioniert natürlich noch nicht. ;( Und wenn es funktioniert hätte, dann wäre es mit Sicherheit keine schöne Kurve gewesen, sondern erst ein paar Ecken....

Abgesehen davon, dass es nicht besonders "schön" oder "flexibel" ist (man hat keinen Einfluß mehr auf die Form - dort kommt bestenfalls ein verrauscht aussehendes Zickzack raus) wäre es gut, wenn du sagen würdest, WAS nicht funktioniert - am besten mit einem KSKB.

 

[vanny]

Klick könnte ganz dienlich sein.

Gruß Vanny

 

[Exflame]

So, sorry, das ich so spät antworte!

Ich hab ich mal das KSKB!

package jf;

import javax.swing.*;
import java.awt.*;
import java.util.*;

public class Kskb extends JFrame
{
	//----- Deklaration -----
	private JPanel jp;
	//Die Werte sind ein "kleiner" Auschnitt der tatsächlichen Werte! ich hab 2500 Stück pro Test!
	//Der Durchschnitt aller Werte bilden die X-Achse --> Also "0" --> Dieser ist beim tatsächlichen
	//Test immer zwischen 950 und 980, wenn ich 2 MHz teste
	private int [] werte = {1833,1576,909,290,143,569,1277,1779,1731,1165,471,125,364,1025,1653,1818,1405,699,185,215,769};
	private int pz=0;													//PunkteZähler ;)
	private ArrayList <Point> p = new ArrayList<Point>();				// ArrayList für Punkte mit x/y Koordinaten
	private Point letzterPunkt, aktuellerPunkt;							//einzelne Punkte, die verbunden werden sollen
	
	//----- Container -----
	private Container c = this.getContentPane();
	
	public Kskb()
	{
	    //===== Fenster Titel =====
	    super("KSKB für Java-Forum");

	   //===== G U I =====
	   //----- Hauptfenster -----
	    this.setLayout(null);                                           //kein Layoutmanager
	    this.setBounds(600,50,300,300);                                 //Fenstergröße (x,x,b,h)
	    c=this.getContentPane();
	    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	    
	    //----- Panel -----
	    this.jp = new JPanel();
	    this.jp.setBounds(5, 5, 295, 295);                              //x,y,x,y
	    this.c.add(jp);	
	    
	    //===== Fenster sichtbar und Größe nicht änderbar =====
        setResizable(false);                                            //Größenänderung nicht möglich
        this.setVisible(true); 
        
        
	}   
	  //----- PAINT Methode für Sinus -----
	  public void paint(Graphics g)
	  { 
		super.paint(g);

			//----- JPanel mit Rechteck umrahmen -----
			g = jp.getGraphics();
			g.drawRect(5,5,275,255);
  			g.setColor(Color.red);
  			g.drawLine(5, 123, 280, 123);
			
			//----- SinusKurve JPanel31 ------
			for(pz=0;pz<21;pz++)
			{
				//Hier soll pro Punkt auf der X-Achse ein Y-Achsen-Punkt zugewiesen werden!
  				p.add(new Point(pz,(this.werte[pz])));					//Einzelne Punkte für Sinus (x,y)
			}

  			Iterator<Point> it = p.iterator();							

  			while(it.hasNext())											
  			{
  				if(aktuellerPunkt!=null)
  				{
  					letzterPunkt=aktuellerPunkt;
  				}
  				aktuellerPunkt = it.next();
  				
  				if(letzterPunkt!=null)
  				{
  					g.setColor(Color.black);
  					g.drawLine(letzterPunkt.x,letzterPunkt.y,aktuellerPunkt.x,aktuellerPunkt.y);
  				}
  			}
			
	  }
        //----- Main-Methode -----
        public static void main(String[] args)
        {
        	Kskb k = new Kskb();
        }        
	}

Ein paar Zacken sehe ich, ist aber natürlich nichts!

Nochmals vielen Dank an Euch, das Ihr Euch so reinhängt! :toll:

 

[Paddelpirat]

Nur mal so vom Überfliegen her würde ich behaupten, dass sich fast alle Punkte die du zeichnen möchtest außerhalb deines Darstellungsbereichs befinden.

 

[bERt0r]

Was soll denn das werden? Nicht nur dass du in deiner paint Methode ständig neue Punkte in deine "p" Collection stopfst - die paint Methode wird sehr oft aufgerufen, und du packst jedesmal dein Array nochmals in die ArrayList rein - deine Array mit Punkten wird auch ganz falsch repräsentiert.

Mach dir mal klar was das für Werte sind, die du da erhältst. Ich sagte dir schon, es wäre am einfachsten wenn du sämtliche Extremwerte und Wendepunkte der Sinuskurve hättest.

Dann müsste dir doch eigentlich klar sein, dass eine "line" wie in "drawLine" gerade ist und deine Sinuskurve gar nicht repräsentieren kann. Dafür gibt es die Funktion drawArc.

Wenn du nicht unbedingt diese Werte darstellen musst wäre der Ansatz mit dem Funktionsplotter mMn sowieso besser.

Nochwas: siehe meine Signatur.

 

[Marco13]

Hmja, drawArc nähert die Kurve auch nur an, und den Arc zu finden, der der "Sinus"kurve entspricht (die ja nicht mal eine ist) ist praktisch unmöglich. Mit den geeigneten drawLine's wird das auch schön glatt.
Mit sowas

        // Erstelle eine Funktion, die geplottet werden soll
        // und weise sie dem SimplePlotPanel zum plotten zu
        final int values[] = { 1136,448,123,386,1054,1671,1811,1378,671,174,229,798,1491,1831,1585,922,297,140,558,1264,1774,1736,1178,482,127,355,1011,1645 };
        Function function = new Function()
        {
            @Override
            public float compute(float argument)
            {
                if (argument < 0)
                {
                    return 0;
                }
                if (argument >= values.length-1)
                {
                    return 0;
                }
                float fraction = argument%1;
                float v0 = values[(int)argument];
                float v1 = values[(int)argument+1];
                return (v0 + (v1-v0) * fraction) * 0.001f;

            }
        };
        plotPanel.setFunction(function);

sieht die Kurve zumindest schon glatter aus, falls so ein Interpolieren Sinn macht (!?)

Ansonsten... die Probleme bei dem KSKB wurden ja schon genannt - abhängig davon, wie viel von den :autsch:'s da drin durch die Umwandlung in ein KSKB entstanden sind, solltest du dir wohl nochmal den Plotter ansehen. Im Ernst: Wenn man Werte hat wie y=1833, wo soll die Linie dann hingezeichnet werden? Man muss skalieren. Und wenn man Werte hat wie
y0 = 143
y1 = 569
y2 = 1277
dann kommt da, wenn man das bei x0=0, x1=1, x2=2 zeichnet, bestenfalls eine "senkrecht" aussehende Linie raus. Das SimplePlot-Ding war gerade dazu gedacht, um diese (häufig auftretende) Frage der Umrechnung von Welt- in Bildschirmkoordinaten mal (in seiner einfachsten Form) zu zeigen...

 

[Exflame]

@bERt0r:

und du packst jedesmal dein Array nochmals in die ArrayList rein

Passt doch! Oder? Die Array verfügt nur über die Punkte, die ich vom uC erhalten. Die ArrayList sind die Koordinaten der Punkte, die ich setzen möchte. Punkte bestehen aus einem X- und einem Y-Wert. So wird es in der Java-Insel beschrieben (java.swt.point(x,y)). Ich versuche mit der Schleife die einzelnen Punkte (2500 an der Zahl) zu setzen. "X" immer um einen Schritt weiter auf der X-Achse und dem "Y" setze ich die Punkte vom uC.
--> zu Deiner Signatur: Ich hatte immer Probleme mit den LayoutManagern. Ich fuhr bis jetzt immer besser, wenn ich es selbst zuordne!

@Alle: Ich probiere Eure Vorschläge aus. Vielen Dank dafür. Ich hab auch schon meinen Kollegen angeschrieben, ob mir ggf. die Extrempunkte auch reichen würden. Ich halt Euch auf dem Laufenden! :toll:

 

[bERt0r]

Passt nicht, alleine dadurch dass bei dir das ganze in der paint Methode steht, kann das GLEICHE array beliebig oft in deine ArrayList gestopft werden. Abhängig wie oft das System paint() aufruft, das kannst du nicht Steuern.

 

[Exflame]

Stimmt? Man, bin ein Blindfisch! Danke!

 

[Exflame]

Altes Thema, neues Glück!

Ich hatte in letzter Zeit vor lauter Klassenarbeiten usw. das Thema aus dem Blick verloren..... :rtfm:

Ich kann Euch sagen, ich war sowas von daneben!!!! Und zwar die Daten, die ich vom µC erhalte muss ich zum Berechnen der Frequenz verwenden! D.h. es sind Abtastwerte!

Da ich nun meine "Frequenz" berechnen kann, muss ich damit die Sinuskurve in mein Panel zeichnen...... Schön wäre es natürlich, wenn ich 2000 Hz angebe und mein Programm es zeichnet. Aber das wird wohl nicht so einfach sein. Oder?

Sorry, das ich Euch nochmal damit "plage!"

 

[Marco13]

Was genau ist die Frage? Du willst eine Sinuskurve zeichnen, indem du NUR die Freqeunz angibst?

 

[Exflame]

Genau so ist es! Mein Programm testet den o.g. µC --> bzw. er gibt mir die Abtastwerte, mit denen ich die Frequenz berechne, und davon soll ich die Sinuskurve zeichnen.

Also: Ich errechne durch die Abtastwerte eine Frequenz von 2001,57 Hz. Nun muss ich die Sinuskurve in einem Panel ausgeben..........

Ich hab schon ein paar interessante Programme gefunden, aber nichts, was sich an meinem annähert. Ich hab keine Ahnung, wie ich das anstellen soll. ;(

 

[Marco13]

Wieder die passende Funktion in der SimplePlotMain einsetzen:

        // Erstelle eine Funktion, die geplottet werden soll
        // und weise sie dem SimplePlotPanel zum plotten zu
        Function function = new Function()
        {
            @Override
            public float compute(float argument)
            {
                float frequency = 2001.57f;
                return (float)Math.sin(argument*frequency);
            }
        };
        plotPanel.setFunction(function);

Natürlich muss man dann im GUI noch minX=-0,01 und maxX=0,01 einstellen, damit nur ein Bereich gezeichnet wird, in dem man auch was sieht...

 

[Exflame]

Das muss ich gleich probieren! Vielen Dank!

Darf ich mich nochmal melden, wenn es nicht klappt?

 

[Exflame]

OK, ich hab es mal soweit:

    //----- nächster TEST TEST TEST -----
      SimplePlotPanel plotPanel = new SimplePlotPanel();
      c.add(plotPanel, BorderLayout.SOUTH);

      // Erstelle eine Funktion, die geplottet werden soll 
      // und weise sie dem SimplePlotPanel zum plotten zu
      Function function = new Function()
      {
          public float compute(float argument)
          {
        	  float frequency = 2001.57f;
              return (float)Math.sin(argument*frequency);
          }
      };
      plotPanel.setFunction(function);
  }
interface Function
{
  float compute(float argument);
}

class SimplePlotPanel extends JPanel
{
  private static final long serialVersionUID = -658806123544936970L;

  private Function function;
  //----- Panelgröße (?) -----
  private float minX = -1.0f;
  private float maxX = 700.0f;
  private float minY = -1.0f;
  private float maxY = 400.0f;
  
public SimplePlotPanel()
  {
  }
  
  public void setFunction(Function function)
  {
      this.function = function;
      repaint();
  }

  public void setRangeX(float minX, float maxX)
  {
      this.minX = 1  /**minX*/;
      this.maxX = 600 /**maxX*/;
      repaint();
  }

  public void setRangeY(float minY, float maxY)
  {
      this.minY = 1 /**minY*/;
      this.maxY = 600 /**maxY*/;
      repaint();
  }
  
  protected void paintComponent(Graphics gr)
  {
      super.paintComponent(gr);
      Graphics2D g = (Graphics2D)gr;
      g=(Graphics2D)jp4.getGraphics();//!!!!!!!!!!!!!!!
      g.setColor(Color.WHITE);
      g.fillRect(0,0,getWidth(),getHeight());
      g.setRenderingHint(
          RenderingHints.KEY_ANTIALIASING, 
          RenderingHints.VALUE_ANTIALIAS_ON);
      
      paintAxes(g);
      paintFunction(g);
  }
  
   private int toScreenX(float x)
  {
      float relativeX = (x-minX)/(maxX-minX);
      int screenX = (int)(getWidth() * relativeX);
      return screenX;
  }
  
  private int toScreenY(float y)
  {
      float relativeY = (y-minY)/(maxY-minY);
      int screenY = getHeight() - 1 - (int)(getHeight() * relativeY);
      return screenY;
  }

  private float toFunctionX(int x)
  {
      float relativeX = (float)x/getWidth();
      float functionX = minX + relativeX * (maxX - minX);
      return functionX;
  }
  
  private void paintAxes(Graphics2D g)
  {
      int x0 = toScreenX(0);
      int y0 = toScreenY(0);
      g.setColor(Color.BLACK);
      g.drawLine(0,y0,getWidth(),y0);
      g.drawLine(x0,0,x0,getHeight());
  }

  private void paintFunction(Graphics2D g)
  {
      g.setColor(Color.BLUE);
      
      int previousScreenX = 0;
      float previouseFunctionX = toFunctionX(previousScreenX);
      float previousFunctionY = function.compute(previouseFunctionX);
      int previousScreenY = toScreenY(previousFunctionY);
      
      for (int screenX=1; screenX<getWidth(); screenX++)
      {
          float functionX = toFunctionX(screenX);
          float functionY = function.compute(functionX);
          int screenY = toScreenY(functionY);
          
          g.drawLine(previousScreenX, previousScreenY, screenX, screenY);
          previousScreenX = screenX;
          previousScreenY = screenY;
      }
  }
 }

Irgendwie zeigt es mir nichts an! Ich am mein Panel (JP4) meinem Frame mit der Pane zugeordnet.... :noe: Irgendwie blick ich es nicht...... ;(

 

[Marco13]

Die
private float minX = -1.0f;
private float maxX = 700.0f;
private float minY = -1.0f;
private float maxY = 400.0f;
sind nicht die Panelgröße, sondern der Bereich der Funktion, die gezeichnet werden soll.

Wenn man die gepostete Funktion plotten will, sollte wohl etwa
minX=-0.01f;
maxX=0.01f;
minY=-1;
maxY=1;
sein.

 

[Exflame]

Aha, okay! Wusste ich nicht! Aber warum zeigt es mir absolut nichts an? Implementiere ich falsch in JP4 / in mein JPanel! Ich möchte kein extra Frame!

:autsch:

 

[Marco13]

Ich weiß nicht genau, was du gerade wie machst, aber... im SOUTH eines BorderLayouts ist ja auch nicht viel Platz. Pack's am besten ins CENTER, oder mach sowas wie
plotPanel.setPreferredSize(new Dimension(500,500));