সময়কে উপস্থাপন করতে হবে

ওয়াচফেসের প্রধান কাজ হল সময় দেখানো এবং Watch Face Format আপনাকে AnalogClock ও DigitalClock এলিমেন্ট ব্যবহার করে অ্যানালগ ও ডিজিটাল, দুই ধরনের ঘড়িই তৈরি করতে দেয়।

ডিজিটাল ঘড়ি

আপনার ওয়াচফেস Scene-এর মধ্যে DigitalClock এবং TimeText এলিমেন্ট ব্যবহার করে একটি সাধারণ ডিজিটাল ঘড়িকে সংজ্ঞায়িত করা যেতে পারে:

<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>

format অ্যাট্রিবিউট আপনাকে নিয়ন্ত্রণ করতে দেয় যে কীভাবে ঘণ্টা, মিনিট ও সেকেন্ডের সংমিশ্রণ ব্যবহার করে সময়কে দেখানো হবে। ব্যবহৃত ওয়াচ ফেস ফর্ম্যাটের ভার্সনের উপর নির্ভর করে সঠিক বিকল্পগুলি আলাদা আলাদা হয়; ভার্সন ২ এখানে বিকল্পগুলি আরও বাড়ায়।

আগের উদাহরণে, সিস্টেম ফন্ট ব্যবহার করার জন্য ফন্ট সেট করা হয়েছে।

এছাড়াও, এটি বিশ্বের অন্যান্য লোকেশনের সময় দেখানোর জন্য উপযোগী হতে পারে, যেমন ওয়ার্ল্ড ক্লক। 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>

অ্যানালগ ঘড়ি

অ্যানালগ ঘড়ি তৈরি করতে, AnalogClock এলিমেন্ট ব্যবহার করুন। প্রতিটি HourHand, MinuteHand এবং SecondHand চাইল্ড এলিমেন্ট, রেন্ডারিংয়ে ব্যবহার করা উচিত এমন রিসোর্স নির্দিষ্ট করে:

<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>

পিভট পয়েন্ট নির্দিষ্ট করা

সময় যত এগিয়ে চলে, ঘণ্টা, মিনিট ও সেকেন্ডের প্রতিটি রিসোর্স তত ঘুরতে থাকে, কিন্তু প্রতিটি রিসোর্স যে সঠিক পয়েন্টের চারপাশে ঘুরবে তা নির্দিষ্ট করা গুরুত্বপূর্ণ।

কিছু পরিস্থিতিতে, পিভট পয়েন্টটি হাতের একেবারে নিচে থাকে না এবং অনুভূমিকভাবে কেন্দ্রে থাকে। এটি <HourHand … pivotY="(pivot_ratio)" /> হিসেবে নির্দিষ্ট করা উচিত যেখানে:

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

ঘড়ির কাঁটা রঙ করা

ব্যবহারকারীকে ওয়াচফেসের চেহারা কাস্টমাইজ করার অনুমতি দিতে, ওয়াচের কাঁটার জন্য কনফিগার করা যায় এমন কালার থাকা সাধারণ ব্যাপার।

এটি করার একটি উপায় হল, প্রতিটি হাত আলাদা আলাদা করে টিংট করার জন্য tintColor-এর মাধ্যমে অথবা সব হাত একই রঙে টিংট করার জন্য AnalogClock-এর মাধ্যমে।

নির্দিষ্ট রঙ টিন্ট করার সুবিধা চালু করা ছাড়াও, আপনি tintColor-এ একটি কনফিগারেশন বিকল্প প্রদান করতে পারেন যাতে ব্যবহারকারীকে বেছে নিতে দেওয়া যায়, যেমন, AnalogClock এলিমেন্টে tintColor="[CONFIGURATION.handColors.0] যোগ করা।

ড্রপ শ্যাডো

ঘড়ির কাঁটার বাস্তবসম্মত এফেক্টের জন্য, প্রতিটি কাঁটার পিছনে ড্রপ শ্যাডো ব্যবহার করলে তা গভীরতার অনুভূতি দিতে পারে।

এটি করতে, একটি AnalogClock-এর মধ্যে প্রতিটি হাতের ধরনের দুটি করে ব্যবহার করুন, একটি হাতের ধরন অন্যটির পিছনে অফসেট করুন এবং যে হাতটি ছায়া হিসেবে দেখানো হচ্ছে তার জন্য আলাদা রিসোর্স ব্যবহার করুন।

ফেস ডেকরেশন

অ্যানালগ ওয়াচফেসে প্রায়ই ঘণ্টার বা মিনিটের সূচক হিসেবে ফেসে সজ্জা থাকে। এটি করার জন্য, দুটি পদ্ধতি আছে:

  1. আপনার আগে থেকে আঁকা ওয়াচ ফেস সহ একটি ফুল-স্ক্রিন ব্যাকগ্রাউন্ড ছবি যোগ করুন। ছবি নিয়ে কাজ করা দেখুন।

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

  2. আলাদা আলাদা সজ্জা আঁকো এবং সেগুলিকে রোটেট করে মুখের চারপাশে পজিশন করো।

    <!-- 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 -->