Up to this chapter, we assume that you have successfully installed the Netless interactive whiteboard SDK and introduced it into the project, and have already understood how to obtain the real-time room instance
room
object. If not, you may have skipped the previous chapters. It is strongly recommended that you read 《Install》, 《Real-time Room》 first.
Netless interactive whiteboard provides a wealth of teaching aids, and we hope these teaching aids can meet your business scenario needs. We will release more teaching aids in the future. Each teaching aid has its own name, which is a value of type string
. The following is a list of teaching aids currently supported by the interactive whiteboard.
Teaching aid name | Teaching aid description |
---|---|
selector | Selection tool |
pencil | pencil |
rectangle | rectangle drawing tool |
ellipse | Circle and ellipse drawing tools |
eraser | Eraser, used to erase handwriting drawn by other teaching aids |
text | Text tool |
straight | Straight line drawing tool |
arrow | Arrow drawing tool |
laserPointer | Laser Pointer Tool |
hand | Hand tool |
As long as you know the name of the teaching aid, you can switch the teaching aid through the following methods.
// Switch the teaching aid to "Pencil"
room.setMemberState({currentApplianceName: "pencil"});
You can also get the name of the current teaching aid in the following way.
var applianceName = room.state.memberState.currentApplianceName;
You may have noticed that the name memberState
appears twice in the code here. This is a dictionary object used to describe the state of the current user (that is, you who entered the room). Among them, the attribute currentApplianceName
is used to mark "the name of the teaching aids I currently choose".
According to business needs, we can modify one or more items in memberState
through the setMemberState
method. For example, we can modify the color and thickness of the line drawn by the "pencil" tool with the following code.
var strokeColor = [0, 0, 255]; // The color marked with RGB, here is blue
var strokeWidth = 10; // The thickness of the line, 10 is a very thick value
room.setMemberState({
strokeColor: strokeColor,
strokeWidth: strokeWidth,
});
If you want to know more about memberState
, you can read 《Room Business State Management》.
Inserting a picture in the general sense includes two steps: uploading and displaying. Netless interactive whiteboard does not provide upload function. This means that if you have upload requirements, you have to implement them yourself. The whiteboard SDK needs a URL to display pictures (you have to ensure that this URL can be accessed by the end user). You can use the following code to insert the picture on the whiteboard.
var imageInformation = {
uuid: uuid,
centerX: centerX,
centerY: centerY,
width: width,
height: height,
locked: false,
};
room.insertImage(imageInformation);
room.completeImageUpload(uuid, src);
Here are a bunch of parameters, we will stroke together, what does each parameter mean.
First of all, locked
is a reserved value, we can keep false
forever.
ʻUuid` is the unique identifier of the picture in the whiteboard, which is a string. In business, it is necessary to ensure that this string is unique and not repeated in the entire real-time room.
Our suggestion is that you can use the UUID generation library to generate it. UUID is a universal unique identification code that does not rely on the central authority. You can read [《Universal Unique Identifier》](https://zh.wikipedia.org/wiki/通�% 94%A8%E5%94%AF%E4%B8%80%E8%AF%86%E5%88%AB%E7%A0%81) to learn more. But before that, you need to install the uuid library.
npm
npm install uuid
yarn
yarn add uuid
After that, you can generate UUID with the following code.
import {v1} from "uuid";
var uuid = v1();
We very do not recommend you to use local self-incrementing ID to generate UUID. The following code is a demonstration of the error.
// Warning: This is a wrong demonstration, do not write this way in actual use
class Business {
static nextId = 0;
static generateUUID() {
return String(this.nextId ++);
}
}
The problem with this way of writing is that the self-incrementing ID can only be guaranteed to be unique in the operating environment of this browser, but it cannot be globally unique. It is worth noting that Netless is a real-time interactive whiteboard, and people from all over the country or even the world can join the same room. This method cannot prevent people in different regions from generating the same ID by chance.
centerX
and centerY
indicate the coordinates of the center point of the picture. width
and height
indicate the width and height of the picture. The above four values describe the world coordinates of the picture, which are marked as a rectangle in the whiteboard scene coordinate system. Since the Netless interactive whiteboard supports viewing angle movement and zooming, we need a coordinate system that does not change with the viewing angle to describe the spatial position of the picture. This is the world coordinate system. If you want to know more about this, you can read 《Universal Unique Identifier》.
With the following code, you can insert the picture into the center of the Web page. This code does some coordinate conversion operations to ensure that no matter how the viewing angle is moved, the world coordinate at the center of the screen under the current viewing angle can be found.
// Get the whiteboard placeholder, please adjust this line according to your business logic
var boardSpaceholder = document.getElementById("whiteboard");
// Take the midpoint coordinates of the whiteboard placeholder on the screen
var screenCenterX = boardSpaceholder.clientWidth / 2;
var screenCenterY = boardSpaceholder.clientHeight / 2;
// Convert screen coordinates to world coordinates
var pointInWorld = room.convertToPointInWorld({
x: screenCenterX,
y: screenCenterY,
});
// Take out the center point of the picture as world coordinates
var centerX = pointInWorld.x;
var centerY = pointInWorld.y;
The URL of the image will be used as the src
parameter. Netless interactive whiteboard does not provide image upload service, you need to find a way to solve this problem yourself. To ensure that the URL you provide can be accessed by end users, we recommend using the object storage service and CDN service of a third-party cloud computing company.
The object storage service is equivalent to a map bed with enterprise-level availability. Users upload pictures to the object storage service, and the service provider will save the pictures for a long time.
CDN is a content distribution service that guarantees that pictures (corresponding URL) are accessible to users across the country and even the world. CDN service vendors will use their edge nodes across the country (global) to distribute the pictures.
In order to ensure high product availability, you may need to carefully select object storage and CDN vendors. If you don't want to rely on third-party vendors to solve this problem, you can also use Nginx, Tomcat to build a static resource server yourself. You only need to bind the domain name to the server (for domestic records), get the appropriate URL, or pass it in as a picture parameter of the Netless Interactive Whiteboard SDK.
The storage and distribution of image resources are extremely challenging tasks. Unless the ability is strong enough, it is recommended to delegate these tasks to professional suppliers.