Enable html file in sozi presentation ?

[chauvetige]

Hello

First of all thanks for the great piece of software. I like it a lot.

I couldn't find this option but I would love it : Is it possible to enable html file in the presentation. May be it could be done the same way as for audio/video through the inskcape add on.

The idea is to be able to include any html file like the one produce by python plot using plotly for instance.

The figure could be generated via

import numpy as np
import plotly.graph_objects as go

# Generate x values
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Create the figure
fig = go.Figure()

# Add the sine wave
fig.add_trace(go.Scatter(x=x, y=y, mode='lines', name='Sine Wave'))

# Customize layout
fig.update_layout(
    title="Sine Wave using Plotly",
    xaxis_title="x",
    yaxis_title="sin(x)",
    template="plotly_dark"
)

fig.write_html("sine_wave.html")

Will it be possible to do such thing ?
Best
Thomas

[chauvetige]

Hi
So I look around and I think it is related to the issue #185

Here is a working example:

testsozi.zip

Using the video extension inskcape tool, it produces:

  <g
     inkscape:label="Calque 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       id="g140"
       transform="matrix(0.16376151,0,0,0.15724045,95.631654,166.03189)">
      <rect
         x="-500"
         y="-250"
         width="1000"
         height="500"
         stroke="none"
         fill="#aaaaaa"
         id="rect138">
        <ns0:video
           ns0:type="video/mp4"
           ns0:src="image.html"
           ns0:loop="false"
           ns0:controls="false" />
      </rect>
    </g>
  </g>

That I edit to:

<g
  inkscape:label="Calque 1"
   inkscape:groupmode="layer"
   id="layer1">
  <g
     id="g352"
     transform="matrix(0.16095645,0,0,0.18743112,107.01377,146.36019)">
    <rect
       x="-500"
       y="-250"
       width="1000"
       height="500"
       stroke="none"
       fill="#aaaaaa"
       id="rect350">
    </rect>
    <foreignObject x="-500" y="-250" width="1000" height="500">
        <iframe xmlns="http://www.w3.org/1999/xhtml"
          width="1000" height="500"
          src="sine_wave.html"
          frameborder="0"></iframe>
     </foreignObject>
    </g>
  </g>

And it works perfectly. Therefore it would be nice to have a radio option in the inkscape extention that directly produce this code. It could be called iframe and like this work as well for #185.

Best
Thomas

[chauvetige]

I tried to look at the extention. I could almost do something but I still have one issue in this python script:

Working solution but not good enough

media-inkscape-1.1.zip

For now it work if I edit the svg file and remove the 'TOTO' string.

This string is coming from this line

iframe.set("xmlnsTOTO", "http://www.w3.org/1999/xhtml")

That give :

      <foreignObject
         x="-500.0"
         y="-250.0"
         width="1000"
         height="500">
        <iframe
           xmlnsTOTO="http://www.w3.org/1999/xhtml"
           width="1000"
           height="500"
           src="https://www.youtube.com/embed/dS_n89gyUbg?si=XF6klW3RvCcZYgcQ"
           frameborder="0" />
      </foreignObject>

This solution is working once I use Sozi.

Tested solution but NOT working

But if I replace it by:

iframe.set("xmlns", "http://www.w3.org/1999/xhtml")

I get :

<foreignObject
     x="-500.0"
     y="-250.0"
     width="1000"
     height="500">
    <xhtml:iframe
       width="1000"
       height="500"
       src="sine_wave.html"
       frameborder="0" />
  </foreignObject>

With this in the svg header:

xmlns:xhtml="http://www.w3.org/1999/xhtml"

And then it doesn't work with sozi anymore.

If someone is able to go further.
Best
Thomas