как переместить встроенный браузер cefpython в анализатор wxPython

#python #wxpython #cefpython

Вопрос:

Я пытаюсь добавить кнопку и переместить панель браузера вправо. я хочу, чтобы кнопка была слева, но кнопка находится поверх карты, которую я отобразил. вот код 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)
 

скриншот

введите описание изображения здесь

Комментарии:

1. может быть, показать минимальный рабочий код, чтобы мы могли его запустить, увидеть проблемы и протестировать идеи.

2. Вы делаете кнопку child self.browser_panel «а», а не » я » (каким бы оно ни было), так что, вероятно, это и есть источник вашего разочарования. Крошечные, частичные фрагменты кода редко предоставляют достаточно информации, чтобы дать окончательный ответ. Задавая вопрос, чем больше информации вы можете предоставить, тем лучше, в разумных пределах. 😉

3. я вставил ссылку с полным кодом pastie.org/p/4y8FtkR1z2mbZO3WHuSt5L

Ответ №1:

Вот пример, используя метод, упомянутый в моем комментарии, т. е. Not делая кнопку дочерним элементом панели browser_panel.
Предостережения: Я не загружал cef python или gmplot на свою машину, так что это чистый 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, "amp;Quit")
        menubar = wx.MenuBar()
        menubar.Append(filemenu, "amp;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()
 

введите описание изображения здесь

Интерактивная карта предоставляется folium библиотекой
использование (если вы хотите нанести на карту другую область):

 >>> 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')
 

Код для maparea.html этого:

 <!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/leaflet@1.5.1/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/leaflet@1.5.1/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"u003eOpenStreetMapu003c/au003e, under u003ca href="http://www.openstreetmap.org/copyright"u003eODbLu003c/au003e.", "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>