[Pharo-dev] SVG described countries in Roassal

Alexandre Bergel alexandre.bergel at me.com
Sat Nov 16 18:02:06 EST 2013


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 at 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 at tudorgirba.com> wrote:
>> 
>> This is really great!
>> 
>> Doru
>> 
>> 
>> On Sat, Nov 16, 2013 at 9:47 PM, Alexandre Bergel <alexandre.bergel at 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 at 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"
> 




More information about the Pharo-dev mailing list