Přizpůsobení uživatelského rozhraní Azure IoT Central

  • Článek

Tento článek popisuje, jak můžete přizpůsobit uživatelské rozhraní aplikace použitím vlastních motivů, změnou textu a úpravou odkazů na nápovědu tak, aby odkazy na vaše vlastní zdroje nápovědy.

Následující snímek obrazovky ukazuje stránku se standardním motivem:

Snímek obrazovky znázorňující výchozí motiv uživatelského rozhraní

Následující snímek obrazovky ukazuje stránku s vlastním snímkem obrazovky se zvýrazněnými přizpůsobenými prvky uživatelského rozhraní:

Snímek obrazovky s vlastním motivem uživatelského rozhraní

Tip

Můžete také přizpůsobit obrázek zobrazený v adresní řádku prohlížeče a v seznamu oblíbených položek.

Vytvoření motivu

Pokud chcete vytvořit vlastní motiv, přejděte na stránce Vlastní nastavení do části Vzhled.

Snímek obrazovky se stránkou pro přizpůsobení vzhledu

Na této stránce můžete přizpůsobit následující aspekty aplikace:

Obrázek PNG, ne větší než 1 MB, s průhledným pozadím. Toto logo se zobrazí vlevo v záhlaví aplikace IoT Central.

Pokud obrázek loga obsahuje název aplikace, můžete text názvu aplikace skrýt. Další informace najdete v tématu Správa aplikace.

Ikona prohlížeče (favicon)

Obrázek PNG, ne větší než 32 x 32 pixelů, s průhledným pozadím. Webový prohlížeč může tento obrázek použít na panelu Adresa, historii, záložkách a kartě prohlížeče.

Barvy prohlížeče

Můžete změnit barvu záhlaví stránky a barvu, která se používá pro zvýrazňující tlačítka a další zvýraznění. Použijte šestiznakovou šestnáctkovou hodnotu barvy ve formátu ##ff6347. Další informace o barevném zápisu hodnoty HEX najdete v tématu Barvy HTML.

Poznámka

Kdykoli se můžete vrátit k výchozím možnostem v části Vzhled .

Změny operátorů

Pokud správce vytvoří vlastní motiv, pak už operátoři a ostatní uživatelé vaší aplikace nebudou moct vybrat motiv v části Vzhled.

Chcete-li operátorům a dalším uživatelům poskytnout vlastní informace nápovědy, můžete upravit odkazy v nabídce Nápověda aplikace.

Pokud chcete odkazy na nápovědu upravit, přejděte do části Odkazy na nápovědu na stránce Vlastní nastavení .

Snímek obrazovky, který ukazuje, jak přizpůsobit odkazy na nápovědu

Můžete také přidat nové položky do nabídky nápovědy a odebrat výchozí položky:

Snímek obrazovky se seznamem odkazů na nápovědu

Poznámka

Kdykoli se můžete vrátit k výchozím odkazům na nápovědu na stránce Vlastní nastavení .

Změna textu aplikace

Pokud chcete změnit textové popisky v aplikaci, přejděte na stránce Vlastní nastavení do části Text.

Na této stránce můžete přizpůsobit text aplikace pro všechny podporované jazyky. Po nahrání vlastního textového souboru se automaticky zobrazí text aplikace s aktualizovaným textem. Další úpravy můžete provést úpravou a přepsáním souboru vlastního nastavení. Tento proces můžete opakovat pro libovolný jazyk, který uživatelské rozhraní IoT Central podporuje.

Následující příklad ukazuje, jak změnit slovo Device na Asset při zobrazení aplikace v angličtině:

  1. Vyberte Přidat text aplikace a v rozevíracím seznamu vyberte angličtinu.

  2. Stáhněte výchozí textový soubor. Soubor obsahuje definici JSON textových řetězců, které můžete změnit.

  3. Otevřete soubor v textovém editoru a upravte řetězce na pravé straně tak, aby se slovo nahradilo, deviceasset jak je znázorněno v následujícím příkladu:

    {
  "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?"
    }
  }
}

  4. Nahrajte upravený soubor vlastního nastavení a vyberte Uložit , aby se nový text zobrazil v aplikaci:

    Snímek obrazovky znázorňující, jak nahrát vlastní textový soubor

    Uživatelské rozhraní teď používá nové textové hodnoty:

    Snímek obrazovky s aktualizovaným textem v uživatelském rozhraní

Soubor vlastního nastavení můžete znovu načíst s dalšími změnami tak, že ze seznamu v části Text na stránce Vlastní nastavení vyberete příslušný jazyk.

Další kroky

Teď, když jste se naučili, jak přizpůsobit uživatelské rozhraní v aplikaci IoT Central, tady je několik navrhovaných dalších kroků: