2) Inspect the HTML5 Demo
3) Deploy your own web
project onto the board
When the board is done booting, you see an HTML5 demo on screen. You can swipe
the screen
(A)
to access different demo apps. Pushing the frame will open the demo
(B)
. You see a web app created with the Ionic 2 framework. On the LEDs demo screen,
you will see the client gui app communicating with the Node.js server app, which
provides the hardware access. In the example
(C)
the LEDs are controlled using the
libmraa GPIO interface, which accesses the Linux kernel sysfs GPIOs.
It is very easy to get started with your own project. If the content will be hosted on the
board, you can just copy the client web content to the board. It will then be displayed by
the browser engine.
Ethernet connection peer-to-peer
The Ethernet interface of the board is configured to have a fixed IP which is
192.168.3.11/255.255.255.0.This is suitable for a peer-to-peer connection to your
development machine. You can directly connect the Ethernet cable to the board.
Ethernet connection managed network
Additionally a DHCP client is running. When you connect the board to a network served
by a DHCP server, an address will automatically be requested. In that case, you need to
substitute 192.168.3.11 with the acquired address, throughout the following paragraph.
Copy your files
There are three network services running on the board: ssh, sftp and Node.js. To upload
your files, you can use sftp. There should be a sftp tool for any host OS.
Jump to the description with your OS and afterwards continue with reading section 4).
OS: Windows
You can use WinSCP, which is an open-source tool, to copy your files. Open WinSCP and
create a new sftp connection to 192.168.3.11
port 22 using the “root” user with no pass-
word
(D)
. When connecting for the first time, the ssh server on the board will create a new
random ssh key, which you need to trust
(E)
. Once the connection is established, navigate
to the directory /srv/nodejs/apps/phytec-html5-demo/www/
(F)
. The index.html file will be
provisioned by the web server. Just copy your web content to this directory, replacing the
index.html. If you don‘t have any web content at hand, you can also use this test page:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Yes!</h1>
<p>YoucreatedyourrstWebapp.</p>
</body>
</html>
The easiest way to test the new content is to just reboot the board. Open a new terminal
with WinSCP using
Ctrl+T
, select
OK
for a separate shell session and execute
reboot (G)
.
OS: MacOS
MacOS has all the tools on board to control the embedded target. Open two Terminals
found under /Applications/Utilities, as shown in
(H)
. The first Terminal will be used to upload
a custom index.html. Navigate to the folder where the new index.html is situated using cd.
ssh certificate as trusted by typing yes. Type put index.html to upload the new file and
overwrite the pre-deployed file. In the second Terminal, open a ssh session by entering
OS: Linux
Linux can work exactly as the MacOS workflow, or you can just use Nautilus in Gnome (I).
Open connect to server using the URL:
your web content to the board, reboot the board using a teminal as described for MacOS.
After rebooting, you should see the new “index.html” on screen (J)
.
A
D
C
F
H
I
J
G
E
4) Redirecting the URL
Instead of providing the web content on the board, you might want to connect the board
to a network and point the web browser to an external URL. To achieve that, you can use
the previously mentioned method to connect to the board with sftp. But this time navi-
gate to /lib/systemd/system/qtwebbrowser.service. Download the file and edit it on the
host. The start URL is specified within the ExecStart setting. Its default is http://localhost.
Set the desired URL, upload the modified file back to the target and reboot the board.
Continue exploring the Development Kit
In our Demo we use the Ionic 2 framework and implement an exemplary workflow to help
you getting started with modern web app development. Please continue reading the full
documentation at: www.phytec.de/HTML5-Kit
Enjoy!
