Searching for a generic GUI to adapt

Hello,

I need to make or modify a GUI for Windows and/or Linux, that will take USB data from my Boarduino and graph it on a colored bar graph in REAL TIME. It would be a plus if I could also add audio to the GUI as well; as the graph changes the tone would change higher or lower, accordingly.

I've done a very little bit of programming, mostly in earlier versions of Flash (ActionScript), and many years ago using basic, and I've fooled around with the Arduino interfaces like Processing. But they don't seem to be able to give me a full-screen, user-friendly GUI of the kind I'm after. And I didn't want to devote a whole lot of time learning a complex language just to write one application and make it work.

I was hoping, therefore, that someone out there could suggest some site or software development resource, or even a language that is very simple to learn and use. I think some borrowed, modifiable code may do the trick, for an existing app.

Maybe I'm naive, but it just seems like there should be lots of open source applications I could fool around with and modify for my purposes. But I've combed many sites via Google and found nothing close to what I am searching for. What I envisioned was a kind of tinker toy development environment where one just kind of drags and drops blocks of code that have specific functions, and then cobble them together. Does this kind of thing exist?

If I'm stuck needing to learn some language, what would be the simplest one that might fill my needs as I described them above?

Regards, and Thanks

Les

The arduino IDE itself is open source and gets data from the arduino in console mode using Java. I like Java for GUIs myself. You will have a lot of work yet to do, but basically:

  1. figure out what format the data will be in coming from the arduino.
  2. figure out how to read that data from the serial port in java (RXTX jars would help)
  3. Figure out how to draw pretty graphs with the data in real time.

You don’t say what platform you are on. If you are on a Macintosh there is a whole host of free software tools actually included with the OS. You should be able to do this with Quartz composer, it’s a drag and drop graphics programming language that you can do some cool things with, without writing a line of code.

Processing is used in conjunction with Arduino by a number of people.

--Phil.

If your task at hand primarily is graphing, then i know that someone created a plugin For MS Excell that will read data from the serial port and use it for graphing. It has been mentioned in this forum (quite some time ago). I think it was a 20$ shareware thing.

Found it, here it is: http://www.selmaware.com/selmaDAQ/home.htm

This will probably not solve your audio problem.

The problem (and the good thing at the same time) with the "tinker toy" type of programming environments (in my humble opinion) is that they sacrifice a lot of functonality for ease of use.

It's difficult to have both a rich set of tools to create advanced user interfaces and make it simple to use at the same time. The more possibilities you want the more complexity you have to deal with. And the learning curve aproaches vertical :-)

I don't know much about Processing but i believe it can make full screen apps.

The problem (and the good thing at the same time) with the "tinker toy" type of programming environments (in my humble opinion) is that they sacrifice a lot of functonality for ease of use.

Were you referencing Processing with your "tinker toy" remark? If so, I should point out that Processing is to Java as the Arduino is to C/C++, i.e. it's got the full power but includes built-in library support, some program structure nice-ities and an IDE that hides a lot of the complexity.

I don't know much about Processing but i believe it can make full screen apps.

Yes, that is correct.

--Phil.

No i was absolutely not putting Processing in the "tinker toy" group of tools.

I believe Prossenig is very capable. I'm actually planning to spend some time to learn it, when i have some time :-)

With Tinker toys i mean those tools that are more like simple drag and drop or scriptning tools, with limited but (usually) fairly easy to learn functionality.

FWIW, I found my experience building a user interface with Processing disappointing. The closest I got was the interface posted in this thread: http://www.arduino.cc/cgi-bin/yabb2/YaBB.pl?num=1201840336/217#217

But I have not found a way to easily combine the simplicity of the Processing IDE and the AWT/swing components typically used to build a conventional GUI. If anyone can point me to information on how to do this I would much appreciate seeing it.

I'd like to see more tutorial material on this. I have a strong background in hardware and, on the desktop, command line programing, but I've never really done much gui programming, and I'd like to do some fairly basic stuff (as simple as graphing data from the arduino as the OP wants).

Even for my ambient orb efforts, I used a php page on a live web server to get the data and page simply shows as "#rrggbb". Then I used a shell script running repeat to keep using wget to download that php page and dump the output to the serial port. It was a horrible kludge and I hated having this script running in a console, but it worked.

actually swing custom components aren't that hard to make

Here’s a possible solution (haven’t tested though :-/)

Swing code, NOT proccessing. to use : make JFrame, add this, set size, setVisible(true);
Example (save in file called Example.java):

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

public class Example{
static Waveform wave = new Waveform(0, 200, new int[5] {0,2,4,6,200}); // replace values with actual data
public static void main(String[] args)
{
      JFrame frame = new JFrame("Waveform Display Simulator");

      frame.setBounds(200,200, 500, 350);
      frame.getContentPane().setLayout(new BorderLayout());
      frame.getContentPane().add(wave, BorderLayout.CENTER);

      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

      frame.setVisible(true);
      frame.validate();
      frame.repaint();
}

Actual code that you need, don’t worry about the private methods, just copy the whole thing into a file called Waveform.java

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

public class Waveform extends JPanel{


    private int[] samplesContainer;
    protected int sampleMax = 0;
    protected int sampleMin = 0;
    protected double biggestSample;
    
    protected static final Color BACKGROUND_COLOR = Color.white;
    protected static final Color REFERENCE_LINE_COLOR = Color.black;
    protected static final Color WAVEFORM_COLOR = Color.red;
    

    public Waveform(int min, int max, int[] samples) {
          setBackground(BACKGROUND_COLOR);
          sampleMax = max;
          sampleMin = min;
          if (sampleMax > sampleMin) {
                biggestSample = sampleMax;
        } else {
                biggestSample = Math.abs(((double) sampleMin));
        }
    }
     
    private double getXScaleFactor(int panelWidth){
        return (panelWidth / ((double)  samplesContainer.length));
    }

    private  double getYScaleFactor(int panelHeight){
        return (panelHeight / (biggestSample * 2 * 1.2));
    }

    private  int getIncrement(double xScale) {
        try {
            int increment = (int) (samplesContainer.length / (samplesContainer.length * xScale));
            return increment;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return -1;
    }

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);

        int lineHeight = getHeight() / 2;
        g.setColor(REFERENCE_LINE_COLOR);
        g.drawLine(0, lineHeight, (int)getWidth(), lineHeight);

        drawWaveform(g,  samplesContainer);
    }

    private  void drawWaveform(Graphics g, int[] samples) 
    {
        if (samples == null) {
            return;
        }
        int oldX = 0;
        int oldY = (int) (getHeight() / 2);
        int xIndex = 0;

        int increment = getIncrement(getXScaleFactor(getWidth()));
        g.setColor(WAVEFORM_COLOR);

        int t = 0;

        for (t = 0; t < increment; t += increment) {
            g.drawLine(oldX, oldY, xIndex, oldY);
            xIndex++;
            oldX = xIndex;
        }

        for (; t < samples.length; t += increment) {
            double scaleFactor = getYScaleFactor(getHeight());
            double scaledSample = samples[t] * scaleFactor;
            int y = (int) ((getHeight() / 2) - (scaledSample));
            g.drawLine(oldX, oldY, xIndex, y);

            xIndex++;
            oldX = xIndex;
            oldY = y;
        } 
      }
}

for the source of the java, I actually modifeied it from the Swing Hacks book by oreilly, hack 75. Its a good book