After successfully joining an Agora Interactive Whiteboard room, you can use the default tool to write and draw on the whiteboard. The Agora Interactive Whiteboard SDK provides rich basic editing tools, such as pencil, arrow, straight line, eraser, and various shapes. In addition, the whiteboard SDK supports modifying the font size, stroke width, and stroke color.
This page describes using whiteboard tools in the following ways:
The whiteboard SDK provides the setMemberState
method for setting the whiteboard tools used in the current whiteboard room. By modifying the MemberState
properties of the current room, you can switch tools, select shapes, and change the font size, stroke width, and color.
The MemberState
type contains the following properties:
currentApplianceName
: The name of the whiteboard tool currently in use, which can be set as one of the following values:arrow
: Arrowclicker
: Clickerellipse
: Ellipseeraser
: Eraserhand
: HandlaserPointer
: Laser pointerpencil
: Pencilrectangle
: Rectangleselector
: Selector. If you set the floatBar
property in JoinRoomParams
as true
, when the user uses the selector
tool, a floating bar that provides more text editing options displays.shape
: Shape. When setting currentApplianceName
as shape
, you can set shapeType
to choose a shape; if you do not set shapeType
, the SDK uses triangle
by default. straight
: Straight linetext
: Text. If you set the floatBar
property in JoinRoomParams
as true
, when the user uses the text
tool, a floating bar that provides more text editing options displays.shapeType
: (Optional) The shape type, which can be set as one of the following values:pentagram
: Pentagramrhombus
: RhombusspeechBalloon
: Speech balloontriangle
: TrianglestrokeColor
: The stroke color in RGB format. For example, [0,0,255]
represents blue.strokeWidth
: The stroke width. This parameter does not take effect for text.textSize
: The font size. This parameter takes effect only for text.To follow the procedure on this page, ensure that you have integrated the Agora Interactive Whiteboard SDK into your project and implemented joining a room. For details, see Join a Whiteboard Room.
You can directly set the whiteboard tool used in the current room in the program. This section uses the Join a Whiteboard Room sample code as an example.
Add the following code to the joinWhiteboard.js
file:
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
// Use the rectangle tool and set the stroke width and color.
room.setMemberState({currentApplianceName: "rectangle", strokeColor: [255,182,193], strokeWidth: 12,});
}).catch(function(err) {
console.error(err);
});
Save the changes, and refresh the index.html
page. Now you can click and drag the mouse to draw a pink rectangle on the whiteboard.
To change the whiteboard tool, you can modify the newly added code as follows:
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
// Use the pentagram shape tool and set the stroke width and color.
room.setMemberState({currentApplianceName: "shape", shapeType: "pentagram", strokeColor: [255,90,193], strokeWidth: 20,});
}).catch(function(err) {
console.error(err);
});
Save the changes, and refresh the index.html
page. Now you can click and drag the mouse to draw a blue pentagram on the whiteboard.
In scenarios where you want to offer multiple whiteboard tools and switch the tool based on a user's choice, you can design and implement a toolbar.
This section extends the Join a Whiteboard Room sample code to show the implementation of a simple toolbar.
joinWhiteboard.js
file:...
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
// Define a toolbar and buttons.
var toolbar = document.getElementById("toolbar");
var toolNames = ["clicker","selector","rectangle","eraser","text","arrow","ellipse","hand","laserPointer","shape","straight"];
for(var idx in toolNames){
var toolName = toolNames[idx];
var btn = document.createElement("BUTTON");
btn.setAttribute("id","btn"+toolName);
var t=document.createTextNode(toolName);
btn.appendChild(t);
// Listen for the event of clicking a button.
btn.addEventListener("click", function(obj){
var ele = obj.target;
// Call the setMemberState method to set the whiteboard tool.
room.setMemberState(
{currentApplianceName: ele.getAttribute("id").substring(3),
shapeType: "pentagram",
strokeColor: [255,182,200],
strokeWidth: 12,
textSize: 40,});
});
toolbar.appendChild(btn);
console.log(btn.getAttribute("id"));
}
}).catch(function(err) {
console.error(err);
});
index.html
file to display the toolbar on the web page:<!DOCTYPE html>
<html>
<head>
<script src="https://sdk.netless.link/white-web-sdk/2.12.20.js"></script>
<script src="./joinWhiteboard.js"></script>
</head>
<body>
<div id="whiteboard" style="width: 100%; height: 100vh;">
</div>
<!--Define the style of the toolbar and add it to the web page-->
<div id="toolbar" style="position:relative; top:40px;height:100px;z-index:10;">
</div>
</body>
</html>
Save the changes, and refresh the index.html
page. The following toolbar displays on the lower left corner of the page. You can click any button and use the corresponding tool to write and draw on the whiteboard.
The toolbar in the preceding example is relatively simple. Agora provides an open-source sample project on GitHub (whiteboard-demo), in which @netless/tool-box implements a tool UI component with richer styles and functions. You can download the sample project to try it out or refer to the source code.
In addition to the basic editing tools listed in the Understand the tech section, the Agora Interactive Whiteboard SDK provides additional editing functions through the following methods:
Methods | Description |
---|---|
copy | Copies the selected content. |
paste | Pastes the copied content. |
duplicate | Duplicates the selected content. |
delete | Deletes the selected content. |
redo | Redoes an undone action. |
undo | Undoes an action. |
disableEraseImage | Disables the eraser from erasing images on the whiteboard. |
disableDeviceInputs | Disables the whiteboard from responding to users' operations. |
These methods, which are also members of the Room
interface, also do not have user interfaces provided by the SDK. You can implement these functions by designing a UI and calling the corresponding methods according to your business needs.