Ajax créer un Toggle Button + lancer shell script

Version imprimable

06/07/2016, 14h08
LuffyyffuL

Ajax créer un Toggle Button + lancer shell script
Bonjour,

Je souhaite créer un "Toggle Button" qui lance un shell script en fonction de son état : ON/OFF.

En gros, j'ai un bouton en CSS et quand je clique dessus, il change d'apparence, comme dans l' exemple ci-dessous :

http://www.htmllion.com/css3-toggle-switch-button.html

Maintenant je souhaite ajouter au code suivant l'appelle d'une fonction JavaScript, afin de lancer un shell script en fonction de l'état de mon bouton :
Code:

1 2 3 4 5 <label class="switch"> <input class="switch-input" type="checkbox" /> <span class="switch-label" data-on="On" data-off="Off"></span> <span class="switch-handle"></span> </label>
J'ai trouver la commande suivante afin de pousser un shell script mais sans résultat :

Code:

Runtime.getRuntime().exec("/usr/bin/sh /path_sh/test.sh");

Savez-vous comment je peux faire ?

Merci beaucoup
07/07/2016, 18h38
mathieu
avec par exemple jQuery, vous pouvez détecter le changement d'état comme cela :
Code:

1 2 3 $(".switch-input").change(function (e) { console.log($(this).prop("checked")); });

Bonjour,

Merci pour la réponse, maintenant j'arrive à prendre en compte l'état de ma checkbox :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
	<head>
		<meta charset="utf-8" />
		<title>ACCUEIL</title>
		<link href="MON_CSS.css" rel="stylesheet" type="text/css" />
 
		<script type="text/javascript">
 
			function check(obj){
 
				if (obj.checked) {
 
					alert('OFF to ON');
				}
 
				else {
 
					alert('ON to OFF');
				}
			}
 
		</script>
 
	</head>
 
	<body>
 
 
	<?php
                
                $compteur = 0 ;
                
                try
                {
                        $bdd = new PDO('mysql:host=localhost;dbname=MA_DB;charset=utf8', 'USER', 'PWD');
                }
                
                catch (Exception $e)
                
                {
                        die('Erreur : ' . $e->getMessage());
                }
                
                $LED_N=$bdd->query(" SELECT etat FROM `MA_TABLE` WHERE nom LIKE 'LED_N_%' ");
        
                while ($donnees=$LED_N->fetch()) {
 
                        $compteur = $compteur + $donnees['etat'] ;
                }
                
                if ($compteur == "4") { // 4 LEDS
                                                                        
                        echo '<form name="myform" id=myform" method="POST">' ;
                                echo '<label class="switch">' ;
                                        echo '<input type="checkbox" name="leds_n_on" id="leds_n_on" value="leds_n_on" onclick="check(this);" class="switch-input" checked/>' ;
                                        echo '<span class="switch-label" data-on="On" data-off="Off"></span> ' ;
                                        echo '<span class="switch-handle"></span>' ;
                                echo '</label>' ;
                        echo '</form>' ;
                        
                } else {
                        
                        
                        echo '<form name="myform" id=myform" method="POST">' ;
                                echo '<label class="switch">' ;
                                        echo '<input type="checkbox" name="leds_n_off" id="leds_n_off" value="leds_n_off" onclick="check(this);" class="switch-input" />' ;
                                        echo '<span class="switch-label" data-on="On" data-off="Off"></span> ' ;
                                        echo '<span class="switch-handle"></span>' ;
                                echo '</label>' ;
                        echo '</form>' ;
                }       
                        
                $LED_N->closeCursor();
        
        ?>	
 
	</body>
 
</html>

J'ai essayé ce bout de code pour exécuter un shell script, mais ça ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
 
                                        Runtime runtime = Runtime.getRuntime();
					String[] args = { "/bin/sh", "-c", "./test.sh" };
					final Process process = runtime.exec(args);
 
					// Consommation de la sortie standard de l'application externe dans un Thread separe
					new Thread() {
						public void run() {
							try {
								BufferedReader reader = new BufferedReader(new InputStreamReader(process.getInputStream()));
								String line = "";
								try {
									while((line = reader.readLine()) != null) {
									// Traitement du flux de sortie de l'application si besoin est
									}
								} finally {
									reader.close();
								}
							} catch(IOException ioe) {
								ioe.printStackTrace();
							}
						}
					}.start();
 
					// Consommation de la sortie d'erreur de l'application externe dans un Thread separe
					new Thread() {
						public void run() {
							try {
								BufferedReader reader = new BufferedReader(new InputStreamReader(process.getErrorStream()));
								String line = "";
								try {
									while((line = reader.readLine()) != null) {
									// Traitement du flux d'erreur de l'application si besoin est
									}
								} finally {
									reader.close();
								}
							} catch(IOException ioe) {
								ioe.printStackTrace();
							}
						}
					}.start();

16/07/2016, 11h54
sekaijin

une petite recherche sur le forum dans la FAQ etc.
et tu obtiens

IL EST STRICTEMENT INTERDIT D'EXECUTER QUOI QUE CE SOIT SUR LE POSTE DE L'UTILISATEUR !

je suppose que si lorsque tu visite une page l'auteur injecte sur ta machine un script l'exécute te vole ta carte bleu tous tes moyen de paiement déclaré sur le net, tes n° de passeport et de carte d'identité
les revend à un trafiquant qui usurpe ton identité te fait radier de tout au point que tu ne parviens plus devant la justice à faire reconnaitre que c'est lui l'usurpateur et toi la victime
tu ne vas pas apprécier

alors pour te protéger le navigateur interdit l'exécution de code sur le poste de l'utilisateur.

quant à ce qui est décrit ci dessus c'est un cas réel qui est arrivé à plusieurs personnes. l'administration versant les droit à l'usurpateur, la justice condamnant la victime à de la prison.

A+JYT

Salut,
je n'ai pas l'impression qu'il veuille exécuter quoi que ce soit sur le poste utilisateur, mais bien sur le poste qui lui sert de serveur PHP (c'est un peu le principe de PHP de tout faire côté serveur non ?)

J'ai eu le même problème hier soir et un ami m'a aiguillé, et je pense pouvoir dire que c'est bon.
Deux fichiers : un index.html et un action.php

Chez moi, bootstrap et ses extensions sont installés sur le serveur, d'où l'absence de chemin HTTP pour les CSS et JS

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="fr">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="index, follow">
        <meta name="revisit-after" content="1 month">
        <title>GPIO Tests</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/highlight.css" rel="stylesheet">
        <link href="https://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
        <link href="css/bootstrap-switch.css" rel="stylesheet">
        <script src="js/bootstrap-switch.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css" rel="stylesheet" >
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="doc/stylesheet.css" rel="stylesheet">
        <link href="css/bootstrap-toggle.css" rel="stylesheet">
        <script src="js/jquery-3.2.1.min.js"></script>
</head>
 
<header>
 
</header>
 
<body>
<div class="container-fluid" role="main">
                <h3>PIN 1</h3>
                        <p>Lumière de gauche</p>
                                <div class="container">
                                        <script src="js/jquery-3.2.1.min.js"></script>
                                        <input id="pin1" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
                                        <div id="console-event"></div>
                                                <script>
                                                $(function() {
                                                        $('#pin1').change(function() {
                                                                $('#console-event').html('Pin 1 status : ' + $(this).prop('checked'));
                                                                $.ajax({
                                                                        type: 'POST',
                                                                        url: 'action.php',
                                                                        data: { pin:1, state:$(this).prop('checked') }
                                                                });
                                                        })
                                                })
                                                </script>
                                </div>
</div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
        <script src="doc/script.js"></script>
        <script src="js/jquery-3.2.1.min.js"</script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/highlight.js"></script>
        <script src="https://unpkg.com/bootstrap-switch"></script>
        <script src="js/bootstrap-toggle.js"></script>
        <script src="js/main.js"></script>
</body>
</html>

action.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GPIO Pins Control</title>
</head>
        <body>
<?php
if(isset($_POST['pin'])){
//PIN1
         if ($_POST['pin'] == '1' AND $_POST['state'] == 'true') {
                 $gpio_on = shell_exec("sudo /home/pi/gpio.sh 5 1");
                 echo "PIN1 is on<br/>";
         }
         else if ($_POST['pin'] == '1' AND $_POST['state'] == 'false') {
                 $gpio_off = shell_exec("sudo /home/pi/gpio.sh 5 0");
                 echo "PIN1 is off<br/>";
         }
// FIN PIN 1
}
?>
</body>
</html>

Pour que mon user www-data puisse faire un sudo sur mon .sh, j'ai du faire :

Grant adequate permissions (550 mean root and group www-data can read and execute, nobody can write)

Code:

1
2
sudo chown root:www-data /home/pi/gpio.sh
sudo chmod 550 /home/pi/gpio.sh

And allow apache to sudo on this script:

Code:

sudo nano /etc/sudoers.d/020_www-data-nopasswd

Citation:

www-data ALL=(ALL) NOPASSWD:GPIO
# Cmnd alias specification
Cmnd_Alias GPIO = /home/pi/gpio.sh

Et, pour info, donner les droits à www-data pour interagir avec les GPIO :

Code:

sudo addgroup www-data gpio

Et pour finir, donner les droits à www-data pour lancer

Code:

/opt/vc/bin/vcgencmd measure_temp | cut -d= -f2 | cut -d. -f1

sur mon Raspberry Pi 3

Code:

sudo addgroup www-data video