dynamic_number.py

"""The DynamicNumber is an example of a HTML Extension for Panel"""
import panel as pn
import param


class DynamicNumber(pn.pane.HTML):
    """Extension Implementation"""

    value = param.Integer(default=30, bounds=(0, 100))

    # In order to not be selected by the `pn.panel` selection process
    # Cf. https://github.com/holoviz/panel/issues/1494#issuecomment-663219654
    priority = 0
    # The _rename dict is used to keep track of Panel parameters to sync to Bokeh properties.
    # As value is not a property on the Bokeh model we should set it to None
    _rename = {
        **pn.pane.HTML._rename,
        "value": None,
    }

    def __init__(self, **params):
        super().__init__(**params)
        self._update_object_from_parameters()

    # Don't name the function
    # `_update`, `_update_object`, `_update_model` or `_update_pane`
    # as this will override a function in the parent class.
    @param.depends("value", watch=True)
    def _update_object_from_parameters(self, *events):
        self.object = self._get_html(self.value)

    def _get_html(self, value):
        """Main functionality of Extension"""
        font_size = value
        alpha = 1 - value / 100
        green = int(value * 255 / 100)
        return f"""
    <div style="font-size: {font_size}px;color: rgba(0,{green},0,{alpha}">{value}</div>
    """


if __name__.startswith("bokeh"):
    # Create app
    extension = DynamicNumber(width=125, height=125)
    app = pn.Column(extension, extension.param.value, width=150,)
    # Serve the app
    app.servable()