Updating single card

Dash Python
1

Hello I have web app which is subscribing to MQTT server. And here is my issue. The problem is that i want to have many cards with different data in, but I am not able to update single card. It means that when I use my update function on the end of code, it will fill all cards with one same information.

Thank you for any advices.

import dash
from dash import html,dcc, Input, Output
import dash_bootstrap_components as dbc
import paho.mqtt.client as mqtt

global status
status = “none”

global baud
baud = “none”

##############################################################
mqttc = mqtt.Client()
mqttc.connect(“broker.hivemq.com”, 1883, 60)

def on_connect(client, userdata, flags, rc):
print("Connected with result code "+str(rc))
mqttc.subscribe(“stulastand-ccu-baud”)
mqttc.subscribe(“stulastand-ccu-baud”)
mqttc.subscribe(“random”)

def on_message(client, userdata, msg):
global status
global baud
global cpu

msg.payload = msg.payload.decode("utf-8")
if msg.topic == "stulastand-status":
    status = msg.payload 
elif msg.topic == "stulastand-ccu-baud":
    baud = msg.payload
elif msg.topic == "stulastand-cpu-percent1":
    cpu = msg.payload

mqttc.on_connect = on_connect
mqttc.on_message = on_message

mqttc.loop_start()

##############################################################
app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])

stulastand = dbc.Card(
dbc.CardBody(

    [
        html.H2("Stulastand"),
        html.Td(id= "temperature")

    ]
    
)

)

Bronwnstand = dbc.Card(
dbc.CardBody(

    [
        html.H2("Brownstand"),
        html.Td(id= "brownstand")

    ]
    
)

)

app.layout = dbc.Container(
html.Div(
children=[
dcc.Interval(id=‘update’, n_intervals=0, interval=1000*3),
html.H1(“JAC-OPI-Monitoring”),
html.Hr(),
dbc.Row([dbc.Col(stulastand, width=“auto”),dbc.Col(Bronwnstand, width=“auto”)])
]
)

)

@app.callback(
Output(‘temperature’, ‘children’),
Input(‘update’, ‘n_intervals’)
)

@app.callback(
Output(‘brownstand’, ‘children’),
Input(‘update’, ‘n_intervals’)
)

def update_temperature(timer):
return ("Status: " + str(status))

if name == “main”:
app.run_server(debug=True)

2

Hi @marteeen !

Welcome on the community Forum! :tada:

I don’t get what you’re trying to do exactly :thinking:
What’s in the variable status, can you give an example of a value it can take?

Then if you want to update the value of ‘temperature’ and ‘brownstand’ components, you can use the same callback with 2 outputs, here is the syntax:

@app.callback(
  Output(‘temperature’, ‘children’),
  Output(‘brownstand’, ‘children’),
  Input(‘update’, ‘n_intervals’)
)
def update_cards(timer):
  return f"Status: {str(status)}", f"Status: {str(status)}"

Here both html.Td will have the same text.
By the way, is there a particular reason you’re using Td?

1 Like