Eschersketch

This is a program built to experiment with pattern design in the classical wallpaper groups and rosette point groups. It allows the user to draw and layout repeating patterns in real-time.

This version has been completely overhauled from an earlier simplistic prototype. It works reasonably well with mobile and desktop browsers. Undo/Redo and a basic set of vector graphic primitives are now supported.

It features PNG and SVG export. It also exports high-res PNG "tiles" that are suitable for use with tools like Photoshop pattern fill, graphics textures, or upload to services such as Spoonflower and Contrado to be used in printed patterns.

Local Install / Build Setup

Built with ES6, webpack, babel, Vue 2.0. Project Structure derives from the vuejs es6 webpack template. (repo, docs) Running locally requires npm and should be as easy as running the following:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Code Comments

Currently Vue handles all DOM-related UI elements, it does not however handle the canvas drawing and state management, as that's not really what it's built to do. I may consider making canvas management a bit more Vue-ish to exploit its reactivity tools, but will likely separately organize, simplify and generalize drawing state management.

Almost all actions are routed through a simple global state store and event bus, it has not yet been ported into Vuex but this would not be difficult.

External Libs/Tools

The color panel code is derived from Vue-Color. It's been tweaked to fix a touch-event handling bug and to modify style defaults.
Canvas touch-handling is handled by Hammer.js
Uses eligrey's FileSaver.js and canvas-toBlob.js polyfills to support saving files.
Uses a modified canvas2svg to export to SVG.
Also using vue-markdown-loader for handling inline written content.
icomoon was used to help with icon generation.

Project builds but interface doesn't work

Hi,
I built the project according to the documentation:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

npm install complained that fsevent was not compatible with my architecture, which makes sense since I'm running Ubuntu. It also said it was an optional dependency so I didn't worry too much.

npm run dev launches a web page with the editor, but the interface does not work: I can't draw, I can't change for a different drawing tool, etc. The output of the command is the following:

> node build/dev-server.js

Executing pre-build scripts
> Starting dev server...
 WARNING  Compiled with 42 warnings9:52:08 PM

 warning  in ./src/main.js

300:2-3 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

300:17-18 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

301:2-3 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

301:24-25 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

315:26-27 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

321:2-3 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

426:12-13 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

566:9-10 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

877:2-3 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

884:17-18 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

891:2-3 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

904:17-18 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

963:22-23 "export '_' was not found in 'underscore'

 warning  in ./src/main.js

964:4-5 "export '_' was not found in 'underscore'

 warning  in ./src/utils.js

17:14-15 "export '_' was not found in 'underscore'

 warning  in ./src/utils.js

18:2-3 "export '_' was not found in 'underscore'

 warning  in ./src/utils.js

19:8-9 "export '_' was not found in 'underscore'

 warning  in ./src/symmetryGenerator.js

352:9-10 "export '_' was not found in 'underscore'

 warning  in ./src/symmetryGenerator.js

353:11-12 "export '_' was not found in 'underscore'

 warning  in ./src/symmetryGenerator.js

582:4-5 "export '_' was not found in 'underscore'

 warning  in ./src/symmetryGenerator.js

593:4-5 "export '_' was not found in 'underscore'

 warning  in ./src/symmetryGenerator.js

611:4-5 "export '_' was not found in 'underscore'

 warning  in ./src/gridTool.js

46:6-7 "export '_' was not found in 'underscore'

 warning  in ./src/lineTool.js

37:6-7 "export '_' was not found in 'underscore'

 warning  in ./src/lineTool.js

155:21-22 "export '_' was not found in 'underscore'

 warning  in ./src/lineTool.js

156:22-23 "export '_' was not found in 'underscore'

 warning  in ./src/pencilTool.js

42:6-7 "export '_' was not found in 'underscore'

 warning  in ./src/pencilTool.js

349:21-22 "export '_' was not found in 'underscore'

 warning  in ./src/pencilTool.js

350:22-23 "export '_' was not found in 'underscore'

 warning  in ./src/polygonTool.js

70:6-7 "export '_' was not found in 'underscore'

 warning  in ./src/polygonTool.js

351:21-22 "export '_' was not found in 'underscore'

 warning  in ./src/polygonTool.js

352:22-23 "export '_' was not found in 'underscore'

 warning  in ./src/circleTool.js

41:6-7 "export '_' was not found in 'underscore'

 warning  in ./src/circleTool.js

320:21-22 "export '_' was not found in 'underscore'

 warning  in ./src/circleTool.js

321:22-23 "export '_' was not found in 'underscore'

 warning  in ./src/polyTool.js

38:6-7 "export '_' was not found in 'underscore'

 warning  in ./src/polyTool.js

327:21-22 "export '_' was not found in 'underscore'

 warning  in ./src/polyTool.js

328:22-23 "export '_' was not found in 'underscore'

 warning  in ./src/pathTool.js

36:6-7 "export '_' was not found in 'underscore'

 warning  in ./src/pathTool.js

320:21-22 "export '_' was not found in 'underscore'

 warning  in ./src/pathTool.js

321:22-23 "export '_' was not found in 'underscore'

 warning  in ./src/components/symmetryUI.vue

109:21-22 "export '_' was not found in 'underscore'

> Listening at http://localhost:8080

Any help?

levskaya / eschersketch Goto Github PK

eschersketch's Introduction

Eschersketch

Local Install / Build Setup

Code Comments

External Libs/Tools

eschersketch's People

Contributors

Stargazers

Watchers

Forkers

eschersketch's Issues

Recommend Projects

Recommend Topics

Recommend Org