The Arduino Portenta X8's processor NXP® i.MX 8M Mini Processor can be used for 3D rendering, this will allow us to display 3D content on a screen or video output, the device is using OpenGL to process the 3D related calculations. In this tutorial we will render web content from the internet using WebGL and display it on a screen, using an USB Hub. We will go through the steps of how to setup, install and modify the video output.
There are two ways to get the container, either through
foundriesFactories
or downloading the container from portenta-containers repositoryWith Foundries.io:
If you use Foundries.io you can switch the current
target
of your device to x-kiosk-imx8-webgl
by switching the app from a terminal on your computer:1//Change the app to an existing one2fioctl devices config updates --apps "x-kiosk-imx8-webgl" <deviceName> -f <yourFactoryName>3
4//Make a clean installation with no containers5fioctl devices config updates --apps "," <deviceName> -f <yourFactoryName>6
7//If you are getting issues to do so, make sure you are logged correctly with your token8//You can logout:9fioctl logout10
11//Then login again and follow the instructions12fioctl login
You will now see the home-screen for some seconds and then it will fade-out and open the Aquarium 3D from WebGL samples - Aquarium.
With downloaded repository: In case you downloaded the portenta-containers repository you will need to connect your board directly to your computer and run the
adb shell
, then push the container to your Portenta X8.Check the available Wi-Fi access points
1nmcli de wifi2
3//Output4IN-USE BSSID SSID MODE CHAN RATE SIGNAL BARS SECURITY5 AA:BB:CC:DD:EE:FF <yourAP-SSID> Infra X 130 Mbit/s -- * WPA2
You can save your Wi-Fi details with these commands:
1nmcli c add type wifi con-name <customName> ifname wlan0 ssid <SSID>2nmcli con modify <customName> wifi-sec.key-mgmt wpa-psk3nmcli con modify <customName> wifi-sec.psk <PASSWORD>4nmcli con up <customName>5
6//To disconnect from a custom connection7nmcli con down <customName>8
9//To delete a saved connection10nmcli c delete <customName>
If the LED is on and green then we know that has been correctly connected. If you want to check it in your terminal, you can type:
1nmcli de2
3//Output4DEVICE TYPE STATE CONNECTION5usb0 ethernet connected usbrndis6usb1 ethernet connected usbecm7wlan0 wifi connected <customName>8docker0 bridge connected (externally) docker0
1ifconfig wlan02
3//Output4wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 15005 inet <localIP> netmask 255.255.255.0 broadcast <broadcastIP>
Test your IP connection by exiting the
adb shell
, you can use CTRL+Z or typing exit
, then try to connect through ssh with:1ssh fio@<localIP>
To connect through ssh it will request the user's password, which is "fio". If you have troubles connecting with the ssh, please check the troubleshooting section at the end of this tutorial
You can push the container from your computer, first open a terminal on the container's directory, then you can use this command to send the container to the Portenta X8:
1scp <folderName> fio@<portentaX8-IP>:<desiredPath>
Now we need a USB Hub that has a video output connector, like for an HDMI cable. Connect the Portenta X8 to the USB Hub as a Host, the video connector to a display, the power supply USB to your computer. We could also connect a USB mouse to the hub, this step is optional.
The setup should look like this:
By default if you connect the board to a display you will see the "home-screen" with the
Arduino PRO
background wallpaper, and a bottom bar with the real time.You can interact with the interface by plugging USB devices to your hub, like a mouse or a keyboard.
If you got the container from Foundries.io it will run automatically after few seconds.
In case you copied from the repository, you will need to initialize it with docker by accessing your Portenta X8 through ssh, going to the directory where you copied it and run it from there:
1//Connect to your device2ssh fio@<portentaX8-IP>3
4//Change directory5cd <containerPath>6
7//Compose with docker8docker-compose up --detach9
10//Stop the docker-compose11docker-compose stop
You can change the URL of the web output, by going to the container's directory and editing the
docker-compose.yml
file:1//Connect to your device2ssh fio@<portentaX8-IP>3
4//Change directory5cd <containerPath>6
7//Edit the file with VIM8vim docker-compose.yml
Once you are inside the VIM editor, to edit the file you will need to press insert and replace the url as shown in the screenshot.
To save the changes press the ESC key and type
:wq
this will write and quit the VIM editor. After editing it you will need to compose the container again.In this tutorial we went through how to connect the board and display something on a screen. Using a container from FoundriesFactories or by downloading it and uploading it to your Portenta X8. Lastly, we showed how to edit the video output by editing the container.
ssh
and you get a fingerprint issue you will need to remove the IP and fingerprint on your .ssh
file, on windows the file is at C:\Users\<yourUsername>\.ssh\known_hosts
and try again the ssh connection.Example:
1//<portentaX8-ip> <type> <fingerprint>2192.168.50.8 ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAasdaddgre<kopPOTYAAABBBM8EZPWPKdRRGHpSMosJM08R1d10G0h5g5rE4cNjXdJtYpmJNOR+X2FhNRpEdvyDGHfSomJepbaqBoRcCi0Y7M=