Skip to content

Openframe User Guide

Ishac Bertran edited this page Mar 5, 2016 · 17 revisions

Friendly disclaimer: This project is under active development; we cannot promise everything will work 100%. Feedback and pull requests are welcome :)

1. Create a user account

Go to openframe.io/new-account to create a new user account.

2. Setup a frame

Although technically it can run on any computer, Openframe is developed for the Raspberry Pi.

Requirements
  • Raspberry Pi 1, 2, or 3(!) w/ power adaptor
  • HDMI monitor (or any monitor with an HDMI adaptor)
  • SD card pre-flashed w/ NOOBS
  • WiFi dongle
  • Keyboard + Mouse
  • HDMI Cable

If you're looking for a starter pack, this would work well: Starter pack

2.1 Initial setup

  1. Insert the SD card, WiFi dongle, and connect the monitor, keyboard and mouse.
  2. Plug in the Pi, and follow the directions on screen, selecting Rasbian.
  3. Once the installation finishes, the Pi will reboot and open to the configuration screen.
  4. Select your timezone in Internationalisation Options > Change Timezone
  5. If you wish, change your password (the default password is raspberry)
  6. Select 'Finish', then 'Yes' when it asks about rebooting.
  7. When the Pi reboots, login with the root user (pi) and password (raspberry, unless you changed it).

2.2 Setup WiFi

  1. After you're logged in at the command line, we'll start up the GUI in order to configure WiFi. At the command line type startx to launch the GUI.
  2. Once the GUI is open, click the network icon in the upper right-hand corner, and select your WiFi network. Enter the password at the prompt, and connect.
  3. Assuming the WiFi has connected successfully, click 'Menu' on the upper left and select 'Shutdown', then select the 'Logout' option, and press 'Ok'.

2.3 Install Node.js

Download Node.js source:

For Raspberry Pi 2 Model B

Type the following:
wget https://nodejs.org/dist/v4.3.0/node-v4.3.0-linux-armv7l.tar.xz
tar -xf node-v4.3.0-linux-armv7l.tar.xz
cd node-v4.3.0-linux-armv7l

For Raspberry Pi Model A, B, B+ and Compute Module

Type the following:
wget https://nodejs.org/dist/v4.3.0/node-v4.3.0-linux-armv6l.tar.xz
tar -xf node-v4.3.0-linux-armv6l.tar.xz
cd node-v4.3.0-linux-armv6l

__

After installing Node.js, copy to /usr/local:
sudo cp -R * /usr/local/

And setup the permissions for npm to work globally:
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

2.4 Install Openframe

You should now be able to install Openframe!

npm install -g openframe

The installation might take quite some time since it will be upgrading a number of packages.

2.5 Frame configuration [optional]

Change the rotation of the display

Most displays are landscape by default. To use a portrait orientation, edit the Raspberry Pi configuration file:

sudo nano /boot/config.txt

and add at the end:

display_rotate=1

This will rotate the display by 90° counterclockwise. Use 2 for 180°, or 3 for 270°.

Add a timer

If you want your frame to go to sleep at certain hours, edit crontab:

crontab -e

and add at the end of the file:

00 23 * * * vcgencmd display_power 0   
30 7 * * * vcgencmd display_power 1

This will turn OFF the display of the frame at 23:00, and turn it ON at 7:30 in the morning. Change the values for different times. Learn more about crontab to setup different timer for different days of the week.

2.6 Start the frame

Ready? Just type:

openframe

If it's the first time you start the frame, it will ask you for your username, password and a name for this frame.

You're now ready to start displaying artwork!

3. Display artwork

Quick guide to send artwork to your frame:

  • Go to openframe.io and login.
  • Under the tab Collection, click the button Add artwork to add artwork to your collection by clicking. Then click the arrow button to push the artwork to your frame.
  • You can also push artwork from the Stream (artwork uploaded by other users).

3.1 Formats

Openframe currently supports three types of formats:

  • Images (PNG, JPG, JPEG)
  • GIF's
  • Websites
  • Shaders

If you'd like to add artwork with a different format (Processing, OpenFrameworks, etc.) you can create an extension to support this new format.

3.2 The Stream

The Stream is a public repository of artwork that people has posted with the label public. You can like artwork from the Stream to add it to your Collection.

3.3 The Collection

The Collection contains artwork that you've added, or you've liked from the Stream.

Adding artwork to the Collection

Artwork added to Openframe requires an author, name, a URL where the artwork is hosted, and a URL for a preview (suggested width = 310px).

When adding new artwork, you can set it to be private (default) or public:

  • Private: it will be added to your collection.
  • Public: it will be added your Collection and to the Stream, everyone with a frame will be able to display it.

3.3 Rights

Openframe doesn't store any artwork. Frames fetch artwork directly form the provided URL each time it's required to display it. Make sure you have the rights to the artwork you add and display using Openframe.

The artwork will be available as long as the content in the URL is available.

4. Extensions

Openframe provides a baseline functionality that can be extended with extensions. An extension (or plugin) may be created to support a new artwork format, to add interactivity to the frame, etc.

extensions
(existing)
          /images (installed by default, displays image-based artwork)
          /gifs (installed by default, displays gif-based artwork)
          /websites (installed by default, displays web-based artwork)
          /shaders (installed by default, displays shader-based artwork)
          /GPIO (supports GPIO pin communication for the frame and artwork)
          /single-button-interface (user interface for the frame)
(potential)
          /light-sensor (adjusts display brightness)
          /openframeworks (displays OF-based artwork)
          /etc

4.1 Types of extensions

Artwork formats

Hardware

Enabling interactivity for the artwork, or for the frame.

Link to example of GPIO + Single button interface?

Frame functionality

Link to example?

4.1 How to install an extension

4.2 How to create an extension

See this Openframe extension example to learn about creating an extension for Openframe.

Clone this wiki locally