Spaces:
Running
Running
<html> | |
<head> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/flowbite.min.css" rel="stylesheet" /> | |
</head> | |
<!-- | |
---------------------------------------------------- | |
Your custom static HTML goes in the body: | |
--> | |
<body> | |
<div class="inline-flex rounded-md shadow-sm" role="group"> | |
<button id="up" type="button" onclick="call(this)" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> | |
<svg aria-hidden="true" class="w-4 h-4 mr-2 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
<path fill-rule="evenodd" d="M4.5 15.75l7.5-7.5 7.5 7.5" clip-rule="evenodd"></path> | |
</svg> | |
Up | |
</button> | |
<button id="down" type="button" onclick="call(this)" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> | |
<svg aria-hidden="true" class="w-4 h-4 mr-2 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
<path d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path> | |
</svg> | |
Down | |
</button> | |
<button id="save" type="button" onclick="call(this)" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"> | |
<svg aria-hidden="true" class="w-4 h-4 mr-2 fill-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path> | |
</svg> | |
Save | |
</button> | |
</div> | |
</body> | |
<script type="text/javascript"> | |
// ---------------------------------------------------- | |
// Use these functions as is to perform required Streamlit | |
// component lifecycle actions: | |
// | |
// 1. Signal Streamlit client that component is ready | |
// 2. Signal Streamlit client to set visible height of the component | |
// (this is optional, in case Streamlit doesn't correctly auto-set it) | |
// 3. Pass values from component to Streamlit client | |
// | |
// Helper function to send type and data messages to Streamlit client | |
const SET_COMPONENT_VALUE = "streamlit:setComponentValue" | |
const RENDER = "streamlit:render" | |
const COMPONENT_READY = "streamlit:componentReady" | |
const SET_FRAME_HEIGHT = "streamlit:setFrameHeight" | |
function _sendMessage(type, data) { | |
// copy data into object | |
var outboundData = Object.assign({ | |
isStreamlitMessage: true, | |
type: type, | |
}, data) | |
if (type == SET_COMPONENT_VALUE) { | |
console.log("_sendMessage data: " + JSON.stringify(data)) | |
console.log("_sendMessage outboundData: " + JSON.stringify(outboundData)) | |
} | |
window.parent.postMessage(outboundData, "*") | |
} | |
function initialize(pipeline) { | |
// Hook Streamlit's message events into a simple dispatcher of pipeline handlers | |
window.addEventListener("message", (event) => { | |
if (event.data.type == RENDER) { | |
// The event.data.args dict holds any JSON-serializable value | |
// sent from the Streamlit client. It is already deserialized. | |
pipeline.forEach(handler => { | |
handler(event.data.args) | |
}) | |
} | |
}) | |
_sendMessage(COMPONENT_READY, { apiVersion: 1 }); | |
// Component should be mounted by Streamlit in an iframe, so try to autoset the iframe height. | |
window.addEventListener("load", () => { | |
window.setTimeout(function () { | |
setFrameHeight(document.documentElement.clientHeight) | |
}, 0) | |
}) | |
// Optionally, if auto-height computation fails, you can manually set it | |
// (uncomment below) | |
//setFrameHeight(200) | |
} | |
function setFrameHeight(height) { | |
_sendMessage(SET_FRAME_HEIGHT, { height: height }) | |
} | |
// The `data` argument can be any JSON-serializable value. | |
function notifyHost(data) { | |
_sendMessage(SET_COMPONENT_VALUE, data) | |
} | |
// ---------------------------------------------------- | |
// Your custom functionality for the component goes here: | |
function call(button) { | |
timestamp = Date.now() | |
action = { | |
"action": button.id, | |
"timestamp": timestamp | |
} | |
notifyHost({ | |
value: action, | |
dataType: "json", | |
}) | |
} | |
// ---------------------------------------------------- | |
// Here you can customize a pipeline of handlers for | |
// inbound properties from the Streamlit client app | |
// Set initial value sent from Streamlit! | |
function initializeProps_Handler(props) { | |
for (let key of Object.keys(props.buttons)) { | |
btn = document.getElementById(key) | |
btn.disabled = props.buttons[key]['disabled'] | |
btn.style.display = props.buttons[key]['rendered'] | |
} | |
} | |
// Access values sent from Streamlit! | |
function dataUpdate_Handler(props) { | |
// let msgLabel = document.getElementById("message_label") | |
// msgLabel.innerText = `Update [${props.counter}] at ${props.datetime}` | |
} | |
// Simply log received data dictionary | |
function log_Handler(props) { | |
console.log("Received from Streamlit: " + JSON.stringify(props)) | |
} | |
let pipeline = [initializeProps_Handler, dataUpdate_Handler, log_Handler] | |
// ---------------------------------------------------- | |
// Finally, initialize component passing in pipeline | |
initialize(pipeline) | |
</script> | |
</html> |