cojapacze / sketchpad Goto Github PK

View Code? Open in Web Editor NEW

151.0 7.0 37.0 1.37 MB

Sketchpad is fully customisable collaborative whiteboard plugin written in pure JavaScript.

Home Page: https://sketchpad.pro

License: GNU Affero General Public License v3.0

JavaScript 99.84% Dockerfile 0.16%

drawing canvas whiteboard javascript editor sketchpad cdn draw history websocket

sketchpad's Introduction

Sketchpad.pro

Sketchpad Pro is a simple graphic editor written for web. This drawing plugin uses HTML5 Canvas supported by all modern browsers (Chrome, Firefox, Opera, Internet Explorer...). You can use any device to draw on "sketchpad". Drawen sketches you can export to jepg/png or save as .json history file.

Sketchpad Pro is using inputs history to store drawings. This allows to cooperate multiple users in real-time using WebSocket server.

Sketchpad Pro is fully customisable javascript library written in ES5.

Using Sketchpad Pro with a CDN Copy this script and paste into your page to include Sketchpad Pro from CDN server:

<script src="https://cdn.sketchpad.pro/dist/current/sketchpad.min.js"></script>

Build your own Sketchpad Pro

Download & install current Node.js.
Download {@link https://developers.sketchpad.pro Sketchpad Pro developer pack} and extract sketchpad/ folder or clone project from GitHub:

git clone https://github.com/cojapacze/sketchpad.git

Run in terminal:

cd sketchpad
npm install
gulp

Check dist/ folder for your build files. Open test page: demos/online.html to test your build.
Run local server

cd server
node server

Try:

gulp watch

to watch files for changes while development.

Demos

https://developers.sketchpad.pro/advanced.html

Docker

Dockerfile and docker-compose are available in the Docker directory of the project.

Documentation

The full documentation is available online at the following address: https://developers.sketchpad.pro/documentation.html

Checking Your Installation

The Sketchpad.pro comes with a few sample pages that can be used to verify that installation proceeded properly. Take a look at the demos in installation directory.

Just call for example:

  simple.html

License

AGPL-3. https://www.gnu.org/licenses/agpl-3.0.html

sketchpad's People

Contributors

Stargazers

Watchers

sketchpad's Issues

Upload Image feature

Hi there,

Thanks for your great product, I am using it to embed whiteboard to our site and it is working great.

There is a small problem, in the online drawing page (https://sketchpad.pro/B25E53E0B13653F667F:z6y9x2pn), I see an upload image feature and it is working fine on this page:

But in demo advanced page (https://developers.sketchpad.pro/advanced.html), the upload feature seems only work on json file and do not accept images/pdf files.

I took a look at the source code and here are what I found on demos/js/advanced.js:

Can you please tell me how to edit these lines so I can upload the images/pdf files to the whiteboard (working the same way with online drawing page).

Thanks.

Reset button doesn't work with real-time collaboration.

clearSketchpad() doesn't affect other users.

Unable to save (Screenshot)

When I click on the screenshot button from tool menu it shows.

sketchpad.js:4096 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
at Sketchpad.renderOutputCanvas (http://127.0.0.1:5500/demos/libs/sketchpad.js:4096:23)
at Sketchpad.screenshot (http://127.0.0.1:5500/demos/libs/sketchpad.js:4103:33)
at HTMLDivElement. (http://127.0.0.1:5500/demos/js/advanced.js:181:17)

Here is the code of screenshot

//screenshot
  document
    .getElementById('tool-screenshot')
    .addEventListener('click', function () {
      sketchpad.screenshot(
        function (blob) {
          saveFile(blob, sketchpad.room.room_token + '.png', 'image/png');
        },
        'image/png',
        1
      );
    });

Text input clarity issue

Text input clarity is reducing when it draws on canvs at a noticable level.!

clear all the canvas

I found it.

document.getElementById('Clean').addEventListener("click", function () {
        sketchpad.clearSketchpad();
    });

textinput is making the grid move

Text input is making the grid move.

Cannot compile app to work

I have small problem when using library - i mean, gulp works perfectly, but then due to some tools error (cannot find and null pointers when accessing them) the sketchpad is never initialized - and this only happenes with the version from git.
Tried to used the sketchpad.js file from the website and it worked - but its much different than the version built by gulp form this git archive. Is there anyway to make the git version actual or get some information about commercial version of spetchpad?

Drag Single Object

How can we move single objects rather than viewport..like i just want to move image or text rather than whole viewport