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/standard11/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