I am looking for creating widgets on a svg image in panel. I tried using Gridspec but it simply overrides the svg image (and does not overlap it). I want to create multiple widgets on 1 single svg image background. Is there a way to do that?
Using negative margin
probably
Apologies for late reply.
Thanks for the idea, the negative margin works to overlap widgets on svg image.
However, I still feel there might be a better way to do this. By better, I mean that widgets should be placed anywhere I want just by dragging. Or may be, some other way.
Once again, thanks for this idea.
One way to solve this is to use ReactiveHTML
.
import panel as pn
import param
pn.extension(sizing_mode="stretch_width", template="fast")
class SVGBackground(pn.reactive.ReactiveHTML):
object = param.Parameter()
svg = param.String()
attachment = param.Selector(default="inherit", objects=["fixed", "inherit", "initial", "local", "revert", "scroll", "unset"])
position = param.Selector(default="center center", objects=[
"bottom",
"center center",
"inherit",
"initial",
"left top",
"left center",
"left bottom",
"revert",
"right",
"top",
"unset",
])
repeat = param.Selector(default="no-repeat", objects=["no-repeat", "inherit", "initial", "repeat", "repeat-x", "repeat-y", "revert", "round", "space", "unset"])
size = param.Selector(default="contain", objects=["auto", "contain", "cover", "initial", "revert", "unset"])
_template = """
<div id="pn-component" style="height:100%;width:100%">
<div id="background" style="background-image: url(${svg});background-repeat: ${repeat};background-attachment: ${attachment};background-position: ${position};background-size: ${size};height:100%;width:100%">
${object}
</div>
</div>
"""
button = pn.widgets.Button(name="Click me!", button_type="primary")
layout=pn.Row(pn.Spacer(), pn.Column(pn.Spacer(height=300), *[button.clone() for i in range(10)]), pn.Spacer())
svg_background = SVGBackground(object=layout, svg="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg", height=1000).servable()
pn.Param(svg_background, parameters=["repeat", "attachment", "position", "size"]).servable(area="sidebar")