Figata questo tooltip!

Ora la struttura è fatta, e usando lo stesso codice trovato per il click trasparenza svg riesco anche a mostrare un’anteprima completa del disegno selezionato.

Per ora i dati del disegno e del disegnatore sono finti; devo ancora modificare la quei di drag per restituirmi queste info legate ad ogni disegno. Inoltre non salvo ancora il titolo e coordinate.

Manca l’animazione durante lo show, ma la grafica mi piace! So che per invogliare la gente a fare mi piace e commenti meglio scrivere “Mi Piace” e “Commenta” piuttosto che mettere le icone, ma per ora per la demo voglio presentarla così.

E grazie ad un consiglio di Pat ho ottimizzato un sacco di punti del codice che contenevano errori di cui io ignoravo completamente l’esistenza!

“use strict”;     par tout :)

Con la ricerca di contatti!

Ho scritto ad Angiani, ancora una volta non riuscendo a dargli del tu, e da lui ho ottenuto il primo contatto con un “esperto del settore”. Ed effettivamente con lui mi sono ritrovato a parlare per la prima volta di ricerca di investitori.

La strada è ovviamente lunga, ma si comincia! Per la prima volta mi sono trovato a dover scrivere una 40ina di righe per spiegare e convincere un perfetto sconosciuto della missione e della fattibilità di questo progetto. Anche questa è stata una piccola sfida interessante. In fondo tutto passerà da quello: 1) descrizione breve e lunga del progetto 2) demo convincente e naturale 3) team.

Notte!

• Creare un tooltip rettangolare
• che compaia con effetto trasparenza + salita, con ombra sulla dashboard
• con una freccina che punta sul px cliccato
• con a sx una piccola anteprima del disegno intero (con titolo e pulsanti like e share) e a dx foto e info del disegnatore
  • se si clicca sull’anteprima si finisce direttamente alla pagina del disegno (sotto pagina di quella del disegnatore)
  • se si clicca sulla foto o sul nome si finisce sulla pagina del disegnatore, con le anteprime dei suoi altri lavori ed il suo feed
• se si clicca su un disegno molto a lato della lavagna, questa farà automaticamente un drag animato per portare il disegno al centro prima di far comparire il box

Cazzo funziona!!!

Non potevo desiderare di meglio! Al primo colpo uno dei problemi tecnici più dibattuti è stato risolto!

Tappa 1 fu l’aggiornamento preciso e rapido della cache in coordinate relative ai px

Tappa 2 prendere tutti i disegni che contengono un determinato px, ordinarli per il loro layer, trasformarli uno alla volta in canvas e verificare l’alpha del px corrispondente. Semplice! e funziona perfettamente anche con zoom.

Che bello! Posso già passare oltre; Ora creo un popup con le info del disegno e del disegnatore, e si da il via alla terza grande parte del progetto, la parte Social!

L’ultimo grande scoglio tecnico da superare è il salvataggio delle diverse versioni dei disegni per livelli di zoom.

Ed ora si inizia con una delle cose tecnicamente più interessanti e “nonSoComeCazzoFare” ! :D

Capire su quale disegno l’utente voleva selezionare quando ha fatto click sulla lavagna, tenendo presente della trasparenza di ogni disegno e del loro ordine in livelli.

Per ora mi occupo della parte tecnica che già non sarà facile da ottimizzare, poi arriverà anche il momento di discutere del problema che a volte potrebbe non essere per niente chiaro all’utente che sta guardando due disegni uno sotto ad una zona trasparente dell’altro. Magari dovrò evidenziare il disegno selezionato in qualche modo, così che appena clicchi diventi evidente.

Per iniziare, ho modificato la updateCache per tenere traccia non solo di che cosa è attualmente  dentro al tag svg (anche a coordinate negative), ma anche di cosa è semplicemente visibile a schermo. Avendo un array sempre aggiornato con gli ID dei disegni attualmente visibili, dovrò fare i controlli di coordinate (in px) su solo una parte di ciò che ho sulla lavagna.

L’idea tecnica è di prendere tutti i tag image che contengono il px cliccato, e dal più in alto alla più in basso (ordine per id) controlliamo se quel px è trasparente convertendolo in canvas (alle dimensioni in cui è sullo schermo) e guardando l’alpha del px cliccato.

Potrebbe essere un po pesante da fare, ma per ora non ho altre idee. prima di partire col codice meglio fare qualche ricerca approfondita questa volta!

Anche se non ho scritto niente qui, negli ultimi giorni ho fatto diversi commit lavorando sulla branch del login di fb :)

Ma roba grossa eh! Grossa grossa eh! Cacchio quanto è divertente esplorare territori per me inesplorati.

Ho imparato a controllare il login col plugin facebook, ho corretto qualche bug sul backend e modificato il db mongo.

Ora ho un modulo CurrentUser che mi gestisce i login con popup che compare e scompare automaticamente quando necessario, e salvo correttamente l’id dell’utente nei disegni.

Devo ben verificare la gestione degli indici di mongoDB. Ma sono solo agli inizi, ne ho di cose da fare ed imparare! :)

E perchè no, visto che l’ottimizzazione non è mai troppa, ho pensato a come fare meno calcoli possibili durante gli update della cache.

Qualche variabile privata in più a livello di modulo, e i calcoli fatti solo quando quei valori cambiano (zoom) invece che ad ogni loro utilizzo.

Ora il metodo di controllo _isVisible è tornato semplice come in origine nonostante lavori in coordinate assolute.

Ciò mi ha richiesto anche una modifica lato server, ma ne è risultata un’ulteriore ottimizzazione nonché un bugfix, quindi ben venga.

Devo decidermi a procedere sull’integrazione di Facebook!

Cazzo se solo lo avessi saputo prima! :D

getBoundingClientRect funziona! Anche per gli elementi all’interno di un svg! E questo rivoluziona tutto il calcolo delle coordinate dei disegni in cache.

Intanto ora le coordinate dell’origine del tag G le calcolo così, e mi ritrovo coordinate affidabili al 110%.

Seconda cosa, posso usare lo stesso sistema anche per le due funzioni updateCacheForDrag / Zoom, che non hanno più senso di esistere separate! (Ovviamente per tutte queste modifiche mi tengo commentato anche il vecchio codice, perchè non ho ancora studiato la compatibilità di svg.element.getBoundingClientRect su tutti i browser).

Ora basterà fare una sola funzione che va a cercare nel dom tutte le immagini presenti in cache, e aggiorna pax pxy pxw pxh della cache coi valori presi da getBoundingClientRect. E non sarà nemmeno obbligatorio chiamarla per ogni drag o zoom! Potremo chiamarla ogni tot tempo, o quando ci serve per selezionare il disegno su click, o quando vogliamo rimuovere disegni dal svg.

Bella!

Il mio problema di salvataggio molto probabilmente nasce dagli arrotondamenti del calcolo delle coordinate del tag G.
Sto provando a sfruttare getBoundingClientRect che a quanto pare funziona sul tag G anche su safari.

PRO: tiene nativamente traccia di tutti gli spostamenti e trasformazioni subite da un elemento, anche trasformazioni.

CONTRO: prende le coordinate attuali del tag G, guardando solo quello che contiene, non le coordinate da cui tutto è partito (quindi 0, 0);

QUINDI: posso provare a mettere su init un px bianco alle coordinate (0, 0) e usare getBoundingClientRect su questo elemento per prendere le coordinate in px dell’origine di tutto il tag g.

FUTURO: devo vedere come va in quanto a performance, ma di sicuro sarebbe più comodo ed affidabile anche per calcolare le coord e dimensioni attuali di ogni immagine in cache dopo drag e zoom.

Bella!

Alle pagine utenti (all’idea che ho adesso di come dovranno essere) manca il fattore contatto umano.

Facebook ti permette di seguire dall’esterno la vita delle persone, di trarne informazioni utili, e di farne parte inviando messaggi e aggiungendo foto. Twitter abbatte le barriere verso tutte le persone che vuoi seguire, mettendotele a distanza di un sms. YouTube ti permette di chiacchierare come nel salotto di casa con persone sconosciute nella vita reale.

E Noi? Se le pagine social si limitano a raggruppare i disegni di una persona perdono presto di attrattiva e sembreranno presto tutte uguali al cervello degli utenti avido di informazioni sociali.

Quella pagina deve essere una sottile finestra attraverso cui guardare la vita creativa della persona. Ovviamente non ci aspetteremo di scoprire cosa fa il sabato sera e chi sta frequentando. Per quello sappiamo che c’è Facebook. Ma vogliamo trarne comunque molte informazioni su che persona sia, dove abita e che vita fa. Capire cosa c’è dietro quei disegni, perchè ha quello stile e cosa cerca di trasmettere. Questo è ciò che penso seguendo disegnatori su youtube. Mostrare solo i loro disegni non avrebbe niente di sociale.

In fondo si tratta dello stesso fattore X inventato da Facebook, che lo rese infinitamente più attrattivo di ogni cosa esistente allora.