Hola chavos! Bueno pues en esta ocasión trabajaremos con algo un poco diferente a lo que habitualmente veníamos haciendo. Por esta vez no utilizaremos el lenguaje de programación C++ sino que utilizaremos el ya conocido C#. Supongo que ya todos deberían haber trabajado alguna vez con C# (casi siempre utilizado con la interfaz Microsoft Visual Studio), es relativamente un lenguaje más sencillo que C++ ya que la interfaz de usuario proporciona muchísima ayuda y es muy amigable con el usuario al momento de compilar y corregir errores ya que siempre muestra en donde se encuentran éstos. Ambos lenguajes son muy parecidos el uno al otro así que no nos será muy difícil poder trabajar en ambos.
Nuestra aplicación lo que hará será probar como se vería el cuerpo de una página HTML con diferentes combinaciones de colores de fondo, color de texto, color de los links dentro de la página, color de los links activos y color de los links ya visitados. Los colores los definiremos con el famoso RGB que ya tantas veces hemos utilizado antes en C++. Una vez que hayamos encontrado la combinación de colores que más nos agrade podremos copiar el código de etiquetas para poder copiarlo dentro de un documento HTML para crear nuestra propia página.
La aplicación contendrá muchos componentes en la Forma, enseguida los enlistamos:
-2 GroupBox
-5 RadioButton
-6 Labels o etiquetas
-3 ScrollBar (TrackBar en C++ Builder)
-2 Panel
-13 TextBox (Edit en C++ Builder)
-2 botones
Al igual que siempre pueden crear el diseño como deseen, en mi caso lo realice de la siguiente manera:
Ahora comenzamos con la codificación de los componentes,para ir al código presionamos F7. Ya estando ahí lo primero que haremos será definir algunas variables y métodos que necesitaremos, comenzamos por declarar las siguiente variables globales en el Form1.cs:
private string HexBG, HexText, HexLink, HexALink, HexVLink;
Enseguida definiremos 2 métodos que utilizaremos para los colores, primero para aplicar los colores:
internal void ApplyColor()
{
HexBG = txtBackground.Text;
HexText = txtText.Text;
HexLink = txtLink.Text;
HexALink = txtActiveLink.Text;
HexVLink = txtVisitedLink.Text;
string strRed = Convert.ToString(255 - scrRed.Value);
string strGreen = Convert.ToString(255 - scrGreen.Value);
string strBlue = Convert.ToString(255 - scrBlue.Value);
txtRed.Text = strRed;
txtGreen.Text = strGreen;
txtBlue.Text = strBlue;
pnlPreview.BackColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
string FmtRed = (255 - scrRed.Value).ToString("X");
if (FmtRed.Length == 1)
FmtRed = String.Concat("0", FmtRed);
string FmtGreen = (255 - scrGreen.Value).ToString("X");
if (FmtGreen.Length == 1)
FmtGreen = String.Concat("0", FmtGreen);
string FmtBlue = (255 - scrBlue.Value).ToString("X");
if (FmtBlue.Length == 1)
FmtBlue = String.Concat("0", FmtBlue);
if (rdoBackground.Checked == true)
{
string BG = "#";
BG = String.Concat(BG, FmtRed);
BG = String.Concat(BG, FmtGreen);
BG = String.Concat(BG, FmtBlue);
txtBackground.Text = BG;
pnlBody.BackColor = pnlPreview.BackColor;
txtTextPreview.BackColor = pnlPreview.BackColor;
txtLinkPreview.BackColor = pnlPreview.BackColor;
txtALinkPreview.BackColor = pnlPreview.BackColor;
txtVLinkPreview.BackColor = pnlPreview.BackColor;
HexBG = txtBackground.Text;
}
else if (rdoText.Checked == true)
{
string Txt = "#";
Txt = String.Concat(Txt, FmtRed);
Txt = String.Concat(Txt, FmtGreen);
Txt = String.Concat(Txt, FmtBlue);
txtText.Text = Txt;
txtTextPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexText = txtText.Text;
}
else if (rdoLink.Checked == true)
{
string TL = "#";
TL = String.Concat(TL, FmtRed);
TL = String.Concat(TL, FmtGreen);
TL = String.Concat(TL, FmtBlue);
txtLink.Text = TL;
txtLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexLink = txtLink.Text;
}
else if (rdoActiveLink.Checked == true)
{
string AL = "#";
AL = String.Concat(AL, FmtRed);
AL = String.Concat(AL, FmtGreen);
AL = String.Concat(AL, FmtBlue);
txtActiveLink.Text = AL;
txtALinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexALink = txtActiveLink.Text;
}
else if (rdoVisitedLink.Checked == true)
{
string VL = "#";
VL = String.Concat(VL, FmtRed);
VL = String.Concat(VL, FmtGreen);
VL = String.Concat(VL, FmtBlue);
txtVisitedLink.Text = VL;
txtVLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexVLink = txtVisitedLink.Text;
}
string BD = "<body bgcolor=\"";
BD = String.Concat(BD, HexBG);
BD = String.Concat(BD, "\" text=\"");
BD = String.Concat(BD, HexText);
BD = String.Concat(BD, "\" link=\"");
BD = String.Concat(BD, HexLink);
BD = String.Concat(BD, "\" alink=\"");
BD = String.Concat(BD, HexALink);
BD = String.Concat(BD, "\" vlink=\"");
BD = String.Concat(BD, HexVLink);
BD = String.Concat(BD, "\">");
txtResult.Text = BD;
}
Ahora para saber que opción tenemos seleccionada actualmente, si el fondo, texto, links, etc.:
internal void ClickOption(System.Drawing.Color Clr, String Result)
{
int red, green, blue;
pnlPreview.BackColor = Clr;
red = 255 - pnlPreview.BackColor.R;
green = 255 - pnlPreview.BackColor.G;
blue = 255 - pnlPreview.BackColor.B;
scrRed.Value = red;
scrGreen.Value = green;
scrBlue.Value = blue;
txtRed.Text = red.ToString();
txtGreen.Text = green.ToString();
txtBlue.Text = blue.ToString();
Result = String.Concat(Result, "#");
Result = String.Concat(Result, red.ToString("X"));
Result = String.Concat(Result, green.ToString("X"));
Result = String.Concat(Result, blue.ToString("X"));
}
Ahora sí empezamos con los componentes los primeros serán los ScrollBar, he aquí el primero:
private void scrRed_Scroll(object sender, ScrollEventArgs e)
{
ApplyColor();
}
Como el código de las 3 ScrollBar es el mismo utilizaremos el mismo evento para todos. Para hacer esto seleccionamos el segundo ScrollBar y en la ventana de Propiedades nos vamos a la pestaña Eventos (es donde está la imágen del relámpago) y en el evento Scroll seleccionamos la opción scrRed_Scroll. Realizamos lo mismo con el ScrollBar restante. Luego sigue la codificación de los RadioButton, damos doble clic en el que dice Background y escribimos el siguiente código en el evento:
private void rdoBackground_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
pnlBody.BackColor = BGColor;
ClickOption(pnlBody.BackColor, txtBackground.Text);
HexBG = txtBackground.Text;
}
Ahora seleccionamos el RadioButton con la etiqueta Text:
private void rdoText_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtTextPreview.BackColor = BGColor;
ClickOption(txtTextPreview.ForeColor, txtText.Text);
HexText = txtText.Text;
}
El que sigue es el RadioButton que tiene la etiqueta Link:
private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtALinkPreview.BackColor = BGColor;
ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
HexALink = txtActiveLink.Text;
}
Enseguida damos doble clic en el que está etiquetado como ActiveLink:
private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtALinkPreview.BackColor = BGColor;
ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
HexALink = txtActiveLink.Text;
}
Finalmente para terminar con los RadioButton damos doble clic en el que está etiquetado como VisitedLink:
private void rdoVisitedLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtVLinkPreview.BackColor = BGColor;
ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text);
HexVLink = txtVisitedLink.Text;
}
Para terminar codificaremos los botones, primero escribimos el siguiente código en el botón con el texto Copy:
private void btnCopy_Click(object sender, EventArgs e)
{
txtResult.SelectAll();
txtResult.Copy();
}
Y por último escribimos en el botón Close el código que tenemos a continuación:
private void btnClose_Click(object sender, EventArgs e)
{
Close();
}
Y ahora guardan su aplicación y la corren presionando ctrl+F5 o simplemente F5, el resultado será algo como lo siguiente:
Bueno amigos pues eso fue todo, espero que todo haya salido bien y que la aplicación les sirva para poder utilizarla más adelante en el diseño de alguna página web en HTML que quieran realizar. Por hoy me despido y espero que sigamos en contacto para seguir con más aplicaciones gráficas, la mayoría en C++ pero también algunas más en C#. Nos vemos chavos!.
miércoles, 29 de febrero de 2012
martes, 28 de febrero de 2012
Manipulación De Colores Con Corrimientos
Hola chavos! Aquí estoy de nuevo para continuar realizando aplicaciones gráficas con C++ Builder.
Bien pues no se si recuerdan que hace algún tiempo realizamos una aplicación en consola en C++ en la que comprobamos el funcionamiento de los corrimientos de bits. Sino lo recuerdan pues más vale que echen un vistazo unas entradas atrás o a sus aplicaciones guardadas ya que lo utilizaremos para realizar esta aplicación. Nuestra aplicación lo que hará será colorear un PaintBox según el botón que presionemos manipulando los colores por separado y no conjuntamente con el RGB como lo veníamos haciendo anteriormente. Precisamente para poder manipular los colores por separado será para lo que utilizaremos los corrimientos en esta ocasión.
Primeramente prepararemos la Forma, la cual tenemos que cambiar el color a negro (aunque es por gusto, si desean no hacerlo pueden dejarla como esta), cambiando la propiedad color a clBlack. Los componentes que tenemos que tener son los siguientes:
-1 Shape
-1 PaintBox (el cual tenemos que colocar sobre el shape)
-3 botones
-3 Timers
La Forma en mi caso quedo de la siguiente manera (aunque saben que cada quien puede tener su propio diseño):
Bueno pues comenzamos con la programación de los componentes, primeramente lo haremos con el primer botón que contiene la cadena "ROJO", en él colocamos el siguiente código:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer2->Enabled = false;
Timer3->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------
Con el anterior código lo que hacemos es refrescar el PaintBox para volver a pintarlo, así mismo habilitamos el primer Timer y deshabilitamos 2 restantes. Ahora continuamos con el segundo botón que contiene la cadena "VERDE" y escribimos el código que tenemos a continuación:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer3->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------
Al igual que el botón anterior primero refrescamos el PaintBox para volverlo a pintar y habilitamos el segundo Timer mientras deshabilitamos los otros 2. Luego codificamos el tercer y último botón, él cual contiene la leyenda "AZUL", el código es el siguiente:
void __fastcall TForm1::Button3Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer2->Enabled = false;
Timer3->Enabled = true;
}
//---------------------------------------------------------------------------
Este último realiza una función similar a los anteriores, refresca el PaintBox y habilita el tercer Timer para deshabilitar los otros 2. Después comenzamos con la codificación de los Timers, a continuación tenemos el Timer1:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100) + 155;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Este código como vemos lo que hace es dibujar 10,000 pixeles en algún lugar aleatorio dentro del PaintBox. El color lo definimos con números aleatorios entre 0 y 100 y luego le sumamos 155 para asegurarnos de obtener una tonalidad en rojo. Ahora codificamos el Timer2:
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 8;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
El código es parecido al anterior ya que igualmente dibujamos pixeles aleatoriamente dentro del PaintBox. Solo que en este botón el color además de definirlo con un número aleatorio y sumarle 155, le realizamos un corrimiento de 8 bits hacia la izquierda, para mover todos los bits hacia la izquierda y de esa manera cambiar todas las tonalidades de rojo a verde. Finalmente codificamos el Timer3:
void __fastcall TForm1::Timer3Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 16;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Con este código se realiza una función similar a la anterior, calculando primero un número aleatorio y luego realizandole un corrimiento de 16 bits a la izquierda para asegurarnos de cambiar todos los colores rojos a azules.
Para terminar solo compilamos el programa y lo corremos y observamos el resultado:
Bien amigos pues por hoy es todo espero que hayan aprendido a manipular los colores de manera independiente. Ahora que conocemos ambas maneras de manejar los colores tendremos la oportunidad de elegir que manera queremos utilizar dependiendo de cual necesitemos o cual se nos haga mas sencillo. Yo los espero en la próxima para continuar con las aplicaciones. Hasta la vista amigos!.
Bien pues no se si recuerdan que hace algún tiempo realizamos una aplicación en consola en C++ en la que comprobamos el funcionamiento de los corrimientos de bits. Sino lo recuerdan pues más vale que echen un vistazo unas entradas atrás o a sus aplicaciones guardadas ya que lo utilizaremos para realizar esta aplicación. Nuestra aplicación lo que hará será colorear un PaintBox según el botón que presionemos manipulando los colores por separado y no conjuntamente con el RGB como lo veníamos haciendo anteriormente. Precisamente para poder manipular los colores por separado será para lo que utilizaremos los corrimientos en esta ocasión.
Primeramente prepararemos la Forma, la cual tenemos que cambiar el color a negro (aunque es por gusto, si desean no hacerlo pueden dejarla como esta), cambiando la propiedad color a clBlack. Los componentes que tenemos que tener son los siguientes:
-1 Shape
-1 PaintBox (el cual tenemos que colocar sobre el shape)
-3 botones
-3 Timers
La Forma en mi caso quedo de la siguiente manera (aunque saben que cada quien puede tener su propio diseño):
Bueno pues comenzamos con la programación de los componentes, primeramente lo haremos con el primer botón que contiene la cadena "ROJO", en él colocamos el siguiente código:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer2->Enabled = false;
Timer3->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------
Con el anterior código lo que hacemos es refrescar el PaintBox para volver a pintarlo, así mismo habilitamos el primer Timer y deshabilitamos 2 restantes. Ahora continuamos con el segundo botón que contiene la cadena "VERDE" y escribimos el código que tenemos a continuación:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer3->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------
Al igual que el botón anterior primero refrescamos el PaintBox para volverlo a pintar y habilitamos el segundo Timer mientras deshabilitamos los otros 2. Luego codificamos el tercer y último botón, él cual contiene la leyenda "AZUL", el código es el siguiente:
void __fastcall TForm1::Button3Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer2->Enabled = false;
Timer3->Enabled = true;
}
//---------------------------------------------------------------------------
Este último realiza una función similar a los anteriores, refresca el PaintBox y habilita el tercer Timer para deshabilitar los otros 2. Después comenzamos con la codificación de los Timers, a continuación tenemos el Timer1:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100) + 155;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Este código como vemos lo que hace es dibujar 10,000 pixeles en algún lugar aleatorio dentro del PaintBox. El color lo definimos con números aleatorios entre 0 y 100 y luego le sumamos 155 para asegurarnos de obtener una tonalidad en rojo. Ahora codificamos el Timer2:
void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 8;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
El código es parecido al anterior ya que igualmente dibujamos pixeles aleatoriamente dentro del PaintBox. Solo que en este botón el color además de definirlo con un número aleatorio y sumarle 155, le realizamos un corrimiento de 8 bits hacia la izquierda, para mover todos los bits hacia la izquierda y de esa manera cambiar todas las tonalidades de rojo a verde. Finalmente codificamos el Timer3:
void __fastcall TForm1::Timer3Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 16;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------
Con este código se realiza una función similar a la anterior, calculando primero un número aleatorio y luego realizandole un corrimiento de 16 bits a la izquierda para asegurarnos de cambiar todos los colores rojos a azules.
Para terminar solo compilamos el programa y lo corremos y observamos el resultado:
Bien amigos pues por hoy es todo espero que hayan aprendido a manipular los colores de manera independiente. Ahora que conocemos ambas maneras de manejar los colores tendremos la oportunidad de elegir que manera queremos utilizar dependiendo de cual necesitemos o cual se nos haga mas sencillo. Yo los espero en la próxima para continuar con las aplicaciones. Hasta la vista amigos!.
domingo, 26 de febrero de 2012
Manipulación Y Manejo De Colores
Hola de nuevo amigos, ya estoy de nueva cuenta aquí para seguir realizando más aplicaciones gráficas en C++ Builder.
Bien pues en esta ocasión haremos una aplicación para mostrar un poco más sobre el manejo de los colores en C++. Será bastante sencillo pero muy importante para más adelante usarlo.
Bueno pues comenzamos como siempre con los componentes que necesitamos colocar en la Forma, los cuales los listamos a continuación:
-3 Labels
-3 TrackBar (con valores de 0 a 255)
-1 Panel
-1 Shape
-3 BitBtn (los cuales son como los botones normales pero a estos les podemos colocar una imágen personalizada en su propiedad Glyph)
La Forma en mi caso queda de la siguiente manera, aunque ustedes pueden acomodar sus componentes como gusten:
Ahora comenzamos con la codificación de los componentes correspondientes. El primero que necesitamos será el TrackBar1, damos clic en él y escribimos el siguiente código:
void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
Panel1->Color=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
//---------------------------------------------------------------------------
Para ahorrar espacio y no escribir tanto código utilizaremos el evento del TrackBar1 para los 2 restantes, ya que para todos el código es el mismo. Lo anterior lo haremos seleccionando uno de los TrackBar que no tienen código, luego en el Object Inspector que se encuentra en la parte inferior izquierda cambiamos a la pestaña Events y en la lista desplegable del evento OnChange seleccionamos la opción TrackBar1Change. Hacemos lo mismo con el último TrackBar.
Ahora damos doble clic en el botón que dice "Rojo", y escribimos el siguiente código:
void __fastcall TForm1::BitBtn1Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(255,0,0);
}
//---------------------------------------------------------------------------
Con lo anterior dibujamos 15,000 puntos de color rojo en un lugar aleatorio dentro del área del Shape. Luego damos doble clic en el botón "Verde" y escribimos el código siguiente:
void __fastcall TForm1::BitBtn2Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,255,0);
}
//---------------------------------------------------------------------------
Con esto lo que hacemos es dibujar en posiciones aleatorias 15,000 puntos de color verde dentro del área del Shape. Ahora en el ultimo BitbBtn que dice "Azul", escribimos este código:
void __fastcall TForm1::BitBtn3Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,0,255);
}
//---------------------------------------------------------------------------
Esto lo que hará sera dibujar 15,000 puntos en algún lugar aleatorio dentro del área del Shape.
Finalmente abrimos el evento OnCreate de la forma y en él escribimos el siguiente código que nos servirá para evitar el parpadeo al momento de repintar los componentes:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
this->DoubleBuffered=true;
Randomize();
}
//---------------------------------------------------------------------------
Ya para terminar compilan y corren su aplicación y el resultado debe ser algo como lo siguiente:
Bueno amigos pues por hoy eso es todo, nos vemos la próxima ocasión para realizar otra aplicación de graficación en C++ Builder. Hasta la próxima chavos.
Bien pues en esta ocasión haremos una aplicación para mostrar un poco más sobre el manejo de los colores en C++. Será bastante sencillo pero muy importante para más adelante usarlo.
Bueno pues comenzamos como siempre con los componentes que necesitamos colocar en la Forma, los cuales los listamos a continuación:
-3 Labels
-3 TrackBar (con valores de 0 a 255)
-1 Panel
-1 Shape
-3 BitBtn (los cuales son como los botones normales pero a estos les podemos colocar una imágen personalizada en su propiedad Glyph)
La Forma en mi caso queda de la siguiente manera, aunque ustedes pueden acomodar sus componentes como gusten:
Ahora comenzamos con la codificación de los componentes correspondientes. El primero que necesitamos será el TrackBar1, damos clic en él y escribimos el siguiente código:
void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
Panel1->Color=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
//---------------------------------------------------------------------------
Para ahorrar espacio y no escribir tanto código utilizaremos el evento del TrackBar1 para los 2 restantes, ya que para todos el código es el mismo. Lo anterior lo haremos seleccionando uno de los TrackBar que no tienen código, luego en el Object Inspector que se encuentra en la parte inferior izquierda cambiamos a la pestaña Events y en la lista desplegable del evento OnChange seleccionamos la opción TrackBar1Change. Hacemos lo mismo con el último TrackBar.
Ahora damos doble clic en el botón que dice "Rojo", y escribimos el siguiente código:
void __fastcall TForm1::BitBtn1Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(255,0,0);
}
//---------------------------------------------------------------------------
Con lo anterior dibujamos 15,000 puntos de color rojo en un lugar aleatorio dentro del área del Shape. Luego damos doble clic en el botón "Verde" y escribimos el código siguiente:
void __fastcall TForm1::BitBtn2Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,255,0);
}
//---------------------------------------------------------------------------
Con esto lo que hacemos es dibujar en posiciones aleatorias 15,000 puntos de color verde dentro del área del Shape. Ahora en el ultimo BitbBtn que dice "Azul", escribimos este código:
void __fastcall TForm1::BitBtn3Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,0,255);
}
//---------------------------------------------------------------------------
Esto lo que hará sera dibujar 15,000 puntos en algún lugar aleatorio dentro del área del Shape.
Finalmente abrimos el evento OnCreate de la forma y en él escribimos el siguiente código que nos servirá para evitar el parpadeo al momento de repintar los componentes:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
this->DoubleBuffered=true;
Randomize();
}
//---------------------------------------------------------------------------
Ya para terminar compilan y corren su aplicación y el resultado debe ser algo como lo siguiente:
Bueno amigos pues por hoy eso es todo, nos vemos la próxima ocasión para realizar otra aplicación de graficación en C++ Builder. Hasta la próxima chavos.
sábado, 25 de febrero de 2012
Pixel En Movimiento
Hola amigos! Aquí ando de nueva cuenta para seguir mostrándoles ejemplos de aplicaciones gráficas en C++ Builder y así seguir aprendiendo cada vez más cosas nuevas.
Bueno pues en esta ocasión realizaremos una aplicación para crear un pixel y moverlo alrededor del perímetro de la forma, y cada vez que complete la vuelta volverá a hacer los mismo pero cada vez más hacia el centro, formando el llamado efecto serpiente.
Para realizar esta aplicación lo que necesitamos es pintar la forma de color negro cambiando la propiedad Color a clBlack. Por esta vez el único componente que necesitaremos en la forma será un Timer.
Ahora nos vamos al archivo H y en las declaraciones de usuario declaramos lo siguiente:
private: // User declarations
POINTS Puntos[1000];
int inicioX;
int inicioY;
int fin;
Bien, habiendo realizado lo anterior procedemos con la codificación de el único componente que tenemos en la forma, es decir, el Timer, en él escribimos el siguiente código:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
if(Puntos[0].x <= ClientWidth && Puntos[0].y == inicioY)
{
Puntos[0].x++;
}
if(Puntos[0].x == ClientWidth - fin)
{
Puntos[0].y++;
}
if(Puntos[0].y == ClientHeight - fin)
{
Puntos[0].x--;
if(Puntos[0].x == inicioY + 2)
{
inicioY = inicioY + 2;
}
}
if(Puntos[0].x == inicioY)
{
Puntos[0].y--;
if(Puntos[0].y == inicioX+2)
{
inicioX = inicioX + 2;
fin = fin + 2;
}
}
Canvas->Pixels[Puntos[0].x][Puntos[0].y] = clYellow;
}
//---------------------------------------------------------------------------
En la línea final del código podemos notar que el color lo tenemos siempre que corramos el programa en amarillo, ustedes pueden cambiar esa parte del código y poner el color que más les guste si así lo desean.
Ahora necesitamos 2 eventos, el primero de ellos es el evento OnCreate de la forma, lo abrimos y colocamos el siguiente código:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
inicioX = 0;
inicioY = 0;
fin = 1;
}
//---------------------------------------------------------------------------
Con este código lo que hacemos es inicializar las variables, ahora el segundo evento que necesitamos es el llamado OnResize, también de la forma, una vez que lo hayamos abierto colocamos el siguiente código en él:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Con esto redimensionamos todo en caso de que la forma cambie de tamaño.
Y pues ya saben lo que sigue chavos, compilan y corren su aplicación y debería verse de la siguiente manera:
Espero que pueda notarse el efecto del movimiento del pixel en la parte superior e izquierda de la forma, sino es así pues ya verán en su aplicación el efecto que genera al ir simulando el movimiento.
Pues en esta ocasión fue todo amigos, continúen practicando lo que hemos aprendido hasta ahora y nos vemos en la próxima para seguir realizando más aplicaciones en C++ Builder. Nos vemos amigos!
Bueno pues en esta ocasión realizaremos una aplicación para crear un pixel y moverlo alrededor del perímetro de la forma, y cada vez que complete la vuelta volverá a hacer los mismo pero cada vez más hacia el centro, formando el llamado efecto serpiente.
Para realizar esta aplicación lo que necesitamos es pintar la forma de color negro cambiando la propiedad Color a clBlack. Por esta vez el único componente que necesitaremos en la forma será un Timer.
Ahora nos vamos al archivo H y en las declaraciones de usuario declaramos lo siguiente:
private: // User declarations
POINTS Puntos[1000];
int inicioX;
int inicioY;
int fin;
Bien, habiendo realizado lo anterior procedemos con la codificación de el único componente que tenemos en la forma, es decir, el Timer, en él escribimos el siguiente código:
void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
if(Puntos[0].x <= ClientWidth && Puntos[0].y == inicioY)
{
Puntos[0].x++;
}
if(Puntos[0].x == ClientWidth - fin)
{
Puntos[0].y++;
}
if(Puntos[0].y == ClientHeight - fin)
{
Puntos[0].x--;
if(Puntos[0].x == inicioY + 2)
{
inicioY = inicioY + 2;
}
}
if(Puntos[0].x == inicioY)
{
Puntos[0].y--;
if(Puntos[0].y == inicioX+2)
{
inicioX = inicioX + 2;
fin = fin + 2;
}
}
Canvas->Pixels[Puntos[0].x][Puntos[0].y] = clYellow;
}
//---------------------------------------------------------------------------
En la línea final del código podemos notar que el color lo tenemos siempre que corramos el programa en amarillo, ustedes pueden cambiar esa parte del código y poner el color que más les guste si así lo desean.
Ahora necesitamos 2 eventos, el primero de ellos es el evento OnCreate de la forma, lo abrimos y colocamos el siguiente código:
void __fastcall TForm1::FormCreate(TObject *Sender)
{
inicioX = 0;
inicioY = 0;
fin = 1;
}
//---------------------------------------------------------------------------
Con este código lo que hacemos es inicializar las variables, ahora el segundo evento que necesitamos es el llamado OnResize, también de la forma, una vez que lo hayamos abierto colocamos el siguiente código en él:
void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------
Con esto redimensionamos todo en caso de que la forma cambie de tamaño.
Y pues ya saben lo que sigue chavos, compilan y corren su aplicación y debería verse de la siguiente manera:
Espero que pueda notarse el efecto del movimiento del pixel en la parte superior e izquierda de la forma, sino es así pues ya verán en su aplicación el efecto que genera al ir simulando el movimiento.
Pues en esta ocasión fue todo amigos, continúen practicando lo que hemos aprendido hasta ahora y nos vemos en la próxima para seguir realizando más aplicaciones en C++ Builder. Nos vemos amigos!
jueves, 23 de febrero de 2012
Efecto Spray
Hola de nuevo amigos! Me alegro de saludarlos y pues en esta ocasión continuaremos con las aplicaciones gráficas en C++ Builder. El programa que realizaremos en esta ocasión será el famoso efecto de spray que puede tomar la brocha en el programa paint de Windows, ya alguna vez debieron de haberlo utilizado.
Pues empezamos con nuestra aplicación y lo primero que necesitamos es cambiar el color de la forma a blanco en su propiedad Color cambiamos el valor por defecto a clWhite. Después colocamos los siguientes componentes en la forma:
-1 GroupBox
-4 etiquetas o Labels
-3 TrackBar
-1 Edit o caja de texto
-1 UpDown
La forma debe quedar de la siguiente manera:
Lo primero que necesitamos es asociar al UpDown con el Edit. Luego configuramos los valores del UpDown en 0 como mínimo y 100 como máximo.
Bien pues en esta aplicación trabajaremos sobre los eventos de la forma, especialmente en 2. El primero de ellos es el evento OnMouseDown de dicha forma, en él escribimos el siguiente código:
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
for(int N = 0; N < 100; N++)
{
Puntos[N].x = random(Edit1->Text.ToInt()) + X;
Puntos[N].y = random(Edit1->Text.ToInt()) + Y;
Canvas->Pixels[Puntos[N].x][Puntos[N].y]=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
}
//---------------------------------------------------------------------------
El código anterior nos sirve para dibujar de manera aleatoria los pixeles y simular el efecto spray de la brocha con el color dependiendo de las posiciones de los TrackBar, siendo cada una de éstas uno de los valores del RGB. Ahora abrimos el evento OnMouseMove de la forma y tecleamos el código que tenemos a continuación:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
if(Shift.Contains(ssLeft))
{
FormMouseDown(Sender, mbLeft, Shift, X, Y);
}
}
//---------------------------------------------------------------------------
En el evento anterior lo que hacemos es llamar al evento FormMouseMove cada vez que se mueve el cursor del mouse sobre la forma, dibujando los pixeles aleatorios por cada parte de la forma por la que se mueve el mouse.
Ahora compilamos nuestra aplicación y la corremos para observar nuestro resultado:
De ésta manera descubrimos que los efectos que se generan en programas como el paint de Windows no son por obra de magia sino que son efectos que nosotros podemos programar. Y bueno pues por esta ocasión es todo por mi parte, espero que hayamos aprendido un poco más de lo que ya sabíamos y nos vemos en la siguiente ocasión para seguir con más aplicaciones. Hasta luego amigos!
Pues empezamos con nuestra aplicación y lo primero que necesitamos es cambiar el color de la forma a blanco en su propiedad Color cambiamos el valor por defecto a clWhite. Después colocamos los siguientes componentes en la forma:
-1 GroupBox
-4 etiquetas o Labels
-3 TrackBar
-1 Edit o caja de texto
-1 UpDown
La forma debe quedar de la siguiente manera:
Lo primero que necesitamos es asociar al UpDown con el Edit. Luego configuramos los valores del UpDown en 0 como mínimo y 100 como máximo.
Bien pues en esta aplicación trabajaremos sobre los eventos de la forma, especialmente en 2. El primero de ellos es el evento OnMouseDown de dicha forma, en él escribimos el siguiente código:
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
for(int N = 0; N < 100; N++)
{
Puntos[N].x = random(Edit1->Text.ToInt()) + X;
Puntos[N].y = random(Edit1->Text.ToInt()) + Y;
Canvas->Pixels[Puntos[N].x][Puntos[N].y]=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
}
//---------------------------------------------------------------------------
El código anterior nos sirve para dibujar de manera aleatoria los pixeles y simular el efecto spray de la brocha con el color dependiendo de las posiciones de los TrackBar, siendo cada una de éstas uno de los valores del RGB. Ahora abrimos el evento OnMouseMove de la forma y tecleamos el código que tenemos a continuación:
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
if(Shift.Contains(ssLeft))
{
FormMouseDown(Sender, mbLeft, Shift, X, Y);
}
}
//---------------------------------------------------------------------------
En el evento anterior lo que hacemos es llamar al evento FormMouseMove cada vez que se mueve el cursor del mouse sobre la forma, dibujando los pixeles aleatorios por cada parte de la forma por la que se mueve el mouse.
Ahora compilamos nuestra aplicación y la corremos para observar nuestro resultado:
De ésta manera descubrimos que los efectos que se generan en programas como el paint de Windows no son por obra de magia sino que son efectos que nosotros podemos programar. Y bueno pues por esta ocasión es todo por mi parte, espero que hayamos aprendido un poco más de lo que ya sabíamos y nos vemos en la siguiente ocasión para seguir con más aplicaciones. Hasta luego amigos!
miércoles, 22 de febrero de 2012
Corrimientos En Consola
Hola amigos, por esta ocasión tengo un poco de prisa así que haremos otra aplicación sencilla pero que nos servirá para realizar aplicaciones más adelante.
Lo que vamos a ver en esta ocasión serán las operaciones con bits llamadas corrimientos. Se preguntarán ustedes, ¿qué son los corrimientos?. Bueno pues son operaciones a nivel de bits representadas con los operadores "<<" (corrimiento a la izquierda) y ">>" (corrimiento a la derecha). Ambos operadores lo único que hacen es mover los bits del operando de la izquierda el número de posiciones indicadas por el operador de la derecha. Dichos desplazamientos ocurren en la dirección indicada por el mismo operador.
Pues ahora realizaremos una aplicación para mostrar un ejemplo de corrimientos con bits. La diferencia con las aplicaciones pasadas es que esta vez no la realizaremos en el modo visual sino en el modo consola.
Primeramente abrimos el C++ Builder 6 y le damos clic a la opción "File" de la barra de menús, después seleccionamos "Other..." y en la nueva ventana que se abre buscamos la opción "Console Wizard". Al darle clic en "OK" se abrirá otra ventana, en ella seleccionamos la opción C++ y damos "OK".
Ahora tendremos el método main con una linea de código por default, lo primero que tenemos que hacer es borrar dicha línea de código y escribir las siguientes:
int main(int argc, char* argv[])
{
int a=1;
cout<<"Valor de a: "<<a;
a=a<<8;
cout<<"\nValor de a: "<<a;
cin.get();
}
//---------------------------------------------------------------------------
Bueno pues vemos que primero le asignamos a la variable "a" el valor de 1, luego imprimimos en pantalla ese valor, después aplicamos el corrimiento de dicho valor 8 bits a la izquierda e imprimimos de nuevo el valor en pantalla.
Compilamos nuestra aplicación y la corremos y tendremos lo siguiente:
Bueno chavos por hoy es todo, espero que comprendan, la próxima ocasión realizaremos otra aplicación en modo visual de graficación con C++. Hasta la vista amigos!.
Ahora tendremos el método main con una linea de código por default, lo primero que tenemos que hacer es borrar dicha línea de código y escribir las siguientes:
int main(int argc, char* argv[])
{
int a=1;
cout<<"Valor de a: "<<a;
a=a<<8;
cout<<"\nValor de a: "<<a;
cin.get();
}
//---------------------------------------------------------------------------
Bueno pues vemos que primero le asignamos a la variable "a" el valor de 1, luego imprimimos en pantalla ese valor, después aplicamos el corrimiento de dicho valor 8 bits a la izquierda e imprimimos de nuevo el valor en pantalla.
Compilamos nuestra aplicación y la corremos y tendremos lo siguiente:
Bueno chavos por hoy es todo, espero que comprendan, la próxima ocasión realizaremos otra aplicación en modo visual de graficación con C++. Hasta la vista amigos!.
lunes, 20 de febrero de 2012
Copiar Texto
Hola chavos! Espero que sigan practicando mucho con el C++ Builder y que ya se consideren todos unos buenos programadores de aplicaciones gráficas en C++.
Pues en esta ocasión mostraremos algo muy sencillo y muy rápido de hacer, esto es bastante simple en comparación con aplicaciones pasadas, pero siempre es bueno mostrar otras maneras diferentes de hacer las cosas. En este aplicación les enseñare 2 distintas maneras de copiar texto, primero de un Edit (o textBox como se le conoce en C#) a un label y después de un Edit a otro Edit.
Para realizar esta aplicación necesitaremos colocar los siguientes componentes en la forma:
-2 botones
-3 cajas de texto (Edit)
- 1 etiqueta (label)
Los podemos acomodar de la siguiente manera:
Bueno pues comenzamos con el código que es bastante sencillo y simple, primero colocamos el siguiente código en el evento clic del primer botón, el cual nos servirá para copiar el texto del primer Edit al label que tenemos:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
char *cad = new char[Edit1->Text.Length()];
strcpy(cad, Edit1->Text.c_str());
Label1->Caption = cad;
}
//---------------------------------------------------------------------------
En el código anterior podemos notar que utilizamos un arreglo de char llamado *cad, que es un puntero. Utilizamos la función strcpy() para poder copiar el texto del Edit en el arreglo de char, finalmente asignamos el arreglo a la propiedad Caption del label para escribirlo en la etiqueta.
Ahora escribimos el código del segundo botón:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
int n = Edit2->Text.ToIntDef(30);
if( n>29 && n<100)
Edit3->Text = Edit2->Text;
}
//---------------------------------------------------------------------------
Bueno pues en este botón lo primero transformamos el texto escrito en el Edit2 en variables enteras y finalmente verificamos si son letras y si esto es así copiamos el texto del Edit2 al Edit3.
Por último la aplicación corriendo debería ser algo como lo siguiente:
Bueno amigos por hoy fue todo, solo realizamos esta simple aplicación pero pues todo nos sirve para algo, así que nos vemos en la próxima. Hasta luego!.
Pues en esta ocasión mostraremos algo muy sencillo y muy rápido de hacer, esto es bastante simple en comparación con aplicaciones pasadas, pero siempre es bueno mostrar otras maneras diferentes de hacer las cosas. En este aplicación les enseñare 2 distintas maneras de copiar texto, primero de un Edit (o textBox como se le conoce en C#) a un label y después de un Edit a otro Edit.
Para realizar esta aplicación necesitaremos colocar los siguientes componentes en la forma:
-2 botones
-3 cajas de texto (Edit)
- 1 etiqueta (label)
Los podemos acomodar de la siguiente manera:
Bueno pues comenzamos con el código que es bastante sencillo y simple, primero colocamos el siguiente código en el evento clic del primer botón, el cual nos servirá para copiar el texto del primer Edit al label que tenemos:
void __fastcall TForm1::Button1Click(TObject *Sender)
{
char *cad = new char[Edit1->Text.Length()];
strcpy(cad, Edit1->Text.c_str());
Label1->Caption = cad;
}
//---------------------------------------------------------------------------
En el código anterior podemos notar que utilizamos un arreglo de char llamado *cad, que es un puntero. Utilizamos la función strcpy() para poder copiar el texto del Edit en el arreglo de char, finalmente asignamos el arreglo a la propiedad Caption del label para escribirlo en la etiqueta.
Ahora escribimos el código del segundo botón:
void __fastcall TForm1::Button2Click(TObject *Sender)
{
int n = Edit2->Text.ToIntDef(30);
if( n>29 && n<100)
Edit3->Text = Edit2->Text;
}
//---------------------------------------------------------------------------
Bueno pues en este botón lo primero transformamos el texto escrito en el Edit2 en variables enteras y finalmente verificamos si son letras y si esto es así copiamos el texto del Edit2 al Edit3.
Por último la aplicación corriendo debería ser algo como lo siguiente:
Bueno amigos por hoy fue todo, solo realizamos esta simple aplicación pero pues todo nos sirve para algo, así que nos vemos en la próxima. Hasta luego!.
Suscribirse a:
Entradas (Atom)










