Rappresentare l'ora

Il compito principale di un quadrante è mostrare l'ora e Watch Face Format ti consente di creare orologi analogici e digitali utilizzando gli elementi AnalogClock e DigitalClock.

Orologi digitali

Un orologio digitale di base può essere definito utilizzando gli elementi DigitalClock e TimeText all'interno del quadrante Scene:

<DigitalClock x="125" y="50" width="200" height="50">
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
</DigitalClock>
watchface_clocks.xml

L'attributo format ti consente di controllare la modalità di rappresentazione dell'ora utilizzando una combinazione di ore, minuti e secondi. Le opzioni esatte variano a seconda della versione di Watch Face Format utilizzata; la versione 2 espande le opzioni qui.

Nell'esempio precedente, Font è impostato per utilizzare il carattere di sistema.

Può essere utile anche per mostrare l'ora di altre località del mondo, ad esempio un orologio internazionale. Ciò può essere ottenuto tramite l'elemento Localization:

<DigitalClock x="125" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    <!-- TimeText goes here -->
    <!-- START_EXCLUDE -->
    <TimeText x="0" y="0" width="200" height="50" format="hh:mm">
        <Font family="SYNC_TO_DEVICE" size="16" />
    </TimeText>
    <!-- END_EXCLUDE -->
</DigitalClock>
watchface_clocks.xml

Orologi analogici

Per creare un orologio analogico, utilizza l'elemento AnalogClock. Ciascuno degli elementi secondari HourHand, MinuteHand e SecondHand specifica la risorsa da utilizzare nel rendering:

<AnalogClock x="0" y="0" width="450" height="450">
    <HourHand resource="hour" x="220" y="55" width="20" height="190"
        pivotX="0.5" pivotY="0.9210" />
    <MinuteHand resource="minute" x="222" y="30" width="16" height="220"
        pivotX="0.5" pivotY="0.9" />
    <SecondHand resource="second" x="226" y="20" width="8" height="245"
        pivotX="0.5" pivotY="0.8571" />
</AnalogClock>
watchface_clocks.xml

Specifica il punto di rotazione

Le risorse di ore, minuti e secondi vengono ruotate con il passare del tempo, ma è importante specificare il punto corretto intorno al quale ciascuna deve ruotare.

In alcune situazioni, il punto di rotazione non si trova esattamente nella parte inferiore della mano ed è centrato orizzontalmente. Deve essere specificato come <HourHand … pivotY="(pivot_ratio)" />, dove:

$$ pivot\_ratio = \frac{pivot\_height}{full\_height} $$

Colorare le lancette

Per consentire all'utente di personalizzare l'aspetto del quadrante, è comune avere un colore configurabile per le lancette dell'orologio.

Un modo per farlo è utilizzare il tintColor su ciascuna lancetta per colorarle separatamente oppure su AnalogClock per colorarle tutte dello stesso colore.

Oltre a consentire agli utenti di colorare determinati colori, puoi fornire un'opzione di configurazione a tintColor per consentire all'utente di scegliere, ad esempio, di aggiungere tintColor="[CONFIGURATION.handColors.0] all'elemento AnalogClock.

Ombra

Per un effetto realistico delle lancette dell'orologio, l'utilizzo di un'ombra dietro ogni lancetta può dare l'impressione di profondità.

Per ottenere questo risultato, utilizza due risorse per ogni tipo di mano all'interno di un singolo AnalogClock, sfalsandole una dietro l'altra e utilizza una risorsa separata per la mano che rappresenta l'ombra.

Decorazioni per il viso

I quadranti analogici spesso hanno decorazioni intorno al quadrante che mostrano le ore o i minuti. Per raggiungere questo obiettivo, esistono due approcci:

  1. Includi un'immagine di sfondo a schermo intero, che contiene il quadrante dell'orologio predefinito. Consulta la sezione Lavorare con le immagini.

    <PartImage x="0" y="0" width="450" height="450">
    <Image resource="watch_face_dial" />
</PartImage>
    watchface_clocks.xml

  2. Disegna decorazioni separate e posizionale intorno al viso utilizzando le rotazioni.

    <!-- Content for the "12" -->
<Group x="200" y="0" width="50" height="450">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[12]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- Content for the "1" -->
<Group x="200" y="0" width="50" height="450" angle="30">
    <PartText x="0" y="0" width="50" height="50">
        <Text>
            <Font family="SYNC_TO_DEVICE" size="16" color="#FF00FF">
                <![CDATA[1]]>
            </Font>
        </Text>
    </PartText>
</Group>
<!-- etc -->
    watchface_clocks.xml