I am using flot to generate graphs in my application. The graphs are rendered correctly. The web page is then converted to a pdf using PDFKit. On conversion, the coordinates[X,Y] of the graph are displayed correctly While the graph itself is not rendered.
Problem seems to be with the canvas tag-
<canvas class="base" width="600" height="300"></canvas>
<canvas class="overlay" width="600" height="300" style="position: absolute; left: 0px; top: 0px;"></canvas>
Any clues on which direction to look to solve the problem will be very helpful.
Cheers!
PDFKit uses wkhtmltopdf to do the actual rendering right? So you might need to dig into PDFKit and make sure it's specifying the right options for wkhtmltopdf, specifically --redirect-delay <time> might be useful.
Related
i updated my website to new picture webp format instead of pngs.
It appears that google insights still is working on previous code, not considering the changes that have been done.
the project is here : https://www.marche-talensac.fr/
If you can see anything wrong, i thank you to have a word in here :)
Regards to you all ^^
The problem is that you are still serving the old image as well as the new image. You will see that your slider is adding the image as a background image via an inline style attribute.
<picture>
<source type="image/webp" srcset="https://www.marche-talensac.fr/css/home2.webp">
<source type="image/png" srcset="https://www.marche-talensac.fr/css/home2.png">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");" class="homepng">
</picture>
If you remove whatever is causing that style to be added to your slide it should work as intended.
For clarity remove the code that injects style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");"
Also note that you have only updated the home page slider, all the other images are still served as .jpg files.
I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).
I am using p:galleria tag as follows:
<p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
<p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>
The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here:
What can be the reason, how can I solve it?
My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :
https://github.com/alexmivonwien/pf.gall.git
After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:
1.) My own generated HTML and CSS:
note that the first "li" child under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the CSS style (there is no display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px;">
2.) The HTML and CSS on the primefaces showcase:
Note that the first "li" element under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the css style (there is a display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria
The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...
Effectively this problem is all plain css html related and nothing PrimeFaces specific.
I've exported a shapefile from PostGIS to SVG using ST_AsSVG. I chose to use relative coordinates for the export. The result of the export is here:
http://pastebin.com/rmB89Pyw
When I put this into a very simple HTML page with an SVG path element, I don't see any of the path. I"m guessing it's something to do with the viewBox/scaling/transform - but I'm not sure where to start, this is my first foray into this area.
Any ideas?
Here is a way I found to embed your shape:
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width="800"
height="600"
style="border: 1px solid red">
<path
transform="translate(400,300) scale(.01, .01) translate(-323712.401, 4848647.35)"
d="... YOUR PATH ..." />
</svg>
</body>
</html>
What I did is put a "transform" attribute to (from right to left):
translate the first point of you path to 0,0
scale the path (by 0.01), I tried a few scales
translate the 0,0 (you first point) to the middle of the svg image (400, 300)
I think you can adapt this to do exactly what you want (or even make a script to extract the bounding box informations etc).
I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.
Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.
I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.
See the page in question here:
http://www.izbornareforma.rs/izbori-2012/
All images are SVG, the four bottom one have embedded bitmap in them.
There are a number of similar question but none have a workable solution.
Suggestions welcome.
G.D.
This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...
<div id="svgfix">
<object ... />
<object ... />
<object ... />
<object ... />
</div>
Your CSS:
#svgfix {
width: 0;
height: 0;
position: absolute;
visibility: hidden;
}
The corresponding Webkit bug was fixed and rolled-out with Safari 9.
I am trying to stretch an svg document inside an DOM in order to fit the window size.
like so:
<div id="y">
<div id="button"> click to zoom</div>
<embed id="x" src="s17.svg" >
<script>
var btn= document.getElementById("button");
btn.addEventListener('click',function(){
var z= document.getElementsByTagName("embed")[0];
var y = z.getSVGDocument();
y.lastChild.setAttribute("viewBox","0 0 "+window.innerWidth+" "+window.innerHeight);
},false);
</script>
</div>
css:
#x{
height:100%;
width:100%;
overflow:hidden;
}
#y{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
}
This isn't working... What am I doing wrong?
All browsers should be able to handle this just fine:
add a viewBox to the svg element (s17.svg in your example) without using script if possible
remove the width and height attributes on the svg element if they are specified
add an attribute preserveAspectRatio="none" to the svg element to make it stretch even if the css-viewport aspect ratio doesn't match the viewBox aspect ratio.
set the width/height of the embed/iframe/object to whatever you want and the svg will automatically stretch to fit
If you don't want stretching then you can also do preserveAspectRatio="xMidYMid slice" (fill whole viewport, slicing away parts if necessary) or preserveAspectRatio="xMidYMid meet" (this is the default, center the svg in the viewport and maintain the aspect ratio).
All browsers handle SVG support completely differently. I think your best bet is to use an object tag instead of embed, and you still have to do some hacking to get it to look right on each browser. This link and this link have some useful information for getting it to work cross-browser.