https://github.com/hhzl/amber-snapsvg-demo

Demo of Amber Smalltalk using the snap.svg graphical library
https://github.com/hhzl/amber-snapsvg-demo

Last synced: about 2 months ago
JSON representation

Demo of Amber Smalltalk using the snap.svg graphical library

• Host: GitHub
• URL: https://github.com/hhzl/amber-snapsvg-demo
• Owner: hhzl
• License: mit
• Created: 2015-01-13T15:03:20.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-02-02T16:59:57.000Z (almost 10 years ago)
• Last Synced: 2023-03-23T00:27:16.152Z (almost 2 years ago)
• Language: JavaScript
• Size: 195 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Amber Smalltalk Snap.svg Demo

Demo how to use the [Snapsvg libary](https://github.com/adobe-webplatform/Snap.svg) in Amber Smalltalk 0.14.1

## Getting Started

To bring project alive (for example after `git clone`):

```sh

npm install

bower install

grunt devel

```

Developing the project (after brought alive):

 

Start server with `amber serve` and go to `http://localhost:4000/` in your browser and follow the instructions

## How was this constructed

### amber init

    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) 

### Installation of snap.svg

    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 Smalltalk code

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.

### Create deployment file

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

### References

#### Amber

- http://amber-lang.net/

- [Illustration](https://github.com/amber-smalltalk/amber/wiki/Building-blocks-of-Amber-application-%28and-library%29) about the different pieces involved.

#### snap.svg

- http://snapsvg.io/start/

- http://svg.dabbles.info/

- http://stackoverflow.com/questions/tagged/snap.svg