Can we add an indicator to pn.pane.HTML()?

Panel
1

Hi folks,
I am running this code to be able to add an indicator to an HTML.

import panel as pn
pn.extension()

# Create a Dial widget
dial = pn.widgets.Dial(name='Dial', value=50)

# Define the HTML code with the embedded Dial widget
html_code = """
<div align = "center", style="padding: 2px; maring: 5px; border: 1px solid green;
        border-radius: 20px 20px 20px 20px; background: whitesmoke">
    <h1>My Panel App</h1>
    <p>This is some text.</p>
    {}
</div>
""".format(dial)

# Create a Pane object with the HTML code and the embedded Dial widget
pane = pn.pane.HTML(html_code)

# Display the Pane object
pane.show()

But, the indicator does not show up and the output is a text! Please advise. thanks.
This is the output:

2

You cannot get an the Dial inserted into the html like that.

One way to layout html and the Dial is to use a Column.

import panel as pn
pn.extension()

dial = pn.widgets.Dial(name='Dial', value=50)

html_code = """
    <h1>My Panel App</h1>
    <p>This is some text.</p>
"""

pane = pn.Column(
    pn.pane.HTML(html_code), dial, styles={
        "border": "1px solid green", "border-radius": "20px 20px 20px 20px", "background": "whitesmoke"
    }
)

pane.servable()

image
image398×516 20.5 KB

1 Like
3

If you are want/ need to layout something using html, then you should use Panels ReactiveHTML.

import panel as pn
import param
from panel.reactive import ReactiveHTML

pn.extension()

class CustomComponent(ReactiveHTML):
    object = param.Parameter()

    _template = """
    <div id="pn-container" align="center" 
        style="padding:2px;margin: 5px;border:1px solid green;
        border-radius: 20px 20px 20px 20px; background: whitesmoke;height:100%;width:100%">
        <h1>My Panel App</h1>
        <p>This is some text.</p>
        <div id="pn-object">${object}</div>    
    </div>
"""

dial = pn.widgets.Dial(name='Dial', value=50)
component = CustomComponent(object=dial, width=500)
component.servable()

image

2 Likes
4

Thanks a lot @Marc,
very helpful.

One more question, How we can send 2or3 inputs (indicators) to the class?
Here is only one input object: CustomComponent(object=dial, width=500), I mean how to send several Dials/indicators?

1 Like
5

You can wrap them in a layout like a Column, Row or some grid. And then provide the layout to object.

There is also the possibility to turn object in to a list of objects. Or you might have multiple parameters object1, object2 and object3 that you can place in specific places in your template.

What is your specific use case?

6

(1) I wish to do it as you recommended (the tail of this message is a code that I faced an error), but I failed to do it. If you are able to leave a few examples of your recommendations (using a wrapper, or list of objects, or multiple parameters), I can refer our students to your solutions for more information. I believe it would be very helpful to Panel learners who wish to work with HTML alongside the Panel.

(2) Are id="pn-container" and id="pn-object" reserved words in the HTML? Because, when I add a new div tag with the same ID (id="pn-object"), it gives an error that I cannot use the same ID.

(3) I used the list of objects and the code gives me an error as I expected:

import panel as pn
import pandas as pd
pn.extension()

from panel.reactive import ReactiveHTML
import param

class CustomComponent(ReactiveHTML):
    object = param.Parameter()

    _template = """
    <div id="pn-container" align="center" 
        style="padding:2px;margin: 5px;border:1px solid green;
        border-radius: 20px 20px 20px 20px; background: whitesmoke;height:100%;width:100%">
        <h1>My Panel App</h1>
        <p>This is some text.</p>
        <div id="pn-object-1">${object[0]}</div>  
        <div id="pn-object-2">${object[1]}</div>
    </div>
"""

dial1 = pn.widgets.Dial(name='Dial_1', value = 40)
dial2 = pn.widgets.Dial(name='Dial_2', value = 71)

component = CustomComponent(object = [dial1, dial2], width=500)
component.servable()

The error is:

ValueError: CustomComponent HTML template references unknown parameter ‘object[0]’, similar parameters include [‘object’].

7

You can give it a custom ID besides pn-object like pn-dial-1 pn-dial-2 etc