Vamos a programar #63 - Actualizando un gadget de windows 7 a windows 10 (parte 2).

Hola de nuevo a todos, el dia de hoy vamos a terminar de modificar el gadget de reloj para usarlo en windows 10. Retomando el post anteror, el dia de hoy vamos a hacer modificaciones al gadget para hacerlo un poco mas a nuestro gusto.

Cambiando la localización.

Usualmente cuando nos referimos a localización, hablamos del idioma en el que estará el programa. Por default, el gadget viene en ingles, pero si queremos cambiarlo al idioma español (o al que sea), para hacer los cambios, debemos de editar el archivo "localization.js" y cambiar todo el contenido por el siguiente (si quieres que el gadget esté en español):

console.log('loaded: localization.js');

var m = ['ENERO','FEBRERO','MARZO','ABRIL','MAYO','JUNIO','JULIO','AGOSTO','SEPTIEMBRE','OCTUBRE','NOVIEMBRE','DICIEMBRE'];
var d = ['DOMINGO','LUNES','MARTES','MIERCOLES','JUEVES','VIERNES','SABADO'];

Básicamente lo que hacemos es escribir los nombres para cada día de la semana y para cada mes, esto no tiene realmente nada de difícil, salvo la parte de escribir los nombres de los días en otros idiomas.

De 12 a 24 horas

Otro de las partes que se puede modificar del gadget, es cómo se muestra la hora, por default el reloj viene en formato de 12 horas, pero además no se muestran lo segundos.

Antes de continuar, hay que resaltar que actualizar la hora a cada segundo, puede traer algunos problemas de rendimiento en algunos equipos, en lo personal, no lo he notado en un equipo medianamente viejo y mucho menos se siente en equipos mas modernos, por lo que si experimentas problemas de rendimiento, debes de cambiar el código para que funcione mejor (o quitar el gadget).

Una vez hecha la advertencia anterior, veamos el código.

console.log('loaded: gadget.js');

var font;
var color;
var opacity;
// var negativeVerticalMargin;
// var negativeHorizontalMargin;

var toTime;
var toDate;
var toMonth;
var toDay;

var targetWidth;
var targetHeight;

function init() {
	console.log('[init]');

	System.Gadget.settingsUI = 'settings.html';
	System.Gadget.onSettingsClosed = function() {
		readSettings();
		createTextObjects();
		refresh(false);
	};

	readSettings();
	createTextObjects();
	refresh(true);
}

function readSettings() {
	console.log('[readSettings]');

	font = System.Gadget.Settings.readString('font') || 'Arial';
	color = System.Gadget.Settings.readString('color') || 'white';
	opacity = System.Gadget.Settings.read('opacity') || 30;
	// negativeVerticalMargin = System.Gadget.Settings.read('negativeVerticalMargin') || 0;
	// negativeHorizontalMargin = System.Gadget.Settings.read('negativeHorizontalMargin') || 0;

	console.log('    font: '+font);
	console.log('    color: '+color);
	console.log('    opacity: '+opacity);
}

function createTextObjects() {
	console.log('[createTextObjects]');

	var bg = document.getElementById('bg');
	bg.removeObjects();

	// 0's are dummy chars for initial text object alignment
	toTime = bg.addTextObject('00:00:00', font, 105, color, 0, 0);
	toDate = bg.addTextObject('0', font, 80, color, toTime.left, 90); //(toTime.top+toTime.height)*0.69);
	toMonth = bg.addTextObject('0', font, 45, color, toDate.left+toDate.width, 95);
	toDay = bg.addTextObject('0', font, 30, color, toDate.left+toDate.width, 135);

	//we really don't want to be changing the width of the gadget because of clock time
	//because gadgets are anchored on the desktop by the left side, and the content is right-aligned

	targetWidth = document.getElementsByTagName('body')[0].style.width = toTime.width;
	targetHeight = document.getElementsByTagName('body')[0].style.height = toDay.top + toDay.height;
}

function refresh(autoreload) {
	console.log('[refresh]');

	console.log('    font: '+font);
	console.log('    color: '+color);
	console.log('    opacity: '+opacity);


	var currentTime = System.Time.getLocalTime(System.Time.currentTimeZone);
	var currentDate = new Date(Date.parse(currentTime));

	var hours = currentDate.getHours();

	var minutes = currentDate.getMinutes();
	minutes = ((minutes < 10) ? ':0' : ':') + minutes;
// Comentar las siguientes dos lineas para no mostrar los segundos
	var seconds = currentDate.getSeconds();
	seconds = ((seconds < 10) ? ':0' : ':') + seconds;
//Quitar los comentarios de la siguiente linea y comentar la siguiente para no mostar los segundos
	//toTime.value = hours + minutes + " HR";
	toTime.value = hours + minutes + seconds;
	toTime.font = font;
	toTime.color = color;
	toTime.opacity = opacity;

	toTime.left = targetWidth - toTime.width;
	toTime.top = 0;


	toDate.value = currentDate.getDate();
	toDate.font = font;
	toDate.color = color;
	toDate.opacity = opacity;

	toDate.left = toTime.left;
	toDate.top = 90; // - negativeVerticalMargin;


	toMonth.value = m[currentDate.getMonth()];
	toMonth.font = font;
	toMonth.color = color;
	toMonth.opacity = opacity;

	toMonth.left = toDate.left + toDate.width;
	// goofly little formula here to goose the month riiiigh up to but not touching the time, for most fonts
	toMonth.top = toDate.top + 4 + (toDate.top * 0.05) ; //95;


	toDay.value = d[currentDate.getDay()];
	toDay.font = font;
	toDay.color = color;
	toDay.opacity = opacity;

	toDay.left = toMonth.left;
	toDay.top = toMonth.top + 41; //135;


	console.log('    width: '+toTime.width+', height: '+toDay.top + toDay.height);
	console.log('    toTime: x='+toTime.left+', y='+toTime.top+', h='+toTime.height+', w='+toTime.width);
	

	if (autoreload) {
		//cuando mostramos los segundos hay que actualizar cada segundo, pero si queremos actualizar cada minutos, debemos hacerlo cada 60
		//en lugar de tener 1*1000, debemos cambiar a 60*1000
		setTimeout(function() { refresh(true); }, 1*1000);
	}
}

Este código es el que vamos a sustituir en el archivo "gadget.js" que es el principal. Con lo anterior, hemos cambiado la presentación de 12 a 24 horas, el código viene comentado para que hagas los cambios que creas necesarios, si te gusta más el formato de 12 horas, bastará con que revises el código fuente del original y el que aquí vimos.

El gadget empaquetado y que luce cómo el de la imagen, lo puedes descargar de mi dropbox y probarlo.

Los leo y luego y feliz 2019!!