Delen via


De gebruikersinterface van Azure IoT Central aanpassen

In dit artikel wordt beschreven hoe u de gebruikersinterface van uw toepassing kunt aanpassen door aangepaste thema's toe te passen, de tekst te wijzigen en de Help-koppelingen te wijzigen zodat deze verwijzen naar uw eigen aangepaste Help-resources.

In de volgende schermopname ziet u een pagina met het standaardthema:

Schermopname van het standaard ui-thema.

In de volgende schermopname ziet u een pagina met een aangepaste schermafbeelding met de aangepaste UI-elementen gemarkeerd:

Schermopname van een aangepast ui-thema.

Tip

U kunt ook de afbeelding aanpassen die wordt weergegeven in de adresbalk en lijst met favorieten van de browser.

Thema maken

Als u een aangepast thema wilt maken, gaat u naar de sectie Vormgeving op de pagina Aanpassing .

Schermopname van de pagina voor het aanpassen van het uiterlijk.

Op deze pagina kunt u de volgende aspecten van uw toepassing aanpassen:

Een PNG-afbeelding, niet groter dan 1 MB, met een transparante achtergrond. Dit logo wordt weergegeven op de titelbalk van de IoT Central-toepassing.

Als uw logoafbeelding de naam van uw toepassing bevat, kunt u de tekst van de toepassingsnaam verbergen. Zie Uw toepassing beheren voor meer informatie.

Browserpictogram (favicon)

Een PNG-afbeelding, niet groter dan 32 x 32 pixels, met een transparante achtergrond. Een webbrowser kan deze afbeelding gebruiken in de adresbalk, geschiedenis, bladwijzers en het browsertabblad.

Browserkleuren

U kunt de kleur van de paginakoptekst en de kleur wijzigen die wordt gebruikt voor accentknoppen en andere markeringen. Gebruik een hexadecimale kleurwaarde van zes tekens in de notatie ##ff6347. Zie HTML-kleuren voor meer informatie over hex-waardekleur notatie.

Notitie

U kunt altijd terugkeren naar de standaardopties in de sectie Vormgeving .

Wijzigingen voor operators

Als een beheerder een aangepast thema maakt, kunnen operators en andere gebruikers van uw toepassing geen thema meer kiezen in Vormgeving.

Als u aangepaste Help-informatie wilt verstrekken aan uw operators en andere gebruikers, kunt u de koppelingen wijzigen in het menu Help van de toepassing.

Als u de Help-koppelingen wilt wijzigen, gaat u naar de sectie Help-koppelingen op de pagina Aanpassing .

Schermopname van het aanpassen van de Help-koppelingen.

U kunt ook nieuwe vermeldingen toevoegen aan het Help-menu en standaardvermeldingen verwijderen:

Schermopname van de lijst met Help-koppelingen.

Notitie

U kunt altijd terugkeren naar de standaardkoppelingen voor Help op de pagina Aanpassing .

Toepassingstekst wijzigen

Als u tekstlabels in de toepassing wilt wijzigen, gaat u naar de sectie Tekst op de pagina Aanpassing .

Op deze pagina kunt u de tekst van uw toepassing aanpassen voor alle ondersteunde talen. Nadat u het aangepaste tekstbestand hebt geüpload, wordt de toepassingstekst automatisch weergegeven met de bijgewerkte tekst. U kunt verdere aanpassingen aanbrengen door het aanpassingsbestand te bewerken en te overschrijven. U kunt het proces herhalen voor elke taal die door de IoT Central-gebruikersinterface wordt ondersteund.

In het volgende voorbeeld ziet u hoe u het woord Device Asset wijzigt in wanneer u de toepassing in het Engels bekijkt:

  1. Selecteer Toepassingstekst toevoegen en selecteer de Engelse taal in de vervolgkeuzelijst.

  2. Download het standaardtekstbestand. Het bestand bevat een JSON-definitie van de tekenreeksen die u kunt wijzigen.

  3. Als u het woord device assetwilt vervangen door, opent u het bestand in een teksteditor en bewerkt u de waardetekenreeksen, zoals wordt weergegeven in het volgende voorbeeld:

    {
      "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. Upload het bewerkte aanpassingsbestand en selecteer Opslaan om de nieuwe tekst in de toepassing weer te geven:

    Schermopname van het uploaden van een aangepast tekstbestand.

    De gebruikersinterface gebruikt nu de nieuwe tekstwaarden:

    Schermopname van bijgewerkte tekst in de gebruikersinterface.

U kunt het aanpassingsbestand opnieuw laden met verdere wijzigingen door de relevante taal te selecteren in de lijst in de sectie Tekst op de pagina Aanpassing .

Volgende stappen

Nu u hebt geleerd hoe u de gebruikersinterface in uw IoT Central-toepassing kunt aanpassen, volgen hier enkele voorgestelde volgende stappen: