G2A Many GEOs
SHARE
TWEET

Webpage for Arduino communication through webpage

ZaynerTech Mar 31st, 2014 417 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
Ledger Nano X - The secure hardware wallet
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top