graftjs / aetherboard Goto Github PK
View Code? Open in Web Editor NEWCollaborative Whiteboard as a microservice
License: MIT License
Collaborative Whiteboard as a microservice
License: MIT License
implement a webpack based build system based on famous-webpack-seed
At first we just need a page with a static surface.
see readme for details
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.
see readme for details
see readme for details
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.
see readme for details
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.
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?
see readme for details
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.
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.
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.
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.
@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.
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.
this is the simplest possible curve for now.
just to get something on the canvas
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.