How to combine a image with widgets?

Widgets
, ,
1

Hello,
I have a question for which I cannot find any practical solution. I would like to add some sliders beneath some of the elements of this block diagram. For example I would like to add a slider, which controls N[k] directly under the variable in the image.

To my understanding it is possible to do this with a GridBox from ipywidgets. I simply dont understand how to put an image “behind” the sliders, or the sliders on top of an image. Any help is much appreciated.

Blockschaltbild Kalman Filter-1
Blockschaltbild Kalman Filter-11183×249 11.2 KB

2

You can use Widget._dom_classes and an extra HTML widget with a <style> tag to achieve something like this:

image
image1665×514 89.6 KB

I’ve used “boring” boxes: you can probably make this happen with the grid-based one as well, but once trying to do pixel-level matching, it can be easier to just use left and top to do exactly what you want.

It’s also possible to embed the image directly with b64encode and a data uri.

import ipywidgets as W

style = W.HTML("""
<style>
.my-sliders{
    background-image: url("https://global.discourse-cdn.com/flex031/uploads/jupyter/original/2X/c/ca2f38f5c6b880ef93e614a01feda759c38a6ef7.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
    width: 800px;
}
.my-sliders .widget-slider { position: absolute; }
.my-sliders > :nth-child(1) { left: 0px; top: 165px; }
.my-sliders > :nth-child(2) { left: 390px; top: 165px; }
.my-sliders > :nth-child(3) { left: 200px; top: 0; }
</style>
""")

box = W.VBox([
    W.FloatSlider(),
    W.FloatSlider(),
    W.FloatSlider(),
], _dom_classes=["my-sliders"])
display(style, box)
4 Likes
3

Hey bollwyvl,
thank you very much for your help. I just tried your solution and it works perfectly.

2 Likes
4

Thanks for the solution. it was working perfect and also working perferct if I changed the image from local directory before I reinstalled jupyter-notebook.
My parse is like below.
“background-image: url(“images/test.png”);”

But it doesnt work anymore after I reinstall notebook. I tried search the solution but none of them is working.
Is there any path problem?? it is related CSS path and HTML path?

5

Two approaches that might work:

  • use the jupyter-specific files/ prefix:

    "background-image: url("files/images/test.png");"

  • use a portable base64-encoded data URI

    "background-image: url("data:image/png;base64,{b64_bytestring}");"

    Where:

    import base64
from pathlib import path
raw_bytes = Path("images/test.png").read_bytes()
b64_bytestring = base64.b64encode(raw_bytes).decode("utf-8")
1 Like
6

Thanks for the replay
I tried both approached but none of them are working.
Only the first parse which called image from https.

Belows are the approaches I tried…
Any advise to solve the problem??

background-image: url("https://global.discourse-cdn.com/flex031/uploads/jupyter/original/2X/c/ca2f38f5c6b880ef93e614a01feda759c38a6ef7.png");
background-image: url("files/images/test.png");
background-image: url("data:image/png;base64,{b64_bytestring}");
7

The data URI thing needs the long base64 string to be injected by something, e.g. an f-string, jinja, etc. Looking at the browser network tab to see what is requested will also help.

1 Like