search

rawpython / remi

Python REMote Interface library. Platform independent. In about 100 Kbytes, perfect for your diet.
Apache License 2.0
3.51k stars 401 forks source link

Offline Plotly HTML Integration #528

Closed aruraghuvanshi closed 10 months ago

aruraghuvanshi commented 11 months ago

I have an offline plotly graph exported as an html file. While I am able to embed some external websites into my UI display containers, I am unable to display these exported plotly htmls which are currently saved to my disk.

I did go through an example from this forum by Saewoonam but it didn't help my cause. Is there a way I can display such html files using Remi? So far I've been following this for display of external links:

 htmlpath = "https://www.meteo.it/"
main_container = tk.VBox(width=300, height=200, style={'margin': '0px auto'})

frame = tk.Widget(_type='iframe', width=290, height=200, margin='10px')
frame.attributes['src'] = htmlpath
frame.attributes['width'] = f'{H}%'
frame.attributes['height'] = f'{W}%'
frame.style['border'] = '1px solid black'

main_container.append(frame)

But replacing the htmlpath to my local plotly.html, it gives me an aw snap on the UI. Help would be appreciated.

aruraghuvanshi commented 10 months ago

I found and resolved it. Here's the solution who might need it.

Use the following to create your offline plots using Plotly.offline. Keep in mind the output_type should be 'div'.

import plotly.offline as pyo
div = pyo.plot(fig, auto_open=False, include_plotlyjs=False, output_type='div')

Then Build the graph using the follwing template:

html_string = '''
               <html>
                   <head>
                     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
                     <style id="plotly.js-style-global"></style>
                     <style id="plotly.js-style-modebar-1006ab"></style>
                   </head>
                   <body>
                     ''' + div + '''
                   </body>
               </html>'''

        with open(f'plotly-plot.html', 'w') as f:
            f.write(html_string)

In your script where you're building the UI, bring the created graphs html file and load it with load_resource

import remi.gui as gui

htmlcontent = 'plotly-plot.html'

mc = gui.VBox(width=300, height=200, style={'margin': '0px auto'})
res = gui.load_resource(htmlcontent)

frame= gui.Widget(_type='iframe', margin='0px')
frame.attributes['src'] = res
frame.attributes['width'] = f'100%'
frame.attributes['height'] = f'100%'
frame.style['border'] = '1px solid black'

mc.add_child('frame', btn)

This will load the interactive plotly plot in your VBox container. Play around with height, width and margin as per your UI.