stevo
/
RP_Jalousiecontrol


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							    <!DOCTYPE html>
    <html>
	    <head>
		    <title>css control</title>
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    
		    <!-- Bootstrap -->
		    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	    </head>
	    <body>
		    <script src="http://code.jquery.com/jquery.js"></script>
		    <script src="js/bootstrap.min.js"></script>
			
			<script> 
			var counter = 0;
			var state = 'stop';
			
			function clickHandler(value, item) {
				if(value == 'up'){
				test = "mc.html?IO1=up,target=" + item;
	 			   $.post( "mc.html?action=up&port=" + item );
	 			}
	 			if(value == 'stop'){
	 			   $.post( "mc.html?action=stop&port=" + item );
	 			   asyncLoop()
	 			}
	 			if(value == 'down'){
	 			   $.post( "mc.html?action=down&port=" + item );
	 			}
	 			state = value
	 			// GetStatesFromServer()
			}
				    
		    (function GetStatesFromServer() {
				$.get("cmd",function(retv){
				
				    state = retv
				
					states = retv.split(",")
				
				    element0 = document.getElementById('progressBar_0')
		        	element0.innerHTML = "<span>" + states[0] + "%" + "</span>"
					element0.style.width=states[0]+"%"
           			
           			element1 = document.getElementById('progressBar_1')
		        	element1.innerHTML = "<span>" + states[1] + "%" + "</span>"
					element1.style.width=states[1]+"%"
           			
           			element2 = document.getElementById('progressBar_2')
		        	element2.innerHTML = "<span>" + states[2] + "%" + "</span>"
					element2.style.width=states[2]+"%"
					
					element3 = document.getElementById('progressBar_3')
		        	element3.innerHTML = "<span>" + states[3] + "%" + "</span>"
					element3.style.width=states[3]+"%"
					
           			setTimeout(GetStatesFromServer, 1000);
		    	})
		    	
			})()
										
			</script>
	
			<ul class="nav nav-tabs" role="tablist">
			  <li                ><a href="index.html"    >Home          </a></li>
			  <li class="active" ><a href="mc.html"       >Control       </a></li>
			  <li                ><a href="info.html"     >Info          </a></li>
			</ul>
			
			<div class="panel-group" id="accordion">
			  <div class="panel panel-default">
			    <div class="panel-heading">
			      <h4 class="panel-title">
			        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
			          Alex 1
			        </a>
			      </h4>
			    </div>
			    <div id="collapseOne" class="panel-collapse collapse in">
				
				  <!-- bgn Button group 1 -->
				  <div class="panel-body" >
					<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',0)" > Down </button>
					<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',0)" > Stop </button>
					<button type="button" class="btn btn-default" name="up"   onclick="clickHandler('up',0)"   > Up   </button>
				  </div>
 				
		          <div class="progress">
					  <div id="progressBar_0" class="progress-bar" role="progressbar" style="width: 0%;">
					    <span> 0% Complete </span>
					  </div>
				  </div>      
				 <!-- end Button group 1 -->
				  
			    </div>
			  </div>
			  
			  <div class="panel panel-default">
			    <div class="panel-heading">
			      <h4 class="panel-title">
			        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
			          Alex 2
			        </a>
			      </h4>
			    </div>
			    <div id="collapseTwo" class="panel-collapse collapse">
			      <div class="panel-body">
			      
			      <!-- bgn Button group 2 -->
				  <div class="panel-body" >
					<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',1)" > Down </button>
					<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',1)" > Stop </button>
					<button type="button" class="btn btn-default" name="up"   onclick="clickHandler('up',1)"   > Up   </button>
				  </div>
 				
				  
		          <div class="progress">
					  <div id="progressBar_1" class="progress-bar" role="progressbar" style="width: 0%;">
					    <span> 0% Complete </span>
					  </div>
				  </div>      
				  <!-- end Button group 2 -->
			      
			      </div>
			    </div>
			   </div> 
			  
			  <div class="panel panel-default">
			    <div class="panel-heading">
			      <h4 class="panel-title">
			        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
			          Linus 3
			        </a>
			      </h4>
			    </div>
			    
				<div id="collapseThree" class="panel-collapse collapse">
			      <div class="panel-body">
			      
			      <!-- bgn Button group 3 -->
				  <div class="panel-body" >
					<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',2)" > Down </button>
					<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',2)" > Stop </button>
					<button type="button" class="btn btn-default" name="up"   onclick="clickHandler('up',2)"   > Up   </button>
				  </div>
 				
				  
		          <div class="progress">
					  <div id="progressBar_2" class="progress-bar" role="progressbar" style="width: 0%;">
					    <span> 0% Complete </span>
					  </div>
				  </div>      
				  <!-- end Button group 3 -->
			      
			      </div>
			    </div>
				</div>
				
			  <div class="panel panel-default">
			    <div class="panel-heading">
			      <h4 class="panel-title">
			        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
			          Linus 4
			        </a>
			      </h4>
			    </div>
			    <div id="collapseFour" class="panel-collapse collapse">
			      <div class="panel-body">
			      
			      <!-- bgn Button group 4 -->
				  <div class="panel-body" >
					<button type="button" class="btn btn-default" name="down" onclick="clickHandler('down',3)" > Down </button>
					<button type="button" class="btn btn-default" name="stop" onclick="clickHandler('stop',3)" > Stop </button>
					<button type="button" class="btn btn-default" name="up"   onclick="clickHandler('up',3)"   > Up   </button>
				  </div>
 				
				  
		          <div class="progress">
					  <div id="progressBar_3" class="progress-bar" role="progressbar" style="width: 0%;">
					    <span> 0% Complete </span>
					  </div>
				  </div>      
				  <!-- end Button group 4 -->
			      
			      </div>
			    </div>
			    
			  </div>
			</div>
			   
	    </body>
    </html>