Ajax créer un Toggle Button + lancer shell script [Débutant(e)]

**LuffyyffuL** · 06/07/2016, 14h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Savez-vous comment je peux faire ?

Merci beaucoup

**mathieu** · 07/07/2016, 18h38

avec par exemple jQuery, vous pouvez détecter le changement d'état comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**LuffyyffuL** · 08/07/2016, 14h13

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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();

**sekaijin** · 16/07/2016, 11h54

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

**lemassykoi** · 19/07/2017, 17h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

sudo addgroup www-data gpio

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sur mon Raspberry Pi 3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sudo addgroup www-data video

Ajax créer un Toggle Button + lancer shell script [Débutant(e)]

AJAX

Discussions similaires

Partager

Partager