Pivot/SVG Salamander

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Pivot/SVG Salamander

Greg Brown
Administrator
Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.

The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.

The sample application loads the image declaratively in BXML:

<ImageView styles="{verticalAlignment:'top'}">
    <image>
        <bxml:include src="logo.svg"/>
    </image>
</ImageView>

The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:

static {
    BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
    BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
}

That's it!

There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).

Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.

Greg





pivot_svgsalamander.zip (2M) Download Attachment
pivot_svgsalamander.png (30K) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Greg Brown
Administrator
Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.

On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:

> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>
> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>
> The sample application loads the image declaratively in BXML:
>
> <ImageView styles="{verticalAlignment:'top'}">
>    <image>
>        <bxml:include src="logo.svg"/>
>    </image>
> </ImageView>
>
> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>
> static {
>    BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
>    BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
> }
>
> That's it!
>
> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>
> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>
> Greg
>
> <pivot_svgsalamander.zip>
>
> <pivot_svgsalamander.png>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Greg Brown
Administrator
Sorry, I forgot to include an easy way to launch the demo if you aren't using Eclipse with the Pivot plugin. Add this to the SVGImageDemo class to launch it as a standard Java app:

public static void main(String[] args) {
    DesktopApplicationContext.main(SVGImageDemo.class, args);
}

On Sep 30, 2010, at 1:28 PM, Greg Brown wrote:

> Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.
>
> On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:
>
>> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>>
>> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>>
>> The sample application loads the image declaratively in BXML:
>>
>> <ImageView styles="{verticalAlignment:'top'}">
>>   <image>
>>       <bxml:include src="logo.svg"/>
>>   </image>
>> </ImageView>
>>
>> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>>
>> static {
>>   BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
>>   BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
>> }
>>
>> That's it!
>>
>> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>>
>> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>>
>> Greg
>>
>> <pivot_svgsalamander.zip>
>>
>> <pivot_svgsalamander.png>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Superstring
Fantastic! Works like a charm here on OS X using NetBeans 6.9.1.

So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?

This rocks!

Thom


On 2010-09-30, at 12:35 PM, Greg Brown wrote:

> Sorry, I forgot to include an easy way to launch the demo if you aren't using Eclipse with the Pivot plugin. Add this to the SVGImageDemo class to launch it as a standard Java app:
>
> public static void main(String[] args) {
>    DesktopApplicationContext.main(SVGImageDemo.class, args);
> }
>
> On Sep 30, 2010, at 1:28 PM, Greg Brown wrote:
>
>> Did the attachments come through OK? I got an error message from the mail server that the attachments were too large, but it didn't actually seem to reject the message.
>>
>> On Sep 30, 2010, at 1:23 PM, Greg Brown wrote:
>>
>>> Earlier today, I took a stab at wrapping SVG Salamander in a Pivot Image. It was trivial to implement, and the results are staggering (IMO). See attached.
>>>
>>> The key classes are SVGImage, which wraps an instance of com.kitfox.svg.SVGDiagram, and SVGImageSerializer, which knows how to read an SVGImage from an InputStream.
>>>
>>> The sample application loads the image declaratively in BXML:
>>>
>>> <ImageView styles="{verticalAlignment:'top'}">
>>>  <image>
>>>      <bxml:include src="logo.svg"/>
>>>  </image>
>>> </ImageView>
>>>
>>> The only thing the application needs to do to enable this is add a MIME type and file extension mapping to BXMLSerializer:
>>>
>>> static {
>>>  BXMLSerializer.getMimeTypes().put(SVGImageSerializer.MIME_TYPE, SVGImageSerializer.class);
>>>  BXMLSerializer.getFileExtensions().put(SVGImageSerializer.SVG_EXTENSION, SVGImageSerializer.MIME_TYPE);
>>> }
>>>
>>> That's it!
>>>
>>> There are obviously huge advantages to having SVG support in a Pivot application, one of which is resolution independence: SVG images will scale with the UI, whereas bitmapped images won't (try scaling the sample UI using Control-Shift +/- for an example).
>>>
>>> Mark, great work on SVG Salamander. Would you consider including the SVGImage and SVGSerializer classes in your project? That would make it much easier for Pivot users to take advantage of.
>>>
>>> Greg
>>>
>>> <pivot_svgsalamander.zip>
>>>
>>> <pivot_svgsalamander.png>
>>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Greg Brown
Administrator
> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?

It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Superstring
Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?

Beauty,

Thom


On 2010-09-30, at 1:19 PM, Greg Brown wrote:

>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>
> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Greg Brown
Administrator
You can't do this with an Image directly, but you can do it with an ImageView component that displays the Image (Image isn't a component).

On Sep 30, 2010, at 2:40 PM, Superstring Media wrote:

> Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
>
> Beauty,
>
> Thom
>
>
> On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>
>>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>>
>> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>>
>>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Greg Brown
Administrator
Here's an updated version of the demo. It fixes a bug in SVGImageSerializer and adds an example of using an SVG image on a Pivot PushButton. Be sure to update the JARs as well as the source since it relies on some additions to the ButtonDataRenderer class.




On Sep 30, 2010, at 2:45 PM, Greg Brown wrote:

> You can't do this with an Image directly, but you can do it with an ImageView component that displays the Image (Image isn't a component).
>
> On Sep 30, 2010, at 2:40 PM, Superstring Media wrote:
>
>> Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
>>
>> Beauty,
>>
>> Thom
>>
>>
>> On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>>
>>>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>>>
>>> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>>>
>>>
>>
>


pivot_svgsalamander.zip (2M) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Superstring
Thanks to SVGSalamander Pivot now has a Production Suite facility (similar to, but without Illustrator plugins needed, like the olde JavaFX had). Now we have an open ended way to use any artwork produced by leading graphic apps like Inkscape or Illustrator.

I can see for miles :-)

Thom


On 2010-09-30, at 1:58 PM, Greg Brown wrote:

> Here's an updated version of the demo. It fixes a bug in SVGImageSerializer and adds an example of using an SVG image on a Pivot PushButton. Be sure to update the JARs as well as the source since it relies on some additions to the ButtonDataRenderer class.
>
> <pivot_svgsalamander.zip>
>
> On Sep 30, 2010, at 2:45 PM, Greg Brown wrote:
>
>> You can't do this with an Image directly, but you can do it with an ImageView component that displays the Image (Image isn't a component).
>>
>> On Sep 30, 2010, at 2:40 PM, Superstring Media wrote:
>>
>>> Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
>>>
>>> Beauty,
>>>
>>> Thom
>>>
>>>
>>> On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>>>
>>>>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>>>>
>>>> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>>>>
>>>>
>>>
>>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Greg Brown
Administrator
I have to agree that the concept is quite compelling.  :-)

On Sep 30, 2010, at 3:18 PM, Superstring Media wrote:

> Thanks to SVGSalamander Pivot now has a Production Suite facility (similar to, but without Illustrator plugins needed, like the olde JavaFX had). Now we have an open ended way to use any artwork produced by leading graphic apps like Inkscape or Illustrator.
>
> I can see for miles :-)
>
> Thom
>
>
> On 2010-09-30, at 1:58 PM, Greg Brown wrote:
>
>> Here's an updated version of the demo. It fixes a bug in SVGImageSerializer and adds an example of using an SVG image on a Pivot PushButton. Be sure to update the JARs as well as the source since it relies on some additions to the ButtonDataRenderer class.
>>
>> <pivot_svgsalamander.zip>
>>
>> On Sep 30, 2010, at 2:45 PM, Greg Brown wrote:
>>
>>> You can't do this with an Image directly, but you can do it with an ImageView component that displays the Image (Image isn't a component).
>>>
>>> On Sep 30, 2010, at 2:40 PM, Superstring Media wrote:
>>>
>>>> Also, now that a SVGDiagram is a Pivot Image it can also use Decorators and other Image style properties via the Image skin, right?
>>>>
>>>> Beauty,
>>>>
>>>> Thom
>>>>
>>>>
>>>> On 2010-09-30, at 1:19 PM, Greg Brown wrote:
>>>>
>>>>>> So, the SVGDiagram wrapped by the SVGImage can still have its elements changed (similar to the DOM interaction Pivot also has), right?
>>>>>
>>>>> It can, though we'll need to figure out some way to trigger a repaint if you do that. You could do it in app code, but it would be nicer if it happened automatically. Mark, any suggestions? Does SVGDiagram fire any sort of "region invalidated" events that we could hook into?
>>>>>
>>>>>
>>>>
>>>
>>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

Greg Brown
Administrator
In reply to this post by Greg Brown
> I would consider adding SVGImage to SVGSalamander.  Since it would depend
> on the pivot binaries, I'd want to put it into a separate jar.

You could do that, though it shouldn't be a problem to include everything in the same JAR. The Pivot dependency wouldn't be an issue unless someone tried to use SVGImage or SVGImageSerializer, which they presumably would only be doing if they were actually building a Pivot app (and hence already had the Pivot JARs on the classpath).

> SVGImage looks quite similar to SVGIcon, which is Salamander's custom
> extension of Icon for decorating Swing buttons.  Does Pivot handle AWT
> Icons?  If so, this might be an even easier way to render SVGSalamander
> content in Pivot without having to extend either library.

We could potentially write a Pivot Image wrapper for the Swing Icon class. However, there are a couple of issues with that approach:

1) Pivot doesn't currently have any dependency on Swing, and we would prefer to keep it that way if possible.

2) The serialization support provided by SVGImageSerializer just as important as SVGImage itself. The serializer is what allows us to embed an SVG image in a BXML file. We could theoretically write an SVGIconSerializer class, but then we're right back where we started - needing to add at least one additional class to your project.

Thanks for your help,
Greg



Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Pivot/SVG Salamander

JLEIngenieros
Hi.

At first, I know that the post is quite old, and apologize for my english.

At second, pardon my boldness to enter into a post without invitation, but i've a question:

In the posted code, I think that 'image logo.src' is directly inserted on ImageView, so it's only an normal 'image', not a SVGImage.

    <ImageView styles="{verticalAlignment:'top'}">
        <image>
            <bxml:include src="logo.svg"/>
        </image>
    </ImageView>

It's possible (and correct)  to rewrite the'bxml' and 'SVGImageDemo.java' files with anything as this?:

1. In bxml file, delete the <bxml:include src="logo.svg"/> and add a bxml:id, as this:

    <ImageView bxml:id="myPicture" styles="{verticalAlignment:'top'}">
        <image>
            <bxml:include src="logo.svg"/>
        </image>
    </ImageView>

2. Rewrite as this (for example):
 
    //An ImageView to serialize with bxml
    ImageView myImage;        
   
    //Uri for working with svg path, string or anything else    
    URI uri = null;
   
    //Reading the svg path...
    StringReader reader = new StringReader(---any svg string, file or similar---);
   
    //Setting the URI
    uri = SVGCache.getSVGUniverse().loadSVG(reader, "titleOf...");
   
    //Getting the SVGdiagram
    SVGDiagram myDiagram = SVGCache.getSVGUniverse().getDiagram(uri);
       
    //Getting SVGImage from SVGdiagram
    SVGImage myGetImage =new SVGImage(myDiagram);
       
    //Serializing from bxml
    myImage= (ImageView) bxmlSerializer.getNamespace().get("myPicture");
       
    //Setting the image for to work
    myImage.setImage(myGetImage);

I think that, after doing this, we can work programatically with myImage as SVG graphic.

Thank you for comments.
Javier
Loading...