Blackboard 2

is a simple math oriented presentation web application. It enables dynamic slide creation and manipulation in real time. can also be used as a traditional presentation software where the content of the slide is prepared before presentation

Next: , Up: (dir)   [Contents]

Quick Links

Table of Contents


Next: , Previous: , Up: Top   [Contents]

1 Getting started

The easiest method to access is to visit the website.

The following sections are intended to help you can start creating your presentations.


Next: , Up: Getting started   [Contents]

1.1 How to add Math and Comment elements

allows to add and manipulate a few different elements, the two most often used are comment and math elements. To add those two elements you use n and $ commands, respectively. To finish element creation, use enter command. You can use g command to position newly added elements where you see it fit.


Next: , Previous: , Up: Getting started   [Contents]

1.2 How to edit existing elements

To re-open an element for additional editing, assigns tab command. After necessary changes are made, use enter to finish editing.


Next: , Previous: , Up: Getting started   [Contents]

1.3 Latex commands, error correction, direct editing


Next: , Previous: , Up: Getting started   [Contents]

1.4 Running presentation


Next: , Previous: , Up: Getting started   [Contents]

1.5 Cursor and Selection controls


Next: , Previous: , Up: Getting started   [Contents]

1.6 Save content of your slide, load saved content

uses to store your content. You have to have a account and you have to authorise to have access to dedicated folder in your storage.


Next: , Previous: , Up: Getting started   [Contents]

1.7 Delimiters and sizes

provides an extremely quick method of typing delimiters and changing delimiters sizes. The method is based on Snippet Commands and ctrl+up and ctrl+down commands. Have a look at the following short demonstration.


Next: , Previous: , Up: Getting started   [Contents]

1.8 Image manupulation

gives two methods to embed images into your slides. You can embed svg images which you pre-uploaded to your Dropbox account (i command). You can also embed images by given URI’s to those images (I command). The second method is particularly useful to embed Geogebra graphs (both 2d and 3d).


Next: , Previous: , Up: Getting started   [Contents]

1.9 Element selection explained

implements follow-mouse selection method. You can select multiple elements by holding shift key down. You can also select multiple elements using box selection which is bound to B keyboard shortcut. To de-select everything on your slide, use esc esc command.


Next: , Previous: , Up: Getting started   [Contents]

1.10 How to preload slide

You can specify the document to pre-load using ’id’ URL parameter, you can find out the value of this parameter using ’e’ top-level key command:

  http://bb2.durackpl.com/BB/?id=id%3A7wS2mymfHBAAAAAAAAAEiA

or, you can give the path explicitly:

  http://bb2.durackpl.com/BB/?id=%2Fpath%2Fto%2Ffile...

If you need the content to be veiled at the start, supply the URL parameter ’veil=T’:

  http://bb2.durackpl.com/BB/?id=id%3A7wS2mymfHBAAAAAAAAAEiA&veil=T

Next: , Previous: , Up: Getting started   [Contents]

1.11 How add to your an html page

You can add functionality to any html page by adding the following line to head section:

  <script data-main='main.js' src='http://bb2.durackpl.com/BB/requre.js'></script>

and the following line to body section:

    <div id='bb2app'></div>

If you need to load the content of a presentation at the start, add data-bb2-src parameter to the line above as follows:

  <script data-bb2-src='/path_to_content.txt' data-main='http://localhost/blackboard2/BB/main' src='http://bb2.durackpl.com/BB/requre.js'></script>

In the latter case, the content will be loaded from the corresponding file stored in your storage.

Alternatively, you can supply the initial content of the presentation by directly embedding the content into your html page. In order to do so, add the following block at the end of your body section:

  <pre data-bb2-content>
  ... JSON encoded presentation content ...
  </pre>

You can access JSON encoded content of your presentation by directly opening the file of your presentation of by using export function of (toplevel command ’E’).

If you need the content to be veiled at the start add data-bb2-veil attribute to ’script’ tag above.

Warning:

Some functionality will not be available if you embed app to your page. For instance, screenshot generation (S command) is processed through remote server. The server responds with ’Access-Control-*’ headers in accordance with CORS specifications. Such response will be declined by major browsers if it is made from your own website.


Previous: , Up: Getting started   [Contents]

1.12 Configuration File

The file config.json must be accessible through the uri [[host]]/BB/config.json in order for the app to work on your webpage. Currently the following values are supported in the config file:

Location of the backend server:

{
    "appserv-host" : "https://durackpl.com"
}

Previous: , Up: Top   [Contents]

2 Commands

is driven by commands/keyboard shortcuts. The following sections describe currently active commands:


Next: , Up: Commands   [Contents]

2.1 Toplevel Commands

Toplevel level commands are active from the moment the application is completely loaded. The toplevel commands are suspended when an element is open for editing; a dialogue is active; or typing simulation (playing) is active and etc.

B

Box select.

e

Show canvas link.

S

Download canvas screenshot

E

Exports canvas content.

ctrl+z
ctrl+/

Undo the latest change to the current document.

a h

Aligns selected elements horizontally. The first selected elements is used as anchor.

a v

Distributes selected elements vertically. The first selected element is used as anchor.

a h

Distributes selected elements horizontally. The first selected element is used as anchor.

a v

Distributes selected elements vertically. The first selected element is used as anchor.

R

Raise selected element. In case more than one element is selected, the action is applied to the last selected element.

L

Lower selected element. In case more than one element is selected, the action is applied to the last selected element.

O

Order widgets by size, so that every one is visible.

=

Resets scaling of the selected element. In case more than one element is selected, the action is applied to the last selected element.

+

Scales up the selected element by 10%. In case more than one element is selected, the action is applied to the last selected element.

-

Scales down the selected element by 10%. In case more than one element is selected, the action is applied to the last selected element.

f n

New document.

f s

Saves the content of the current document to your .

f a

Saves the content of the current document to a new file on your .

f o

Loads document from your .

esc esc

Cancels current selection.

ctrl+4

Adds new widgets encoded as json with json interactively requested through a dialog.

ctrl+$

Adds new TeX with content interactively requested through a dialog.

$

Adds new TeX element to the current document and starts editing.

i

Adds new image element to the current document. The image is assumed to be SVG and is loaded from your . When this action is activated, a dialogue asking for path to the image pops up. If the path is relative, it is assumed to be relative to the location of the current document.

I

Adds new web image element.

p g

Shows embedded black webpage.

p g

Shows embedded geogebra page.

p w

Shows embedded wikipedia page.

n

Adds new NOTE element to the current document and starts editing.

backspace

Deletes the selected element. In case more than one element is selected, the action is applied to the last selected element.

ctrl+backspace

Deletes all the selected elements.

tab

Starts editing the selected element.

D

Duplicates active widget and activates moving action of the duplicate. To complete the move, left click on the document. In case more than one element is selected, the action is applied to the last selected element.

g

Activates moving action of the selected element. To complete the move, left click on the document. In case more than one element is selected, the action is applied to the last selected element.

G

Activates moving all the selected elements, keeps relative positions. To complete the move, left click on the document.

Z

Starts typing simulation (play) of the selected element. If the element is veiled, unveils the element first. In case more than one element is selected, the action is applied to the last selected element.

v

Toggles ’veil’/’unveil’ state of the selected element. In case more than one element is selected, the action is applied to the last selected element.

V

Veils every element of the current document.

U

Unveils every element of the current document.

shift

implements "follow mouse" selection method: to select an element pause the pointer on it; to de-select, move the pointer away from the element. In case, you need multiple elements selected, hold SHIFT down while moving pointer off the element.

z

Holding ’z’ down actives ’hint’-ing of veiled elements. Otherwise, if an element is ’hint’-ed, then moving a pointer over such element activates hinting.

ctrl

Actives ’tracing’ temporarily. This is a mechanism which shows (temporarily) a free-drawn red line which follows you pointer on the document. This line is useful if you need to draw your viewer’s attention to a particular place on your presentation (similar to laser pointer in traditional presentation).


Next: , Previous: , Up: Commands   [Contents]

2.2 Pathname Commands

Pathname commands are active when you enter/edit pathname to a file with the content of your document.

tab

Completes pathname as far as possible without ambiguity.

ctrl+backspace

Deletes one last section of pathname.


Next: , Previous: , Up: Commands   [Contents]

2.3 Player Commands

This short set of commands is active when an element is being “played”. Once element is finished “playing”, toplevel set of commands is activated.

z

Speeds up simulated typing.

Z

Suspend/resume playing.

ctrl

Actives ’tracing’ temporarily. This is a mechanism which shows (temporarily) a free-drawn red line which follows you pointer on the document. This line is useful if you need to draw your viewer’s attention to a particular place on your presentation (similar to laser pointer in traditional presentation).


Next: , Previous: , Up: Commands   [Contents]

2.4 Note Commands

Currently, there is only one command active while a note/comment element is being edited. The command is ’enter’ and it finishes element editing and activates toplevel set of commands.

enter

Close editing of Note element.


Next: , Previous: , Up: Commands   [Contents]

2.5 IFrame Commands

This set of commands is active when an iframe element is being “edited”.

u

Change iframe uri.

enter
esc

Close editing of iframe element.

right
left
up
down

Increment/decrement width and height of iframe element.

ctrl+right/f2
ctrl+left/f1
ctrl+up/f3
ctrl+down/f4

Faster increment/decrement width and height of iframe element.


Next: , Previous: , Up: Commands   [Contents]

2.6 Advance TeX Editing

This is the set of commands which allows fast editing of latex/math elements. Please note that most of the commands are only active when the underlying latex is valid. If the underlying latex is invalid, then an “undo” command must be called to bring the element to the latest valid state.

ctrl+z
ctrl+/

Undo the latest change to the element; if element is ’invalid’ then endues element content until the latest ’valid’ state.

esc r

Starts raw editing mode. This mode allows direct editing of latex content. To complete raw editing press ’enter’ to commit changes; or ’esc’ to return back to the state before raw editing started. Changes cannot be committed unless the latex content is valid.

space

Activates abbreviation; if abbreviation is not detected, regular space inserted.

ctrl+x

Cuts selection and adds it to clipboard. Every next ’cut’ adds more content to clipboard.

ctrl+v

Pastes the latest added content of clipboard.

esc v

Removes the latest added content from clipboard and pastes the next added content.

ctrl+up

Increases the size of delimiters. For this action, the closest pair of delimiters around the active selection or cursor.

ctrl+down

Decreases the size of delimiters. For this action, the closest pair of delimiters around the active selection or cursor.

right

Moves cursor right to the next legitimate position. That is, the position where changes (inserts/deletes) can be made without changing validity of latex content.

left

Moves cursor left to the previous legitimate position. That is, the position where changes (inserts/deletes) can be made without changing validity of latex content.

backspace

Deletes content before cursor, ensures that the cotnent of the element is valid after deletion.

tab
)
]
}

Moves cursor to the next marked position.

shift+tab

Moves cursor to the previous marked position.

enter

Completes element editing.

esc m ?

Starts matrix input method. The question mark ’?’ stands for one of the following characters which defines which environment is used:

l

align

a

array

b

bmatrix

B

Bmatrix

m

matrix

p

pmatrix

v

vmatrix

V

Vmatrix

c

cases

SHIFT

Activates selection sensor.

CTRL

Activates cursor sensor.


Next: , Up: Advance TeX Editing   [Contents]

2.6.1 Snippet Commands

Snippets are substirings of valid latex which have some places marked with marker <<>>. Also, every snippet has the marker <<>> at the end. Once a snippet is added to math element, cursor can be quickly moved between marked positions by tab and shft+tab commands.

ctrl+,

Inserts bars \langle<<>>\rangle with tabbing

ctrl+\

Inserts bars ||<<>>|| with tabbing

|

Inserts bars |<<>>| with tabbing

(

Inserts parentheses (<<>>) with tabbing

{

Inserts tex group {<<>>} with tabbing

[

Inserts brackets [<<>>] with tabbing

_

Inserts subscript _<<\mathstrut>> with tabbing

^

Inserts superscript ^<<\mathstrut>> with tabbing

ctrl+[

Inserts braces \{<<>>\} with tabbing


Previous: , Up: Advance TeX Editing   [Contents]

2.6.2 Backquote Commands

Backquote commands is a subset of advanced TeX editing commands and is copied (with minor alterations) from the Emacs AucTeX major mode. This set of commands especially efficient with Greek alphabet.

` '

\quad

` "

\qquad

` ?

\mathstrut

` a

\alpha

` b

\beta

` g

\gamma

` d

\delta

` e

\epsilon

` z

\zeta

` h

\eta

` j

\theta

` k

\kappa

` l

\lambda

` m

\mu

` n

\nu

` x

\xi

` p

\pi

` r

\rho

` s

\sigma

` t

\tau

` u

\upsilon

` f

\phi

` q

\chi

` y

\psi

` w

\omega

` v e

\varepsilon

` v j

\vartheta

` v p

\varpi

` v r

\varrho

` v s

\varsigma

` v f

\varphi

` G

\Gamma

` D

\Delta

` J

\Theta

` L

\Lambda

` X

\Xi

` P

\Pi

` S

\Sigma

` U

\Upsilon

` F

\Phi

` Y

\Psi

` W

\Omega

` *

\times

` .

\cdot

` -

\cap

` +

\cup

` |

\vee

` &

\wedge

` \

\setminus

` <

\leq

` >

\geq

` {

\subset

` }

\supset

` [

\subseteq

` ]

\supseteq

` i

\in

` left

\leftarrow

` shift+left

\Leftarrow

` right

\rightarrow

` shift+right

\Rightarrow

` ctrl+left

\longleftarrow

` ctrl+shift+left

\Longleftarrow

` ctrl+right

\longrightarrow

` ctrl+shift+right

\Longrightarrow

` up

\uparrow

` shift+up

\Uparrow

` down

\downarrow

` shift+down

\Downarrow

` :

\colon

` N

\nabla

` A

\forall

` I

\infty

` 0

\emptyset

` E

\exists

` /

\not

` ctrl+c

\cos

` ctrl+d

\det

` ctrl+e

\exp

` ctrl+_

\inf

` ctrl+l

\lim

` ctrl+s

\sin

` ctrl+^

\sup

` ctrl+t

\tan

` (

\langle

` )

\rangle

` ^

\hat

` ~

\tilde

` v G

\varGamma

` v D

\varDelta

` v J

\varTheta

` v L

\varLambda

` v X

\varXi

` v P

\varPi

` v S

\varSigma

` v U

\varUpsilon

` v F

\varPhi

` v Y

\varPsi

` v W

\varOmega


Next: , Previous: , Up: Commands   [Contents]

2.7 Raw TeX Editing

This set of commands is active when you edit raw (latex) math element content. Please note that enter command proceeds only if the underlying latex is valid.

esc

Cancels raw editing without changing element content.

enter

Finishes raw editing and updates element content.


Next: , Previous: , Up: Commands   [Contents]

2.8 Matrix Input

One single command to cancel matrix input control.

esc

Cancels matrix input.


Previous: , Up: Commands   [Contents]

2.9 Active Abbreviations

The following combinations are not commands but abbreviations. That is, you type iff followed by space and it is replaced with the corresponding snippet. Make sure you type abbreviation after a non-word character, otherwise the abbreviation will not be detected.

iff

expands to \quad \Leftrightarrow \quad

oif

expands to \quad \Rightarrow \quad

iif

expands to \quad \Leftarrow \quad

fr

expands to \frac {<<\mathstrut >>}{<<\mathstrut >>}<<!>>

sq

expands to \sqrt {<<\mathstrut >>}<<!>>

rm

expands to \mathrm {<<>>}<<!>>

bb

expands to \mathbb <<!>>

bf

expands to \mathbf <<!>>

cal

expands to \mathcal <<!>>

ld

expands to \ldots

vd

expands to \vdots

dd

expands to \ddots

pa

expands to \partial

mand

expands to \quad \mathrm{and}\quad

mor

expands to \quad \mathrm{or}\quad

int

expands to \int_{<<\mathstrut >>}^{<<\mathstrut >>} <<!>>\, \mathrm{d} <<!>>

iint

expands to \iint_{<<\mathstrut >>}^{<<\mathstrut >>} <<!>>\, \mathrm{d} <<!>>

iiint

expands to \iiint_{<<\mathstrut >>}^{<<\mathstrut >>} <<!>>\, \mathrm{d} <<!>>

oint

expands to \oint_{<<\mathstrut >>}^{<<\mathstrut >>} <<!>>\, \mathrm{d} <<!>>

dif

expands to \frac{\mathrm{d} <<>>}{\mathrm{d} <<>>} <<!>>

pif

expands to \frac{\partial <<>>}{\partial <<>>} <<!>>

lim

expands to \lim_{<<>> \rightarrow <<>>} <<>>

vec

expands to \vec {<<\mathstrut >>} <<!>>