How to pass variable from python to react/typescript frontend

[data.student]

Hi there,

Can someone help me how I can pass a variable from my python app to my typescript frontend code? I am trying to add a coordinate pointer/marker Tool to streamlit-drawable canvas component. But I want to scale the text depicted to be between 0 and 10, for example, instead of just the canvas dimensions in pixels. I have done this successfully by defining scaling factors for the x and y values of the pointer: scaleFactorX and scaleFactorY as you can see below. My coordinates.ts file starts like this:

import { fabric } from “fabric”
import FabricTool, { ConfigureCanvasProps } from “./fabrictool”

class CoordinateTool extends FabricTool {
isMouseDown: boolean = false
strokeColor: string = “#ffffff”
strokeWidth: number = 10
horizontalLine: fabric.Line | null = null
verticalLine: fabric.Line | null = null
coordinateCircle: fabric.Circle | null = null
coordinatesText: fabric.Text | null = null
tempHorizontalLine: fabric.Line | null = null
tempVerticalLine: fabric.Line | null = null
tempCoordinateCircle: fabric.Circle | null = null
tempCoordinatesText: fabric.Text | null = null
scaleFactorX: number = 0.1 //defined new
scaleFactorY: number = 0.2 //defined new

then I use the last two scaling numbers in one of my functions I created as follows:

this.coordinatesText = new fabric.Text(
(${(x * this.scaleFactorX).toFixed(1)}, ${( y * this.scaleFactorY ).toFixed(1)}),
{
left: x + 10,
top: y + 10,
fill: strokeColor,
fontSize: 14,
selectable: false,
evented: false,
}
)

This changes the pointers coordinates from canvas dimensions in pixels scaling by proportionality constant of .1 for x and .2 for y. Now I want this .1 and .2 to be defined in my python code instead of my .ts file. How do I do that? I experimented with forcing this two values in my app.py code and init.py files as follows but it doesn’t work:

Define scale factors

scaleFactorX = .1
scaleFactorY = .1

Create a canvas component

canvas_result = st_canvas(
fill_color=“rgba(255, 165, 0, 0.3)”, # Fixed fill color with some opacity
stroke_width=stroke_width,
stroke_color=stroke_color,
background_color=bg_color,
background_image=Image.open(bg_image) if bg_image else None,
update_streamlit=realtime_update,
height=500,
width=500,
drawing_mode=drawing_mode,
point_display_radius=point_display_radius if drawing_mode == ‘point’ else 0,
scaleFactorX=scaleFactorX,
scaleFactorY=scaleFactorY,
key=“canvas”,

)

[Goyo]

How do you run that TS?

[data.student]

streamlit run app.py ; here is the repo if you want to clone:

GitHub - abelembaye/_mycomp6_sdcanvas_dev

[Goyo]

You are trying to modify the component Streamlit - Drawable Canvas? I cannot help with that, but the comunication between backend and frontend is explained in the docs and it is already done in the code. It should be no different than passing the stroke width, for example.

[data.student]

Yes, that is what I am thinking and tried to follow all the files where strokeWidth is and add the scaleFactorX and scaleFactorY to be added to that but it is not working. I will continue to keep trying now that I know that is the right line of thought. Thanks!