تخصيص واجهة مستخدم Azure IoT Central

مقالة
05/24/2023

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

تظهر لقطة الشاشة التالية صفحة تستخدم النسق القياسي:

تظهر لقطة الشاشة التالية صفحة باستخدام لقطة شاشة مخصصة مع تمييز عناصر واجهة المستخدم المخصصة:

تلميح

يمكنك أيضا تخصيص الصورة المعروضة في شريط عناوين المستعرض وقائمة المفضلة.

إنشاء نسق

لإنشاء نسق مخصص، انتقل إلى قسم المظهر في صفحة التخصيص .

في هذه الصفحة، يمكنك تخصيص الجوانب التالية لتطبيقك:

شعار التطبيق

صورة PNG، لا يزيد حجمها عن 1 ميغابايت، مع خلفية شفافة. يعرض هذا الشعار إلى اليسار على شريط عنوان تطبيق IoT Central.

إذا كانت صورة الشعار تتضمن اسم التطبيق الخاص بك، يمكنك إخفاء نص اسم التطبيق. لمزيد من المعلومات، راجع إدارة التطبيق الخاص بك.

أيقونة المستعرض (favicon)

صورة PNG، لا يزيد حجمها عن 32 × 32 بكسل، مع خلفية شفافة. يمكن لمستعرض الويب استخدام هذه الصورة في شريط العناوين والمحفوظات والإشارات المرجعية وعلامة تبويب المستعرض.

ألوان المستعرض

يمكنك تغيير لون رأس الصفحة واللون المستخدم لتمييز الأزرار والتمييزات الأخرى. استخدم قيمة لون سداسي عشري لستة أحرف بالتنسيق ##ff6347. لمزيد من المعلومات حول تدوين الألوان HEX Value، راجع ألوان HTML.

ملاحظة

يمكنك دائما العودة إلى الخيارات الافتراضية في قسم المظهر .

التغييرات للمشغلين

إذا قام المسؤول بإنشاء نسق مخصص، فلن يتمكن المشغلون والمستخدمون الآخرون لتطبيقك من اختيار نسق في المظهر.

استبدال ارتباطات التعليمات

لتوفير معلومات تعليمات مخصصة للمشغلين والمستخدمين الآخرين، يمكنك تعديل الارتباطات الموجودة في قائمة تعليمات التطبيق.

لتعديل ارتباطات التعليمات، انتقل إلى قسم ارتباطات التعليمات في صفحة التخصيص .

يمكنك أيضا إضافة إدخالات جديدة إلى قائمة التعليمات وإزالة الإدخالات الافتراضية:

ملاحظة

يمكنك دائما العودة إلى ارتباطات التعليمات الافتراضية في صفحة التخصيص .

تغيير نص التطبيق

لتغيير تسميات النص في التطبيق، انتقل إلى قسم النص في صفحة التخصيص .

في هذه الصفحة، يمكنك تخصيص نص التطبيق الخاص بك لجميع اللغات المدعومة. بعد تحميل الملف النصي المخصص، يظهر نص التطبيق تلقائيا مع النص المحدث. يمكنك إجراء المزيد من التخصيصات عن طريق تحرير ملف التخصيص والكتابة فوقه. يمكنك تكرار العملية لأي لغة تدعمها واجهة مستخدم IoT Central.

يوضح المثال التالي كيفية تغيير الكلمة Device إلى Asset عند عرض التطبيق باللغة الإنجليزية:

حدد Add application text وحدد اللغة الإنجليزية في القائمة المنسدلة.
قم بتنزيل الملف النصي الافتراضي. يحتوي الملف على تعريف JSON للسلاسل النصية التي يمكنك تغييرها.

افتح الملف في محرر نص وقم بتحرير السلاسل الجانبية اليمنى لاستبدال الكلمة device كما asset هو موضح في المثال التالي:

{
  "Device": {
    "AllEntities": "All assets",
    "Approve": {
      "Confirmation": "Are you sure you want to approve this asset?",
      "Confirmation_plural": "Are you sure you want to approve these assets?"
    },
    "Block": {
      "Confirmation": "Are you sure you want to block this asset?",
      "Confirmation_plural": "Are you sure you want to block these assets?"
    },
    "ConnectionStatus": {
      "Connected": "Connected",
      "ConnectedAt": "Connected {{lastReportedTime}}",
      "Disconnected": "Disconnected",
      "DisconnectedAt": "Disconnected {{lastReportedTime}}"
    },
    "Create": {
      "Description": "Create a new asset with the given settings",
      "ID_HelpText": "Enter a unique identifier this asset will use to connect.",
      "Instructions": "To create a new asset, select an asset template, a name, and a unique ID. <1>Learn more <1></1></1>",
      "Name_HelpText": "Enter a user friendly name for this asset. If not specified, this will be the same as the asset ID.",
      "Simulated_Label": "Simulate this asset?",
      "Simulated_HelpText": "A simulated asset generates telemetry that enables you to test the behavior of your application before you connect a real asset.",
      "Title": "Create a new asset",
      "Unassigned_HelpText": "Choosing this will not assign the new asset to any asset template.",
      "HardwareId_Label": "Hardware type",
      "HardwareId_HelpText": "Optionally specify the manufacturer of the asset",
      "MiddlewareId_Label": "Connectivity solution",
      "MiddlewareId_HelpText": "Optionally choose what type of connectivity solution is installed on the asset"
    },
    "Delete": {
      "Confirmation": "Are you sure you want to delete this asset?",
      "Confirmation_plural": "Are you sure you want to delete these assets?",
      "Title": "Delete asset permanently?",
      "Title_plural": "Delete assets permanently?"
    },
    "Entity": "Asset",
    "Entity_plural": "Assets",
    "Import": {
      "Title": "Import assets from a file",
      "HelpText": "Choose the organization that can access the assets you’re importing, and then choose the file you’ll use to import. <1>Learn more <1></1></1>",
      "Action": "Import assets with an org assignment from a chosen file.",
      "Upload_Action": "Upload a .csv file",
      "Browse_HelpText": "You’ll use a CSV file to import assets. Click “Learn more” for samples and formatting guidelines."
    },
    "JoinToGateway": "Attach to gateway",
    "List": {
      "Description": "Grid displaying list of assets",
      "Empty": {
      "Text": "Assets will send data to IoT Central for you to monitor, store, and analyze. <1>Learn more <1></1></1>",
      "Title": "Create an Asset"
      }
    },
    "Migrate": {
      "Confirmation": "Migrating selected asset to another template. Select migration target.",
      "Confirmation_plural": "Migrating selected assets to another template. Select migration target."
    },
    "Properties": {
      "Definition": "Asset template",
      "DefinitionId": "Asset template ID",
      "Id": "Asset ID",
      "Name": "Asset name",
      "Scope": "Organization",
      "Simulated": "Simulated",
      "Status": "Asset status"
    },
    "Rename": "Rename asset",
    "Status": {
      "Blocked": "Blocked",
      "Provisioned": "Provisioned",
      "Registered": "Registered",
      "Unassociated": "Unassociated",
      "WaitingForApproval": "Waiting for approval"
    },
    "SystemAreas": {
      "Downstreamassets": "Downstream assets",
      "Module_plural": "Modules",
      "Properties": "Properties",
      "RawData": "Raw data"
    },
    "TemplateList": {
      "Empty": "No definitions found.",
      "FilterInstructions": "Filter templates"
    },
    "Unassigned": "Unassigned",
    "Unblock": {
      "Confirmation": "Are you sure you want to unblock this asset?",
      "Confirmation_plural": "Are you sure you want to unblock these assets?"
    }
  }
}

قم بتحميل ملف التخصيص الذي تم تحريره وحدد حفظ لمشاهدة النص الجديد في التطبيق:

تستخدم واجهة المستخدم الآن القيم النصية الجديدة:

يمكنك إعادة تحميل ملف التخصيص مع مزيد من التغييرات عن طريق تحديد اللغة ذات الصلة من القائمة في قسم النص في صفحة التخصيص .

الخطوات التالية

الآن بعد أن تعلمت كيفية تخصيص واجهة المستخدم في تطبيق IoT Central، إليك بعض الخطوات التالية المقترحة:

Share via