TinyHttp – A simple Html Form & Using Ajax

Today I was playing around with my TinyHttp project: I was investigating how I can drive multiple parameters of a guitar effects sketch by using a web dialog.

To provide some information via html is simple. It gets a little bit more complicated if we want to support Html Forms, so I decided to extend the project a bit and provide some examples.

A Simple Form Example

Here is the link to the source code .

The logic is quite simple: We implement the methods that

• provide the html with the form with the actual values
• handle the post of the new value.

and finally we just need to define when these methods are called. If you look at the example source code, it is quite easy to understand.

Ajax: Using Json

Modern web applications usually communicate with webservices by getting the information as JSON and posting JSON data back to update the information in the application.
Here is the link to the source code.

The logic is a little bit more involved: We implement the methods that

• provide the html form with the actual values
  • Javascript to update the form parameters
  • Javascript to post the updated form as JSON
• provide the web service
  • Get: provide data as JSON
  • Post: update values for posted JSON

The json serialization and deserialization is done with the help of ArduinoJson.
I also added the necessary CORS headers, so that we can call the service from a local html file which is stored on your disk. You will just need to update the ip address!

In a nutshell – I am quite happy about the functionality that I can provide with my project…