Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFE: from Flamingo to tool to directly support "SVG to code" in Codename One #2797

Open
jsfan3 opened this issue May 12, 2019 · 7 comments

Comments

Projects
None yet
4 participants
@jsfan3
Copy link
Contributor

commented May 12, 2019

On December 2017 I discovered your Flaming SVG Transcoder fork for Codename One https://github.com/codenameone/flamingo-svg-transcoder, I was enthusiast to the possibility to use vectorial images, I submitted two PRs and, after that... I stopped to use it because it simply doesn't work in the most of cases (producing not compilable code).

After all this time, I'm again interested in Flaming SVG Transcoder.
Recently you suggested me to use it for arrows, I refer to this: https://stackoverflow.com/questions/55525901/draw-curves-to-make-arrows-in-the-codename-one-glasspane

Indeed I tried to handcode arrows using a GeneralPath, it's nearly impossible. I tried to use raster arrows... they are satisfying in a demo, but for the actual app the quality is low (they have different sizes and are scaled at runtime, the quality of that scaling is not very good). Probably vector images is the best choice, in this case.

However, generalizing this problem, I suppose that an official support to "SVG to code" (like Android, that has several tools to convert SVG images to Android vector drawable) can open a lot of use cases, especially when the size of a multi-color icon or drawn image (not renderable with ttf) is not known.

Can you create a such tool, for example integrated in the Codename One plugin or in a web page, that produces code really usable with Codename One?

I know that this RFE seems generic: I'm asking for a true svg support. For example, the svgs available on https://pixabay.com/ are not usable (in my tests), because the Java files produced by your fork of Flamingo cannot be compiled in Codename One.

As test cases, I attach a zip with five (random) images taken from https://pixabay.com/ and their java files produces by Flamingo for Codename One.
svg.zip

Thank you for your support. You wrote that "the code is relatively simple and easy to enhance if you need support for additional features". I hope it's so ;-)

@codenameone codenameone added this to the Version 7.0 milestone May 13, 2019

@codenameone

This comment has been minimized.

Copy link
Owner

commented May 13, 2019

I've assigned this to 7.0 but due to the nature of this task it might need to move to 8.0.

@shannah

This comment has been minimized.

Copy link
Collaborator

commented May 13, 2019

I think it only requires some minor changes. I made a few tweaks by hand to the first test case, and got it working.

image

Just need to make changes within the code generator to match my hand changes.

shannah added a commit that referenced this issue May 23, 2019

Graphics improvements to help support more complex SVG rendering (#2797
…).

Added Paint interface, with concrete subclass LinearGradientPaint that can be used to fill a shape with a gradient via Graphics.setColor(Paint), then Graphics.fillShape(shape).  This is a common pattern in the Flamingo SVG converter's generated code.
Added LinearGradientSample that can be run in the SampleRunner.
Added AffineTransform class to make porting code from Java2D easier.
Fixed some clamping behaviour in the simulator when performing matrix multiplications.
There are a number of changes to the Flamingo SVG converter still forthcoming, which will rely on these changes.

shannah added a commit that referenced this issue May 24, 2019

More graphics improvements to assist in supporting more complex SVG r…
…endering (#2797).

Added test for AffineTransform class.
Added test for Shape clipping.
@jsfan3

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2019

I read your article about the Flamingo improvements:
https://www.codenameone.com/blog/flamingo-svg-transcoder-revisited.html

Thank you

Maybe there is something that I'm missing, because flamingo doesn't produce for me any output or error.

I tried to convert to Java the image Football.svg (that you can download from this zip), using this command:
java -jar flamingo.jar ./ net.informaticalibera.tests

There is not Football.java anywhere.

Of course I changed the current directory to the one in which I placed the jar and the svg. I used the jar you linked in the blog post:
https://github.com/codenameone/flamingo-svg-transcoder/blob/master/flamingo-svg-transcoder-core-1.2-jar-with-dependencies.jar

I'm using Java "1.8.0_212" on Linux.

@jsfan3

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2019

Please ignore my last comment... maybe the summer heat hurts me. The image was png, not svg...

@jsfan3

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2019

I've just tried an actual SVG:
Test.svg.zip

It works, even if with small differences from the original image, but ... it's a significant improvement compared to before. Thank you.

Have you noted that the Java classes produced by Flamingo cannot be scaled? At the moment they can be only inserted in the center of a BorderLayout.

A code like the following throws an exception:

Form hi = new Form("Hi World", BoxLayout.y());
        Image test = new Test();
        test.scaled(CN.convertToPixels(50), -1);
        hi.add(new Label(test));
        hi.show();

Test is the class produced by Flaming from the attached svg.

@saeder

This comment has been minimized.

Copy link

commented Jun 14, 2019

I haven't checked recent versions - but in June 2017 this used to work:

public FormSvgShape() {
	setTitle("FormSvgShape");
	setScrollable(false);
	Container contentPane = getContentPane();
	Style styleContentPane = contentPane.getAllStyles();
	styleContentPane.setBgPainter((aGraphics, aRectangle) -> {
		boolean antiAliased = aGraphics.isAntiAliased();
		if (aGraphics.isAntiAliasingSupported()) {
			aGraphics.setAntiAliased(true);
		}
		int width = contentPane.getWidth();
		int gap = width / 10; 
		int desiredWidth = width - (gap * 2);
		float scale = 1.0f * desiredWidth / Em2.getOrigWidth();
		Transform transform = Transform.makeTranslation(contentPane.getAbsoluteX() + gap, contentPane.getAbsoluteY() + gap);
		transform.scale(scale, scale);
		aGraphics.setTransform(transform);
		Em2.paint(aGraphics);
		aGraphics.setAntiAliased(antiAliased);
		aGraphics.resetAffine();
	});
}
@jsfan3

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2019

@saeder Is the method you copied the constructor of a class FormSvgShape that extends Form? Is Em2 a class produced by Flamingo?

DurankGts added a commit to DurankGts/CodenameOne that referenced this issue Jun 14, 2019

Revert "More graphics improvements to assist in supporting more compl…
…ex SVG rendering (codenameone#2797). Added test for AffineTransform class. Added test for Shape clipping."

This reverts commit efff023.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.