executer une action lors d'un click sur un bouton de page web

**clairetj** · 04/10/2013, 09h37

Bonjour à toutes et à tous,

Je suis en train de réaliser un projet mêlant programme Qt en page web. L'idée, c'est que je veux déporté mon IHM Qt sur un page web. J'ai déjà réaliser une page web pour représenter mon IHM et le programme Qt est en cours de développement (mais je n'en parlerai pas ici). Il ne me reste qu'une petit truc à faire sur ma page web et j'aurais besoin de votre aide ou de vos conseils.

Je vous donne au préalable le code .html de ma page web (je ne pense pas que vous fournir le code css vous soit utile donc je ne le posterai pas ici)

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site de démonstration</title>
<meta name="keywords" content="simple, grid, theme, free templates, web design, one page layout, slategray, steelblue, templatemo, CSS, HTML" />
<meta name="description" content="Simple Grid is a one-page website template provided by templatemo.com" />
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/jquery.localscroll-min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll();
});
</script> 
 
</head>   
<body>
 
<div id="templatemo_wrapper">
	<div id="templatemo_header">
		Site de démonstration
    </div>
 
    <!--<div id="templatmeo_menu">
    	<ul>
        	<li><a href="#home" class="home"><span></span></a></li>
            <li><a href="#about" class="about"><span></span></a></li>
            <li><a href="#portfolio" class="portfolio"><span></span></a></li>
            <li><a href="#services" class="services"><span></span></a></li>
            <li><a href="#contact" class="contact"><span></span></a></li>
		</ul>
    </div>-->
 
    <div id="templatemo_main">
    	<div id="home" class="main_box">
        	<h1>Communication série entre un site web et un automate</h1>
 
		Le but de cette page web est de servir de démonstrateur.<br/><br/>
 
		Ce que l'on veut faire: Cette page sera hébergée sur un serveur embarqué lighttpd installé sur une carte Raspberry Pi (<a href="http://fr.wikipedia.org/wiki/Raspberry_Pi">Information sur la Raspberry Pi</a>).
		Cette carte Raspberry Pi va nous permettre de commander via une communication série et une application développé sous Qt un automate.<br/><br/>
 
		L'application développé sous Qt est une apllication nous permmettant d'établir la communication série avec l'automate, d'allumer les 8 LEDs présentent sr les sorties Tout Ou Rien de l'automate et de pouvoir
		lancer un chenillard sur ces mêmes LEDs. Le programme développé sous Qt possède une IHM mais pour ce projet, nous alons que cette IHM soit dépporté sur une page web, afin de pouvoir commander l'automate de 
		n'importe où. Nous allons donc "recréer" ici l'IHM du programme développé sous Qt. <br/><br/>
 
		Le programme développé sous Qt tournera donc en fond sur la carte Raspberry Pi, au même titre que l'hébergeur et cette page, via le programme Qt et la communication série nous permettra de contrôle de l'automate.
 
            <div class="cleaner"></div>
		</div> <!-- END of home -->
 
		<div id="home" class="main_box">
        	<h1>L'IHM déportée</h1>
 
			<div align="center">
	<div class="two_column float_l">
        <h2>Partie Connexion<br/></h2>
 
		<input type="button" style="width:200px" value="Connexion à l'automate"><br/><br/>
		<input type="button" style="width:200px" value="Démarrer la communication"><br/><br/>
		<input type="button" style="width:200px" value="Quitter"><br/><br/>
 
    </div>
 
    <div class="two_column float_r">
        <h2>Partie Gestion des LEDs</h2>
 
		<input type="button" style="width:200px" value="Lancer le chenillard"><br/>
		<input type="button" style="width:200px" value="Arrêter le chenillard"><br/><br/>
 
		<input type="button" style="width:200px" value="LED1"><br/>
		<input type="button" style="width:200px" value="LED2"><br/>
		<input type="button" style="width:200px" value="LED3"><br/>
		<input type="button" style="width:200px" value="LED4"><br/>
		<input type="button" style="width:200px" value="LED5"><br/>
		<input type="button" style="width:200px" value="LED6"><br/>
		<input type="button" style="width:200px" value="LED7"><br/>
		<input type="button" style="width:200px" value="LED8"><br/>
 
    </div>
	</div>
 
 
 
            <div class="cleaner"></div>
		</div> 
 
 
    </div> <!-- END of -->
 
    <div id="templatemo_footer">
    	Copyright © 2048 Your Company Name<br /> Designed by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
    </div> 
</div> 
 
 
<script type='text/javascript' src='js/logging.js'></script>
</body>
</html>

Comme vous pouvez le voir, j'ai différents boutons sur cette page qui me permette de réaliser différentes actions.

Pour "connecter" cette IHM web avec mon programme Qt, je souhaiterai utiliser un code qui ressemble à cela:

Code :

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

1
2
3
IF ( POST['BOUTON_ALLUME_LED1'] ) 
exec ( "./MONPROGRAMME ALLUME_MA_LED1")
END IF

Mais j'ai une question: comment récupérer l'action de clic de mon BOUTON_ALLUME_LED1 pour le passé dans ce code.

Pouvez-vous m'aider s'il vous plait,

Cordialement,
Clairetj

**clairetj** · 10/10/2013, 16h23

Post résolu grâce à une recherche sur internet

**NoSmoking** · 10/10/2013, 19h38

Bonjour,
il eut été sympa de partager ta solution, qui sait elle pourrait servir à d'autres!

**clairetj** · 11/10/2013, 08h29

Pour l'exemple que je vais donner, je pose deux choses:
1- Mon exécutable s'appelle EssaiCommInternet (donc à vous de remplacer par le nom de votre exécutable)
2- Dans mon programme d'où est issu mon exécutable (après compilation), j'ai une fonction qui s'appelle on_pushButton_LED1_clicked (là encore à vous adaptez en fonction de vos besoins

Code :

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

1
2
3
4
5
6
7
8
9
<form action="" method="post">
<input type="submit" style="width:200px" value="LED1">
</form>
<?php
if($_POST['LED1'])
{
exec("./EssaiCommInternet on_pushButton_LED1_clicked");
}
?><br/>

executer une action lors d'un click sur un bouton de page web

HTML

Discussions similaires

Partager

Partager