René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"[BUG]: frame paths relative to the html file when saving an animation to html","articleBody":"### Problem\n\nLet's take the example from https://matplotlib.org/stable/gallery/animation/animate_decay.html\r\n\r\n```python\r\n\r\nimport itertools\r\n\r\nimport numpy as np\r\nimport matplotlib.pyplot as plt\r\nimport matplotlib.animation as animation\r\n\r\n\r\ndef data_gen():\r\n    for cnt in itertools.count():\r\n        t = cnt / 10\r\n        yield t, np.sin(2*np.pi*t) * np.exp(-t/10.)\r\n\r\n\r\ndef init():\r\n    ax.set_ylim(-1.1, 1.1)\r\n    ax.set_xlim(0, 10)\r\n    del xdata[:]\r\n    del ydata[:]\r\n    line.set_data(xdata, ydata)\r\n    return line,\r\n\r\nfig, ax = plt.subplots()\r\nline, = ax.plot([], [], lw=2)\r\nax.grid()\r\nxdata, ydata = [], []\r\n\r\n\r\ndef run(data):\r\n    # update the data\r\n    t, y = data\r\n    xdata.append(t)\r\n    ydata.append(y)\r\n    xmin, xmax = ax.get_xlim()\r\n\r\n    if t \u003e= xmax:\r\n        ax.set_xlim(xmin, 2*xmax)\r\n        ax.figure.canvas.draw()\r\n    line.set_data(xdata, ydata)\r\n\r\n    return line,\r\n\r\nani = animation.FuncAnimation(fig, run, data_gen, interval=10, init_func=init)\r\nplt.show()\r\n```\r\n\r\nIt works great and I can easily save the animation to html using code such as:\r\n\r\n```python\r\nfrom matplotlib.animation import HTMLWriter\r\n\r\nfname = \"path/to/myfile.html\"\r\nwriter = HTMLWriter(fps=5)\r\nwriter.frame_format = \"svg\" # Ensure svg format\r\nani.save(fname, writer=writer)\r\n```\r\n\r\nI can open the html animation from a browser or display it in a jupyter notebook:\r\n\r\n```python\r\nfrom IPython.display import HTML\r\n\r\n# Display the animation\r\nHTML(fname_html.read_text())\r\n```\r\n\r\nThe problem is that within the html file, the path to the frames is hardcoded rather than being relative to the \r\nhtml file. So if you change the location of the html file, it does not work anymore.\r\n\r\n```js\r\n\r\n\u003cscript language=\"javascript\"\u003e\r\n  /* Instantiate the Animation class. */\r\n  /* The IDs given should match those used in the template above. */\r\n  (function() {\r\n    var img_id = \"_anim_imga5cbaf4d0c4c4ffda374436a276eff4b\";\r\n    var slider_id = \"_anim_slidera5cbaf4d0c4c4ffda374436a276eff4b\";\r\n    var loop_select_id = \"_anim_loop_selecta5cbaf4d0c4c4ffda374436a276eff4b\";\r\n    var frames = new Array(100);\r\n   \r\n  for (var i=0; i\u003c100; i++){\r\n    frames[i] = \"path/to/myfile_frames/frame\" + (\"0000000\" + i).slice(-7) +\r\n                \".svg\";\r\n  }\r\n\r\n\r\n    /* set a timeout to make sure all the above elements are created before\r\n       the object is initialized. */\r\n    setTimeout(function() {\r\n        anima5cbaf4d0c4c4ffda374436a276eff4b = new Animation(frames, img_id, slider_id, 200,\r\n                                 loop_select_id);\r\n    }, 0);\r\n  })()\r\n\u003c/script\u003e\r\n\r\n```\r\n\r\nYou can feed `ani.save(fname, writer=writer)` with a relative `fname` but in that case, it works in jupyter only if the html file is in the same folder than the notebook.\n\n### Proposed solution\n\nThe best would be to modify the javascript so it can get the path of the html file on the fly. I tried:\r\n\r\n```js\r\n\r\n\u003cscript language=\"javascript\"\u003e\r\n  /* Instantiate the Animation class. */\r\n  /* The IDs given should match those used in the template above. */\r\n  (function() {\r\n    var img_id = \"_anim_imga5cbaf4d0c4c4ffda374436a276eff4b\";\r\n    var slider_id = \"_anim_slidera5cbaf4d0c4c4ffda374436a276eff4b\";\r\n    var loop_select_id = \"_anim_loop_selecta5cbaf4d0c4c4ffda374436a276eff4b\";\r\n    var frames = new Array(100);\r\n    var scripts = document.getElementsByTagName(\"script\"), src = scripts[scripts.length-1].src;\r\n\r\n   \r\n  for (var i=0; i\u003c100; i++){\r\n    frames[i] = src + \"myfile_frames/frame\" + (\"0000000\" + i).slice(-7) +\r\n                \".svg\";\r\n  }\r\n\r\n\r\n    /* set a timeout to make sure all the above elements are created before\r\n       the object is initialized. */\r\n    setTimeout(function() {\r\n        anima5cbaf4d0c4c4ffda374436a276eff4b = new Animation(frames, img_id, slider_id, 200,\r\n                                 loop_select_id);\r\n    }, 0);\r\n  })()\r\n\u003c/script\u003e\r\n\r\n```\r\n\r\nAnd it works at least in Firefox and Chrome. However, it does not work for:\r\n\r\n```python\r\nfrom IPython.display import HTML\r\n\r\n# Display the animation\r\nHTML(fname_html.read_text())\r\n```","author":{"url":"https://github.com/antoinecollet5","@type":"Person","name":"antoinecollet5"},"datePublished":"2022-08-08T10:13:30.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2},"url":"https://github.com/23581/matplotlib/issues/23581"}