How to render dynamically generated svg file in Wt.
Added by Rathnadhar K V about 6 years ago
Namaskara,
I have to dynamically generate and render QrCode in a web page.
I am using Qr Code generator fro Nayuki, URL: [[[https://github.com/nayuki/QR-Code-generator]]]
From that I can generate SVG text string. Which I can stream it to a file to generate the image.svg file. (Using qr0.toSvgString() method).
I am looking at ways to display this SVG text string in memory directly to the web page. So that I can avoid creating a redundant file.
Is there a way to directly render the SVG text string to web page?
I was able to display the saved svg file through WImage object. But it renders a huge svg image, I am unable to confine it to a small area. I read about WPaintedWidget class and WPaint to render the svg file in a scaled proportion. I could not figure how to do it. Please help.
Regards
Rathnadhar K V
Replies (5)
RE: How to render dynamically generated svg file in Wt. - Added by Wim Dumon about 6 years ago
Hello,
Use WMemoryResource combined with WImage.
To set the size of the image, use CSS (or WWidget::resize()). The QR code will scale to the size you specified.
Best regards,
Wim.
RE: How to render dynamically generated svg file in Wt. - Added by Rathnadhar K V about 6 years ago
Thanks for the quick reply.
The example in the web page: https://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WMemoryResource.html#af6e9c0043442f08ac6e8ad2d248f6c71 is not compiling.
When I compile, the example code:
auto imageResource = std::make_uniqueWt::WMemoryResource("image/gif");
static const unsigned char gifData[]
= { 0x47, 0x49, 0x46, 0x38, 0x39, 0x61, 0x01, 0x00, 0x01, 0x00,
0x80, 0x00, 0x00, 0xdb, 0xdf, 0xef, 0x00, 0x00, 0x00, 0x21,
0xf9, 0x04, 0x01, 0x00, 0x00, 0x00, 0x00, 0x2c, 0x00, 0x00,
0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x00, 0x02, 0x02, 0x44,
0x01, 0x00, 0x3b };
imageResource->setData(gifData, 43);
auto image = std::make_uniqueWt::WImage(imageResource.get(), "1 transparent pixel");
I get this error:
/usr/local/include/Wt/WGlobal.h:24: error: no matching function for call to 'Wt::WImage::WImage(Wt::WMemoryResource*, const char [20])'
return std::unique_ptr(new T (std::forward<Args>(args)...));
~
The definition of WImage: WImage (const WLink &imageLink, const WString &altText)
I have to create a WLink object, to embed the resource object and that newly created WLink object should be input parameter for WImage....
Is that so?
Please help
Regards
Rathnadhar K V
RE: How to render dynamically generated svg file in Wt. - Added by Roel Standaert about 6 years ago
Hi,
Yes, that example should be updated. WImage takes a WLink, which can be constructed from a std::shared_ptr<WResource>.
So you have to do std::make_shared<Wt::WMemoryResource> and have imageResource as the first argument of the WImage constructor, or explicitly do the conversion with Wt::WLink(imageResource).
Regards,
Roel
RE: How to render dynamically generated svg file in Wt. - Added by Rathnadhar K V about 6 years ago
Here is the code snippet (modified the greet function in hello.c example)
/*
- Update the text, using text input into the nameEdit_ field.
*/
greeting_setText("Hello there, " + nameEdit_>text());
QrCode qr0 = QrCode::encodeText("Emweb Wt Webkit", QrCode::Ecc::LOW);
std::string svg_image_string = qr0.toSvgString(4);
auto imageResource = std::make_sharedWt::WMemoryResource("image/svg+xml");
imageResource->setData((const unsigned char *)svg_image_string.c_str(),svg_image_string.length()+1);
auto imagelink = Wt::WLink(imageResource);
auto ximage = root()->addWidget(Wt::cpp14::make_uniqueWt::WImage(imagelink));
ximage->show();
Complied without any errors. I was able to run the example. The svg_image_string is perfectly formed.
on clicking the button,
I get the greeting string "Hello there, ....."
B
U
T
But ximage->show is not rendering. I see no qrcode image.
Help me to resolve this.
Regards
Rathnadhar K V
RE: How to render dynamically generated svg file in Wt. - Added by Rathnadhar K V about 6 years ago
Namaskara,
I could get to display the QR Code...there was one extra character in the image...due to svg_image_string.length()+1...that was causing the problem..
Now the issue is fixed...the image is getting displayed...but covering almost the entire screen, I need to figure out how to scale down the svg...
Roel, Thank you so much for your help, your advice was crucial....
I have a suggestion, that will HELP to ease implementation using Wt.
Supposed Wt had an api:
addSVGimage(image_file/resourse, height, width);
(something like that) that hides implementation, then it would be great !! just a thought from my side.
Regards
Rathnadhar K V