Anpassen des Ladebildschirms

die Bibliothek XRExtras von 8th Wall bietet Module , die die gängigsten Anforderungen von WebAR-Anwendungen erfüllen, einschließlich des Ladebildschirms, der Social Link-Out Flows und der Fehlerbehandlung.

Das Modul Laden zeigt ein Lade-Overlay und eine Abfrage der Kamerazulassung an, während die Bibliotheken geladen werden und die Kamera startet. Es ist das erste, was Ihre Benutzer sehen, wenn sie Ihr WebAR-Erlebnis beginnen.

In diesem Abschnitt wird beschrieben, wie Sie den Ladebildschirm anpassen können, indem Sie Werte angeben, die die Farbe von , den Ladespinner und die Ladeanimation ändern, um sie an das Gesamtdesign Ihres Erlebnisses anzupassen.

Zu überschreibende ID's / Klassen

Ladebildschirm	iOS (13+) Motion Sensor Prompt
#requestingCameraPermissions #requestingCameraIcon #loadBackground #loadImage	.prompt-box-8w .prompt-button-8w .button-primary-8w Um den Text anzupassen, können Sie einen MutationObserver verwenden. Sehen Sie sich dazu das Codebeispiel unten an.

Parameter der A-Frame Komponente

Wenn Sie XRExtras mit einem A-Frame-Projekt verwenden, können Sie mit dem Modul xrextras-loading den Ladebildschirm über die folgenden Parameter ganz einfach anpassen:

Parameter	Typ	Beschreibung
cameraBackgroundColor	Hex-Farbe	Hintergrundfarbe des oberen Bereichs des Ladebildschirms hinter dem Kamerasymbol und dem Text (siehe oben). Ladebildschirm #1)
loadBackgroundColor	Hex-Farbe	Hintergrundfarbe des unteren Bereichs des Ladebildschirms hinter dem loadImage (Siehe oben. Ladebildschirm #3)
loadImage	ID	Die ID eines Bildes. Das Bild muss ein <a-asset> sein (siehe oben. Ladebildschirm #4)
loadAnimation	String	Animationsstil von loadImage. Wählen Sie zwischen spin (Standard), pulse, scale oder none

Beispiel einer A-Frame-Komponente

<A-Szene
  tap-place
  xrextras-almost-there
  xrextras-loading="
    loadBackgroundColor: #007AFF;
    cameraBackgroundColor: #5AC8FA;
    loadImage: #myCustomImage;
    loadAnimation: pulse"
  xrextras-runtime-error
  xrweb>

<a-assets>
  <img id="myCustomImage" src="assets/my-custom-image.png">
</a-assets>

Javascript/CSS-Methode

const load = () => {
  XRExtras.Loading.showLoading()
  console.log('loading spinner anpassen')
  const loadImage = document.getElementById("loadImage")
  if (loadImage) {
    loadImage.src = require("./assets/my-custom-image.png")
  }
}
window.XRExtras ? load() : window.addEventListener('xrextrasloaded', load)

CSS-Beispiel

#requestingCameraPermissions {
  color: black !important;
  background-color: white !important;
}
#requestingCameraIcon {
  /* Dies ändert das Bild von weiß zu schwarz */
  filter: invert(1) !important;
}

.prompt-box-8w {
  background-color: white !important;
  color: #00FF00 !important;
}
.prompt-button-8w {
  background-color: #0000FF !important;
}

.button-primary-8w {
  background-color: #7611B7 !important;
}

iOS (13+) Bewegungssensor Eingabeaufforderung Textanpassung

let inDom = false
const observer = new MutationObserver(() => {
  if (document.querySelector('.prompt-box-8w')) {
    if (!inDom) {
      document.querySelector('.prompt-box-8w p').innerHTML = '<strong>Mein neuer Text kommt hier hin</strong><br/><br/>Drücken Sie Approve, um fortzufahren.'
      document.querySelector('.prompt-button-8w').innerHTML = 'Deny'
      document.querySelector('.button-primary-8w').innerHTML = 'Genehmigen'
    }
    inDom = true
  } else if (inDom) {
    inDom = false
    observer.disconnect()
  }
})
observer.observe(document.body, {childList: true})