46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
|
# Tutorial: How to Add a Diagram to Your Viewlib App
|
||
|
|
|
||
|
|
## Prerequisites
|
||
|
|
|
||
|
|
- You should be familiar with Python.
|
||
|
|
- You are able to run the sample as per the ../README.md#installation.
|
||
|
|
|
||
|
|
## Introduction
|
||
|
|
|
||
|
|
Before adding a diagram, let's add something simpler: a Boolean indicator that shows whether the geyser is on or off.
|
||
|
|
|
||
|
|
## Add a Boolean Indicator
|
||
|
|
|
||
|
|
```diff
|
||
|
|
--- a/sample.py
|
||
|
|
+++ b/sample.py
|
||
|
|
@@ -21,6 +21,15 @@ state_as_text = panel.bind(state_to_text, w42_state)
|
||
|
|
|
||
|
|
state_pane = panel.pane.Markdown(state_as_text, sizing_mode='stretch_width')
|
||
|
|
|
||
|
|
+def get_geyser_state(state: dict[str, Any]) -> bool:
|
||
|
|
+ if not state:
|
||
|
|
+ return False
|
||
|
|
+ return state.get("is_geyser_on", False)
|
||
|
|
+
|
||
|
|
+geyser_state = panel.rx(get_geyser_state)(w42_state)
|
||
|
|
+
|
||
|
|
+indicator = panel.indicators.BooleanStatus(value=geyser_state, name="W42 Connected", color="success")
|
||
|
|
+
|
||
|
|
sidebar_content = """
|
||
|
|
This example shows how to build a front end for a Watt42 system: Watt42 API
|
||
|
|
manages the state of the system, this app visualizes it.
|
||
|
|
@@ -34,6 +43,7 @@ _ = panel.template.FastListTemplate(
|
||
|
|
title="Sample W42 App",
|
||
|
|
sidebar=[panel.pane.Markdown(sidebar_content, sizing_mode='stretch_width')],
|
||
|
|
main=[
|
||
|
|
+ indicator,
|
||
|
|
state_pane,
|
||
|
|
w42_state,
|
||
|
|
],
|
||
|
|
```
|
||
|
|
|
||
|
|
## Add a Diagram
|
||
|
|
|
||
|
|
(TODO)
|