¿Cómo hacer que una ventana sin marco sea redimensionable y se pueda ajustar en Pywebview? También se requieren los archivos fuente (src).

Estoy haciendo una aplicación independiente de Pywebview Desktop y hay 2 cosas en las que no puedo encontrar mucha información. Principalmente cómo hacer que vea archivos de origen locales y cómo implementar la función de ajuste de ventana de Windows. Con eso me refiero a la tecla de Windows + dirección para ajustarse a ese lado de la pantalla. Encontré una opción JS potencial para cambiar el tamaño, pero aún no la he probado.

https://stackoverflow.com/questions/57067929/how-to-make-frameless-window-draggable-in-pywebview

Esta publicación me dio la respuesta para hacerlo arrastrable.

Todos los ejemplos que puedo encontrar usan cosas como imágenes que deben hacerse con un enlace web y eso funciona, pero el punto de este proyecto en particular es tenerlo autocontenido, ¿hay alguna manera de cargar archivos locales HTML? El HTML se carga a través de window.load_html() y en el HTML he intentado todas las rutas de archivo que se me ocurren, pero hasta ahora no funciona nada. Incluso usando la ruta completa del sistema. A continuación hay un ejemplo simple, solo reemplace “dots.svg” con cualquier imagen local que tenga. Si el HTML se carga por su cuenta, funciona perfectamente. Si se carga a través de Pywebview, no hay imagen. Todavía soy nuevo en JS, pero ¿tal vez hay una manera de usar JS para cargar la imagen?

“`
import webview

html = “””

Esto es HTML cargado dinámicamente.

la imagen debería estar aquí

“””

def load_html(window):
window.load_html(html)

if name == ‘main’:
window = webview.create_window(‘Ejemplo de carga de HTML’, html=html)
webview.start(load_html, window)

davy.ai

June 5, 2023 at 5:57 am

Para cargar archivos locales en tu aplicación independiente pywebview, puedes usar el esquema file: seguido de la ruta al archivo. Por ejemplo, si tu archivo de imagen se encuentra en el mismo directorio que tu archivo HTML, puedes usar el siguiente código en tu HTML:

<img src="file:./dots.svg">

Para implementar la función de ajuste de ventanas de Windows, puedes usar JavaScript para manejar el evento clave y redimensionar la ventana en consecuencia. Aquí tienes un ejemplo de código para implementar las funciones de ajuste izquierdo y derecho:

document.addEventListener("keydown", function(e) {
    var windowWidth = window.outerWidth;
    var windowHeight = window.outerHeight;
    var aspectRatio = windowWidth / windowHeight;

    if (e.keyCode == 37) { // tecla de flecha izquierda
        window.resizeTo(window.screen.availWidth * 0.5, window.screen.availHeight);
        window.moveTo(0, 0);
    } else if (e.keyCode == 39) { // tecla de flecha derecha
        window.resizeTo(window.screen.availWidth / 2, window.screen.availHeight);
        window.moveTo(window.screen.availWidth / 2, 0);
    }
});

Este código escucha las teclas de flecha izquierda y derecha, y cuando se presionan, redimensiona la ventana a la mitad del ancho de la pantalla y la mueve hacia el lado izquierdo o derecho de la pantalla, respectivamente.

Ten en cuenta que por motivos de seguridad, los navegadores modernos pueden no permitir la carga de archivos locales desde una URL file: de forma predeterminada. Si este es el caso, puedes iniciar tu navegador con la bandera --allow-file-access-from-files para habilitar la carga de archivos locales.

Answer

davy.ai

June 5, 2023 at 5:57 am
Para cargar archivos locales en tu aplicación independiente pywebview, puedes usar el esquema file: seguido de la ruta al archivo. Por ejemplo, si tu archivo de imagen se encuentra en el mismo directorio que tu archivo HTML, puedes usar el siguiente código en tu HTML:
```
<img src="file:./dots.svg">
```
Para implementar la función de ajuste de ventanas de Windows, puedes usar JavaScript para manejar el evento clave y redimensionar la ventana en consecuencia. Aquí tienes un ejemplo de código para implementar las funciones de ajuste izquierdo y derecho:
```
document.addEventListener("keydown", function(e) {
    var windowWidth = window.outerWidth;
    var windowHeight = window.outerHeight;
    var aspectRatio = windowWidth / windowHeight;

    if (e.keyCode == 37) { // tecla de flecha izquierda
        window.resizeTo(window.screen.availWidth * 0.5, window.screen.availHeight);
        window.moveTo(0, 0);
    } else if (e.keyCode == 39) { // tecla de flecha derecha
        window.resizeTo(window.screen.availWidth / 2, window.screen.availHeight);
        window.moveTo(window.screen.availWidth / 2, 0);
    }
});
```
Este código escucha las teclas de flecha izquierda y derecha, y cuando se presionan, redimensiona la ventana a la mitad del ancho de la pantalla y la mueve hacia el lado izquierdo o derecho de la pantalla, respectivamente.

Ten en cuenta que por motivos de seguridad, los navegadores modernos pueden no permitir la carga de archivos locales desde una URL file: de forma predeterminada. Si este es el caso, puedes iniciar tu navegador con la bandera --allow-file-access-from-files para habilitar la carga de archivos locales.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo hacer que una ventana sin marco sea redimensionable y se pueda ajustar en Pywebview? También se requieren los archivos fuente (src).

Esto es HTML cargado dinámicamente.

Answer

davy.ai