2

According to this article, the basics works fine, but I'm trying to display PrimeFaces p:signature SMALLER like this:

enter image description here ---> enter image description here

When I try simply change width and height of signature (in CSS or directly like attribute of signature component), it displays small signature component, but the signature itself it's still the same size, so it's not displayed, or part of it only:

enter image description here

I suppose it's because the signature is stored in absolute dimensions..

How to display the stored signature smaller?

SVG: According answer on this topic, I've tried to display generated SVG like this:

<h:outputText value="#{bean.toSvg(item.signature,600,20)}" escape="false"/>

Problem is still the same, I can't resize the SVG

Update (solution): To use viewBox attribute

public String toSvg(..)
{
  .. 
  sb.append(String.format("<svg width=\"%d\" height=\"%d\" viewBox=\"0 0 %d %d\" preserveAspectRatio=\"xMinYMin meet\" xmlns=\"http://www.w3.org/2000/svg\">\n", width/10, height/10, width, height));
  ..
}
gaffcz
  • 3,469
  • 14
  • 68
  • 108

1 Answers1

3

I would convert the signature to an SVG (or PNG) which allows you to easily scale it down for displaying using CSS.

See also:

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • Thank you. Is it possible to do that without physical storing SVG/PNG files? Problem is that it will be hundreds of thousands of signatures... – gaffcz Dec 04 '19 at 10:48
  • You can simply only do the conversion in your bean, right? – Jasper de Vries Dec 04 '19 at 11:30
  • I must do conversion, save it to some location and display the PNG file smaller in the data table. It will work and maybe it's real solution.. I'm doing it right now :-) – gaffcz Dec 04 '19 at 11:46
  • You don't need to store the bytes in a file, you can serve them from your bean. – Jasper de Vries Dec 04 '19 at 11:48
  • Oh, thank you, but, to be honest, I'm not sure how at this moment.. how to set correct output stream – gaffcz Dec 04 '19 at 11:50
  • If you go for SVG you can simply embed it in your XHTML. – Jasper de Vries Dec 04 '19 at 12:14
  • I can display SVG (``), but I¨m not able to resize it, SVG behave exactly like original signature component, because it's not an image : / – gaffcz Dec 04 '19 at 13:58
  • SVG and viewBox helped me. Thank you! `sb.append(String.format("\n", width/10, height/10, width, height));` – gaffcz Dec 05 '19 at 07:19