Accessing Raspberry Pi From a Smartphone Part 1 – Implementing VNC

Accessing Raspberry Pi From a Smartphone Part 1 – Implementing VNC

raspberrypi26_main

Let’s try displaying our Raspberry Pi desktop on a smartphone screen!
We’ve already introduced remote access with Windows in “Making a Portable Raspberry Pi with the Raspberry Pi A+“. Today, I want to try doing that with an iPhone. Which means touch functionality! We will use a network to use our phones into touch panels and further upgrade the Raspberry Pi’s functionality!

What is VNC?

Virtual Network Computing – Wikipedia

In computing, Virtual Network Computing (VNC) is a graphical desktop sharing system that uses the Remote Frame Buffer protocol (RFB) to remotely control another computer. It transmits the keyboard and mouse events from one computer to another, relaying the graphical screen updates back in the other direction, over a network.

Today, our Raspberry Pi will play the role of the “server” and the iPhone will be our “client.” We need to prepare softwares on both of them.

VNC (Virtual Network Computing) – Raspberry Pi Documentation

There was VNC documentation on the official Raspberry Pi site. This page introduces the steps for installing a package named “tightvncserver” and continuing until self-execution. Today, let’s follow along with the documentation and try using “tightvncserver” as our server software!

Raspberry Pi Setup

Debian — Details of package tightvncserver
VNC stands for “Virtual Network Computing.” In other words, this is a remote desktop display system that allows you to access a variety of machines with different architectures from anywhere on the internet.

Let’s start with some basic setup for the Raspberry Pi, and install the “tightvncserver” package.

apt-get install tightvncserver

The “tightvncserver” package does not come preinstalled in Raspbian, but if you have installed “xrdp” or other remote access packages, it may already be installed.
Once the installation is finished, access the help menu and confirm the commands.

raspberrypi26_img01

Figure 1

It seems that we have to use the “-kill” option when we want to quit. The “DISPLAY#” refers to the VNC display number. It is expressed by putting a colon before the number. This will come up several times, so try and remember the format.

Now, let’s start it up!

tightvncserver

This is all we need for a startup command. For the first startup, we will need to input a password.

You will require a password to access your desktops.
Password:

You will see the above prompt. Enter your password twice for confirmation purpose.
 The character count for your password needs to be from 6 to 8 characters. If your password is 5 characters or fewer in length, you will get a “Password too short” message and be unable to complete registration. Passwords of 9 characters or longer will get a “Warning: password truncated to the length of 8.” message, and a password truncated to 8 characters will be registered.
We will need this password when connecting from the app, so don’t forget it!

Would you like to enter a view-only password (y/n)?

After the initial password setup, you will be asked whether you want to set a view-only password. Input “y” if you need one, and, as before, use a password of 6 to 8 characters in length.

New 'X' desktop is raspberrypi:1

When you see the above message, the preparations are finished!
The number at the end of the line is the “display number” of the VNC you started up. The number is used when quitting the VNC or connecting to it from an app.
 The documentation displays the number “0”, but when I tried I got the number “1”.

ip a

Now, let us confirm our IP address. We will use a smartphone, and connect it to wifi.
The documentation continues, but if you can get this far you are OK! (Let’s leave the rest for next time!)
Now, let’s move on to installing the client software.

 iPhone Setup

For our VNC client, we will use an iPhone. There are many VNC apps, but today I decided to use something called “VNC Viewer.”

VNC Viewer – iTunes
VNC Viewer for iOS

It’s free and highly functional (It seems it was a paid app before). The instruction images were easy to understand, so I was able to do everything easily. There is an android version too.

raspberrypi26_img03

Figure 2

After you install “VNC Viewer,” start the app and tap the “+” button on the top right.

IMG_7287

Figure 3

A settings screen will be displayed. In the “Address” field, input the IP address and display number separated by a colon.

(i.e.) 192.168.0.7:1

In the “Name” field, just put any name. After inputting everything, finish by tapping the “Save” button on the top right.

IMG_7288

Figure 4

Once registration for the connection destination is complete, the above screen will be displayed. Tap the center “Connect” button to begin the connection. You will see a warning about encryption, but just continue with the connection.

raspberrypi26_img06

Figure 5

If you are able to connect without a hitch, you should see the password input screen. Put in the password you set up early from the Raspberry Pi. Then, tap “Done.”

raspberrypi26_img07

Figure 6

Display the Raspberry Pi desktop from your smartphone!
 You can now access the Raspberry Pi with touch functionality!

VNC Viewer Screen Explanation

Generally, it is easier to see if you put your phone in landscape view. You can also pinch to zoom.
 Instead of the point you touch, your touch input changes the location of the mouse cursor.

raspberrypi26_img08

Figure 7

Swiping upwards from the button displays a toolbar like shown in the above picture. If you want to fix this bar the to screen, tap the pin on the leftmost side. 
To display detailed usage information, tap the “?” icon located on the second to the right.

raspberrypi26_img09

Figure 8

The illustrations make it easy to understand! The basic functionalities are the same for smartphone and tablet.
 I found the fourth illustration from top right difficult: double-tap & drag. It is used when dragging a string of characters or zooming a window, but the new movement took a while to get used to. 
Let’s look at the four remaining icons from left to right.

raspberrypi26_img10

Figure 9

When pressing the second icon from the left, a keyboard will be displayed at the bottom of the screen. You can use this for the LX Terminal, text editors, and other things. It is to be used in combination with the mouse cursor. Tapping the Ctrl or Alt keys highlights the button and signals a long button press. Use Ctrl+Alt+Del to start the task manager. In other word, shortcuts work too!
 With the keyboard on, the display will shrink accordingly, so I recommend you put the screen in portrait mode only when using the keyboard.

raspberrypi26_img11

Figure 10

Next is the mouse icon located third from the left. This makes mouse-like operation on the screen possible. The right side is the wheel. This is useful when scrolling through a long screen. The grey part are the mouse buttons. This is a great feature for those who aren’t comfortable with touch functionality!

raspberrypi26_img12

Figure 11

The 4th icon, “i” stands for “information.” You can use it to view information about VNC Viewer.
The last “x” mark is, as you can see, the close button. Tap this to close the viewer.

Summary

The Raspberry Pi uses commands for everything, so being able to use a touch screen is great! Maybe because it uses the native iPhone keyboard, but character input is actually quite comfortable. Operations are almost identical to that of a standard smartphone, so I could not help getting the strange feeling while playing around that the iOS had simply been replaced by Raspbian.

Next time, we will continue using VNC.
 It’s part two of the Raspberry Pi Official Documentation: setting up autorun. We will setup VNC to start up automatically when Raspberry Pi is turned on!