Delen via


Mesh 201-zelfstudie hoofdstuk 2: Een lokaal niet-gedeeld HTML-bestand laden in een WebSlate

Nu u klaar bent en u een kans hebt gehad om het project uit te proberen, gaan we verder met het uitvoeren van scripts voor webinhoud in WebSlates. Een WebSlate is in feite een groot interactief scherm. U kunt deze gebruiken om dashboards, webpagina's, foto's en video's weer te geven of om te werken met kaarten, diagrammen en gegevens. Op Station 1 laden we een lokaal niet-gedeeld HTML-bestand in een WebSlate.

WebSlate toevoegen aan de scène

  1. Open de beginpuntscène .

  2. Zorg ervoor dat u in het scènevenster bent geplaatst, zodat u voor station 1 staat en hieronder wordt weergegeven.

    Een schermopname van een computerbeschrijving

    Het station heeft al een object met een beschrijvende tekst en een knop Laden . We voltooien het station door een WebSlate toe te voegen onder de knop en vervolgens een scriptgrafiek bij te werken die is gekoppeld aan de knop Laden , zodat wanneer de gebruiker op de knop klikt, een niet-gedeeld HTML-bestand in de WebSlate wordt geladen.

    Alle WebSlates waarmee we gaan toevoegen en/of werken, bevinden zich in de hiërarchie van het MeshWebSlates GameObject.

    Een schermopname van een computerbeschrijving

  3. Vouw in de hiërarchie het object staticSceneObjects samen, indien nodig.

  4. Vouw MeshWebSlates uit en vouw vervolgens het onderliggende object met de naam 1 - LocalWebslate uit.

    Een schermopname van een computerbeschrijving

  5. Zoek in het projectvenster naar de webslateframed-prefab. Zorg ervoor dat u Alle of In Pakketten kiest voor het zoekfilter.

    Een schermopname van een computerbeschrijving

  6. Sleep WebSlateFramed vanuit het venster Project en zet deze vervolgens in de hiërarchie neer in de ruimte tussen 2 - LocalWebslate en ChapterLabel , zodat het het eerste onderliggende object van 2 - LocalWebSlate is.

    Een schermopname van een computerbeschrijving

    Onze WebSlate bevindt zich nu in de scène, maar heeft niet de gewenste grootte of positie.

    Een schermopname van een computerbeschrijving

    Laten we die waarde wijzigen.

  7. Controleer in de hiërarchie of WebSlateFramed is geselecteerd en werk vervolgens in Inspector de schaalwaarden in het onderdeel Transformeren bij naar het volgende:

    Schaal: X = 2,5, Y = 1,5, Z = 1

    Dit is veel beter!

    Een schermopname van een computerbeschrijving

De URL van de WebSlate wijzigen

  1. Vouw in de hiërarchie de prefab WebSlateFramed uit.

  2. Selecteer het onderliggende object van WebSlateFramed met de naam WebSlate.

  3. Ga in Inspector naar het webslate-onderdeel en houd er rekening mee dat de eigenschap Huidige URL (de standaard-URL voor de WebSlate) is ingesteld op de startpagina van Microsoft.

    Een schermopname van een computerbeschrijving

    We gaan de URL wijzigen zodat deze verwijst naar de startpagina voor Microsoft Mesh.

  4. Voeg 'mesh' toe aan het einde van de URL in het tekstvak Huidige URL .

    Een schermopname van een computerbeschrijving

Het knopscript openen

  1. Vouw in de hiërarchie ChapterLabel uit, vouw Vervolgens Acties uit en selecteer Vervolgens LoadButton.

    Een schermopname van een computerbeschrijving

    In de Inspector ziet u dat LoadButton de naam 'HTML laden' heeft. Het onderdeel heeft de eigenschap Bron ingesteld op Graph en maakt verbinding met een scriptassetbestand met de naam LoadButtonLocalStart. Het LoadButton GameObject bevat ook variabelen die we in het script gaan gebruiken.

    Een schermopname van een computerbeschrijving

    Tip

    De eigenschap Bron voor het script heeft twee opties: Graph en Embed. Elk heeft voordelen en nadelen; meer informatie hierover vindt u in het artikel over Unity Script Machine. We gebruiken hier de graph-optie omdat dit type Bron meer flexibiliteit heeft bij het maken van verbinding met Mesh Cloud Scripting.

  2. Klik in het onderdeel ScriptComputer op de knop Graph bewerken.

  3. Het venster Script Graph naast de tabbladen Project en Console parkeren. Klik op het tabblad om de inhoud ervan weer te geven.

    Een schermopname van een computerbeschrijving

Tip: Als u meer ruimte wilt in het venster Scriptgrafiek, kunt u op de drie puntjes klikken en vervolgens Maximaliseren selecteren of op de knop Volledig scherm in de rechterbovenhoek van het venster klikken.

Belangrijk: Houd er rekening mee dat het tweede knooppunt in het script de naam Mesh Interactable Body heeft: is lokaal geselecteerd. Er zijn twee beschikbare "Mesh Interactable Body"-knooppunten; met deze knooppunten kunt u Mesh-interacties gebruiken met Visual Scripting, zoals met interactiegebeurtenissen of om de manipuleerbare doeltransformatie te wijzigen via het visuele script. Als u wilt dat alleen de persoon die een gebeurtenis activeert, deze ondervindt, gebruikt u het knooppunt met de tekst 'Is lokaal geselecteerd'. Als u wilt dat alle deelnemers in het evenement deze ervaren, selecteert u het knooppunt met de tekst 'Is geselecteerd'. Bekijk de verschillen in de onderstaande afbeelding. De tekst boven elk knooppunt kan u helpen het gedrag te bevestigen.

Een schermopname van een computerbeschrijving .

In ons huidige script gebruiken we het knooppunt met Lokaal geselecteerd. Dit betekent dat wanneer de deelnemer op de knop Laden klikt, alleen de nieuwe HTML-pagina wordt weergegeven die in de bijgevoegde webslate wordt geladen.

Een WebSlate-objectvariabele maken

De scriptgrafiek is al voor u gestart. We voeren de taken uit die nodig zijn om de knop Laden op Station 1 in te schakelen om de HTML-pagina te laden.

Het eerste wat we moeten doen, is het maken van een objectvariabele met de waarde van het WebSlate GameObject dat een onderliggend element is voor het WebSlateFramed GameObject.

  1. Typ in het veld Nieuwe variabelenaam de naam WebSlate en druk op Enter.

____________.

  1. Klik op de vervolgkeuzelijst Type en zoek en selecteer WebSlate.

____________.

  1. Sleep het WebSlate GameObject uit de hiërarchie en zet het neer in het veld Waarde voor de nieuwe variabele.

____________.

De HTML-pagina ophalen

  1. Klik op de poort Uitvoer van control van het If-knooppunt en sleep naar rechts. Hiermee opent u de Fuzzy Finder. WAARSCHUWING: Nadat u de Fuzzy Finder hebt geopend, klikt u niet meer buiten de Unity-interface. Hiermee sluit u de Fuzzy Finder en veroorzaakt u onvoorspelbaar gedrag in de scriptgrafiek.

  2. Zoek in de Fuzzy Finder naar 'Web Slate: HTML-inhoud laden (HTML-asset)' en selecteer deze. Houd er rekening mee dat er twee knooppunten zijn met zeer vergelijkbare namen.

    Een schermopname van een computerbeschrijving

    U wilt de html-asset, niet html-inhoud.

    __________________

  3. Sleep de zojuist gemaakte WebSlate-objectvariabele en plaats het knooppunt dat hierboven wordt gegenereerd en links van het knooppunt HTML-inhoud laden.

  4. Verbind de gegevensuitvoerpoort van het knooppunt Objectvariabele ophalen met de eerste gegevensinvoerpoort van het knooppunt HTML-inhoud laden.

    ____________

  5. We hebben al de webpagina die we willen laden in een knooppunt Variabele ophalen in de scriptgrafiek. Sleep een connector van de gegevensuitvoerpoort van het knooppunt Variabele ophalen en verbind deze vervolgens met de gegevensinvoerpoort van het knooppunt HTML-inhoud laden.

    ____________

Uw werk testen

  1. Sla het project op in Unity.

    WAARSCHUWING: Er is momenteel een fout in het project waarin het opslaan ervan kan leiden dat de tekst in de informatietekstvakken verdwijnt.

    Een schermopname van een computerbeschrijving

    De tekst wordt opnieuw weergegeven wanneer u de afspeelmodus invoert. Houd dit in gedachten terwijl u door de andere stations werkt.

  2. Druk op de knop Play van de Unity-editor.

  3. Plaats uzelf voor Station 1 en u ziet dat de WebSlate de startpagina van Microsoft Mesh weergeeft.

    Een schermopname van een computerbeschrijving

  4. Klik op de knop Laden . De WebSlate wordt geladen en geeft een pagina weer van de variabele die u hebt verbonden in de scriptgrafiek met de tekst 'Hallo wereld'.

    Een schermopname van een computerbeschrijving

    Deze pagina is afkomstig van de HTMLAsset-variabele in de scriptgrafiek van de knop.

    Een schermopname van een computerbeschrijving

    TIP: Als u extra inzicht wilt krijgen in de werking van het script, bekijkt u het in de scriptgrafiek terwijl u op de knop Laden klikt. De verbindingslijnen tussen de knooppunten geven informatieve tips en animaties weer.

  5. Wanneer u klaar bent, klikt u op de play-knop van de Unity-editor om de afspeelmodus af te sluiten.

Volgende stappen