636 - Un widget del tiempo para GNOME 47 Denver
Instalar un widget en el escritorio para #gnome #linux 47 denver que te muestre la información meteorológica de la localización que quieras
Esto de los widgets para GNOME es algo que siempre tengo muy presente. Sobre todo desde el momento en que los desarrolladores decidieron quitar la posibilidad de tener archivos en el escritorio. Aunque sabes, que siempre tienes la opción de hablitarlo con alguna de las extensiones que existen para ello. Teniendo el escritorio completamente despejado, los widgets son una buena opción para tener información a mano. Y en este sentido, el tiempo es una de las cosas que más consulto. Así que, en este episodio, vamos a ver cómo instalar un widget del tiempo en GNOME 47 Denver.
Un widget del tiempo para GNOME 47 Denver
Sobre My-Weather-Indicator
My-Weather-Indicator es un indicador desarrollado inicialmente para Ubuntu, cuyo objetivo era el de traer la información meteorológica al escritorio. Esto en su momento tuvo sentido ya que si bien, había otros indicadores lo cierto es que ninguno terminaba de funcionar correctamente, y esto me dio pie a desarrollar el mio propio.
Con el paso del tiempo le fui añadiendo determinadas características, y precisamente una de esas características era la de poder tener un widget en el escritorio. Incluso existe la posibilidad de crear tu propio widget con unas instrucciones básicas.
Sin embargo, tal y como expliqué en la Ubucon Europe de 2018 en Gijón, las posiblidades que ofrece GNOME Shell son muy superiores a lo que se podía hacer con los vetustos indicadores de Ubuntu.
Esto me ha llevado a detener el desarrollo de My-Weather-Indicator y centrarme en el desarrollo de widgets para GNOME Shell.
Primera versión
Esta es la primera versión de un widget del tiempo para GNOME 47 Denver. En este caso, el widget se llama weather-widget y se trata de un widget sencillo que muestra la información meteorológica del lugar cuyas coordenadas geográficas indiques.
Se trata de una primera versión rápida, porque tal y como te he adelantado en otros episodios del podcast, estoy haciendo un desarrollo mas potente y misterioso por el momento. Y fruto de este desarrollo, he querido hacer algunas pruebas en un sencillo widget para el escritorio, y ver como se comporta.
Typescript
Hasta la fecha las extensiones para GNOME shell las he ido haciendo en JavaScript. Sin embargo, leyendo la guía de estilo de GNOME. La cuestión es que me ha picado la curiosidad, y he decidido hacer este widget en TypeScript. Y como consecuencia de esto, finalmente he decidido migrar el proyecto en el que estoy trabajando también a TypeScript.
La ventaja de utilizar TypeScript es que te permite tener un código más limpio, más ordenado y más fácil de mantener. Además, te permite tener un código más seguro, ya que te avisa de posibles errores antes de que se produzcan. Pero es que además de esto te facilita el autocompletado con independencia del editor de código que estés utilizando.
En este sentido, siguiendo las indicaciones del enlace anterior, puedes crear la extensión de forma sencilla, pero de forma ligeramente distinta a como se hace cuando es directamente para JavaScript.
Pasos a seguir
Para utilizar TypeScript es necesario realizar una configuración mínima, instalar algunas dependencias y configurar el proyecto para genera los archivos de forma correcta. Así, necesitas un archivo package.json con el siguiente contenido,
{
"name": "my-extension",
"version": "0.0.0",
"description": "A TypeScript GNOME Extension",
"type": "module",
"private": true,
"repository": {
"type": "git",
"url": "git+https://github.com/example/my-extension.git"
},
"author": "Álan Crístoffer e Sousa <acristoffers@startmail.com>",
"license": "LGPL-3.0-or-later",
"bugs": {
"url": "https://github.com/example/my-extension/issues"
},
"homepage": "https://github.com/example/my-extension#readme",
"sideEffects": false
}Lo mas importante en este archivo es indicar que el type: module. Una vez realizado esto puedes tienes que ejecutar el siguiente comando,
pnpm install --save-dev \
eslint \
eslint-plugin-jsdoc \
typescript
pnpm install @girs/gjs @girs/gnome-shellEn mi caso utilizo pnpm en lugar de npm, por razones que ya te comenté en un anterior epidodio. Tienes que crear el archivo ambient.d.ts con el siguiente contenido,
import "@girs/gjs";
import "@girs/gjs/dom";
import "@girs/gnome-shell/ambient";
import "@girs/gnome-shell/extensions/global";Aunque este contenido puede ir cambiando con el tiempo en función de las necesidades de tu proyecto.
just
En las guías de estilo de GNOME recomiendan el uso de un archivo Makefile para realizar las diferentes operaciones. Pero estoy tan enamorado de just que no puedo ni siquiera plantearme utilizar otra herramienta. En mi caso este archivo .justfile es como indico a continuación,
NAME := "weather-widget"
DOMAIN := "atareao.es"
default:
@just --list
build:
@pnpm install
compile:
@tsc || true
schemas:
@glib-compile-schemas schemas
make:
@just clean build compile schemas
@cp -r assets dist/
@cp -r icons dist/
@cp -r schemas dist/
@cp stylesheet.css dist/
@cp metadata.json dist/
clean:
@rm -rf dist
@mkdir dist
zip:
@rm -f ../../{{NAME}}.zip
@just make
@(cd dist && zip -9r ../../{{NAME}}.zip .)GitHub Actions
Sigo con las GitHub Actions como no podía ser de otra forma, aunque en este caso tengo pendiente crear el paquete que posteriormente se sube a GNOME Shell extensions.
Instalación
Actualmente lo puedes descargar desde GitHub, desde el repositorio que weather-widget. Lo tienes que descomprimir dentro del directorio ~/.local/share/gnome-shell/extensions/. Y después de esto, tienes que activar la extensión desde Extensiones.
Recuerda que tienes que configurar la latitud y longitud de la localización que quieras consultar. Esto lo tienes que hacer desde la configuración de extensiones.
Tengo pendiente añadir algunas opciones mas como son las unidades en las que se muestra la temperatura, la velocidad del viento o la precipitación. Aunque actualmente estos datos de los que te hablo no se muestran en el widget. Pero es algo que tengo en mente, por supuesto.
Una vez configurado, simplemente puedes moverlo a lo largo y ancho de toda la pantalla para situarlo justo donde tu prefieras. La posición se guarda en la configuración para que se muestre siempre en el mismo lugar.
Inkscape
Para la creación de los iconos de nuevo he utilizado Inkscape partiendo de una imagen que de macrovector que encontré en Freepick.
Se trata de una primera versión de iconos que tendré que mejorar en un futuro, pero, para una primera versión creo que están bastante interesantes. Desde luego, que cualquier idea es bienvenida.
Futuro
En principio, la idea es dejar un widget muy sencillo, mostrando la información meteorológica básica. Sin embargo, estoy dando vueltas a utilizar widgets mas complejos o mostrar información mas detallada al hacer clic sobre el propio widget. Pero esto es algo que tengo que estudiar con detenimiento.