Active Graph from Microcontroller Supplied Temperature Data ??

Abraxas

I'm working with a PIC microcontroller in the C language. It acquires data from a temperature sensor, in numerical format or it can treat it as a character string. I'd like to display this on a laptop connected via a USB to my micro.Eventually, I'd like to send stored thermo profiles (routines) from the laptop back to the micro to control heaters.

My first inclination was to draw my own graphs, but I saw someone else on these forums suggesting giCentre. I downloaded it and so far haven't gotten their line graphs to work or even display. I'm not asking anyone to do my work for me , but perhaps someone can give me a rough sketch and some direction ? Thanks.

kfrajer

One way to start is to check previous posts related to your topic: https://forum.processing.org/two/search?Search=gicentre

It is also common to provide link to a previous comment so people see where you are coming from. For instance, you could provide the link to the giCentre's suggestion.

I am not familiar with the giCentre but I can say that a good way to start with that library is by installing it via the library manager in your Processing IDE and then go to Filles>>examples and then go to Contributed libraries>>gicentreUtils and then run the examples you find there. The purpose of doing this exercise is two fold. You make sure your library is running properly and then you can also see a demonstration of what the library has to offer. Most people usually find an example suitable for their applications. Then, they make a copy and make suitable changes.

giCentre can make life easier for you if you find a suitable example. I also encourage to browse the library's documentation. A simple google search should guide you to their website.

There are other posts in the forum that provide code to graph data. Two links for example:

https://forum.processing.org/two/discussion/comment/79484/#Comment_79484

https://forum.processing.org/two/discussion/comment/88886#Comment_88886 [FOCUS on Feb 27's posts which shows Processing and arduino.

You don't need to know arduino in the last one. You need to focus on how the data is being manipulated, how it is being plotted. If you find a code that works for you, or it has potential, you can share it here in the forum and you should be able to get feedback based on your question and information you provide.

Lastly, Processing uses java. If you are using C, then you need to reconsider your strategy. If you are streaming data through the USB port, then you can manage this data as a serial input data, only if you have the drivers to simulate your USB as a serial port. We do not know much about your device and your interfaces.

I downloaded it and so far haven't gotten their line graphs to work or even display.

Please provide the example you are using and the error code and any info associated to that code if you are getting any.

Kf

Abraxas

Already downloaded and installed per original post. The historical FORUM posts on giCentre weren't useful. Of course I've been to their site and didn't find much in the way of information on how to use their products. Ideally a tutorial would have been of great help. They gave a couple of example functions but those examples crashed my program. I'll keep looking I guess.

jeremydouglass

What kind of graphs, specifically?

Is this a processing(Java) sketch using serial data?

Have you checked out the grafica library?

Abraxas

Just a line graph. I have a PIC Microcontroller and I'm measureing temperature with it. I will use the micro to regulate a heater and I have all that worked out. What I would like , however, is to show a nice line graph on a computer screen showing the temperature program on one graph line and the actual progress through the program on the other line. So it's basically a two line graph showing expected (or programmed) temperature VS Actual. X is time in minutes, Y is temperature in Celsius. Ideally, I would also like to be able to draw a temperature profile on the graph and upload it to the PIC also. I want to run a USB cable from the micro to the computer and this particular version of micro has built in USB libraries. I do not see any need for UARTs or Serial Port converters etc. The micro is programmed in C but there shouldn't be any conflict with Processing's Java as it just picks up the ASCII characters or numerical data delivered at the computer usb port. Here's a related project using an Arduino and it is what I want to do, but with a PIC and exclusively USB for communications. http://embedded-lab.com/blog/low-cost-temperature-data-logger-using-pic-and-processing/

Abraxas

I haven't looked at 'grafica' as I saw someone suggesting the giCentre first. Being brand new to Processing, I just grabbed onto the first suggestion I saw. >>"Is this a processing(Java) sketch using serial data?">> Yes, if I understand the question correctly. A USB should be delivering data from a micro via a USB cable. I can format that data to be floating point or character strings.

Abraxas

Well then ................................ maybe if I break the problem down into pieces: I guess I need some sort of USB library and a separate graphing package. Since I've already installed giCentre, I'll continue with that. I'm not running across any really good tutorials on this package. If anyone knows of any, links are appreciated.

Abraxas

I checked out grafica but the only tutorials I have been able to locate, thus far, are written in Spanish.

Abraxas

jeremydouglass or anyone else .... Can you link me to any tutorials on grafica. Everything I've found is in Spanish. Thanks.

Abraxas

I just cut and pasted some code from one of the tutorials and it generates errors ...

  var defaultPlotSketch = function(p) {
  // Initial setup
  p.setup = function() {
    var maxCanvasWidth, canvasWidth, canvasHeight;
    var points, seed, plot, i;

    // Resize the canvas if necessary
    maxCanvasWidth = document.getElementById("widthRef").clientWidth - 20;
    canvasWidth = 500;
    canvasHeight = 350;

    if (canvasWidth > maxCanvasWidth) {
      canvasHeight = canvasHeight * maxCanvasWidth / canvasWidth;
      canvasWidth = maxCanvasWidth;
    }

    // Create the canvas
    p.createCanvas(canvasWidth, canvasHeight);

    // Prepare the points for the plot
    points = [];
    seed = 100 * p.random();

    for (i = 0; i < 100; i++) {
      points[i] = new GPoint(i, 10 * p.noise(0.1 * i + seed));
    }

    // Create a new plot and set its position on the screen
    plot = new GPlot(p);
    plot.setPos(0, 0);
    plot.setOuterDim(p.width, p.height);

    // Add the points
    plot.setPoints(points);

    // Set the plot title and the axis labels
    plot.setTitleText("A very simple example");
    plot.getXAxis().setAxisLabelText("x axis");
    plot.getYAxis().setAxisLabelText("y axis");

    // Draw it!
    plot.defaultDraw();

    p.noLoop();
  };
};

  //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

  background(100,200,200,255);
  fullScreen();
  //size(1280,720);

  fill(255);
  rect(100,100,30,600,20);

  stroke(255,255,255);
  fill(256,0,0);
  ellipse(115,710,60,60);

  stroke(0); // 10's increments
  strokeWeight(4);
  for (int i = 150; i < 650; i = i+40) {
  line(130, i, 140, i);}

  stroke(30,100,255);// 5's increments
  strokeWeight(2);
  for (int i = 170; i < 625; i = i+40) {
  line(130, i, 135, i);}

  stroke(100,20,20);
  strokeWeight(1);
  for (int i = 150; i < 630; i = i+4) {
  line(130, i, 132, i);}

  textSize(16); 
  fill(0); 
  for (int i = 0; i<13; i++) {
  float t = (i-1)*10;
  float y = height - 165 - (40 * i);
  text(int(t), 150, y);
  text("Celcius", 85,70);
}

koogs

the first half of that code is javascript, the second half is java...

Abraxas

koogs and I take it we cannot mix the two ? Sorry I'm new to this and come from the world of C. Does anyone know where I can get a tutorial on grafica ?????

kfrajer

Just a line graph. I have a PIC Microcontroller and I'm measureing temperature with it. I will use the micro to regulate a heater and I have all that worked out. What I would like , however, is to show a nice line graph on a computer screen showing the temperature program on one graph line and the actual progress through the program on the other line. So it's basically a two line graph showing expected (or programmed) temperature VS Actual. X is time in minutes, Y is temperature in Celsius. Ideally, I would also like to be able to draw a temperature profile on the graph and upload it to the PIC also. I want to run a USB cable from the micro to the computer and this particular version of micro has built in USB libraries. I do not see any need for UARTs or Serial Port converters etc. The micro is programmed in C but there shouldn't be any conflict with Processing's Java as it just picks up the ASCII characters or numerical data delivered at the computer usb port.

We need to break the problem in pieces as you suggested. However, since we don't have your setup or your hardware, we cannot do anymore than what you are willing to do. I mean, we need to define some tasks, you get back to us with the implemented code and good feedback and in turn, you get more feedback and suggestions.

Your project can be divided in different parts: The graphing, the data streaming and data processing via serial, and the integration of the above two.

For the graphing, my first post seems to answer the question. I would rather focus in task #2:

I do not see any need for UARTs or Serial Port converters etc. The micro is programmed in C but there shouldn't be any conflict with Processing's Java as it just picks up the ASCII characters or numerical data delivered at the computer usb port.

My suggestion is that you run a simple serial sample from Processing where you capture and output to the console the received serial data. If you can do that, then serial capture via Processing is working and we can go ahead to the next step. If it doesn't work, then you need to provide an example showing what you have done and we take it from there. This is important. An example doesn't only make life easier to people in the forum that want to help, it also shows your approach. If you are a beginner or do not know what to do, please say it upfront and I can find you or write you an example, when time permits.

You can tag ppl here in the forum to answer a question like this: @Abraxas. Tag me if you don't hear from me in few days.

Kf

Abraxas

Not sure what you mean KF. I am just looking for a good tutorial on grafica. I would like to draw a simple line graph using their tools.

GoToLoop

https://GitHub.com/jagracar/grafica

https://Forum.Processing.org/two/discussions/tagged/grafica

Abraxas

Thanks GoToLoop, I saw both of those before and I couldn't make any sense of them as a "How To Get Started" with grafica. The first link only had a Java Script example of a simple line graph. I posted it above and it doesn't work. I am very new to processing and don't understand the mechanics of using Java Script code in Processing. The second is just posts from persons in mid-stream of using it , so isn't beginner material, that I could see.

GoToLoop

... the mechanics of using JavaScript code in Processing.

Unless a JS version has also been written for the grafica library (I dunno), you can't deploy your Java Mode sketch to the web under Pjs. :(

Abraxas

Well I haven't a clue what I am doing here. I downloaded Processing, watched some nice videos by The Coding Train, drew a nice thermometer on the screen and then attempted to draw a graph beside it, for real time graphing, first using giCentre and then grafica , but hit a wall with both. I guess I'm supposed to draw my own graphs too ???

Abraxas

GoToLoop: I cut and paste code from the grafica examples....the simplest line graph example they had, into my Java code and it did not work. Koogs reported back "he first half of that code is javascript, the second half is java...". So I take it that the code I cut and pasted from the Example was JS and I ought not to have pasted it into my program that I have already started to write in Java. i take it anytime someone wants to use grafica, they have to write all of their program in JS ??

GoToLoop

I take it anytime someone wants to use Grafica, they have to write all of their program in JS??

@Abraxas, pay attention what I've replied to you yesterday: :-w

Unless a JS version has also been written for the Grafica library (I dunno), ...

It clearly implies I'm completely unaware whether or not the Grafica library is also available for JS besides its well known Java version! 3:-O

It also means I've haven't dug up any further for such information yet! 8-X

It is you who should had specified in your posts here which programming language and which library you're using to write your own project w/, not us! :-\"

Regardless, from the very link I've posted earlier: https://GitHub.com/jagracar/grafica

At its very top, there was the link for the library's official web page: https://JaGraCar.com/grafica.php

And finally the solution for this mystery: Whether or not Grafica has more than 1 flavor version: =P~

The library is available in two flavors:
the Java version to use directly with Processing,
and the JavaScript version to use with p5.js.

Now that I had to do all the research for ya, I expect you can be more sure which language you're using for your sketch here. O:-)

P.S.: Changed this discussion to category: p5.js Library Questions. >-)

Abraxas

GoToLoop....Oh I'm paying attention and yourself ??? I already indicated in earlier posts I'm using Java, not Java Script. The examples you linked me to, although I had already run across them in my own initial research, are written in JavaScript, as both myself and other posters already indicated. If I follow those links, I end up on a page (https://jagracar.com/grafica.php) that has a bunch of examples on the left margin. At the top of these examples is the "Default Plot" which I copied and pasted into my existing code, as it most closely approximates the plot I'm try to make, and it generated errors. When I posted this code, on these forms, I was told that I was mixing Java Script with Java Code and that is why my errors were being generated. As I said, a few times, I'm very new to Java period and Processing in particular. I can't tell Java from Java Script. I do know, thus far, that this example was written for grafica and is in Javascript. So I'm still stranded and not getting anywhere fast. At this point, I might as well write my own code for graphing as I cannot find a decent tutorial on how to use grafica hence my repeated question : Does anyone know of a decent grafica tutorial presented in English ??

koogs

using grafica to draw a single line graph is very much a sledgehammer to crack a nut type situation. you don't need it.

look at line() in the reference. that's pretty much all you need (maybe map()). the temp gauge example processing code on the page you posted will let you read the data.