متابعة التحرير: التخطيط والحركة والمشاركة

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

تقوم الطبقة الخارجية HStack بترتيب الأيقونات والمحتوى على الجانب الأيمن من اليسار واليمين. على اليمين VStack قم بترتيب الأرقام والوحدات لأعلى ولأسفل. إذن ما تراه هو مستويين: السطر بأكمله مرتب يسارًا ويمينًا، والنص مرتب لأعلى ولأسفل.

جرب ثلاثة تعديلات بالتسلسل: قم بتغيير الطبقة الخارجية spacing={12} إلى 24، وستكون الأيقونات والنص متباعدتين بشكل أكبر؛ قم بتغيير الطبقة الداخلية spacing={4} إلى 12، وستكون الأرقام والوحدات متباعدة بشكل أكبر؛ قم بتغيير الطبقة الداخلية alignment="leading" إلى "trailing"، وسيتم محاذاة سطري النص إلى اليمين.

انتبه إلى محاور المحاذاة: يستخدم HStack الخاصية alignment للمحاذاة الرأسية، بينما يحاذي VStack العناصر أفقيًا. تمثل x/y إزاحات بصرية وليست مسافات بين العناصر؛ فهي لا تغيّر مواضع العناصر المجاورة في التخطيط.

بعد تحديد التخطيط، استبدل 78 الثابت بتعبير القراءة في مثال السرعة الأول، وحدد السرعة في إعدادات البيانات. بهذه الطريقة يمكنك تغيير شيء واحد فقط في كل مرة تتدرب فيها.

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" color={$env.accent} />
      <VStack alignment="leading" spacing={4}>
        <Text fontSize={40}>78</Text>
        <Text fontSize={14}>{$env.speedUnit}</Text>
      </VStack>
    </HStack>
  );
}

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

speed / 200 تحصل على النسبة بالنسبة إلى 200، وتقتصر على 0…1 ثم يتم ضربها في 360، وهي الزاوية الحالية المراد رسمها. على سبيل المثال، عندما تكون السرعة 50، تكون الزاوية 90°، وعندما تكون السرعة 100، تكون الزاوية 180°. 200 هنا هو نطاق مثال، باستخدام القيمة الموجودة في وحدة السرعة الحالية، والتي يمكن تعديلها وفقًا لأداتك الخاصة.

startAngle={-90} يضع نقطة البداية في الأعلى؛ sweepAngle يحدد عدد الزوايا التي سيتم مسحها من نقطة البداية. يعني property: 'sweepAngle' في animations تحريك تغيير هذه السمة: عند التغيير من 90° إلى 180°، يستغرق الأمر 0.25 ثانية لإكمال النقل.

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

يعرض التعليمة البرمجية التالية خطًا أفقيًا عند عدم وجود سرعة، دون إخفاء الاختبار المفقود على أنه صفر. يتم رسم الأقواس فقط للقراءات الرقمية الصحيحة.

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

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

يفتحها المستلم باستخدام CapDrive ولا يزال يتعين إضافته إلى الصفحة عبر تعديل لوحة العدادات بعد الاستيراد. قم بتعيين القيم أو النص أو الخيارات الخاصة بك في ربط المدخلات؛ يقوم الإدخال OBD بتحديد معلمات السيارة المقابلة لجهاز المستلم.

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

ما يتم تحريره على الكمبيوتر هو مسودة الأداة المفتوحة حاليًا على الهاتف. أدخل أولاً محرر هذه الأداة على الهاتف المحمول، ثم قم بالاتصال بالترتيب التالي:

1. قم بتوصيل iPhone والكمبيوتر بنفس شبكة Wi-Fi.
2. افتح التحرير عن بُعد في محرر الهاتف المحمول وانتظر ظهور العنوان.
3. أدخل العنوان الكامل المعروض على هاتفك في متصفح جهاز الكمبيوتر الخاص بك. لا تستخدم عنوان الجلسة القديم، ولا تخلط بين المضيف المحلي لجهاز الكمبيوتر الخاص بك وعنوان هاتفك.
4. أبقِ جلسة التحرير على هاتفك المحمول مفتوحة، وقم بتعديل شيء يمكن التعرف عليه بسهولة على جهاز الكمبيوتر الخاص بك، مثل حجم الخط، ثم قم بمعاينة التغييرات على هاتفك المحمول.
5. بعد اكتمال التحرير، ارجع إلى الهاتف المحمول لحفظ الأداة وتأكيدها على لوحة العدادات الفعلية.

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

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

حدد أولاً ما إذا كانت مشكلة في التعليمات البرمجية أو مشكلة في البيانات

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

عندما تكون المعاينة عادية ولكن الأداة الفعلية ليس لها قيمة، تحقق من مصدر البيانات أولاً. تحقق من تحديد موضع السرعة الأساسية، وتحقق من قائمة معلمات الجهاز لـ OBD، ثم تحقق من البيانات وتعبير القراءة المحدد بواسطة الجهاز. لا تستبدل الاختبار المفقود برقم ثابت وتظن أن الاتصال ثابت.

المحتوى مزدحم معًا أو مقطوع

قم أولاً بتقليصه إلى "حاوية واحدة + سطر واحد من النص"، وقم بتأكيد المساحة المتوفرة، ثم أعد الرمز والسطر الثاني من النص والرسومات واحدًا تلو الآخر. تحقق من العرض الثابت والارتفاع وحجم الخط والتباعد. استخدم Stack لترتيب المحتوى؛ استخدم transform عندما تكون هناك حاجة إلى الترجمة الشاملة أو القياس أو التدوير.

الرسوم المتحركة ليس لها أي تأثير

تأكد أولاً من أن السمة الهدف نفسها تتغير بالفعل، ثم تأكد من أن animations.property يشير إلى هذه السمة. تم إصلاح sweepAngle={180} الذي لا يدور من تلقاء نفسه لمجرد الإعلان عن الرسوم المتحركة. تحقق أولاً باستخدام البيانات التي تم تغييرها في المعاينة، ثم قم بالتحديث وفقًا للبيانات الفعلية.

قم بإجراء فحص كامل قبل الحفظ

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