Etch A Sketch App on streamlit

[Adhokshaja_Pradeep]

Hi I have build a simple Etch a Sketch App using streamlit . This also uses Pillow library for imaging functions. Feedback is welcome!

streamlit app

[Sully]

Hey this is super cool!

If you add a little snippet like this, you can draw with your arrow keys which is a ton of fun as well Makes it a lot easier to get those nice diagonals.

import streamlit.components.v1 as components

components.html(
    f"""
<script>
const doc = window.parent.document;
buttons = Array.from(doc.querySelectorAll('button[kind=secondary]'));
const up_button = buttons.find(el => el.innerText === "⬆️");
const down_button = buttons.find(el => el.innerText === "⬇️");
const left_button = buttons.find(el => el.innerText === "⬅️");
const right_button = buttons.find(el => el.innerText === "➡️");
doc.addEventListener('keydown', function(e) {{
    switch (e.keyCode) {{
        case 37: // (37 = left arrow)
            e.preventDefault();
            left_button.click();
            break;
        case 38: // (38 = up arrow)
            e.preventDefault();
            up_button.click();
            break;
        case 39: // (39 = right arrow)
            e.preventDefault();
            right_button.click();
            break;
        case 40: // (40 = down arrow)
            e.preventDefault();
            down_button.click();
            break;
    }}
}});
</script>
""",
    height=0,
    width=0,
)

[Adhokshaja_Pradeep]

Hi @Sully Thanks for sharing this useful addition! I will add this to my code and update the app