Is it possible to control gadgeteer through HTML and JS when webserver is active?

Archive
1

I’ll explain. string content is an html code. Using that code I can create an interface (buttons and other stuff.) How can I send back the data I’ve collected in order to control the gadgeteer? (Turning the led on for example)

The code:


 public partial class Program
    {
        GT.Networking.WebEvent sayHello;
        void ProgramStarted()
        {
            ethernet.UseDHCP();
            ethernet.NetworkUp += new GTM.Module.NetworkModule.NetworkEventHandler(ethernet_NetworkUp);
        }

        void ethernet_NetworkUp(GTM.Module.NetworkModule sender, GTM.Module.NetworkModule.NetworkState state)
        {
            string ipAddress = ethernet.NetworkSettings.IPAddress;
            WebServer.StartLocalServer(ipAddress, 80);
            sayHello = WebServer.SetupWebEvent("hello");
    sayHello.WebEventReceived += new WebEvent.ReceivedWebEventHandler(sayHello_WebEventReceived);              
        }

        void sayHello_WebEventReceived(string path, WebServer.HttpMethod method, Responder responder)
        {
            string content = "<html><body><h1>Hello World!!</h1></body></html>";
            byte[] bytes = new System.Text.UTF8Encoding().GetBytes(content);
            responder.Respond(bytes, "text/html");
        }

Thanks in advance !!!

2

We had a very lengthy thread somewhere here where we helped somebody to do that.

3

@ Architect - Oh that’s nice, I’ll check for it.

4

Here it is:

https://www.ghielectronics.com/community/forum/topic?id=11276

5

Seven pages ah? A long night ahead of me =)
Thanks

6

@ Architect - I don’t understand something, he created the html page on his PC and somehow upload it to the gadgeteer?

and what the hell is this ->

using (HttpServer server = new HttpServer())
7

@ andre.m - I’m using WebServer and not httpServer, What differences does it make?
can I use instead
WebServer.SetupWebEvent ?
There must be some easier modification to my program…

8

The best way to run an HTTP web page is to use the HTTPServer implementation. You can also code your HTML page, and add it as a resource for use in your project. Ease of use is relative to the scope and complexity of your project. It would be easiest, for you to create an HTML request engine, meaning: A command can be executed from JS using a requested path, the request may also make use of queries and POST data, if you feel the need to implement this. Example:


<a href="led-on">Click Me To Turn On The LED</a>

Clicking the above button will take you request “led-on” page from the device. From the device side you will have a clause checking for the request such as:


if (request == "led-on")
{
//Turn On LED
//Send page data to the client from your resources
}

The biggest thing to remember about NETMF is that it IS NOT .NET. NETMF uses C# and conforms to CLI, however, it does not implement the larger functions that make .NET a breeze to use. You will find yourself reinventing the wheel from time to time :slight_smile:

9

@ James - Can you be more specific about the HTTPServer implementation? Never heard of it. Furthermore, what changes do I need to make my simple program to work?
AND WHY THE HELL ITS SO COMPLICATED?!

10

This is actually all rather trivial, and very easy to accomplish for an embedded environment. Here is a snippet taken from an older post on our forums about the HTTPListener as a server. While not exactly what I told you to look into, but this should actually be easier.

const Int32 c_port = 80;
 
        HttpListener listener = new HttpListener("http", c_port);
        listener.Start();
        while (true)
        {
            HttpListenerResponse response = null;
            HttpListenerContext context = null;
            try
            {
                context = listener.GetContext();
                response = context.Response;
                //check request status here

                response.StatusCode = (int)HttpStatusCode.OK;
                byte[] HTML = Encoding.UTF8.GetBytes("FEZ PandaHello!");
                response.ContentType = "text/html";
                response.OutputStream.Write(HTML, 0, HTML.Length);
                response.Close();
            }
            catch
            {
                if (context != null)
                {
                    context.Close();
                }
            }
        }

This snippet combined with MSDN should be more than enough to get you going with your device.

11

@ James - Thanks for your help, So if I understood right, instead of

byte[] HTML = Encoding.UTF8.GetBytes("FEZ PandaHello!");

I should write

byte[] HTML = Encoding.UTF8.GetBytes(...some html code that gets input from the user  ...);

?
And if so, how do I integrate it to my code?
Thanks.

12

The HTML variable is the value being returned outside the FEZ (so possibly a web browser on your development PC). It’s up to that the device to take this value and show it in the web browser.

James’ code was just a simple text response to the web request coming into the FEZ. It could be a HTML formatted response. The information in there could be a static response (like James’ sample) or the status of devices connected to your Panda (distance sensor? led status?).

13

@ mhectorgato - Thanks for replying but I need a practical example.
Let’s say that the html pops one question such as "what is your favorite color?"
and the user answers some color, gadgeteer parses it and act accordingly such as:

if (answer == "blue"){
led.turnBlue();
}

That’s all i’m asking, I’ll thrive from there.

14

HttpListenerRequest.InputStream:

See this GHI thread:
https://www.ghielectronics.com/community/forum/topic?id=10229

andre.m’s code in that thread:

byte[] buffer = new byte[request.InputStream.Length];
request.InputStream.Read(buffer, 0, buffer.Length);
string content = new string(System.Text.Encoding.UTF8.GetChars(buffer));
Debug.Print(content);