Créer des zone réactives avec un éditeur visuel

Version imprimable

15/11/2005, 17h51
sami_c

Créer des zone réactives avec un éditeur visuel

Bjr,
Mon but est d'avoir une page web (que je developperais en PHP) qui permette d'uploader un fichier JPG (ça je peux le faire :). La principale fonction de la page est de permettre de créer des zone réactives sur l'image uploadé, je ne vois pas trop comment on peut faire. Est-ce qu'il y a une possibilité de le faire avec la souris (donc une sorte d'éditeur d'image très light) ? sinon on pourra permettre de saisie manuellement les coordonnées de chaque zone :( quelqu'un a une idée ??
Merci :)
15/11/2005, 18h10
Mr N.
Soluce sans javascript :
tu affiche l'image sous forme d'input dans un form
Code:

1 2 3 <form ...> <input type="image" src="ton_image_uploadee.jpg" /> </form>
Tu récupérera ainsi les coordonnées du clic de l'utilisateur (var_dump($_REQUEST)) !
Donc tu peux faire un carré (2 clic, un haut-gauche + un bas-droite)
ce carré sura représenté par un div en position absolute, représentant la zone réactive !

Sinon regarde du côté de javascript...
15/11/2005, 18h15
siddh

le probleme apres va etre de faire en sorte qu elle reste reactive non ?
le but final c est quoi ?
si tu le fais en js, en rentrant les coordonnées a la main car sinon ca est pas impossible mais tres chaud, tes infos apres tu vas en faire quoi ?
le js est volatile, pas d acces aux fichiers.
Tu pourras eventuellemnt transférer vers le serveur grace a xmlhttp.

Dis m'en plus ;)

Selon ce que tu veux faire, ca peut m'interresser donc je peux coder des trucs js pourquoi pas.
15/11/2005, 18h21
Mr N.

oui, ben une image en soi n'est jamais réactive, c'est le fait de la mettre dans un map... Donc une fois les zones définies => on stockes celles-ci pour les futurs affichages !
15/11/2005, 18h22
siddh

oui voila, c est un editeur d image map qu il faut faire.

Je suis sur qu'on peut le faire en js mdr et on delegue le travail d'ecriture de la map a php.

[EDIT]
Comment ca n'importe quoi ?
15/11/2005, 18h38
Mr N.

qui a dit n'importe quoi ?

Je me dépeche avant qu'on me passe devant et qu'on propose un code alors que je me suis arraché pour celui là :fou:

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<?php 
$zones = array();
if(isset($_REQUEST['zone'])) {
	foreach($_REQUEST['zone'] as $zone) {
	    $zones[] = array('top' => $zone['top'], 'left' => $zone['left'], 'width'  => isset($zone['width'])?$zone['width']:0, 'height' => isset($zone['height'])?$zone['height']:0);
	}
}
if (count($zones) == 0) {
    $zones[] = array('top' => -1, 'left' => -1, 'width'  => 0, 'height' => 0);
}
$current = count($zones) - 1;
if(isset($_REQUEST['click']) && isset($_REQUEST['x']) && isset($_REQUEST['y'])) {
	if ($zones[$current]['top'] == -1) {
		$zones[$current]['top']  = $_REQUEST['y'];
		$zones[$current]['left'] = $_REQUEST['x'];
	} else { 
		if ($_REQUEST['y'] < ($zones[$current]['top'] + $zones[$current]['height'] / 2)) {
			$zones[$current]['height'] = $zones[$current]['height'] + $zones[$current]['top'] - $_REQUEST['y'];
			$zones[$current]['top']    = $_REQUEST['y'];
		} else {
			$zones[$current]['height'] = $_REQUEST['y'] - $zones[$current]['top'];
		}
		if ($_REQUEST['x'] < ($zones[$current]['left'] + $zones[$current]['width'] / 2)) {
			$zones[$current]['width'] = $zones[$current]['width'] + $zones[$current]['left'] - $_REQUEST['x'];
			$zones[$current]['left']    = $_REQUEST['x'];
		} else {
			$zones[$current]['width'] = $_REQUEST['x'] - $zones[$current]['left'];
		}
	}
}
 
if (isset($_REQUEST['save'])) {
    $current++;
    $zones[] = array('top' => -1, 'left' => -1, 'width'  => 0, 'height' => 0);
}
 
$can_save = $zones[$current]['width'] && $zones[$current]['height'];
 
 
?>
<html>
    <head>
        <style type="text/css">
        #map {
            position:relative;
        }
        #image {
            position:absolute;
        }
        .zone {
            position:absolute;
            border:1px solid blue;
        }
        .zone div {
            width:100%;
            height:100%;
            background:blue;
            opacity:0.2;
	    filter: alpha(opacity=20);
        }
        .done {
            border:1px solid orange;
        }
        .done div {
            background:yellow;
        }
	area {
		border:1px solid red;
	}
        </style>
    </head>
    <body>
    <div>
    <?php
    if (isset($_REQUEST['generate'])) {
	    ?> <img src="Nenuphars.jpg" usemap="#test_map" />
	    <map name="test_map">
            <?php $nb = count($zones);
	    for ($i = 0 ; $i < $nb - 1 ; $i++) { //On saute la dernière qui n'est jamais inachevée
		    ?><area href="zone_<?=$i?>.html" alt="zone <?=$i?>" title="zone <?=$i?>" shape="rect" coords="<?=$zones[$i]['left']?>,<?=$zones[$i]['top']?>,<?=$zones[$i]['left']+$zones[$i]['width']?>,<?=$zones[$i]['top']+$zones[$i]['height']?>" />
		    <?php
	    } ?>
	    </map><?php
    } else {
	    ?>
    <form action="" method="GET">
	<input type="hidden" name="click" value="1" />
        <input type="submit" name="save" value="save" <?=($can_save?'':'disabled="disabled"')?> />
        <input type="submit" name="generate" value="generate" />
        <?php foreach($zones as $key => $value) { ?>
		<input type="hidden" name="zone[<?=$key?>][top]" value="<?=$value['top']?>" />
		<input type="hidden" name="zone[<?=$key?>][left]" value="<?=$value['left']?>" />
		<input type="hidden" name="zone[<?=$key?>][width]" value="<?=$value['width']?>" />
		<input type="hidden" name="zone[<?=$key?>][height]" value="<?=$value['height']?>" />
        <?php } ?>
        <div id="map">
            <input id="image" type="image" src="Nenuphars.jpg" />
            <?php foreach($zones as $key => $value) { ?>
                <div class="zone <?php echo $key!=$current?'done':''; ?>" style="top:<?=$value['top']?>;left:<?=$value['left']?>;height:<?=$value['height']?>;width:<?=$value['width']?>;"><div></div></div>
            <?php } ?>
        </div>
    </form>
    <?php } ?>
    </div>
    </body>
</html>

Plus fort que le roquefort, il y a pas besoin de javascript ! 8)

Il faut juste changer les deux chemins vers l'image et c'est marre.
Ensuite l'utilisation est super facile :lol:
- On défini une zone (on clique, on clique, on clique,...)
- On la sauvegarde
- On définit la suivante
- etc.
- On génère !
- Si on est pas content on fait back dans le navigateur et on revient à n'importe quelle étape 8)

TODO:
- Nettoyer le code car suite à mes différents tests il reste pleins de cochonneries
- rendre la définition des zones plus intuitives :oops:
- gérer les "shape" autres que rectangle (cercle/polynomes)
- donner la possibilité de donner une description+url lors de l'edition de la zone
- ...

Amusez vous bien ;)

16/11/2005, 01h56
siddh

ptdr ^^

vais tester ca, je proposerais pitetre une version js ;)

[EDIT]

chapeau bas c'est superbe, je pense meme que je vais m'en servir
:applo: :hola:
16/11/2005, 10h18
sami_c

Mr N. > Super ton code ... merci :)

siddh >> Mon but est de créer des zone réactives visuellement, en suite, pour chaque zone je doit permettre de saisie des données (exp : url, ...) le tout sera ensuite enregistré dans une bdd (avec php/mysql)
16/11/2005, 10h23
siddh

ouki, ben t as deja tout la ;)
Mr N. prend la carte bleue, les chèques et les espèces ...

Tu l'as fais travailler toute la nuit tu te rend compte, pendant que je jouais a la ps2 moi
16/11/2005, 10h26
Mr N.

Toute la nuit ou presque, Georges Clooney m'a distrait avec son bateau et du coup le film de tueurs suivant aussi :fou:

Pour les chèques, uniquement les chèques de banque, on est jamais trop prudent :mrgreen:
16/11/2005, 10h39
sami_c

file moi le numéro de ton compte en suisse et je te verse la somme que tu voudras ... c'est plus rapide que le chèque je trouve :D
Encore merci pour le code
16/11/2005, 10h50
Mr N.

Tu dois confondre, c'est aux bahamas moi :P