Git Product home page Git Product logo

smartboards's Introduction

Smartboards

Smartboards is an interactive networked public noticeboard framework. It was developed to facilitate remote communication between members of the Cambridge Computer Lab's Graphics and Interaction research group.

The system was designed for large touch-screen displays located along the research group's corridor, each powered by a Raspberry Pi. Members can also view and edit the boards remotely via web-apps, keeping the group updated on their status, whereabouts, or interests.

Image of kiosk in use

It is comprised of three web-app interfaces:

  1. The kiosk - an optimized editor designed for public terminal use with a kiosk-mode browser
  2. The editor - a more feature-rich editor for desktop or mobile use
  3. The viewer - a responsive smartboard browser and settings editor

Content structure

Each office (or room) has an external smartboard, shared by that office's users. The smartboard display is split vertically into several panes, one for each user. Each pane consists of a profile picture and description of its user, and a large section displaying a SVG.

The SVG consists of images that can be moved around or resized. These either link externally or include the image in-line using a data URI. Users also have the option to embed a website behind the SVG which may be interactive.

Rooms have a unique id of the form r_ROOM_ID, e.g. r_01. Each room's smartboard is determined by a configuration /config/room/r_ROOM_ID.xml which describes a list of users with panes. Users have ids of the form u_USER_ID, and an associated SVG content/u_USER_ID.svg. They may also have a profile pic images/profile-pic/u_USER_ID.jpg

Raspberry Pi

Each touchscreen is powered by a rear-mounted Raspberry Pi. These devices are ideal for a large deployment of smartboards considering their low power requirements and price. They run chromium web-browser in kiosk mode on top of Raspbian.

Image of Raspberry Pi

Interfaces

Kiosk

The kiosk editor is available for room with id r_ROOM_ID at /kiosk.html?r_id=r_ROOM_ID.

Users can write or draw using a touchscreen on a simulated whiteboard, generating images to place within the SVG. They can also move, resize, and delete current SVG elements. Users can also interact with any embedded background webpages.

Editor

The full editor is available for room with id r_ROOM_ID at /editor.html?r_id=r_ROOM_ID.

As well as drawing on a simulated whiteboard, users can also add linked external images, and generate QR codes of URLs or text. A mobile-centric option for writing a quick status update will be added soon.

Viewer

The viewer is available at /viewer.html.

It shows a list of all rooms found in the /config/room/ directory. This can be searched or filtered using tags associated with each room. Users can also modify each room's settings, changing it's config XML file.

Dependencies

  • jQuery - a multi-purpose javascript library
  • jQuery.qrcode.js - allows the editor to generate QR codes in-browser
  • jQuery.ScrollTo - for scrolling between views in the web-app's mobile configuration
  • SASS - syntactic CSS
  • Font Awesome - provides a range of icons as a font

smartboards's People

Contributors

errollw avatar

Stargazers

 avatar dev avatar  avatar  avatar Posttwo avatar

Watchers

James Cloos avatar  avatar  avatar

Forkers

vjsynth

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.