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"
>