Xwork's Blog

Cumplimos 6 años.

Un día cómo hoy pero del 2016, nació el blog de Xwork y cómo cada año hay que celebrar; pero no en esta ocasión. Hoy solo rendiremos tributo a los que se adelantaron en el camino y solo esperan a que nos reunamos con ellos en la nada.

Att Xwork. Nos seguimos leyendo.

Inutil apps #5 - Visualizer V3 (parte 2)

 Hola de nuevo a todos, el día de hoy vamos a continuar con más de Visualizer V3. En el post anterior, vimos cómo amplificar la señal de audio para que el nivel de las luces no dependa totalmente del volumen del audio, el día de hoy vamos a ver cómo hacer las pantallas de LEDs usando el viejo y confiable LM3915.

Las conexiones a seguir son realmente simples, para ello primero veamos el diagrama siguiente:

Las conexiones son:

• Pin 1 - Salida de LED.
• Pin 2 - Tierra.
• Pin 3 - VCC (3 ~ 35V).
• Pin 4 - Divisor bajo
• Pin 5 - Input
• Pin 6 - Divisor alto.
• Pin 7 - Referencia de salida.
• Pin 8 - Ajuste de referencia.
• Pin 9 - Selector de modo.
• Pin 10 ~ Pin 18 - Salida de LED's

En el post anterior vimos una de la aplicaciones de los amplificadores operacionales, en ese caso lo usamos cómo amplificador, pero es posible usarlo cómo comparador y el LM3915 hace uso de ese comportamiento.

Si observas detenidamente , todas las salidas son las salidas de los amplificadores operacionales, mientras que las entradas "positivas" se conectan a una serie de resistencias que van desde el pin 4 al pin 6, si recuerdas bien, esta configuración es un divisor resistivo y usarse resistencias del mismo valor en cada paso, tendremos que el voltaje será proporcional y será determinado por los valores que se usen en los pines 4 y 6. Así que si conectamos el pin 4  a tierra y el pin 6 a 5v, tendremos en cada paso 0.5v.

En la entrada negativa tendremos el voltaje que se aplique al pin 5, que en nuestro caso, será el voltaje proporcional al nivel de sonido. La forma en que  se usa es: cuando a un amplificador operacional se le aplica un voltaje mayor en la entrada negativa, la salida de este tendrá un voltaje igual al aplicado a la entrada negativa, en caso contrario (si el voltaje es mayor en la entrada positiva), la salida tendrá el voltaje de la entrada positiva.

Si tomamos en cuenta quu aplicamos un voltaje de 5v en el pin 5 y el pin 6 esta conectado a 5v, eso implica que todos los led prenderán, pero además eso aplica también para cuando el voltaje es mayor a 5v (valga la redundancia). Ahora si por ejemplo; aplicamos 2.7v al pin 5 mientras los pin 4 y 6 siguen conectados igual, del primero al quinto LED son los que cumplen la condición de tener un voltaje mayor en la entrada negativa por lo que se encenderían.

Y bien, por ahora es todo, en el siguiente y ultimo post, agregamos los componentes adicionales y pondré a disposición de cualquiera los diagramas para la fabricación de los PCB, que recalco, ya han sido probadas y están listas para usarse.

Los leo luego.

Inutil apps #5 - Visualizer V3 (parte 1).

 Hola de nuevo a todos, despues de un tiempo de ausencia, es hora de retormar el curso y crear un poco de contenido para el blog. En esta ocasion vamos a hacer mejoras para las luces audio-ritmicas que en algun momento hice. Si bien funcionan bien, había algunos detalles por arreglar para que funcionanran de manera adecuada. El proyecto se va a dividir en dos partes en donde detallaré cómo es que funciona, pero ademas pondré a disposicion de cualquiera que quiera ordenar las placas PCB, los archivos gerber del diagrama que veremos. Este a diferencia del velocimetro, ya esta probado, por lo que puedes encargarlos sin el temor de que algo funcione mal.

Si hacemos un poco de memoria (o revisamos el post), veremos que todo funciona cómo es debido, pero tiene un problema un tanto grave: ¡¡No tiene control de volumen!!, por lo que los niveles que se muestran en las luces, dependen directamente del nivel de volumen de la fuente de sonido, pero no solo eso, además el sonido tenía que estar amplificado para poder ver algo. Al inicio lo pensé así por la sencilla razón que no tengo un amplificador grande; y eso fue hasta hace poco.

Ahora cómo el sistema de sonido es mas grande, al subir un poco el volumen , este ya alcanza un nivel considerable de ruido y aun así no se alcanza a iluminar todas las luces del diseño pasado. La solución es simple, debemos de amplificar por separado el audio para las luces. Para poder conseguir esa tarea, vamos a usar un amplificador operacional.

Para esta tarea cualquier amplificador operacional funciona, pero en mi caso voy a usar el circuito integrado LM358.

Para poder usarlo, debemos de hacer las conexiones cómo sigue:

Cómo podrás observar, usamos tres resistencias. R3 sirve para establecer a tierra cómo referencia entre la señal que ingresamos, R1 y R2 se utilizan para establecer la ganancia que va a tener. Hay que tener en cuenta que este tipo de conexión conocida cómo "non inverting" sirve para amplificar la ganancia de la señal (hay varios tipos de configuraciones, pero eso esta fuera del tema del post), pero además existe una formula que nos sirve para calcular la ganancia.

Tomando en cuenta que los voltajes de salida en los conectores de audio de la mayoría de los dispositivos esta en un rango de hasta 2.2v, debemos de tratar de elevarlo al menos diez veces. En la practica he tenido problemas asumiendo esto, debido a que no poseo un osciloscopio, me resulta difícil obtener una medición exacta, pero podemos aquí usar una ganancia de 200, aunque parezca algo exagerado, debemos de tener en cuenta la amplificación no va a ir mas allá del voltaje de entrada que le demos al amplificador, por lo que si lo alimentamos con 12v, en el peor de los casos, tendremos 11.7v aproximadamente cómo máximo a la salida (eso dependiendo del amplificador, pero una vez mas, es un tema que merece un post a parte). Pero además 2.2v es el máximo por lo que tener al mínimo el volumen podemos esperar valores en el rango de los milivolts y si por ejemplo; tenemos 0.01v, al amplificarlo 200 veces, tendremos 2v

Ahora veamos los cálculos.

Y después simplemente resolvemos:

Es recomendable que se usen valores en el rango de los kilo ohms para R1 de esta forma evitamos algunos problemas, pero además, también es recomendable mantener la ganancia no tan alta, una ganancia de 300x es aceptable, pero hay que tener en cuenta que dependiendo del tipo de señal de entrada, del propio circuito integrado y otros factores, se puede introducir "ruido" o distorsión que normalmente no son deseables, pero para este tipo de proyecto, no afecta tanto.

Antes de continuar veamos un ejemplo donde tenemos el valor de R1 que es 100k; y R2 que es 50k; y solo queremos saber cual es la guanacia:

Sabiendo lo anterior, podemos hacer las conexiones al lm358 tomando en cuenta cuales son los pines.

• El pin 4 se conecta a tierra.
• El pin 8 se conecta a VCC, en nuestro caso 12v
• El pin 3 es la entrada, aquí conectaremos nuestra señal de audio.
• Entre el pin 1 y 2 conectaremos R2 .
• Entre el pin 2 y tierra, conectaremos R1.
• El pin 1 es la salida amplificada.

Con las conexiones hechas, tendremos la señal lista para la siguiente parte (y no te preocupes no tardara un mes para salir).

Y bien, por ahora es todo, si bien no hemos aprendido la capacidad real de los amplificadores operacionales, este post sirve cómo una aproximación a ellos. Recuerda que aquí no trato de enseñar los fundamentos de la electrónica, pero a lo mejor en el futuro, hago una explicación mas profunda de todo lo que se puede hacer. Recuerda que en el siguiente post publicaré la parte de las luces, pero además publicaré los esquemas para que puedas fabricar tu propia versión.

Los leo luego.

Vamos a programar #100 - Speedometer M. Versión Final.

 Hola de nuevo a todos, el día de hoy empezaremos a ver la versión final del velocímetro.

Este proyecto fue iniciado mas o menos por el 2018 y ha sufrido una serie de cambios a lo largo del tiempo, si bien la última versión que fue publicada funcionaba bien, poco a poco se fueron agregando funciones para hacerlo funcionar de manera optima con el mínimo de hardware posible (de ahí que nunca le agregue ningún tipo de botón). Finalmente, tras días de pruebas y pruebas, he decidido finalizar con este proyecto porque finalmente ha alcanzado el nivel de confiabilidad para poder usarse en el día a día.

// Incluir la libreria para la pantalla
#include <LiquidCrystal.h>
// Pines usados en la pantalla extraido de los ejemplos incluidos en la libreria
const int rs = 13, en = 12, d4 = 11, d5 = 10, d6 = 9, d7 = 8;
// iniciar el objeto LiquidCrystal
LiquidCrystal lcd(rs , en , d4 , d5 , d6 , d7);
// Este es el valor que debes de modificar para que funcione correctamente
// Puedes ver instrucciones en https://xworkforall.blogspot.mx/2018/03/vamos-programar-49.html
const float Llanta = 1.9572;
//Algunas variables
const int HallSensor1 = 3;
const int LED1 =  7;
const int LED2 = 6;
const int LED3 = 5;
int Vuelta = 0;
unsigned long OldTime = 0;
float Distancia = 0.0;
float Speed = 0.0;
int ledState = LOW;
int VoltSensor = 0;
float BattVolt = 0.0;

// v=99.99
char BuffVelocity[15];
//d=999.99
char BuffDistance[15];
//R=999999
char BuffRevolution[15]; 
//V=4.2
char BuffBattery[15];

//Incializar todo
void setup() {
  //Serial.begin(9600);
  lcd.begin(16, 2);
  lcd.setCursor(0, 0);
  lcd.print("@XWork");
  pinMode(HallSensor1, INPUT);
  attachInterrupt(digitalPinToInterrupt(HallSensor1) , GetVelocity , LOW);
  pinMode(LED1 , OUTPUT);
  pinMode(LED2 , OUTPUT);
  pinMode(LED3 , OUTPUT);
}

// Calcular la velocidad
void GetVelocity() {
  if (millis() - OldTime > 70) {
    Speed = Llanta / ((float)( millis() - OldTime) / 1000) * 3.6;
    OldTime = millis();
    Distancia = Distancia + Llanta / 1000;
    Vuelta += 1;
    if (ledState == LOW)
      ledState = HIGH;
    else 
      ledState = LOW;
  }
}
//Bucle principal
void loop() {
  VoltSensor = analogRead(A5);
  BattVolt = (VoltSensor * (10.0 / 1023.0));

  dtostrf(Speed , 5 , 2 , BuffVelocity);
  dtostrf(Distancia , 6 , 2, BuffDistance);
  sprintf(BuffRevolution , "R=%6d", Vuelta);
  dtostrf(BattVolt , 5 , 1, BuffBattery);
  
  lcd.setCursor(0, 0);
  lcd.print("d=");
  lcd.setCursor(2 , 0);
  lcd.print(BuffDistance);
  
  lcd.setCursor(9, 0);
  lcd.print("v=");
  lcd.setCursor(11, 0);
  lcd.print(BuffVelocity);
  
  lcd.setCursor(0,1);
  lcd.print(BuffRevolution);
  
  lcd.setCursor(9,1);
  lcd.print("V=");
  lcd.print(BuffBattery);
  
  digitalWrite(LED1 , ledState);
  digitalWrite(LED2 , ledState);
  digitalWrite(LED3 , ledState);
  
  if ((millis() - OldTime) > 3000){
    ledState = LOW;
    Speed = 0.0;
  }
}

Vamos a programar #99 - Modo obscuro en CSS 3.

 Hola de nuevo a todos, el día hoy vamos a ver como aplicar el modo obscuro a una página web de manera sencilla.

Si te has dado vueltas por el blog, podrás observar que ahora, dependiendo de la configuración del sistema operativo-navegador, la página cambia de color, si el tema es obscuro, la página también lo será y si es claro, pasa lo mismo.

Para poder aplicar un tema de un color para cada caso, existe una forma sencilla de hacerlo y para poder apreciarlo mejor, vamos a ver un ejemplo con los estilos para la calculadora de Vigenere.

Para empezar, veamos cuales son los estilos actuales (dependiendo de cuando leas esto, los estilos pudieron haber cambiado, para que no haya problema puedes ir y revisar el código fuente de la página en vivo).

.h1v
{
    font-size: 16px;
}
.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #000;
}
.textareaV
{
    width: 100%;
    height: 150px;
    padding: 5px 8px;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
    resize: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.textareaV:focus
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #50b;
    border-radius: 4px;
    resize: none;
}

.TextV
{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
}

.ButtonV
{
width: 100%;
    background-color: #57a2e2;
    border: none;
  border-radius: 4px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.ButtonV:hover
{
width: 100%;
    background-color: #224360;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #eee;
}

@media (prefers-color-scheme: dark) {
.formVigenere{
  background: #000;
  }