Link to plugin page: https://zeroqode.com/plugin/air-whiteboard-pro-plugin-for-bubble-1689767022763x398840130597505540

Demo to preview the plugin:

🔗

Live Demo: https://zeroqode-demo-33.bubbleapps.io/whiteboard

🔗

Bubble Editor: https://bubble.io/page?version=live&type=page&name=whiteboard&id=zeroqode-demo-33&test_plugin=1683536687018x908808395795988500_current&tab=tabs-1

Introduction

This whiteboard plugin is a versatile tool that enhances collaboration and productivity in digital environments. It integrates seamlessly with applications, allowing users to create, share, and interact with virtual whiteboards. It supports features like downloading created boards in .png format, zoom in/out, reset zoom, redo/undo, full screen, comments, drawing line/circle/rect and many others.

Prerequisites

You must have an account with Whiteboard.team to interact with the API. Create your development account at: https://www.whiteboard.team/.

How to setup

Create an account on https://www.whiteboard.team/.

In the “</> Developers” section, click "Create Application" and choose a name for your app.

In the Bubble editor enter your Client Id And Client Secret on the "Plugins" tab.

In the Bubble editor create element ‘White Board’ and write new board code into field ‘Board Code’.

Plugin Element Properties

The plugin contains one element which can used on page to get access to actions, events and states.

Title	Description	Type
Board code:	Unique, at least 15 symbols ID. Write the id of the existing board, if there is no such board, then a new board is created.	Text
Background style	Set a default background for the board. Types of backgrounds are 'None', 'Dot', 'Graph paper', 'Large grid', 'Small grid', 'Line'.	Options
Color pallet type	There is a standard color palette. If you want your own color palette, you can set this in 2 ways, choose ‘Custom’ or ‘Advanced’ option.	Options
Custom pallet	Colors in ‘hex’ format, separated by comma.	Text
Advanced pallet	Colors in ‘hex’ format as a list.	list of text

Element Actions

Get Image - Get the image of board and safe in a state ‘Board Image’ with png format.

Title	Description
Background	Chose background for image, available: white, black and transparent.

Draw Line - Draws a line or arrow on the board.

Title	Description	Type
Points start x-coordinate	The first X coordinate where the line or arrow will be drawn. Negative and positive numbers are allowed.	number
Points start y-coordinate	The first Y coordinate where the line or arrow will be drawn. Negative and positive numbers are allowed.	number
Point end x-coordinate	The second X coordinate where the line or arrow will be drawn. Negative and positive numbers are allowed.	number
Point end y-coordinate	The second Y coordinate where the line or arrow will be drawn. Negative and positive numbers are allowed.	number
Color	Color of the line	color
Line width	Width of the stroke in pixels relative to the canvas with zoom level 1.	number
Type	Type of the line could be 'line' or 'arrow'.	options
Move screen to new shape	The screen will be moved right to the center of the new shape.	yes/no

Draw Image - Place an image on the board.

Title	Description	Type
Draw to center	Place an image in the center of the viewport.	yes/no
Points start x-coordinate	X coordinate of the top left point of the image. Negative and positive numbers are allowed.	number
Points start y-coordinate	Y coordinate of the top left point of the image. Negative and positive numbers are allowed.	number
Image	Image to be drawn	Image
Move screen to new shape	The screen will be moved right to the center of the new shape.	yes/no

Zoom In - Zooms the board in by one step.

Zoom Out - Zooms the board out by one step.

Reset Zoom - Zooms the board to 100%.

Undo - Does undo of the previous own operation.

Redo - Does redo of the previous own undo.

Fit To Screen - Repositions zoom level and pan position so that the entire content on the board is visible.

Notification - Shows a notification on the whiteboard.

Title	Description	Type
Message	The text that will be show in the top right corner of the board.	text

Full Screen - Full screens the whiteboard.

Reinitialize - Reinitialize board.

Get Shapes - This action gets all of the shapes inside the whiteboard and saves it to the Data Shapes State as a JSON string.

Example of JSON code:

json
[
  {
    "id": "99bf02e5-0bfc-45ef-9b54-8034be0bdb05",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "x": 254.8623927171094,
    "y": 148.56922554899037,
    "_cached": {
      "dir": false,
      "baseLine": 18,
      "lineHeight": 21,
      "widths": [163.96385192871094],
      "measure": { "size": { "w": 164, "h": 21 }, "length": 1 }
    },
    "_value": "Awesome Plugin",
    "color": "#ff9900",
    "_size": 16,
    "_font": "Open Sans",
    "cmd": "text"
  },
  {
    "id": "44109b35-537d-407e-835d-4dd990616b94",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "x": 251.58747125247777,
    "y": 197.69304751846443,
    "w": 54.0362041664215,
    "h": 47.486361237158235,
    "lineWidth": 2,
    "cmd": "rectangle",
    "stroke": "#339933",
    "fill": "#4D4D4D",
    "modifiedBy": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "modifiedTimestamp": 1686161195861175
  },
  {
    "id": "a2bd2945-f63d-42c1-bad3-9faa9b6c99a8",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "x": 342.8351420174269,
    "y": 220.16736752614986,
    "r": 25.649501961788577,
    "lineWidth": 2,
    "cmd": "circle",
    "stroke": "#064e3b",
    "modifiedBy": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "modifiedTimestamp": 1686161217958694
  },
  {
    "id": "0e9cef20-e1b6-45c8-b1d7-b5c5f4464a8e",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "points": [
      { "x": 249.95001052016198, "y": 120.73239309962173 },
      { "x": 249.95001052016198, "y": 121.55112346577965 },
      { "x": 250.7687408863199, "y": 122.36985383193755 },
      { "x": 250.7687408863199, "y": 124.00731456425333 },
      { "x": 251.58747125247777, "y": 124.82604493041126 },
      { "x": 251.58747125247777, "y": 125.64477529656915 },
      { "x": 251.58747125247777, "y": 127.28223602888494 },
      { "x": 252.4062016186357, "y": 127.28223602888494 },
      { "x": 252.4062016186357, "y": 128.10096639504286 },
      { "x": 253.2249319847936, "y": 129.73842712735865 },
      { "x": 254.04366235095148, "y": 130.55715749351654 },
      { "x": 254.04366235095148, "y": 131.37588785967446 },
      { "x": 254.8623927171094, "y": 133.01334859199025 },
      { "x": 254.8623927171094, "y": 133.83207895814814 },
      { "x": 254.8623927171094, "y": 135.46953969046396 },
      { "x": 255.68112308326727, "y": 137.10700042277975 }
    ],
    "color": "#f57e83",
    "lineWidth": 2,
    "cmd": "pen"
  },
  {
    "id": "34179a19-9684-4801-bc6d-44519200b752",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "points": [
      { "x": 222.11317807079337, "y": 127.28223602888494 },
      { "x": 222.93190843695123, "y": 244.36067838946477 }
    ],
    "color": "#530260",
    "lineWidth": 2,
    "cmd": "line",
    "type": "line"
  },
  {
    "id": "afd43ec1-c72f-4d34-b3f1-5cb111ca3f0e",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "points": [
      { "x": 205.73857074763532, "y": 234.53591399556996 },
      { "x": 205.73857074763532, "y": 120.73239309962173 }
    ],
    "color": "#530260",
    "lineWidth": 2,
    "cmd": "line",
    "type": "arrow"
  },
  {
    "id": "7dddb8cd-f133-46c6-872c-48acdb8e184b",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "x": 185.02650029761537,
    "y": 260.8452826164144,
    "w": 164.73195475060456,
    "h": 164.73195475060456,
    "cmd": "image",
    "resource": "8e60fe4f-d88a-441e-b394-fd3705a69766",
    "modifiedBy": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "modifiedTimestamp": 0
  },
  {
    "id": "c17e957f-b741-48f3-a642-eab892801f21",
    "uid": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "_cached": {
      "dir": false,
      "lines": [
        { "l": "Note Text", "w": 158.30322265625 },
        { "l": "here", "w": 75.04150390625 }
      ]
    },
    "_text": "Note Text here",
    "x": 359.670907405568,
    "y": 258.20886213471636,
    "color": "#bd8cbf",
    "_fontSize": 35,
    "cmd": "stickyNote",
    "w": 170,
    "h": 170,
    "modifiedBy": "114ef838-3749-4ee4-a990-3fb9568436b7",
    "modifiedTimestamp": 0
  }
]

Import Shapes - Import Shapes into the board, allows shapes: text, rectangle, circle, pen, line, image and sticky note. Others shapes will be ignored.

Title	Description	Type
Data	Data Shapes in JSON format.	text

Draw Circle - Draws a circle on the board

Title	Description	Type
X middle coordinate	X coordinate of the middle point of the circle. Negative and positive numbers are allowed.	number
Y middle coordinate	Y coordinate of the middle point of the circle. Negative and positive numbers are allowed.	number
Radius	Radius of the circle. Positive numbers are allowed.	number
Border color	Color of the border of the Circle. Must be a six digit HEX code (with or without the #).	color
Line width	Width of the stroke in pixels	number
Fill color	Must be a six digit HEX code (with or without the #).	color
Move screen to new shape	The screen will be moved right to the center of the new shape.	yes/no

Draw Rectangle - Draws a rectangle on the board

Title	Description	Type
Points start x-coordinate	X coordinate of the top left point of the rectangleю Negative and positive numbers are allowed.	number
Points start y-coordinate	Y coordinate of the top left point of the rectangle. Negative and positive numbers are allowed.	number
Width	Width of the rectangle. Positive numbers are allowed.	number
Height	Height of the rectangle. Positive numbers are allowed.	number
Border color	Color of the border of the rectangle. Must be a six digit HEX code (with or without the #).	color
Line width	Width of the stroke in pixels	number
Fill color	Must be a six digit HEX code (with or without the #).	color
Move screen to new shape	The screen will be moved right to the center of the new shape.	yes/no

Clear - Clear the content of the board. It's undoable.

Download Image - Get and download the image of board in png format

Title	Description
Background	Chose background for image, available: white, black and transparent.

Exposed states

Name	Description	Type
Joined User Name	Name of last joined user	text
Joined User Id	Id of last joined user	text
Left User Name	Name of last left user	text
Left User Id	Id of last left user	text
Board Image	Image of board in `png` format, the result of action ‘Get Image’.	text(base64)
Data Shapes State	Data Shapes State as a JSON string. Run Action "Get Shapes" to save here the Shapes.	text(json)
Error message	There can be description about errors in configuration plugin.	text
Board id	Current board id	text

Element Events

Name	Description
Board: is Ready	The event will call when the board is ready.
Board: error	The event will call when any error occurred.
Board: user joined	The event will call when any other user joins the board.
Board: user left	The event will call when any other user leaves the board.
Mouse Enter to Whiteboard	The event will call when the current user's mouse cursor hovering the whiteboard.
Mouse Leave from Whiteboard	The event will call when the current user's mouse cursor leaving the whiteboard.

Plugin Data/Action Calls (API Calls only)

Get all boards

Parameters

take [number] - the maximum number of items to return in a response. Optional, default is 10.

skip [number] - excludes the first N items from a response body. Optional, default is 0.

hash [text] - If you need to do the api call from workflow more than once per page load - put here: insert dynamic data --> calculate formula --> random string.

Return values:

returns an object containing an array of boards and total counts of boards.

Get Board Details

Use this to get name, created date, last use and last change.

Parameters

BOARD_ID [text] - board id.

hash [text] - If you need to do the api call from workflow more than once per page load - put here: insert dynamic data --> calculate formula --> random string.

Return values:

returns a board object.

Get Board comments(data)

On a board users can create comments, use this call to get all comments on the board.

Parameters

BOARD_ID [text] - board id.

hash [text] - If you need to do the api call from workflow more than once per page load - put here: insert dynamic data --> calculate formula --> random string.

Return values:

returns an array of comments grouped by threads.

Get Board comments(action)

On a board users can create comments, use this call to get all comments on the board.

Parameters

BOARD_ID [text] - board id.

hash [text] - If you need to do the api call from workflow more than once per page load - put here: insert dynamic data --> calculate formula --> random string.

Return values:

returns an array of comments grouped by threads.

Duplicates a board

Create copy of existed board.

Parameters

BOARD_ID [text] - id of origin board.

NEW_NAME [text] - name of the board.

NEW_BOARD_ID [text] - a new id for duplicated board., minimum 15 symbols.

Return values:

returns id of the board.

Deletes a board

Parameters

BOARD_ID [text] - board id.

Deletes a board's content

Parameters

BOARD_ID [text] - board id.

Creates a new board

Parameters

BOARD_ID [text] - a new id for duplicated board., minimum 15 symbols.

NEW_NAME [text] - name of the board.

Return values:

returns id of the board.

Changelogs

Update: 19/07/2023 – Version 1.0.0

Published plugin

Update: 08/09/1023 - Version 1.4.0

Minor updates

Update: 20/10/1023 - Version 1.7.0

Upgrade to Version 4

Air Whiteboard Pro

Demo to preview the plugin:

Introduction

Prerequisites

How to setup

Plugin Element Properties

Element Actions

Exposed states

Element Events

Plugin Data/Action Calls (API Calls only)

Changelogs

Update: 19/07/2023 – Version 1.0.0

Update: 08/09/1023 - Version 1.4.0

Update: 20/10/1023 - Version 1.7.0