Difference between revisions of "Whiteboard"

From myViewBoard
Jump to navigation Jump to search
Line 1: Line 1:
−
<section begin=intro />Whiteboard is a web based collaborative whiteboard system. The functionality is similar to [[Whiteboard for Windows]] and [[Whiteboard for Android]]. </br>It is recommended to use [https://https://www.google.com/chrome/ Google Chrome] for both Whiteboard and the wider [[myViewBoard Ecosystem]]. <section end=intro />
+
<section begin=intro />Whiteboard (browser-based) is a lightweight digital whiteboard that supports [[Magic Box]] features. It is recommended to use [https://https://www.google.com/chrome/ Google Chrome] for both Whiteboard and the wider [[myViewBoard Ecosystem]]. </br></br>See also: [[Whiteboard for Windows]] and [[Whiteboard for Android]].<section end=intro />
  
  
Line 9: Line 9:
 
|2='''[[Whiteboard Quick Start Guide]]'''
 
|2='''[[Whiteboard Quick Start Guide]]'''
 
|3=This document is a guide to quickly get started with using Whiteboard.
 
|3=This document is a guide to quickly get started with using Whiteboard.
−
}}
 
−
 
−
{{Card-Feature
 
−
|1=<center><span class="iconify" data-icon="mdi:book-open-outline" data-inline="false" style="color:#A1DE93;font-size:120px;position:relative;top:15px;"></span></center>
 
−
|2='''[[Whiteboard User Guide]]'''
 
−
|3=This document is a guide to using the Whiteboard user interface.
 
−
}}
 
−
 
−
{{Card-Feature
 
−
|1=<center><span class="iconify" data-icon="mdi:book-open-outline" data-inline="false" style="color:#70A1D7;font-size:120px;position:relative;top:15px;"></span></center>
 
−
|2='''[[Whiteboard Training Guide]]'''
 
−
|3=This document is a comprehensive guide to using Whiteboard.
 
 
}}
 
}}
  
Line 33: Line 21:
 
==System Requirements==
 
==System Requirements==
  
−
Whiteboard is accessible online, but works best if used with the Chrome browser (or any other Chrome-based browser). Digital Whiteboard uses WebRTC (Web Real-Time Communication) API to achieve screen sharing across various platforms such as Chromebook, PC, and Mac.  
+
Whiteboard is accessible online, and works best if used with the Chrome browser (or any other Chrome-based browser). Digital Whiteboard uses WebRTC (Web Real-Time Communication) API to achieve screen sharing across various platforms such as Chromebook, PC, and Mac.  
  
 
Whiteboard does not support Internet Explorer. Users are recommended to upgrade to the latest version of Microsoft Edge to access Whiteboard.
 
Whiteboard does not support Internet Explorer. Users are recommended to upgrade to the latest version of Microsoft Edge to access Whiteboard.
 
   
 
   
−
 
−
==Participating in a Whiteboard Session==
 
−
<section begin=participate-in-QB />
 
−
Perform the following steps to participate in a Whiteboard session: <br/>
 
−
 
−
 
−
To join a Whiteboard session:
 
−
<ol>
 
−
<li>Wait for the teacher to send you the session URL or scan the QR Code provided by the teacher.</li>
 
−
<li>Use a web browser to go to the session URL provided by the teacher.</li>
 
−
<li>On the new window, provide a name and a log in code if you are a student. The log in code is provided by your Whiteboard host. For guest, the log in code is automatically entered.</li>
 
−
</ol>
 
−
 
−
<br/>
 
−
 
−
To host a Whiteboard session:
 
−
<ol>
 
−
<li>Sign in to https://myviewboard.com, and click on the 'Whiteboard' icon.</li>
 
−
<li>The next window provides three options to join Whiteboard session:
 
−
<ul>
 
−
<li>Login code - participants who are in the same room as the host </li>
 
−
<li>QR code - best for users who are using mobile devices</li>
 
−
<li>URL link - send through instant messaging.</li>
 
−
</ul></li>
 
−
<li>Distribute the code to all participants, and wait for them to join the session using one of the options above.</li>
 
−
</ol>
 
−
 
−
<section end=participate-in-QB />
 
−
 
−
<br/>
 
  
 
==Whiteboard Interface==
 
==Whiteboard Interface==
Line 74: Line 32:
 
</gallery>
 
</gallery>
  
−
After signing in, users are presented with a blank canvas. Whiteboard provides the following options to manage the session:
+
After signing in, users are presented with a blank canvas. In the top right of the screen there are the following icons:
  
−
<div class="TAB">
 
−
<div class="DTR">
 
−
<div class="DTC"><center>{{IconBox|[[File:LBBtn_On.png|center|link=]]}}</center></div>
 
−
<div class="DTC">Background Management <br/>Opens options to change the canvas background.</div>
 
 
</div><div class="DTR">
 
</div><div class="DTR">
−
<div class="DTC"><center>{{IconBox|[[File:100-percent.png|center|link=]]}}</center></div>
 
−
<div class="DTC">Zoom <br/>Adjust zoom options.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC"><center>{{IconBox|[[File:Edu-huddle.png|center|link=]]}}</center></div>
 
−
<div class="DTC">[[Huddle]] <br/>Manage participants by placing them in groups.</div>
 
−
</div><div class="DTR">
 
−
</div>
 
 
<div class="DTR">
 
<div class="DTR">
 
<div class="DTC"><center>{{IconBox|[[File:Help Off.png|center|link=]]|50px}}</center></div>
 
<div class="DTC"><center>{{IconBox|[[File:Help Off.png|center|link=]]|50px}}</center></div>
Line 116: Line 63:
 
<div class="TAB">
 
<div class="TAB">
 
<div class="DTR">
 
<div class="DTR">
−
<div class="DTC">{{IconBox|[[File:MenuBarMove On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:I-file-management-menu.svg|link=]]}}</div>
−
<div class="DTC">[[Move Toolbar|Move toolbar]]<br/>Click and drag to move toolbar to the side of the screen.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:Edu-ExportFile-On.png|center|link=]]}}</div>
 
 
<div class="DTC">[[File Management|File]]<br/>Displays options for importing and exporting PDF files.</div>
 
<div class="DTC">[[File Management|File]]<br/>Displays options for importing and exporting PDF files.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:Resource On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:I-main-tool-bar-magic-box.svg|center|link=]]}}</div>
 
<div class="DTC">[[Magic Box|Magic box]]<br/>Displays various tools that you can insert into the canvas.</div>
 
<div class="DTC">[[Magic Box|Magic box]]<br/>Displays various tools that you can insert into the canvas.</div>
 
</div><div class="DTR">
 
</div><div class="DTR">
−
<div class="DTC">{{IconBox|[[File:Roaming on.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:I-main-toolbar-selection-tool.svg|center|link=]]}}</div>
−
<div class="DTC">[[Infinite Canvas|Infinite canvas]]<br/>In Presentation mode, allows zooming and moving the canvas .</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:Selector On.png|center|link=]]}}</div>
 
 
<div class="DTC">[[Selection]] <br/>Selects objects, text and pictures.</div>
 
<div class="DTC">[[Selection]] <br/>Selects objects, text and pictures.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:Pen On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:I-main-toolbar-pen.svg|center|link=]]}}</div>
 
<div class="DTC">[[Pen]]<br/>Draws freehand lines and squiggles. Click again to open pen options.</div>
 
<div class="DTC">[[Pen]]<br/>Draws freehand lines and squiggles. Click again to open pen options.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:Eraser On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:I-eraser-menu-eraser.svg|center|link=]]}}</div>
 
<div class="DTC">[[Eraser]] <br/>Erases objects, based on the last mode selected. Click again to display eraser options.</div>
 
<div class="DTC">[[Eraser]] <br/>Erases objects, based on the last mode selected. Click again to display eraser options.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:ShapeLine On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:I-main-toolbar-shape-tool.svg|center|link=]]}}</div>
 
<div class="DTC">[[Shape/Line]] <br/>Draws lines and shapes with different styles. Click again to display shape options.</div>
 
<div class="DTC">[[Shape/Line]] <br/>Draws lines and shapes with different styles. Click again to display shape options.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:Text On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:I-text-editor-T.svg|center|link=]]}}</div>
−
<div class="DTC">[[Text/Handwriting]]<br/>Creates a textbox. Click again to switch to handwriting recognition.</div>
+
<div class="DTC">[[Text/Handwriting]]<br/>Creates a textbox. Click on the canvas to type, and edit with the adorning menu.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:Undo On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:SVG Undo Off.svg|center|link=]]}}</div>
 
<div class="DTC">[[Undo]]<br/>Reverses the previous action.</div>
 
<div class="DTC">[[Undo]]<br/>Reverses the previous action.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:Redo On.png|center|link=]]}}</div>
+
<div class="DTC">{{IconBox|[[File:SVG Redo Off.svg|center|link=]]}}</div>
 
<div class="DTC">[[Redo]]<br/>Reverses the previous undo action.</div>
 
<div class="DTC">[[Redo]]<br/>Reverses the previous undo action.</div>
 
</div><div class="DTR">  
 
</div><div class="DTR">  
−
<div class="DTC">{{IconBox|[[File:Page On.png|center|link=]]}}</div>
 
−
<div class="DTC">[[Page]]<br/>Creates, selects, sorts, and deletes pages.</div>
 
 
</div></div>
 
</div></div>
  
  
 
<br/>
 
<br/>
−
 
−
====Floating Toolbar====
 
−
 
−
The Floating Toolbar allows users to perform operations on the canvas. This toolbar can be moved freely around the canvas area.
 
−
 
−
<div class="TAB">
 
−
<div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:Edu-MenuBarMove.png|center|link=]]}}</div>
 
−
<div class="DTC">[[Move Floating toolbar]] <br/>Drag to move the Floating Toolbar around the canvas.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:Edu-FullScreenMode.png|center|link=]]}}</div>
 
−
<div class="DTC">Present Mode <br/>Activate Present Mode to disable annotation tools.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:WindowsMode.png|center|link=]]}}</div>
 
−
<div class="DTC">Create Mode <br/>Activate Create Mode to enable annotation tools.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:NextPage 02.png|center|link=]]}}</div>
 
−
<div class="DTC">[[Previous Page]] <br/>If the canvas contains multiple pages, displays the previous page.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC"><i class="far fa-play-circle" style="font-size:35px;margin-left:10px;"></i></div>
 
−
<div class="DTC">[[Fullscreen]] <br/>Switches the canvas to fullscreen mode.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:NextPage 01.png|center|link=]]}}</div>
 
−
<div class="DTC">[[Next Page]] <br/>If the canvas contains multiple pages, displays the next page.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:Edu-PageAdd.png|center|link=]]}}</div>
 
−
<div class="DTC">[[New Page]] <br/>Adds a new page to the canvas.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC">{{IconBox|[[File:Edu-polling.png|center|link=]]}}</div>
 
−
<div class="DTC">[[Polling]] <br/>Opens the polling window.</div>
 
−
</div><div class="DTR">
 
−
<div class="DTC"><i class="fas fa-eye" style="font-size:35px;margin-left:10px;"></i></div>
 
−
<div class="DTC">[[Eyes on me]] <br/>Displays text over the students screen to temporarily prevent interaction.</div>
 
−
</div>
 
−
</div>
 
−
 
 
==Related Media==
 
==Related Media==
  
−
{{YouTube-box|F0ez3KyCAbY|Whiteboard introduction}}
+
{{YouTube-box|F0ez3KyCAbY|Whiteboard introduction}} {{BR}}
−
{{YouTube-box|O3c1qBZJBAE|Get Started with Whiteboard Ecosystem }} {{BR}}
 
  
  
 
{{BR}}
 
{{BR}}
 
</div>
 
</div>
−
 
−
 
 
{{ent:Contact-channels}}
 
{{ent:Contact-channels}}
  

Revision as of 17:59, 15 December 2020

Whiteboard (browser-based) is a lightweight digital whiteboard that supports Magic Box features. It is recommended to use Google Chrome for both Whiteboard and the wider myViewBoard Visual Learning Platform.

See also: Whiteboard for Windows and Whiteboard for Android.


How-to Guides

For introduction, information and tutorials on using Whiteboard, see the following guides:

Whiteboard Quick Start Guide
This document is a guide to quickly get started with using Whiteboard.

Whiteboard Toolbar Icons
This document aims to be a printable guide that users can use as a quick 'cheat sheet' reference to the Whiteboard icons.


System Requirements

Whiteboard is accessible online, and works best if used with the Chrome browser (or any other Chrome-based browser). Digital Whiteboard uses WebRTC (Web Real-Time Communication) API to achieve screen sharing across various platforms such as Chromebook, PC, and Mac.

Whiteboard does not support Internet Explorer. Users are recommended to upgrade to the latest version of Microsoft Edge to access Whiteboard.


Whiteboard Interface

  • Whiteboard user interface with labels

After signing in, users are presented with a blank canvas. In the top right of the screen there are the following icons:

Help Off.png
Help
Displays help for common Whiteboard tasks and questions.
About off.png
Info
Displays information about the user currently logged in.
Setting Off.png
Gear
Settings that affect the current session.



Whiteboard Toolbar Icons

For more details about the icons that appear in Whiteboard, see Whiteboard Icons.

Main Toolbar

The main toolbar contains tools that allow users to add annotations to the canvas area. This toolbar is always fixed to the right, left or bottom side of the program window. The appearance of icons in the toolbar vary depending on the selected theme.

Whiteboard includes the following icons in the toolbar:

I-file-management-menu.svg
File
Displays options for importing and exporting PDF files.
I-main-tool-bar-magic-box.svg
Magic box
Displays various tools that you can insert into the canvas.
I-main-toolbar-selection-tool.svg
Selection
Selects objects, text and pictures.
I-main-toolbar-pen.svg
Pen
Draws freehand lines and squiggles. Click again to open pen options.
I-eraser-menu-eraser.svg
Eraser
Erases objects, based on the last mode selected. Click again to display eraser options.
I-main-toolbar-shape-tool.svg
Shapes and Lines
Draws lines and shapes with different styles. Click again to display shape options.
I-text-editor-T.svg
Text and Handwriting
Creates a textbox. Click on the canvas to type, and edit with the adorning menu.
SVG Undo Off.svg
Undo
Reverses the previous action.
SVG Redo Off.svg
Redo
Reverses the previous undo action.



Related Media

F0ez3KyCAbY

Whiteboard introduction




ent:Contact-channels


Retrieved from "https://wiki.myviewboard.com/index.php?title=Whiteboard&oldid=29644"