DrawBoard-Online

Draw together with your coworker, enjoy the creating time! 😊 Draw what you want, draw what you love!

At first, I just wanted to write a simple artboard, but later I remembered that graphite document has a whiteboard function, so I wanted to develop the current canvas function into a simple version of collaborative artboard.

Up to now, several versions have been updated, from the original simple painting, to chat, to call the camera to get pictures and a series of function supplements, all of which are made in the spare time like toothpaste.

This application was developed in the traditional way before, and the whole application will be reconstructed with Vue or React. At present, there are still many functions to be improved. We look forward to your pull request to improve the function of this application together 🤣

Here do not do specific implementation details, specific can fork source code, I believe that the wit of you can understand in seconds, like don’t forget to give a 🌟star oh, this is my motivation to continue to update 😁.

Latest Update 🚩 :

🔥 attention!! Has been updated:

  1. Modify the directory structure.
  2. Refactoring with typescript (approximately ~ 75% complete)
  3. 🔥🔥 Added video conference 🔥🔥 (Safari,IE is not supported, use the latest features, experience in Chrome)

1. Shared collaborative artboard warehouse

The front-end interface is packaged with Webpack, the back-end service uses Express, and the collaboration uses socket. IO to carry the chat content, the communication ability of drawing data, and the collaborative transmission of data.

Online demo: Hard to deploy, currently need to clone to run locally. Fork the code to your own repository, instead of pulling request 🏭 repository address: github.com/forrestyuan… 💬 Warehouse discussion forum: github.com/forrestyuan…

2. How to run it locally

To experience the app, you can follow the steps below to launch the app. 💻 Development mode: 1-2-3 💻 Preview mode: 1-2-4

  1. Download the warehouse
git clone <repository>
Copy the code
  1. Install dependencies
cd frontend
npm install

cd server
npm install
Copy the code

Attention! If you are viewing and need to modify the code, please perform the following steps - Step 3 - ok. If you are viewing but do not need to modify the code, please perform - Step 4 - OK

  1. For the development phase (take this step)
# Front-end service startup (using WebPack Dev Server) :
cd frontend
npm run dev

# Start the background service (using Nodemon to monitor the modification of the back-end file in real time to restart the service)
cd server
npm run start

After startup, type the URL in your browser: http://127.0.0.1:8082
Copy the code
  1. For the production phase (take this step)
Package the front-end file and start the server
cd frontend
npm run build

cd server
npm run start

After startup, type the URL in your browser: http://127.0.0.1:3001
Copy the code

3. Share the current features of collaborative artboards

  1. Development completed:
  • Zoom in canvas
  • ✔ Canvas color
  • Color of your brush
  • ✔ The width of your brush
  • ✔ Medical records
  • Chat rooms (✔)
  • Click to open your bookmarks.
  • Draw collaboration (similar to graphite document collaboration)
  • ✔ UI
    • Using the UI Library (Material Design)
  • Right corner of your chat notification bar
  • Get photos based on WebRTC photography, draw on this basis ~🔥 (bookmark)
  • WebRTC Videoconferencing ~ 🔥🔥 (✔)
  1. Features to be developed:
  • Text control (to be developed)
  • Upload pictures, drawing based on pictures (to be developed)
  • Drawing with basic shape can be dragged to adjust size (to be developed)
  • Rich chat features (to be developed)
    • Support chat emoji
    • Similar to QQ jitter window remind
  • Other Unknown features (🤔)

3-1. The most original effect drawing

3-2. Effect after using MDUI

3-3. Pictures are obtained based on WebRTC photography and are drawn on this basis

3-4. Video conference

4. Write in the last sentence

This application implementation of the more basic, there is a lot of room for improvement, interested you can fork, slightly improved. Like you, reward a small star bar, hee hee 😄, due to busy work, the update speed is relatively slow.