Created
April 9, 2024 05:30
-
-
Save hansthen/21a28154aa7c44e63343f6ace610e96c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import streamlit as st | |
import streamlit.components.v1 as components | |
from streamlit_extras.row import row | |
from streamlit_extras.stylable_container import stylable_container | |
with st.sidebar: | |
st.markdown(""" | |
<style> | |
:root { | |
--header-height: 50px; | |
} | |
[data-testid="stHeader"] { | |
background-image: url(/app/static/icons8-astrolabe-64.png); | |
background-repeat: no-repeat; | |
background-size: contain; | |
background-orgin: content-box; | |
} | |
[data-testid="stHeader"] { | |
background-color: grey; | |
padding-top: var(--header-height); | |
} | |
[data-testid="stSidebar"] { | |
margin-top: var(--header-height); | |
} | |
[data-testid="stToolbar"]::before { | |
content: "Astrolabium"; | |
} | |
[data-testid="collapsedControl"] { | |
margin-top: var(--header-height); | |
} | |
[data-testid="stSidebarUserContent"] { | |
padding-top: 2rem; | |
} | |
</style> | |
""", unsafe_allow_html=True) | |
icon, location, start, button = st.columns([1, 3, 3, 3]) | |
with icon: | |
st.markdown(""" | |
<svg height="51px" style="overflow: visible"> | |
<line stroke-linecap="round" x1="7" x2="7" y1="0" y2="100%" style="stroke:#01579b; stroke-width:14px"></line> | |
</svg> | |
<div class="segment-divider" style="background-color: rgba(255,255,255,.54); | |
border-radius: 5px; | |
height: 10px; with location: | |
st.text_input(time, value="Amsterdam", label_visibility="collapsed") | |
with start: | |
st.button(time, disabled=True) | |
with button: | |
st.button(":magic_wand:", key=time) | |
with stylable_container(def left_callback(): | |
st.write('Left button was clicked') | |
components.html( | |
""" | |
<script> | |
function message(msg) { | |
window.parent.postMessage( | |
{ | |
sender: "component1", | |
message: msg | |
}, | |
"*" | |
); | |
} | |
const doc = window.parent.document; | |
buttons = Array.from(doc.querySelectorAll('button[kind=secondary]')); | |
const left_button = buttons.find(el => el.innerText === 'LEFT'); | |
const right_button = buttons.find(el => el.innerText === 'RIGHT'); | |
doc.addEventListener('keydown', function(e) { | |
switch (e.keyCode) { | |
case 37: // (37 = left arrow) | |
//left_button.click(); | |
console.log("left source"); | |
message("left"); | |
break; | |
case 39: // (39 = right arrow) | |
//right_button.click(); | |
console.log("right source"); | |
message("right"); | |
break;""", | |
height=0, | |
width=0, | |
) | |
components.html( | |
""" | |
<script> | |
window.parent.addEventListener("message", (event) => { | |
if (event.data && | |
event.data.sender == "component1") { | |
console.log(event.data.message); | |
} | |
} | |
); | |
</script> | |
""", | |
height=0, | |
width=0, | |
) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment