Button + text field handling

9 years ago · cce1d9c04f
parent 1a03bcb5ca
commit cce1d9c04f
4 changed files with 126 additions and 15 deletions
--- a/examples/dummy-web-server.pl
+++ b/examples/dummy-web-server.pl
@ -1,10 +1,16 @@
 #!/usr/bin/perl
 use strict;

+use threads;
+use threads::shared;
+
 use IO::Socket::INET;
 use Data::Dumper;
 use File::Basename;

+my $ledLabel : shared = "LED is turned off";
+
+
 # auto-flush on socket
 $| = 1;
 
@ -31,17 +37,7 @@ my $client;

 while ($client = $server->accept())
 {
-   my $pid ;
-   while (not defined ($pid = fork()))
-   {
-     sleep 5;
-   }
-   if ($pid)
-   {
-       close $client;        # Only meaningful in the client 
-   }
-   else
-   {
+   threads->create( sub {
       $client->autoflush(1);    # Always a good idea 
       close $server;
       
@ -72,7 +68,8 @@ while ($client = $server->accept())
         # notify client that response has been sent
         #shutdown($client, 1);
       }
-   }
+   } );
+   close $client;        # Only meaningful in the client 
 }

 exit(0);
@ -101,7 +98,13 @@ sub parse_http
      $head =~ s/(GET|POST) //;
      if( $head =~ /^([^ ]+) HTTP\/\d\.\d/ )
      {
-        $resp{url} = $1;
+        my $args = $1;
+        my $u = $args;
+        $u =~ s/\?.*$//g;
+        $args =~ s/^.*\?//g;
+        my %arg = split /[=\&]/, $args;
+        $resp{urlArgs} = \%arg;
+        $resp{url} = $u;
        
        my %fields;
        while( my $arg = shift @lines )
@ -183,6 +186,18 @@ sub process_http
    return error_response(400, $httpReq->{error});
  }
  
+  if( $httpReq->{url} =~ /\.json$/ )
+  {
+    my $url = $httpReq->{url};
+    $url =~ s/\.json$//;
+    my $pth = dirname $0;
+    
+    if( -f "$pth/web-server/$url" )
+    {
+      return process_user_comm($httpReq);
+    }
+  }
+  
  if( $httpReq->{method} eq 'GET' )
  {
    my $url = $httpReq->{url};
@ -320,3 +335,39 @@ sub readUserPages
  
  return $add;
 }
+
+sub process_user_comm_led
+{
+  my ($http) = @_;
+
+  if( $http->{urlArgs}{reason} eq "button" )
+  {
+    my $btn = $http->{urlArgs}{id};
+    
+    if($btn eq "btn_on" )
+    {
+      $ledLabel = "LED is turned on";
+    }
+    elsif($btn eq "btn_blink" )
+    {
+      $ledLabel = "LED is blinking";
+    }
+    elsif($btn eq "btn_off" )
+    {
+      $ledLabel = "LED is turned off";
+    }
+  }
+ 
+  my $r = '{"text": "' . $ledLabel . '"}';
+  return content_response($r, $http->{url});
+}
+
+sub process_user_comm()
+{
+  my ($http) = @_;
+
+  if( $http->{url} eq '/LED.html.json' )
+  {
+    return process_user_comm_led($http);
+  }
+}
--- a/examples/head-user-
+++ b/examples/head-user-
@ -5,6 +5,7 @@
  <link rel="stylesheet" href="/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="/ui.js"></script>
+  <script src="/userpage.js"></script>
 </head>
 <body>
 <div id="layout">
--- a/examples/web-server/LED.html
+++ b/examples/web-server/LED.html
@ -1,3 +1,13 @@
-  <div>
-    <h1>Hello</h1>
+  <div class="header">
+    <h1>LED configuration</h1>
  </div>
+
+  <div class="content">
+    <p>
+      <button id="btn_on" type="button">Turn on</button>
+      <button id="btn_blink" type="button">Start blinking</button>
+      <button id="btn_off" type="button">Turn off</button>
+    </p>
+    <p id="text"/>
+  </div>
+</body></html>
--- a/html/userpage.js
+++ b/html/userpage.js
@ -0,0 +1,49 @@
+//===== Java script for user pages
+
+
+function notifyResponse( data )
+{
+  Object.keys(data).forEach(function(v) {
+    var elem = document.getElementById(v);
+    if( elem != null )
+    {
+      if(elem.tagName == "P" || elem.tagName == "DIV")
+      {
+	elem.innerHTML = data[v];
+      }
+    }
+  });
+}
+
+function notifyButtonPressed( btnId )
+{
+  ajaxJson("POST", window.location.pathname + ".json?reason=button\&id=" + btnId, notifyResponse);
+}
+
+document.addEventListener("DOMContentLoaded", function(){
+  // collect buttons
+  var btns = document.getElementsByTagName("button");
+  var ndx;
+
+  for (ndx = 0; ndx < btns.length; ndx++) {
+    var btn = btns[ndx];
+    var id = btn.getAttribute("id");
+    var onclk = btn.getAttribute("onclick");
+    var type = btn.getAttribute("type");
+    
+    if( id != null && onclk == null && type == "button" )
+    {
+      var fn;
+      eval( "fn = function() { notifyButtonPressed(\"" + id + "\") }" );
+      btn.onclick = fn;
+    }
+  }
+  
+  // load variables at first time
+  var loadVariables = function() {
+    ajaxJson("GET", window.location.pathname + ".json?reason=load", notifyResponse,
+      function () { setTimeout(loadVariables, 1000); }
+    );
+  };
+  loadVariables();
+});