Realizarea Unui Joc Sah 3d

Informatica

Realizarea Unui Joc Sah 3d

Byadmin ianuarie 1, 2024

I. Introducere

1. Idei inițiale și versiuni anterioare

2. Prezentarea problemei

3. Prezentarea soluției

II. Suport teoretic

1. Baze teoretice privind lucrul cu fișiere audio

2. Tehnologii utilizate și aplicații utilitare

2.1 Tehnologii utilizate

2.1.1 HTML(5)

2.1.2 CSS (3)

2.1.3 ECMAScript (Javascript) – JQuery (2.x)

2.1.4 AJAX (JQuery)

2.1.5 PHP (5.x)

2.2 Aplicații utilitare

III. Prezentarea lucrării

1. Generalități

2. Structura proiectului și criterii de împărțire a acestuia

2.1 Criteriul Front-End/Back-End

2.2 Criteriul funcționalității

3. Implementarea proiectului

3.1 Planul

3.2 Implementarea în sine

IV. Concluzii

V. Bibliografie

Introducere

Idei inițiale și versiuni anterioare

Idea inițială a fost realizarea unui joc șah 3D (FPS – First Person Shooter), în care utilizatorul, inițial vede tabla de șah în ansamblu (toate piesele), iar când trebuie să mute o piesă, dând click pe acesta, camera se mută în așa fel ca și cum utilizatorul ar fi piesa și utilizând controalele standarde de la jocurile FPS (W – mișcare în față, A – mișcare spre stânga, S – mișcare în spate, D – mișcare spre dreapta, mișcarea mouse-ului – mișcarea camerei), acesta face mișcarea dorită.

Ca și o a doua idee a fost realizarea unei aplicații pentru comanda unui sistem multimedia de iluminat a unei case scris în limbajul de programare C#, în programul de dezvoltare a aplicațiilor, numit Visual Studio.

Ca și ultimă soluție am ales a realiza proiectul cel din urmă menționat, însă printr-o altă tehnologie și anume folosind tehnologii web.

Prezentarea problemei

Astfel lucrarea de față are ca scop realizarea unei aplicații pentru comanda unui sistem multimedia de iluminat a unei case. Aceasta a fost realizat folosind tehnologii web precum: HTML (5), CSS (3), ECMAScript (JavaScript), AJAX și PHP 5.x.

Prezentarea soluției

Soluția pe care am ales-o au fost tehnologiile web. Aceasta mă gândeam a fi cea mai bună soluție datorită a două lucruri:

Cunoștințe mult mai multe în domeniul tehnologiilor web, decât în domeniile menționate anterior acestuia

Implementarea acestei aplicații cu ajutorul tehnologiilor web mi s-a părut o idee interesantă și inovativă, într-o oarecare măsură

Suport teoretic

Baze teoretice privind lucrul cu fișiere audio

Un fișier audio este format dintr-o serie de valori discrete, care transformate într-un semnal continuu, ne dau senzația de sunet (figura nr. 2.1). Prin extragerea acestor valori se pot construi hărți audio (waveform – figura nr. 2.2 – sau spectrogram – figura nr. 2.3), care sunt reprezentări grafice ale sunetelor.

Un waveform (figura nr. 2.2) este o reprezentare grafică a amplitudinii sunetului.

Un spectrogram (figura nr. 2.3) este o reprezentare grafică a frecvenței sunetului.

Tehnologii utilizate și aplicații utilitare

Tehnologii utilizate

Ca și tehnologii utilizate, am utilizat tehnologii web și anume: HTML (5), CSS (3), ECMAScript (JavaScript) – JQuery 2.x, AJAX (JQuery) și PHP 5.x.

HTML(5)

HyperText Markup Language (HTML) (figura nr. 2.4) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator).

HTML5 (figura nr. 2.5) este cea de-a cincea revizuire a limbajului de marcare HTML și are ca scop îmbunătățirea limbajului suport pentru cele mai recente apariții multimedia.

Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului.

CSS (3)

Cascading Style Sheets (CSS) (figura nr. 2.6) este un standard pentru formatarea elementelor unui document HTML.

CSS3 (figura nr. 2.7) este o îmbunătățire a standardului CSS care aduce atribute noi și ajută la dezvoltarea noilor concepte în web development.

Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.

ECMAScript (Javascript) – JQuery (2.x)

ECMAScript (figura nr. 2.8) este un limbaj de programare standardizat de ECMA International. Acesta este deseori folosit pentru programare pe parte de client în tehnologiile web și are numeroase implementări precum JavaScript, JScript și ActionScript.

JavaScript (figura nr. 2.9) este un limbaj de programare orientat pe obiecte bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul JavaScript din aceste pagini fiind rulat de către browser (navigator).

În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură.

JQuery (figura nr. 2.10) este o librărie JavaScript creat pentru a ușura programarea pe parte de client, pentru a ușura manipularea documentelor HTML, manipularea DOM-ului unei pagini web.

JQuery 2.x este o versiune a JQuery care nu mai suportă browser-ele Internet Explorer 6, 7 și 8, astfel devenind mai mic și mai rapid.

AJAX (JQuery)

Asynchronous JavaScript and XML (AJAX) (figura nr. 2.11) este o tehnică de programare pentru crearea de aplicații web interactive.

JQuery are mai multe metode (funcții) pentru AJAX.

Intenția AJAX este să facă paginile web să devină mai rapide și deci mai acceptate, prin schimbul în fundal al unor cantități mici de date cu serverul, astfel încât să nu fie nevoie ca pagina să fie reîncărcată la fiecare acțiune a utilizatorului. Aceasta are ca scop creșterea interactivității, vitezei și ușurinței în utilizare a aplicațiilor web.

PHP (5.x)

PHP (figura nr. 2.12) este un limbaj de programare pe parte de server. Inițial numele acestuia venea de la Personal Home Page, însă acum vine de la PHP: Hypertext Preprocessor, care se spune a fi un backronym recursiv.

PHP 5.x este o versiune mai nouă a PHP care aduce îmbunătățiri pronunțate asupra orientării obiectuale al acestui limbaj de programare.

Aplicații utilitare

Pentru a putea realiza aplicația, în unele cazuri am avut nevoie a folosi aplicații gata implementate.

O astfel de aplicație este waveform.exe, care poate converti o multitudine de extensii de fișiere audio în fișiere imagine, reprezentând waveform-ul sunetelor.

Pentru a putea realiza aplicația, aveam nevoie și de a putea simula un server local. Pentru acest lucru am folosit programul XAMPP 3.2.1 (figura nr. 2.13) cu Apache 2.4 (figura nr. 2.14) și PHP 5.5.6.

Prezentarea lucrării

Generalități

Lucrarea de față are ca scop demonstrarea folosirii tehnologiilor web ca și bază pentru programe locale de dimensiuni medii, respectiv pentru folosirea acestuia ca și serviciu web, în versiunile ulterioare.

Aplicația în sine este de fapt o pagină de internet locală.

Structura proiectului și criterii de împărțire a acestuia

Proiectul de față poate fi împărțit în mai multe părți, după mai multe criterii.

Una din criterii este criteriul Front-End/Back-End, iar un alt criteriu este însuși după funcționalitatea aplicației. Astfel după cel de-al doilea criteriu, aplicația se împarte în două părți:

Încărcare și conversie

Personalizare și control

Criteriul Front-End/Back-End

Acest criteriu împarte aplicația în funcție de ceea ce vede și cum interacționează utilizatorul cu aceasta (Front-End) și funcționalitatea acesteia (Back-End).

Partea de Front-End al unei aplicații se referă la partea viziuală a unei aplicații, respectiv la interacțiunea utilizatorului cu aplicația în sine. Astfel pe parte de Front-End am folosit tehnologii precum: HTML (5), CSS (3), ECMAScript (Javascript) – Jquery 2.x și Ajax (Jquery).

Partea de Back-End al unei aplcații se referă la toate funcționalitățile care sunt implementate în aceasta. Astfel pe parte de Back-End am folosit PHP 5.x.

Criteriul funcționalității

Acest criteriu împarte aplicația în două părți:

Încărcare și conversie

Personalizare și control

Prima funcționalitate a aplicației este aceea de încărcare a unui fișier audio, de extensie mp3 sau wav, și conversia acestuia într-un fișier imagine, de extensie png. Acest lucru se realizează printr-o aplicație utilitară, numită waveform.exe, care poate converti o multitudine de extensii de fișiere audio în fișier imagine.

Cea de-a doua funcționalitate a aplicației este aceea de personalizare a aprinderii și stingerii luminițelor și de control al acestora, în funcție de personalizarea făcută de utilizator.

Implementarea proiectului

Planul

Inițial când am început să planific acest proiect, vroiam să realizez o platformă cât mai user friendly și cât mai ușor de înțeles, pentru crearea unor spectacole de lumini personalizate. Pentru a realiza acest lucru a fost important să am o interfață cu utilizatorul pe bază de ferestre, cu caracteristici familiare majorității utilizatorilor. Din cauza opacității aplicației, am vrut să creez un desktop cu o imagine, care să sublinieze acest fapt.

Pentru a ține interfața cât mai user friendly, o bară de titlu cu opțiunile de minimizare și închidere a ferestrei, a fost esențială. Altă caracteristică comună ce am vrut să adaug a fost o bară de meniu cu opțiuni precum: File, Edit, Options și Help, opțiuni care permit utilizatorului navigarea ușoară în aplicație. Utilizatorii ar putea crea un fișier nou, să modifice fișierul curent, să copieze porțiuni din personalizarea făcută de ei și să le lipească în alte locuri, să revoca errori și chiar să șteargă întregul spațiu de lucru, în caz de nevoie. A fost adăugată și o opțiune de setări pentru ca utilizatorul să își poată seta aplicația după propriile preferințe. De asemenea am vrut să adaug o secțiune de Help pentru a oferi asistență în legătură cu folosirea de bază a programului.

O bară de instrumente cu butoane de redimensionare permițând utilizatorului să poată schimba rata de mărire a imaginii și gridului, pentru a face programul mult mai adaptabil pentru toate persoanele.

Imaginea waveform ar fi amplasat sub bara de instrumente cu gridul chiar de desubtul acestuia.

După părerea mea gridul este cea mai bună reprezentare a stării luminițelor în funcție de timp. Cred că acest lucru ar putea fi realizat creând un grid de 16 rânduri, fiecare rând reprezentând o serie de luminițe. Am plănuit ca fiecare câmp al grid-ului să reprezinte 100 de milisecunde. O dată dat click stânga pe oricare din câmpuri, acesta și-ar schimba culoarea, acest fapt semnificând starea activă a luminițelor. Astfel utilizatorul ar putea primi feedback vizual la ceea ce a programat până acuma. Am vrut să fiu sigur că aplicația poate fi adaptată la o varietate de fisiere audio. Pentru a realiza acest fapt am decis ca și numărul de coloane ale grid-ului să fie variabilă în funcție de lungimea melodiei.

Ca și încheiere vroiam ca pe pagină să apară un footer conținând date de copyright și ca și acesta să poată fi ascuns.

Când am plănuit cum aș pune imaginea waveform vroiam să fiu sigur ca și lungimea imaginii să fie egală cu lungimea aplicației și înălțimea să rămână fixă. Am ales să folosesc tag-ul <img>, pentru că lungimea acestuia este cel mai ușor de manipulat.

Trebuia să găsesc o aplicație utilitară care să convertească fișiere audio în orice fișier imagine pe care să o pot folosi. Vroiam ca imaginea să fie încărcată dinamic în aplicație.

Sunt obișnuit să lucrez cu PHP așa că deci am vrut ca și aplicația să poată fi executat prin commanda PHP exec, folosing argumente dinamice. Știam exact cum vroiam imaginea să apară și argumente bine definite ca acesta să poată fi realizat.

Vroiam ca utilizatorul să aibă posibilitatea de a încărca fișiere pe server printr-un submeniu upload, pentru ca acesta să poată folosi orice fișier audio încărcat de acesta sau alți utilizatori.

Inițial vroiam să folosesc numai JQuery pentru a face verificarea extensiei și a dimensiunii fișierului care este pe parcurs de a fi încărcat. Nu vroiam ca și acesta să depășească dimensiunea de 10MB, pentru a nu supraîncărca server-ul. Vroiam să folosesc o extensie bine cunoscută, așa că am decis să folosesc fișiere audio de extensie mp3 sau wave.
PHP exec, folosing argumente dinamice. Știam exact cum vroiam imaginea să apară și argumente bine definite ca acesta să poată fi realizat.

Vroiam ca utilizatorul să aibă posibilitatea de a încărca fișiere pe server printr-un submeniu upload, pentru ca acesta să poată folosi orice fișier audio încărcat de acesta sau alți utilizatori.

Inițial vroiam să folosesc numai JQuery pentru a face verificarea extensiei și a dimensiunii fișierului care este pe parcurs de a fi încărcat. Nu vroiam ca și acesta să depășească dimensiunea de 10MB, pentru a nu supraîncărca server-ul. Vroiam să folosesc o extensie bine cunoscută, așa că am decis să folosesc fișiere audio de extensie mp3 sau wave.

Presupuneam că folosind tag-urile <div> pentru a realiza câmpurile grid-ului, îmi va permite manipularea mai ușoară a acestora, în ceea ce privește dimensiunea și culoarea.

Mi-am imaginat o linie de progres verticală, neagră, de un pixel, care avansează împreună cu redarea melodiei. Acesta ar oferi un alt element de feedback vizual utilizatorului.

Îmi imaginam un panou de control, pe bara de instrumente, cu elemente de redare, pauză, oprire, progresia melodiei, controlul volumului și afișarea lungimii melodiei. Acest panou de control ar fi posibil folosind tag-ul <audio> al HTML5.

Pentru ca utilizatorul să își poată personaliza chiar și aplicația în sine, aș fi vrut să realizez o opțiune pentru schimbarea opacității și chiar a temei de culoare a ferestrelor, desigur dându-i posibilitatea ca să poată reveni și la opacitatea și tema de culoare inițiale.

Stările câmpurilor din grid ar fi salvate ca și JSON și trimise la server. Server-ul ar procesa acest JSON și ar trimite semnalele corespunzătoare hardware-ului.

Utilizatorului i-ar trebui abilitatea de a selecta și deschide un fișier audio, împreună cu imaginea waveform corespunzătoare. Acest fapt ar fi realizabil folosind o fereastră conținând o listă de fișiere încărcate și convertite anterior. Schimbarea fișierului audio și imaginii deja încărcate ar fi posibil schimbând sursele tag-urilor <audio>, respectiv <img>.

Odată ce grid-ul este completat, utilizatorul ar avea posibilitatea de a deschide o fereastră de simulare. Am plănuit ca și această fereastră de simulare să aibă o imagine de fundal a unei case și 16 straturi adiționale, fiecare reprezentând secțiuni diferite ale luminițelor. Când utilizatorul decide a porni simulatorul, cel din urmă ar utiliza grid-ul, atribuind fiecărui rând din acesta unei secțiuni ale luminițelor. Simularea atunci ar prezenta întregul spectacol de lumini luând în considerare input-ul utilizatorului.

După ce simularea s-a terminat și utilizatorul este mulțumit cum a programat spectacolul ar avea abiliatea de a salva proiectul pentru ca acesta să fie încărcat ulterior. Această abilitate ar fi de folos pentru ca utilizatorul să nu trebuiască tot timpul să refacă tot program spectacolului la fiecare reîncărcare a paginii sau redeschidere a aplicației. Aș introduce acest lucru în meniul File ca și submeniurile Save și Load. Salvarea ar fi posibilă fie folosind cookie-uri sau local session-urile oferite de HTML5.

Așa am simțit că implementând acest plan aș reuși să realizez o aplicției atât user friendly, cât și code efficient.

Implementarea în sine

Când am început implementarea în sine, am realizat că pe când unele părți ale planului meu erau posibile să fie implementate, altele trebuiau să fie adaptate, iar altele nici nu erau realizabile.

Primul lucru cu care am început a fost proiectarea interfeței utilizator. Am realizat acest lucru, precum am și plănuit, folosind HTML(5), CSS(3) și JavaScript (JQuery).

Am folosit foarte mult <div>urile pentru crearea ferestrelor și a ceea ce se află în ele. Astfel am folosit <div>uri pentru a realiza: bara de titlu, bara de meniu, bara de instrumente și însuși conținutul ferestrelor. Fiecarea bara de titlu conține un <div> cu însuși titlul în acesta și două alte <div>uri reprezentând cele două butoane (minimizare și închidere). Următoarea este bara de meniu care are 4 meniuri separate, și anume: File, Edit, Options și Help. Și acestea sunt tot <div>uri fiecare având câte un container care conțin alte <div>uri reprezentând fiecare element al submeniului. Ținând cont de cele spuse, avem următoarea structură de meniuri:

File (figura nr. 3.2)

New

Exit

Edit (figura nr. 3.3)

Undo

Redo

Cut

Copy

Paste

Clear All

Options (figura nr. 3.4)

Settings

Help (figura nr. 3.5)

About

După acesta am scris codul pentru bara de instrumente, care este tot un <div> și care conține alte trei, reprezentând 3 butoane de redimensionare (Mărire, Revenire la inițial și Micșorare) (figura nr. 3.6).

Ultimul <div> pe care îl avem în fereastră este chiar acela de conținut, care este împărțit în două: <div>ul container pentru imaginea waveform și cel pentru grid. Pe lângă acestea mai avem și un footer (figura nr. 3.7) unde putem găsi informații despre drepturil de autor și un buton de <div> cu care schimbăm display-ul pentru footer din none în block și vice versa.

figura 3.7 – Footer

Toate cele de sus au și o stilizare, stilizare pe care am scris-o în CSS(3). Pentru ferestre am făcut bordurile un pic rotunjite, cu fundal translucid, albastru deschis. Apoi i-am dat o umbră gri, vagă și o poziție fixă care îmi permite să mut fereastra, din cod. Pentru butoanele de pe bara de titlu și cele de pe bara de instrumente, le-am făcut bordurile în totalitate rotunjite, cu un fundal în totalitate opac, albastru și o culoare de font alb. Pentru a avea un feedback vizual, am făcut ca pentru când utilizatorul duce mouse-ul peste un buton, acesta își schimbă culoarea într-un albastru puțin mai închis. Acest lucru îi afirmă utilizatorului că aplicația încă și în momentul de față funcționează coerent și faptul că butonul peste care a fost dus mouse-ul este activ și poate fi folosit. Am făcut același lucru cu meniurile și submeniurile, dar în loc de a le schimba culoarea în albastru, aceștia își schimbă culoarea în gri închis. Acesta a fost o ajustare pe care trebuia să o fac din cauza faptului că inițial ambele bări de meniu și instrumente au nuanțe de gri diferite. Am decis să fac bara de titlu translucid, de culoare albastru deschis. Footer-ul este în partea de jos a paginii, tot timpul vizibil. I-am dat culoarea să fie un gradient de albastru devenind tot mai deschis dinspre stânga înspre dreapta. Când utilizatorul duce mouse-ul peste footer, acesta devine în totalitate opac și își crește înălțimea, dând astfel senzația ce se mișcă în sus. Am mai adăugat un buton cu fundal opac pentru ca footer-ul să poată fi ascuns, dacă vrea cineva. Este un buton opac alb cu font-ul negru. Când utilizatorul duce mouse-ul peste buton, acesta își schimbă culoarea de fundal în negru și acela de font în alb. Acesta este tot timpul vizibil și în partea de jos stânga a paginii.

După ce am terminat cu bazele în ceea ce privește stilizarea, am început să lucrez să fac pagina dinamică. Am reușit să realizez acest fapt folosind JavaScript pur și JQuery. Primul pas a fost să realizez funcționalitatea butoanelor de închidere. Acest lucru s-a realizat prin simpla setare a display-ului ferestrei corespunzătoare sau a footer-ului pe none. Următoarea provocare a fost deschiderea ferestrei alese de către utilizator. Am realizat acest fapt prin setarea display-ului ferestrelor pe block. Următoarea țintă a fost realizarea unu meniu dropdown în bara de meniu. Și acest lucru s-a realizat ușor setând diplay-ul containerului corespinzător pe block.

Următorul pas a fost să încep programarea detaliilor. Am început acest lucru prin adăugarea imaginii în containerul acestuia din fereastra. Imaginea a fost adăugată între bara de instrumente și containerul grid-ului, folosind tag-ul <img>. Am realizat modificări pe niște mici detalii și am început a mă gândi cum aș putea converti fișierele audio încarcate de utilizatori.

Una dintre cele mai mari provocări a fost găsirea unei aplicații capabile de convertirea mai multor extensii de fișiere audio într-o imagine waveform care să poată fi folosită pe pagină. După nenumărate căutări și întrebări de la alții, am reușit să găsesc o aplicație de care mă puteam folosi. Am decis să folosesc o aplicație numită waveform.exe. Aceasta este o aplicație linie de comandă, pentru care trebuie să îi trimiți informații despre cum vrei fișierul poză să arate, ca și argumente. Programatorul trebuie sa specifice care fișier vrea să fie convertit, preferințele de culoare pentru interiorul și exteriorul waveform-ului, lungimea și înălțimea imaginii waveform și fișierul destinație. Găsind această aplicație am reușit să fac un pas important în proiectul meu. Inițial am vrut ca și lungimea imaginii create de utilizator să fie relativă de durata fișierului audio pe care acesta îl folosește. Experimentând cu codul mi-am dat seama că este mult prea greu să procedez cum mi-am plănuit. Timpul de conversie al fișierului audio în imagine lua mult prea mult timp cauzând probleme de performanță. După aceste experimente mi-am dat seama că cel mai bun mod de a proceda este acela de a avea imagini cu lungime fixă. La fel am decis ca să convertesc fișierele audio în fișier imagine cu extensia png, deoarece acesta este extensia cea mai mult folosită în web development și pentru că acesta ar face aplicația și mai user friendly. Comanda pentru aplicația waveform.exe a evoluat a arăta în felul următor:

waveform –width 1366 –height 480 –color-bg 00000000 –color-center 00aaffff –color-outer 0000ffff "uploads/example_track.mp3" "uploads/destination_waveform_image.png"

După cum aceasta este o aplicație linie de comandă, trebuia să folosesc metoda exec() al PHP-ului. Această metodă daă posibilitatea programatorului ca să dea comenzi în linie de comandă, calculatorului server, direct din PHP. Astfel mi-a dat posibilitatea ca să folosesc aplicația pentru a converti fișierele audio.

Pentru a fi capabil să convertim un fișier audio, utilizatorul, prima dată, trebuie să încarce acest fișier pe server. Pentru acest lucru am vrut să folosesc un submeniu, care ar fi trebuit să deschidă fereastra de upload a browser-ului. De asemenea am vrut să folosesc AJAX, pentru ca pagina princpială să nu trebuiască să se reîmprostpăteze pentru o simplă încărcare de fișier. Acest lucru însă din păcate nu a mers după cum mi-am plănuit. AJAX nu permite transmitere de date de tip fișier. Pentru a combate această problemă, am folosit un vechi truc, pentru a nu trebui ca pagina principală să trebuiască să fie reîmprospătată, și anume folosirea unui <iframe>. Acesta necesită crearea unei alte pagini, însă pagina principală rămâne intactă. Am rezolvat această problemă prin a crea elementul de Upload în meniul File, care deschide o fereastră (figura nr. 3.9) cu conținutul un <iframe>.

Pentru acesta am realizat o altă pagină care conține un formular de încărcare de fișiere și câteva example de imagini create cu aplicația waveform.exe. Astfel puteam lăsa pagina din <iframe> să se reîmprospăteze (figura nr. 3.10) după ce fișierul audio a fost încărcat. Între timp pagina principală nu ar fi suferit nicio modificare. Pentru a încărca fișierele am folosit metoda move_uploaded_file() din PHP.

figura 3.10 – Feedback după încărcare

Acuma că am fost mai aproape de a avea o aplicație funcțională, am fost gata să experimentez pe ea, furnizându-i fișiere cu extensiile pe care le-am ales. Aceste extensii puteau fi fie mp3 saw wave. Acesta însemna că trebuia să fac verificări de extensii. Inițial aceste verificări ar fi fost făcute doar în JavaScript și JQuery (figura nr. 3.11). După anumite considerente de securitate, am decis ca să fac această verificare și în PHP. Pe lâmgă verificarea extensiei, am mai observat că nu pot încărca fișiere mai mari de o anumită limit. După o perioadă de căutare, am găsit că pot schimba acest lucru în fișierul php.ini. Schimbând un rând în fișierul respectiv, mi-a dat posibilitatea de a încărca fișiere de până la 8MB. Gândindu-mă la problemele de securitat, am decis să fac și verificarea de dimensiune a fișierului încărcat. Am decis să fac verificarea dimensiunii și pe parte de client (JQuery – figura nr. 3.12), cât și pe parte de server (PHP). Astfel am reușit să ocolim multe dintre problemele de securitate și am reușit să îmcărcăm un fișier de mărime decentă pe server, cu extesnia bună.

După ce am terminat cu partea de verificare trebuia să am grijă de ceea cu ce utilizatorul o să lucreze cel mai mult și anume grid-ul. Inițial am creat grid-ul ca foarte multe <div>uri puse una lângă alta, formând astfel un grid de 16 rânduri a câte 1366 de coloane. Acestea aveau o bordură neagră, de un pixel. Trebuia să folosesc 1366 de coloane, pentru că imaginile create au fost create de lungimea de 1366 pixeli. Am reușit să creez această structură foarte ușor, folosind doar două bucle for(). După manipularea acestei structuri, trebuia să am grijă ca și utilizatorul să primească un feedback vizual în ceea ce privește setările stărilor luminițelor. Am reușit să rezolv această problemă prin simpla schimbare a fundalului câmpului pe care s-a dat click în albastru deschis.

Până în momentul de față totul părea a funcționa după cum am plănuit, deci am trecut la programarea butoanelor de redimensionare (figura nr. 3.13). Dând click pe oricare dintre butoanele de redimensionare, trebuia să schimb dimensiunea fiecărui câmp. Pentru butoanele Zoom In și Zoom out, trebuia să adaug sau să scad un pixel la/din fiecare <div>. La butonul de Zoom to default, trebuia să schimb interiorul fiecărui <div> să aibă un pixel.

După ce am rulat câteva teste și am reîmprospătat pagina, iar mai apoi am încercat să redimensionez spațiul de lucru, mi-am dat seama că lucrul cu atât de multe <div>uri cauzează probleme la performanță. Am început să mă uit la alte soluții posibile. Una dintre soluțiile care să rezolve această problemă, am primit-o de la cineva și anume folosind <canvas>ul oferit de HTML5. Această soluție a funcționat foarte bine în aplicația mea. Deci am început să schimb grid-ul creat de <div>uri într-un canvas cu patrulatere pe ea. Am folosit aceeași structură, dar folosind patrulatere cu borduri gri de un pixel puse unul lângă altul. Astfel timpul de încărcare a scăzut drastic de la câteva secunde la la milisecunde și problema a fost rezolvată. A trebuit să implementez aceeași feedback vizual pe care l-am avut și la grid-ul făcut din <div>uri. Așa am și procedat: când se dă click pe un câmp, se ia poziția mouse-ului și se redesenează tot <canvas>-ul, însă dându-i patrulaterului din poziția mouse-ului un fill albastru deschis.

Acesta fiind gata, am vrut să implementez o bară de progres, pentru ca utlilzatorul să știe unde este melodia. Încercând să realizez această bară de proces, mi-am dat seama că imaginea waveform pe care am adăugat-o cu tag-ul <img> cauza mici probleme de performanță și ea. Pe lângă problemele de performanță mi-am dat seama că ar fi o probleme și cu folosirea a 2 feluri de display-uri. Am început să lucrez pe acesta. A trebuit să mă documentez online pentru a putea ajusta pentru ce aveam eu nevoie, însă am reușit în final. Am observat că dacă pun în fundalul imaginii un alt grid înalt, acesta ajută utilizatorul să determine unde să îi dea fill la câmpuri. Aceasta mi-a dat șansa de a implementa un grid simplu de un rândîn fundalul imaginii waveform. Pentru ca grid-urile săfie vizibile, imaginea trebuia să fie făcută de trei ori cât dimensiunea originală, din cauza faptului că fiecare câmp al gridului are trei pixeli (2 pixeli bordură și un pixel fill).

Cu toate acestea terminate am putut merge înapoi să lucrez pe bara de progres. Inițial bara de progres era o linie verticală, neagră, de un pixel. Văzând cum arată de fapt în aplicație, am decis să fac linia mai groasă, de trei pixeli. Această schimbare trebuia să fie făcută din cauza bordurilor câmpurilor grid-urilor. Lungimea bării de progres trebuia să fie cel puțin cât înălțimea imaginii waveform sau a grid-urilor, care sunt defapt aproximativ de aceeași înălțime, și anume de 480 de pixeli.

Acuma că am avansat cu cum arată bara de progres, a trebuit să îl sincronizez cu progresia fișierului audio. După multe încercări eșuate, am reușit să implementez mișcarea bării de progres, folosind o funcție JavaScript care returnează poziția actuală a progresului unui fișier audio. Pentru acesta aveam nevoie si de ceva calcule.

Următorul obiectiv era să optimizez redimensionările pentru canvas. Cum că nu mai foloseam <div>uri, trebuia să rescriu tot codul pentru redimensionarea spațiului de lucru. Când trebuia să redimensionez, trebuia să schimb mărimea întregului canvas adăugând sau scăzând 1366 de pixeli. Acesta trebuia făcut din cauza fiecărui pixel adaugat la fiecare câmp al grid-ului. Din cauza limitărilor browser-ului am o limită de a putea mări imaginea. Această limită din păcate nu este același la fiecare browser.

Cu redimensionarea optimizată pentru canvas, puteam începe lucrul pe un panou de control pentru redarea muzicii total nouă. Inițial au fost trei butoane cu care se putea reda, pune pe pauză sau opri fișierul audio, în interiorul aplicației. Datorită unor limitări de programare, butonul de oprire a muzicii nu putea fi realizat. În locul celorlalte două butoane, m-am gândit că ar fi fost mai bine dacă am un singur buton (figura nr. 3.15) care își schimbă starea în funcție de starea de redare a fișierului audio.

Din fericire audio-ul lui HTML5 permite manipularea redării fișierelor audio direct din JavaScript. Folosind metodele play() și pause() am reușit să setez starea redării melodiei. Pe lângă acestea tebuia să îi las opțiunea utilizatorului de a putea sări în fișierul audio oriunde vor ei. Pentru acest lucru am realizat un slider (figura nr. 3.16) care controlează direct progresia fișierului audio.

Acesta realizat, următorul meu țel a fost implementarea posibilității utilizatorului de a schimba volumul (figura nr. 3.17). Am reușit să realizez chiar și acest fapt tot prin ideea pe care am folosit-o la slider-ul de progres. Am creat un slider care controla direct volumul tag-ului <audio> al lui HTML5.

Ultima parte al panoului de control al readării fișierelor audio a fost implementarea unui display care arată durata totală a melodiei.

Fără să mai am nimic altceva de implementat la panoul de control audio, am început să încarc fereastra de setări (figura nr. 3.18). Gândindu-mă la ce aș putea lăsa utilizatorilor să personalizeze pe aplicație, am venit cu câteva idea.

Prima idee care mi-a venit în minte a fost ca și utilizatorul să fie capabil să schimbe opacitatea ferestrelor. Acest lucru l-am și realizat prin JQuery, cum că acesta mi-a dat posibilitatea realizării schimbării opțiunii în timp real. Uitându-se la evenimentul onchange pe un slider, aplicația le dă stilizării de opacitate a ferestrelor valoarea citită de pe slider, împărțit cu 100. Împărțirea este necesară datorită faptului că, în CSS, opacitatea poate lua valori de la 0 (figura nr. 3.19) la 1 (figura nr. 3.20), acceptând numere cu virgulă, pe când un slider returnează doar numere întregi. Acest slider merge de la 0 la 100, deci împărțirea lui la 100 dă exact formatul de număr pe care îl căutăm. De asemenea am vrut să îi dau posibilitatea utilizatorului să poată reveni la setările inițiale. Pentru a face acest lucru posibil am decis să adaug un buton care anulează toate modificările făcute de utilizator asupra opacității și setează opacitatea ferestrelor la cea inițială, și anume 0,85.

Cea de-a doua idee la care m-am gândit a fost acela de a permite utilizatorului să își aleagă o temă de culoare, dintr-o varietate de teme. Pentru acesta am folosit <select>ul din HTML și JQuery pentru a seta. Lista de teme a fost făcută de mine. Am vrut ca și acesta să se poată schimba în timp real, exact ca și la opacitate, așa că am aplicat aceleași principii. Am folosit evenimentul on change din JQuery pentru a detecta dacă utilizatorul schimbă elementul curent selectat din lista de teme de culoare. Când elementul selectat se schimbă, culorile ferestrelor se schimbă în funcție de tema aleasă de utilizator. Utilizatorul poate să aleagă dintre următoarele teme:

White (figura nr. 3.21)

figura 3.21 – Alb

Gray (figura nr. 3.22)

figura 3.22 – Gri

Black (figura nr. 3.23)

figura 3.23 – Negru

Red (figura nr. 3.24)

figura 3.24 – Roșu

Dark red (figura nr. 3.25)

figura 3.25 – Roșu închis

Green (figura nr. 3.26)

figura 3.26 – Verde

Light green (figura nr. 3.27)

figura 3.27 – Verde deschis

Dark green (figura nr. 3.28)

figura 3.28 – Verde închis

Blue (figura nr. 3.29)

figura 3.29 – Albastru

Light blue (figura nr. 3.30)

figura 3.30 – Albastru deschis

Dark blue (figura nr. 3.31)

figura 3.31 – Albastru închis

Yellow (figura nr. 3.32)

figura 3.32 – Galben

Light yellow (figura nr. 3.33)

figura 3.33 – Galben deschis

Pink (figura nr. 3.34)

figura 3.34 – Pink

Deoarece tema de culoare inițială este una mai specială, cu mai multe culori, a trebuit să adaug opțiunea pentru utilizator de a reveni la aceasta. Am făcut această opțiune valabilă adăugând un buton, ca și la opacitate.

După implementarea setărilor utilizator am început a lucra la salvarea stărilor câmpurilor din grid. Inițial mă gândeam a salva întregul grid într-un JSON, care să fie trimis la server pentru a fi procesat și după procesare să fie trimis mai departe la luminițe. După ce m-am gândit un pic, am decis să salvez stările într-un array de array-uri. Lucrul cu array-urile este relativ simplă. Salvarea stării câmpurilor se face deoarece la redimensionare, de fapt trebuie sa spunem canvas-ului, cărui patrulater i-a fost colorat fundalul. Astfel nu avem senzația că tot canvas-ul trebuie să fie reîncărcat, deși asta se întâmplă de fapt. Fiecare câmp al array-ului reprezintă un câmp al grid-ului. Când utilizatorul dă click pe un câmp al grid-ului, câmpul corespunzător din array devine 1. 1 îi spune aplicației, când datele sunt pe cale de a fi încărcate, că patrulaterul corespunzător acelui câmp din array are fundalul colorat albastru deschis, pe când 0 îi spune exact invers.

Am reușit să trec de partea de redimensionare a spațiului de lucru și de multe alte caracteristici esențiale ale aplicației sunt gata implementate. Cu toate acestea încă îmi mai lipsea una dintre capabilitățile cheie, și anume acela de a încărca un fișier audio cu imaginea waveform corespunzătoare, în spațiul de lucru. Am petrecut mult timp documentându-mă și încercând să rezolv această problemă. După un timp mi-am dat seama că cea mai bună soluție este acela de a folosi o altă fereastră, care să conțină o listă cu fișierele audio și imaginile waveform corespunzătoare acestora, valabile pe server (figura nr. 3.35 și figura nr. 3.36).

Figure 3.36 – Fereastra de încărcare a fișierelor pe spațiul de lucru 2

Acest lucru se putea rezolva ușor doar cu PHP, cu o buclă foreach() care să ia toate fișierele pe rând. Aceasta soluție însă prezenta a problem minoră. Problema este acela când utilizatorul încarcă un fișier pe server și imediat după acesta deschide fereastra cu lista fișierelor. Nu o să vadă fișierul audio pe care l-a încărcat până când pagina nu este reîncărcată. Pentru a rezolva această problemă a trebuit să folosesc AJAX. La fiecare deschidere a ferestrei cu lista de fișiere audio încărcate pe server și convertite, trimit a cerere cu AJAX la server, primind ca răspuns lista de fișiere audio de pe server. Cum că fereastra cu lista se deschide după încărcarea fișierului audio pe server, lista va fi tot timpul actualizat, fără ca utilizatorul să trebuiască să reîmprospăteze pagina. Acuma că aveam lista actualizată trebuia să dau abilitatea utilizatorului ca să poată încărca oricare dintre fișierele audio din listă, în spațiul de lucru. Am reușit să rezolv și această problemă tot cu AJAX. Când utilizatorul dă click pe o imagine din listă, aplicația trimite o cerere AJAX cu numele acestui fișier. Ca și răspuns sunt trimise înapoi fișierul audio și imaginea. Aceste fișiere sunt încărcate în fundal pe canvas și ca și sursă pentru tag-ul <audio> (figura nr. 3.37). Utilizatorul poate observa și display-ul cu durata fișierului audio.

figura 3.37 – Fișier audio și imagine încărcate pe spațiul de lucru

Acuma că aveam chiar și încărcarea fișierului în spațiul de lucru, trebuia să mă gândesc la un feedback vizual, în ceea ce privește cum ar trebui luminițele să funcționeze, cum că nu am implementat partea hardware și nu am suportul fizic necesar pentru a putea demonstra funcționalitatea aplicației. Pentru această problemă am implementat o altă fereastră (figura nr. 3.38) cu imaginea unei case ca și poză de fundal. La acest fundal am ai adăugat 16 imagini, straturi, una peste alta, fiecare imagine reprezentând o secțiune diferită de luminițe prezente pe casă. Pentru ca fereastra de simulare să ruleze, utilizatorul trebuie să dea click pe butonul de play sau cel de simulate (figura nr. 3.39) din bara de instrumente, chiar după butoanele de redimensionare. Dacă utilizatorul dă click pe butonul play, apare fereastra de simulare și, în funcție de setările făcute de acesta, salvate în array, în fereastră va vedea o demonstrație de cum ar trebui să funcționeze și cu luminițe adevărate. Când se dă click pe butonul pause, demonstrația se oprește și se închide fereastra de simulare automat. Pentru simulare am folosit JQuery pentru a arăta și a ascunde imaginile care simulează luminițele, în funcție de ceea ce este salvat în array.

Figure 3.38 – Fereastra de simulare

Cum am terminat cu partea de simulare am început să lucrez mai mult pe detalii. Astfel am început să lucrez pe sincronizarea muzicii cu spectacolul de lumini. Chiar și până în momentul de față această parte este în curs de dezvoltare.

Concluzii

Proiectul prezentat reprezintă o aplicație pentru comanda unui sistem multimedia de iluminat a unei case. Proiectul este de fapt un site web local. Acesta este realizat folosind tehnologii web precum: HTML (5), CSS (3), ECMAScript (JavaScript) – JQuery 2.x, AJAX și PHP 5.x.

Aplicația poate fi împărțită în câte două părți după două criterii.

Criteriul Front-End/Back-End

Criteriul funcționalității

Îmbunătățiri ulterioare vor avea loc, precum:

Abilitatea de a crea proiect nou fără a trebui pagina să fie reîmprospătată

Abilitatea de a salva și încărca proiecte

Abilitatea de a putea edita grid-ul cu elementele din meniul Edit

Adăugarea mai multor opțiuni de personalizare în fereastra de setări

Abilitatea de a selecta multiple câmpuri pentru ușurarea completării grid-ului

Am ales să folosesc tehnologii web pentru realizarea acestui proiect datorită a două lucruri:

Cunoștințe mult mai multe în domeniul tehnologiilor web, decât în alte domeniile

Implementarea acestei aplicații cu ajutorul tehnologiilor web mi s-a părut o idee interesantă și inovativă, într-o oarecare măsură

Bibliografie

http://ro.wikipedia.org/wiki/HyperText_Markup_Language

http://ro.wikipedia.org/wiki/HTML5

http://ro.wikipedia.org/wiki/Cascading_Style_Sheets

http://ro.wikipedia.org/wiki/JavaScript

http://ro.wikipedia.org/wiki/Ajax_(programare)

http://www.marplo.net/javascript/jquery-ajax-load-js

http://en.wikipedia.org/wiki/ECMAScript

http://en.wikipedia.org/wiki/JQuery

jQuery 2.0 Released

http://en.wikipedia.org/wiki/JQuery

http://en.wikipedia.org/wiki/Ajax_(programming)

http://ro.wikipedia.org/wiki/PHP

http://en.wikipedia.org/wiki/PHP

http://en.wikipedia.org/wiki/Sampling_(signal_processing)

http://help.izotope.com/docs/rx1/pages/spectrogram.htm

http://www.mrbup.com/wp-content/uploads/2009/04/validhtmlandxhtml.jpg

http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/200px-

http://www.autocaresramondelpino.com/img/css.png

http://it.jirku.sk/wp-content/uploads/2013/12/ecma_logomini.jpg

http://3.bp.blogspot.com/-PTty3CfTGnA/TpZOEjTQ_WI/AAAAAAAAAeo/KeKt_D5X2xo/s1600/js.jpg

http://colorlib.com/wp/wp-content/uploads/2014/03/JQuery_logo.png

http://www.techhum.com/wp-content/uploads/2012/10/ajax-logo1.jpg

http://www.firesellinfotech.co.in/wp-content/uploads/2013/10/php-logo-large.png

http://worldeweb.com/wp-content/uploads/2014/05/xampp-logo.jpg

http://clasense4.files.wordpress.com/2014/01/apache-logo.png

http://www1.icsi.berkeley.edu/Speech/mr/images/headset_spectrogram.gif

http://en.wikipedia.org/wiki/Sampling_(signal_processing)#mediaviewer/File:Signal_Sampling.png

http://studentocratia.files.wordpress.com/2013/04/250560_136651453078602_4117272_n.jpg

http://www.vinsieu.ro/uploads/event/large/targul-de-oferta-educationala-2010-universitatea-din-oradea-i15967.jpg