How to trigger on_click on image

Using Streamlit
1

Hi,
I would like to trigger event when i click on an image i did this but it don’t work does someone has a piece of advise please

import streamlit as st
import pandas as pd
import numpy as np
import keyboard

from PIL import Image
import requests
from io import BytesIO

import plotly.graph_objects as go
import plotly.express as px


imageLocation = st.empty()


img_source="https://raw.githubusercontent.com/michaelbabyn/plot_data/master/bridge.jpg"

response = requests.get(img_source)
image = Image.open(BytesIO(response.content))


img_height ,img_width= np.array(image).shape[:2]

scale_factor = 1

fig=px.imshow(image)


fig.update_xaxes(showgrid=True, range=(0, img_width*1))
fig.update_yaxes(showgrid=True, range=(img_height*1,0))


fig.update_layout(
    width=img_width * scale_factor,
    height=img_height * scale_factor,
    margin={"l": 0, "r": 0, "t": 0, "b": 0}
)




clickable=fig.data[0]


def my_funct(trace, points, inputDeviceState):
    print("hello")

clickable.on_click(my_funct,True)



imageLocation.plotly_chart(fig)
2

Hi @Hugo_Lavezac,

Recent sombody asked a similar qustion about how to do different stlyes for buttons.
I guess there several ways to make it happen (in the future). This is what i came up with:

  1. make components stackable:
 img = Image.open("images/top_spiderman.png")
st.button(st.image(img))

or

  1. add styling and classes to the streamlit compoents :
 st.button("add" , **styles,  **classes)
 enabling  to do: 
 st.button("add" , img=img,  bold=True)


st.markdown("""
<style>
.bold{
  background-color: yellow;
}
</style>
""")
  1. I guess you could also write your own button component.
5 Likes