Arduino and DHT11, multi curves on Processing

Hi,

I am a newbie using Processing and I would like to know how to draw several curves in one graph. It should not be too complicated, but the main thing is that I am using Arduino and a DHT11 sensor which monitors humidity and temperature with one digital output. What I would like to achieve is to monitor the values of humidity and temperature on Processing in one graph.

Here is the Arduino program :

#include "DHT.h"
    #define DHTPIN 2     // what pin we're connected to
    #define DHTTYPE DHT11  
    
    // Initialize DHT sensor for normal 16mhz Arduino
    DHT dht(DHTPIN, DHTTYPE);
       
    void setup() {

      Serial.begin(9600); 
      dht.begin();
     }
      
    void loop() {
      
      int h = dht.readHumidity();
      // Read temperature as Celsius
      float t = dht.readTemperature();
      // Read temperature as Fahrenheit
      float f = dht.readTemperature(true);
      
      // Check if any reads failed and exit early (to try again).
      if (isnan(h) || isnan(t) || isnan(f)) {
        Serial.println("Failed to read from DHT sensor!");
        return;
        }
    
      // Compute heat index
      // Must send in temp in Fahrenheit!
      float hi = dht.computeHeatIndex(f, h);
      
      //Serial.print("Humidity: "); 
      Serial.println(h);
      //Serial.print("Temperature: "); 
      Serial.print(t);
      delay(500);                        // wait 100ms for next reading
      
            
      }

And here is the Processing program I found on the Internet :

import processing.serial.*;
    
    Serial myPort;        // The serial port
    int xPos = 1;         // horizontal position of the graph 
    
    //Variables to draw a continuous line.
    int lastxPos=1;
    int lastheight=0;
    float val;
    
    void setup () {
      // set the window size:
      size(800, 600);        
    
      // List all the available serial ports
      println(Serial.list());
      // Check the listed serial ports in your machine
      // and use the correct index number in Serial.list()[].
    
      myPort = new Serial(this, Serial.list()[0], 9600);  //
    
      // A serialEvent() is generated when a newline character is received :
      //myPort.bufferUntil('\n');
      background(0);      // set inital background:
    }
    void draw () {
      if ( myPort.available() > 0) {  // If data is available,
        val = myPort.read();          // read it and store it in val
        // Convert the values to set the radius
          
      }
      // everything happens in the serialEvent()
    }
    
    void serialEvent (Serial myPort) {
      // get the ASCII string:
      String inString = myPort.readStringUntil('\n');
      if (inString != null) {
        inString = trim(inString);                // trim off whitespaces.
        float inByte = float(inString);           // convert to a number.
        inByte = map(inByte, 0, 100, 0, height); //map to the screen height.
    
        //Drawing a line from Last inByte to the new one.
        stroke(127,34,255);     //stroke color
        strokeWeight(2);        //stroke wider
        line(lastxPos, lastheight, xPos, height - inByte); 
        lastxPos= xPos;
        lastheight= int(height-inByte);
    
        // at the edge of the window, go back to the beginning:
        if (xPos >= width) {
          xPos = 0;
          lastxPos= 0;
          background(0);  //Clear the screen.
        } 
        else {
          // increment the horizontal position:
          xPos++;
        }
      }
    }

I have the feeling it should be somewhere near this line String inString = myPort.readStringUntil('\n'); but I have no idea how to extract both the temperature and moisture ; it does work with the temperature or the humidity depending on which but I don't know how to do with both.

Could you help me ?

Thanks,

but the main thing is that I am using Arduino and a DHT11 sensor which monitors humidity and temperature with one digital output.

The DHT11 sensor does not have any digital OUTPUT.

      // Read temperature as Celsius
      float t = dht.readTemperature();
      // Read temperature as Fahrenheit
      float f = dht.readTemperature(true);

Why? Only one scale makes any sense where you are. Quit doing the crap you don't need to do.

      //Serial.print("Humidity: "); 
      Serial.println(h);
      //Serial.print("Temperature: "); 
      Serial.print(t);
      delay(500);                        // wait 100ms for next reading

Printing one value, a separator, and then the other value, followed by a carriage return and line feed makes a lot more sense.

      // A serialEvent() is generated when a newline character is received :
      //myPort.bufferUntil('\n');

Not when it's commented out. But that IS what you want to do.

    void draw () {
      if ( myPort.available() > 0) {  // If data is available,
        val = myPort.read();          // read it and store it in val
        // Convert the values to set the radius

Do NOT read serial data in draw().

      // everything happens in the serialEvent()

No, it doesn't because you commented out the call to bufferUntil().