समय दिखाना

वॉच फ़ेस का मुख्य काम समय दिखाना होता है. Watch Face Format की मदद से, AnalogClock और DigitalClock एलिमेंट का इस्तेमाल करके, ऐनालॉग और डिजिटल, दोनों तरह की घड़ियां बनाई जा सकती हैं.

डिजिटल घड़ियां

स्मार्टवॉच की होम स्क्रीन Scene में, DigitalClock और TimeText एलिमेंट का इस्तेमाल करके, एक बुनियादी डिजिटल घड़ी बनाई जा सकती है:

<DigitalClock x="100" y="100" 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>

format एट्रिब्यूट की मदद से, यह कंट्रोल किया जा सकता है कि घंटे, मिनट, और सेकंड के कॉम्बिनेशन का इस्तेमाल करके, समय को कैसे दिखाया जाए. इस्तेमाल किए जा रहे Watch Face Format के वर्शन के हिसाब से, विकल्प अलग-अलग होते हैं. दूसरे वर्शन में, यहां दिए गए विकल्पों की संख्या बढ़ जाती है.

पिछले उदाहरण में, फ़ॉन्ट को सिस्टम फ़ॉन्ट का इस्तेमाल करने के लिए सेट किया गया है.

यह दुनिया की अन्य जगहों का समय दिखाने के लिए भी मददगार हो सकता है. उदाहरण के लिए, विश्व घड़ी. ऐसा करने के लिए, Localization एलिमेंट का इस्तेमाल करें:

<DigitalClock x="100" y="100" width="200" height="50">
    <Localization timeZone="Europe/London" />
    ...
</DigitalClock>

ऐनालॉग घड़ियां

ऐनालॉग घड़ी बनाने के लिए, AnalogClock एलिमेंट का इस्तेमाल करें. हर HourHand, MinuteHand और SecondHand चाइल्ड एलिमेंट, उस संसाधन के बारे में बताता है जिसका इस्तेमाल रेंडरिंग में किया जाना चाहिए:

<AnalogClock x="0" y="0" width="200" height="200">
    <HourHand resource="hour_hand" ... />
    <MinuteHand resource="minute_hand" />
    <SecondHand resource="second_hand" />
    <!-- Optionally add a Tick or Sweep child element to define SecondHand behavior -->
</AnalogClock>

पिवट पॉइंट तय करना

समय के साथ, हर घंटे, मिनट, और सेकंड के रिसॉर्स घूमते रहते हैं. हालांकि, यह बताना ज़रूरी है कि हर रिसॉर्स किस पॉइंट के आस-पास पिवट होना चाहिए.

कुछ मामलों में, पिवट पॉइंट हाथ के सबसे नीचे नहीं होता और वह हॉरिज़ॉन्टल तौर पर बीच में होता है. इसे <HourHand … pivotY="(pivot_ratio)" /> के तौर पर दिखाया जाना चाहिए, जहां:

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

स्मार्टवॉच की सुइयों का रंग बदलना

आम तौर पर, स्मार्टवॉच की होम स्क्रीन को पसंद के मुताबिक बनाने के लिए, स्मार्टवॉच की सुइयों का रंग कॉन्फ़िगर किया जा सकता है.

ऐसा करने के लिए, हर हाथ पर tintColor का इस्तेमाल करके, हर हाथ को अलग-अलग रंग में रंगा जा सकता है. इसके अलावा, AnalogClock का इस्तेमाल करके, सभी हाथों को एक ही रंग में रंगा जा सकता है.

उपयोगकर्ताओं को खास रंगों में टिनट करने की सुविधा देने के अलावा, tintColor के लिए कॉन्फ़िगरेशन का विकल्प भी दिया जा सकता है, ताकि उपयोगकर्ता ये विकल्प चुन सकें:

<AnalogClock ... tintColor="[CONFIGURATION.handColors.0]" />

ड्रॉप शैडो

स्मार्टवॉच के ऐनिमेशन में हाथों को ज़्यादा असली बनाने के लिए, हर हाथ के पीछे ड्रॉप शैडो का इस्तेमाल करें. इससे, हाथों को ज़्यादा बेहतर तरीके से दिखाया जा सकता है. ऐसा करने के लिए, हर तरह के हाथ के दो आइटम इस्तेमाल करें. एक को दूसरे के पीछे रखें और छाया के लिए अलग संसाधन दें:

<!-- Offset the shadow by 5 units in both directions -->
<HourHand resource="hour_hand_shadow" ... x="105" y="105">
<!-- ... -->
<HourHand resource="hour_hand" ... x="100" y="100">

चेहरे की सजावट

ऐनालॉग होम स्क्रीन पर अक्सर घंटे या मिनट दिखाने के लिए, होम स्क्रीन के आस-पास सजावट की जाती है. ऐसा करने के लिए, दो तरीके हैं:

  1. फ़ुल-स्क्रीन बैकग्राउंड इमेज शामिल करें, जिसमें आपकी पहले से बनाई गई स्मार्टवॉच की होम स्क्रीन हो. इमेज के साथ काम करने का तरीका देखें.

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

  2. अलग-अलग आइटम बनाएं और उन्हें घुमाकर चेहरे के आस-पास रखें.

    <Group ... >
    <!-- Content for the "12" marker -->
</Group>
<Group pivotX="..." pivotY="..." angle="30">
    <!-- Content for the "1" marker -->
</Group>