SVG path gives us a list of segment coordinates. We process each coordinate using the camera, which gives translation and zoom. The interaction maybe not that obvious from the example. Having the mouse over a name highlights the country. Cheers, Alexandre
Le 16-11-2013 à 19:28, Camillo Bruni <camillobruni@gmail.com> a écrit :
Nice!
Though I am a bit confused, what has displaying vector graphics with SVG to do? I don't fully get the interaction from your example :)
On 2013-11-16, at 22:39, Tudor Girba <tudor@tudorgirba.com> wrote:
This is really great!
Doru
On Sat, Nov 16, 2013 at 9:47 PM, Alexandre Bergel <alexandre.bergel@me.com> wrote: Another example on which you can zoom in and out.
<Screen Shot 2013-11-16 at 5.47.07 PM.png>
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= | view element nameComponent label stack | view := ROView new. view @ RODraggable.
ROSVGPath southAmerica do: [ :k |
element := (ROSVGPath path: (ROSVGPath perform: k)) elementOn: k. view add: element. ].
nameComponent := ROElement new. ROSVGPath southAmerica do: [ :k |
label := ROLabel elementOn: k asString. label @ ROLightlyHighlightable. label on: ROMouseEnter do: [ :event | ROBlink highlight: (view elementFromModel: event model asSymbol) ]. label on: ROMouseLeave do: [ :event | ROBlink unhighlight: (view elementFromModel: event model asSymbol) ]. nameComponent add: label. ]. ROGridLayout new gapSize: -3; lineItemsCount: 15; on: nameComponent elements.
stack := ROViewStack new. stack zoomInButton; zoomOutButton. stack addView: view.
stack add: nameComponent. nameComponent translateTo: 0 @ 20.
stack openInWindowSized: 1000 @ 700 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
On Nov 16, 2013, at 5:44 PM, Alexandre Bergel <alexandre.bergel@me.com> wrote:
Hi!
I had fun understanding how countries may be described using SVG. Here is a first shoot:
<Screen Shot 2013-11-16 at 5.36.21 PM.png>
Moving the mouse above a country name highlight the country. You can now rehearse your geography.
The complete source code of this example is:
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= | view element nameComponent label | view := ROView new.
ROSVGPath countries do: [ :k | element := (ROSVGPath path: (ROSVGPath perform: k)) elementOn: k. view add: element. ].
nameComponent := ROElement new. ROSVGPath countries do: [ :k | label := ROLabel elementOn: k asString. label @ ROLightlyHighlightable. label on: ROMouseEnter do: [ :event | ROBlink highlight: (view elementFromModel: event model asSymbol) ]. label on: ROMouseLeave do: [ :event | ROBlink unhighlight: (view elementFromModel: event model asSymbol) ]. nameComponent add: label. ]. ROGridLayout new gapSize: -3; lineItemsCount: 15; on: nameComponent elements.
view add: nameComponent. nameComponent translateTo: 0 @ 400.
view openInWindowSized: 1000 @ 700 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Cheers, Alexandre -- _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;: Alexandre Bergel http://www.bergel.eu ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
-- _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;: Alexandre Bergel http://www.bergel.eu ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.
-- www.tudorgirba.com
"Every thing has its own flow"