أنشئ أول عداد سرعة

افتح المزيد（…）→ مؤشرات مخصصة في لوحة المعلومات وحدد إضافة عداد جديد. يأتي العداد الجديد مزودًا بالفعل بإدخال السرعة الأساسية.

1. انقر على الاسم الموجود أعلى المحرر، وانتقل إلى إعدادات العداد، وقم بتسميته "My Speed".
2. انقر فوق الترس بجوار ربط المدخلات لفتح تكوين المعلمات. التحقق من سرعة الإدخال: المعرف هو speed، النوع البيانات الأساسية، المصدر هو السرعة. إذا كان مفقودًا، استخدم إضافة معلمة لإنشاء واحدة جديدة.
3. انقر فوق تم للعودة إلى الإعدادات وحفظها، ثم العودة إلى منطقة التحرير.

يقرأ البرنامج النصي السرعة عبر $data.current.speed؛ هنا تأتي أسماء الحقول من معرف الإدخال. يوفر المحرر تلميحات الكتابة كما هو محدد. لا يتطلب هذا المثال الربط OBD.

استبدل المحتوى الأصلي بالكامل لمنطقة التحرير بالكود الكامل أدناه. لا تقم بتغليفه في main() آخر. يحتوي هذا المثال على وظيفة إدخال واحدة فقط.

دعونا نحتفظ بالرمز نفسه في الوقت الحالي. سوف يقرأ السرعة الحالية في كل مرة يحتاج إلى رسمها، ويرتب القيم والوحدات لأعلى ولأسفل؛ عندما تكون هناك قراءة مفقودة، سيتم عرض خط أفقي. ويشرح القسم التالي ذلك بترتيب التنفيذ.

function main() {
  const speed = $data.current.speed;
  return (
    <VStack spacing={8}>
      <Text fontSize={64} color={$env.foreground}>
        {speed?.value == null ? '—' : Math.round(speed.value)}
      </Text>
      <Text fontSize={16} color={$env.accent}>
        {speed?.unit ?? $env.speedUnit}
      </Text>
    </VStack>
  );
}

انظر إلى البيانات أولاً، ثم الصورة. لنفترض هذه المرة أن speed هو { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed احصل على هذه القراءة. هنا speed هو كائن يحتوي على قيم ووحدات عددية، وليس الرقم نفسه.
2. speed?.value == null يتحقق من الاختبارات المفقودة. عندما لا يكون الكائن موجودًا أو تكون القيمة فارغة، يتم تحديد '—'؛ عندما تكون القيمة 0، لن يتم أخذ هذا الفرع.
3. يقوم Math.round(speed.value) بتقريب 42.3 إلى 42 ويعطيه إلى Text الأول للعرض. يؤثر التقريب فقط على عرض هذا المقياس ولا يعدل القراءة الأصلية.
4. يعرض Text الثاني speed.unit. في حالة عدم وجود وحدات حاليًا، يستخدم ?? $env.speedUnit وحدة السرعة الخاصة ببيئة العرض الحالية.
5. يقوم VStack بترتيب نصين أحدهما فوق الآخر، ويتحكم spacing={8} في المسافة بينهما.

يوفر $env.foreground و$env.accent النص وألوان التمييز للموضوع الحالي. سيتم تحديث هذه الألوان عندما يتغير الموضوع.

لا تستخدم speed?.value || '—' للحكم على الاختبارات المفقودة: JavaScript سوف يتعامل مع الأصفار الصالحة كقيم خاطئة، مما يتسبب في عرض الخط الأفقي بشكل غير صحيح عند ركن السيارة.

انقر على معاينة أسفل المحرر. يجب أن تشاهد رقم سرعة أكبر في الأعلى ووحدات أصغر في الصف السفلي. الأرقام الموجودة في المعاينة هي قيم محاكاة، ولا تتطلب تشغيل السيارة، ولا تساوي بالضرورة السرعة التي يقيسها الهاتف المحمول في هذا الوقت.

ثم قم بإجراء ثلاثة تعديلات صغيرة، ثم قم بالمعاينة في كل مرة:

تحقق من الأحجام المختلفة والموضوعات الفاتحة والداكنة. عندما يتم اقتصاص المحتوى بحجم معين، قم أولاً بتقليل حجم الخط أو التباعد، ثم لاحظ ذلك. لا تستخدم عددًا كبيرًا من إزاحات x/y لإخفاء مشاكل التخطيط.

في حالة حدوث خطأ، قم بإعادته إلى حالته الأصلية وتحقق وفقًا لرقم السطر الموجود في السجل. عند المعاينة، الزاوية اليمنى العليا هي السجلات؛ بعد إغلاق المعاينة والعودة إلى حالة التحرير، يعود الركن الأيمن العلوي إلى حفظ. المعاينة الناجحة تعني فقط أنه يمكن عرض هذه المجموعة من مدخلات المحاكاة، ويجب التحقق من البيانات الفعلية في الخطوة التالية.

أغلق المعاينة، انقر فوق حفظ، اخرج من المحرر وابحث عن "My Speed" في مكتبة الأدوات. افتح المزيد（…）→ تعديل لوحة العدادات مرة أخرى، وانقر فوق + لإضافته، وأخيرًا انقر فوق تم.

عند هذه النقطة تتغير البطاقة لقراءة السرعة الفعلية. يمكنك وضعه مع عداد السرعة المدمج في نفس الصفحة للتحقق: عندما يستخدمون نفس حقل السرعة الأساسي، يجب أن تتوافق القيم؛ بسبب طرق الاحتفاظ العشرية المختلفة، قد يختلف العرض قليلاً.

في هذه المرحلة، تكون الأداة الأولى كاملة. في المقالة التالية، استبدل "الحصول على السرعة" بـ "احصل على معلمة OBD الخاصة بك"، ويمكن الاستمرار في استخدام التخطيط ورمز العرض.