Aw: Re: Re: Use Resource to transfer SVG to PNG

[Per Newgro]

My main problem is, that i can not send the svg text to the resource. Doing so 
by request parameters is not an option because the firewall will deny that long 
cryptic content.
Therefor i would like to send the svg content through a form.

So far i have the following:

In my page-markup (containing the svg) i have


  
  



var getSvg = function(element) {
var svgHtml = document.querySelector('#chart-container 
.highcharts-container').innerHTML;
element.querySelector('input[name="data"]').value = svgHtml;
}



In my page i have

add(
  new WebMarkupContainer("svgForm")
  .add(AttributeModifier.replace("action", 
PngResourceReference.url().toString(;


I've registered a resource by reference

app.mountResource("/svg2png", new PngResourceReference());

---

public class PngResourceReference extends ResourceReference {

private static final Key KEY = new 
Key(PngResourceReference.class.getName(), "svg-to-png", null, null, null);

public PngResourceReference() {
super(KEY);
}

@Override
public IResource getResource() {
return new PngResource();
}

public static CharSequence url() {
PageParameters svgParameters = new PageParameters();
return 
RequestCycle.get().urlFor(Application.get().getResourceReferenceRegistry().getResourceReference(KEY,
 false, false), svgParameters);
}
}

public class PngResource extends ByteArrayResource {

public PngResource() {
super("image/png");
}

@Override
protected void configureResponse(ResourceResponse response, Attributes 
attributes) {
super.configureResponse(response, attributes);
response.setContentDisposition(ContentDisposition.ATTACHMENT);
response.setFileName("chart.png");
response.disableCaching();
}

@Override
protected byte[] getData(Attributes attributes) {
ByteArrayOutputStream os;
try {
PNGTranscoder t = new PNGTranscoder();

// Set the transcoder input and output.
String svg = "something";
TranscoderInput input = new TranscoderInput(new 
StringReader(svg));
os = new ByteArrayOutputStream();
TranscoderOutput output = new TranscoderOutput(os);

// Perform the transcoding.
t.transcode(input, output);
os.close();
} catch (TranscoderException | IOException e) {
throw new RuntimeException(e);
}
return os.toByteArray();
}
}

> Gesendet: Montag, 17. Juli 2017 um 15:30 Uhr
> Von: "Martin Grigorov" 
> An: "users@wicket.apache.org" 
> Betreff: Re: Re: Use Resource to transfer SVG to PNG
>
> On Mon, Jul 17, 2017 at 3:13 PM, Per Newgro  wrote:
> 
> > Thanks for your response Martin.
> >
> > I tried to make it work the whole day now. But i can not get it to work
> > with IE11.
> > There is always a security error. This is a known problem for IE and
> > canvas.
> >
> > I ended up:
> >
> > $("#chart-export").on("click", function() {
> > var svg = document.querySelector( "svg" );
> > var svgData = new XMLSerializer().serializeToString( svg );
> >
> > var canvas = document.createElement( "canvas" );
> > document.body.appendChild(canvas);
> > var svgSize = svg.getBoundingClientRect();
> > canvas.width = svgSize.width;
> > canvas.height = svgSize.height;
> >
> > var ctx = canvas.getContext( "2d" );
> > ctx.clearRect(0, 0, canvas.width, canvas.height);
> >
> > var img = document.createElement("img");
> > img.setAttribute("crossOrigin", "anonymous");
> > img.onload = function() {
> > ctx.drawImage( img, 0, 0 );
> > var a = document.createElement("a");
> > a.download = "chart.png";
> > a.href = canvas.toDataURL( "image/png" );
> > document.body.appendChild(a);
> > a.click();
> > };
> > img.setAttribute("src", "data:image/svg+xml;base64," + 
> > btoa(unescape(encodeURIComponent(svgData)))
> > );
> > });
> >
> > So i need to go on the other way. But there my problems still occur.
> >
> 
> What exactly are the problems ?
> It is not very clear from your first email.
> 
> 
> >
> > Regards
> > Per
> >
> > > Gesendet: Montag, 17. Juli 2017 um 10:42 Uhr
> > > Von: "Martin Grigorov" 
> > > An: "users@wicket.apache.org" 
> > > Betreff: Re: Use Resource to transfer SVG to PNG
> > >
> > > Hi,
> > >
> > > Wouldn't HTML Canvas API be better solution?
> > > See https://stackoverflow.com/a/27232525/497381
> > >
> > >
> > > Martin Grigorov
> > > Wicket Training and Consulting
> > > https://twitter.com/mtgrigorov
> > >
> > > On Mon, Jul 17, 2017 at 10:12 AM, Per Newgro  wrote:
> > >
>

Re: Message Scroll Banner in Wickets

[Martin Grigorov]

Hi,

What have you tried so far ?
See what HTML this PHP code produces and use some Wicket repeater to
implement it.


Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Mon, Jul 17, 2017 at 6:38 AM, ASHU_JAVA  wrote:

> Hello All,
>
> I'm a beginner in Wickets and want to know how to implement an auto
> scrolling banner in Wickets.
> I've to create a banner in my Website to display 3 rows from the database.
> The text of these 3 database rows should be displayed in a auto-scrolling
> banner, something like this:-
>
> http://www.javafile.com/tickers/scroll.php
> 
>
> The scrolling time should be configurable.
>
> Can anyone please guide me how to achieve this in Apache Wicket?
>
> Thanks in advance.
>
>
>
> --
> View this message in context: http://apache-wicket.1842946.
> n4.nabble.com/Message-Scroll-Banner-in-Wickets-tp4678245.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>

Re: Re: Use Resource to transfer SVG to PNG

[Martin Grigorov]

On Mon, Jul 17, 2017 at 3:13 PM, Per Newgro  wrote:

> Thanks for your response Martin.
>
> I tried to make it work the whole day now. But i can not get it to work
> with IE11.
> There is always a security error. This is a known problem for IE and
> canvas.
>
> I ended up:
>
> $("#chart-export").on("click", function() {
> var svg = document.querySelector( "svg" );
> var svgData = new XMLSerializer().serializeToString( svg );
>
> var canvas = document.createElement( "canvas" );
> document.body.appendChild(canvas);
> var svgSize = svg.getBoundingClientRect();
> canvas.width = svgSize.width;
> canvas.height = svgSize.height;
>
> var ctx = canvas.getContext( "2d" );
> ctx.clearRect(0, 0, canvas.width, canvas.height);
>
> var img = document.createElement("img");
> img.setAttribute("crossOrigin", "anonymous");
> img.onload = function() {
> ctx.drawImage( img, 0, 0 );
> var a = document.createElement("a");
> a.download = "chart.png";
> a.href = canvas.toDataURL( "image/png" );
> document.body.appendChild(a);
> a.click();
> };
> img.setAttribute("src", "data:image/svg+xml;base64," + 
> btoa(unescape(encodeURIComponent(svgData)))
> );
> });
>
> So i need to go on the other way. But there my problems still occur.
>

What exactly are the problems ?
It is not very clear from your first email.


>
> Regards
> Per
>
> > Gesendet: Montag, 17. Juli 2017 um 10:42 Uhr
> > Von: "Martin Grigorov" 
> > An: "users@wicket.apache.org" 
> > Betreff: Re: Use Resource to transfer SVG to PNG
> >
> > Hi,
> >
> > Wouldn't HTML Canvas API be better solution?
> > See https://stackoverflow.com/a/27232525/497381
> >
> >
> > Martin Grigorov
> > Wicket Training and Consulting
> > https://twitter.com/mtgrigorov
> >
> > On Mon, Jul 17, 2017 at 10:12 AM, Per Newgro  wrote:
> >
> > > Hello *,
> > >
> > > I would like to generate a png from a svg. The transcoding is done by
> > > using Batik.
> > > So far it works as expected.
> > >
> > > But i'm not sure how to provide the resulting png (a byte[]) to my
> > > frontend.
> > >
> > > The svg is generate in browser by using highcharts. I would like to
> > > provide a button
> > > that downloads the transcoded png by sending a request to the
> "transcoding
> > > resource"
> > > and using the svg-dom from browser.
> > >
> > > Is there someone who did that already once? Can you please give me a
> hint
> > > how this could work?
> > >
> > > Thanks for your support
> > > Per
> > >
> > > -
> > > To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> > > For additional commands, e-mail: users-h...@wicket.apache.org
> > >
> > >
> >
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>

Aw: Re: Use Resource to transfer SVG to PNG

[Per Newgro]

Thanks for your response Martin.

I tried to make it work the whole day now. But i can not get it to work with 
IE11.
There is always a security error. This is a known problem for IE and canvas.

I ended up:

$("#chart-export").on("click", function() {
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement( "canvas" );
document.body.appendChild(canvas);
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;

var ctx = canvas.getContext( "2d" );
ctx.clearRect(0, 0, canvas.width, canvas.height);

var img = document.createElement("img");
img.setAttribute("crossOrigin", "anonymous");
img.onload = function() {
ctx.drawImage( img, 0, 0 );
var a = document.createElement("a");
a.download = "chart.png";
a.href = canvas.toDataURL( "image/png" ); 
document.body.appendChild(a);
a.click();
};
img.setAttribute("src", "data:image/svg+xml;base64," + 
btoa(unescape(encodeURIComponent(svgData))) );
});

So i need to go on the other way. But there my problems still occur.

Regards
Per

> Gesendet: Montag, 17. Juli 2017 um 10:42 Uhr
> Von: "Martin Grigorov" 
> An: "users@wicket.apache.org" 
> Betreff: Re: Use Resource to transfer SVG to PNG
>
> Hi,
> 
> Wouldn't HTML Canvas API be better solution?
> See https://stackoverflow.com/a/27232525/497381
> 
> 
> Martin Grigorov
> Wicket Training and Consulting
> https://twitter.com/mtgrigorov
> 
> On Mon, Jul 17, 2017 at 10:12 AM, Per Newgro  wrote:
> 
> > Hello *,
> >
> > I would like to generate a png from a svg. The transcoding is done by
> > using Batik.
> > So far it works as expected.
> >
> > But i'm not sure how to provide the resulting png (a byte[]) to my
> > frontend.
> >
> > The svg is generate in browser by using highcharts. I would like to
> > provide a button
> > that downloads the transcoded png by sending a request to the "transcoding
> > resource"
> > and using the svg-dom from browser.
> >
> > Is there someone who did that already once? Can you please give me a hint
> > how this could work?
> >
> > Thanks for your support
> > Per
> >
> > -
> > To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> > For additional commands, e-mail: users-h...@wicket.apache.org
> >
> >
> 

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Use Resource to transfer SVG to PNG

[Martin Grigorov]

Hi,

Wouldn't HTML Canvas API be better solution?
See https://stackoverflow.com/a/27232525/497381


Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Mon, Jul 17, 2017 at 10:12 AM, Per Newgro  wrote:

> Hello *,
>
> I would like to generate a png from a svg. The transcoding is done by
> using Batik.
> So far it works as expected.
>
> But i'm not sure how to provide the resulting png (a byte[]) to my
> frontend.
>
> The svg is generate in browser by using highcharts. I would like to
> provide a button
> that downloads the transcoded png by sending a request to the "transcoding
> resource"
> and using the svg-dom from browser.
>
> Is there someone who did that already once? Can you please give me a hint
> how this could work?
>
> Thanks for your support
> Per
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>

Use Resource to transfer SVG to PNG

[Per Newgro]

Hello *,

I would like to generate a png from a svg. The transcoding is done by using 
Batik.
So far it works as expected.

But i'm not sure how to provide the resulting png (a byte[]) to my frontend.

The svg is generate in browser by using highcharts. I would like to provide a 
button
that downloads the transcoded png by sending a request to the "transcoding 
resource"
and using the svg-dom from browser.

Is there someone who did that already once? Can you please give me a hint how 
this could work?

Thanks for your support
Per

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org