Skip to content

Commit f0efb32

Browse files
marqdevxmarqdevx
committed
Add draft
1 parent bcddc46 commit f0efb32

File tree

1 file changed

+187
-0
lines changed
  • content/hardware/04.pro/boards/portenta-x8/tutorials/display-output-webgl

1 file changed

+187
-0
lines changed

‎content/hardware/04.pro/boards/portenta-x8/tutorials/display-output-webgl/content.md

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
title: 'Output webGL content on a Screen'
3+
description: 'This tutorial shows how to install and modify a container that outputs web browser and webGL content'
4+
difficulty: easy
5+
tags:
6+
- containers
7+
- Docker
8+
- WebGL
9+
- Vim
10+
author: 'Pablo Marquínez'
11+
software:
12+
- Terminal
13+
- Docker
14+
hardware:
15+
- hardware/04.pro/boards/portenta-x8
16+
---
17+
18+
## Overview
19+
20+
[Docker](http://docker.com) Is a platform full of applications, called containers. Containers are isolated solutions and thus they don't have to depend on your environment. Making them portable and consistent throughout development, testing and production.
21+
22+
You can download, install, use and share applications in the form of containers. You can find all the available containers on the [hub.docker.com](https://hub.docker.com) page.
23+
24+
In this tutorial we will go through the steps of how to install, run and remove the [Hello-World Container](https://hub.docker.com/_/hello-world)
25+
26+
## Goals
27+
28+
- List the installed and running containers
29+
- Install a container
30+
- Run a container manually
31+
- Uninstall a container
32+
33+
### Required Hardware and Software
34+
35+
- [Arduino Portenta X8](https://store.arduino.cc/products/portenta-x8)
36+
- USB-C cable (either USB-C to USB-A or USB-C to USB-C)
37+
- USB-C hub with HDMI
38+
- External monitor
39+
- HDMI cable
40+
41+
## Setup the Video Output
42+
43+
The Portenta X8 contains a GPU so its able to manage video and display that content.
44+
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.
45+
46+
***You can interact with the interface by plugging USB devices on your hub, like a mouse and a keyboard.***
47+
48+
[X8 home-screen]()
49+
50+
## Install The Container
51+
52+
There are two ways to get the container, either through `foundriesFactories` or downloading the container from [portenta-containers repository](https://github.com/arduino/portenta-containers)
53+
54+
If you use [Foundries.io](https://www.foundries.io) you just can switch the current `target` of your device to `x-kiosk-imx8-webgl` by switching the app from a terminal on your computer:
55+
56+
```
57+
//Change the app to an existing one
58+
fioctl devices config updates --apps "x-kiosk-imx8-webgl" <deviceName> -f <yourFactoryName>
59+
60+
//Make a clean installation with no containers
61+
fioctl devices config updates --apps "," <deviceName> -f <yourFactoryName>
62+
63+
//If you are getting issues to do so, make sure you are logged correctly with your token
64+
//You can logout:
65+
fioctl logout
66+
67+
//Then login again and follow the instructions
68+
fioctl login
69+
```
70+
71+
## Setting The Container
72+
73+
### Foundries Option
74+
If you did it within **Foundries.io** you will see the home-screen for some seconds and then it will fade-out and open the Aquarium 3D from [WebGL samples - Aquarium](https://webglsamples.org/aquarium/aquarium.html).
75+
76+
### "Offline" Option
77+
In case you downloaded the [portenta-containers repository](https://github.com/arduino/portenta-containers) and pushed the container to your Portenta X8, you will need to connect your board directly to your computer and run the `adb shell`.
78+
79+
#### Connect to a Wi-Fi
80+
81+
Check the available Wi-Fi access points
82+
```
83+
nmcli de wifi
84+
85+
//Output
86+
IN-USE BSSID SSID MODE CHAN RATE SIGNAL BARS SECURITY
87+
AA:BB:CC:DD:EE:FF <yourAP-SSID> Infra X 130 Mbit/s -- * WPA2
88+
```
89+
90+
You can save your WiFi details by following this commands:
91+
```
92+
nmcli c add type wifi con-name <customName> ifname wlan0 ssid <SSID>
93+
nmcli con modify <customName> wifi-sec.key-mgmt wpa-psk
94+
nmcli con modify <customName> wifi-sec.psk <PASSWORD>
95+
nmcli con up <customName>
96+
97+
//To disconnect from a custom connection
98+
nmcli con down <customName>
99+
100+
//To delete a saved connection
101+
nmcli c delete <customName>
102+
```
103+
104+
To check that it has been correctly connected, you will see the LED on Green.
105+
If you want to check it in your terminal you can type
106+
```
107+
nmcli de
108+
109+
//Output
110+
DEVICE TYPE STATE CONNECTION
111+
usb0 ethernet connected usbrndis
112+
usb1 ethernet connected usbecm
113+
wlan0 wifi connected <customName>
114+
docker0 bridge connected (externally) docker0
115+
```
116+
117+
#### Get Your Board's IP
118+
```
119+
ifconfig wlan0
120+
121+
//Output
122+
wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
123+
inet <localIP> netmask 255.255.255.0 broadcast <broadcastIP>
124+
```
125+
126+
Test your IP connection by exiting the `adb shell`, you can use **CTRL+Z** or typing `exit`, then try to connect through **ssh** with:
127+
```
128+
ssh fio@<localIP>
129+
```
130+
***To connect through ssh it will request the user's password, which is "fio".***
131+
***If you have troubles connecting with the ssh, please check the troubleshooting section at the end of this tutorial***
132+
133+
#### Copy/push the container
134+
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:
135+
```
136+
scp <folderName> fio@<portentaX8-IP>:<desiredPath>
137+
```
138+
139+
## Running The Container
140+
If you get it from **Foundries.io** it will run automatically after few seconds.
141+
142+
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:
143+
144+
```
145+
//Connect to your device
146+
ssh fio@<portentaX8-IP>
147+
148+
//Change directory
149+
cd <containerPath>
150+
151+
//Compose with docker
152+
docker-compose up --detach
153+
154+
//Stop the docker-compose
155+
docker-compose stop
156+
```
157+
158+
## Edit The Output
159+
You can change the URL of the web output, by going to the container's directory and editing the `docker-compose.yml` file:
160+
```
161+
//Connect to your device
162+
ssh fio@<portentaX8-IP>
163+
164+
//Change directory
165+
cd <containerPath>
166+
167+
//Edit the file with VIM
168+
vim docker
169+
```
170+
171+
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.
172+
173+
To save the changes press the **ESC** key and type `:wq` this will write and quit the **VIM** editor.
174+
175+
After editting it you will need to compose the container again.
176+
177+
## Conclusion
178+
179+
In this tutorial you learned how to get the container onto your device, run it and edit the URL.
180+
181+
### Next Steps
182+
183+
- Make your own HTML content, push it to your device and output that content.
184+
- You could make an app that shows information about the weather in a web and having that on a display.
185+
186+
## Troubleshooting
187+
- 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` and try again the **ssh** connection.

0 commit comments

Comments
 (0)