[Javascript] Aiuto per recupero variabili da script

[piero60]

Salve a tutti, non ho esperienza in javascript, dovrei utilizzare uno script scaricato dalla rete che serve per mappare delle immagini.
Lo script funziona bene e fa ciò che a me serve, dovrei ricavare le informazioni che restituisce lo script, quelle segnate in rosso nella immagine allegata e che vengono visualizzate nel file html una volta effettuata l'operazione

.

Il tutto gira qui http://www.mipromuovodame.com/public/summer-master/

e lo zip contenente il tutto quindi anche il file JS dal quale dovrei ricavare le informazioni è scaricabile quì
http://www.mipromuovodame.com/public/summer-master.zip

Le informazioni ricavate, penso all'interno di una variabile, mi servono per trasferirle all'interno di un database.
Il mio problema, non conoscendo javascript , è come rendere disponibile in una variabile ciò che viene restituito sullo schermo.
Grazie per la collaborazione.

 

[Max 1]

In sostanza tu vorresti utilizzare i dati che ottieni cliccando sull'immagine?

1. Lo script nell'immagine non produce nessun effetto o dato quindi bisognerebbe rifarlo ma ci sono modi ben più belli che quella specie di tool
   
2. Se producesse qualche effetto o dato certamente non basterebbe Javascript per gestirlo in un database

 

[piero60]

Grazie Max,
probabilmente mi sono spiegato male, il tool funziona ed è anche semplice da utilizzare, una volta che sono state tracciate le coordinate lui le mette in una finestra come quella che vedi nell'immagine.
Se questi dati vengono visualizzati sicuramente esiste il modo di recuperarli ed in javascript non so come fare.
Recuperati questi dati utilizzo poi PHP per fare tutto ciò che è necessario per andarli ad inserire nel database.
Esistono modi per trasferire le variabili javascript a php e li conosco, ciò che non so è come recuperare i dati che il tool mette sul video.
Poi se tu conosci sitemi di mappatura magari in php dammi qualche indirizzo io non ho trovato nulla.
Il problema è che io devo creare la mappatura on line e salvare i dati in un database perchè l'immagine mappata è soggetta a modifiche.

Grazie.

 

[Max 1]

Se quel tool a te piace nulla da dire! Ma il problema non è questo!
Il problema è che se tu clicchi nel punto dove è stata mappata l'immagine con questo codice

<img src=""mappa3.jpg" alt="" usermap="#map" />
<map name="map">
    <area shape="circle" coords="399, 451, 54" />
</map>

non ottine sicuramente ne un dato ne altro.
A parte che non ho capito quali dati vorresti passare

 

[piero60]

Certo che cliccando sul codice che appare non ottengo nulla, da li essendo video posso fare solo un copia ed incolla dei dati visualizzati, e non è ciò che serve a me.
Comunque i due dati che a me servono sono il valore di shape "circle", "rect", ecc secondo cosa è stato selezionato ed il valore delle coordinate, il resto non mi interessa, che sono poi i due valori che ho segnato in rosso nella immagine.
Devo inserire quei dati nel database dal quale poi si attinge per fare tutto il resto in PHP.
Io ho bisogno di tirare fuori dallo script solo quei due dati poi me li gestisco in PHP.
Sto guardando come si può fare in rete, sicuramente si può, per questo chiedevo agli esperti JS un consiglio.

 

[Max 1]

Aspettando gli esperti di javascript (come dici tu) che ne sanno più di me, io dico che la vedo durissima con la possibilità di recuperare dati da codice, perchè con l'azione del click così come è la situazione non puoi passare nulla a una variabile

 

[criric]

Ciao, riga 606, funzione getHTMLCode
inserisci nel foreach una chiamata ajax ad una pagina php passando la variabile x, c'è dentro tutto

 

[piero60]

Ho fatto qualche prova,
la variabile "X" non ha tutto restituisce questra stringa facendo un var_dump nella
pagina php che riceve i dati.

string(50) "Rectangle {x: 447, y: 175, width: 126, height: 94}"

dove il 447 ed 175 sono coordinate corrette invece le altre due sono la dimensione della
selezione e non le altre 2 coordinate, i parametri corretti per questa situazione sono:
447, 175, 573, 269

se invece passo la variabile "html_code"

sulla barra di navigazione del brownser viene fuori:

http://localhost/cc/vedi.php?id1=<area%20shape=%22 ~rect~ %22%20coords=%22 ~ 447 ~ ,%20175,%20 ~ 573 ~ ,%20 ~ 269 ~ %22%20/>

le coordinate ed il tipo di shape sono corrette sono quelle segnate tra ~

pero la pagina php risponde così string(0) ""

per inviare i dati non ho usato una chiamata ajax ma
location.href = 'vedi.php?id1='+html_code;

e nella pagina php
id1 = $_GET['id1'];

var_dump($id1);

questo in tutti e due i casi.

Probabilmente è molto più facile recuperare i 2 valori nella pagina html in modo che possa inserirli direttamente nei campi di un form che ho già creato e che è presente nella pagina dove si mappa.
La pagina con il form inserito però non è quella che vedi attraverso il link, comunque è il classico form fatto con capi input ecc.ecc.ecc.
Nella pagina html i dati vengono stampati in questa div
<div id="code_content"></div>
Cosa ne pensi?

la riga location.href = 'vedi.php?id1='+html_code; la ho inserita

           getHTMLCode : function(arg) {
                var html_code = '';
                if (arg) {
                    if (!state.areas.length) {
                        return '0 objects';
                    }
                 
     //               html_code += utils.encode('<img src="' + state.image.filename + '" alt="" usemap="#map" />') +
     //                  '<br />' + utils.encode('<map name="map">') + '<br />';
                    utils.foreachReverse(state.areas, function(x) {
//                       html_code += '&nbsp;&nbsp;&nbsp;&nbsp;' + utils.encode(x.toHTMLMapElementString()) + '<br />';
     html_code += utils.encode(x.toHTMLMapElementString());

-----------------------------------------------------------------   
                location.href = 'vedi.php?id1='+html_code;             
-----------------------------------------------------------------                             
                    });
                    html_code += utils.encode('</map>');[/CODE

escludendo le righe che vedi perchè contengono informazioni per me inutili. le righe che vedi
Qualcosa mi sfugge.

 

[criric]

le coordinate sono 2 x e y, servono per posizionare il rettangolo, di che altre coordinate parli ?
se selezioni 2 rettangoli la location comunque sarà sempre una.
ti conviene creare un array all'interno del foreach e mettere la location subito dopo

 

[piero60]

Ciao Ciric,

Come ho scritto all'inizio del post conosco pochissimo javascript, ho dato una occhiata al codice e sembrerebbe che il recupero dei 2 parametri a me necessari ovvero tipo di "shape" e "coordinate" del medesimo sia contemplato in questa porzione di codice dove ci sono 2 linee commentate inserite da chi ha realizzato lo script,
// <area shape="$1" coords="$2" ... />
// <area shape="..." coords="..." ... />

le trovi nella porzione di codice subito sitto.
Se così fosse sarebbe sufficiente recuperare "credo sia un array" in una pagina php o meglio ancore nella stessa pagina html attraverso la quale si fa tutto.
Recuperati poi li inserirò in un form che una volta inviato compie tutte le altre operazioni.

    /**
     * Creates new areas from html-string with <area /> elements
     *
     * @param htmlStr {string}
     * @returns {Array} - array with areas
     */
    Area.createAreasFromHTMLOfMap = function(htmlStr) {
        if (!htmlStr) {
            return false;
        }

        while (true) {
            var findedResult = Area.REGEXP.AREA.exec(htmlStr); // <area shape="$1" coords="$2" ... />
            if (!findedResult) {
                break;
            }   

            var htmlAreaFinded = findedResult[0], // <area shape="..." coords="..." ... />
                type = findedResult[1], // $1
                coords = findedResult[2].split(Area.REGEXP.DELIMETER), // $2
                attributes = {};
            
            Area.ATTRIBUTES_NAMES.forEach(function(item, i) {
                var result = Area.REGEXP[item].exec(htmlAreaFinded);

                if (result) {
                    attributes[name] = result[1];
                }   
            });
            
            coords = coords.map(function(item) {
                return Number(item);
            });

            type = Area.HTML_NAMES_TO_AREA_NAMES[type];

            Area.fromJSON({
                type : type,
                coords : Area.CONSTRUCTORS[type].getCoordsFromHTMLArray(coords),
                attributes : attributes
            });

        }

        return Boolean(htmlAreaFinded);
    };

 

[piero60]

Grazie Criric
Mi sono guardato un po di javascript, ripeto lo conosco quasi nulla ed
ho risolto tutto utilizzando, """ document.getElementById('coord').value=html_code;"""
collocato al posto opportuno recupero nel form attraverso l'ID i valori a me necessari.
Poi ho fatto un pochino di pulizia sullo script togliendo lazzi e frizzi inutili per la mia applicazione ed ho ottenuto l'inserimento nel form dei dati a me necessari.
Recupero poi il form con tutti i dati nella pagina PHP che elabora i dati e li inserisce nel database.
Sembrerebbe funzionare tutto correttamente, adeesso vado avanti con il resto.
Il problema è che la mappatura dell'immagine può essere cambiata anche dall'utente, non è una mappa statica per le mappe statiche ci sono una valanga di programmi che le generano sia in locale che sui server però poi bisogna fare le operazioni di inserimento dati manualmente.
Questo script che ho trovato in rete e di pubblico dominio è semplice ed intuitivo anche per l'utente.
Con le modifiche apportate faccio cancellare automaticamente le coordinate inserite così l'utente non fa casini, inserisce le coordinate e le precedenti vengono cancellate.
E' stata duretta, ma studiando un po di javascript ho risolto parecchi problemi.
Ancora Grazie.