Search code examples
gtkglade

Embeded map/image in gtk glade

I have a gnome-builder project building GUI by Glade. Now I have an embedded map url like this:

<iframe src="https://api.ncovtrack.com/covid/vietnam/provinces?metric=cases&showTable=false&showMap=true" title="ncovtrack - COVID & Vaccination Statistics" height='500' width='928'></iframe>

I want to find sth like (img src="") in HTML but I can't find the same thing in Glade? Could anyone help me pls?

Solution

  • You can use WebKitGTK. You can add WebKitWebView in glade. Below is an example in python.

    demo.py

    import gi

gi.require_version("Gtk", "3.0")
gi.require_version("WebKit2", "4.0")
from gi.repository import Gtk, WebKit2, GObject

builder = Gtk.Builder()
GObject.type_ensure(WebKit2.WebView)
builder.add_from_file("web.glade")

webview = builder.get_object("webview")
uri = "https://api.ncovtrack.com/covid/vietnam/provinces?metric=cases&showTable=false&showMap=true"
webview.load_uri(uri)

window = builder.get_object("window1")
window.show_all()

window.connect("destroy", Gtk.main_quit)

Gtk.main()

    web.glade

    <?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
  <requires lib="gtk+" version="3.24"/>
  <requires lib="webkit2gtk" version="2.28"/>
  <object class="GtkWindow" id="window1">
    <property name="can-focus">False</property>
    <property name="default-width">600</property>
    <property name="default-height">900</property>
    <child>
      <object class="WebKitWebView" type-func="webkit_web_view_get_type" id="webview">
        <property name="visible">True</property>
        <property name="can-focus">True</property>
        <child>
          <placeholder/>
        </child>
      </object>
    </child>
  </object>
</interface>

    Screenshot

    screenshot