How can I change the permission screen to be in Portuguese? Or completely modify the screen?
You can read the following in the documentation:
OK. But I want to customize most of the screens that 8th wall has. To put them in Portuguese.
but it helped me a lot too.
I made a component for translating the loading pages. It’s utilizing my localization module.
// app.js
// Import of components and primitives
import { loadingLocalization } from './src/js/components/loadscreen/loading-localization.js';
// Register components and primitives
AFRAME.registerComponent('loading-localization', loadingLocalization);
<!-- body.html -->
<a-scene
loading-localization
...
>
// ./src/js/components/loadscreen/loading-localization.js
import { localize, getCurrentLanguage } from "../../utils/language-helper";
const loadingLocalization = {
init() {
const load = () => {
const loadingScreen = document.getElementById('loadBackground');
const cameraDeniedSafari = document.getElementById('cameraPermissionsErrorApple');
const cameraDeniedAndroid = document.getElementById('cameraPermissionsErrorAndroid');
const motionSensorDenied = document.getElementById('userPromptError');
const motionSensorHardDenied = document.getElementById('motionPermissionsErrorApple');
let inDom = false;
const changeText = (element, str) => {
if (element) { element.textContent = localize(str) }
}
const changeHTML = (element, htmlStr) => {
if (element) { element.innerHTML = htmlStr }
}
// Adding elements to loading screen
if (loadBackground) {
const container = document.createElement('section');
const dunkersLogo = document.createElement('img');
const h1 = document.createElement('h1');
const tagline = document.createElement('p');
container.classList = 'welcome-screen normal center-text';
logotype.classList = 'welcome-screen__logotype';
h1.classList = 'welcome-screen__headline center-text';
tagline.classList = 'center-text';
logotype.src = `./img/logotype.png`;
h1.innerHTML = `${localize('welcome_to')} <br/> <span class="bold">Nu och då</span>`;
tagline.textContent = localize('tagline');
container.appendChild(logotype);
container.appendChild(h1);
container.appendChild(tagline);
loadingScreen.appendChild(container);
}
// Translating page that pops up if the user denies access to the camera on Android
if (cameraDeniedAndroid && getCurrentLanguage != 'en') {
changeText(cameraDeniedAndroid.querySelector('.loading-error-header'), 'camera_denied_android_header');
changeText(cameraDeniedAndroid.querySelector('li:nth-child(1)'), 'camera_denied_android_general_step1');
changeText(cameraDeniedAndroid.querySelector('li:nth-child(2)'), 'camera_denied_android_general_step2');
changeText(cameraDeniedAndroid.querySelector('li.chrome-instruction:nth-child(3)'), 'camera_denied_android_step3');
changeText(cameraDeniedAndroid.querySelector('li.chrome-instruction:nth-child(4)'), 'camera_denied_android_step4');
changeText(cameraDeniedAndroid.querySelector('li.chrome-instruction:nth-child(5)'), 'camera_denied_android_step5');
changeText(cameraDeniedAndroid.querySelector('li.chrome-instruction:nth-child(6)'), 'camera_denied_android_step6');
changeText(cameraDeniedAndroid.querySelector('li.samsung-instruction:nth-child(7)'), 'camera_denied_samsung_step3');
changeText(cameraDeniedAndroid.querySelector('li.samsung-instruction:nth-child(8)'), 'camera_denied_samsung_step4');
changeText(cameraDeniedAndroid.querySelector('li.samsung-instruction:nth-child(9)'), 'camera_denied_samsung_step5');
changeText(cameraDeniedAndroid.querySelector('li.samsung-instruction:nth-child(10)'), 'camera_denied_samsung_step6');
changeText(cameraDeniedAndroid.querySelector('.loading-error-footer'), 'camera_denied_android_reload');
}
// Translating page that pops up if the user denies access to the camera on Safari
if (cameraDeniedSafari) {
changeText(cameraDeniedAndroid.querySelector('#cameraPermissionsErrorAppleMessage'), 'camera_denied_reload');
changeHTML(cameraDeniedAndroid.querySelector('.bottom-message'), localize('camera_denied_safari_bottom') + '<span class="wk-app-name"></span>');
}
// Translating when user denied the first motion sensor access question on Safari
if (motionSensorDenied) {
changeText(cameraDeniedAndroid.querySelector('h1'), 'motion_denied_header');
changeText(cameraDeniedAndroid.querySelector('p'), 'motion_denied_body');
changeText(cameraDeniedAndroid.querySelector('button'), 'button_refresh');
// Translating when user denied the second motion sensor access question on Safari
if (motionSensorHardDenied) {
changeText(cameraDeniedAndroid.querySelector('h1'), 'motion_denied_header');
changeText(cameraDeniedAndroid.querySelector('p:first-of-type'), localize('motion_denied_body') + '<span class="wk-app-name"></span>');
changeText(cameraDeniedAndroid.querySelector('p:last-of-type'), 'motion_hard_deny_body');
}
}
// Translating and styling the gyro access request popup for Safari
const observer = new MutationObserver(() => {
const promptBox = document.querySelector('.prompt-box-8w');
if (promptBox) {
if (!inDom) {
const bodyEl = promptBox.querySelector('.prompt-box-8w p');
const buttonCancel = promptBox.querySelector('.prompt-button-8w');
const buttonPrimary = promptBox.querySelector('.button-primary-8w');
const h2 = document.createElement('h2');
h2.textContent = localize('safari_gyro_titel');
promptBox.insertBefore(h2, bodyEl);
promptBox.querySelector('.prompt-button-container-8w').classList.add('button-container');
promptBox.classList.add('dialog');
promptBox.classList.add('dialog--safari-motion-request');
bodyEl.style.margin = '0';
buttonCancel.classList.value = '';
buttonPrimary.classList.value = 'primary';
changeText(bodyEl, 'safari_gyro_body');
changeText(buttonCancel, 'button_cancel');
changeText(buttonPrimary, 'button_approve');
}
inDom = true;
} else if (inDom) {
inDom = false;
observer.disconnect();
}
});
observer.observe(document.body, {childList: true});
}
window.XRExtras ? load() : window.addEventListener('xrextrasloaded', load)
},
}
export {loadingLocalization}
gave this error:
Build failed for [7976d3c] with errors:
./loadingLocalization.js
Module not found: Error: Can't resolve '../../utils/language-helper' in '/tmp/src/awsolution.teste2'
I didn’t find this path anywhere.
that email you sent me. the link is the code that is in the path. Do I have to put that code in my project?
You also need to add the code from my localization module.
I added it but it still has the error
Build failed for [7976d3c] with errors:
./loadingLocalization.js
Module not found: Error: Can't resolve '../../utils/language-helper' in '/tmp/src/awsolution.teste2'
You need to change this line so it points to the the correct path.
import { localize, getCurrentLanguage } from "../../utils/language-helper";
but now it won’t load. keeps loading forever. I already have code that makes augmented reality lighter. and all the things I have are now as light as possible.
I managed to switch from English to Portuguese. Using Importing XRExtras into Cloud Editor | 8th Wall and installing it in my program.
But I would really like you to detect the location and translate, that would help me a lot.
Well, my localization module already does that. You need to switch from Swedish to Portuguise:
// In addition to DEFAULT_LANGUAGE (English)
const supportedLanguages = {
'pt-PT': 'pt',
'pt': 'pt',
};