I was able to partially achieve this using the below code in index.html and a php to run a .sh like you suggested. While it seems successful, the click even executes both click on and click off. Is there any way to implement this to execute two separate commands determined by when the switch is on or off? I have been working particularly in the "btn=$('#inverter')" section. Below the index.html code I have the part that should work, however I'm unable to figure out how to merge it with your core.

<!DOCTYPE html>
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	
	<script type="text/javascript" src="js/fa-multi-button.js"></script>

	<script>
	$(function($) {
		 	$('#btn1').famultibutton({
				classes: ['fa-4x'],
		 	});
		 	btn = $('#winchout').famultibutton({
				icon: 'fa-arrow-up',
		 		classes: ['fa-4x'],
		   		onColor: '#ffffff',
				offColor: '#eeeeee',
				onBackgroundColor: '#FC9C12',
				mode: 'push',
				// toggleOn: function( ) {
// 			 		$('#out').text('Inverter on')},
// 	    		toggleOff: function( ) {
// 			 		$('#out').text('Inverter off')},
			});
			// btn.setOn();
			$('#btn3').famultibutton({
				backgroundIcon: 'fa-circle-thin',
				icon: 'fa-plug',
				classes: ['fa-4x'],
				onColor: '#33dd00',
				offColor: '#505050',
				onBackgroundColor: '#33dd00',
				offBackgroundColor: '#505050',
			});
			$('#resetpi').famultibutton({
			   backgroundIcon: 'fa-circle-thin',
			   icon: 'fa-refresh',
			   classes: ['fa-4x'],
			   onColor: '#aa6900',
			   offColor: '#505050',
			   mode: 'push', 
			});
			$('#winchin').famultibutton({
				icon: 'fa-arrow-down',
		 		classes: ['fa-4x'],
		   		onColor: '#ffffff',
				offColor: '#eeeeee',
				onBackgroundColor: '#FC9C12',
				mode: 'push',
				// toggleOn: function( ) {
// 			 		$('#out').text('Inverter on')},
// 	    		toggleOff: function( ) {
// 			 		$('#out').text('Inverter off')},
			});
			// btn.setOn();
			$('#btn6').famultibutton({
		   		backgroundIcon: 'fa-square-o',
		 		icon: 'fa-lightbulb-o',
		   		onColor: '#33dd00',
				offColor: '#505050',
				onBackgroundColor: '#33dd00',
				mode: 'push', 
			});
			btn=$('#interiorlights').famultibutton({
				icon: 'fa-lightbulb-o',
				classes: ['fa-4x'],
		   		onColor: '#ffffff',
				offColor: '#eeeeee',
				onBackgroundColor: '#33A5FF',
				mode: 'toggle', 
			});
			btn=$('#exteriorlights').famultibutton({
				icon: 'fa-lightbulb-o',
				classes: ['fa-4x'],
		   		onColor: '#ffffff',
				offColor: '#eeeeee',
				onBackgroundColor: '#33A5FF',
				mode: 'toggle', 
			});
			btn=$('#btn9').famultibutton({
				icon: 'fa-play',
				classes: [''],
			}).setOn();
			btn=$('#btn10').famultibutton({
				icon: 'fa-stop',
				classes: ['fa-lg'],
			}).setOn();
			btn=$('#btn11').famultibutton({
					icon: 'fa-step-backward',
				classes: ['fa-3x'],
				mode: 'push', 
			});
			btn=$('#btn12').famultibutton({
				icon: 'fa-step-forward',
				classes: ['fa-4x'],
				mode: 'push', 
			});
			btn=$('#inverter').famultibutton({
				backgroundIcon: 'fa-circle-thin',
				icon: 'fa-plug',
				classes: ['fa-4x'],
				onColor: '#33dd00',
				offColor: '#505050',
				onBackgroundColor: '#33dd00',
				offBackgroundColor: '#505050',
				});
				btn.on('click', function() {
    			$.ajax({
        			url : 'powerinverter.php'
    				}).done(function(data) {
        				console.log(data);
    				});
// 				});
// 			btn.off('click', function() {
//     			$.ajax({
//         			url : 'powerinverter2.php'
//     				}).done(function(data) {
//         				console.log(data);
//     				});
// 				});
	</script>
 <style>
body{
background-color: #222;
padding: 0;
margin: 0px 60px;
font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", "Helvetica", sans-serif; 
font-weight: 300;
text-rendering: optimizelegibility;
}
h1{letter-spacing: -4px;}
a {
  color:#39c;
  font-weight:400;
  text-decoration:none;
}

a small {
  font-size:11px;
  color:#777;
  margin-top:-0.6em;
  display:block;
}
p{font-size: 30px; line-height: 30px}
p.out{font-size: 20px;}
div.icon, p.out{  margin-top:-10px;}
div.demo{text-align: center; width: 270px; height: 300px; float: left; padding-bottom: 10px}
pre{text-align: center; margin-left:10px; height: 5px;}
</style>
</head>
<body>
 	<div style="width:100%;font-size:20px;letter-spacing:-8px;text-align: center;line-height:10px;">
		<h1>Controls</h1>
	</div>
	<div>
<!-- 
		<p>Modern toggle, push button or just a signal indicator.</p>
		<p style="font-size: 20px">* Perfect for touch UIs</p>
 -->
	</div>
	
<div class="demo" style="background-color:#222; color:#FFF;">
<p>Exterior Lights</p>
<pre>
</pre>
<div class="icon" id="exteriorlights"></div>
		
</div>
<div class="demo" style="background-color:#222; color:#FFF;">
<p>Winch Out</p>
<pre>
</pre>
<div class="icon" id="winchout"></div>
</div>

<div class="demo" style="background-color:#222; color:#FFF;">
<p>Power Inverter</p>
<pre>
</pre>
<div class="icon" id="inverter"></div>
</div>

<div class="demo" style="background-color:#222; color:#FFF;">
<p>Interior Lights</p>
<pre>
</pre>
<div class="icon" id="interiorlights"></div>
</div>
	
<div class="demo" style="background-color:#222; color:#FFF;">
<p>Winch In</p>
<pre>
</pre>
<div class="icon" id="winchin"></div>
</div>

<div class="demo" style="background-color:#222; color:#FFF;">
<p>Reset Pi</p>
<pre>
</pre>
<div class="icon" id="resetpi"></div>
</div>
	
</div>
</body>
</html>

From https://api.jquery.com/toggle-event/

$( "#target" ).toggle(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});

Shell command when button is on. #1

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions