Link 360 JS library in markdown

Using Streamlit
#1

Hi,
I am trying to link a JS library for 360 photo viewer with streamlit. The photo was loaded, but the it looks like the JS library wasn’t loaded properly with the photo not being able to be interacted with.
Anyone has experienced similar issues?
Cheers,
Will

import streamlit as st

def main():
    st.set_page_config(page_title='BKN 360 Photo App', initial_sidebar_state = 'auto')
    #page_icon = favicon,
    st.markdown(
            f"""
            <style>
                .reportview-container .main .block-container{{
                    max-width: 1200px;
                    padding-top: 1rem;
                    padding-right: 1rem;
                    padding-left: 1rem;
                    padding-bottom: 1rem;
                }}

            </style>
            """,
            unsafe_allow_html=True,
        )


    # main section
    st.subheader('Web 360 Photo App')
    st.markdown('<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>', unsafe_allow_html=True)
    st.markdown("""
    <a-scene>
        <a-assets>
            <img id="panorama" src="https://c1.staticflickr.com/5/4302/35137573294_1287bfd0ae_k.jpg" crossorigin />
        </a-assets>
        <a-sky src="#panorama" rotation="0 -90 0"></a-sky>
    </a-scene>
    """, unsafe_allow_html=True)

if __name__ == "__main__":
    main()
1 Like
#2

st.markdown won’t work with js
you could use components.html from import streamlit.components.v1 as components

1 Like