دليل شامل لإنشاء قوالب العرض العام وتحريرها وإدارتها في بوابتك.
Disclaimer
The mentioned functionalities may be restricted depending on the purchased software license.
إدارة قالب العرض العام
تُعد قوالب العرض العام أساس تصوراتك المخصصة. فهي تحدد التخطيط والبنية والعناصر المرئية التي سيتم تطبيقها على تركيباتك. يغطي هذا الدليل الشامل كل شيء بدءًا من إنشاء القوالب الأساسية وصولًا إلى تقنيات التصميم المتقدمة.
📋 نظرة عامة
ما هي قوالب العرض العام؟
تعمل القوالب بمثابة مخططات قابلة لإعادة الاستخدام تعمل على:
- 📐 تحديد التخطيطات المرئية لعروضك العامة
- 🧩 تنظيم كتل المحتوى ومواضعها
- 🎨 إرساء اتساق التصميم عبر تركيبات متعددة
- ⚙️ تمكين النشر السريع للتصورات الموحدة
- 🔄 دعم التحديثات السهلة عبر جميع التكوينات المرتبطة
الفوائد الرئيسية
| الميزة | الوصف |
|---|---|
| 🚀 الكفاءة | أنشئ مرة واحدة واستخدم عبر تركيبات متعددة |
| 🎯 الاتساق | حافظ على معايير تصميم موحدة |
| 🔧 المرونة | تعديل سهل دون إعادة الإنشاء من البداية |
🚀 البدء
سير عمل القالب
- 📐 تصميم التخطيط - خطط بنيتك المرئية
- 🎨 إنشاء القالب - أنشئه باستخدام محرر القوالب
- 💾 حفظ القالب - خزّنه لإعادة استخدامه عبر التركيبات
المتطلبات الأساسية
قبل إنشاء القوالب، تأكد من توفر ما يلي لديك:
- ✅ حساب SmartgridX مع الأذونات المناسبة
- ✅ أهداف تصميم واضحة للتصور الخاص بك
- ✅ متطلبات المحتوى (الصور ونقاط البيانات والتخطيطات)
🎛️ واجهة إدارة القوالب
الوصول إلى مدير القوالب
خطوات التنقل:
- سجّل الدخول إلى حسابك في SmartgridX
- انتقل إلى "الشاشات العامة" في الشريط الجانبي الرئيسي
- انقر على زر 'قالب العرض العام' في صفحة النظرة العامة
تفتح هذه الخطوة واجهة إدارة القوالب، حيث يمكنك عرض القوالب وإنشاءها وتحريرها وحذفها.
جدول نظرة عامة على القوالب
الإجراءات المتاحة:
- ➕ إضافة - زر أخضر لبدء إنشاء قالب
- ✏️ تحرير - تعديل تصميم قالب موجود
- 🗑️ حذف - إزالة قالب غير مستخدم
🎨 عملية إنشاء القالب
بدء قالب جديد
انقر على زر "إنشاء قالب جديد" لفتح واجهة محرر القوالب.
تكوين رأس القالب
إعدادات العنوان
عنوان القالب:
- الغرض: يحدد القالب في القوائم والتكوينات
- أفضل الممارسات: استخدم أسماء وصفية خاصة بالمشروع
- أمثلة: "Factory-KPI-Dashboard"، "Energy-Monitoring-Layout"، "Multi-Zone-Display"
تكوين الهامش
تحدد إعدادات الهامش المنطقة الآمنة من حدود الشاشة:
منزلق الهامش (0-100px):
- 📐 النطاق: من 0 إلى 100 بكسل من حافة الشاشة
- 🎯 الغرض: إنشاء مسافة آمنة لمنع اقتطاع المحتوى
- 📱 التطبيق: ضمان الرؤية على أنواع شاشات مختلفة
- ⚙️ التوصية: استخدم 10-20px للشاشات القياسية، و30-50px للشاشات الممتدة من حافة إلى حافة
التأثير المرئي:
- هامش 0px - يمتد المحتوى إلى حواف الشاشة
- هامش 50px - يبدأ المحتوى على بُعد 50 بكسل من جميع الحدود
- هامش 100px - أقصى منطقة آمنة مع مسافة كبيرة عن الحدود
وظيفة الحفظ
يتيح لك زر الحفظ 💾 (في الزاوية العلوية اليمنى) حفظ القالب الحالي.
🧩 نظام تخطيط الكتل
فهم نظام الشبكة
أساسيات الشبكة
يستخدم محرر القوالب نظام شبكة قائمًا على النسب بحجم 100×100:
خصائص الشبكة:
- 📐 الأبعاد: عرض 100 وحدة × ارتفاع 100 وحدة
- 📊 الوحدات: قيم نسبية (وحدة واحدة = 1% من البعد الإجمالي)
- 🎯 الدقة: تتيح تحديد المواضع والأحجام بدقة
- 📱 الاستجابة: تتكيف تلقائيًا مع أحجام الشاشات المختلفة
أمثلة على تخطيط الكتل
التكوين: 100 عرض × 100 ارتفاع
النتيجة: تغطية ملء الشاشة
حالة الاستخدام: تصور واحد كبير، أو صورة ملء الشاشة
┌─────────────────────────────────┐
│ │
│ FULL BLOCK │
│ │
│ │
└─────────────────────────────────┘التكوين: كتلتان بعرض 50 × ارتفاع 100
النتيجة: تخطيط شاشة منقسمة
حالة الاستخدام: عروض المقارنة، وعرض بيانات مزدوجة
┌─────────────────┬───────────────┐
│ │ │
│ BLOCK 1 │ BLOCK 2 │
│ │ │
│ │ │
└─────────────────┴───────────────┘التكوين: كتلتان بعرض 100 × ارتفاع 50
النتيجة: تكديس رأسي
حالة الاستخدام: تخطيطات الرأس/المحتوى، والعنوان/التفاصيل
┌─────────────────────────────────┐
│ BLOCK 1 │
│ │
├─────────────────────────────────┤
│ BLOCK 2 │
│ │
└─────────────────────────────────┘التكوين: أربع كتل بعرض 50 × ارتفاع 50
النتيجة: تخطيط رباعي
حالة الاستخدام: لوحات معلومات متعددة المقاييس، وشبكات المقارنة
┌─────────────────┬───────────────┐
│ BLOCK 1 │ BLOCK 2 │
│ │ │
├─────────────────┼───────────────┤
│ BLOCK 3 │ BLOCK 4 │
│ │ │
└─────────────────┴───────────────┘معالجة الكتل
إضافة الكتل
الطريقة: انقر على زر "إضافة كتلة" (في أعلى يمين المحرر)
النتيجة: تظهر كتلة جديدة بأبعاد افتراضية
الخطوات التالية: حدد موضعها وقم بتغيير حجمها حسب الحاجة
تحديد مواضع الكتل
السحب والإفلات:
- 🖱️ انقر مع الاستمرار على أي كتلة لتحريكها
- 📍 المعاينة في الوقت الفعلي تعرض الموضع أثناء السحب
- 🧲 يساعد الالتقاط إلى الشبكة على المحاذاة الدقيقة
- 👁️ تظهر الأدلة المرئية للمساعدة في المحاذاة
تغيير حجم الكتل
مقبض تغيير الحجم:
- 📐 تعرض الزاوية السفلية اليمنى مقبض تغيير الحجم عند تحديد الكتلة
- 🔧 اسحب لتغيير الحجم بالعرض والارتفاع في الوقت نفسه
- 📊 تعرض القيم في الوقت الفعلي الأبعاد الحالية
عناصر التحكم الدقيقة
لوحة الموضع الجانبية اليمنى
عند تحديد كتلة، توفر اللوحة اليمنى ما يلي:
عناصر التحكم في الموضع:
- 📍 الموضع X - الإزاحة الأفقية من الحافة اليسرى (0-100)
- 📍 الموضع Y - الإزاحة الرأسية من الحافة العلوية (0-100)
- 🎨 الفهرس Z - ترتيب الطبقات للكتل المتداخلة
- 📏 العرض - النسبة المئوية لعرض الكتلة (1-100)
- 📏 الارتفاع - النسبة المئوية لارتفاع الكتلة (1-100)
⚙️ تكوين الكتل
أنواع الكتل وخصائصها
الوصول إلى تكوين الكتلة
الطريقة:
- حدد كتلة في مساحة عمل المحرر
- تظهر لوحة التكوين في أسفل الشاشة
- تُعد القائمة المنسدلة لنوع الكتلة خيار التكوين الرئيسي
ملاحظة: لا يمكن تكوين جميع الكتل حاليًا. سيتغير ذلك مع استمرار التطوير. ستتم إضافة المزيد من أنواع الكتل في التحديثات المستقبلية.
أنواع الكتل المتاحة
الغرض: عرض الصور الثابتة والشعارات والخلفيات وملفات GIF خيارات التكوين:
- 📁 مصدر الصورة - ملف مرفوع أو عنوان URL سيُستخدم كافتراضي لهذه الكتلة. يمكنك ترك هذا الحقل فارغًا إذا كنت تريد فرض اختيار صورة من الإعدادات
حالات الاستخدام:
- شعارات الشركات والعلامة التجارية
- صور الخلفية
- صور المعدات
- صور GIF
الغرض: عرض القيم في الوقت الفعلي
حالات الاستخدام:
- نظرة سريعة على بيانات الطاقة الشمسية لديك
الغرض: تصور اتجاهات البيانات والمقارنات
خيارات التكوين:
- 📊 نوع المخطط - خطي، شريطي
حالات الاستخدام:
- تصور بيانات الإنتاج والطاقة في الوقت الفعلي
أمثلة على القوالب
يوضح هذا المثال قالبًا منظمًا جيدًا يتضمن:
- 📊 تنظيمًا واضحًا للكتل مع تسميات وصفية
- 📐 تباعدًا ومحاذاة مناسبين
- 🎯 أنواع كتل وظيفية لتلبية احتياجات المحتوى المختلفة
تسمية الكتل في هذا المثال:
- تعرض كل كتلة الغرض المقصود منها
- تساعد التسميات الواضحة في التكوين
- يدعم التنظيم المنطقي عمليات الصيانة
📚 الوثائق ذات الصلة
الخطوات التالية
بعد إنشاء القالب الخاص بك:
- ⚙️ تكوين التركيبات - طبّق القوالب على تركيبات محددة
- 🎛️ ربط وحدات التحكم - الاتصال بأجهزة العرض
- 🚀 دليل البدء - نظرة عامة كاملة على سير العمل
مواضيع متقدمة
- 🎨 تقنيات التصميم المتقدمة
- 📊 تكامل البيانات المخصصة
- 🔄 تحديثات القوالب الآلية
- 👥 التعاون على القوالب بين عدة مستخدمين
💡 ملخص أفضل الممارسات
تصميم القوالب
✅ مبادئ التصميم:
- 🎯 حافظ على البساطة - ركّز على المعلومات الأساسية
- 📱 صمّم بشكل متجاوب - اختبر التصميم على أحجام شاشات مختلفة
- 🎨 حافظ على الاتساق - استخدم ألوانًا وتخطيطات موحّدة
إدارة القوالب
✅ نصائح التنظيم:
- 📝 استخدم أسماء وصفية - لتسهيل العثور على القوالب
- 🔄 الصيانة الدورية - أزل القوالب غير المستخدمة
- 👥 شارك المعايير - لضمان الاتساق داخل الفريق
🎨 هل أنت مستعد للتصميم؟ بعد إنشاء قالبك وتكوينه، ستكون مستعدًا لنشر تصورات مذهلة عبر تركيبات SmartgridX الخاصة بك!