Overview

The aim of Blackboard 2.0 is to make it possible to hold "blackboard-like" lectures in halls that don't have blackboards installed, but does have a projector. There are 86" touchscreens with attached computers installed in some lecture halls, and those can be used by anyone to run the Blackboard 2.0 software. However, as the software runs on a server, usage is not limited to those touchscreen setups. You can run Blackboard 2.0 in any modern browser, using your computer or tablet – or even a phone, although the menubar probably won't fit into one row. Usage is limited to Aalto network (130.233.x.x), but over VPN it should work fine also from home.

All material created in Blackboard 2.0 is considered public, as there is no user authentication, but a simple password (mandatory for editing, optional for viewing).

Software parts

The software is divided in four parts:

1. Home page at https://blackboard.cs.aalto.fi
2. Presentation editor
3. Presentation viewer
4. Backend (server) and database (only interacted with via the previous three parts)

Home page

The Home page is used to view a list of available presentations, edit or view them, and create new ones.

Each presentation needs at least a descriptive name, and a presenter password. You can also specify a viewer password, if you don't want your presentation to be easily accessible by anyone without a password. You can hide your presentation from the home page listing, but in this case be sure to take note of the presentation id so you can resume editing it later.

Presentation editor

The Presentation editor is where all the magic happens. It comes with two switchable user interface (UI) options: Simple UI and Advanced UI. Simple UI is aimed only for casual/first-time, users who "just need to draw". Using the Advanced UI is recommended to get access to all the tools and features.

Note, that on narrow screens, the top menubar will shrink in size and contain less text, but all the buttons are still there.

Simple UI

Simple UI gives you the functions of an analog blackboard with a few additions like adjustable background grid and an integrated laser pointer. The only tools are pen for drawing, and eraser for deleting lines. You can adjust the pen color and thickness, but there are no other drawing tools available. Also the board color is not adjustable (unless you do it via the Advanced UI).

Advanced UI

Advanced UI doesn't look much more complicated, but you do need to select the current tool from a dropdown menu instead of buttons*. There are also menus for fill and board colors.

* If you have a touch-screen and pen, you can check the "Only use pen for drawing" from the settings (top left corner), which allows you to select the tool by touching the drawing area with a finger, and selecting a new tool from the context menu.

Functions available in the menubar

Menu functions are explained below, divided in two columns where there is a difference between UI options.

	Simple UI	Advanced UI
Settings	This icon opens a sidebar with some less often used settings for the current presentation. These are covered in detail in the end of this documentation.
UI selection	Here you can switch between Simple and Advanced user interfaces. Most settings done on the Advanced UI carry on to the Simple UI if you change the mode, with the exception of drawing tools that do not exist in the Simple UI, and the fill settings for lines (simple UI does not support the creation of filled shapes). Due to its limitations, the Simple UI is only recommended for users not previously familiar with Blackboard 2.0.
Tools selection	Buttons (see below)	Menu (see below)
Draw	The Draw tool is selected on startup, and it can be used to draw lines using a mouse, finger, or pen. It is possible to adjust/disable the smoothing and the amount of control points using the Settings menu, but the default should fit most use cases. When using a mouse, it is recommended to set the "Use mouse (show pen location)" option in the Settings. This will show the cursor location on the drawing board using the exact color and size of your pen. When using a pen on a touchscreen, you can select "Only use pen for drawing" to avoid any accidental lines caused by your hands/fingers. When there are multiple touches on the screen simultaneously, only the one that touched the screen first will be used for drawing. Note: Long lines will update periodically (without animation) for viewers to avoid long delays from drawing to display. Currently updating is done once for every 50 control points, so update frequency will depend on current line settings. Note: the Draw tool never snaps to grid. If you need straight lines, use the Polyline or Arrow tools.
Delete lines / Batch delete	The Delete lines tool removes existing lines from the presentation as objects, not like a regular blackboard eraser. To erase only parts of lines, choose "Board (eraser)" as the color from the Line color menu. Deleted lines can be restored using the Redo button.
Laser pointer	Laser pointer is shown as a colored dot in the UI, which follows your cursor/pen/finger. The pointer is also visible for all viewers of your presentation, and unlike in the presentation UI, it has a trail making it easier to follow. The pointer color can be adjusted from Settings.
	Simple UI	Advanced UI
Tools in Advanced UI only	(not available)	Draw (Same as in Simple UI, see above) Polyline Creates a path (line) through two or more control points. The line can be either rough or smooth, and also have a fill. Control points are created when the pointer is released (lifted). The control point locations are indicated by a circle around the point. Polyline is finished by clicking on an existing control point (the circle changes color to indicate that you can end the polyline on it). Changing the tool or navigating away from current board will also end the polyline, but for consistent results, you should finish it manually. Polyline will refresh for the viewers after a new control point is created. Arrow Creates simple arrows with one drag across the board (any direction). The arrow is saved when the pointer is released. Arrows need to have a line color to be visible. Fill is not supported at this time. Rectangle Creates rectangles with one drag across the board (any direction). Supports fill and disabling line. Ellipse Creates rectangles with one drag across the board (any direction). Supports fill and disabling line. Grid Creates a regular grid with one drag across the board (from top left only at this time). Grid spacing follows the current board background grid settings (background grid does not need to be visible). It is recommended to have Snap to grid checked when using this tool, so things will line up better and grids are always complete with right/bottom borders present. Fill is not supported, but you can create a filled rectangle (or many) on top of the grid and use Move to back to let the grid show on top of it. Disabling line has no effect on grids. Laser pointer (Same as in Simple UI, see above) Modify shape This tool lets you change the properties of a shape already drawn on the board by pointing on it. This will open a context menu with options to choose from. The options available depend on the type of shape, as well as the selected line properties.  You can, for example, clone shapes, change the line/fill color or line width to match the current settings, and add/remove fills or line smoothing. Transform shape This tool lets you move and scale shapes. You can just click/tap on a shape and start moving it, or scale using any of the handles. Rotation is also available, but it needs to be separately activated from the Settings: Show advanced options → Enable rotating shapes (experimental). The reason this is not enabled by default is, that due to the way object scaling is currently implemented for the viewer, the end result may be different in the presenter's and viewer's screen. Also object rotation is not yet supported when saving as PDF (rotation is ignored). Batch delete (Same as "Delete lines" in Simple UI, see above) Batch recolor Works like Batch delete, but instead of marking shapes as deleted, it changes their line color to currently selected.
	Simple UI	Advanced UI
Line properties
Line color	Changes the current line color for shapes. Colors already used in the presentation are listed first. Eraser is a special "color" which mimics a blackboard eraser, as it essentially clears anything drawn below it. Note: when saving as PDF, the eraser-colored lines are drawn in background color, which looks bad if you use a background image. A workaround is to save these pages one by one as PNG, and add to the PDF manually. Pick allows you to pick any color from your screen (disabled in some browsers due to unstable implementation). Suggestions are picked from a static palette, taking into account the current board color so there is enough contrast. An exclamation mark in "Used in this presentation" means there is not enough contrast with the current background color.	In addition to suggested colors, Advanced UI includes a visual selection tool for picking the color freely.
Line width	The line width menu in Simple UI includes a few common options. The width values are measured as a percentage of the current window width, and will scale if the window width changes.	Advanced UI allows more width options, as well as a slider and manual (text) width input.
Fill color	(not available)	Lines and shapes can have a fill when using the Advanced UI. The menu is similar to line color menu. When fill is enabled, free form lines are automatically closed (start and end points are connected). You can later open the line using the Modify Shape tool, but that will also disable the fill.
	Simple UI	Advanced UI
Smooth lines toggle	(not available, lines are always smoothed by default)	The smooth lines toggle allows you to quickly switch between smooth and sharp lines. This visual aid is useful especially when using the polyline tool, although the smoothing is automatically turned off when switching to Polyline tool, and back on when switching to Draw.
Undo and redo	Note: currently these do not function like undo and redo in most applications. Implementing a more proper undo functionality is on our longer term to-do list.
	Undo marks the last drawn/redone line as removed, but does not delete it from database.
	Redo resets the status of the last line marked as removed in the database.
Board navigation	From left to right, the board navigation panel contains the following buttons: Go to first board Go to previous board Open the navigation menu (see below) to adjust the viewer configuration or visually navigate the boards. Current viewer grid configuration and board number is indicated in the button. Go to next board (creates a new board if it does not exist) Go to last board (last board number indicated in the button)
Board navigation menu	You can change the number of boards (1/2/4/9/16) visible for viewers at once by clicking on one of the five grid buttons in the top of menu. You can change the current board by either: Clicking on a preview of the desired board (board numbers are shown in the top left corner of each preview, and the currently active board is highlighted in yellow). Typing a board number in the text field (will be created if it does not exist). Board previews can be navigated (without affecting the boards visible for viewers) by clicking on the tall arrow buttons on each side. When creating a new board, color and background grid settings are copied to it from the previously active board.
	Simple UI	Advanced UI
Board color	(not available)	Lets you change the board color. The menu is quite similar to line and fill color menus, although slightly simpler. Each board has its own color (and grid) settings, and these settings from the previously active board are copied into a newly created board.
Background grid setup	The button with a grid icon toggles the background grid on and off. Click on the down arrow next to it to adjust grid properties. Background grid properties, like the background color, can be set differently for each board. Show in presentation:  The grid is also shown for viewers (shown only for the presenter by default) Snap to grid: Drawing tools other than Draw will always align their size to grid squares. Try to keep square*: When set, vertical and horizontal size sliders (see below) are interconnected so that the resulting grid cells would be as close to square as possible with the current board aspect ratio. Horizontal gap, % of width: Set the horizontal size of cells in the grid, measured as percentage of window width. Vertical gap, % of height: Set the vertical size of cells in the grid, measured as percentage of window width. Grid line width (% of width): Sets the grid line width (as a percentage of window width). Grid opacity: Sets the grid transparency/opacity. 0 = fully transparent, 1 = fully opaque. Grid color: Sets the grid color. *Grid cells are (nearly) square for the presenter, but only as long as the aspect ratio remains the same. Do not assume the grid is square for viewers, or when saving to PDF. If the grid size is changed, objects may no longer align to the grid. Changing the window size or aspect ratio should keep the alignment intact, although the grid may appear stretched.
Full screen toggle	Toggles the full screen mode on/off. The exact effect and exit methods depend on the used OS. Typically esc will get you out of the full screen mode, if the toggle does not work. Full screen mode does not work on Chrome for iOS/iPadOS due to OS security limitations. On Safari it does, but not very well. Workaround for iPadOS/iOS, tested in version 15.3.1: Open Blackboard 2.0 in iOS/iPadOS Safari (do not choose to enter full screen) Click on the "share" icon on top right (box with an arrow pointing up from it) Select the option "Add to home screen" ("Lisää Koti-valikkoon" in Finnish). If the option is not visible, scroll down and select "Edit actions..." ("Muokkaa toimintoja..." in Finnish), then add the action to the menu. Click "Add". You should now have an icon on your home screen which opens the Blackboard 2.0 in a proper full screen mode.
Info display
	The main info display area displays the current time and number of current presentation viewers. Both of these can be disabled from Settings if desired.
	(not visible)	In Advanced UI, there is an additional toggle for showing the pen size/color/location at the mouse cursor position. Essential for mouse use, not needed with touch screens.
Save and Quit
	Saves the current presentation as a PDF file to the local system. The presentation will remain in the database until deleted even if you don't use the save option, but it's always wise to save a PDF backup in case of a server crash/data loss.
	Closes the presentation session, saving settings and quitting to Main page. It is recommended to exit via this button, as otherwise your session settings like the active board and viewer configuration are not saved.

Settings menu

Presentation name and passwords

Presenter and viewer passwords can be set here, as well as the presentation name and visibility on the Main page.

UI options

Show advanced options: Enables some advanced options that are mostly useful for development (marked with * below).
Fullscreen prompt on startup: Uncheck this if you wish to skip the fullscreen prompt on startup for this presentation.
Use mouse (show pen location): Shows the pen location with current color/size options when using the Draw tool.
Only use pen for drawing: Ignore any other touches except pen when using the drawing tools. Finger touch/mouse click will open a context menu, from which you can quickly change the tool used.
Show clock: Show current time in the menu bar.
Show viewer count: Show the current amount of viewers remotely connected to this presentation.

*Enable swipe gestures (experimental): Enables swipe gestures for undo/redo (2 fingers) and board navigation (3 fingers). This functionality is currently disabled by default as it does not work well with at least tablets.
*Show points per second: Shows the amount of line control points produced each second.
*Show frames per second: Shows the current frames per second displayed by the browser with a history graph (for performance checking/tuning).

Laser pointer options

Set pointer color and size, or restore the default settings.

*Line options (only shown when "Show advanced options" above is checked)

*Get more events from browser: Gets all coordinate data from the browser when drawing (normally the browser only returns a single coordinate per frame). Used for debugging/tuning.
*Show points when drawing: Shows a circle around each control point for a brief moment while drawing a line. Can be used to tune the line settings to produce enough but not too many control points when drawing, so enough detail is preserved.
*Time between points: Sets the minimum time between two consecutive points on a drawn line. The default is 16ms, producing at most 63 control points per second.
*Min distance between points: Sets the minimum distance between two consecutive points on a drawn line. The distance is given as a percentage of the window width, and defaults at 0.005.
*Smooth lines: Checking this draws lines as bezier curves instead of a polyline with straight segments. This setting can also be controlled from the menu bar when using the Advanced UI.
*Line tension: Sets the tension parameter for bezier curves. Higher values will result in a more curvy line. A value of 0 will result in no interpolation.

Clear (removes data from database)

This board: Clears this board, removing all drawing data (not recoverable with Redo).
All boards: Clears all boards, removing all drawing data (not recoverable with Redo). Keeps the presentation and passwords intact.
The whole session: Removes the whole presentation from database, including all data, settings and passwords.

Save / download

Current board as PNG: Saves the current board as a PNG image using the pixel resolution of the current window.
All boards as single PDF: Saves all the boards as a single PDF file to your local device (in a vector format).

*Replay current board (only shown when "Show advanced options" above is checked)

The operations below will also be seen by viewers.

*Instant (sync board with database): Fetches and redraws the drawing data from database. Can be used to cure any graphical glitches that may have occurred.
*Realtime, skipping pauses: Same as above, but draws lines at the order and speed they were originally drawn, but skipping any pauses between lines.
*Realtime, including pauses: Same as above, but pauses are not skipped. Note: this will last as long as the board has been drawn to.

Presentation viewer

The presentation viewer is used to display the presentation in real time in a grid view of 1-16 simultaneous boards. The currently active board is highlighted with yellow borders.

In classroom use, the viewer is shown on the projector screen, but it can be opened in any device with a modern browser. The viewer connects via the backend server to receive any updates done by the presenter in real time.

It is also possible to switch into offline mode and control the navigation yourself. In this mode, the boards are loaded from the browser's local storage.