<< return to Vizycam.com

How to Add Text to Webpage

I would like to add some data to either the Vizy Webpage or the video overlay. For example, in the video: a small timer that calculates the frame rate, on the webpage “Hello world!”. However, I cannot figure out how to do it and nothing in the documentation or programming notes in the code is giving me an idea of how to do it.

Please assist,

Hi Mark,
If you want to add to the page content, you can add to the layout. All Vizy programs have a section where they set the layout:

kapp.layout = html.Div([video, ...etc...]

You can add ‘hello world’ to the page pretty simply:

kapp.layout = html.Div(["hello world", video, ...etc...]

Vizy is based on Dash – there is some information on layouts here.

Adding overlay text on the video is a but more involved, but here are some simple things you can do:

When instantiating Kvideo, set overlay to True:

video = kritter.Kvideo(overlay=True)

then at anytime (probably within a rendering thread) you can call draw_text and push the overlay changes to the client’s browser:

video.draw_text(100, 100, "hello world") # text at x=100, y=100 video pixels

Take a look at the video example (/home/pi/vizy/examples/video) – it’s a good example to modify.

Also, in case you haven’t seen, this tutorial has some useful information.


I think the above is supposed to be:

video.overlay.draw_text(100, 100, “Hello World”)

Below produces an error:
video.draw_text(100, 100, "hello world)

I made the edit – thanks for the heads up! :slight_smile:

1 Like