graftjs / aetherboard Goto Github PK

View Code? Open in Web Editor NEW

33.0 33.0 3.0 331 KB

Collaborative Whiteboard as a microservice

License: MIT License

JavaScript 92.15% CSS 2.68% HTML 5.17%

aetherboard's People

Contributors

Stargazers

Watchers

Forkers

sdboyer leaysgur red-ph0enix

aetherboard's Issues

build system

implement a webpack based build system based on famous-webpack-seed

Basic Canvas Surface

At first we just need a page with a static surface.

Problem with famous dependency

It looks like famous may have changed something, as they now have a src directory that contains subdirectories, but they don't have a main in package.json that reflects this. Bottom line is that running webpack-dev-server fails with these errors:

http://localhost:8080/webpack-dev-server/
webpack result is served from /dist/
content is served from /Users/tauren/github/AetherBoard/AetherBoard
Hash: 08607816b690cecadf78
Version: webpack 1.4.15
Time: 745ms
     Asset    Size  Chunks             Chunk Names
index.html     480          [emitted]  
 bundle.js  615563       0  [emitted]  main
chunk    {0} bundle.js (main) 585453 [rendered]
    [0] ./client.js 868 {0} [built]
    [1] ./input.js 966 {0} [built]
    [2] ./invoke.js 334 {0} [built]
    [3] ./spline.js 809 {0} [built]
    [4] ./ui/index.js 709 {0} [built] [2 errors]
    [5] ./~/debug/browser.js 3464 {0} [built]
    [6] ./~/debug-stream/index.js 789 {0} [built]
    [7] ./ui/whiteboard.js 1204 {0} [built] [1 error]
    [8] ./~/graft/ws.js 1050 {0} [built]
    [9] ./~/graft/graft.js 2535 {0} [built]
   [10] ./~/famous-polyfills/index.js 104 {0} [built]
   [11] ./~/debug/debug.js 4096 {0} [built]
   [12] ./~/readable-stream/readable.js 451 {0} [built]
   [13] ./~/through2/through2.js 2140 {0} [built]
   [14] ./ui/index.html 55 {0} [built]
   [15] ./ui/sync.js 512 {0} [built] [5 errors]
   [16] ./~/lodash/dist/lodash.compat.js 244097 {0} [built]
   [17] ./ui/main.css 754 {0} [built]
   [18] ./~/css-loader!./ui/main.css 365 {0} [built] [1 error]
   [19] ./~/style-loader/addStyle.js 1128 {0} [built]
   [20] (webpack)/~/node-libs-browser/~/buffer/index.js 28521 {0} [built]
   [21] (webpack)/~/node-libs-browser/~/process/browser.js 2217 {0} [built]
   [22] ./~/graft/lib/server.js 1223 {0} [built]
   [23] ./~/graft/lib/client.js 1103 {0} [built]
   [24] ./~/graft/lib/deepMatch.js 344 {0} [built]
   [25] ./~/graft/lib/wrapMessage.js 488 {0} [built]
   [26] ./~/famous-polyfills/classList.js 3914 {0} [built]
   [27] ./~/famous-polyfills/functionPrototypeBind.js 780 {0} [built]
   [28] ./~/famous-polyfills/requestAnimationFrame.js 471 {0} [built]
   [29] ./~/debug-stream/~/split/index.js 1494 {0} [built]
   [30] ./~/readable-stream/lib/_stream_readable.js 27120 {0} [built]
   [31] ./~/readable-stream/lib/_stream_writable.js 10902 {0} [built]
   [32] ./~/readable-stream/lib/_stream_duplex.js 2811 {0} [built]
   [33] ./~/readable-stream/lib/_stream_transform.js 7396 {0} [built]
   [34] ./~/readable-stream/lib/_stream_passthrough.js 1727 {0} [built]
   [35] ./~/readable-stream/transform.js 55 {0} [built]
   [36] ./~/debug-stream/~/debug/browser.js 3277 {0} [built]
   [37] ./~/debug-stream/~/through2/through2.js 1719 {0} [built]
   [38] (webpack)/~/node-libs-browser/~/stream-browserify/index.js 3627 {0} [built]
   [39] (webpack)/~/node-libs-browser/~/util/util.js 15563 {0} [built]
   [40] ./~/graft/~/inherits/inherits_browser.js 672 {0} [built]
   [41] ./~/debug/~/ms/index.js 2025 {0} [built]
   [42] (webpack)/buildin/module.js 251 {0} [built]
   [43] ./~/graft/~/jschan/lib/jschan_browser.js 404 {0} [built]
   [44] ./~/through2/~/xtend/immutable.js 323 {0} [built]
   [45] ./~/debug-stream/~/debug/debug.js 4096 {0} [built]
   [46] (webpack)/~/node-libs-browser/~/buffer/~/is-array/index.js 470 {0} [built]
   [47] (webpack)/~/node-libs-browser/~/buffer/~/ieee754/index.js 2093 {0} [built]
   [48] (webpack)/~/node-libs-browser/~/string_decoder/index.js 7796 {0} [built]
   [49] (webpack)/~/node-libs-browser/~/events/events.js 8251 {0} [built]
   [50] ./~/debug-stream/~/split/~/through/index.js 2618 {0} [built]
   [51] ./~/readable-stream/~/isarray/index.js 120 {0} [built]
   [52] ./~/readable-stream/~/string_decoder/index.js 7796 {0} [built]
   [53] ./~/readable-stream/~/inherits/inherits_browser.js 672 {0} [built]
   [54] (webpack)/~/node-libs-browser/~/buffer/~/base64-js/lib/b64.js 3430 {0} [built]
   [55] (webpack)/~/node-libs-browser/~/util/support/isBufferBrowser.js 203 {0} [built]
   [56] ./~/readable-stream/~/core-util-is/lib/util.js 3040 {0} [built]
   [57] ./~/graft/~/jschan/lib/memory/session.js 1907 {0} [built]
   [58] ./~/graft/~/jschan/lib/stream/session.js 5752 {0} [built]
   [59] ./~/graft/~/jschan/lib/websocket/client.js 374 {0} [built]
   [60] ./~/debug-stream/~/through2/~/xtend/index.js 323 {0} [built]
   [61] (webpack)/~/node-libs-browser/~/readable-stream/readable.js 451 {0} [built]
   [62] (webpack)/~/node-libs-browser/~/readable-stream/writable.js 54 {0} [built]
   [63] (webpack)/~/node-libs-browser/~/readable-stream/duplex.js 52 {0} [built]
   [64] (webpack)/~/node-libs-browser/~/readable-stream/transform.js 55 {0} [built]
   [65] (webpack)/~/node-libs-browser/~/readable-stream/passthrough.js 57 {0} [built]
   [66] (webpack)/~/node-libs-browser/~/stream-browserify/~/inherits/inherits_browser.js 672 {0} [built]
   [67] (webpack)/~/node-libs-browser/~/util/~/inherits/inherits_browser.js 672 {0} [built]
   [68] ./~/debug-stream/~/debug/~/ms/index.js 2025 {0} [built]
   [69] ./~/graft/~/jschan/lib/memory/channel.js 2210 {0} [built]
   [70] ./~/graft/~/jschan/lib/stream/channels.js 2017 {0} [built]
   [71] ./~/graft/~/jschan/lib/encoder.js 4947 {0} [built]
   [72] (webpack)/~/node-libs-browser/~/readable-stream/lib/_stream_duplex.js 2811 {0} [built]
   [73] (webpack)/~/node-libs-browser/~/readable-stream/lib/_stream_writable.js 13069 {0} [built]
   [74] (webpack)/~/node-libs-browser/~/readable-stream/lib/_stream_transform.js 7350 {0} [built]
   [75] (webpack)/~/node-libs-browser/~/readable-stream/lib/_stream_readable.js 25959 {0} [built]
   [76] (webpack)/~/node-libs-browser/~/readable-stream/lib/_stream_passthrough.js 1727 {0} [built]
   [77] ./~/graft/~/jschan/~/reduplexer/index.js 3621 {0} [built]
   [78] ./~/graft/~/jschan/~/websocket-stream/index.js 1431 {0} [built]
   [79] ./~/graft/~/jschan/lib/channels.js 2471 {0} [built]
   [80] ./~/graft/~/jschan/~/async/lib/async.js 34598 {0} [built]
   [82] ./~/graft/~/jschan/~/msgpack5/index.js 13169 {0} [built]
   [83] (webpack)/~/node-libs-browser/~/readable-stream/~/inherits/inherits_browser.js 672 {0} [built]
   [84] (webpack)/~/node-libs-browser/~/readable-stream/~/core-util-is/lib/util.js 3040 {0} [built]
   [85] (webpack)/~/node-libs-browser/~/readable-stream/~/isarray/index.js 120 {0} [built]
   [86] ./~/graft/~/jschan/~/websocket-stream/~/duplexify/index.js 5331 {0} [built]
   [87] ./~/graft/~/jschan/~/ws/lib/browser.js 831 {0} [built]
   [88] ./~/graft/~/jschan/~/msgpack5/lib/streams.js 2227 {0} [built]
   [89] (webpack)/~/node-libs-browser/~/assert/assert.js 11706 {0} [built]
   [90] ./~/graft/~/jschan/~/msgpack5/~/bl/bl.js 4949 {0} [built]
   [91] ./~/graft/~/jschan/~/websocket-stream/~/duplexify/~/end-of-stream/index.js 2024 {0} [built]
   [92] ./~/graft/~/jschan/~/websocket-stream/~/duplexify/~/end-of-stream/~/once/once.js 417 {0} [built]
   [93] ./~/graft/~/jschan/~/websocket-stream/~/duplexify/~/end-of-stream/~/once/~/wrappy/wrappy.js 905 {0} [built]
     + 1 hidden modules

ERROR in ./ui/index.js
Module not found: Error: Cannot resolve module 'famous/core/Engine' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/index.js 9:13-42

ERROR in ./ui/index.js
Module not found: Error: Cannot resolve module 'famous/core/Modifier' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/index.js 10:17-48

ERROR in ./ui/whiteboard.js
Module not found: Error: Cannot resolve module 'famous/surfaces/CanvasSurface' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/whiteboard.js 1:13-53

ERROR in ./ui/sync.js
Module not found: Error: Cannot resolve module 'famous/core/Engine' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/sync.js 1:13-42

ERROR in ./ui/sync.js
Module not found: Error: Cannot resolve module 'famous/inputs/GenericSync' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/sync.js 3:18-54

ERROR in ./ui/sync.js
Module not found: Error: Cannot resolve module 'famous/inputs/MouseSync' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/sync.js 4:18-52

ERROR in ./ui/sync.js
Module not found: Error: Cannot resolve module 'famous/inputs/TouchSync' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/sync.js 5:18-52

ERROR in ./ui/sync.js
Module not found: Error: Cannot resolve module 'famous/inputs/ScrollSync' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./ui/sync.js 6:18-53

ERROR in ./~/css-loader!./ui/main.css
Module not found: Error: Cannot resolve module 'famous/core/famous.css' in /Users/tauren/github/AetherBoard/AetherBoard/ui
 @ ./~/css-loader!./ui/main.css 2:1-113
webpack: bundle is now VALID.

get lossless png stream from canvas

see readme for details

famous input to coordinates stream

see readme for details

Coordinates to Catmul Rom Curve

This has been recommended as the best type of curve for this type of operation.

I know very little about this kind of thing myself, but I will collect whatever references I have here.

apply curve to canvas

see readme for details

Project status?

Is this project still maintained? I tried to install dependencies under node 0.12.16 and 4.5.0 and the install failed. node server.js hangs.

Installation instructions not working

When I follow the installation instructions npm install fails and I get the following in npm-debug.log:

158 verbose about to build /Users/tauren/AetherBoard/AetherBoard/node_modules/canvas
159 info build /Users/tauren/AetherBoard/AetherBoard/node_modules/canvas
160 verbose linkStuff [ false,
160 verbose linkStuff   false,
160 verbose linkStuff   false,
160 verbose linkStuff   '/Users/tauren/AetherBoard/AetherBoard/node_modules' ]
161 info linkStuff [email protected]
162 verbose linkBins [email protected]
163 verbose linkMans [email protected]
164 verbose rebuildBundles [email protected]
165 verbose rebuildBundles [ 'nan' ]
166 info install [email protected]
167 verbose unsafe-perm in lifecycle true
168 info [email protected] Failed to exec install script
169 info /Users/tauren/AetherBoard/AetherBoard/node_modules/canvas unbuild
170 info preuninstall [email protected]
171 info uninstall [email protected]
172 verbose true,/Users/tauren/AetherBoard/AetherBoard/node_modules,/Users/tauren/AetherBoard/AetherBoard/node_modules unbuild [email protected]
173 info postuninstall [email protected]
174 error [email protected] install: `node-gyp rebuild`
174 error Exit status 1
175 error Failed at the [email protected] install script.
175 error This is most likely a problem with the canvas package,
175 error not with npm itself.
175 error Tell the author that this fails on your system:
175 error     node-gyp rebuild
175 error You can get their info via:
175 error     npm owner ls canvas
175 error There is likely additional logging output above.
176 error System Darwin 14.0.0
177 error command "/Users/tauren/.nvm/v0.10.22/bin/node" "/Users/tauren/.nvm/v0.10.22/bin/npm" "install" "canvas"
178 error cwd /Users/tauren/AetherBoard/AetherBoard
179 error node -v v0.10.22
180 error npm -v 1.3.14
181 error code ELIFECYCLE
182 verbose exit [ 1, true ]

I think canvas isn't getting installed properly because it has other dependencies as indicated here:
https://github.com/Automattic/node-canvas/wiki/Installation---OSX

I attempted to install cairo with brew install cairo, but then had to install XQuartz. Next I got errors about libpng:

genesis:AetherBoard tauren$ brew install cairo
==> Installing dependencies for cairo: libpng, freetype, fontconfig, pixman, gettext, libffi, glib
==> Installing cairo dependency: libpng
==> Downloading https://downloads.sf.net/project/libpng/libpng16/1.6.12/libpng-1.6.12.tar.gz

curl: (22) The requested URL returned error: 404 Not Found
Error: Failed to download resource "libpng"
Download failed: https://downloads.sf.net/project/libpng/libpng16/1.6.12/libpng-1.6.12.tar.gz

I'm on OSX10.10.1 Yosemite. Any suggestions how to get things running?

put png stream onto canvas element

see readme for details

Interface that allows you to zoom into and pan around an image larger than your screen size

The interface that this project really screams out for, is something very much in line with google maps.

You need to have a large surface that you can zoom into, and pan around both vertically and horizontally. You also need to have a zoom out function that can show you the full extents of the document.

It will also need to have constraints for scrolling to the edge of the document, so it doesn't just scroll indefinitely.

Leaflet and other geo tools are not a great solution for this, in that it is most likely going to be a single image instead of tiles, and the entire geo coord + projection requirement will drastically increase the complexity of the rest of the project.

Famo.us is a great tool for this, because it completely overrides the browser's tendency to want to scroll vertically, and it should allow us to build this in a very re-usable manner.

Application State

The browser is a stateful environment, so we will need some kind of container for that state.

It will likely be a singleton object (think window.App) that knows what the current board you are watching is, how to load a new board, what your current viewport coordinates are, and which tool (pen or eraser) you currently have selected.

It should be an event emitter, and should possibly be in charge of the pushState of the url.

A likely requirement will be to save the current board and viewport to local storage, so that a reload will persist the display. Persisting your viewport for previous boards is a stretch goal.

Create 'scratch space' canvas under pointer/touch point, to draw on

This is an extra layer the size of the screen that the user's drawing will immediately show up on, and then it will disappear once the same points are sent back down the pipe from the server.

the layer will be slightly translucent, as to give the user subtle feedback about whether their changes have been committed, and if they are currently experiencing lag.

simplify the interface code

since famo.us isn't going to be going forward, and it wasn't really doing much for the app, we should take it out and make it the simplest cleanest example for graft we can.

bezier spline curve code has an incompatible license

@pelger the library code is gpl, which really limits the practical re-use/extension of this project.

we need to replace it at first opportunity, and not 'distribute' the code with it.
thankfully, as a service it should be possible to swap out easily.

Graft/JSchan blocker: we receive our own channel back in echo.

@mcollina

I've been having trouble for the last few weeks with this issue. The design of the app is such that you send a stream of strokes, which each have a stream of line segments, to the server.

The server will then merge them all into a merged stream of everybody's strokes, and sends them back to you over the sync channel. This is how you know your changes have been committed.

Unfortunately this bug gives you back a writeable channel, that it is not possible to pipe from. You are even able to pipe from the original writechannel you create, but not the one you receive back on the line.

In this following image, I have 3 pages showing the same board. in the first one I wrote '1', in the second '2', and the third '3'.

To get this debug output, run DEBUG="ab:*" node server.js and go into your browser's console and type in debug.enable("ab:*").

The moment you receive an invalid channel back, some kind of silent error happens, and it unpipes your streams completely, so that nothing can be written on your screen anymore.

Were it not for this, i might have tried to work around it by also piping my own input onto the canvas.

coordinates to curve

this is the simplest possible curve for now.

just to get something on the canvas

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.