Vizualizare sursă pentru „Design doc Dicționarul vizual”

== Sumar ==

Crearea unei platforme pentru adăugarea imaginilor la definițiile cuvintelor.

== Implementare ==

Pagina de încărcare a imaginilor va fi disponibilă doar pentru utilizatorii autorizați, făcând parte din zona ''admin''. Pentru încărcarea și gestionarea imaginilor voi folosi pluginul ''elFinder 2.x'', un branch al lui nao-pon. Pentru a adăuga/edita o intrare în baza de date în concordanță cu modificările care se fac cu elFinder, voi folosi opțiunea acestuia de ''bind''. elFinderul transmite prin variabilele de tip array ''$cmd'' și ''$result'' acțiunile (''rm, upload, paste''), respectiv căile către fișierele modificate. Astfel, pe baza acestor informații voi putea adăuga o înregistrare, iar mai apoi voi ține actualizate căile pentru imaginile înregistrate în tabel. Tabelul se va numi '''Visual''' și va avea structura:

id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,

(id unic pentru fiecare imagine)

path VARCHAR(255) NOT NULL,

(calea către imagine)

userId INT(11) NOT NULL,

(id-ul utilizatorului tin tabelul '''User''')

revised BOOL DEFAULT 0,

(ține evidența imaginilor tăguite)

createDate INT,

modDate INT.



Imaginile vor fi stocate în folderul ''www/img/visual''. Aici, pot fi create oricâte subfoldere, iar fișierele pot fi salvate sau mutate în oricare dintre ele, căile lor actualizându-se automat.


O altă pagină va avea scopul de a tăgui imaginile, mai exact textul care denumește componentele și subansamblurile reprezentate în imagine, pentru a crea linkuri către lexemele corespunzătoare. Ca unealtă voi folosi ''jCrop'' pentru a selecta zona de tăguire. Va fi un buton pentru crearea unui nou câmp unde se pot trece datele unui tag. Odată completate toate câmpurile (voi verifica cu jQuery dacă au fost introduse toate datele necesare), ele vor fi trimise către un script care va marca imaginea ca fiind tăguită și va crea intrări în tabelul '''Visual Tag''', care va arăta astfel:

id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,

(id-ul tagului)

imageId INT(11),

(id-ul imaginii tăguite din tabelul Visual)

lexemeId INT,

(id-ul lexemului din interiorul tagului)

isMain BOOL,

(stabilește dacă lexemul tăguit reprezintă imaginea)

label VARCHAR(255),

(numele lexemului, pentru a putea fi indexat)

textXCoord INT(11),

textYCoord INT(11),

(coordonatele centrului tagului text)

imgXCoord INT(11),

imgYCoord INT(11),

(coordonatele centrului zonei din imagine reprezentată de tag)

createDate INT,

modDate INT


Pagina se va reîncărca și va fi preluată următoarea imagine din baza de date.

În funcție de coordonatele tagurilor, la afișarea pe pagina de definiție, pe imagine, vor apărea linkuri către lexemele respective.
Pe pagina de definiție va apărea poza, probabil într-un ''div'' încastrat, ca într-un fel de sidebar pe partea dreaptă, sub formă de thumbnail (a cărui dimensiune rămâne de stabilit), iar la click va deschide imaginea la dimensiune maximă. Pentru asta, am putea folosi pluginul ''Lightbox'', întrucât e mic, ușor de folosit, și putem fixa ușor linkurile pe el. Singura problemă ar fi că la o eventuală redimensionare a ferestrei browserului, ''Lightbox'' va potrivi imaginea să încapă în zona disponibilă, deci o va micșora, ceea ce înseamnă că nu mai sunt bune coordonatele memorate în tabel. Totuși, cred că poate fi editat pluginul, astfel încât să păstreze dimensiunea imaginilor constantă, indiferent de dimensiunea ferestrei browserului.

(Autor: Alex Grigoroiu)

[[Categorie:Design docs]]