Output WebGL Content on a Screen

Overview

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.

Goals

• Setup the Video Output
• Get the required container
• Run the container
• Change the video output

Required Hardware and Software

• Arduino Portenta X8
• USB-C cable (either USB-C to USB-A or USB-C to USB-C)
• USB-C hub with HDMI
• External monitor
• HDMI cable

Instructions

Install The Container

There are two ways to get the container, either through

foundriesFactories

With Foundries.io:

If you use Foundries.io you can switch the current

target

x-kiosk-imx8-webgl

Copy
1//Change the app to an existing one
2fioctl devices config updates --apps "x-kiosk-imx8-webgl" <deviceName> -f <yourFactoryName>
3
4//Make a clean installation with no containers
5fioctl 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 token
8//You can logout:
9fioctl logout
10
11//Then login again and follow the instructions
12fioctl 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

Connect to a Wi-Fi

Check the available Wi-Fi access points

Copy
1nmcli de wifi
2
3//Output
4IN-USE  BSSID              SSID             MODE   CHAN  RATE        SIGNAL  BARS  SECURITY
5        AA:BB:CC:DD:EE:FF  <yourAP-SSID>    Infra  X     130 Mbit/s  --      *     WPA2

You can save your Wi-Fi details with these commands:

Copy
1nmcli c add type wifi con-name <customName> ifname wlan0 ssid <SSID>
2nmcli con modify <customName> wifi-sec.key-mgmt wpa-psk
3nmcli con modify <customName> wifi-sec.psk <PASSWORD>
4nmcli con up <customName>
5
6//To disconnect from a custom connection
7nmcli con down <customName>
8
9//To delete a saved connection
10nmcli 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:

Copy
1nmcli de
2
3//Output
4DEVICE   TYPE      STATE                   CONNECTION
5usb0     ethernet  connected               usbrndis
6usb1     ethernet  connected               usbecm
7wlan0    wifi      connected               <customName>
8docker0  bridge    connected (externally)  docker0

Get Your Board's IP

Copy
1ifconfig wlan0
2
3//Output
4wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
5        inet <localIP>  netmask 255.255.255.0  broadcast <broadcastIP>

Test your IP connection by exiting the

adb shell

exit

Copy
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

Copy/push the Container

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:

Copy
1scp <folderName> fio@<portentaX8-IP>:<desiredPath>

Video Output Setup

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

You can interact with the interface by plugging USB devices to your hub, like a mouse or a keyboard.

Running The Container

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:

Copy
1//Connect to your device
2ssh fio@<portentaX8-IP>
3
4//Change directory
5cd <containerPath>
6
7//Compose with docker
8docker-compose up --detach
9
10//Stop the docker-compose
11docker-compose stop

Edit The Output

You can change the URL of the web output, by going to the container's directory and editing the

docker-compose.yml

Copy
1//Connect to your device
2ssh fio@<portentaX8-IP>
3
4//Change directory
5cd <containerPath>
6
7//Edit the file with VIM
8vim 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

Conclusion

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.

Next Steps

• Make your own HTML content, push it to your device and output that content.
• You could make an app that shows information about the weather in a web and having that on a display.

Troubleshooting

• If you tried to connect with

  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:

Copy
1//<portentaX8-ip> <type> <fingerprint>
2192.168.50.8 ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAasdaddgre<kopPOTYAAABBBM8EZPWPKdRRGHpSMosJM08R1d10G0h5g5rE4cNjXdJtYpmJNOR+X2FhNRpEdvyDGHfSomJepbaqBoRcCi0Y7M=