Demo how to use the Snapsvg libary in Amber Smalltalk 0.14.1
To bring project alive (for example after git clone):
npm install
bower install
grunt develDeveloping the project (after brought alive):
Start server with amber serve and go to http://localhost:4000/ in your browser and follow the instructions
hanneshirzel@hanneshirzel-Latitude-E6410 ~/Amber-snapsvg-demo $ amber init
Welcome to Amber version 0.14.0 (NodeJS 0.10.25).
Running "init:/usr/local/lib/node_modules/amber-cli/node_modules/grunt-init-amber" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
"grunt-init-amber" template notes:
Project title should be a human-readable title.
Please answer the following:
[?] Project title (Application or Library Title) Amber Smalltalk Snap.svg Demo
[?] Main class and package of Amber application.
Project name is derived by lowercasing this. (AmberSmalltalkSnapSvgDemo) AmberSnapsvg
[?] Description (The Application or The Library doing The Thing.) Demo how to use the Snapsvg libary in Amber Smalltalk
[?] Author name (hhzl)
[?] Author email ([email protected])
[?] Namespace of the new Amber package. (amber-ambersnapsvg) amber-snapsvg
[?] Version (0.1.0)
[?] Project git repository (git://github.com/hanneshirzel/Amber-snapsvg-demo.git)
[?] Project homepage (https://github.com/hanneshirzel/Amber-snapsvg-demo)
[?] Project issues tracker (https://github.com/hanneshirzel/Amber-snapsvg-demo/issues)
[?] Author url (none)
[?] Licenses (MIT)
[?] Do you need to make any changes to the above before continuing? (y/N)
bower install snap.svg --save
Creation of snap.svg.amd.json
{
"paths": {
"snap.svg" : "dist/snap.svg"
}
}
Generate new config.js with
grunt devel
Start amber-cli
amber serve
Add a #snapsvg-button to the index.html page
In Helios change import command to contain
imports: {'snapSvg' -> 'snap.svg'}
This defines a package variable snapSvg.
Save and commit. Reload.
Change method #augmentPage to
augmentPage
'#amber-with' asJQuery click: [ self doAmberWith ].
'#jquery-append' asJQuery click: [ self doJQueryAppend ].
'#snapsvg-button' asJQuery click: [self doSnapSvg]
Create a method #doSnapSvg
doSnapSvg
"translation to Smalltalk points 1 to 4 of
http://snapsvg.io/start/ "
| s bigCircle smallCircle |
s := snapSvg value: 300 value: 600.
bigCircle := s circle: 150 value: 150 value: 100.
bigCircle attr: #{'fill' -> '#bada55'. 'stroke' -> '#000'. 'strokeWidth' -> 5}.
smallCircle := s circle: 100 value: 150 value: 70.
You may add
Transcript show: s outerSVG.
to the #doSnapSvg method to get the generated SVG code.
To create a deployment file run
grunt deploy
This creates a the.js which includes everything needed for deployment.
Copy index.html and the.js to your deployment folder.
To switch back to development mode run
grunt devel
- http://amber-lang.net/
- Illustration about the different pieces involved.
