ZaynerTech

Webpage for Arduino communication through webpage

Mar 31st, 2014
545
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. !-- $Id: example.html,v 1.4 2006/03/27 02:44:36 pat Exp $ -->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  6. <title>Control Panel</title>
  7. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  8. <script type="text/javascript" src="tabber.js"></script>
  9. <link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
  10.  
  11. <script type="text/javascript">
  12.  
  13. /* Optional: Temporarily hide the "tabber" class so it does not "flash"
  14.    on the page as plain HTML. After tabber runs, the class is changed
  15.    to "tabberlive" and it will appear. */
  16.  
  17. document.write('<style type="text/css">.tabber{display:none;}<\/style>');
  18. </script>
  19. <script>
  20. $(document).ready(function(){
  21.    $form = $('form');
  22.    $form.submit(function(){
  23.       $.post($(this).attr('action'), $(this).serialize(), function(response){
  24.             // do something here on success
  25.       },'json');
  26.       return false;
  27.    });
  28. });
  29. </script>
  30.  
  31. <script>
  32. var cam_image = 'thermo.jpeg';
  33.  
  34. var buffer = {};
  35. function preload() {
  36.     buffer = new Image();
  37.     // attaching the seconds breaks cache
  38.     buffer.src = cam_image + '?' + (new Date()).getTime();
  39.     buffer.onload = function() {
  40.         setTimeout(preload, 1000); // 30 seconds refresh
  41.         document.getElementById('re').src = buffer.src;
  42.     }
  43. }
  44. preload();
  45. </script>
  46.  
  47. </head>
  48. <body>
  49.  
  50. <h1>Control Panel</h1>
  51.  
  52. <form method="POST" action="web_interface.cgi">
  53. <div class="tabber">
  54.  
  55.      <div class="tabbertab">
  56.           <h2>Main</h2>
  57.           <img src="incubator.jpeg" height=400 width=400>
  58.           <img src="incubator.jpeg" height=400 width=400>
  59.           <img src="incubator.jpeg" height=400 width=400><p>
  60.           <p>Graphs and status of each device</p>
  61.      </div>
  62.      <div class="tabbertab">
  63.           <h2>Thermocycler</h2>
  64.           <img src="thermo.jpeg" height=400 width=400 id="re"><p>
  65.           <br>
  66.           Set Temperature:<input type="text" name="temper">
  67.           <input type="submit" value="SetTemp">
  68.           <BR><BR>
  69.           <input type="submit" value="Start Device">
  70.           <input type="submit" value="Stop Device">    
  71.  
  72.      </div>
  73.      <div class="tabbertab">
  74.           <h2>Incubator</h2>
  75.           <img src="incubator.jpeg" height=400 width=400><p>
  76.           <input type="button" value="Start Device">
  77.           <input type="button" value="Stop Device">  
  78.      </div>
  79.      <div class="tabbertab">
  80.           <h2>Electrophoresis</h2>
  81.           <img src="incubator.jpeg" height=400 width=400><p>
  82.           <input type="button" value="Start Device">
  83.           <input type="button" value="Stop Device">
  84.      </div>
  85.      <div class="tabbertab">
  86.           <h2>Centrifuge</h2>
  87.           <img src="incubator.jpeg" height=400 width=400><p>
  88.           <input type="button" value="Start Device">
  89.           <input type="button" value="Stop Device">
  90.      </div>
  91.     </form>
  92. </div>
  93.  
  94. </body>
  95. </html>
RAW Paste Data