LayerConfigurator Widget

Genera un configuratore di livelli di immagini in un oggetto canvas attraverso degli elementi selettori contenenti la url dell'immagine

// API dBJs-ui  

Davide Bausach /

Options and settings:
      - data-lcSelect : on | off visualizzazione degli elementi select (default off)
      - data-lcImgInit: url immagine di default
      - data-lcN: numero livello
      - data-lcItemVal: url dell'immagine
      - data-lcTextX: posizione del testo sull'asse X del canvas
      - data-lcTextY: posizione del testo sull'asse Y del canvas
      - data-lcFillStyle: colore del testo in esadecimale
      - data-lcTextFont: tipo, grandezza e font del testo (es. italic 20px Roboto)

Standard sintax

    <div class="layerConfigurator" data-lcSelect="on | off">
      <canvas class="lcCanvas" width="400" height="400" data-lcImgInit="img/livello-0.jpg"></canvas> 
        
      <div class="lcLayer" data-lcN="1">
        <span class="layerItem" data-lcItemVal="0">
          Annulla
        </span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-01.png">
          Sfondo 1
        </span>
        <!-- ... -->

        <select class="layerSelect">
          <option value="0">-- Seleziona sfondo --</option>
          <option value="img/layers/sfondo-01.png">sfondo 1</option>
          <!-- ... -->
        </select>
      </div>
      <!-- ... -->

      <input type="text" class="lcText" data-lcTextX="canvas x" data-lcTextY="canvas y" data-lcFillStyle="#color" data-lcTextFont="font" />
      <!-- ... -->

      <input type="hidden" class="lcDataUrl" />
    </div>
  

Il LayerConfigurator widget è uno strumento per la configurazione di livelli di immagini (png) che permette la realizzazione di un'immagine finale in un elemento canvas. Possono essere inseriti livelli a piacimento comprensivi di un numero ipoteticamente infinito di possibilità.
Il configuratore può essere utile, ad esempio, per la realizziazione di prodotti personalizzati in un e-commerce dove magari la colorazione di un tessuto, o di parti di esso, possono dipendere dalle scelte dell'utente o per altre applicazioni dove diventano determinanti tali scelte per la composizione del prodotto finito.

Il widget necessita che all'interno del div con classe layerConfigurator sia presente l'elemento canvas e una serie di div con classe lcLayer che rappresentano ogni singolo livello che a loro volta avranno all'interno un elemento select contenente le scelte del livello corrente.
Gli elementi span con classe layerItem sono opzionali e possono contenete un testo o delle anteprime (o quello che si preferisce) cliccabili.

L'elemento select oltre ad essere obbligatorio per il funzionamento del widget può essere utilizzato come elemento di un form qualora si voglano inviare al server le scelte fatte dall'utente o per ulteriori manipolazioni JavaScript, in più deve avere come valore le url delle immagini che compongono le scelte per quel livello stessa cosa vale per gli elementi span (anteprima o selettori) che avranno la stringa della url dell'immagine inserita come valore della proprietà data-lcItemVal (chiaramente dovranno essere corrispondenti).

Le intere opzioni di un livello sono contenute nel div con classe lcLayer che dovrà avere una proprietà data-lcN che identifica, con un valore numerico, l'ordinamento per quel livello, questo è utile perché l'ordine dei livelli non è dato dalla loro posizione nella stesura dell'html ma per esigenze grafiche si potrebbe posizionare le scelte di livello dove si vuole ma pursempre all'interno del div contenitore del widget con classe layerConfigurator.

È possibile inserire all'interno del widget degli input di tipo text con classe lcText e con le relative proprietà per il posizionamento del testo, come da esempio, per poter inserire del testo personalizzato in uno o piĆ¹ punti del canvas.

All'interno del div contenitore del widget può essere incluso un input di tipo hidden che conterrà la striga in base64 dell'immagine generata con l'elemento canvas che manipolata correttamente può essere inviata al server per il salvataggio.

Alle select e all'input possono essere inserite le proprietà name e id a piacimento in base alle esigenze. Inoltre gli elementi select possono essere nascosti impostando la proprietà data-lcSelect al valore off qualora si vogliano usare solo gli elementi cliccabili con classe layerItem.

Example 1

Nell'esempio di seguito ci sono delle varie configurazioni di livello con solect più selettore differente (all'interno degli span layerItem dove è possibile inserire anche immagini in miniatura del livello), con solo select, con un elemento di testo libero e infine l'imput hidden che conterrà la stinga base64 che potrà essere convertita in binario (per l'invio attraverso un form) urilizzando la funzione della libreria dBJs dataURItoBlob.

Livello 1 annulla sfondo 1 sfondo 2 sfondo 3
Livello 2 bint 1 bint 2 bint 3
Livello 3
Testo:
    <div class="layerConfigurator" data-lcSelect="on">
      <canvas class="lcCanvas" width="400" height="400" data-lcImgInit="img/layers/livello-0.jpg"></canvas> 

      <div class="lcLayer" data-lcN="1">
        <span>Livello 1</span>

        <span class="layerItem" data-lcItemVal="0">Annulla</span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-01.png">Sfondo 1</span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-02.png">Sfondo 2</span>
        <span class="layerItem" data-lcItemVal="img/layers/sfondo-03.png">Sfondo 3</span>

        <select class="layerSelect">
          <option value="0">-- Seleziona sfondo --</option>
          <option value="img/layers/sfondo-01.png">sfondo 1</option>
          <option value="img/layers/sfondo-02.png">sfondo 2</option>
          <option value="img/layers/sfondo-03.png">sfondo 3</option>
        </select>
      </div>

      <div class="lcLayer" data-lcN="2">
        <span>Livello 2</span>

        <span class="layerItem" data-lcItemVal="img/layers/bint-01.png">bint 1</span>
        <span class="layerItem" data-lcItemVal="img/layers/bint-02.png">bint 2</span>
        <span class="layerItem" data-lcItemVal="img/layers/bint-03.png">bint 3</span>

        <select class="layerSelect">
          <option value="0">-- Seleziona bordo interno --</option>
          <option value="img/layers/bint-01.png">bint 1</option>
          <option value="img/layers/bint-02.png">bint 2</option>
          <option value="img/layers/bint-03.png">bint 3</option>
        </select>
      </div>

      <div class="lcLayer" data-lcN="3">
        <span>Livello 3</span>

        <select class="layerSelect">
          <option value="0">-- Seleziona bordo --</option>
          <option value="img/layers/bordo-01.png">bordo 1</option>
          <option value="img/layers/bordo-02.png">bordo 2</option>
          <option value="img/layers/bordo-03.png">bordo 3</option>
        </select>
      </div>

      <input type="text" class="lcText" data-lcTextX="50" data-lcTextY="250" data-lcFillStyle="#000" data-lcTextFont="italic 20px Roboto" maxlength="30" />

      <input type="hidden" class="lcDataUrl" />
    </div>
  
Operazione eseguita con successo!