I am trying to embed input fields in an image (drawing) and use them for some calculations.
I tried with this code but it doesn’t work.
I have very little knowledge of python and streamlit.
Does anyone have any idea if it can solve with python and streamlit.
Thanks in advance for your feedback.
import streamlit as st
Custom CSS to style the image and position the input boxes
st.markdown(“”"
.container {
position: relative;
width: 500px; /* Set the width of the container */
}
.image {
width: 100%;
height: auto;
}
.input-field-1, .input-field-2 {
position: absolute;
width: 100px;
}
.input-field-1 {
top: 30%; /* Adjust this to position the input field vertically */
left: 30%; /* Adjust this to position the input field horizontally */
}
.input-field-2 {
top: 50%; /* Adjust this to position the input field vertically */
left: 50%; /* Adjust this to position the input field horizontally */
}
.input-field button {
position: absolute;
top: 70%;
left: 40%;
}
“”", unsafe_allow_html=True)
Create a container with the image and input fields
st.markdown(“”"
""", unsafe_allow_html=True)
Create input fields using Streamlit’s native components
field1 = st.number_input(‘First Number:’, key=‘field1_input’, label_visibility=“collapsed”)
field2 = st.number_input(‘Second Number:’, key=‘field2_input’, label_visibility=“collapsed”)
Perform a calculation with the input values
if st.button(“Calculate”):
result = field1 + field2
st.write(f"The result is: {result}")
As described, you’d need to build a custom component to build the unique frontend UI. This would require more than just Python code.
However, you can achieve something similar-ish:
You can use selections on charts to display an image with specific, selectable points. You can then conditionally display a widget based on point selection to collect information from the user.
Can you describe your use case in more detail?
It is an application in which a technical drawing with approx. 20 dimensions and tolerances. A tolerance calculation is carried out according to the changing dimensions and tolerances.
At the moment it is done in Excel. But in Excel, dimensions and tolerances have to be entered in a table and then only displayed on the drawing. The end user cannot enter or change them directly on the drawing.
The problem is that the end user must always know which information he enters in the table belongs to which drawing dimension. Even though in-put fields in the table and on the drawing have IDs or names, errors are always made because the end user has difficulty with the many entries he has to make.
I am therefore looking for a way to make these entries directly with an In-put field directly on the drawing/image without having to go via a table.
The input fields only need to be placed near the dimensions and tolerances. The drawing or image should only serve as a background.
Thanks that you serve time for my question
