Phytec phyBOARD-Mira i.MX 6 HTML-Kit Quick Start Manual

Quick

Start

Guide

Germany

PHYTEC Messtechnik GmbH
D-55129 Mainz
Tel.: [phone]
Fax: [phone]

www.phytec.de
www.phytec.eu

USA

PHYTEC America LLC
Bainbridge Island, WA 98110
Phone: [phone]
Fax: [phone]

www.phytec.com

France

PHYTEC France SARL
F-72140 Sillé le Guillaume
Phone:[phone]
Fax: [phone]

www.phytec.fr

India

PHYTEC Embedded Pvt. Ltd.
Kormangala, Bangalore
560095 Karnataka
Phone: [phone]

www.phytec.in

China

PHYTEC Information Technology Co. Ltd.
Anlian Plaza, 4018 Jin Tian Road
Futian District, Shenzhen
518026 P.R. China

www.phytec.cn

L-837e_1

Carrier Board (PB -01501-1201I

phyBOARD®-Mira i.MX 6

phyBOARD®-Mira i.MX 6 HTML-Kit

Get your phyBOARD

®

-Mira powered up and connected in just a few simple steps.

1) Preparing the Hardware

1. Check the kit content (see overview on the right hand side).

2. Have your connection cables at hand: You need a power supply and optionally a standard

Ethernet cable. Phytec offers an accessory kit which includes these cables.

3. Power up the phyBOARD-Mira. For the 24 V-kit version (A): Connect the 2-pin PHOENIX
connector (included) to a 12 V-24 V (

±

10%) DC power supply.

Please note the polarity of the connectors, see picture

(A)

!

If you have bought the optional power supply with your kit, it comes already with the 2-pin connector wired.

4. Turn your power supply on and plug the 2-pin PHOENIX connector into the green jack of your kit.
The Power LED D2 will light up.

Kit Contents — phyBOARD- Mira i.MX 6 (PB-01501-005) includes:

2-pin PHOENIX

CAN and RS232 Adapter

Evaluation
Module Power Module 12 V-24 V
(PEB-EVAL-01) (PEB-POW-01)

Carrier Board
(PB -01501-1201I) 7“ D ispla y with
capacitive Touch

Additional Equipment required

Power Adapter 5 V or 24 V Ethernet Cable

12V-24V-kit version

A

+ GND

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>YoucreatedyourrstWebapp.</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.
Enter sftp root@192.168.3.11:/srv/nodejs/apps/phytec-html5-demo/www/ . Accept the
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

ssh root@192.168.3.11 and reboot the board with reboot.

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:

sftp://root@192.168.3.11/srv/nodejs/apps/phytec-html5-demo/www/ . After copying

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!

B