Frame_card HTML Content

Using Wave
#1

I’m trying to use a frame_card, to create a dynamic header with a text and an icon. But the text appears and the icon doesn’t appear. I have a folder in the project named Static with a subfolder named Images where the png file is located

My code is:

import os

from h2o_wave import app, Q, ui, main

example_dir = os.path.dirname(os.path.realpath(file))
_local_path = ‘c:\temp\teste\’
_app_host = ‘127.0.0.1’
_app_port = ‘10102’

HTMLheader = ‘’’



Utopia 2.0


‘’’

async def showpage(q: Q):
q.page[‘meta’] = ui.meta_card(box=’’, layouts=[
ui.layout(
breakpoint=‘m’,
zones=[
ui.zone(‘header’),
]
)
])

q.page['header'] = ui.frame_card(
    box='header',
	title='',
    content=HTMLheader,
)

await q.page.save()

@app(’/UTopIA20’)
async def serve(q: Q):
if not q.client.initialized:
q.client.initialized = True
await showpage(q)

#route = q.args['#']
#if not route:
#	route = 'header'

#await show_example(q)

print(’----------------------------------------’)
print(’ Welcome to UTopIA20’)
print(’’)
print(’ Go to http://localhost:10101/UTopIA20’)
print(’----------------------------------------’)

#2

I don’t see any reference to an icon in your HTMLheader. As of now, we do not support custom images in header_card, only icons from https://uifabricicons.azurewebsites.net/, so you need to wait until we implement this or pick some icon from the mentioned list.

One temporary workaround could be to upload the image yourself via q.side.upload and then use image_path in your source

image_path, = await q.site.upload([image_filename])

Full example:

from h2o_wave import Q, ui, main, app, cypress, Cypress


@app('/demo')
async def serve(q: Q):
    if not q.app.initialized:
        image_path, = await q.site.upload(['img.jpg']) # Image is relative to folder from where you run your app.
        q.app.image_path = image_path
        q.app.initialized = True

    q.page['header'] = ui.frame_card(box='1 1 8 8', title='', content=f'<img src="{q.app.image_path}" />')
    await q.page.save()

This is however not recommended. If you still want to go down this road though, I suggest using markup_card (suited for rendering HTML) instead of frame_card (suited for embedding other sites).

#3

I
I’ve used the markup_card as you sugested and the image is not apearingm what am i doing wrong?.
The project structure is this:
UTopIA2.0
|
–Static
| |
| --Images
| Logo.png
–Venv
Main.py

And My code is this:
import os

from h2o_wave import app, Q, ui, main

example_dir = os.path.dirname(os.path.realpath(file))
_local_path = ‘c:\temp\teste\’
_app_host = ‘127.0.0.1’
_app_port = ‘10102’

HTMLheader = 

<header class="header">
					<div id="logo"><img src={q.app.image_path} alt="">
					</div>
					<h3 style="background-color:#E1263A;color:#ffffff;margin:0; padding-top: 1rem; margin-bottom: 1rem; font-size: 2rem; border:none; text-align: center;"><a>Utopia 2.0</a></h3>
				</header></html>

async def showpage(q: Q):
q.page[‘meta’] = ui.meta_card(box=’’, layouts=[
ui.layout(
breakpoint=‘m’,
zones=[
ui.zone(‘header’, size=‘10px’),
]
)
])

q.page['header'] = ui.markup_card(
    box='header',
	title=q.app.image_path,
    content=HTMLheader,
)

await q.page.save()

@app(’/UTopIA20’)
async def serve(q: Q):
if not q.client.initialized:
image_path, = await q.site.upload([’.\Static\Images\Logo.png’])
q.app.image_path = image_path
q.client.initialized = True
await showpage(q)

#route = q.args['#']
#if not route:
#	route = 'header'

#await show_example(q)

print(’----------------------------------------’)
print(’ Welcome to UTopIA20’)
print(’’)
print(’ Go to http://localhost:10101/UTopIA20’)
print(’----------------------------------------’)

#4

Hi
Forget my question i’ve found my problem, thank you for your help