Xwork's Blog

The lord is waiting to take your hand.

Vamos a programar #64 - Expresiones regulares - Ejemplos (pt. 1).

Hola de nuevo a todos, el día de hoy vamos a continuar con las expresiones regulares.


En el post anterior vimos cuales son los caracteres que sirven para crear los patrones para las expresiones regulares, el día de hoy; y antes de pasar al código de VEncoder, vamos a ver cómo se usan con algunos ejemplos.
En esta ocasión voy a usar Notepad++ ya que soporta la búsqueda en el texto mediante expresiones regulares y los patrones no cambian tanto entre las que usemos aquí y las que usaremos en el código de C# (hay algunos cambios pero son mínimos). Para las palabras de prueba, copie la lista de las 1000 palabras básicas de Wikcionario, solo las pase a notepad++, pero puedes descargarlas de mi dropbox en un archivo de texto plano.

Con todo lo anterior, vamos a ver ejemplos. Supongamos que de la lista de palabras, solo queremos  buscar aquellas que comiencen con la letra "a". Para eso podemos crear un patrón cómo el que sigue:

\ba\w+\b

La expresión anterior buscará solo las palabras completas que comiencen con la letra "a", al buscar el patrón anterior en notepad++ y contar los resultados, tendremos algo cómo lo que sigue:

El patrón funciona de la siguiente manera:

  • \b - hace la búsqueda de "finales de palabra", puede ser puntos, nuevas lineas o cualquier símbolo que no se una letra.
  • a - es la letra a.
  • \w+ - indica que se vale cualquier carácter, el símbolo + indica que se puede repetir varias veces (no necesariamente la misma letra, sino el valor de carácter).
  • \b - hace la búsqueda de "finales de palabra", puede ser puntos, nuevas lineas o cualquier símbolo que no se una letra.
Cabe mencionar que solo se buscaran las palabras que exactamente comiencen con la letra "a" por lo que si en la lista están las palabras: Aburrido y aburrido; solamente se contará aburrido. Las expresiones regulares son sensibles a mayúsculas y minúsculas (dependiendo del motor de las expresiones regulares, se puede establecer un flag para ignorarlo, pero siempre es recomendable crear un patrón que sea preciso).

Ahora supongamos que ademas de que queremos buscar las palabras que empiezan con "a", queremos que solo cuente aquellas que también terminan con la letra "n". Podemos crear un patrón cómo el que sigue:

\ba\w+n\b

Cómo podrás ver  simplemente agregamos justo antes de "\b" una letra "n", al ejecutar la búsqueda en notepad++, veremos algo cómo lo que sigue:

En el idioma español, es muy poco común oír palabras con las letras x,y y z. Supongamos que queremos buscar todas las palabras que incluyan esas letras; podemos crear un patrón cómo el que sigue:

\b\w+[xyz]\w+\b

Al implementarlo, verás que palabras cómo arroz o zanahoria no las cuenta, esto se debe a que "\w+" indica que debe de haber alguna letra antes Y después de cualquiera de las letras que esta en el grupo (X, Y y Z) , podemos tratar de arreglarlo con la siguiente:

\b[xyz]\b

Pero lejos de acercarnos al resultado, lo empeora ya que el patrón anterior solo buscara exactamente cada letra que este en medio de dos corchetes, espacios en blanco o cualquier cosa que indique final de palabra.


 Para poder plantear un poco mejor que es lo que queremos buscar, podemos plantearlo de la siguiente manera: "busca palabras que contengan las letras X, Y o Z, sea al inicio o en medio o al final de la palabra". Aquí la clave es el comparador "o" en las expresiones regulares, hay patrones que sirven cómo un "or" lógico en programación, eso quiere decir que podemos definir mas de un patron de busqueda simultaneo. Ahora probemos con la siguiente expresión regular:

\b(\w+[xyz]|\w+[xyz]\w+|[xyz]\w+)\b

Al ejecutarlo veremos que palabras cómo "yegua" y "arroz" son encontradas. La explicación del patrón anterior es simple:
  • ( -inicio del grupo
    • \b - hace la búsqueda de "finales de palabra", puede ser puntos, nuevas lineas o cualquier símbolo que no se una letra.
    • \w+[xyz] - Buscará las palabras que tengan al final x, y o z.
    • | - Alternación, buscará el patrón que este antes o después.
    • \w+[xyz]\w+ - Buscará las palabras que tengan entre otras las letras x, y o z
    • | - Alternación, buscará el patrón que este antes o después.
    • [xyz]\w+ - Buscará las palabras que empiecen con x, y o z y que tengan más letras despues de estas.
    • \b - hace la búsqueda de "finales de palabra", puede ser puntos, nuevas lineas o cualquier símbolo que no se una letra.
  • ) - fin del grupo.
Con lo anterior, tendremos cómo resultado:

Otro caso es común, es buscar palabras con determinado número de letras, para este caso hay varias formas de hacerlo (incluso para la mayoría de los casos siempre hay mas de una forma de lograr el resultado). Supongamos que queremos listar todas las palabras que contienen exactamente 15 letras para eso disponemos de los siguiente patrones:

\b\w\w\w\w\w\w\w\w\w\w\w\w\w\w\w\b

o el siguiente

\b\w{15}\b

El segundo, es el mas optimo, hay que recordar que cuando se usan los corchetes, buscará de manera repetida el patrón que le antecede, el resultado:
Pero ademas se puede usar de tres maneras diferentes, la primera es la anterior, ahora supongamos para la segunda forma que queremos buscar todas las palabras que tengan diez o mas letras, podemos crear un patrón cómo el que sigue:

\b\w{10,}\b

El primer número indica que se deben de repetir en al menos diez veces el patron "\w", cómo no se indica el número maximo para las repeticiones, buscará todas las palabras sin importar el número de letras (a partir de 10). Al ejecutar la búsqueda, veremos algo cómo lo que sigue:

Ahora supongamos que solo queremos buscar las palabras que tengan de tres a cinco letras, podemos crear un patrón así:

\b\w{3,5}\b

Cuando usamos dos números entre los corchetes, indicaremos que queremos que busque tantas veces cómo el primer dígito lo indica, el patrón que le precede, pero ademas solo lo hará hasta el parámetro superior, en este caso solo se buscaran las palabras que contengan de tres a cinco letras, otro ejemplo de este, seria buscar palabras que tengan la misma letra o silaba repetida.

(co){2}

El ejemplo anterior solo encontrará la palabra cocodrilo, ya que se repite la silaba "co" dos veces.

Y bien, por ahora es todo, en el siguiente post continuaremos con mas ejemplos y después pasaremos a la parte que tiene que ver con VEncoder.

Los leo luego

Learning Machine #13 - Expresiones regulares.

Hola de nuevo a todos, el día de hoy veremos un poco acerca de las expresiones regulares. Imagina que haces alguna clase de programa que sirve de "GUI" para ffmpeg, haces una interfaz bonita y haces los controles para funciones que suenan genial... pero nunca implementaste.


Hace algunos años publiqué un programa llamado VEncoder 2, que en su tiempo funcionó, pero poco despues se volvio obsoleto debido a que ffmpeg sufrió cambios y por lo tanto VEncoder paso a ser obsoleto.

Para solucionar eso, decidí que ya era hora de empezar a actualizarlo y tratar de hacerlo a "prueba de tiempo", pero lo haré poco a poco.

Una de las funciones que estaban planeadas desde el inicio, era la de poder escribir a mano algunos parámetros adicionales o simplemente sobre-escribir los pararmetros y sus valores. Para poder realizar ese trabajo, debemos de encontrar una forma de encontrar exactamente cada valor, es decir si queremos cambiar la resolución, debemos de encontrar la forma de saber si ya hay o no este parámetro. En c# hay varias formas de lograrlo, pero creo que la mas adecuada es mediante el uso de expresiones regulares.

Expresiones regulares

Antes que nada, veamos que son las expresiones regulares.

En cómputo teórico y teoría de lenguajes formales una expresión regular, también conocida como regex,​ es una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones. Por ejemplo, el grupo formado por las cadenas Handel, Händel y Haendel se describe con el patrón "H(a|ä|ae)ndel". La mayoría de las formalizaciones proporcionan los siguientes constructores: una expresión regular es una forma de representar los lenguajes regulares (finitos o infinitos) y se construye utilizando caracteres del alfabeto sobre el cual se define el lenguaje. Wikipedia/expresionRegular.
 Entonces para definir un patrón, disponemos de las siguientes:

  • Clases de caracteres
    • . - Cualquier carácter (menos el de nueva linea).
    • \w\d\s - palabra, dígito, espacio en blanco.
    • \W\D\S - NO palabra, NO dígito, No espacio en blanco.
    • [abc] - cualquier letra dentro del corchete.
    • [^abc] - Ninguna de las letras dentro del corchete.
    • [a-g] - carácter entre "a" y "g".
  • Anclas
    • ^abc$ - inicio/ fin de la palabra.
    • \b\B - final/NO final.
  • Agrupación.
    • (abc) - Agrupación.
    • \1 - referencia hacia atrás.
    • (?:abc) omitir grupo.
    • (?=abc) busqueda hacia adelante.
    • (?!abc) busqueda haci atras.
  • Alternación
    • a*a+a? - 0 o mas, 1 o mas, 0 o 1.
    • a{5}a{2,} - Exactamente 5,2 o mas.
    • a{1,3} - entre uno y tres.
    • a+?a{2,}? - Buscar el menor posible.
    • ab|cd - busca ab o cd.
Y bien, por ahora es todo, en el siguiente post veremos cómo hacer uso de las expresiones regulares en C# y ademas implementaremos la función que describi al inicio.

Los leo luego.

Vamos a platicar #9 - ¿Eres realmente tan listo?

Hola de nuevo a todos, el día de hoy vamos a platicar un poco.
Hace poco mientras platicaba con algunos amigos, uno de ellos expresó su malestar porque era incapaz de resolver el cubo de Rubik. Yo por motivos de la facultad me di a la tarea de aprender a armarlo para poder desarrollar algún algoritmo para que después la computadora lo resolviera. En su momento fallé de manera tan tremenda, que por un tiempo me obsesioné con resolverlo, poco tiempo después logre armarlo por mi cuenta, pero no de manera practica; por suerte mientras buscaba cosas relacionadas al cubo de Rubik, encontré algunos "métodos" para poder resolverlo de manera más sencilla (solo cómo dato; 20 es el número de dios para el cubo Rubik).

Todo bien hasta ahí, pero mi amigo me cuestiono, "si aprender a resolver el cubo usando los métodos que ya alguien creo, ¿igual cuenta?", lo que me llevo a pensar, hasta que punto es valido decir que aprendimos algo, si lo hicimos en base a los descubrimientos de alguien mas. Antes de que alguien me diga "esa es precisamente la base del progreso"; eso ya lo se, solo que hasta que punto es válido decir aprendí/entendí algo.

Esto me ha llevado a cuestionarme también a mi. hace poco jugué ajedrez contra un niño de seis años, a leguas se veía que es un prodigio; me ganó de manera tan avasallante que me hizo preguntarme que tan bueno soy para el ajedrez.

Desde ahí empecé a jugar mas seguido y poco a poco me di cuenta que probablemente no sea lo mio y aquí es donde todo se jode porque me crea un conflicto. Me gusta jugar al ajedrez, he empezado a leer los fundamentos, pero entre mas trato de aplicar la teoría, peor pierdo, cuando mi amigo me expreso su malestar por el cubo de Rubik, fue precisamente un día en que jugamos un mini-torneo (en el cual perdí a la primera) y me quejé, dije que era un asco, pero el dijo lo del cubo de Rubik solo para hacer la comparación.

Si bien yo le respondí que no viene al caso, el ajedrez es estrategia pura y me funcionaba mejor cuando no sabia nada a cuando intenté aprender algo, cosa que en el cubo de Rubik no aplica, una vez aprendiendo algún método, eventualmente llegará el momento en que lo harás de manera automática y si lo haces en el ajedrez, probablemente funcione los primero cuatro o cinco movimientos, pero después ya no.

El maestro @morsa dijo que hay que estudiar años para poder siquiera considerarse un novato, pero tras perder de forma tan miserable, me he dado cuenta que probablemente no se lo mio.

Y bien por ahora es todo, en el siguiente post vamos a comenzar con la programación. Si quieres jugar contra mi al ajedrez, suelo jugar por la noche en la pagina de CHESS.COM.

Los leo luego.

Feliz 2019

Hola de nuevo a todos, el día de hoy solo escribo para desearles un feliz año 2019, cómo de costumbre, el año que viene publicaré mas y mas post que espero que sean de utilidad para el que los lee.

Sin nada mas que decir, FELIZ 2019!!!
Los leo luego.

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!!

Vamos a programar #62 - Actualizando un gadget de windows 7 a windows 10.

Hola de nuevo a todos, el día de hoy vamos a ver cómo es "posible" actualizar un gadget de Windows 7 para poder usarse en Windows 10.
Cómo muchos sabrán, hago programas para computadora, la mayoría de ellos están diseñados para ejecutarse en computadoras con Windows, pero muy específicamente en computadoras con Windows 7 para abajo. Gracias a que en la mayoria de los programas se usa .NET que se encarga de hacer el trabajo sucio por nosotros si es necesario que la aplicación se ejecute en un sistema operativo superior; llámese windows 10. Pero hace unos días, recibí la solicitud de un programa; mejor dicho; una "app" de windows 10 (y no voy a entrar en detalles por ahora) por lo que me vi en la necesidad de actualizar mi computadora.


La solicitud llegó unos días después, justo cuando había logrado personalizar mi escritorio a mi gusto.
Para hacer memoria, los gadgets son "mini-aplicaciones" basados en html, javascript y varios controles activex mas, estos aparecieron  por primera vez en windows vista y su tiempo de vida solo se prolongo hasta windows 7 (8?), debido a que se encontraron fallas críticas que permitían de manera potencial, permitir el acceso al equipo.

Es posible utilizar los gadgets en windows 10, pero para lograr una experiencia similar a windows 7, es necesario modificarlos, en el caso muy particular del gadget que vamos a modificar, el principal problema eran las fuentes. Solo estaban disponibles las basicas de windows y a pesar de haber instalado varias más, ninguna de éstas se mostraba.

Antes de continuar, si quieres usar el gadget en windows 10, debes de buscar algún programa que permita hacerlo, por cuestiones de seguridad no lo voy a poner aqui, ya que cómo mencioné antes, hay vulnerabilidades que podrían ser explotadas por un tercero. Si aun así quieres continuar, puedes buscar en internet "windows 10 gadgets", luego debes de descargar la version original del gadget desde su sitio web , descargarlo e instalarlo (solo para darle el debido crédito a sus autores, ya que en teoría vamos a reemplazar muchos de los archivos originales, aunque según la licencia, podemos modificarlo a nuestro gusto si no es que todo).

Ahora que ya estan dichas todas las advertencias, procederemos a abrir el gadget con Winrar.
Y extraeremos todo el contenido en una carpeta, una vez hecho buscaremos la carpeta llamada "js" y con un bloc de notas (en mi caso notepad++), abriremos el archivo "font-picker.js" y reemplazaremos su contenido con el siguiente codigo:

/*
Based on Jonathan Abbott's Flip Calendar gadget
http://vistagadgets.spaces.live.com/
*/

console.log('loaded: font-picker.js');

var fontPicker = {
	supportedFontTypes: ' (truetype) ',
	fontsToSkip: ':Bookshelf Symbol 7:'+':MS Outlook:'+':MS Reference Specialty:'+':MT Extra:'+':Symbol:'+':Webdings:'+':Wingdings:'+':Wingdings 2:'+':Wingdings 3:',

	fillYield: 50,	// Yield back to IE every X ms

	fontSizer: null,
	fonttypeIndex: 0,
	currentFont: System.Gadget.document.parentWindow.font,
	selectingFont: -1,

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

		// System.Gadget.onSettingsClosing = this.settingsClosing;

		divFonttype.style.fontFamily = divFonttype.innerText = this.currentFont;
		divFonttype.style.fontSize = '16px';

		this.fontSizer = document.createElement('<g:background />').addTextObject(this.currentFont, this.currentFont, 16, 'black', 0, 0);

		//remove focus from the 1st checkbox
		document.body.focus();
		
		//read the fonts from the registry and build the table
		this.buildList(this.readFonts());

		// setFont(currentFont, 0);
		// console.log(tdFonts);
		// console.log(this.fonttypeIndex);
		tdFonts.rows(this.fonttypeIndex).className = 'menuItemSelected';
	},

	settingsClosing: function(event) {
		console.log('[settingsClosing]');
		
		if (event.closeAction == event.Action.commit) {
			System.Gadget.Settings.writeString('font', divFonttype.innerText);
		}
		// event.cancel = false;
	},

	readFonts: function() {
		console.log('[readFonts]');

		var HKLM = 2147483649 ;
		var rPath = 'SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Fonts';
	

		// connect to the registry
		var oSwbem = new ActiveXObject('WbemScripting.SwbemLocator');
		var oSvc = oSwbem.ConnectServer(null, 'root\\default');
		var oReg = oSvc.Get('StdRegProv');

		// enumerate the values 
		var oMethod = oReg.Methods_.Item('EnumValues');
		var oInParam = oMethod.InParameters.SpawnInstance_();
		oInParam.hDefKey = HKLM;
		oInParam.sSubKeyName = rPath;
		var oOutParam = oReg.ExecMethod_(oMethod.Name, oInParam);

		// get the values into an array
		var sNames = oOutParam.sNames.toArray();

		// sort it
		sNames.sort();

		return sNames;
	},

	buildList: function(listItems) {
		console.log('[buildList]');

		// try{
			var counter = new Date();

			while (listItems.length > 0 && (new Date())-counter<this.fillYield) {
				// is the font one we can use
				var fontType = ' ' + listItems[0].substring(listItems[0].lastIndexOf('(')).toLowerCase() + ' ';
				var fontName = listItems[0].substring(0, listItems[0].length - fontType.length + 1);

				if(this.supportedFontTypes.indexOf(fontType) > -1 && this.fontsToSkip.indexOf(':' + fontName + ':') == -1) {
					//check the height, to see if it's a font we can use
					this.fontSizer.font = this.fontSizer.value = fontName;
					this.fontSizer.height = 0;

					if (this.fontSizer.height != 0) {
						// console.log('Using font: '+fontName);

						var tRow = tdFonts.insertRow(tdFonts.rows.length);
						tRow.className = 'menuItem';
						
						var tCell = tRow.insertCell(0);
						tCell.innerText = fontName;
						tCell.style.fontFamily = fontName;
						tCell.style.fontSize = divFonttype.style.fontSize;

						if (fontName == this.currentFont) {
							this.fonttypeIndex = tdFonts.rows.length - 1;
							// tRow.className = 'menuItemSelected';
						}

					} else {
						// console.log('Cant use font: '+fontName);
					}
				}
				listItems.shift();
			}

			if (listItems.length > 0) {
				var context = this;
				setTimeout(function() { context.buildList(listItems); }, 20);
			}
		// } catch(err) {
			// console.log('buildList: '+err.name+' - '+err.message);
		// }
	},

	showFontMenu: function(id, x, y) {
		console.log('[showFontMenu]');

		if (id == -1) {
			if (fontMenu.style.display != 'none') {
				id = this.selectingFont;
			} else {
				return;
			}
		}
			
		fontMenu.style.display = (fontMenu.style.display == 'none') ? 'inline' : 'none';

		if (fontMenu.style.display == 'none') {
			console.log('[showFontMenu] hidden');

			switch (this.selectingFont) {
				case 0:
					fontDropPNG.src = 'images/dropmenu.png';
					break;
			}
			this.selectingFont = -1;
		} else {
			console.log('[showFontMenu] displayed');

			fontMenu.style.top = y;
			fontMenu.style.left = x;
			this.selectingFont = id;
			
			// console.log(tdFonts.rows(fonttypeIndex).className);
			// console.log(id);

			switch (id) {
				case 0:
					fontMenu.scrollTop = tdFonts.rows(this.fonttypeIndex).offsetTop - 65;
					tdFonts.rows(this.fonttypeIndex).className = 'menuItemSelected';
					break;
			}

			// console.log(tdFonts.rows(fonttypeIndex).className);
		}
	},

	setFont: function(index, viaKey) {
		console.log('[setFont] '+index+', '+viaKey);

		var sFont = tdFonts.rows(index).cells(0).innerText;

		var selecting = (viaKey != null) ? viaKey : this.selectingFont;
		switch (selecting) {
			case 0:
				divFonttype.style.fontFamily = sFont;
				divFonttype.innerText = sFont;
				tdFonts.rows(this.fonttypeIndex).className = 'menuItem';
				this.fonttypeIndex = index;
				tdFonts.rows(this.fonttypeIndex).className = 'menuItemSelected';
				break;
		}

		// adjust the scrollbar if needed
		if (fontMenu.scrollTop > tdFonts.rows(index).offsetTop) {
			fontMenu.scrollTop = tdFonts.rows(index).offsetTop;
		}

		if (fontMenu.scrollTop < tdFonts.rows(index).offsetTop+tdFonts.rows(index).offsetHeight-150) {
			fontMenu.scrollTop = tdFonts.rows(index).offsetTop+tdFonts.rows(index).offsetHeight-150;
		}
	},

	setFontStyle: function(i) {
		console.log('[setFontStyle]');

		switch (i) {
			case 0:
				divFonttype.style.fontWeight = divFonttypeBold.checked ? 'bold' : '';
				divFonttype.style.fontStyle = divFonttypeItalic.checked ? 'italic' : '';
				break;
		}
	},

	keyPress: function(i) {
		console.log('[keyPress]');

		switch (event.keyCode)
		{
			case 40:	//down arrow
				if (i == 0) {
					if (this.fonttypeIndex < tdFonts.rows.length-1) {
						this.setFont(this.fonttypeIndex+1, i);
					}
				}
				break;
			case 38:	//up arrow
				if (i == 0) {
					if (this.fonttypeIndex > 0) {
						this.setFont(this.fonttypeIndex-1, i);
					}
				}
				break;
			case 36:	//home
				this.setFont(0, i);
				break;
			case 35:	//end
				this.setFont(tdFonts.rows.length - 1, i);
				break;
		}
	},

	mouseOver: function(mouseEntered, id) {
		// console.log('[mouseOver]');

		var selected = (this.selectingFont == 0) ? this.fonttypeIndex : 0;

		if (mouseEntered) {
			id.className = (id.rowIndex == selected) ? 'menuItemHoverSelected' : 'menuItemHover';
		} else {
			id.className = (id.rowIndex == selected) ? 'menuItemSelected' : 'menuItem';
		}
	}
}

La modificaciones que hicimos en este archivo sirven para detectar todas las fuentes disponibles en Windows. Anteriormente, las fuentes se guardaban por default en la ruta "\Windows\fonts" y el "catalogo" de fuentes se guardaba en el registro en la siguiente ruta: "HKLM\\SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Fonts\\", pero para Windows 10 (y no se si para el 8 tambien), se cambio la ubicacion real y la del catalogo; ahora en lugar de estar en "HKLM" (HKey Local Machine), paso a almacenarse en "HKCU" (HKey Current User). Para hacer uso de cada una de las llaves, debemos de acceder a ellas por su valor hexadecimal, tomemos cómo referencia la siguiente lista:
  • HKEY_CLASSES_ROOT = 2147483648 (0x80000000)
  • HKEY_CURRENT_USER = 2147483649 (0x80000001)
  • HKEY_LOCAL_MACHINE = 2147483650 (0x80000002)
  • HKEY_USERS = 2147483651 (0x80000003)
  • HKEY_CURRENT_CONFIG = 2147483653 (0x80000005)
  • HKEY_DYN_DATA = 2147483654 (0x80000006)
Si revisas detenidamente, verás que en el código javascript hay una variable llamada "HKLM" cuyo valor corresponde a la llave "HKey Local Machine" que su vez es el número 2147483650, entonces la manera fácil de cambiar la llave a la que vamos a acceder es simplemente cambiando el valor de ésta a la del valor de la llave de destino (en este caso 2147483649).

Una vez cambiado este valor, para volver a empaquetar el gadget, debemos de usar winrar y elegir en formato "zip" y en método de compresión "No comprimir". Al archivo resultante de la compresión, simplemente le cambiamos el nombre de tal modo que la extensión en lugar de ".zip", sea ".gadget"

Después para instalarlo, simplemente hacemos doble clic en el archivo y se instalará al repositorio de gadgets.

Y bien, por ahora es todo, el siguiente post veremos como crear una versión de acuerdo al idioma que elijas y cómo agregar un par de personalizaciones para que se adapte un poco a tu gusto.

Vamos a programar #61 - Calculadora de Vigenere Online 2.1

Hola de nuevo a todos, hace poco mientras revisaba los comentarios, alguien mencionó: "tu calculadora es una porquería, no hace bien los cálculos", incluso pegó una prueba de cómo era que su web hacia bien las cosas y la mía no.
Solo para ver que no estuviera equivocado, revise su página y tan solo al ver su código fuente me di cuenta de porque las cosas no resultaban iguales en ambos casos.

La respuesta era simple, la del comentario no contaba la "Ñ", prácticamente uso código que encontró en la web pero de alguien que habla inglés por eso la disparidad.

Ya que realmente no había un error y creo que solo era spam, eliminé el comentario y me dio la idea para actualizar la calculadora pero en está ocasión agregué el soporte para el idioma inglés.

Antes que nada te recomiendo leer el primer post sobre el cifrado de Vigenere, y después tomes en consideración lo siguiente:

  1. En el idioma ingles no se usa la "Ñ"
  2. Se le asigna un valor de A = 1, B = 2, ..., Z = 26.
Ahora veamos SOLO el código javascript, puede parecer redundante, pero simplemente lo hice para dejar claro (y bastante obvio) cómo es que funciona.

function LangSelected(){
var radios = document.getElementsByName('Lang');
	for (var i = 0, length = radios.length; i < length; i++) {
		if (radios[i].checked) {
			return Number(radios[i].value)
		}
	}
}

function AsciiToA1(Char1, ForSpanish){
Char1 = Char1;
	if (IsEnie(Char1) == true)
		return 15;
	if (IsLower(Char1, ForSpanish))
		Char1 -= 32;
	if(ForSpanish == 1){
		if(Char1-64 < 15){
			return(Char1-64);
		}
		else if(Char1-64 >= 15 && Char1-64 < 28){
			return(Char1-63);
		}
	}
	if(ForSpanish != 1)
			return(Char1-64);
}
function IsLetter(c, ForSpanish){
	return IsUpper(c, ForSpanish) || IsLower(c, ForSpanish);
}

function IsEnie(Char2){
	if(Char2 == 209 || Char2 == 241){
		return true;
	}else{
		return false;
	}

}

function IsUpper(Char3, ForSpanish){
	if (ForSpanish == 1){
		 if (IsEnie(Char3)){
			return true;
		}else if(Char3 >= 65 && Char3 <= 90){
			return true;
		}
	}else if (ForSpanish != 1){
	if(Char3 >= 65 && Char3 <= 90)
		return true;
	else
		return false;
	}
}

function IsLower(Char4,ForSpanish){
	if (ForSpanish == 1){
		 if (IsEnie(Char4)){
			return true;
		}else if(Char4 >= 97 && Char4 <= 122){
			return true;
		}
	}else if (ForSpanish != 1){
	if(Char4 >= 97 && Char4 <= 122) 
		return true;
	else
		return false;
	}
}

function IsA1Char(Char5, ForSpanish){
	if (ForSpanish == 1)
	{
		if (Char5 > 27){
			return false;
		}else{
			return true;
		}
	}else if (Char5 > 26 && ForSpanish != 1){
		return false;
	}else{
		return true;
	}
}

function Encriptar(ModeEnc,ForSpanish)
{
	var 	ForSpanish =  LangSelected();
	var GetPhrase = document.getElementById('InputText').value;
	var GetPass = document.getElementById('PassWord').value;
	var Codes = [];
	var TotalChars;
	if(ForSpanish == 1)
		TotalChars = 27;
	else
		TotalChars = 26;
	if(GetPhrase.length < 1 || GetPass.length < 1)
	{
		alert('La frase/contraseña no puede estar en blanco')
		return;
	}
	var PassData = PhraseToArray(GetPass, ForSpanish);
	var PhraseData = PhraseToArray(GetPhrase, ForSpanish);
	var SpaceCount = 0;

	if (ModeEnc == true){
		for(var i = 0; i < PhraseData.length; i++){
			if(IsA1Char(PhraseData[i], ForSpanish) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else if(IsA1Char(PhraseData[i], ForSpanish) == true){
				Codes.push((PassData[(i - SpaceCount) % PassData.length] + PhraseData[i]) % TotalChars);
			}
		}
	}else{
		for(var i = 0; i < PhraseData.length; i++)	{
			if(IsA1Char(PhraseData[i], ForSpanish) == false){
				Codes.push(PhraseData[i]);
				SpaceCount += 1;
			}else{
				var Value = PhraseData[i] - PassData[(i - SpaceCount) % PassData.length];
				if (Value < 1){
					Value += TotalChars;
				}
			Codes.push(Value % TotalChars);
			}
		}
	}
	document.getElementById('Result').value = Codes;
	return Codes;
}
function RebuildString(Codigos)
{
	var ForSpanish =  LangSelected();
	var Salida = ""
	for(var i = 0; i < Codigos.length; i++)
	{
		if (IsA1Char(Codigos[i], ForSpanish) == false){
			Salida += String.fromCharCode(Codigos[i]);
		}else if (ForSpanish == 1){
			if (Codigos[i] == 15 )
				Salida += String.fromCharCode(209);
			if (Codigos[i] == 0)
				Salida += String.fromCharCode(90);
			if(Codigos[i] < 15 && Codigos [i] > 0)
				Salida += String.fromCharCode(Codigos[i]+64);
			if(Codigos[i] > 15 && Codigos[i] < 28)
				Salida += String.fromCharCode(Codigos[i]+63);
		}else if (ForSpanish != 1){
			if (Codigos[i] == 0){
				Salida += String.fromCharCode(90);
			}else{
				Salida += String.fromCharCode(Codigos[i]+64);
			}
		}	
	}
	document.getElementById('Result').value = Salida;
}

function PhraseToArray(Text, ForSpanish){
	var Out = [];
	for(var i = 0; i < Text.length; i++){
		var CodeChar = Text.charCodeAt(i);
		if(IsLetter(CodeChar, ForSpanish) == true){
			Out.push(AsciiToA1(CodeChar, ForSpanish));
		}else{
			Out.push(CodeChar);
		}
	}
	return Out;
}

Primero que nada se agregó la función "LangSelected" , esta simplemente se usa para indicar en que idioma se va a realizar el cifrado, por ahora solo hay inglés y español. Para determinar cual es el idioma a usar, buscará en el formulario principal cual de los controles del tipo "radio" es el que esta seleccionado, si es el primer radio, la función devuelve 1 si es el segundo; devuelve 2.

Luego a casi todas funciones se le agrego un segundo parámetro llamado "ForSpanish" y éste cómo su nombre lo indica, sirve para determinar si estamos "hablando" o no en español.

El código es similar al anterior, solo que está hay un apartado para cuando es español y para cuando no.

Cómo de costumbre el código lo puedes descargar de mi dropbox, en breve se actualizara la calculadora online.

Vamos a programar #60 - Los números de Fibonacci (Ver. C)

Hola de nuevo a todos, el día de hoy vamos a ver un poco acerca de la sucesión de Fibonacci. Hace poco alguien me comentó que en la universidad, le dejaron de tarea hacer un programa en C que calculara el valor "n" de un número en la sucesión de Fibonacci.

Antes de continuar, vamos a ver que es esta sucesion.

En matemáticas, la sucesión de Fibonacci es la siguiente sucesión infinita de números naturales: 0,1,1,2,3,5,8,13,21,34,55, … La sucesión comienza con los números 0 y 1,2​ y a partir de estos, «cada término es la suma de los dos anteriores», es la relación de recurrencia que la define. A los elementos de esta sucesión se les llama números de Fibonacci. Esta sucesión fue descrita en Europa por Leonardo de Pisa, matemático italiano del siglo XIII también conocido como Fibonacci. Tiene numerosas aplicaciones en ciencias de la computación, matemática y teoría de juegos. También aparece en configuraciones biológicas, como por ejemplo en las ramas de los árboles, en la disposición de las hojas en el tallo, en las flores de alcachofas y girasoles, en las inflorescencias del brécol romanesco y en la configuración de las piñas de las coníferas. De igual manera, se encuentra en la estructura espiral del caparazón de algunos moluscos, como el nautilus. Wikipedia/SucesionDeFibonacci.
Para ponerlo de manera sencilla, para calcular el valor de la sucesión, debemos de sumar los dos números previos, excepto cuando el valor de n sea 0 o 1, a partir de "n = 2", es cuando debemos de empezar a sumar por lo que tendríamos algo similar a lo siguiente:
El propósito del programa era encontrar una manera de hacerlo de forma secuencial y otra de forma re-cursiva. Partiendo de eso, podemos crear un programa cómo el que sigue:

#include <stdio.h>
long FibonacciNumbersRec(int n)
{
	if (n == 0 || n== 1 )
		return n;
	else
		return (FibonacciNumbersRec(n - 1) + FibonacciNumbersRec(n - 2));
}

long FibonacciNumbersIt(int n)
{
	long v1 = 0;
	long v2 = 1;
	long  v3, i;
	for(i = 1; i <= n; i++)
	{
		v3 = v1+v2;
		v1 = v2;
		v2 = v3;
	}
	return v1;
}
int main()
{
	printf("%4d\n", FibonacciNumbersIt(6));
	printf("%4d\n", FibonacciNumbersRec(6));
}

El programa consta de dos funciones, una de ellas es "FibonacciNumbersRec" (Rec es por Recursive) y la otra es "FibonacciNumbersIt" (It por Iterative). Para la función "FibonacciNumbersRec", primeramente comprobamos si el parámetro "n" es cualquiera de los números 1 o 0, si es el caso, la función devuelve "n" cómo resultado, si no es el caso anterior, la función se mandará a llamar a si misma con el parámetro "n = n - 1" y al resultado de esto, se le sumará el valor que resulta de llamarse a si misma con parámetro de "n = n -2"; el valor que regresa la función será el resultado de sumar los casos anteriores.

Para evitar la recursividad, podemos aprovechar que la sucesión depende de los dos valores anteriores inmediatos, por lo que podemos hacer todo en un ciclo "for" y usando las variables auxiliares "v1","v2 y "v3". Cómo la sucesión comienza con 1 y con 0, le asignamos esos valores a "v1" y a "v2", el resultado para ese paso dentro de la sucesión, sera la suma "v1" + "v2", los asignamos a "v3" y tomando en cuenta lo mencionado hace un momento, le asignamos a "v1" el valor que tiene "v2" y a "v2" le asignamos el valor de "v3". Todo esto lo hacemos hasta que el iterador llegue al valor del parámetro "n". Finalmente la función regresará cómo resultado el valor de "v1".

Y bien, con el código anterior hemos demostrado que hay más de una forma para llegar al mismo resultado. Muchas veces es más fácil hacer uso de la recursividad, pero si por alguna razón no debemos (o no disponemos, dependiendo del lenguaje) usarla, siempre hay formas de encontrar una solución.

El código, al igual que el del post anterior, puedes copiarlo y probarlo en el compilador online.

Y bien. por ahora es todo, los leo luego.

Vamos a programar #59 - La función de Ackerman (ver. C)

Hola de nuevo a todos, el día de hoy; y después de casi un mes de "vacaciones"; vamos a continuar con un poco de programación.
Hace algunos días mientras hablaba con un amigo, me dijo que en la universidad, le habían dejado cómo tarea hacer un programa en C que probara la función de Ackerman.

Pero primero veamos una pequeña definicion sobre lo que es la función de Ackerman:
En teoría de la computación, función de Ackermann es una función matemática recursiva encontrada en 1926 por Wilhelm Ackermann, tiene un crecimiento extremadamente rápido, de interés para la ciencia computacional teórica y la teoría de la computabilidad. Hoy en día, hay una serie de funciones que son llamadas funciones Ackermann. Todas ellas tienen una forma similar a la ley original la función de Ackermann y también tienen un comportamiento de crecimiento similar. Esta función toma dos números naturales como argumentos y devuelve un único número natural. Wikipedia/FuncionDeAckerman
Y sigue las siguientes reglas:

  •  n+1 Si m = 0.
  • A(m-1, 1) si m > 0 y n = 0.
  • A(m - 1, A(m, n - 1)) si m > y n > 0.
Cómo podrás ver, se trata de una función que es recursiva, es decir, ella misma se manda a llamar dentro de la misma función.

Sabiendo lo anterior, podemos crear un programa en C usando el siguiente código:


# include <stdio.h>
int AckermanFunction(int m, int n)
{
	if (m == 0)
		return (n+1);
	else
		if (n == 0)
			return (AckermanFunction(m - 1, 1));
		return(AckermanFunction(m - 1, AckermanFunction(m, n - 1)));
}
int main()
{
	int i,j;
	for (i = 0; i < 5; i++)
	{
		for (j = 0; j < 3; j++)
		{
			printf("%6d", AckermanFunction(i, j));
		}
		printf("\n");
	}
	return 0;
}

El código anterior consta de dos partes, la primera es la función llamada "AckermanFunction" que recibe dos parámetros del tipo "int". La función sigue las reglas de la función de Ackerman por lo que si al evaluar, el parámetro "m", este vale cero, la función regresará el valor de "n" mas uno, si no es el caso, la comprobación se hará para el valor de "n = 0", si es el caso, la función se mandará a llamar a si misma y se pasará cómo argumentos a "m" con valor de "m - 1" y "n" con el valor de "n = 1" y regresará el resultado de llamarse a si misma. Finalmente, si "m" y "n" son valores mayores a cero "m > 0", "n > 0", el valor que la función regresará, será el resultante de llamarse a si misma con los parámetros "m-1"  para "m" y el resultado de llamarse a si misma con los parámetros "m = m - 1" y "n = n - 1" para "n".
Para poder ver los resultados, puedes copiar el código y usarlo en un compilador de c en linea. y debería de salir un resultado similar al anterior. Puedes modificar el código para ver que pasa "mas allá" de la quinta fila, pero el resultado puede tomar mucho tiempo.

Y bien, por ahora es todo.

Los leo luego.

Vamos a platicar #8 - Reseña del velocímetro.

Hola de nuevo a todos, el día de hoy vamos a hablar sobre una de las cosas que prometí hace mucho: La reseña del velocímetro.


En abril del 2018 fue cuando empece con la construcción del velocímetro, y desde ese día lo he usado casi a diario, muy pocas le he modificado. Algunas de las cosas que tenía planeadas simplemente ya nos las implementé, si hacemos memoria, implementar las direccionales era algo que tenia planeado hacer (y no he hecho), pero a medida que lo usaba me di cuenta que con una luz intermitente tradicional y con la pantalla de 16x2 era más que suficiente; eso hasta cierto punto.

Normalmente lo uso en la mañana, pero me di cuenta de algunas cosas que podrían ser realmente útiles y que gracias al arduino se pueden implementar de manera un tanto sencilla. Un reloj en tiempo real, eso es algo que sin duda podría resultar útil. En algunas ocasiones he ido en bicicleta a lugares donde tengo compromisos y en ocasiones no dimensiono cuanto tiempo es el que he gastado en el camino. Puedo consultar mi teléfono y ver la hora (o comprar un G-Shock de Casio), pero a veces en medio del trafico hay que poner atención al camino, entonces ahi es cuando se dificulta un poco ver la hora. En cambio si se le agregara el modulo, bastaría con mirar un instante a la pantalla y ya sabría que hora es.

En la parte del software, he pensado en agregar algunas funciones, pero para poder desplegarlas todas, es necesario una pantalla más grande. Hace tres meses ordene una pantalla de 20x4 en ali-express, pero no ha llegado; en ese tiempo estaba pasando todos los componentes a una caja de acrilico que hice, entonces pensé que seria buena idea actualizar el hardware antes de sellar medianamente bien la caja, pero espere y la pantalla que tenia tiempo de espera estimado para su llegada de dos meses; aun no llega.
El motivo para usar una pantalla más grande es simple: así no es necesario agregar botones; si se agregaran botones para la operación del velocímetro, entonces sería lo mismo que sacar mi teléfono de mi mochila, presionar un botón, ver la hora y volverlo a guardar.

Por lo demás, lo que es el "Sistema básico" funciona de maravilla, a pesar de que el cálculo de la velocidad depende en buena medida de la llanta de enfrente, el margen de error está dentro del 5% por cada cien metros en la presentación; es decir, al momento de mostrar la distancia solo se usan dos decimales y por lo tanto se redondea, pero internamente el calculo se hace bien (dentro del margen de error) y las distancias que he medido con respecto a las mediciones que ya hay suelen estar bien (dentro de lo que cabe).

Y bien, por ahora es todo, si no has intentado construir tu propia versión del velocímetro, puedes hacerlo ahora siguiendo las instrucciones que hay en los post.

Los leo luego.