This question is answered. Helpful answers available: 1. Correct answers available: 1.


Permlink Replies: 42 - Pages: 3 [ Previous | 1 2 3 ] - Last Post: 23-Nov-2016 22:35 Last Post By: jGromit Threads: [ Previous | Next ]
jGromit

Posts: 7,654
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 12:18   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
Been down that road. It leads nowhere, AFAIK.

The bottom line seems to be that if you want to control any aspect of the SVG, you have to edit the SVG file itself in some way. I have not found a way of having a "generic" SVG file (not inline), and then controlling things like color via an external CSS file.
davidekholm

Posts: 3,390
Registered: 18-Oct-2002
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 14:39   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
jimberry wrote:
TomCee and I decided that Salamander couldn't do all the things I was looking for.

Like what? I know it doesn't support all SVG bells and whistles, but even the jAlbum frog head with its gradients work.

What I would like to be able to do is to display the SVG background tiles in <image-view> in my ui.fxml, and also as repeating background images in a pane that demonstrates what the users selections of h1 and h2 font size, color and weight will look like against the selected background-color and background-image. If that is what you mean, I will certainly be interested in seeing how to take that route.

Here's an example of loading an icon (actually a Node) for a JavaFX UI using Java/BeanShell:
import net.javainthebox.caraibe.svg.SVGContent;
import net.javainthebox.caraibe.svg.SVGLoader;
SVGContent icon = SVGLoader.load(YourClassHere.class.getResource("icons/yourIconFile.svg"));
myJavaFXButton.setGraphic(icon);
RobM

Posts: 3,209
Registered: 4-Aug-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 18:34   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Been down that road. It leads nowhere, AFAIK.

The bottom line seems to be that if you want to control any aspect of the SVG, you have to edit the SVG file itself in some way. I have not found a way of having a "generic" SVG file (not inline), and then controlling things like color via an external CSS file.

Have a look at this page, the images are from the same Globe_icon.svg (at the same level as the index page.
index.html
<html>
<head>
<style>
body {
background-color:gray;
color:black;
}
.globeIcon {
	fill:red;
	stroke:green;
	width:150px;
}
</style>
</head>
<body>
<img src="Globe_icon.svg"/>
Full size
<br>
<img class="globeIcon" src="Globe_icon.svg" width="100"/>
Image set to 100px wide but image size set to 150px with css .globeIcon, but not the colours. <br>
<img src="Globe_icon.svg" width="50"/>
50px wide
<br>
<img src="Globe_icon.svg" width="25"/>
25px wide
<br>
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewbox="0 0 420 420">
<path stroke="#000" fill="none" stroke-width="20"
d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
</svg>
Same SVG icon but included in html and without CSS style
<br>
<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420" viewbox="0 0 420 420" class="globeIcon">
<path class="globeIcon" stroke="#000" fill="none" stroke-width="20"
d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
</svg>
Same SVG icon but included in html and with Inline CSS style, but note the spacing around the icon
</body>
</html>


Edited by: RobM on 21-Nov-2016 17:51
Updated to show the 100px as sized by css but colours not changed
jGromit

Posts: 7,654
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 19:05   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
Maybe I'm missing something, but that appears to confirm what I posted. The only way you can use CSS to affect the appearance of the SVG is to have the SVG inline on the page. Not truly awful, I suppose, but there's something inherently offensive about it. If you're using an <img> tag to load the SVG, you can't affect it with CSS (unless the CSS is actually within the SVG file, which defeats the purpose - you'd still have to regenerate the SVG file for each unique color case).

In any event, the simplest approach appears to be using the jAlbum engine to process the template and crank out whatever version(s) of the SVG one needs.

Not that I would ever do something this extreme, but it illustrates the technique: http://jgromit.jalbum.net/svg/

(Hmmm... I think I might want to preload the "hover" version of the SVG in the background upon page loading - from a slow server, there's a bit of a delay before it appears.)

Edit: BTW, to do the color-change upon hover, the SVG has to be used as a background image, which complicates the process even more. Using CSS to target a background image is, I believe, pretty much impossible, beyond the CSS attributes that a background can accept.

EditEdit: Hover image now preloads. Much better response.
RobM

Posts: 3,209
Registered: 4-Aug-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 20:22   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
Maybe I'm missing something, but that appears to confirm what I posted. The only way you can use CSS to affect the appearance of the SVG is to have the SVG inline on the page. Not truly awful, I suppose, but there's something inherently offensive about it. If you're using an <img> tag to load the SVG, you can't affect it with CSS (unless the CSS is actually within the SVG file, which defeats the purpose - you'd still have to regenerate the SVG file for each unique color case).
I was really reply about not being able to resize, rather than change the colour of the path when used in an img tag.

It all seems a bit like too much trouble really, but if you really really want to freak out, try http://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color
That has a link to JSFiddle, http://jsfiddle.net/wuSF7/462/
That does some JQuery 'stuff' to convert the img tag svg into an inline svg!?

I'll stick to PNGs :)
jGromit

Posts: 7,654
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 21-Nov-2016 20:34   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
RobM wrote:
I was really reply about not being able to resize, rather than change the colour of the path when used in an img tag.

Yeah, I realized that later. It's sort of like quantum mechanics, where you can determine either the position or the velocity of a particle, but not both.

I'll stick to PNGs :)

I understand the sentiment, but with PNG's, you couldn't do what my little example does. During Make album, you couldn't generate a pair of PNG's with the colors you need. And you've have to start with a PNG that was already the largest possible dimensions, so you'd never be trying to upsize it in the browser.

And wow, are the files small! A typical PNG of that wireframe globe would run around 30k. The SVG version is one one-hundredth the size, at only 331 bytes.
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 22-Nov-2016 00:07   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
I think you'd be surprised at some of the correspondence that's passed between David and Oracle (on which I've been cc'ed). They're actually quite responsive to user requests and bug reports (especially the latter, granted). The wheels don't grind quickly, but things aren't ignored.

Progress report
Now I am really am pleasantly surprised. Oracle have responded to my "feature request" and are actually treating it as a "bug report", giving it a "Bug ID" (but making no promises)

quote - -
We have finished evaluating your report and have assigned it a Bug ID: JDK-8170086. The issue is visible on bugs.java.com at the following url JDK-8170086.
We work to resolve the issues that are submitted to us according to their impact to the community as a whole, and make no promises as to the time or release in which a bug might be fixed.
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 22-Nov-2016 00:34   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit wrote:
And wow, are the files small! A typical PNG of that wireframe globe would run around 30k. The SVG version is one one-hundredth the size, at only 331 bytes.

Simple icons like these can be surprisingly small if you are able to create them with a text editor. For more complex SVGs it is easier to use a graphics app like Inkscape or Adobe Illustrator, but these (perhaps not surprisingly) produced files that are comparatively bloated, although still much smaller than an equivalent bitmap. As an experiment, I opened Globe_icon.svg in Inkscape and immediately saved it as Globe_icon_inkscape.svg without making any changes. The resulting image is 1.7kB (as opposed to the 312byte original).
I then exported it as PNG with a size of 12.5 kB. Presumably Adobe Illustrator would give similar results.
(There are other issues with the Inkscape produced files but I didn't pursue them ;) ).
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 22-Nov-2016 15:54   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
davidekholm wrote:
Here's an example of loading an icon (actually a Node) for a JavaFX UI using Java/BeanShell:
import net.javainthebox.caraibe.svg.SVGContent;
import net.javainthebox.caraibe.svg.SVGLoader;
SVGContent icon = SVGLoader.load(YourClassHere.class.getResource("icons/yourIconFile.svg"));
myJavaFXButton.setGraphic(icon);

Thanks! I'll see if I can get that to work, although I am already a bit confused :). I thought that ui.fxml was meant to be an alternative or replacement for beanshell. Can I include that beanshell snippet in my ui.fxml file with SceneBuilder or should I just use a text editor?
davidekholm

Posts: 3,390
Registered: 18-Oct-2002
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 22-Nov-2016 19:04   in response to: jimberry in response to: jimberry
Helpful
  Click to reply to this thread Reply
jimberry wrote:

Thanks! I'll see if I can get that to work, although I am already a bit confused :). I thought that ui.fxml was meant to be an alternative or replacement for beanshell.

It's replacing 99% of the layout part of a UI, but not the logic (disabling states depending on checked checkboxes and such). The logic still needs to be provided with code, either BeanShell, compiled Java or Javascript.

Can I include that beanshell snippet in my ui.fxml file with SceneBuilder or should I just use a text editor?

No, put it in an onload.bsh file.
jGromit

Posts: 7,654
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 23-Nov-2016 16:48   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
Many thanks again, jimberry, for your help with this. I've now built the SVG globe into Matrix and MatrixSlide - I still have to do some testing and doc prep before releasing them, but the ability to control that Google map link is a big plus. I'm giving the user complete control over size, border width, border radius, fill color, fill hover color, stroke color, stroke hover color, background color, and border color.

A quick temporary example, using only the fill hover: http://jgromit.com/newGlobe/

Messing with graphic elements is one of the (many) gaping holes in my skillset. I usually manage to bumble through things in paint.net, but I rarely know what the hell I'm doing. Now I've got another similar project that's probably going to stump me.... ;)
jimberry

Posts: 508
Registered: 30-Aug-2004
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 23-Nov-2016 22:21   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Looking good - I like it :)
jGromit

Posts: 7,654
Registered: 31-Jan-2006
Re: Using SVG images in BeanShell, HTML, or FXML skin
Posted: 23-Nov-2016 22:35   in response to: jimberry in response to: jimberry
 
  Click to reply to this thread Reply
Of course, it's easy to overdo it: http://jgromit.jalbum.net/svg/

I can give them the tools, but I can't give them the taste to use them well. ;)
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums