MIDI and HTML not working

Hello, I am trying to control MIDI thru via AJAX. Unfortunately, I found that both:

MIDI_CREATE_INSTANCE(HardwareSerial, Serial, MIDI);
MIDI_CREATE_INSTANCE(SoftwareSerial, SoftSerial, MIDI);

causes an issue with the html code (listed below). When MIDI_CREATE_INSTANCE is included, the html repeats itself in the

section. I had thought that switching to SoftwareSerial would resolve this but sadly that is not the case. I am using a Arduino Uno and have a Arduino Mega on the way thinking having 2 hardware serial ports may help.

Any help would be greatly appreciated!

Arduino Html Code: (basically from Arduino AJAX Web Server for Reading a Switch Automatically.)

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 65);
IPAddress myDns(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
EthernetServer server(80);

String midiThruString;
String HTTP_req;

extern bool midiThru;

  void htmlServer() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {  // got client?
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {   // client data available to read
        char c = client.read(); // read 1 byte (character) from client
        HTTP_req += c;  // save the HTTP request 1 char at a time
        // last line of client request is blank and ends with \n
        // respond to client only after last line received
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: keep-alive");
          client.println();
          // AJAX request for switch state
          if (HTTP_req.indexOf("ajax_switch") > -1) {
            // read switch state and send appropriate paragraph text
            GetSwitchState(client);
          } else {  // HTTP request for web page
            //             send web page - contains JavaScript with AJAX calls
            client.println("<!DOCTYPE html>");
            client.println("<html>");
            client.println("<head>");
            client.println("<title>Arduino Web Page</title>");
            client.println("<script>");
            client.println("function GetSwitchState() {");
            client.println("nocache = \"&nocache=\"\+ Math.random() * 1000000;");
            client.println("var request = new XMLHttpRequest();");
            client.println("request.onreadystatechange = function() {");
            client.println("if (this.readyState == 4) {");
            client.println("if (this.status == 200) {");
            client.println("if (this.responseText != null) {");
            client.println("document.getElementById(\"switch_txt\")\.innerHTML = this.responseText;");
            client.println("}}}}");
            client.println("request.open(\"GET\", \"ajax_switch\" + nocache, true);");
            client.println("request.send(null);");
            client.println("setTimeout('GetSwitchState()', 1000);");
            client.println("}");
            client.println("</script>");
            client.println("</head>");
            client.println("<body onload=\"GetSwitchState()\">");
            client.println("<h1>Arduino AJAX Switch Status</h1>");
            client.println("<p id=\"switch_txt\">Switch state: Not requested...</p>");
            client.println("</body>");
            //            client.println("</html>");
          }
          // display received HTTP request on serial port
          Serial.print(HTTP_req);
          HTTP_req = "";            // finished with request, empty string
          break;
        }
        // every line of text received from the client ends with \r\n
        if (c == '\n') {
          // last character on line of received text
          // starting new line with next character read
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          // a text character was received from client
          currentLineIsBlank = false;
        }
      } // end if (client.available())
    } // end while (client.connected())
    delay(1);      // give the web browser time to receive the data
    client.stop(); // close the connection
  } // end if (client)
}


// send the state of the switch to the web browser
void GetSwitchState(EthernetClient cl)
{
  if (midiThru) {
    cl.println("MIDI IS ON");
  }
  else if (!midiThru) {
    cl.println("MIDI IS OFF");
  }
}

Please read this:-
How to use this forum it will help you with how to ask a question.

Please post all your code. We can't see what MIDI library you are using. There are several of them and I don't recognise the command MIDI_CREATE_INSTANCE(....) from any I have used.
What other hardware are you using to get your Wi-Fi connection? How is this connected to your Arduino?

Pedants corner:-

I am trying to control MIDI thru via AJAX.

What is AJAX? You don't control MIDI it is a protocol, you send or receive MIDI messages.

an issue with the html code

There is no HTML code in what you posted.

There is reference to HTTP which means HyperText Transfer Protocol in your code.

My apologies.

Grumpy_Mike:
Please post all your code. We can't see what MIDI library you are using. There are several of them and I don't recognise the command MIDI_CREATE_INSTANCE(....) from any I have used.
What other hardware are you using to get your Wi-Fi connection? How is this connected to your Arduino?

I am using the MIDI library by FortySevenEffects.(GitHub - FortySevenEffects/arduino_midi_library: MIDI for Arduino) Posting the full code below.

For Ethernet: I am using the Arduino Ethernet Shield.
For MIDI: I am using Sparkfun's MIDI Shield.

Grumpy_Mike:
What is AJAX? You don't control MIDI it is a protocol, you send or receive MIDI messages.

AJAX = Asynchronous JavaScript And XML. Yes I know this, that is why I am trying to start and stop MIDI "Thru"

Grumpy_Mike:
There is no HTML code in what you posted.

Again, my apologies for the confused terminology.

#include <MsTimer2.h>
#include <MIDI.h>
#include <SoftwareSerial.h>

#include <SPI.h>
#include <Ethernet.h>


MIDI_CREATE_INSTANCE(HardwareSerial, Serial, MIDI);

// SoftwareSerial SoftSerial(8, 9);
// MIDI_CREATE_INSTANCE(SoftwareSerial, SoftSerial, MIDI);

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 65);
IPAddress myDns(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
EthernetServer server(80);

String HTTP_req;

bool midiThru = true;

void setup() {
  Ethernet.begin(mac, ip, myDns, gateway, subnet);
  server.begin();
  Serial.begin(31250);
  MIDI.begin(MIDI_CHANNEL_OMNI);
}

void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {  // got client?
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {   // client data available to read
        char c = client.read(); // read 1 byte (character) from client
        HTTP_req += c;  // save the HTTP request 1 char at a time
        // last line of client request is blank and ends with \n
        // respond to client only after last line received
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: keep-alive");
          client.println();
          // AJAX request for switch state
          if (HTTP_req.indexOf("ajax_switch") > -1) {
            // read switch state and send appropriate paragraph text
            GetSwitchState(client);
          } else {  // HTTP request for web page
            //             send web page - contains JavaScript with AJAX calls
            client.println("<!DOCTYPE html>");
            client.println("<html>");
            client.println("<head>");
            client.println("<title>Arduino Web Page</title>");
            client.println("<script>");
            client.println("function GetSwitchState() {");
            client.println("nocache = \"&nocache=\"\+ Math.random() * 1000000;");
            client.println("var request = new XMLHttpRequest();");
            client.println("request.onreadystatechange = function() {");
            client.println("if (this.readyState == 4) {");
            client.println("if (this.status == 200) {");
            client.println("if (this.responseText != null) {");
            client.println("document.getElementById(\"switch_txt\")\.innerHTML = this.responseText;");
            client.println("}}}}");
            client.println("request.open(\"GET\", \"ajax_switch\" + nocache, true);");
            client.println("request.send(null);");
            client.println("setTimeout('GetSwitchState()', 1000);");
            client.println("}");
            client.println("</script>");
            client.println("</head>");
            client.println("<body onload=\"GetSwitchState()\">");
            client.println("<h1>Arduino AJAX Switch Status</h1>");
            client.println("<p id=\"switch_txt\">Switch state: Not requested...</p>");
            client.println("</body>");
            //            client.println("</html>");
          }
          // display received HTTP request on serial port
          Serial.print(HTTP_req);
          HTTP_req = "";            // finished with request, empty string
          break;
        }
        // every line of text received from the client ends with \r\n
        if (c == '\n') {
          // last character on line of received text
          // starting new line with next character read
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          // a text character was received from client
          currentLineIsBlank = false;
        }
      } // end if (client.available())
    } // end while (client.connected())
    delay(1);      // give the web browser time to receive the data
    client.stop(); // close the connection
  } // end if (client)
}

void GetSwitchState(EthernetClient cl)
{
  if (midiThru) {
    cl.println("MIDI IS ON");
  }
  else if (!midiThru) {
    cl.println("MIDI IS OFF");
  }
}

Thanks for doing that, much appreciated.
Well I don’t know, but I know a man who might. I have sent him a PM and he should be along soon. He wrote the MIDI library you are using.

Grumpy_Mike:
Well I don’t know, but I know a man who might. I have sent him a PM and he should be along soon. He wrote the MIDI library you are using.

There seems to be some confusion, I'm not the author of the MIDI library :slight_smile:

I don't really understand how the problem is related to MIDI. Simply including the MIDI library shouldn't affect the HTTP code, unless it contains some kind of undefined behavior.

One problem could be that you're creating copies of the TCP client. Try passing it by reference.

void GetSwitchState(EthernetClient &cl)

Also, where is the definition of midiThru?

Please use raw string literals instead of printing each line separately, it's much easier to read.
https://en.cppreference.com/w/cpp/language/string_literal

Pieter