A collaborative Whiteboard powered by the [matrix] protocol and infrastucture.

Overview

TheBoard

A collaborative Whiteboard powered by the [Matrix] protocol and infrastructure.

Table of Content:

Introduction

This project is a whiteboard (similar to OneNote) which is using Matrix as its backend. All your drawings are stored in Matrix rooms on your Matrix server and are accessible to anyone who is invited.

DISCLAIMER

The spec for the whiteboard events are still subject to change. It is NOT recommended to use it for anything else than testing during the Alpha! It is recommended to always create seperate rooms just for testing this app. This way they can be left and replaced by new ones when the protocol changes!

screenshotTWIM

How this project came to life

I was dreaming of a good open source solution for OneNote or GoodNotes far a long time. There are already great projects, like Xournal++ and whitebophir. But, they do not include the extent of possibilities to flexible host, collaborate and structuring the notes I have wished for.

Recently, I was thinking about the exact requirements I wanted for such a whiteboard:

  • Real time synchronization (cloud storage)
  • Authentication/account infrastucture (to invite and collaborate on one whiteboard)
  • Adding/Removing people to a whiteboard
  • Reliable hosting (when having cloud storage I don't want to trust a one-man project to continue hosting. And a lot of people won't self host.)
  • Structuring whiteboards in categories
  • Viewing history and display which part has been drawn by which person
  • Annotating other whiteboards with new layers
  • Hosting of media files like pdf's and images

Looking at this list, Matrix was such an obvious choice. I could comment every point but basically with: "A whiteboard should be a Matrix room" everything is said.

TheBoard (probably not the final name) is exactly that. The front end is not done yet but already in an okay looking and usable state.
Before trying it out: It takes really long to log in with an account with lots of rooms. So I highly recommend to NOT use your main Matrix account. Additionally, it is necessary to tag rooms as whiteboards (really unintuitve UX that will be improved). But for now, the + button needs to be pressed and a (empty (not necassary but recommended) AND UNENCRYPTED) room needs to be selected. The app is available at

https://toger5.github.io/TheBoard

As always: use at your own Risk

Building / Developing

The project uses webpack and yarn for the dependencies and the building. There are two yarn scripts in package.json:

  • build: Webpack builds the project into the /dist/ folder (/dist/ is part of the gitignore)
  • start: Webpack builds the project into /distDev/ and hosts it on localhost:8080.

So, yarn start should get you up and running to develop on the app.

Structure and Technologies

This section is for all those, who quickly want to get an understanding on how TheBoard works.
The system is fairly simple. each stroke becomes a custom matrix event which describes the stroke by a vector path (similar to svg) Whenever one of these events enter a room it gets drawn when received (in computer terms "realtime") on all connected clients from the users in that room.
Take a look at the Spec for more details on how loading times are kept reasonable and what kind of events should be supported:

Specification

For the drawing a HTML canvas is used. Paper.js turned out to be a great tool for wrapping the canvas in a more accessible layer. Two features are especially important. It provides an object tree which makes it really fast end easy to interact with the drawn element. For modifying and erasing, this is relevant to quickly find the event/stroke that was clicked. Additionally paper.js provides a bezier-curve fit function which works great, makes path look much smoother and reduces the amount of segments to describe a path by up to 10x. Additionally it also makes resizing and recalculating the canvas resolution really easy. I did that before manually and ... its easier with paper.js.

Planned Use-cases

TheBoard is can be used in multiple ways and they are all taken into consideration while designing/developing. Matrix' real time abilities allow TheBoard to be used as such as well. Any stroke which is sent will be displayed on all other connected clients (almost) instantly. So it should be easy to set up collaborative drawing/brain storming sessions and join with an amazing auth system (Matrix account, SSO or Guest accounts).
The next use case is for long term secure and save personal notes. Matrix is amazing in guaranteeing hosting. The Matrix.org server (and others like chat.mozilla.org ...) won't go in the foreseeable future. You cannot dream of a better "cloud file format" than a chat-room on a Matrix server. Even propitiatory software does not guarantee you that you can always move your rooms / whiteboard notes to your own server if the service is shut down. So I really want TheBoard to be suitable for long term notepads where anyone can create, share, and iterate on their ideas. It should become an ideal solution for taking university notes with, easily share them with colleagues and have structured access to your work years after graduation.
Last I want a minimized version of the application as a room widget. Since joining a room is all that is needed to be part of a whiteboard, this even further minimizes the barrier of entry. Core users still could use the dedicated TheBoard app to structure the notes but people who just want check out a board can do so easily with one click in the widget.

Comments
  • .well-known is required

    .well-known is required

    While most servers on the matrix network use .well-known not all do. I think this shouldn't be a requirement. Especially because it's just some json that restates the url.

    opened by Sleuth56 7
  • Deployment

    Deployment

    As previously discussed in the Matrix room, I have this deployment thing. ATM it deploys to both IPFS and GH Pages, though IPFS hosting won't be useful to the project directly unless there's a domain. But, other people can access it from IPFS, so I don't know if you want to keep that feature.

    Apart from that, on a git tag, this will create a release and output zip and tar.gz files for anyone self-hosting the frontend. It also builds and tests every pull request. The deployment to GH Pages and IPFS only happens when there's no "-" in the git tag. For example, v1.0.0-alpha1 won't trigger a deployment, whereas v1.0.0 will.

    Also, if accepted, these changes will need to be Squash and Merged because there are too many commits. @toger5 any feedback on how you would want this to work? I know this wasn't discussed this extensively in the Matrix room, I just designed something that seemed appropriate and think could help.

    opened by karmanyaahm 6
  • Fix typos, add full stops, fix JSON

    Fix typos, add full stops, fix JSON

    Nice work! The application looks very good and storing whiteboards in Matrix is a great idea.

    Here are some suggestions for improving the project's documentation.

    opened by jaller94 1
  • Webpack refactoring and fixes #3

    Webpack refactoring and fixes #3

    The app is ported to use webpack. This allowed me to also start to clean up the code a little bit. There is still a lot of work to do. But it is in a usable state now.

    opened by toger5 0
  • Paste images

    Paste images

    I often take screenshots that I like to annotate in my board software (drawpile for now), and I'd like to be able to do the same in TheBoard. Unfortunately I can't copy/paste images this way, I need to save them in a file and insert that file. (and even in that case it hangs at "Upload image 100", but it's another issue).

    opened by tobiasBora 0
  • Follow a user

    Follow a user

    (sorry for this spam of feature requests)

    Navigating in an infinite board can sometimes be hard as one can get lost easily. Often, multiple people want to watch at the same part of the board (say the position of the teacher), and therefore an option "follow user XXX" would be great.

    opened by tobiasBora 0
  • Erase stroke that are not mine and clear the board

    Erase stroke that are not mine and clear the board

    As far as I can see, I can only erase my own strokes. Would it be possible to allow some users to also remove other's stroke? Or maybe I just missed a functionality as I'm testing this software in a room where I'm not the admin.

    Another cool feature to have would be a way to erase all the board at once.

    opened by tobiasBora 0
  • Copy/paste parts of the screen

    Copy/paste parts of the screen

    A feature I use a lot in drawpile (that I'm using to collaboratively edit a board for now, the only issue being that it needs a self-hosted server) is the ability to select (lasso or rectangle) a part of the screen and copy/paste it somewhere else.

    opened by tobiasBora 0
  • Erase parts of a stroke

    Erase parts of a stroke

    First, thanks a lot for this great software.

    For now, erasing removes the whole stroke. It would be super cool to be able to use it to erase only parts of a stroke. Both behaviors being interesting, it would be nice to provide maybe two tools depending on the wanted behavior (with maybe a small logo below the erasor to toggle the setting?)

    opened by tobiasBora 0
Releases(v0.11.2)
Owner
Timo
Timo
Hello! Welcome to Our own Live Code Editor 2!! This is supported tabs and full-screen editing, Console, tabs and more are coming. We uses this one in our all tutorials. Made by @E-Coders & @Genius398

Live Code Editor 2 Hello! this is our live code editor an another second release version of our main Resporibity. This have style as tabs and more fea

Educational Websites 5 Nov 18, 2021
Promise based HTTP client for the browser and node.js

axios Promise based HTTP client for the browser and node.js New axios docs website: click here Table of Contents Features Browser Support Installing E

axios 98k Dec 31, 2022
Ajax for Node.js and browsers (JS HTTP client)

superagent Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features T

Sloth 16.2k Jan 1, 2023
HTTP server mocking and expectations library for Node.js

Nock HTTP server mocking and expectations library for Node.js Nock can be used to test modules that perform HTTP requests in isolation. For instance,

Nock 11.9k Jan 3, 2023
🌐 Human-friendly and powerful HTTP request library for Node.js

Sindre's open source work is supported by the community. Special thanks to: Human-friendly and powerful HTTP request library for Node.js Moving from R

Sindre Sorhus 12.5k Jan 9, 2023
Download and extract files

download Download and extract files See download-cli for the command-line version. Install $ npm install

Kevin Mårtensson 1.2k Dec 21, 2022
Full-featured, middleware-oriented, programmatic HTTP and WebSocket proxy for node.js

rocky A multipurpose, full-featured, middleware-oriented and hackable HTTP/S and WebSocket proxy with powerful built-in features such as versatile rou

Tom 370 Nov 24, 2022
A fully-featured Node.js REST client built for ease-of-use and resilience

flashheart A fully-featured Node.js REST client built for ease-of-use and resilience flashheart is built on http-transport to provide everything you n

BBC 118 Jun 21, 2022
Bearer provides all of the tools to build, run and manage API integrations.

Bearer - The API Integration Framework Bearer provides all of the tools to build, run and manage API Learn more Archive Status Bearer JS has been arch

Bearer.sh 22 Oct 31, 2022
Library agnostic in-process recording of http(s) requests and responses

@gr2m/http-recorder Library agnostic in-process recording of http(s) requests and responses Install npm install @gr2m/http-recorder Usage import http

Gregor Martynus 4 May 12, 2022
A jQuery plugin for make your ajax request's error and success messages auto handled.

sweetAjax A jQuery plugin for make your ajax request's error and success messages auto handled. Installation sweetAjax plugin has built on jQuery-ui w

Eren Sertkaya 2 May 17, 2022
Very very very powerful, extensible http client for both node.js and browser.

ES-Fetch-API 中文 | English Very very very powerful, extensible http client for both node.js and browser. Why should you use ES-Fetch API? Still using a

null 17 Dec 12, 2022
Highly sophisticated proxy used for evading internet censorship or accessing websites in a controlled sandbox using the power of service-workers and more! Easy deployment version (Node.js)

Ultraviolet-Node The deployable version of Ultraviolet, a highly sophisticated proxy used for evading internet censorship or accessing websites in a c

Titanium Network 27 Jan 2, 2023
Highly sophisticated proxy used for evading internet censorship or accessing websites in a controlled sandbox using the power of service-workers and more! Easy deployment version (Node.js)

Ultraviolet-Node The deployable version of Ultraviolet, a highly sophisticated proxy used for evading internet censorship or accessing websites in a c

Titanium Network 34 Apr 15, 2022
A matrix bot to monitor and respond to investment scam spamming across the matrix platform, for example in rooms with a permanently offline admin.

Spam Police A matrix bot to monitor and respond to investment scam spamming across the matrix platform, for example in rooms with a permanently offlin

jjj333_p 7 Dec 26, 2022
Use Matrix as a backend for local-first applications with the Matrix-CRDT Yjs provider.

Matrix CRDT Matrix-CRDT enables you to use Matrix as a backend for distributed, real-time collaborative web applications that sync automatically. The

Yousef 604 Jan 7, 2023
Eisen Matrix - a prioritization app that uses Eisenhower matrix technique as workflow to prioritize a list of tasks & built with React Native

Eisen Matrix is a prioritization app that uses Eisenhower matrix technique as workflow to prioritize a list of tasks & built with React Native for learning purposes inspired by Einsen which is written in Kotlin.

Nafees Nazik 11 Nov 28, 2022
matrix <=> discord moderation with the power of matrix-appservice-discord

graim matrix <=> discord moderation with the power of matrix-appservice-discord Social graim's website is viewable at gra.im. You can join the graim M

null 19 Dec 24, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A collaborative newsroom documentation site, powered by Google Docs.

A collaborative newsroom documentation site, powered by Google Docs.

The New York Times 1k Dec 26, 2022