how to move cefpython embedded browser inside a wxPython sizer

Question

how to move cefpython embedded browser inside a wxPython sizer

217 Views Asked by Eliss Glasper At 18 April 2025 at 09:55

Im trying to add a button and move the browser panel to the right. i want the button to the left but the button is ontop of the map that i have displayed. here is the code http://pastie.org/p/4y8FtkR1z2mbZO3WHuSt5L

    self.browser_panel = wx.Panel(self, style=wx.WANTS_CHARS)
    self.browser_panel.Bind(wx.EVT_SET_FOCUS, self.OnSetFocus)
    self.browser_panel.Bind(wx.EVT_SIZE, self.OnSize)

    self.sizer1 = wx.BoxSizer(wx.VERTICAL)
    self.sizer1.Add(self.browser_panel,1,wx.ALIGN_RIGHT)
    
    self.sizer2 = wx.BoxSizer(wx.HORIZONTAL)
    self.sizer1.Add(self.sizer2)
    self.sizer2.Add(wx.Button(self.browser_panel,wx.ID_ANY,'sheesh'),0,wx.ALIGN_CENTER)

SCREENSHOT

Original Q&A

There are 1 best solutions below

**Rolf of Saxony** · Answer 1

Here is an example, using the method mentioned in my comment i.e. Not making the button a child of the browser_panel.
Caveats: I didn't load cef python or gmplot onto my machine, so this is pure wxPython.

import wx
import wx.html2

class MyBrowser(wx.Frame):
    def __init__(self, *args, **kwds):
        wx.Frame.__init__(self, *args, **kwds)
        self.SetTitle("Zoom Christchurch NZ")

        filemenu = wx.Menu()
        filemenu.Append(1, "Some option")
        filemenu.Append(2, "Another option")
        filemenu.Append(3, "&Quit")
        menubar = wx.MenuBar()
        menubar.Append(filemenu, "&File")
        self.SetMenuBar(menubar)
        
        sizer = wx.BoxSizer(wx.HORIZONTAL)
        self.browser = wx.html2.WebView.New(self)
        Url = wx.FileSystem.FileNameToURL('maparea.html')
        self.browser.LoadURL(Url)
        self.sheesh = wx.Button(self,wx.ID_ANY,'sheesh')

        sizer.Add(self.sheesh, 0, wx.ALIGN_TOP)
        sizer.Add(self.browser, 1, wx.EXPAND, 10)

        wx.EvtHandler.Bind(self, wx.html2.EVT_WEBVIEW_ERROR, self.BrowserError)
        filemenu.Bind(wx.EVT_MENU, self.OnQuit, id=3)  # Window closed using the Menu Quit option
        self.sheesh.Bind(wx.EVT_BUTTON, self.OnButton)
        self.Bind(wx.EVT_CLOSE, self.OnQuit)  # Window closed using the Title bar X

        self.SetSizer(sizer)
        self.SetSize((640, 360))

    def BrowserError(self, event):
        print("Error loading map")

    def OnButton(self, event):
        print("Button Pressed")

    def OnQuit(self, event):
        self.Destroy()
        
if __name__ == '__main__':
    app = wx.App()
    frame = MyBrowser(None)
    frame.Show()
    app.MainLoop()

The interactive map is provide by the folium library
useage (should you wish to map another area):

>>> import folium
>>> 
>>> fmap = folium.Map([-43.5321,172.6362], zoom_start=12)
>>> folium.Marker([-43.5321,172.6362], popup='Marker1').add_to(fmap)
<folium.map.Marker object at 0x7f337bfbc0f0>
>>> fmap.save('maparea.html')

The code for maparea.html is:

<!DOCTYPE html>
<head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
            </style>
        
</head>
<body>    
    
            <div class="folium-map" id="map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af" ></div>
        
</body>
<script>    
    
            var map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af = L.map(
                "map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af",
                {
                    center: [-43.5321, 172.6362],
                    crs: L.CRS.EPSG3857,
                    zoom: 12,
                    zoomControl: true,
                    preferCanvas: false,
                }
            );

            

        
    
            var tile_layer_d64f9485d3f04f208884b03df0df3148 = L.tileLayer(
                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af);
        
    
            var marker_380e017eee4e45a3a998b0def6b43f67 = L.marker(
                [-43.5321, 172.6362],
                {}
            ).addTo(map_fd7a8d5e0d6c4ca0a89118cb6ca9f1af);
        
    
        var popup_c8d785b72544491bbd41c414040772e6 = L.popup({"maxWidth": "100%"});

        
            var html_d8eec22dfe3d4f8fa665a60dfa5dcc82 = $('<div id="html_d8eec22dfe3d4f8fa665a60dfa5dcc82" style="width: 100.0%; height: 100.0%;">Marker1</div>')[0];
            popup_c8d785b72544491bbd41c414040772e6.setContent(html_d8eec22dfe3d4f8fa665a60dfa5dcc82);
        

        marker_380e017eee4e45a3a998b0def6b43f67.bindPopup(popup_c8d785b72544491bbd41c414040772e6)
        ;

        
    
</script>

how to move cefpython embedded browser inside a wxPython sizer

There are 1 best solutions below

Related Questions in PYTHON

Related Questions in WXPYTHON

Related Questions in CEFPYTHON

Trending Questions

Popular # Hahtags

Popular Questions