Discussion :

[MaitrePylos]

Bonjour,

Dans mon projet Ror, j'aurais besoin de mettre une application qui permette de faire du map (zone cliquable sur html )

Auriez-vous dans vos cartons une idée.

Merci

[titoumimi]

c'est à dire ?

tu peux te faire un simple helper non ?

[bolo]

tu parles de goole map ?

[MaitrePylos]

Heu je précise.

(je suis toujours dans mon application de discrimination auditive)

Mes utilisateurs aurons la possibilité télécharger une image, a partir de cette image et en restant dans mon application, je voudrais leur offrir la possibilité de créer des zones cliquable et de mettre un mot dans le "title", de façon à produire un fichier rhtml avec

Code :

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

<map coord="123,43655" title="lapin" .....>

.

voyez vous de quoi je parle?

merci de voter aide

[titoumimi]

je doit t'avouer qu'en web pur, je ne voit pas trop comment ils pourraient faire... via une applui flash, sans soucis mais sinon...

[MaitrePylos]

Ben , j'avais espoir que l'un de vous aurais entendu parler d'une application fais en ajax ou flash effectivement

[titoumimi]

sinon, faut rentrer dans le javascript pur...

tu fait un form_remote_tag, avec dedans un image_submit_tag, et tu va définit un évènement onsubmit.

Il faut ensuite que tu récupères les coordonnées de la souris en javascript pour les transmettre à Rails, puis une seconde fois pour obtenir une deuxième position.

Tu devrai ainsi pouvoir dessiner des rectangles sur ton image...


(pas de bol, en Rails, le image_submit_tag ne retourne pas les coordonnées)

[MaitrePylos]

t'imagine le boulot?

[titoumimi]

pas tant que ça, tu te charges de me trouver une fonction javascript (compatible tout navigateur) qui récupère les coordonnées (de préférence deux, une pour les abscisses, l'autre pour les ordonnées), et je te fait ça

[MaitrePylos]

CHICHE

[Zfred]

---> Javascript
J'ai déja codé un truc comme ça, en full javascript.
Par contre, les utilisateurs concernés, avaient tous le meme navigateur, avec javascript activé...

via une applui flash, sans soucis

Pas si sûr !
L'upload en Flash c'est pas trop ça encore...
Si c'est juste du téléchargement, ça peut encore passer...

[Zfred]

En javascript pour IE, récupérer les coordonnées de la souris :

Code :

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

window.event.clientX

Pour tester les coordonnées d'un objet sur la page :

Code :

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

mon_objet.pixelLeft

(Et non pas mon_objet.left qui va planter...)
Mais bon, on s'éloigne de Ruby et de Rails là

[bolo]

---> Javascript
J'ai déja codé un truc comme ça, en full javascript.
Par contre, les utilisateurs concernés, avaient tous le meme navigateur, avec javascript activé...


Pas si sûr !
L'upload en Flash c'est pas trop ça encore...
Si c'est juste du téléchargement, ça peut encore passer...

ah bon

Code :

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

1
2
 
Mes utilisateurs aurons la possibilité télécharger une image, a partir de cette image et en restant dans mon application, je voudrais leur offrir la possibilité de créer des zones cliquable et de mettre un mot dans le "title", de façon à produire un fichier rhtml avec

si tu sais codé en AS. Pas de problème

[MaitrePylos]

si tu sais codé en AS. Pas de problème

C'est quoi AS ?

[bolo]

ActionScript

[MaitrePylos]

Voila,

Après des retrouvaille avec un bouquin, et mon langage d'apprentissage(Php), je te met les fichiers qui trouve les coordonnées de l'écran.

C'est fais en php, mais bon également valable pour Ror.

Ah oui je ne gére que le modèle Gecko/Khtml.

Merci de votre aide

[Zfred]

@Bolo :

si tu sais codé en AS. Pas de problème

C'est pas tellement ça qui pose probleme, mais plutot le type de plateforme de départ et d'arrivée. (Linux/Windows/Mac...)...
Mais bon voila, c'est pas tellement le sujet ici.

@MaitrePylos :
Bravo nikel
J'aime bien la technique pour l'envoyer au serveur en Ajax.
Bon, sur ton exemple c'est un peu délirant de passer par un serveur pour afficher les coordonnées de la souris sur le poste cient, (lol) mais j'imagine que ça répond à ton besoin initial et que tu fais un traitement sur le serveur, une fois qu'il a récupéré les coordonnées...
Merci en tout cas pour ton code

[titoumimi]

Alors, me voici me voila (j'ai perdu un temps monstre à trouver somment colorer les zones sensibles, mais il semble que ce ne soit pas possible )

layouts/application.rhtml

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <%= javascript_include_tag :defaults %>
        <%= stylesheet_link_tag("style") %>
        <title><%= @body_title || "titre par défaut" %></title>
    </head>
    <body<%= @body_extras %>>
        <%= yield %>
    </body>
</html>

controllers/test_controller.rb

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
 
class TestController < ApplicationController
  def image_submit
    session['coordonnees'] = nil
    session['my_maps'] = []
    @shapes = { 'Rectangle' => 'rect', 'Cercle' => 'circle'}
  end
 
  def voir_coord_images
    if session['coordonnees']
      if params['shape'] == 'circle'
        rayon = Math::sqrt((session['coordonnees'][0].to_i - params['posx'].to_i)**2 + (session['coordonnees'][1].to_i - params['posy'].to_i)**2)
        coordonnees = session['coordonnees'].join(',') + ',' + rayon.round.to_s
      else
        coordonnees = session['coordonnees'].join(',') + ',' + params['posx'] + ',' + params['posy']
      end
      session['my_maps'].push({'shape' => params['shape'], 'coords' => coordonnees, 'cible' => params['target'], 'alt' => params['txt_alt']})
      session['coordonnees'] = nil
      @image_maps = session['my_maps']
    else
      session['coordonnees'] = [params['posx'], params['posy']]
      @image_maps = nil
    end
 
    render(:update) { |page|
      page.replace_html "infos", "Le formulaire a été soumis avec les paramètres suivants :<br />#{params.inspect}"
      unless @image_maps.nil?
        page.replace_html "image_map_div", :partial => 'image_map'
      end
    }
  end
end

views/image_submit.rhtml

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
<% form_tag %>
	<label>Forme :</label>
	<%= select('img_tag', 'shape', @shapes) %>
	<br />
	<label>URL cible :</label>
	<%= text_field('img_tag', 'target') %>
	<br />
	<label>Texte alternatif :</label>
	<%= text_field('img_tag', 'alt') %>
<% end_form_tag %>
<br /><br />
<%= link_to_remote image_submit_tag("test_image_map.jpg", :id=>"mon_image"),
            :url=>{:action=>"voir_coord_images"},
            :with=>"'posx=' + detectXPosition(event, 'mon_image') + '&posy=' + detectYPosition(event, 'mon_image') + '&shape=' + $('img_tag_shape').value + '&target=' + $('img_tag_target').value + '&txt_alt=' + $('img_tag_alt').value"
%>
<br /><br />
<div id="infos"></div>
<hr />
 
<div id="image_map_div"></div>
<hr />

views/_image_map.rhtml

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
<map name="my_map">
	<% @image_maps.each do |img_map| %>
		<%= tag('area',
			{
				:shape => img_map['shape'],
				:coords => img_map['coords'],
				:href => img_map['cible'],
				:alt => img_map['alt']
			}
		) %>
 
	<% end %>
</map>
 
<%= image_tag "test_image_map.jpg", :usemap=>"#my_map", :border => 0 %>

Et si c'est pas beau, ça te génère comme un grand tes zones cliquables

Edit : last but not least :

public/javascripts/application.js

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
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
 
 
// Detect the X position of the mouse relativly to an element
function detectXPosition(e, element_id){
	element_pos = findPos(element_id);
	elt_x = element_pos[0]
    if(parseInt(navigator.appVersion) >=4){
        if(navigator.appName == 'Netscape'){
            pos_x = e.pageX - elt_x;
        }
        else{
            pos_x = event.x - elt_x;
        }
        return pos_x;
    }
}
 
// Detect the Y position of the mouse relativly to an element
function detectYPosition(e, element_id){
	element_pos = findPos(element_id);
	elt_y = element_pos[1]
    if(parseInt(navigator.appVersion) >=4){
        if(navigator.appName == 'Netscape'){
            pos_y = e.pageY - elt_y;
        }
        else{
            pos_y = event.y - elt_y;
        }
        return pos_y;
    }
}
 
// Get the position of the object
function findPos(element_id) {
	obj = document.getElementById(element_id);
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

[MaitrePylos]

Ps: j'ai une petite erreur js

[titoumimi]

Ps: j'ai une petite erreur js

quelle erreur ?