Custom component to display clickable images

Thank you very much, it works fine

1 Like

Hi @VishnuS-S. You should try st-click-detector which is more general and flexible.
After the component, you should record the id of the image that was clicked on in st.session so that you can use this value during the next render of the page.
I do something like this in this web app, ie remembering what was clicked on. Check out the code

2 Likes

Thanks, @vivien. I’ll try it out.

1 Like

@vivien Hi, I need your help I am trying to use St. Click detector, I am uploading images for PPE detection what I want to happen is to click on those images when you click the image the program will try to detect the PPE but every time I run it I get this error I am using conda environment

here is the error in the conda terminal:


my code :

image = st.file_uploader(“”, accept_multiple_files=True)
for x in image:
image_read = x.read()
image_64_encode = base64.b64encode(image_read)
image_64_decode = base64.b64decode(image_64_encode)

clicked = clickable_images(
image_64_decode,
titles=[f"Image #{str(i)}" for i in range(len(image_64_decode))],
div_style={“display”: “flex”, “justify-content”: “center”, “flex-wrap”: “wrap”},
img_style={“margin”: “5px”, “height”: “200px”},
)

st.markdown(f"Image #{clicked} clicked" if clicked > -1 else “No image clicked”)

1 Like

Hi @Saurav_Baliga. First, I recommend you to use st-click-detector and not st-clickable-images. Then, you need to keep track of the image selected with st.session_state and then render again the page with st.experimental_rerun. See for example app.py · vivien/semanticsearch at main as an example of a page which is rendered again after a click

1 Like

Hi @players_hub. You say that you use st-click-detector but there is only st-clickable-images in your code.

1 Like

create clickable areas in an image, create an image map, with clickable areas** . For example, on clicking a box, the different website opens and on clicking a triangle in the same image, a different website opens. clickercounter.org A clickable image is **a graphical button on a website that functions as a hyperlink. Using the computer mouse and cursor on the screen to click on the image will take the user to another page on the original website, or to a different website altogether.O

1 Like

Hi @vivien

The click-detector works well

How would I introduce a flex-wrap along with the click-detector?

1 Like

Hi @MLbyML. With click-detector, you can use arbitrary html so you can use inline styling directly in your html elements, e.g.:

<div style=®
®>

1 Like

How can I get coordinate information of clicked place on image in streamlit?

1 Like

It works fine. The only thing is that if I want to use a local image I must put the file inside site-packages/st_click_detector/frontend/build/imgs and is very annoying

1 Like

Hi. I’m not sure what you mean. You can put the image wherever it’s accessible by the Python script

1 Like

Hi. Sorry, you can’t with this component

Hi @vivien, anytime I seem to click an image, the clicked value just stays at -1 even though I see the app receives the click because the frontend reloads

Hi @DS_1999 . Does the code in the “Quickstart” section of the repo work for you?

Hello,

Thank you for providing this excellent component. Is it possible to detect hover effects on images, in addition to the click event, using st-click-detector? More precisely, I would like to implement a feature where a green layer is added on top of the image whenever a user hovers over the image.

Hi @nmahmoud
Thanks! It isn’t a feature of the component but maybe you can emulate this behavior with st-click-detector (which allows arbitrary html) and the :hover CSS pseudo my-selector

@data.science

@st.cache_data
def get_img_as_base64(file):
with open(file, “rb”) as f:
data = f.read()
return base64.b64encode(data).decode()

clicked = clickable_images(
[
f’data:image/png;base64,{get_img_as_base64(“./static/bgimage.png”)}’
],
titles=[f"Image #{str(i)}" for i in range(5)],
div_style={“display”: “flex”, “justify-content”: “center”, “flex-wrap”: “wrap”},
img_style={“margin”: “5px”, “height”: “200px”},
)
st.markdown(f"Image #{clicked} clicked" if clicked > -1 else “No image clicked”)

this will help you