Newsgroup: it.comp.www.php
Titolo: [OT] Configuratore vettoriale

Salve,
 
in molti siti appare sempre più spesso una sorta di configuratore 
vettoriale ovvero se hai una t-shirt clicci sul colore e questa diventa 
di quel colore oppure hai un tavolo puoi cliccare sul colore delle 
gambe, del piano etc. un po' come quando usi Coreldraw o qualsiasi altro 
programma di grafica vettoriale come il CAD dove cliccando su una parte 
puoi riempirla del colore che vuoi.
 
Morale della favola lato web che tecnologie si utilizzano?
 
Saluti!
GabrieleMax


wrote:

Dipende.
 
Si puo' usare una stessa T-Shirt, per esempio, ricolorata con Photoshop, e un
semplice spriting.
 
Oppure si puo' generare un SVG e modificarlo se il browser lo supporta.
 
O addirittura si puo' rigenerare "al volo" una JPEG da un modello lato server
e spedirla al client via AJAX.
 
Non esiste una sola soluzione che vada bene sempre & ovunque, dipende da cosa
vuoi ottenere, e che infrastruttura hai. Su un server piccolo con un traffico
ingente, la rimodellazione JPEG frame-by-frame e' un suicidio; in determinati
casi (montaggio con immagini di paesaggi et similia con necessita' di elevato
realismo) Photoshop o non funziona o e' troppo oneroso/costoso, eccetera.
 
Leonardo
 
-- 
 
Then felt I like some watcher of the skies, when a new planet swims into his ken;
Or like stout Cortez when with eagle eyes, he star'd at the Pacific; and all his men
Look'd at each other with a wild surmise - silent, upon a peak in Darien.

 Leonardo
 
 
Ma, molte volte fatografi tutti i capi in catalogo, se hai una versione 
rosee ed una gialla delal stessa maglietta si fanno due foto, e' il 
metodo meno costoso in assoluto. 
I prodotti ricolorati via photoshop si notano, soprattutto se capi 
d'abbigliamento, quindi con molte ombre a meno di investire parecchio 
tempo in editing, quinid meno costoso fare 2 fotografie
 
 
-- 
Jeff

 Morale della favola lato web che tecnologie si utilizzano?
 
Se vuoi sapere che tecnologia usa un certo sito che hai visto devi 
indicare il sito.
 
Se vuoi sapere come puoi fare quello che descrivi puoi usare un SVG e 
cambiare il colore della figura modificando il css, sarà una riga di js 
o giù di lì.
 
 
-- 
Andrea
 

 indicare il sito.
 
Il sito è questo 
http://www.canciomuebles.es/productos/mesas/capuccina-capuccina/configurador/3/25/
 
 
Saluti!
GabrieleMax

 Leonardo
 
Saluti!
GabrieleMax
 


http://www.canciomuebles.es/productos/mesas/capuccina-capuccina/configurador/3/25/
 
 
Ah, questa e' la versione semplicissima. Tante foto quante sono i prodotti con
le varie combinazioni. Non e' un singolo oggetto (da foto a foto cambia il PdV
e a volte pure l'illuminazione - poi, che siano foto o rendering, e' uguale il
concetto).
 
Basta avere pazienza e catalogare tutte le immagini, e poi con, che so, jQuery
le tiri su a richiesta.


 le tiri su a richiesta.
 
A quel punto metti un SVG e gli cambi il colore in js tutto sul client.
 
-- 
Andrea
 

Io ho fatto il customizzatore che trovi su 
comelovuoitu.it
, canvas html5 usando 
http://paperjs.org/
 
 
L'elaborazione lato server dell'immagine (nell'ambito dell'anteprima nel configuratore) ha senso solo se hai oggetti 3d e devi 'spalmare' l'immagine su una mesh, anche se alla fine una volta che hai il tracciato vettoriale, anche il 3d lo puoi simulare con le matrici e qualche accenno di trigonometria.. dipende da quanti dettagli ti servono, e il livello di complessità che vuoi mantenere.
 
 
Poi come ti hanno già detto dipende da cosa ci devi fare, se devi solo avere la foto di quel colore partendo da un'immagine 'standard' (come fanno in molti), fai la foto all'oggetto col colore neutrale (bianco), e con 1 oggetto avanzato e qualche azione di photoshop le processi e le carichi sul server, non ha molto senso in questo caso un'elaborazione in js/php, almeno che non hai un campionario gigantesco e/o i colori variano in continuazione.

 A quel punto metti un SVG e gli cambi il colore in js tutto sul client.
 
Credo che effettivamente avendo l'SVG sarebbe molto più semplice e 
"professionale" otre alla possibilità di gestire/aggiungere altri colori 
con maggior velocità e con un back panel meglio gestibile.
 
Io mi occupo di parte tecnica fino ad un certo punto tant'è che il 
progetto lo farei ovviamente realizzare a chi è del mestiere quindi a 
rigor di logica che esempi potrei far vedere al programmatore? Sai 
indicarmi qualche sito?
 
Saluti e grazie ancora a te e agli altri per le info! :)
GabrieleMax
 

 Poi come ti hanno già detto dipende da cosa ci devi fare, se devi solo avere la foto di quel colore partendo da un'immagine 'standard' (come fanno in molti), fai la foto all'oggetto col colore neutrale (bianco), e con 1 oggetto avanzato e qualche azione di photoshop le processi e le carichi sul server, non ha molto senso in questo caso un'elaborazione in js/php, almeno che non hai un campionario gigantesco e/o i colori variano in continuazione.
 
Fare la foto a tutti gli oggetti lo escludo, se fossi il produttore 
sarebbe fattibile o forse anche in quel caso sarebbe troppo smattimento, 
di sicuro nel mio caso non ho fisicamente modo di fotografare tutt ma 
devo comunque mostrare le varie caratteristiche.
 
Saluti!
GabrieleMax
 

Nì, inizialmente il mio customizzatore era pensato per gestire gli svg, tant'è che realizzai anche un convertitore da svg (standard) a un oggetto json che fosse interpretabile da paperjs, ma poi nel mio settore ci siamo accorti che non portava un reale vantaggio, quindi ora lo usiamo solo per lo sfondo: come ultimo livello c'è un rettangolo vettoriale, al quale applico il colore che l'utente seleziona dal color picker sulla sinistra.
Paperjs gestisce anche le maschere (e le ho provate, funzionano molto bene) pertanto per riprodurre l'esempio che hai linkato ti basta creare l'svg con le aree da colorare, poi giocare sull'opacità del colore per ottenere l'effetto più simile alla realtà, in alcuni casi dovresti fare aree differenti sulla stessa immagine (per ombre e cose del genere)
 
Ultimo hint: inizialmente ho usato paperjs perchè non è che 'supporta' i livelli e le maschere, ma è proprio basato su di esse; Ma se dovessi rifarlo oggi provarei fabricjs che mi sembra un pò più completo ;)

 Ultimo hint: inizialmente ho usato paperjs perchè non è che 'supporta' i livelli e le maschere, ma è proprio basato su di esse; Ma se dovessi rifarlo oggi provarei fabricjs che mi sembra un pò più completo ;)
 
Ok grazie per il consiglio! :)
 
GabrieleMax
 

Io uso inkscape, gratuito e multipiattaforma.. probabilmente puoi aprire gli svg che ti da la ditta e "convertirli", paperjs non ha un convertitore integrato (forse fabricjs, non sono sicuro).
 
Altrimenti li converti a mano, per forme molto semplici non è impossibile, puoi aprire l'svg con un qualsiasi editor di testo, vedi i vari pezzi e li dai in pasto a paperjs.. io se vuoi avevo fatto uno script php per la conversione, ma funzionava solo per gli svg nel formato standard e non tutti gli elementi erano supportati (ho fatto solo quelli che mi servivano sul momento).. lunedì torno in ufficio e se vuoi te lo posto, tanto è poca roba.
 
Comunque nel tuo caso paperjs sarebbe perfetto: crei 2 livelli, uno con l'immagine (raster), uno con il tracciato preso dall'svg (sopra al raster ovviamente), poi dai il comando per riempirlo col colore che ti serve, setti l'opacità e il gioco è fatto.. l'unico problema è la creazione dei tracciati partendo dall'svg, appunto.

 Comunque nel tuo caso paperjs sarebbe perfetto: crei 2 livelli, uno con l'immagine (raster), uno con il tracciato preso dall'svg (sopra al raster ovviamente), poi dai il comando per riempirlo col colore che ti serve, setti l'opacità e il gioco è fatto.. l'unico problema è la creazione dei tracciati partendo dall'svg, appunto.
 
Ok, grazie per tutti i consigli! :)
 

Un tool fatto molto bene per vettorializzare un'immagine è vectormagic (cercalo su google), con la registrazione free ti permettono di convertire 1 immagine (ovviamente nulla ti vieta di acquistarlo visto che ti serve per uso professionale, oppure di iscriverti con più indirizzi email se hai una decina di oggetti)
 
Ma nel tuo caso secondo me ti basta inkscape, apri la foto poi con i vari tool (non lo so usare molto bene) crei il tracciato..
Ricordati, quando salvi l'svg, di usare il formato 'standard' o 'default', altrimenti è più complesso estrapolarne il tracciato da usare con i vari framework js/html5.
 
 
Si, per la conversione a mano intendo aprire il file svg con un editor di testo, troverai dei comandi simili a coordinate, ogni comando (ad esempio ricordo a per gli archi) devi poi darlo anche al framework che utilizzi (paperjs o fabric, o altri ce ne sono tanti)... è una roba lunga, specialmente su tracciati complessi...
 
Poi forse ora paperjs importa direttamente gli svg: 
http://paperjs.org/about/roadmap/
 (non è chiaro se li importa semplicemente o se li converte proprio in tracciati)
Anche fabricjs ha un metodo simile: 
http://fabricjs.com/docs/fabric.Path.html#fromElement
 
 
 
Forse lo script che mi sono creato due anni fa è ora obsoleto ;)

 Forse lo script che mi sono creato due anni fa è ora obsoleto ;)
 
Beh... comunque ti ringrazio per tutte le dritte datemi fin'ora, volendo 
poter usufruire del tuo lavoro c'è un modo per contattarti per avere un 
preventivo, etc.?
 
Saluti!
GabrieleMax

 preventivo, etc.? 
 
Mandami pure una mail a 
d...@gotinsane.com
, in questo periodo sia in azienda sia nel tempo libero sono abbastanza preso, comunque valutiaom la cosa, nel tuo caso il "grosso" del lavoro è ottenere il tracciato da dare in pasto al framework (paper o fabric), il resto è una cosa molto semplice

 Mandami pure una mail a 
d...@gotinsane.com
, in questo periodo sia in azienda sia nel tempo libero sono abbastanza preso, comunque valutiaom la cosa, nel tuo caso il "grosso" del lavoro č ottenere il tracciato da dare in pasto al framework (paper o fabric), il resto č una cosa molto semplice
 
Ok, grazie per il riferimento, esatto la parte piů grossa č il tracciato 
delle immagini, farň qualche prova per vedere come riuscire a ricavarlo 
nel caso l'azienda non riuscisse a fornirmelo... a rigor di logica se 
scontornassi le immagini con la bacchetta magica non subirei gli 
"errori" delle ombre presenti nell'immagine che potrebbero essere 
considerate tracciati da riempire!
 
Saluti!
GabrieleMax