[Pharo-dev] SVG described countries in Roassal

Stéphane Ducasse stephane.ducasse at inria.fr
Sun Nov 17 06:48:09 EST 2013


Alex 
you should not mix layer.
SVG is a format for saving data. I do not understand why 
	- you need to wrapp then to a RO specific objects
	- why the use need to see and get expose with the underlying svg specific things.

you should have an importer
	SVG and other format to 
	Path objects probably athensPath 
	
Why do you need RO* specific object?

On Nov 17, 2013, at 12:02 AM, Alexandre Bergel <alexandre.bergel at me.com> wrote:

> 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