Javascript with local image files

Using Streamlit
1

Hi:
I find a javascript which can animate a sequence of individual images(Documentation for the HTML5 Image AnimationS WebApp - HAniS). I create a “test.html” which can animate local images "fig1.jpg, fig2.jpg, fig3.jpg ".

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Animation</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/NMC-DAVE/hanis_scripts@v4.44/hanis_min.js"></script>
</head>

<body style="width:500px;" onload="HAniS.setup('filenames = fig1.jpg, fig2.jpg, fig3.jpg \n controls = startstop, speed, step, looprock, zoom \n controls_style = display:flex;flex-flow:row; \n buttons_style = flex:auto;margin:2px;' , 'handiv')">

  <div id="handiv" style="width:800px;background-color:#808080;">
  </div>

  <hr>
  <font size=-1>This webapp is Copyright? 2014-2021 by Tom Whittaker
</body>
</html>

and I want to embed this HTML into streamlit:

import base64
import streamlit as st
import streamlit.components.v1 as components

st.title('HTML test')
HtmlFile = open('test.html', 'r')
raw_html = HtmlFile.read().encode("utf-8")
raw_html = base64.b64encode(raw_html).decode()
components.iframe(f"data:text/html;base64,{raw_html}", height=400)

but no images displayed. How can I solve this? Thanks very much.

2

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.