こすたろーんエンジニアの試行錯誤部屋

作成物の備忘録を書いていきますー

【streamlit】htmlを埋め込んでkey-bindを対応してみた

streamlit

スポンサーリンク

streamlitの操作をキーボードでできないかなと思い調べてみたところcomponents.htmlを使えばできそうなので備忘録です
コードは以前に作成したものを改良してます
technoxs-stacker.hatenablog.com

目次

スポンサーリンク

この記事でわかること

streamlitをキーボード操作するためのkey-bind

1.実行環境

Jetson Xavier NX
ubuntu18.04
docker
python3.x

2.改良版コード

components.htmlを使ってhtmlを埋め込みます
htmlではキー入力を検出する処理を入れます
callback関数でキー入力時の処理を入れてます

import streamlit as st
import configparser
import argparse
import streamlit.components.v1 as components

def z_callback():
    st.write('z button!!!')

def a_callback():
    st.write('a button!!!')

z_col, right_col, _ = st.sidebar.columns([1, 1, 3])

with z_col:
    st.button('Z', on_click=z_callback)

with right_col:
    st.button('A', on_click=a_callback)

components.html(
    """
<script>
const doc = window.parent.document;
buttons = Array.from(doc.querySelectorAll('button[kind=primary]'));
const z_button = buttons.find(el => el.innerText === 'Z');
const a_button = buttons.find(el => el.innerText === 'A');
doc.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 90: // (90 = z)
            z_button.click();
            break;
        case 65: // (65 = a
            a_button.click();
            break;
    }
});
</script>
""",
    height=0,
    width=0,
)

def main(args):
    # arg parse
    config_file_path = args.config

    config_ini = configparser.ConfigParser()
    config_ini.read(config_file_path, encoding='utf-8')
    # parse config
    mode = config_ini['COMMON']['mode']
    st.markdown("# debug")
    st.write(mode)
    

if __name__ == "__main__":
    parser = argparse.ArgumentParser()
    parser.add_argument('--config')
    args = parser.parse_args()
    main(args)

スポンサーリンク

感想

key-bind処理とcallback関数、st.session_stateを組み合わせると、より使い勝手がよくなりました

参考

github.com https://web-designer.cman.jp/javascript_ref/keyboard/keycod