making nice images with Phoenix

[sponce]

One thing people from the outreach like to get is nice pictures which can be used then by media in general and newspapers in particular. These picture need decent resolution (4K or more typically). Now phoenix is only able to produce screenshots, so requires you have a very big screen if you want a nice picture.

Is there anyway to get a "screenshot" of a virtual screen of a size different from the actual one ? Alternatively does threejs support svg as an output for images ?

[gauravsharma21]

@sponce @EdwardMoyse Can I work on this feature?
I was thinking about adding another option inside Import and Export options within the Phoenix Iconbar labeled as "Export SVG"

[sponce]

You're more than welcome !

[Somya-Bansal159]

I have tried to add an option for exporting SVG. I am successfully able to download an SVG image. But, there are a few issues:

1. Clipping is not working properly in the final SVG.
2. The info panel is not exported. I haven't found a way yet to export HTML as SVG.
3. SVG file has all the objects including the occluded ones. So, its size is big.

I have basically added a function similar to makeScreenshot() in "packages\phoenix-event-display\src\managers\three-manager\index.ts":

public exportSceneToSVG() {
    const bkgColor = getComputedStyle(document.body).getPropertyValue(
      '--phoenix-background-color'
    );

    const renderer = new SVGRenderer();
    renderer.overdraw = 0;
    renderer.setSize(window.innerWidth, window.innerHeight);

    const colorValue = parseInt(bkgColor.replace('#', '0x'), 16);
    renderer.setClearColor(new Color(colorValue), 1);

    renderer.render(
      this.sceneManager.getScene(),
      this.controlsManager.getMainCamera()
    );

    const XMLS = new XMLSerializer();
    const svgfile = XMLS.serializeToString(renderer.domElement);
    const svgData = svgfile;
    const preface = '<?xml version="1.0" standalone="no"?>\r\n';
    const svgBlob = new Blob([preface, svgData], {
      type: 'image/svg+xml;charset=utf-8',
    });

    const svgUrl = URL.createObjectURL(svgBlob);
    const downloadLink = document.createElement('a');
    downloadLink.href = svgUrl;
    downloadLink.download = 'scene.svg';
    downloadLink.click();
}

[JanEricNitschke]

I would like to reiterate the desire for this feature (and/or also #581).

I tried to emulate a device with a higher resolution and take a better screenshot with that but sadly in the end they look the same still.

[EdwardMoyse]

I think quite a lot of this has been added. Did you give it a try - you can now make very large screenshots.

[JanEricNitschke]

Yeah, i did, both with https://phoenixatlas.web.cern.ch/PhoenixATLAS/ as well as cloned and run locally.

I can do the preset 3860 by 2610 but that still looks quite rough to me when you zoom in even a tiny bit. Setting it bigger to twice each just gives me a grey picture.

[EdwardMoyse]

Which browser? If you can, try with another as I believe they have different limits.

[JanEricNitschke]

I used chrome initially and also tried edge now. Both give me the same result.

[sponce]

I think this one is just a duplicate of #581 and we only need to find the time to implement the second point described there, and implement a solution using setViewOffset and recomposition of the image