-
Notifications
You must be signed in to change notification settings - Fork 0
Kivy Interfaz Grid
Con este ejemplo vamos a crear una interfaz que consta de 3 filas:
-
Primera fila: Un espacio grande donde se mostrará un vídeo en streaming de una webcam.
-
Segunda fila: Una botonera de 3 x 3 que usaremos para mover un robot mediante eventos on_press (click).
-
Tercera fila: Una barra de estado donde publicaremos los eventos acontecidos.
Empecemos por la parte gráfica, buttonsgrid.kv.
Hemos agregado nuevos elementos para cada fila. Kivy tiene una particularidad y es que solamente podemos tener un layout principal. Para simular la vista tal cual la queremos ponemos un layout principal de tipo BoxLayout y posición horizontal al que agregamos el resto de layouts. Por poner un ejemplo web, sería como el sistema de nesting grid de bootstrap que consiste en un contenedor al que le agregamos todas nuestras filas.
Verás una propiedad que se repite a lo largo de los diferentes layouts es: size_hint, una lista. El primer parámetro es el ancho mientras que el segundo es el alto. Si vemos un 1 indica el 100%, 0 el 0% y None que asuma el valor por defecto.
Nuestro layout principal es ContainerBox. En VideoGrid tendremos nuestro vídeo en streaming directo, sin controles. A este elemento kivy lo llama Video y le enlazamos un evento para saber cuando se empieza a reproducir. Si quisiéramos controles podríamos usar VideoPlayer en su lugar.
El ButtonsGrid no ha cambiado en exceso, sigue siendo un GridLayout con 3 columnas y filas de botones.
La StatusBar es la barra de estado, bastante más estrecha que el resto de layouts y donde aparecen todos los "logs" de nuestra aplicación, el primero que verás sería el de "video cargado". Si te fijas, el alto del size_hint aparece como None, esto se usa para que podamos tener un scroll, de lo contrario no aparecería.
Nuestro main.py ha cambiado bastante desde nuestra última visita en la comparativa python vs kivy. Pasemos a explicarlo.
Lo primero que notarás es que ahora cada layout tiene su propia clase. El ButtonsGrid tiene funciones para los eventos on_press de los diferentes botones de la interfaz y el VideoGrid tiene un método para avisar cuando el video esté cargado.
Por su lado, la StatusBar no tiene ningún método pero le asignamos una vista desconocida hasta ahora: ScrollView, que como te imaginarás nos permite hacer el scroll en la interfaz.
Cabe destacar el método change_status de ContainerBox, empleado como "método padre" de las diferentes clases. Dentro del método video_loaded de VideoGrid podrás observar como accedemos a change_status mediante self.parent, así evitamos usar herencias o duplicar el mismo método en diferentes clases.