Utilizzo dei widget > 3D > Pulsante immagine 3D
  
Pulsante immagine 3D
* 
Questo widget è disponibile solo nei progetti Smartglass 3D.
Qual è la funzione di questo widget?
Il widget Pulsante immagine 3D è molto simile ai widget Casella di controllo 3D e Pulsante interruttore 3D, in quanto può essere utilizzato per presentare lo stato di elementi e dati a esso associati, ma è possibile selezionare una risorsa di tipo immagine da visualizzare quando è premuto o non premuto.
Quando va utilizzato questo widget?
Un widget Pulsante immagine 3D può essere utile quando si desidera visualizzare immagini per i pulsanti. Ad esempio, è possibile utilizzare un Pulsante immagine 3D per mostrare lo stato della sequenza di animazione. Quando non è premuto è visualizzata un'icona di riproduzione, ma una volta premuto potrebbe essere visualizzata un'icona di pausa.
Sono disponibili proprietà, servizi, eventi o azioni speciali?
Per visualizzare un elenco di proprietà, servizi ed eventi comuni a più widget, vedere Proprietà, servizi ed eventi comuni a più widget.
La seguente tabella riporta un elenco di proprietà specifiche di questo widget.
Proprietà
Descrizione
Testo premuto
Specifica il testo quando premuto.
Immagine premuta
Specifica l'immagine quando premuta. Per includere un'immagine, è possibile eseguire una delle operazioni riportate di seguito.
Fare clic accanto al campo per aggiungere un nuovo file immagine.
Immettere o copiare e incollare l'URL dell'immagine direttamente nel campo.
Selezionare un'immagine dal menu a discesa.
L'elenco che segue include alcuni dei formati di file supportati:
.png
.jpg
Testo non premuto
Specifica il testo quando non premuto.
Immagine non premuta
Specifica l'immagine visualizzata quando non premuta. Per includere un'immagine, è possibile eseguire una delle operazioni riportate di seguito.
Fare clic accanto al campo per aggiungere un nuovo file immagine.
Immettere o copiare e incollare l'URL dell'immagine direttamente nel campo.
Selezionare un'immagine dal menu a discesa.
L'elenco che segue include alcuni dei formati di file supportati:
.png
.jpg
Premuto
Se questa proprietà è selezionata, il pulsante è premuto per default nell'esperienza.
Altezza
Altezza del pulsante in metri. Il valore minimo è 4 cm.
Larghezza
Larghezza del pulsante in metri. Il valore minimo è 4 cm.
Colore carattere
Colore del carattere. Selezionare un colore dal selettore colore.
Colore pulsante
Colore del pulsante. Selezionare un colore dal selettore colore.
Servizio
Descrizione
Imposta
Mette il pulsante nello stato premuto. Se il pulsante è selezionato, l'evento premuto viene attivato.
Reimposta
Mette il pulsante in uno stato non premuto. Se il pulsante è selezionato, l'evento non premuto viene attivato.
Evento
Descrizione
Premuto
Attivato quando il pulsante è premuto. Se il pulsante è disattivato, l'evento non viene attivato.
Non premuto
Attivato quando il pulsante non è premuto. Se il pulsante è disattivato, l'evento non viene attivato.
Come funziona il widget
Ecco un esempio dell'aspetto che potrebbe avere il widget.
Passi fondamentali richiesti per l'uso
Come si presenta
* 
Si consiglia di utilizzare questo widget con un Pannello 3D.
1. Trascinare e rilasciare un widget Pannello 3D nell'area di lavoro.
2. Trascinare e rilasciare un widget Pulsante immagine 3D nell'area di lavoro. Spostare il widget nella posizione desiderata.
* 
Dopo aver trascinato i widget nell'area di lavoro, è necessario trascinarli e annidarli sotto il widget Pannello nell'albero VISTE.
3. Selezionare le immagini che si desidera visualizzare per Immagine premuta e Immagine non premuta. In questo esempio è stata utilizzata solo un'immagine di avviso per Immagine premuta ().
4. Anche in questo esempio è stata aggiunta un'Etichetta 3D accanto al Pulsante immagine 3D con il testo Show Alert.
5. Trascinare e rilasciare un widget Immagine 3D nell'area di lavoro. Questo widget verrà utilizzato per visualizzare l'avviso all'utente.
6. Aggiungere il codice seguente al file Home.js:
$scope.showAlert = function(){
$scope.view.wdg['3DImage-2']['visible'] = true;
}
$scope.hideAlert = function(){
$scope.view.wdg['3DImage-2']['visible'] = false;
}
7. Tornare al riquadro DETTAGLI del Pulsante immagine 3D e scorrere verso il basso fino a EVENTI.
8. Fare clic su JS accanto all'evento Premuto e immettere showAlert().
9. Fare clic su JS accanto all'evento Non premuto e immettere hideAlert().
A questo punto, una volta premuto il pulsante immagine Show Alert, viene visualizzato l'avviso.