1

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <h1>Wireless LED Control</h1>
<h4>You can control the status of the LED!</h4>
<h3>RED LED Status: {{ value }}</h3>
<h4>
 Yellow LED Control:
 <button type='button' id='led_onY'>LED ON</button>
 <button type='button' id='led_offY'>LED OFF</button>
</h4>
<h4>
 Red LED Control:
 <button type='button' id='led_onR'>LED ON </button>
 <button type='button' id='led_offR'>LED OFF</button>
</h4>
<h3>
 Curtain Control:
 <button type='button' id='curtain_open'>OPEN CURTAIN</button>
 <button type='button' id='curtain_close'>CLOSE CURTAIN</button>
</h3>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>

<script>
$(document).ready(function(){
 $('#led_onY').click(function(){
   console.log("LED ON!");
   $.post('/led/Y/1');
 }); 
 $('#led_offY').click(function(){
   console.log("LED OFF!");
   $.post('/led/Y/0');
 });
}); 
</script>
<script>
$(document).ready(function(){
 $('#led_onR').click(function(){
   console.log("LED ON!");
   $.post('/led/R/1');
 }); 
 $('#led_offR').click(function(){
   console.log("LED OFF!");
   $.post('/led/R/0');
 });
}); 
</script>
<script>
$(document).ready(function(){
 $('#curtain_open').click(function(){
   console.log("CURTAIN OPENING");
   $.post('/curtain/open');    
  });
  ('#curtain_close').click(function(){
   console.log("CURTAIN CLOSING");
   $.post('/curtain/close');  
  });
}); 
</script>
    </body>
</html>

That is the HTML Code and It basically has 6 buttons, 2 buttons turn a RED LED on and off via the GPIO pins which is all coded in python. Another 2 do the same but with a YELLOW LED and the other 2 buttons are for a recent project to open and close a curtain. This web page is ran from my Raspberry Pi 3.

This code gives me several errors, one is that the curtain close .click function isn't supported. The other is I get this error:

SERVER ERROR - The server encountered an unexpected condition that prevented it from fulfilling the request (XHR)POST.

Thank you! :)

ThePGT
  • 681
  • 1
  • 6
  • 9

0 Answers0