Markup vs markup_card

can i load a result of a matplotlib image into a markup or only is available on a markup_card?

Hi @rmfjd78,

It is possible. It is basically the same component, the only difference is that markup is used in forms whereas markup_card is a separate card.

from h2o_wave import site, ui
import io
import base64
import numpy as np
import matplotlib.pyplot as plt

np.random.seed(19680801)

n = 25
plt.figure(figsize=(3, 3))
plt.scatter(
    np.random.rand(n), np.random.rand(n),
    s=(30 * np.random.rand(n)) ** 2,
    c=np.random.rand(n),
    alpha=0.5,
)

buf = io.BytesIO()
plt.savefig(buf, format='png')
buf.seek(0)
image = base64.b64encode(buf.read()).decode('utf-8')

page = site['/demo']
page['example'] = ui.form_card(
    box='1 1 3 5',
    title='In form card',
    items=[
        ui.markup(f'<img src="data:image/png;base64, {image}" alt="matplotlib image in markup card"/>')
    ]
)
page.save()

Further reading: How to display Base64 images in HTML? - Stack Overflow

You can run this wave script simply with:

python your_file.py

and see at http://localhost:10101/demo

Further reading: Wave Scripts | H2O Wave