Thank you very much, it works fine
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
@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â)
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
Hi @players_hub. You say that you use st-click-detector but there is only st-clickable-images in your code.
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
Hi @vivien
The click-detector
works well
How would I introduce a flex-wrap along with the click-detector
?
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=ÂŽâŠÂŽ>
How can I get coordinate information of clicked place on image in streamlit?
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
Hi. Iâm not sure what you mean. You can put the image wherever itâs accessible by the Python script
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
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
@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