Giter Club home page Giter Club logo

whitebird's Introduction

Whitebird is an open-source, web-based, collaborative, digital Whiteboard built with NestJS, MongoDB, NuxtJs and FabricJs.

The application was developed as part as a study project at the Hochschule Kaiserslautern. Due to limited time, we cannot promise to actively continue development on this project, but we will of course look into Pull Requests! So feel free to send us a PR if you have something meaningful to add. We would really appreciate it.

Features

Currently the application is in early development and contains the following features:

  • Creation of whiteboard rooms

  • Joining whiteboard rooms via Join-Codes or Links

  • Concurrent working on the whiteboard together with colleagues

  • Export of the whiteboard as .png/.pdf

  • Changeable Background: Use backgrounds as templates for organizing your whiteboard

  • Whiteboard Tools

    • Creation of Text-Fields
    • Pencil for freehand drawing
    • Basic geometric objects: circle, square
    • Sticky Notes
    • Basic Edit Actions: Deleting, Moving, Rotating and Scaling of objects
      • Deleting is currently only supported by selecting & pressing the 'delete'-key.

Getting Started

For Users

To run the application you can use docker to setup the application. Visit our Getting Started for more information on how to deploy the application.

For Developers

As a developer always feel free to create issues or maybe try to add your own functionality/ feature to the project. We have created a Getting Started for Developers, where the installation steps are explained. For further information about the used Technologies and the Architecture visit the corresponding pages.

whitebird's People

Contributors

beckmannarmin avatar buchholztim avatar geiserrafael avatar marcbollmann avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

whitebird's Issues

Mini UI Fixes

Describe your Issue

Serveral minimal issues in the UI

grafik

These buttons do not link to anywhere.


grafik

These links still link to /MTI-Projekt instead of /Whitebird


grafik

No links at all


grafik

Logo still wrong


grafik

Should be the White-Bird

Docker

Describe your Issue

Project should be completely executable in docker.

Documentation

Describe your Issue

A Documentation in the Wiki should be provided to illustrate to Key-Features and at least a How-To and Get-Started

Frontend-UI/UX

Describe your Issue

  • Join Room / Create Room Possibility (see demoPage.vue for current example)
  • Slider-Color for Pencil should be changed, if possible
  • Join-Code should somehow be displayed, after Joining/Creating (see demoPage.vue for current example)

Persistent Store

Describe your Issue

Vuex-Store is not persisted through reloads.

Canvas-Tools

Describe your Issue

  • Canvas Tools should be revivable (enliven in FabricJS). This means all custom Listeners have to be applied after restoring an Object from a JSON (see Stickynote for best example)
  • More efficient way of dispatching Canvas-Changes: Currently all Tools manually call a Store-Dispatcher after Creation. This could be simplified by a Custom Listener on the Canvas itself.

Invite Button / Modal

Describe your Issue

grafik

This Button currently only responds to the second click.

grafik

And the Modal does not close, when clicked on the 'x' in the upper right corner.

Alert messages with proper styling

Describe your Issue

When the user drag and drop an unsupported file type into the canvas the standard alert - without any stlying - pops up.

How to reproduce?

Drag & Drop something different than svg, jpeg/jpg or png on the canvas

What would be the expected behavior?

Better looking alert

Tell us about your client:

  • Browser: Chrome, IE, Firefox
  • Browser-Version: latest
  • OS: Win10
  • etc.

Share-Link Issues

Describe your Issue

Share-Link is hardcoded to localhost:3000.

Joining Share-Link in Docker results in 404

Internationalizing

Describe your Issue

The App should be available in multiple languages.

This can be achieved with i18n, which is not complex, but costly in a timely sense.
All strings have to be exported in seperate files, loaded dynamically and an option to change the language has to be provided.

Moving StickyNote on Client Y results in 404 at Client 2 if Client 2 is in Editing-Mode of StickyNote

Describe your Issue

If a client is editing a StickyNote and another Client moves that StickyNote it will crash for the Client in Editing-Mode.

TypeError: obj.item(...) is undefined
    updateObjectFromServer FabricJS.vue:362
    updateObjectFromServer FabricJS.vue:361
    updateObjectFromServer FabricJS.vue:356
    mounted FabricJS.vue:245
    VueJS 2
    default socketStoreInjecter.js:8
    _callee5$ canvas.js:85
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 4
    updateCanvasObjectServer canvas.js:76
    wrappedActionHandler vuex.esm.js:851
    dispatch vuex.esm.js:516
    boundDispatch vuex.esm.js:406
    _callee9$ NuxtJS
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 2
client.js:97

Backend-Tasks

Describe your Issue

  • Rooms vs. Namespaces (Namespaces are called channel in nuxt-socket-io)
  • Correct Implementation of Socket-Events for emitting changes on canvas to Client (see nuxt.config.js)
  • mtiID-Validation should now validate custom JSON-Property mtiData

StickyNote Font not properly Synchronizing

Describe your Issue

If the Font of a StickyNote gets changed, the change is only reflected at other clients after moving the StickyNote.

Desktop.2021.02.05.-.10.49.51.04.mp4

MongoDB not persisted

Describe your Issue

Data from MongoDB is not mounted outside docker and thereby not persisted through restarts.

Disable swagger in production build

Describe your Issue

In our production build swagger should be turned off.

How to reproduce?

  • Run nest build
  • Run node dist/main
  • Go to localhost:port/api

What would be the expected behavior?

Swagger should not be in the production build. See nestjs/swagger#184.

Remove unused Functionality

Describe your Issue

Currently the UI provides Feature which are not available. These have to be removed, to not confuse the user.

General UI Features:

  • Login/Register

Whiteboard-Tools:

  • Undo

Tooltips for Tools

Describe your Issue

Hovering over the Tools in the Toolbar should yield some additional Information what the Tool does.

Background Image Replacable

Describe your Issue

The Background Image on the Whiteboard should be replacable by preconfigured templates.
(e.g. Eisenhower-Matrix)

Editing a note doesn't work

Describe your Issue

When creating editing a note the application crashes.

How to reproduce?

Create a note and edit the text.

client.js?06a0:97 TypeError: Cannot read property 'whitebirdData' of undefined
    at Vue.eval (FabricJS.vue?bd43:110)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at VueComponent.leaveEditingMode (StickyNoteTool.vue?0cee:67)
    at klass.eval (StickyNoteTool.vue?0cee:38)
    at klass.fire (fabric.js?7a94:313)
    at klass._handleEvent (fabric.js?7a94:12655)
    at klass.__onMouseDown (fabric.js?7a94:12858)
    at klass._onMouseDown (fabric.js?7a94:12432)

What would be the expected behavior?

Create a note and edit the text without a crash. Also the initial Note should be empty.

Context Menues should collapse

Describe your Issue

The Menues on the Whiteboard for the tools should automatically collapse if another tool gets selected.

Drawing does not works in the current version

Describe your Issue

Drawing throws an error message.

How to reproduce?

Draw on on a whiteboard. And the drawn lines disappear.

DrawingTool.vue?3cc9:29 Uncaught TypeError: Cannot read property 'type' of undefined
    at klass.eval (DrawingTool.vue?3cc9:29)
    at klass.fire (fabric.js?7a94:313)
    at klass._handleEvent (fabric.js?7a94:12655)
    at klass.__onMouseUp (fabric.js?7a94:12590)
    at klass._onMouseUp (fabric.js?7a94:12473)

What would be the expected behavior?

Drawing should work without error and without disappering.

Make production build ready for docker

Describe your Issue

ATM building a production build will throw errors. That need to be fixed, so that docker can use the optimized production build of the backend instead of the dev build.

How to reproduce?

  1. Run nest build
  2. Run node dist/main

Also have a look in the package.json

 "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"

What would be the expected behavior?

Production build should work without errors. Related to #29

Customizable Text

Describe your Issue

Text-Tool and StickyNote-Tool should provide an Option to change its desing.

  • Font Size
  • Font Type
  • Font Color?

Change placeholder text in resource section

Describe your Issue

We suggest to the user to view his changes with history control but we don´t have such a thing

How to reproduce?

Go to the landing page and browse to the feature section

What would be the expected behavior?

A feature that we really have, so change it in the locale files and in the landing page

Tell us about your client:

  • Browser: Chrome
  • Browser-Version:
  • OS: Win10
  • etc.

Nuxt Cleanup

Describe your Issue

Nuxt Cleanup

How to reproduce?

What would be the expected behavior?

Provide Basic Socket functionality

  • Create basic socket.io functionality in Nestjs Backend
  • Send Messages (back) to all participants with the socket
  • Send Messages (back) to single participants
  • Group your socket into rooms or namespaces and provide API to use it -> needed for the whiteboards later

Logger loggs two times

Describe your Issue

Logger in Backend loggs two times

How to reproduce?

Start Backend and look at the logs

What would be the expected behavior?

Logger loggs just one time

StickyNote update doesn`t work

Describe your Issue

If you change the StickyNote, it is not updated correctly for the second person.

How to reproduce?

first Person: Create a StickyNote change the Text
second Person: sees no change but the console object has been changed

Copy and Pasting Text into Sticky Note Error

Describe your Issue

When you copy and paste text into sticky notes. The copy and pasted text has its old format.

How to reproduce?

  1. Create a sticky note
  2. Type text & copy the text
  3. Now change the font
  4. And copy the old text behind the new changed one
    image

What would be the expected behavior?

  • the copied should have the format of the new text
  • and the text should stay on the sticky note

Host Demo

Describe your Issue

How to reproduce?

What would be the expected behavior?

Tell us about your client:

  • Browser:
  • Browser-Version:
  • OS:
  • etc.

Add more Functionality

Describe your Issue

The Current Feature-Set is nice, but incomplete.

Users seem to expect / want more Tools to use on the Board.

For Example:

  • Draw Straight lines (from Point to point)
  • "Point to Point"-Tool can be extended to a Poly-Line-Tool (as many points, as wanted, connected by straight lines)
  • Create Filled Structures by connecting Poly-Lines from Start to End
  • Zooming on the Canvas (http://fabricjs.com/fabric-intro-part-5)
  • Table-Tool

Renaming the Project

MTI-Projekt sounds not good and does not reflect what we are doing.
Please comment appropriate ideas.

Rotating notes inconsistent behavior

Describe your Issue

When rotating a note. The synced object on the other clients doesn't work as intended.

How to reproduce?

  • Create a note
  • rotate it
  • switch to the other client
    1. Issue: the note is not editable only when you use the selector see #14
      image
      image
    1. Issue:
      the rebuilt note on the other client can be distorted
      image

What would be the expected behavior?

The note should be editable and should behave exactly like on the source client.

Join Button doesn't work as expected

Describe your Issue

When on the main page when clicking on join and entering the join code nothing happens.

How to reproduce?

Go to the main page click on Join and enter the corresponding Join-Code.

What would be the expected behavior?

You will get redirected to http://ipadress:port/Whiteboard and join the room via sockets.

Share Whiteboard

Describe your Issue

Whiteboard should be sharable through a Link.
This can be achieved by using a Page/Folder named like _NAME, which represents a custom Parameter.

Routes get dynamically created like this <NuxtLink :to="PAGE/${dynamicID}">Link to PAGE</NuxtLink>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.