Embedding images?

[shauryapednekar1]

Hi, is there any way to embed image locations (png/jpegs/any other format) into the "args" field of a traceEvent in the result.json file, so that the images will then be viewable within Perfetto itself when selecting the event?

For instance, in the image below, is there a way to display an image similar to how the code is displayed?

(For some context, I am externally creating the result.json file and then using viztracer to view it.)

Thanks!

In the json file, here is where I would like to add the path to the image:

{
    "traceEvents": [
        {
            "ph": "...",
            "pid": ...,
            "tid": ...,
            "ts": ...,
            "dur": ...,
            "name": "...",
            "args": {
                "image": "path/to/image" # HERE
            }
        },
        ...
      ]
...
}

[gaogaotiantian]

Hi,

First of all, thank you for using VizTracer and sending feature requests.

As of now, there's no usage of VizTracer to embed an image into the report. Actually, this is more like a feature to Perfetto, instead of VizTracer. If you are not using VizTracer for tracing at all, what's the reason that you do not just use Perfetto directly to visualize your data? VizTracer did some hacks to show the source code, in theory you can show images on your report. However, it definitely requires some changes on Perfetto, and I don't have plans to do that due to the reason I mentioned above.

Also, the idea of showing an arbitrary image on file system is against the fundamentals of Perfetto. You can't do that with pure front-end code, because your browser does not have full access to your file system. VizTracer sets up an HTTP server to do some data transfer, which is kind of against the fundamentals of Perfetto as well.

For now, unless I'm convinced this is a feature that's helpful for VizTracer, I won't work on it. I know it's theoretically possible though, so if you want to do that by yourself, you can try to hack your own version of Perfetto(which the devs of Perfetto actually recommends).

Please let me know if you have more questions.

[shauryapednekar1]

Hi,

Thank you for your reply. I tried using Perfetto initially but couldn't find a way to display images. I was looking for alternatives and that's when I found VizTracer.

Ah I see. Since the browser does not have full access to the file system, setting up a server that hosts the images would also work. (The main goal is to display images (attached to specific trace events) within the Perfetto UI.)

I'll go through the code to see if it's feasible. Please let me know if you have any suggestions for ways in which one can do this, since there might be a similar approach to the one taken by VizTracer for displaying the code.

[gaogaotiantian]

The Perfetto code of mine is at https://github.com/gaogaotiantian/perfetto. I'm not sure how familiar you are with front-end stuff. Google used a pretty large structure so you probably need more than some JavaScript knowledge to make it work.

Basically, you need to find the page template of trace event detail info, and change that. You probably can just add an <img> tag in the template and point it to the path.

You probably need a backend server that hosts both Perfetto dist and your images to simplify CORS, just notice that the CORS rules for Perfetto is pretty strict(basically you can host on localhost:9001 or change the rules).

In any case, you definitely need your own Perfetto fork to do this.

[shauryapednekar1]

Perfect, thanks for the tips!