vhanla

Aligerando el entorno de desarrollo de Visual Studio 2015 Community

2016-08-20T21:54:00.001-05:00

Seguramente al instalar Visual Studio 2015 Community lo tendrá configurado como viene por defecto, pero muchas veces esta configuración incluye características habilitadas que ralentizan el IDE, convirtiendo nuestra tarea de programar en algo tedioso y lento; y aunque quizás requiera de esas características, normalmente para quienes no la necesitan es mejor deshabilitarlas para obtener una respuesta más rápida tanto del depurador como del IDE.

Herramientas —> Opciones… —>Control de código fuente : elegimos “Ninguno” como Complemento de control de código fuente actual, en lugar de GIT u otro, desde luego si no lo necesita.
Herramientas —> Opciones… —>Entorno —> Configuración Sincronizada : y desactivamos la opción “Sincronizar la configuración en todos los dispositivos al iniciar sesión en Visual Studio”.

Si tiene un proyecto muy grande quizás sería mejor deshabilitar IntelliSense a “Solo compilación”

Para resolver la lenta carga de símbolos en ASP

Herramientas —> Opciones… —>Depuración —> General : Habilitar Solo mi código junto al heredado
Herramientas —> Opciones… —>Depuración —> Símbolos : Desactivar “Servidores de símbolos de Microsoft” y asignar una carpeta donde se descargará estos símbolos

Si le molesta ver las herramientas de diagnóstico gráfico al depurar (esas gráficas de rendimiento), lo puede hacer

Herramientas —> Opciones… —>Depuración —> General : Ahí deshabilitamos “Habilitar herramientas de diagnóstico durante la depuración”

Hay otras más recomendaciones en StackOverflow, pero estas me sirvieron, al menos en mi caso.

Fuentes:

Creating a Yosemite shadow for borderless form in Delphi [part 3]

2016-06-30T00:28:00.001-05:00

In this part we are going to use the shadow form from out project source code and main form.

program ShadowDemo;

{$R *.dres}

uses
   Vcl.Forms,
   Yosemite in 'Yosemite.pas' {Form1},
   FormShadow in 'FormShadow.pas' {frmShadow};

{$R *.res}

begin
   Application.Initialize;
   Application.MainFormOnTaskbar := True;
   Application.CreateForm(TForm1, Form1);
Application.CreateForm(TfrmShadow, frmShadow);
   Application.Run;
end.

We must make sure that our FormShadow.pas is included in the Uses section of our project code and also in the main form. As well we need it to be created after our main form as shown in the code above.

procedure TForm1.FormCreate(Sender: TObject);
begin
   BorderStyle := bsNone;
   Position := poScreenCenter;
   Application.OnActivate := OnFocus;
   Application.OnDeactivate := OnUnfocus;
   Constraints.MinHeight := 160;
   Constraints.MinWidth := 160;
   DoubleBuffered := True;
end;

Let’s start with the FormCreate procedure, where we set our main form with no border style, assign OnActivate and OnDeactivate procedures that are going to be crucial for our main form to be assigned with the correct shadow if it is focused or we are not using this window.

procedure TForm1.OnFocus(Sender: TObject);
begin
frmShadow.ActivateShadow := True;
end;

procedure TForm1.OnUnfocus(Sender: TObject);
begin
frmShadow.ActivateShadow := False;
end;

Setting ActivateShadow to true or false, will immediately update the shadow type.

procedure TForm1.FormShow(Sender: TObject);
begin
   frmShadow.ClientWidth:=ClientWidth+frmShadow.Margins.Left+frmShadow.Margins.Right;
   frmShadow.ClientHeight:=ClientHeight+frmShadow.Margins.Top+frmShadow.Margins.Bottom;
   frmShadow.Left := Self.Left - frmShadow.Margins.Left;
   frmShadow.Top := Self.Top - frmShadow.Margins.Top;
   ShowWindow(frmShadow.Handle, SW_SHOWNA);
   frmShadowEnabled := True;
end;

We must prepare the size and position of the shadow form in the FormShow procedure, as you noticed it, we are using the frmShadow.Margins to configure the shadow width and height, as well its left and top position. Following we will show the shadow form and tell that frmShadowEnabled is TRUE, that will be necessary for other procedures that will need to read frmShadow values, and if they try to read them before the shadow form is created, a read error will raise.

For example, we will also need to update the shadow form size when we resize our main form, so the FormResize procedure will be available as soon as the form is created, and even before the formShadow is created.

procedure TForm1.FormResize(Sender: TObject);
begin

if WindowState = wsMaximized then
   begin
     ShowWindow(frmShadow.Handle, SW_HIDE);
   end
   else if WindowState = wsNormal then
   begin
     try
       if frmShadowEnabled then
       begin
        if not IsWindowVisible(frmShadow.Handle) then
         begin
            ShowWindow(frmShadow.Handle, SW_SHOWNA);
         end;
         frmShadow.ClientWidth:=ClientWidth+frmShadow.Margins.Left+frmShadow.Margins.Right;
         frmShadow.ClientHeight:=ClientHeight+frmShadow.Margins.Top+frmShadow.Margins.Bottom;
       end;
     except
     end;
   end
   else if WindowState = wsMinimized then
   begin
     ShowWindow(frmShadow.Handle, SW_HIDE);
   end;

Repaint;
end;

This resize procedure will update the size of the shadow form too, but when calling IsWindowVisible function, if the shadow form is not created yet, it will fail, so we avoid that error by using the frmShadowEnabled as a boolean help.

Finally, we need to make sure our shadow form to stick firmly to our main form, so we will use the WMMove function which reacts to a window move message.

protected
    procedure WMMove(var Msg: TWMMove); message WM_MOVE;
…

procedure TForm1.WMMove(var Msg: TWMMove);
begin
   inherited;

if frmShadowEnabled then
   begin
     frmShadow.Left := Self.Left - frmShadow.Margins.Left;
     frmShadow.Top := Self.Top - frmShadow.Margins.Top;
   end;
end;

And that’ll do, making sure that the form shadow is ready, we can update its Top and Left values accordingly.

Of course there are other procedures that we will need to add, such us those required to resize a borderless window, drag it, etc. I have mentioned some of them in my other blog post about creating a Metro like window in Delphi. You can also see some of them in the source code of this tutorial.

Conclusion

This is a simple method to create a custom shadow for our windows, specially for borderless windows, giving it back a nice shadow instead of nothing or the very basic CS_DROPSHADOW style (those applied to contextual menus).

However, there are some disadvantages, like creating many more extra forms for other borderless forms in our application, but converting the shadow to a Delphi component will be enough.

Another issue that it presents, is that it flickers while resizing our window, not sure how to fix it, but at least it is working fine.

Finally

The source code and executable demo can be downloaded here.

Hope you liked it, and if you have more experience about this topic, feel free to leave a comment to improve this method I found by “write and try”.

<— Creating a Yosemite shadow for borderless form in Delphi [part 2]

Creating a Yosemite shadow for borderless form in Delphi [part 2]

2016-06-30T00:26:00.001-05:00

Now that we have our shadow picture, it is time to create our project, so with no further ado let’s create a new VCL Form application in Delphi, and add another VCL form, that will be our shadow form which will be an alpha layered window, that’s because we will use the main form as the content holder, and VCL controls are not compatible with alpha layered windows, neither can be translucent, so that’s why we need two forms.

For the sake of small footprint of the pictures, I cropped them to 252x252 resulting in the following:

Name the second form as frmShadow and then add those two pictures as resources: Project->Resources and images

Identify them as SHADOWACTIVE and SHADOWINACTIVE accordingly.

The goal is to load those two pictures in memory, crop the TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom and BottomRight parts of each and create another one that will fit the main form, updating it when we resize our main form too.

The sides will be stretched to the new size, but the corners will need to be static sizes. However, to make it work properly we need to limit the minimum size of our window at least to 126 x 126.

Another thing to consider is the coordinates of each border in order to map correctly the shadow position. Just knowing width and height of the top and bottom corners will suffice, as for this demo at least. However, we must know the margins too.

Lets edit our frmShadow class in FormShadow.pas

We are going to use GDIPLus library to redraw the shadow, so add in Uses GDIPAPI , GDIPOBJ and ActiveX too.

Add these variables in the private section of our frmShadow class:

{ Private declarations }
shadowActive, shadowInactive: TGPBitmap;
shadowState: boolean;
shadowActiveMargin, shadowInactiveMargin: TRect; // each shadow has different margins
shadowBorderSize: Integer; //width x height (square) to pick on each corner for drawing

First two Bitmaps will hold those two pictures to use it as a base template.

shadowState will be used to tell which shadow to use

shadowActiveMargin and shadowInactiveMargin will hold information of the margins of the sides of our pictures, so we will know what parts of the pictures are the shadow to copy

shadowBorderSize and integer, which would be replace by a constant, and it will hold a minimum square area to copy from the templates, in our example will set it to 100x100, which is enough to get the borders and sides of the shadow templates

We will also need another public variable that will be used to tell our main form where to align the shadow form.

{Public declarations}
Margins: TRect;

Now, we will add two procedures in our private section

procedure SetShadowState(const value: boolean);
procedure UpdateShadow;

And a public property to switch shadows from the another form

published
property ActivateShadow: boolean read shadowState write SetShadowState;

The procedure SetShadowState will be called by ActivateShadow, when we assign it a value: True or False, which means that if set to True, our form will use the bold shadow and if it is False, it will use the light shadow. Afterwards it will call UpdateShadow procedure to redraw this form using the selected shadow.

procedure TfrmShadow.SetShadowState(const value: boolean);
begin
shadowState := value;
UpdateShadow;
end;

To continue with UpdateShadow, first we must load those pictures from our resources, set our shadow form style and the private variables’ values. Before UpdateShadow code, let’s modify the FormCreate method.

procedure TfrmShadow.FormCreate(Sender: TObject);
var
   Stream: TStream;
   StreamAdapter: IStream;
begin

// Load both pictures
   Stream := TResourceStream.Create(HINSTANCE, 'SHADOWACTIVE', RT_RCDATA);
   try
     StreamAdapter := TStreamAdapter.Create(Stream);
     try
       shadowActive := TGPBitmap.Create(StreamAdapter);
     finally
       StreamAdapter := nil;
     end;
   finally
     FreeAndNil(Stream);
   end;
//set its correspondant margins and borders
   // this can be extended to use config settings and external themes
   // but for now it will only be static values
   shadowBorderSize := 100;
   shadowActiveMargin := Rect(48, 25, 48, 73);

Stream := TResourceStream.Create(HINSTANCE, 'SHADOWINACTIVE', RT_RCDATA);
   try
     StreamAdapter := TStreamAdapter.Create(Stream);
     try
       shadowInactive := TGPBitmap.Create(StreamAdapter);
     finally
       StreamAdapter := nil;
     end;
   finally
     FreeAndNil(Stream);
   end;

shadowInactiveMargin := Rect(36, 27, 36, 43);

//let's calculate the maximum margin
   //Margins.Left := Max(shadowActiveMargin.Left, shadowInactiveMargin.Left);
   //but… since we already know, just write them
   Margins := Rect(48, 27, 48, 73);

BorderStyle := bsNone;
   SetWindowLong(Handle, GWL_EXSTYLE, GetWindowLong(Handle, GWL_EXSTYLE) or WS_EX_LAYERED or WS_EX_TRANSPARENT or WS_EX_TOOLWINDOW or WS_EX_NOACTIVATE);
   ActivateShadow := True;
end;

procedure TfrmShadow.FormDestroy(Sender: TObject);
begin
   FreeAndNil(shadowActive);
   FreeAndNil(shadowInactive);
end;

As you can read the previous code, we loaded our two shadow templates from the resources of our executable, to shadowActive and shadowInactive, then set the shadowBorderSize to 100 (100x100), and also the margins for both pictures and a global margin which will keep the maximum margins between those two margins.

shadowActiveMargin and shadowInactiveMargin have different margins from the sides, and Margins will consider the maximum margins, this will be useful as offset to draw the shadows in the correct X,Y position when switched.

Of course our frmShadow form will not have border style (bsNone), and with SetWindowLong we establish it as WS_EX_LAYERED and WS_EX_TRANSPARENT primarily, the first style is required to draw with a Blending Function our alpha channeled shadow picture and the second style to make it unresponsive to user interaction (no clicks to answer, it will allow us to avoid focusing this form). The other ones are optional.

We set the bold shadow by default with ActivateShadow := True; and we should end this form deleting those two pictures that we created on memory.

procedure TfrmShadow.FormResize(Sender: TObject);
begin
UpdateShadow;
end;

If our shadow form is resized, we need to update the shadow with a new size too.

Finally, the most important part, UpdateShadow procedure, the only responsible to create our resized shadow:

procedure TfrmShadow.UpdateShadow;
type
   pTGPBitmap = ^TGPBitmap;
var
   BlendFunction: TBlendFunction;
   Bitmap: TBitmap;
   BitmapPoint: TPoint;
   BitmapHandle: HBITMAP;
   BitmapSize: TSize;
   Bmp: TGPGraphics;
   Buf: TGPBitmap;
   R: TGPRect;
   ShadowPicture: pTGPBitmap;
   ShadowSize: TSize;
   MarginOffset: TRect;
begin
   Bitmap := TBitmap.Create;
   try
     Buf := TGPBitmap.Create(ClientWidth, ClientHeight, 0, PixelFormat32bppARGB, nil);
     try
       Bmp := TGPGraphics.Create(Buf);
       try
         Bmp.SetPixelOffsetMode(PixelOffsetModeHalf); // to fix bad stretching
         Bmp.Clear(MakeColor(0, 0, 0, 0));
         Bmp.SetInterpolationMode(InterpolationModeNearestNeighbor);
       //choose which of those two shadows we will use
         if shadowState then
         begin
           MarginOffset := Rect( Margins.Left - shadowActiveMargin.Left,
           Margins.Top - shadowActiveMargin.Top,
           Margins.Right - shadowActiveMargin.Right,
           Margins.Bottom - shadowActiveMargin.Bottom);
           ShadowPicture := @ShadowActive;
           ShadowSize.cx := shadowActive.GetWidth;
           ShadowSize.cy := shadowActive.GetHeight;
         end
         else
         begin
           MarginOffset := Rect( Margins.Left - shadowInactiveMargin.Left,
           Margins.Top - shadowInactiveMargin.Top,
           Margins.Right - shadowInactiveMargin.Right,
           Margins.Bottom - shadowInactiveMargin.Bottom);
           ShadowPicture := @ShadowInactive;
           ShadowSize.cx := shadowInactive.GetWidth;
           ShadowSize.cy := shadowInactive.GetHeight;
         end;

       //TopLeft
         R.X := MarginOffset.Left; R.Y := MarginOffset.Top;
         R.Width := shadowBorderSize; R.Height := shadowBorderSize;
         Bmp.DrawImage(ShadowPicture^, R, 0, 0, shadowBorderSize, shadowBorderSize, UnitPixel);
         //Top
         R.X := MarginOffset.Left + shadowBorderSize; R.Y := MarginOffset.Top;
         R.Width := ClientWidth - MarginOffset.Left - MarginOffset.Right - shadowBorderSize * 2; R.Height := shadowBorderSize;
         Bmp.DrawImage(ShadowPicture^, R, shadowBorderSize, 0, shadowBorderSize, shadowBorderSize, UnitPixel);
        //TopRight
         R.X := ClientWidth - shadowBorderSize - MarginOffset.Right; R.Y := MarginOffset.Top;
         R.Width := shadowBorderSize; R.Height := shadowBorderSize;
         Bmp.DrawImage(ShadowPicture^, R, ShadowSize.cx - shadowBorderSize ,0, shadowBorderSize, shadowBorderSize, UnitPixel);
        //Left
         R.X := MarginOffset.Left; R.Y := MarginOffset.Top + shadowBorderSize;
         R.Width := shadowBorderSize; R.Height := ClientHeight - MarginOffset.Top - MarginOffset.Bottom - shadowBorderSize * 2;
         Bmp.DrawImage(ShadowPicture^, R, 0, shadowBorderSize, shadowBorderSize, ShadowSize.cy - shadowBorderSize*2, UnitPixel);
       //right
         R.X := ClientWidth - shadowBorderSize - MarginOffset.Right; R.Y := MarginOffset.Top + shadowBorderSize;
         R.Width := shadowBorderSize; R.Height := ClientHeight - MarginOffset.Top - MarginOffset.Bottom - shadowBorderSize * 2;
         Bmp.DrawImage(ShadowPicture^, R, ShadowSize.cx - shadowBorderSize, shadowBorderSize, shadowBorderSize, ShadowSize.cy - shadowBorderSize * 2, UnitPixel);
         //BottomLeft
         R.X := MarginOffset.Left; R.Y := ClientHeight - shadowBorderSize - MarginOffset.Bottom;
         R.Width := shadowBorderSize; R.Height := shadowBorderSize;
         Bmp.DrawImage(ShadowPicture^, R, 0, ShadowSize.cy - shadowBorderSize,shadowBorderSize, shadowBorderSize, UnitPixel);
        //Bottom
         R.X := MarginOffset.Left + shadowBorderSize; R.Y := ClientHeight - shadowBorderSize - MarginOffset.Bottom;
         R.Width := ClientWidth - MarginOffset.Left - MarginOffset.Right - shadowBorderSize * 2; R.Height := shadowBorderSize;
         Bmp.DrawImage(ShadowPicture^, R, shadowBorderSize, ShadowSize.cy - shadowBorderSize, ShadowSize.cy - shadowBorderSize*2, shadowBorderSize, UnitPixel);
         //BottomRight
         R.X := ClientWidth - shadowBorderSize - MarginOffset.Right; R.Y := ClientHeight - shadowBorderSize - MarginOffset.Bottom;
         R.Width := shadowBorderSize; R.Height := shadowBorderSize;
         Bmp.DrawImage(ShadowPicture^, R, ShadowSize.cx - shadowBorderSize, ShadowSize.cy - shadowBorderSize, shadowBorderSize, shadowBorderSize, UnitPixel);

      finally
         FreeAndNil(Bmp);
       end;

      Buf.GetHBITMAP(MakeColor(0, 0, 0, 0), BitmapHandle);
     finally
       FreeAndNil(Buf);
     end;

    Bitmap.Handle := BitmapHandle;

    BitmapSize.cx := Bitmap.Width;
     BitmapSize.cy := Bitmap.Height;

    BlendFunction.BlendOp := AC_SRC_OVER;
     BlendFunction.BlendFlags := 0;
     BlendFunction.SourceConstantAlpha := 255;
     BlendFunction.AlphaFormat := AC_SRC_ALPHA;

    BitmapPoint := Point(0, 0);

    UpdateLayeredWindow(Handle, 0, nil, @BitmapSize, Bitmap.Canvas.Handle,
          @BitmapPoint, 0, @BlendFunction, ULW_ALPHA);
   finally
     FreeAndNil(Bitmap);
   end;
end;

Basically it creates a new picture with the dimensions of our frmShadow form with ARGB pixel format, we must also remember that this shadow form will always be larger than the main form.

According to the selected shadow (shadowState), we will set a temporary variable called MarginOffset which will hold a difference of pixels between the global margin (Margins) and the selected shadow margin, and assign the selected picture using a pointer, and also find out its width and height in ShadowSize local variable.

Having that information, the next part will consist of drawing in our Bmp graphics using the previously gathered information, shifting with MarginOffset to get the correct X,Y coordinates to draw from/to, destination canvas and our template canvas.

R: holds the destination rectangle where we will paint on our frmShadow’s new bitmap.
ShadowPicture: points to the selected shadow template picture.
The Bmp.DrawImage variant method used is:

Bmp.DrawImage(sourcepicture, destination rectangle, sourcepicture left, sourcepicture top, sourcepicture width, sourcepicture height, UnitPixel);

In other words, we will copy parts of our source picture into the new one, TopLeft, Top, TopRight, and so on. Top, Left, Right and Bottom drawing will stretch the drawing so it will fill the sides completely.

Once created that picture, we proceed with the conventional way to update a layered window, with the UpdateLayeredWindow WinAPI function, which draws the created new shadow picture in our entire shadow form.

Finally, we should add a global variable for out FormShadow unit, rght nex to our frmShadow variable:

var
frmShadow: TfrmShadow;
frmShadowEnabled : Boolean = False;

False by default, it will be useful to tell our calling form that frmShadow formclass is ready.

That’s it for our FormShadow unit/form, now is time to use it from our main form.

<— Creating a Yosemite shadow for borderless form in Delphi [part 1]

Creating a Yosemite shadow for borderless form in Delphi [part 1]

2016-06-30T00:25:00.001-05:00

Long time ago I wrote a blog post here, about creating a Metro like application, it was an interesting research process, I’ve learned a lot, but there was left the shadow, since CS_DROPSHADOW was not exactly the shadow that normal windows show.

So today, I’m going to write another method that basically will use another form as a shadow due to alpha layered requirement to draw alpha channel pictures, hence this will be the shadow of our program.

I have decided that this program will use the OSX Yosemite’s shadow, for the sake of the fun.

First step: recreate the original Yosemite shadow alpha mask

This was an easy task (I tried to write a reverse alpha mask finder tool), I just created a rectangle with an specific color, moved a Yosemite window over this rectangle, captured a snapshot to a PNG file, in order to process them (two: active and inactive shadows), so I could find out the original alpha mask, and then convert it to a ARGB PNG file to use in our program as the shadow.

Tools I have used: Imagemagick and a picture editor (Photofiltre in my case).

This is the picture, using a background picture with the #B100B2 color.

BTW: Photofiltre is a freeware image editor, which I found easy to use, so here is how I reduced the size of the snapshot to limit the shadow area.

Picked Magic wand
Tolerance 0, and color selection mode, so we will select only the area of the rectangle that won’t be needed
Selection mode: disabled to None, by default it uses Antialias
Finally, picked the color that is near to the border

After that we need the selection to be inverted, in Photofiltre is easy, just press Ctrl-I (or Menu selection –> Invert)

Now we need to crop that selected picture, and again, just press Ctrl-Shift-H (or Menu Image->Crop), then we fill the white borders with the mentioned color above.

Using the Magic Wand tool, we remove the surrounding colors, after that with a rectangle selection we delete the window content, we need it to be the base color mentioned above, and the resultant base picture to restore the translucent shadow is the following

We will save it as any PNG format file e.g. composited.png we also need to create another picture with the same dimensions (width x height) filled with the base color, I named it background.png

Now we need to use ImageMagick composite tool as follows, in order to get a subtracted picture result:

compose.exe –compose subtract background.png composited.png diff.png

The order is important, first the background picture. The result diff.png picture we will use it as our alpha channel mask to create the shadow, so we will open it with Photofiltre.

We need to turn it to grayscale color, so it will become a correct alpha mask picture.

Then just choose Red or Blue filter

Our result black and white mask is here
Now we need to create another picture with the same width and height, filled with black color and then turn it to Alpha mode picture (Menu Image –> Mode –> RGBA)
Finally we copy the previous black and white mask (Ctrl-A –> Ctrl-C), right click the layer and paste as mask
And here it is, our shadow model picture, that is what we will use as shadow for our programs.
We proceed similarly to get the non focused window shadow, and the result is this too

And that is it, in the next post I will delve into coding the form.

UPoPS–Utilitario para modificar Prince of Persia para pantallas anchas

2016-06-20T04:12:00.001-05:00

La semana pasada Ubisoft nos obsequió su famoso juego Prince of Persia – The Sands of Time, que se lanzó el 2003, sin embargo muchos de ustedes habrán notado que el juego no se adapta correctamente a pantallas 16:9 (anchas o widescreen), y esto no ha sido corregido por Ubisoft de manera oficial, pero existen modificaciones al archivo binario que permiten modificar la resolución del juego.

Encontré mucha información al respecto, parches interesantes para el juego, configuraciones desconocidas y hasta trainers que permiten hacer trampa a quienes juegan con los pies, obvio está. Y para poder agrupar todas las ideas útiles (dejando de lado los trainers por ahora) decidí hacer una herramienta que permita realizar todas estas cosas en uno solo.

Les presento a UPoPS (UPlay Prince of Persia Settings), o así lo pienso llamar, y ofrece las siguientes facilidades para el juego:

Parche para pantallas anchas

El parche modifica el ejecutable del juego, llamado POP.EXE, escribiendo directamente ahí la resolución de pantalla a utilizar. Aunque deberá configurar en las opciones de vídeo del juego para poder aplicar la nueva resolución. Normalmente el juego soporta resoluciones de aspecto 4:3, es decir, para los monitores antiguos (e.j 800x600, 1024x768).

Se recomienda utilizar la resolución actual de su pantalla, que se muestra como información adicional en este utilitario.

Haciendo clic en el botón Parchar se escribirán los nuevos valores de resolución para el juego, y el botón Restaurar volverá a escribir el valor original (640x480), además notará el estado del archivo POP.EXE, al restaurarse (o estar intacto), el utilitario leerá la firma digital del fabricante (Ubisoft), obviamente al estar parchado la firma se alterará y no se mostrará.

NOTA: Las firmas digitales en los archivos ejecutables son una garantía de seguridad, asegura la originalidad del archivo. Al parcharlo seguirá ejecutándose de igual forma.

Cambio de idioma

Muchos de ustedes quizás instalaron el juego sin haberse percatado que eligieron un idioma distinto al español, y para incomodidad del usuario, el juego no incluye entre su pantalla de opciones la posibilidad de cambiar el idioma, pero felizmente éste incluye los archivos necesarios para distintos idiomas, aunque están en otra carpeta, sólo hace falta reemplazarlos, pero el utilitario permite hacer esto de forma más sencilla:

El utilitario detectará los idiomas disponibles, al elegir una de ellas y presionar el botón de cambio de idioma, la herramienta se encargará de copiar/reemplazar los archivos correspondientes al idioma elegido, luego al lanzar el juego podremos disfrutarlo con el idioma de nuestra preferencia.

Opciones extra

Por último, también incluye unas opciones de configuración del archivo Hardware.ini del juego, son opciones que permiten realizar algunos ajustes que el juego no permite hacerlas desde su interfaz de opciones integrada.

Cabe mencionar que la primera de las opciones, como se describe ahí mismo, solamente modifica los nombres de algunos vídeos para evitar esperar tanto al momento de arrancar el juego, debido a tantos vídeos en secuencia que a muchos resultará incómodo.

Las siguientes dos opciones requieren poner el archivo Hardware.ini en modo sólo lectura, porque de lo contrario el juego los restablecerá automáticamente, haciendo imposible que se apliquen.

Por ejemplo, al aplicar el parche para que el juego se muestre correctamente en pantallas anchas, la interfaz del juego se altera, no se podría ver completamente en la pantalla, en mi caso, el medidor de vida del personaje desaparece, y con la opción de corrección de interfaz, se arregla ese problema.

Nota: Tenga en cuenta que al utilizar estas dos opciones, el archivo de configuración del juego se pondrá en modo sólo lectura, lo que quiere decir, que si modificamos algunas opciones del juego desde la interfaz del mismo, los cambios no se grabarán para futuras sesiones, por lo cual es recomendable primero desactivar estas opciones, configurar lo que desee en la interfaz de opciones del juego, y una vez realizado ello, salir del juego, y aplicar estas opciones para que todo quede correctamente configurado al volver a ejecutar el juego.

Conclusión

Esta “travesía” de realizar un utilitario para este juego, me ha hecho notar que existen muchos otros juegos (viejos juegos) que no cuentan de forma nativa el soporte para pantallas anchas, obligando al usuario la utilización de parches que corrijan esta incomodidad, pero a la vez abre una puerta interesante para realizar experimentos grandiosos, tales como modificar secciones de código del juego, como las rutinas que descuentan la cantidad vida del personaje y jugar como un ser invencible.
Aunque esto no asegura el 100% de la estabilidad del juego al estar modificado, lo que sí asegura es la comodidad del jugador al obtener resultados que de manera oficial no se encuentra disponible.

Ojalá les sirva esta pequeña herramienta, la cual la pueden descargar aquí: UPoPS.rar lo pueden extraer donde se encuentra instalado el juego si así lo desean.

Fuentes:

PCGamingWiki – Prince of Persia

GameSolution Utilities

How to enable PPAPI Flash support in DCEF3 branch 2454

2015-11-03T21:33:00.001-05:00

DCEF3 branch 2454 now introduces Chromium version 45 which was announced a few hours ago by the author of DCEF Henri Gourvest and it is awesome.

However, I noticed that Flash was not working anymore, so digging in CEF and Chromium forums I found out that Chromium version 45 officially dropped NPAPI support, but it still supports PPAPI, so we need to add --enable-system-flash to our program's executable shortcut (command line params) in order to enable Flash again for our program.

Notice: we might need to make sure to use CefCommandLineArgsDisabled := False; ( Cef Command Line support is enabled ) in our project source in order to use that parameter mentioned above, but it is False by default, so we don't need to worry, but who knows, you might have had disabled it for some reason xD.

A system-wide installation of Pepper Flash that will be automatically discovered and loaded by CEF on Windows and OS X can be downloaded from https://get2.adobe.com/flashplayer/otherversions/ (choose "FP for Opera and Chromium -- PPAPI") in Step 2). To enable use the system-wide installation pass the --enable-system-flashcommand-line argument. — Marshall Greenblatt

But there is another alternative, which will help us to add those command line arguments before starting chromium, and get rid of unwanted command lines or shortcuts (.lnk) that the user should include to enable Flash in our program.

Just like adding a custom path for our cache directory, we also need to modify the Project's source.

This is the event we need to modify:

CefOnBeforeCommandLineProcessing

By default is set to nil so we will need a custom procedure to add that switcher (--enable-system-flash or any other one you might also need) to our chromium component.

So it will look something like this:

program guiclient;
...
procedure CustomCommandLine (const processType: ustring; const commandLine: ICefCommandLine);
begin
    commandLine.AppendSwitch('--enable-system-flash'); // since it doesn't need any value, that's enough, otherwise use AppendSwitchWithValue(switch, value);
end;
begin
    CefCache := 'cache';
    ...
    CefOnBeforeCommandLineProcessing := CustomCommandLine;
    ...
    CefSingleProcess := False;

if not CefLoadLibDefault then Exit;

    ...
    Application.Initialize;
    ...
end.

That's it, now we will have PPAPI Flash working again in our project.

More about CefCommandLine at http://magpcss.org/ceforum/apidocs3/projects/(default)/CefCommandLine.html

Enable Windows 10 Aero Glass a.k.a Blur Behind in our Delphi project

2015-07-23T15:40:00.001-05:00

When Windows 8 arrived, it removed the Aero Glass feature from the operating system, some of us missed that feature and there are also some projects like http://www.glass8.eu/ which allows us to have Aero Glass back.
But now in Windows 10, this feature is back or kinda, because it remains as undocumented and only shown in the new Start Menu and some Immersive Applications like popups (Volume, Notification Center and other few ones).
However, we still need the old Aero Glass API before applying the Blur Behind “patch” in order to make it work again in our application.

In Delphi XE+ we just need to enable it using the Form’s GlassFrame property, but if you are using older Delphi versions, you needed to call the DWM API by yourself, something like the following:


DwmIsCompositionEnabled:function (pfEnabled: PBOOL):HRESULT;stdcall;
DwmExtendFrameIntoClientArea:function (hWnd: HWND; Margins: PRect):HRESULT;stdcall;

//...
  
procedure TForm1.AeroGlass;
var  
  Aero: BOOL;
  Area: TRect;
  hDWM: THandle;
begin   
  hDWM:=LoadLibrary('dwmapi.dll');
  try
    @DwmIsCompositionEnabled:=GetProcAddress(hDWM,'DwmIsCompositionEnabled');
    if @DwmIsCompositionEnabled<>nil then
        DwmIsCompositionEnabled(@Aero);
    if Aero then begin
      Area:=Rect(-1,-1,-1,-1);
      Color:=clBlack;
      @DwmExtendFrameIntoClientArea:=GetProcAddress(hDWM,'DwmExtendFrameIntoClientArea');
      if @DwmExtendFrameIntoClientArea<>nil then
          DwmExtendFrameIntoClientArea(Handle,@Area);
  
    end
    else ShowMessage('Aero is Disabled');
  finally
    FreeLibrary(hDWM);
  end;
end;

That might be enough on Windows Vista/7, but on Windows 8/8.1 it won’t do anything as well on Windows 10. However, since aero glass is available in Windows 10, we need to call the undocumented SetWindowCompositionAttribute function from user32.dll in order to enable aero glass, because it is not entirely backward compatible, but don’t worry, it is very easy to use that function:


type
  AccentPolicy = packed record
    AccentState: Integer;
    AccentFlags: Integer;
    GradientColor: Integer;
    AnimationId: Integer;
  end;
  
  WindowCompositionAttributeData = packed record
    Attribute: Cardinal;
    Data: Pointer;
    SizeOfData: Integer;
  end;
 var
  SetWindowCompositionAttribute:function (hWnd: HWND; var data: WindowCompositionAttributeData):integer; stdcall;
//...

procedure TForm1.EnableBlur;
const
  WCA_ACCENT_POLICY = 19;
  ACCENT_ENABLE_BLURBEHIND = 3;
var
  dwm10: THandle;
  data: WindowCompositionAttributeData;
  accent: AccentPolicy;
begin      
      dwm10 := LoadLibrary('user32.dll');
      try
        @SetWindowCompositionAttribute := GetProcAddress(dwm10, 'SetWindowCompositionAttribute');
        if @SetWindowCompositionAttribute <> nil then
        begin
          accent.AccentState := ACCENT_ENABLE_BLURBEHIND;
          data.Attribute := WCA_ACCENT_POLICY;
          data.SizeOfData := SizeOf(accent);
          data.Data := @accent;
          SetWindowCompositionAttribute(Handle, data);
        end
        else
        begin
          ShowMessage('Not found Windows 10 SetWindowCompositionAttribute in user32.dll');
        end;
      finally
        FreeLibrary(dwm10);
      end;
end;

How to use:
On a new VCL project we just enable GlassFrame property with rect = (-1,-1,-1,-1) to avoid borders glitches, and BorderStyle = bsSingle.

You can add your preferred components too. The Form might need to be set Double Buffered in order to show some components, the same old Aero Glass issue from Windows 7/Vista on VCL components.
After that call the EnableBlur procedure from Form’s OnCreate event:


procedure TForm1.FormCreate(Sender: TObject);
begin
  BorderStyle := bsSingle;
  BorderIcons := [biSystemMenu, biMinimize];
  EnableBlur;
end;

As you might notice, I’ve changed the Form’s border properties programmatically, specially the border icons, because if we use biMaximize it will show the window’s aero glass using the maximum size.

I’m not sure why, but if we set the same border icons in the properties field, it doesn’t fix that issue. However, setting it programmatically removes that extra area.

You can play with settings: bsSizable for instance might allow to resize the window, double buffered settings, custom components, etc.
Here is the complete code (with Image, Label and Button component added as shown in the snapshots).


unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, Vcl.Imaging.jpeg,
  Vcl.ExtCtrls;

type
  TForm1 = class(TForm)
    Label1: TLabel;
    Image1: TImage;
    Button1: TButton;
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
    procedure EnableBlur;
  public
    { Public declarations }
  end;

  AccentPolicy = packed record
    AccentState: Integer;
    AccentFlags: Integer;
    GradientColor: Integer;
    AnimationId: Integer;
  end;

  WindowCompositionAttributeData = packed record
    Attribute: Cardinal;
    Data: Pointer;
    SizeOfData: Integer;
  end;


var
  Form1: TForm1;
  SetWindowCompositionAttribute:function (hWnd: HWND; var data: WindowCompositionAttributeData):integer; stdcall;
implementation

{$R *.dfm}


procedure TForm1.EnableBlur;
const
  WCA_ACCENT_POLICY = 19;
  ACCENT_ENABLE_BLURBEHIND = 3;
var
  dwm10: THandle;
  data: WindowCompositionAttributeData;
  accent: AccentPolicy;
begin
      dwm10 := LoadLibrary('user32.dll');
      try
        @SetWindowCompositionAttribute := GetProcAddress(dwm10, 'SetWindowCompositionAttribute');
        if @SetWindowCompositionAttribute <> nil then
        begin
          accent.AccentState := ACCENT_ENABLE_BLURBEHIND;
          data.Attribute := WCA_ACCENT_POLICY;
          data.SizeOfData := SizeOf(accent);
          data.Data := @accent;
          SetWindowCompositionAttribute(Handle, data);
        end
        else
        begin
          ShowMessage('Not found Windows 10 SetWindowCompositionAttribute in user32.dll');
        end;
      finally
        FreeLibrary(dwm10);
      end;
end;
procedure TForm1.FormCreate(Sender: TObject);
begin
  BorderStyle := bsSingle;
  BorderIcons := [biSystemMenu, biMinimize];
  EnableBlur;
end;

end.

Finally, some links to articles and source codes which use this undocumented Windows 10 API and DWM related that might interest you.

SetWindowCompositionAttribute API http://undoc.airesoft.co.uk/user32.dll/SetWindowCompositionAttribute.php
GetWindowCompositionAttribute and WINCOMPATTRDATA details http://undoc.airesoft.co.uk/user32.dll/GetWindowCompositionAttribute.php
Adding the “Aero Glass” blur to your Windows 10 apps by Rafael Rivera for C# using WPF
User32 definitions code in Lua and Windows
The Road to Delphi DWM examples
EarTrumpet source code which shows a fancy popup control similar to Windows 10’s volume trayicon’s popup

If you know further improvements to the code, references, anything valuable, feel free to share them in the comments.

[UPDATE] I added more details related to colorization at StackOverflow

Probando mi plugin para Windows Live Writer que permite pegar imágenes del portapapeles tanto en formato JPEG como PNG

2015-01-29T06:02:00.001-05:00

Estoy aprendiendo a programar en C#, y qué mejor que realizar un plugin para mi editor de blog preferido, Windows Live Writer, uno de los inconvenientes que tiene el editor, es que al pegar imágenes capturadas desde el portapapeles, éste lo pega utilizando el formato PNG, y como sabrán ese formato utiliza un algoritmo sin pérdida de datos, lo cual conlleva a tener imágenes más pesadas que los convenientes JPEG, por tanto, mi plugin permite pegar utilizando el formato JPG aplicando niveles de compresión, asimismo pegarlo en formato URI, es decir convertido a texto en base64, además de poder utilizar 8bit de color en el formato PNG, lo cual reduce el tamaño del PNG que viene por defecto manteniendo una imagen lo más agradable posible.
Estoy pensando agregarle más utilitarios de compresión, como OptiPNG, Mozjpeg que vuelve a comprimir nuestras imágenes jpg para así obtener mayor compresión manteniendo la misma calidad inicial; entre otras herramientas de compresión de imágenes.
Esto es necesario especialmente cuando deseamos que las imágenes de nuestra página sean cargadas lo más rápido posible, a continuación una lista de imágenes probando las diferentes configuraciones de mi plugin:

^{Imagen PNG pegada usando la conversión a colores de 8 bits (256 colores). [213KB]}
^{Esta imagen es la que normalmente pone el editor Windows Live Writer. [659KB]}
^{JPEG — compresión con calidad mantenida al 80% [47.1 KB]}
^{JPEG — compresión manteniendo calidad 50% [37.1 KB]}

Imagen embebida en base 64 dentro <img src=””> usando el formato PNG 8bits [142 KB]

Imagen embebida en base 64 usando el formato Jpeg 50%. [20.2 KB]
Como podrán notar, cada imagen varia de calidad según la configuración aplicada.
Por ahora, estoy corrigiendo algunos errores del plugin, espero tenerlo finalizado lo más pronto posible, para poderlo publicar.
Créditos Imagen original : Lenna

Instalando Lazarus Free Pascal en OSX Yosemite

2014-10-18T23:35:00.000-05:00

Hace bastante tiempo que no utilizo Freepascal con Lazarus para desarrollar algunas de mis aplicaciones, pero hoy decidí instalar este fantástico IDE multiplataforma en OSX Yosemite.

Al grano, estos son los pasos que seguí:

PRIMERO que nada debemos tener instalado XCode 6.1
pero principalmente las herramientas de línea de comandos que ofrece un entorno de desarrollo estilo UNIX. Este último pueden instalarlo mediante línea de comandos:

Ello ejecutará la descarga e instalación de Command Line Tools, pero si deseas también puedes descargarlos desde developer.apple.com:

Una vez instalado estos componentes necesarios, procedemos a instalar los 3 archivos de instalación de Lazarus Freepascal.

Si no ha instalado las herramientas de línea de comandos más antes mencionado, los paquetes de instalación de Lazarus lo hará saber y no podrá continuar.

El orden sugerido es: fpc, fpcsrc y luego lazarus.

Una vez culminado la instalación todavía falta agregar el depurador GDB que Lazarus necesita para poder depurar las aplicaciones desde su entorno; pero desde Mavericks ya no incluye GDB, por tanto es necesario instalarlo desde otra medio:

Necesitaremos de Homebrew, si ya lo tiene instalado salte ese paso.

Estos son los comando a ejecutar en el Terminal:

– sudo chmod g+wrx /usr/local/. /usr/local/bin /usr/local/lib

– ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

– brew doctor
Corrija cualquier error o advertencia que pudiera mostrar el comando anterior, y vuelva a ejecutar ese comando para cerciorarse.

– brew install https://raw.github.com/Homebrew/homebrew-dupes/master/gdb.rb
[Actualización] la URL anterior funcionaba con la versión de GBD 7.8.1 y además fue quitado, por tanto ahora sólo basta instalarla con el comando brew install gdb la cual instalará la versión 7.10 o superior.

Si todo se ejecutó sin errores, ya tendremos GDB funcionando en la línea de comandos:

– gdb

Sin embargo, si ejecutamos Lazarus y lanzamos una aplicación, el depurador gdb fallará.

Eso es debido a que gdb no está firmado, para corregir eso ejecutamos Keychain Access (Acceso a Llaveros)

Ahora tenemos que crear el certificado para firmar GDB.
Vamos al menú (^F2) Acceso a Llaveros –> Asistente para Certificados –> Crear un certificado...

Cree el nuevo certificado con los datos tal como se muestra en la siguiente imagen:

Presionamos Continuar y es recomendable cambiar los días de validez del certificado para un largo tiempo, por defecto sugiere 365, pero sería mejor prolongarlo por mucho más tiempo.

Presionamos Continuar varias veces más, hasta encontrarnos con algo así, ahí tenemos que cambiar a Sistema.

Finalmente al crear nos mostrará algo similar a esto:

Aceptamos (OK), y luego buscamos el nuevo certificado en la lista de Sistema.

Abrimos el diálogo que muestra la información de este nuevo certificado, y modificamos el firmado de código, poniéndolo en "Confiar siempre".

Hecho esto, cerramos y nos pedirá confirmar pidiéndonos permiso para aplicar los cambios.

Ahora reiniciamos OSX Yosemite para que tome efecto todos estos cambios.

Finalmente, después de reiniciar, ejecutamos desde la línea de comandos:

– codesign -s gdb-cert /usr/local/bin/gdb

Nos pedirá confirmar con una cuenta con privilegios y ya podremos usarlo con Lazarus.

Captura de Pic2Base64 corriendo en OSX Yosemite

Conclusión:

Probándolo al compilar algunos programas, GDB muestra errores en ciertas ocasiones, pero al menos funciona, esperemos que corrijan esos inconvenientes, además Yosemite fue lanzado hace pocos días atrás.

Se sugiere estar al tanto de las actualizaciones a gdb con Homebrew (http://brew.sh/).

Fuente:
http://wiki.lazarus.freepascal.org/GDB_on_OS_X_Mavericks_and_Xcode_5

Transparent Sublime Text 3 at least on Windows

2013-12-07T17:46:00.001-05:00

There are sometimes when you like to read content behind your code editor, specially snippets, documentation of APIs or other important stuff that sometimes requires you to switch between your code editor and that documentation (webpage, pdf, etc.).

And that is why it is sometimes useful to have a translucent code editor, and if you love using SublimeText3 editor, you might know that it doesn’t allow you to set its opacity level, so you might end up hitting Alt-Tab hotkeys or adjusting both windows side by side in order to copy or read a documentation without hassle.

Anyhow, having a little knowledge about Windows APIs gave me the idea to change the application’s alpha opacity level, and since most applications running on Windows let us do it, it is only matter of coding now.

Requirements

All applications that let us adjust the alpha opacity are set to WS_EX_LAYERED in its EX_STYLE flag, specially used on most applications that have custom skinned windows, but we can still force any applications to have that feature.

And if we spy SublimeText3 with uuSpy or anyother application for monitoring executables you like, you will notice that ST3 is not Layered.

Besides, now we also know that SublimeText has a class name and it is "PX_WINDOW_CLASS” which will help us locate all instances of Sublime Text and let us change its layered status.

Of course with uuSpy we can enable WS_EX_LAYERED but we need to do it from SublimeText itself, and luckily it allows us to write our own plugins with Python 3.3.

How to change the opacity of any application with WinAPI

We need to use the following WinAPI functions:

GetDesktopWindow
GetWindow
GetWindowLong
GetClassName
IsWindowVisible
SetWindowLong
SetLayeredWindowAttributes
ShellExecute

The most important ones are SetWindowLong and SetLayeredWindowAttributes. The other ones will help you locate SublimeText running instances, and ShellExecute for a hack to bypass SublimeText unknown crashes when using SetWindowLong.

Basically we set any application to WS_EX_LAYERED with SetWindowLong as follows:

First we need to make sure to only set WS_EX_LAYERED flag keeping the other styles untouched and that’s why we need GetWindowLong.

wl = GetWindowLong(LHWindow,GWL_EXSTYLE)

We will copy the EX_STYLEs to wl and then add WS_EX_LAYERED with a logic operation (LHWindow contains the unique SublimeText instance id).

wl = wl or WS_EX_LAYERED

And finally we apply that changes back to our target application with SetWindowLong.

SetWindowLong(LHWindow, GWL_EXSTYLE, wl)

And now we can finally set the application’s opacity level (from 255 to 0) with SetLayeredWindowAttributes.

SetLayeredWindowAttributes(LHWindow,0,opacity, LWA_ALPHA)

Where opacity contains a value from 0 to 255, i.e. from totally invisible to opaque.

Issues

As I mentioned before, SublimeText, for some unknown reason, crashes when we call SetWindowLong from itself using python or an external DLL.

So we need to use an external executable that will help us to set the Layered mode, and that’s a simple console application that I wrote in assembler in order to make it the smallest possible.

This console application will only take two parameters, the HWND (sublime text instance id) and the current EX_STYLE, then will apply WS_LAYERED to it, that is all.

Of course we only need to call it once per sublime instance, but sometimes we have more than one instance (window) of sublime text, which can also be created at any moment, so that’s why we will call this console application everytime, to make sure new sublime windows can also be translucent.

Our Plan

These are the steps we need to do in order to change SublimeText’s opacity.

Iterate among all windows and find the ones that have PX_WINDOW_CLASS as its class name (those are instances of SublimeText).
On each instance found we apply Layered mode and modify the opacity level.

That’s all, easy uh!

So here is the part of our code that searches all windows (even hidden ones) in order to find sublime text windows.

def sublime_opacity(opacity):        
        LHDesktop = GetDesktopWindow()    
        LHWindow = GetWindow(LHDesktop,GW_CHILD)                
        Clase = 'PX_WINDOW_CLASS'        
        while(LHWindow != None):            
            LHParent = GetWindowLong(LHWindow, GWL_HWNDPARENT)            
            clas = create_string_buffer(255)            
            GetClassName(LHWindow,clas,255)            
            classs = clas.value            
            if IsWindowVisible(LHWindow):
                if (LHParent==0) or (LHParent==LHDesktop):                    
                    if(classs==b'PX_WINDOW_CLASS'):                        
                        print('Applying opacity level ',opacity)
                        wl = GetWindowLong(LHWindow,GWL_EXSTYLE)    
                        try:                            
                            parametro = str(LHWindow)+' '+ str(wl)                            
                            ShellExecute(LHDesktop,"open", exe_file,parametro,None,SW_HIDE)
                            if opacity is not None:
                                SetLayeredWindowAttributes(LHWindow,0,opacity, LWA_ALPHA)
                            break
                        except ValueError:
                            print("Error! ")                        

            LHWindow = GetWindow(LHWindow, GW_HWNDNEXT)

I will explain as easy as I can:

First we find the Desktop instance ID and then its first child (any application) and we will walk on every next window with GetWindow(currentWindow, GW_HWNDNEXT).

On each window found we need to know if it is visible and is a parent one (i.e. we won’t bother with mdi or sdi child windows which are dependant of the applications styles mostly). And finally making sure it has PX_WINDOW_CLASS as class name.

Only then we can set its EX_STYLE to WS_EX_LAYERED and set its opacity level.

In the code you’ll notice that it calls ShellExecute instead of SetWindowLong, and that’s the horrible hack (workaround) to apply SetWindowLong without crashing SublimeText3. I don’t know exactly what triggers that behavior, but reading on issues related to some Python versions, it has a bug with SetWindowLong api. However, I’ve tried using a DLL which will call SetWindowLong from our python script, but it crashes SublimeText3 too. And finally, executing an external console application with ShellExecute looks to be the better approach, since it is a different independent application that changes our SublimeText EX_STYLE.

Here is a part of the assembler code that does those changes:

 1 msg db "Changing to layered window =%s P1=%s P2=%s",0
 2 errmsg db "It is required two parameters!",0
 3 ...
 4 start: 
 5 cinvoke __getmainargs,argc,argv,env,0 
 6 cmp [argc],3 
 7 jne error 
 8 mov esi,[argv]
 9 
10 ;this is the HWND (SublimeText3 handle id)
11 stdcall atoi, dword[esi+4],10
12 mov ebx, eax
13 ;this is the current exstyle
14 stdcall atoi, dword[esi+8],10
15 mov ecx, eax
16 or ecx, WS_EX_LAYERED
17 invoke SetWindowLong, ebx, GWL_EXSTYLE, ecx
18 ;let's print it for debugging purposes
19 cinvoke printf,msg,dword [esi],dword [esi+4],dword [esi+8]
20 
21 finish: 
22 invoke ExitProcess,1 
23 
24 error: 
25 cinvoke printf,errmsg 
26 jmp finish

We will pass the found sublime text window id and its current EX_STYLE as parameters, the application will read it, enable the WS_EX_LAYERED flag and invoke SetWindowLong with the new style.

You can take a look to the entire source code at the github repository https://github.com/vhanla/SublimeTextTrans

About the entire plugin

The plugin is meant to be used only on Windows environments, since it uses a lot the Windows API, and sadly I cannot write it for Linux or MacOS since I don’t have enough knowledge on those platforms, hopefully anyone can improve this plugin and port it to those other platforms.

And about the entire plugin, I won’t bother explaining all the source code, it is easy to understand and you can play with it adjusting it to your needs.

The Plugin

Now we can have our SublimeText editor with transparency and we will be able to see behind it.

^{As you can see in the above picture, I can read the MSDN documentation about SetLayeredWindowAttributes.}

And remember, visit the github repository, there you can get the source code https://github.com/vhanla/SublimeTextTrans

You will also see the link to a package that you can place it in the data\installed-packages directory inside SublimeText, and that is an easy way to install it on your sublime text editor.

This package link , but visiting the repository might lead you to updated versions.

Conclusions

Sublime Text 3 plugin feature with the help of Python is a really great help, as you noticed it you can even call WinAPIs to modify our code editor transparency and customize it to our needs, not only adding extra features, themes, shortcut hotkeys, but also modifying the application’s opacity.

Thanks for reading.

Animando el fondo de reproducción de Youtube con HTML5

2013-07-19T22:08:00.001-05:00

Hace bastante tiempo hice una extensión para Google Chrome con la finalidad de poder ocultar el fondo mientras reproducía el vídeo de Youtube, sin embargo alguien más se apoderó de mi código fuente para su extensión pésima en ese entonces pero que invirtió en publicidad; y francamente me quitó las ganas de continuar con el proyecto Focus on video y lo dejé abandonado (supongo que ya ni funciona).

Ahora me encontré con una excelente extensión para reproducir vídeos de Youtube utilizando HTML5, y se me ocurrió agregarle un efecto como fondo de tal forma que en lugar de oscurecer u ocultar el fondo como lo hacía en Focus on video, y ahora se mostraría con una imagen del mismo vídeo en forma desenfocada, dándole un efecto que en lo personal me agrada.

Como pueden ver, el fondo adopta la misma imagen de la del vídeo pero desenfocada para no distraer y darle un efecto de reflejo utilizando el color original.

La extensión pertenece a Chris Robins y es muy popular en la tienda de Chrome y el código fuente está disponible en Github

https://github.com/chrisrobins/YouTubeHTML5

Ahora sólo hice algunos ajustes para poder agregar ese efecto.

Una función que dibuja el efecto
Una función que gestione el efecto (habilitar/deshabilitar en modo pantalla completa)

Sin embargo, el efecto tiene su deficiencia, utiliza mucho el procesador de tal forma que al estar utilizándolo verán un aumento considerable en el Administrador de Tareas.

El uso de CPU se levanta bastante, pero dependiendo de su PC.

Para poder apreciarlo deben modificar algunas opciones de la extensión.

Por ejemplo, esta es la configuración que utilizo en Opera 15

Efecto de dibujo en canvas

 1 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 2 // Canvas effect
 3 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 4 var lienzo = document.createElement('canvas');
 5 lienzo.id = 'c';
 6 lienzo.setAttribute('style','position:fixed; top:0;left:0;width:100%; height:100%;');
 7 document.body.insertBefore(lienzo,document.body.firstChild);
 8 
 9 function draw(v,c,w,h) {
10     if(v.paused || v.ended || tabhidden || fullscreen){
11         document.getElementById('watch7-content').style.opacity = 1;
12         document.getElementById('guide').style.opacity = 1;
13         document.getElementById('watch7-sidebar').style.opacity = 1;
14         return false;
15     }
16     document.getElementById('watch7-content').style.opacity = 0.5;
17     document.getElementById('guide').style.opacity = 0.5;
18     document.getElementById('watch7-sidebar').style.opacity = 0.5;
19     //sometimes player shows a blank space, so lets change its background color
20     if(document.getElementById('player'))
21     document.getElementById('player').setAttribute('style','background-color:none');
22     
23     c.drawImage(v,0,0,w,h);
24     setTimeout(draw,50,v,c,w,h); // 100 = 10fps , 50 = 20fps, 33 = 30fps, original 20 milliseconds
25 }

Gestión del efecto : permite desactivar el efecto cuando la pestaña se esconda y se entre en modo pantalla completa, para evitar uso inútil de la CPU.

 1 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 2 // Visibility Events
 3 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 4 var hidden, visibilityChange;
 5 hidden = "webkitHidden";
 6 visibilityChange = "webkitvisibilitychange";
 7 
 8 var videoElement = document.getElementById("crx-html5-video");
 9 // If the page is hidden, pause the video;
10 // If the page is shown, play the video
11 function handleVisibilityChange(){
12     if(document[hidden]){
13         if(autopause)
14             videoElement.pause();
15         tabhidden = true;
16     }else{
17         if(autopause)
18             videoElement.play();
19         if(!document.getElementById("crx-html5-video").ended){
20             videoElement.pause();
21             tabhidden = false;
22             videoElement.play();
23         }
24     }
25 }
26 
27 document.addEventListener(visibilityChange, handleVisibilityChange, false);

En la función que activa o desactiva el reproductor HTML5 agregamos el efecto

 1 ...
 2 //add effect ;)
 3     var v = document.getElementById('crx-html5-video');
 4     var canvas = document.getElementById('c');
 5     var context = canvas.getContext('2d');
 6     var cw = Math.floor(canvas.clientWidth / 100);
 7     var ch = Math.floor(canvas.clientHeight / 100);
 8     canvas.width = cw;
 9     canvas.height = ch;
10 
11     v.addEventListener('play', function(){
12         draw(this,context,cw,ch);
13     },false);
14     //for fullscreen
15     v.addEventListener('webkitfullscreenchange',function(){
16         if(this.webkitDisplayingFullscreen){            
17             fullscreen = true;
18         }
19         else{            
20             //re enable drawing
21             if(!document.getElementById("crx-html5-video").ended){
22                 videoElement.pause();
23                 fullscreen = false;
24                 videoElement.play();
25             }
26         }        
27     },false);
28         
29     videoElement = document.getElementById("crx-html5-video");
30 ...

El código es fácil de entender según creo, así que ahí lo ven.

La extensión la pueden descargar desde el siguiente enlace, funciona tanto en Chrome como en Opera 15.

Extensión

Guardar con cualquier nombre cambiándole la extensión a .zip luego de ello descomprima en cualquier carpeta, copie esa ubicación y agréguela en el gestor de extensiones de Chrome u Opera con el botón Cargar extensión descomprimida utilizando la ubicación de la carpeta de la extensión descomprimida.

No olvide modificar sus opciones como lo mencioné anteriormente.

NOTA: Desactivar la extensión original, si la tienen instalada.

Regresando

2013-05-31T19:59:00.001-05:00

Ya es Junio y he escrito casi nada en este blog, he creado tantos blogs y últimamente (bastante tiempo) no sé qué escribir en ellas, pero algo se me ocurrirá. Además hay bastantes cosas nuevas que contarles.

Muchas cosas han pasado en este tiempo, referente a mis aplicaciones, en primer lugar a Google Music Desktop Player, que dado el último evento de Google I/O, cambiaron el aspecto y agregaron animaciones que lamentablemente el motor webkit que utilizaba ya no aguanta, es decir, se ralentiza demasiado, por ello lo actualicé a una versión reciente, la cual funciona.

Sin embargo presenta errores de gestión de memoria, al parecer debido a las extensiones que utilizo para comunicarme con la página web y que el nuevo motor webkit que estoy utilizando aún no corrige ese error.
Y si aún no lo saben, el programa muestra en sí a la página web play.google.com/music, pero interactuando con ella para poder comunicarle eventos que lo caracteriza, tales como : teclado multimedia, scrobbling a LastFM, apariencia que aprovecha las características del Sistema Operativo (botones en el taskbar), estilos personalizados, entre otras. Y hasta ahora no logro corregir el error de memoria, espero lograrlo.

Aparte, Windows 8 Start Screen Customizer no logré mejorarlo, y corregir algunos bugs, y ahora me entero que Windows 8.1 incluirá la característica que agregaba mi programita, por lo cual, creo que sólo quedará para el recuerdo. Con más de 100Mil descargas, y con buenos comentarios, me dio una gran satisfacción poder compartir un software mío para que otros disfruten.

Por otra parte, está TweetGIF, una aplicación web que permite subir imágenes animadas en formato GIF a Twitter para utilizarlo como imagen de perfil; dicha aplicación presenta contratiempos debido principalmente al servidor limitado para procesar las imágenes, la cual voy pensando en corregirlo aprovechando de HTML5.

Algunos que otras ideas más atraviesan por mi cerebro congelado (hace frío por estos lados, y eso que recién comienza el mes más frígido). Espero hacerlas y por supuesto, compartirlas con ustedes.

Espero les agrade.

uDiario – uno de mis proyectos que nunca terminé

2013-05-31T19:17:00.001-05:00

A finales del 2007 empecé a escribir algunas cosillas para compartir a través de una revista electrónica, específicamente utilizando el formato Portable Document Format (PDF). Sin embargo, no fue publicado.

Ahora después de mucho tiempo encontré ese documento y me trajo tanta nostalgia de aquellas épocas, y las comparto con ustedes, al PDF me refiero.

Advertencia: contiene muchos errores de redacción

Espero les sirva de algo ;)

Descifrando lo que imaginan los libros

2013-04-02T21:04:00.000-05:00

La noche se arrastraba en su lasitud, y con el crepitar de la leña — como si marcase cada segundo — la noche se esmeraba en pintar de negro el cielo y mi rostro se enrojecía frente a la fogata que me abrigaba esa noche a solas, alejado de la siniestra realidad.

Miraba cómo las luces que competían en llegar a mis ojos desde estrellas lejanas, colmaban a mis ojos de tanto regocijo que incluso algunas lágrimas salían curiosas a apreciarlas.

Observaba el infinito, yo tan minúsculo, tan solitario, tan ajeno a nuestros días, sin límites, sin fronteras, sin horas, sin noches ni días, sin fin.

Lugares abandonados que algún día visitaré :B

2013-04-02T20:04:00.000-05:00

Mucha gente no conoce, ni mucho menos ha escuchado de lugares famosos que han sido abandonados. Muchos de estos lugares son verdaderamente impresionantes, pero también transmite tristeza cuando lo ves detenidamente. En la siguiente lista, puede ver lugares abandonados que son sencillamente increibles.

1. Kolmanskop, desierto de Namib, Namibia

Fue construida en 1908 para alojar a los buscadores de diamantes que exploraban el desierto de Namib, un desierto de África que se extiende a lo largo de la costa de Namibia, entre el río Orange, en la frontera con Sudáfrica.

Aquellas épocas, los diamantes se encontraban con facilidad, y era fácil hacer fortuna, de modo que en 2 años se terminó de construir una ciudad completa que tenía casino, escuela, hospital, salón de baile y mansiones con estilo centroeuropeo.

Durante la Primera Guerra Mundial se extrajeron 1.000 kg de diamantes, pero cuando terminó la guerra, esa cantidad se redujo notablemente, sin embargo, luego encontraron diamantes en abundancia a 200km, en la localidad de Oranjemunden cercano al río Orange. La ciudad fue abandonada, dejando sólo la soledad y siendo visitada contínuamente por las arenas del desierto.

2. Nara - la ciudad de ensueño de Japón

Fue construido como parque de diversiones en 1961. El 2006 fue cerrado, y ahora sólo juegan ahí los fantasmas del recuerdo de aquellos niños que alguna vez se subieron a los juegos mecánicos.

Fuente: http://www.lovethesepics.com/2012/03/illegal-tour-abandoned-amusement-park-nara-dreamland-65-pics/

3. Los restos de SS Ayrfield en la bahía Homebush, Australia

Es un bosque flotante como resultado del choque del SS Ayrfield, fue construido en 1911 en el Reinod Unido, y llevado a Sidney en 1912.

Fue comprado por el gobierno Australiano y utilizado para transportar víveres a las tropas Americanas en la región del Pacífico durante la Segunda Guerra Mundial. Luego de ello fue utilizado comercialmente casi 20 años después de la guerra.

En 1972 el Ayrfield fue dado de baja y puesto a descansar en las bahías de Hombebush y ahí descansa en paz.

4. Isla Holland en la bahía de Chesapeake, Maryland, Estados Unidos

La isla Holland fue una vez 8km de largo. Fue el hogar de una comunidad de pesqueros compuesta de 250 a 360 personas, con más de 60 hogares, una iglesia y otras construcciones. Pero la erosión forzó a que sus moradores abandonen el sitio, siendo 1922 el año en que dejó de ser morado por alguien.
Ahora solamente queda una casa.

5. El Túnel del Amor, Ucrania

Es una formación natural, por donde caminan los enamorados, algún día iré ahí :P

6. Craco, Italia

Craco fue una comunidad y villa medieval localizada en la provincia de Matera, como a 40km del golfo de Taranto en Italia. Alrededor del año 540 esa área era llamada "Montedoro" y era habitado por griegos. Las tumbas encontradas datan del siglo XIII, lo cual sugiere que originalmente se establecieron por esas épocas. Debido a los sismos y desprendimientos de tierra, y falta de suelos fértiles, abandonaron Craco.

Fuente: http://sometimes-interesting.com/2011/06/30/craco-italy/

7. El Hotel del Salto en Colombia

En 1924, para entonces el lujoso Hotel (Refugio d)el Salto fue inaugurado en el acantilado mirando hacia las cataratas del lugar (cataratas de Tequendama, Río Bogotá).

A inicios de los 90s fue cerrado debido a la contaminación de las aguas del río. Se rumoreo la posible reapertura del lugar, pero como museo o estación de policía.

Según cuentan, el hotel está encantado y por ahí merodean fantasmas, y es que en aquellas épocas solían ocurrir peleas de bar resultando con un perdedor ebrio que no sólo perdía la pelea sino la vida.

8. Asunción, Paraguay

Un árbol crece en la cima de la chimenea en un fábrica abandonada en Luque, en las afueras de Asunción, Paraguay.

9. Kalavantin Durg, India

Es una fortaleza en la montaña, tiene una altura de 710msnm aproximadamente.

Kalavantin Durg está situada al noroeste de Panvel, India.

De acuerdo a las historias narradas, la fortaleza fue construida para una reina llamada "Kalavanti".

Existen muchos otros lugares igual e incluso más impresionantes, pero estas son algunas que me gustaron.

Transfiriendo mi dominio a otro registrar

2012-08-08T12:03:00.001-05:00

Anteriormente contaba con los servicios de ??? compañía local que me facilitaba tener un nombre de dominio, lamentablemente me resultaba más caro y el proceso era manual, con decirles que tengo que ir a un banco ??? y esperar mi turno para que transfiera cierta cantidad de dinero a cierta cuenta.

Además el precio era de $16 sin incluir el impuesto con el cual resultaba $19.4 y comparando con el nuevo “NameCheap” me reduce casi $10 y además lo puedo pagar online.

Lo primero que hice fue acceder a mi cuenta en NameCheap y presionar el botón Transfer Domain ahí me piden el dominio que deseo transferir.

Antes de proseguir es necesario desactivar la protección de seguridad q nuestros datos, de tal forma que se pueda visualizar nuestro correo, ya que será ahí donde nos envíen lo necesario.

Lo siguiente es averiguar la clave de transferencia denominada por NameCheap como EPP y según la ICANN es AuthInfo el nombre oficial de dicho número que permite la transferencia y/o protege de transferencias no deseadas.

Además lo interesante es que la transferencia en sí cuenta como renovar mi dominio, y como éste vence a mediados de este mes, qué mejor.

Dicho código se copia y se pega en la transacción de NameCheap como dato necesario para continuar la transferencia.

Una vez completado los datos necesarios y hecho la compra electrónica, podremos visualizar el estado de dicha transferencia en nuestra cuenta NameCheap, sólo queda esperar.

NOTA: se sugiere que seguir estas indicaciones para acelerar el proceso. Lástima, recién lo leo :P.

[Actualización]

Más tarde me llegó un correo con un enlace al contrato que se debe aceptar para proseguir con la transferencia.

Y finalmente termina mostrando el mensaje de bienvenida.

Por otro lado el actual registrar me envió un correo electrónico, y al parecer son 5 días los que debe esperar para poder proseguir.

[Actualización después de 5 días]

Finalmente mi anterior “DN Registrar” permitió que mi transferencia de domino se realice.

Y el cambio no demoró mucho una vez aprobado la transferencia.

PD: Si está leyendo esto después del 13 de Agosto, seguramente que mi nuevo registrar sí me permite trucar el CNAME para utilizar otros blogs de Blogger con mis subdominios.

Writing a Metro like window for our applications with Delphi

2012-05-27T18:23:00.001-05:00

Hello, this is my attempt on writing a custom Windows UI for a Delphi application.

Bear in mind that I’m not a professional Delphi programmer, it is my hobby and I’m still learning the tricks behind Windows API. So this will be a walkthrough post that will try to achieve the following Window Metro like on Windows XP or newer (see image below).

Maybe the above picture might look too ambicious but as they say, the more difficult the challenge the better you skills improve.

Hope I will get near to it, so let’s start.

Defining the starting point

To begin with, we need to set the window border style as bsnone and we will be building our Metro-like window taking into consideration every aspect involved on its inherent behaviour, like resizing windows (maximize, restore, minimize, resize, move, aero snap, windows hotkeys, and multimonitor resize).

Let’s add a TLabel component to use it as a title bar

Align:=alTop; //It will occupy the top area as normally does the conventional titlebar
Alignment:=taCenter; // it will align the text horizontally centered
Autosize:=False; // avoid automatic resizing, specially the height
Layout:=tlCenter; // it will align the text vertically centered
Name:=lblAppTitle; //let’s give it a proper name

To give it the power to move the window, we will modify the MouseDown event

procedure TMetroGUI.lblAppTitleMouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  ReleaseCapture;
  Perform(WM_SYSCOMMAND, $F012, 0);
end;

As you can see, we release the mousedown event so no click event will be fired, and we perform a window system command, the undocumented $F012 that is send to every window when a Window move event is called.

A gradient color for the background

Let’s add a gradient effect to the window, it will give a look like the goal’s background color.

To achiveve that, we will use the code published at about.delphi.com http://delphi.about.com/od/adptips2006/qt/gradient_fill.htm

uses Math, ...
 
 procedure GradHorizontal(Canvas:TCanvas; Rect:TRect; FromColor, ToColor:TColor) ;
 var
   X:integer;
   dr,dg,db:Extended;
   C1,C2:TColor;
   r1,r2,g1,g2,b1,b2:Byte;
   R,G,B:Byte;
   cnt:integer;
 begin
   C1 := FromColor;
   R1 := GetRValue(C1) ;
   G1 := GetGValue(C1) ;
   B1 := GetBValue(C1) ;
 
   C2 := ToColor;
   R2 := GetRValue(C2) ;
   G2 := GetGValue(C2) ;
   B2 := GetBValue(C2) ;
 
   dr := (R2-R1) / Rect.Right-Rect.Left;
   dg := (G2-G1) / Rect.Right-Rect.Left;
   db := (B2-B1) / Rect.Right-Rect.Left;
 
   cnt := 0;
   for X := Rect.Left to Rect.Right-1 do
   begin
     R := R1+Ceil(dr*cnt) ;
     G := G1+Ceil(dg*cnt) ;
     B := B1+Ceil(db*cnt) ;
 
     Canvas.Pen.Color := RGB(R,G,B) ;
     Canvas.MoveTo(X,Rect.Top) ;
     Canvas.LineTo(X,Rect.Bottom) ;
     inc(cnt) ;
   end;
 end;
 
 procedure GradVertical(Canvas:TCanvas; Rect:TRect; FromColor, ToColor:TColor) ;
 var
   Y:integer;
   dr,dg,db:Extended;
   C1,C2:TColor;
   r1,r2,g1,g2,b1,b2:Byte;
   R,G,B:Byte;
   cnt:Integer;
 begin
    C1 := FromColor;
    R1 := GetRValue(C1) ;
    G1 := GetGValue(C1) ;
    B1 := GetBValue(C1) ;
 
    C2 := ToColor;
    R2 := GetRValue(C2) ;
    G2 := GetGValue(C2) ;
    B2 := GetBValue(C2) ;
 
    dr := (R2-R1) / Rect.Bottom-Rect.Top;
    dg := (G2-G1) / Rect.Bottom-Rect.Top;
    db := (B2-B1) / Rect.Bottom-Rect.Top;
 
    cnt := 0;
    for Y := Rect.Top to Rect.Bottom-1 do
    begin
       R := R1+Ceil(dr*cnt) ;
       G := G1+Ceil(dg*cnt) ;
       B := B1+Ceil(db*cnt) ;
 
       Canvas.Pen.Color := RGB(R,G,B) ;
       Canvas.MoveTo(Rect.Left,Y) ;
       Canvas.LineTo(Rect.Right,Y) ;
       Inc(cnt) ;
    end;
 end;

And On Paint event of the Form, we’ll add the following

procedure TMetroGUI.FormPaint(Sender: TObject);
begin
  GradHorizontal(Canvas, ClientRect, $e7ded5,$e2e5df);
end;

And the resulting appearance is like this

However, there is no shadow, and since Windows doesn’t apply the normal shadow to a window without style, we need to apply by ourselves, be it by using the so old simple shadow or creating a layered window as a shadow. This last one we’ll be a little difficult but doable, let’s just start with the old shadow one.

For this purpose we need to modify the form create params.

...
  protected
    procedure CreateParams(var Params: TCreateParams);override;
  end;
...
implementation
...
procedure TMetroGUI.CreateParams(var Params: TCreateParams);
begin
  inherited;
  Params.WindowClass.style := Params.WindowClass.style or CS_DROPSHADOW;
end;

We only need to enable the CS_DROPSHADOW flag and we now have a simple shadow.

Now it have a better look. At the end, I’m planning to add a better shadow using another form.

On Lost Focus (onDeactive)

Now let’s add a on lost focus feature, we will change the color of the background to give the users a hint that our application is not the active one.

Let’s create a private variable that will hold the state, and the procedures for activate and deactivate events:

private
    { Private declarations }
    isFocused: Boolean;
    procedure LostFocus(Sender: TObject);
    procedure SetFocus(Sender: TObject);

And they will toggle the focus state an call the repaint procedure

procedure TMetroGUI.LostFocus(Sender: TObject);
begin
  isFocused:=False;
  Repaint;
end;

procedure TMetroGUI.SetFocus(Sender: TObject);
begin
  isFocused:=True;
  Repaint;
end;

But we need to modify the FormPaint procedure in order to get that effect

procedure TMetroGUI.FormPaint(Sender: TObject);
begin
  if isFocused then
    GradHorizontal(Canvas, ClientRect, $e7ded5,$e2e5df)
  else
    GradHorizontal(Canvas, ClientRect, $c8c0b8,$c0c3bd);
end;

Now, we have to background gradient colors depending on form focus state

The normal state

and the unfocused state

The white border line

Let’s give it a white line, to give it a different border line

So, it only needs to be modified the FormPaint

procedure TMetroGUI.FormPaint(Sender: TObject);
begin
  if isFocused then
    GradHorizontal(Canvas, ClientRect, $e7ded5,$e2e5df)
  else
    GradHorizontal(Canvas, ClientRect, $c8c0b8,$c0c3bd);
  with canvas do begin
    Pen.Color:=$eeeeee;
    MoveTo(0,0);
    LineTo(0,ClientHeight-1);
    LineTo(ClientWidth-1, ClientHeight-1);
    LineTo(ClientWidth-1,0);
    LineTo(0,0);
  end;
end;

We just added, with canvas… that draws the almost white line, you can change to any other color of course

Resize borders

It is time to add a resize area, generally it will be located in the bottom-right part of the window.

Let’s add a simple drawing on the right bottom area of our form adding to our formpaint procedure

//lets draw a resize area in the rightbottom part
    Brush.Color:=clwhite;
    FillRect(rect(ClientWidth-4,ClientHeight-4,ClientWidth-2,ClientHeight-2));
    FillRect(rect(ClientWidth-7,ClientHeight-4,ClientWidth-5,ClientHeight-2));
    FillRect(rect(ClientWidth-10,ClientHeight-4,ClientWidth-8,ClientHeight-2));
    FillRect(rect(ClientWidth-13,ClientHeight-4,ClientWidth-11,ClientHeight-2));

    FillRect(rect(ClientWidth-4,ClientHeight-7,ClientWidth-2,ClientHeight-5));
    FillRect(rect(ClientWidth-7,ClientHeight-7,ClientWidth-5,ClientHeight-5));
    FillRect(rect(ClientWidth-10,ClientHeight-7,ClientWidth-8,ClientHeight-5));

    FillRect(rect(ClientWidth-4,ClientHeight-10,ClientWidth-2,ClientHeight-8));
    FillRect(rect(ClientWidth-7,ClientHeight-10,ClientWidth-5,ClientHeight-8));

    FillRect(rect(ClientWidth-4,ClientHeight-13,ClientWidth-2,ClientHeight-11));

It is a simple way to draw a triangle area with separated dots as shown in the following picture

Now, it needs to respond a mousedown event that will perform the resize action

procedure TMetroGUI.FormMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  //let's resize if on resize area
  if (X>ClientWidth-13) and (Y > ClientHeight-11) then
  begin
    ReleaseCapture;
    Perform(WM_SYSCOMMAND,$F008,0);
  end;
end;

The formMouseDown procedure shown above limits the mouse area to that specific area, sending a system command corresponding to the resize width & height together. The result is:

As you can see, it needs somethign more to make it better, since the painting fails, so we just need to call repaint on resize event.

procedure TMetroGUI.FormResize(Sender: TObject);
begin
  Repaint;
end;

And that is enough to make it work better.

Fixing a weird behaviour on resizing the form:

As you can see, the resize procedure can resize the window too much that the user can turn the form like a one pixel form. So we need to limit the minimum width and height to avoid that ugly behaviour.

So on FormCreate, we define those constraints

procedure TMetroGUI.FormCreate(Sender: TObject);
begin
  Application.OnDeactivate:= LostFocus;
  Application.OnActivate:= SetFocus;

  Constraints.MinWidth:=400;
  Constraints.MinHeight:=200;
end;

Now we have a better resizable form.

Double Click Resize

By now, we have a working example of a form. We need to add a double click event to the application title bar, so we will add a double click event to the lblAppTitle component.

Adding a double click procedure for the Application Title

procedure TMetroGUI.lblAppTitleDblClick(Sender: TObject);
begin
  ReleaseCapture;
  if WindowState = wsMaximized then
    Perform(WM_SYSCOMMAND,SC_RESTORE,0)
  else
    Perform(WM_SYSCOMMAND,SC_MAXIMIZE,0);
end;

As you can see, first, we need to know the current window status, if it is already maximized, then we will restore it, otherwise, we will maximize it.

However, this perform function is okay, but we need to modify something because it will maximize to the entire desktop screen size without respecting the working area (all window minus the taskbar area usually).

As we are sending a syscommand event, we need to modify this event, so let’s add it to the form private area

  private
    { Private declarations }
    isFocused: Boolean;
    procedure LostFocus(Sender: TObject);
    procedure SetFocus(Sender: TObject);

    procedure WMSysCommand (var Msg: TWMSysCommand); message WM_SYSCOMMAND;

Now wee need to handle the maximize message

procedure TMetroGUI.WMSysCommand(var Msg: TWMSysCommand);
begin
  if Msg.CmdType = SC_MAXIMIZE then
  begin
    if (WindowState = wsNormal) or (WindowState = wsMinimized) then
    begin
      WindowState:=wsMaximized;
      with Screen.WorkAreaRect do
        MetroGUI.SetBounds(Left, Top, Right - Left -1, Bottom - Top -1);
        Msg.Result:=0;
        Exit;
    end;
  end;

  DefaultHandler(Msg);
end;

As you see, we intercept the SC_MAXIMIZE message and verify if the current window state is different than wsMaximized then we change the windowState to wsMaximized and resize according to the screen work area rect (keep in mind this will only work on one monitor setups, that would be modified later to improve it for dual o multimonitor). Back to the code, we set the actual form bounds to the size of the work area rect, and after that we clear the msg result and exit before giving the msg to the default window handler.

Now our form resizes correctly. In the following steps we will drop that approach with a better one.

Windows 7 Aero Snap support

What if we like to use the windows hotkeys (winkey+arrowkeys) to resize our form?

This can be done easily since any window that is not borderless (non bsNone), will respond to these hotkeys.

To get that behaviour, we will add to CreateParams a style for our form, the WS_OVERLAPPEDWINDOW

Saddly this style gives back the non bsnone borderstyle, i.e., it has the non wanted classic windows border. However, this border style responds correctly to WinKey+ArrowKeys to resize with AeroSnap feature. So we need to get rid again of this classic windows border style.

  protected
    procedure WndProc(var Message: TMessage);override;
    procedure CreateParams(var Params: TCreateParams);override;

So we just added a new procedure that will take care of the Windows processes.

procedure TMetroGUI.WndProc(var Message: TMessage);
begin
  if Message.Msg = WM_NCCALCSIZE then
  begin
    Message.Msg:= WM_NULL;
  end;
  Inherited WndProc(Message);
end;

There we will modify the WM_NCCALCSIZE message which is used to determine the border style size, and with it the window manager draws the classic border. We change that msg to 0 (WM_NULL) as when bsnone borderstyle. And for the other messages, we inherit them.

But, now we see a window resize bug when we Snap to the top screen to maximize it

If you don’t see it, it is the application title bar reduce size, if you compare to the previous snapshot of the maximize event, you will notice that the title’s caption is located a little bit down.

Before proceeding, we will get rid of WMSysCommand procedure we wrote before, since it is not needed anymore because we gave the almost correct maximize event with the AeroSnap feature.

And to fix the bad maximize effect, we will copy the old WMSysCommand procedures to the FormResize event.

procedure TMetroGUI.FormResize(Sender: TObject);
begin
  if (WindowState = wsMaximized)then
  begin
    with Screen.WorkAreaRect do
      MetroGUI.SetBounds(Left, Top, Right - Left-1, Bottom - Top-1);
  end;
  Repaint;
end;

As in the previous procedure, we need to adapt it for multimonitor setups. We’ll add it later.

We’re good till here. However, one thing drives to another one. The new issue due to WinSnap support is that the old system buttons re appear when we click over its area.

To get rid of it we need to set this application as non layered window.

procedure TMetroGUI.CreateParams(var Params: TCreateParams);
begin
  inherited;
  Params.WindowClass.style := Params.WindowClass.style or CS_DROPSHADOW;
  Params.Style:=params.Style or WS_OVERLAPPEDWINDOW and not WS_SYSMENU;
end;

So we just added and not WS_SYSMENU to the Params.Style. However, there will not be a Alt-Space application context menu. But in order to give our app the same experience as with a normal form, we can use a tpanel set align to alClient and the lblAppTitle move inside it, finally the resize mouse area moved to that panel mousedown event.

Clear the TPanel bevelouter to bvNone and only bypass the mouse down event

procedure TMetroGUI.Panel1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  FormMouseDown(Sender,Button, Shift,X,Y);
end;

Easy, ain’t it, just get rid of the Panel caption to erase that Panel1 string on our form.

Metro like system buttons

Now, we’re going to add PNG files to mimic the zune metro system menu.

We add them as resource files, with the Project->Resource and Images… menu, if you have a different Delphi version which lacks that feature, you can still compile RC files with those files.

Once done, we can draw them like this.

procedure TMetroGUI.FormPaint(Sender: TObject);
var
  png:TPngImage;
begin
  ...
  with canvas do begin
    ...
    //let's paint the buttons
    png:=TPngImage.Create;
    try
      png.LoadFromResourceName(HInstance,'PNGCLOSE');
      Draw(ClientWidth-22,8,png);
      png.LoadFromResourceName(HInstance, 'PNGMAX');
      Draw(ClientWidth-44,8,png);
      png.LoadFromResourceName(HInstance, 'PNGMIN');
      Draw(ClientWidth-66,8,png);
    finally
      FreeAndNil(png);
    end;
  end;

end;

This has been added to our existing FormPaint procedure. Make sure to include at Uses clause the PNGImage unit.

Using TImage for Sysmenu buttons

Instead of drawing our custom system buttons, we will use timages with autosize enabled.

Rename them to imgBtnClose, imgBtnResize, imgBtnMin accordingly.

Load them with the default pictures.

Now well add their coordinates to the formResize event


...
//align our metro system buttons
  imgBtnClose.Left:=ClientWidth-22;
  imgBtnClose.Top:=8;
  imgBtnResize.Left:=ClientWidth-44;
  imgBtnResize.Top:=8;
  imgBtnMin.Left:=ClientWidth-66;
  imgBtnMin.Top:=8;
 ...

And to interact with mouse over and mouse out, we will use the event MouseEnter and MouseLeave

procedure TMetroGUI.imgBtnCloseMouseEnter(Sender: TObject);
var
  png: TPngImage;
begin
  png := TPngImage.Create;
  try
    png.LoadFromResourceName(HInstance, 'PNGCLOSEON');
    imgBtnClose.Picture.Assign(png);
  finally
    png.Free;
  end;
end;

procedure TMetroGUI.imgBtnCloseMouseLeave(Sender: TObject);
var
  png: TPngImage;
begin
  png := TPngImage.Create;
  try
    png.LoadFromResourceName(HInstance, 'PNGCLOSE');
    imgBtnClose.Picture.Assign(png);
  finally
    png.Free;
  end;
end;

And now for the Resize button (maximize & restore)

procedure TMetroGUI.imgBtnResizeMouseEnter(Sender: TObject);
var
  png: TPngImage;
begin
  png := TPngImage.Create;
  try
    if WindowState = wsMaximized then
      png.LoadFromResourceName(HInstance, 'PNGRESTOREON')
    else
      png.LoadFromResourceName(HInstance, 'PNGMAXON');
    imgBtnResize.Picture.Assign(png);
  finally
    png.Free;
  end;
end;

procedure TMetroGUI.imgBtnResizeMouseLeave(Sender: TObject);
var
  png: TPngImage;
begin
  png := TPngImage.Create;
  try
    if WindowState = wsMaximized then
      png.LoadFromResourceName(HInstance, 'PNGRESTORE')
    else
      png.LoadFromResourceName(HInstance, 'PNGMAX');
    imgBtnResize.Picture.Assign(png);
  finally
    png.Free;
  end;
end;

As you can see, first we verify if our window is maximized to either draw the restore icon or the maximize one.

Now, to make sure its icon (button pic) shows the correct one when resizing it via hotkey or other ways, we will add to FormResize this simple procedure call

...
  imgBtnResizeMouseLeave(Sender);
...

That will be enough to make it aware of resizing events and will show the correct button image.

Finally we need to add functions to those custom system buttons.

procedure TMetroGUI.imgBtnMinClick(Sender: TObject);
begin
  Perform(WM_SYSCOMMAND, SC_MINIMIZE, 0);
end;

procedure TMetroGUI.imgBtnResizeClick(Sender: TObject);
begin
  if WindowState = wsMaximized then
    Perform(WM_SYSCOMMAND, SC_RESTORE, 0)
  else
    Perform(WM_SYSCOMMAND, SC_MAXIMIZE,0);
end;
  
procedure TMetroGUI.imgBtnCloseClick(Sender: TObject);
begin
  close
end;

Always taking into account the window state, specially for the resize button.

Multimonitor Support

If you have more than one monitor, you will see that it maximizes to only one of them. To avoid that we need to figure it out how many monitors we have, and according to where our application is, we maximize to that monitor.

This is a function that tells us where a specific X,Y coordinate is located, i.e., in which monitor.

function WhichMonitor(horizCenter,vertCenter: integer):integer;
var
  I: Integer;
begin
  result:=-1;
  for I := 0 to Screen.MonitorCount-1 do
  begin
    if(screen.Monitors[I].Left<horizCenter)
    and(screen.Monitors[I].Left+Screen.Monitors[I].Width>horizCenter)
    and(Screen.Monitors[I].Top<vertCenter)
    and(Screen.Monitors[I].Top+Screen.Monitors[I].Height>vertCenter)
    then
    result:=I;
  end;

end;

So when resizing our form, we make sure that the center X,Y of our form is located between those boundaries.

So we modify it to include the monitor support:

procedure TMetroGUI.FormResize(Sender: TObject);
begin
  if (WindowState = wsMaximized)then
  begin
    if Screen.MonitorCount>1 then
    begin
      with Screen.Monitors[WhichMonitor(left+width div 2,top+Height div 2)].WorkareaRect do
        MetroGUI.SetBounds(Left, Top, Right - Left-1, Bottom - Top-1);
    end
    else
    with Screen.WorkAreaRect do
      MetroGUI.SetBounds(Left, Top, Right - Left-1, Bottom - Top-1);
  end;
  ...

And that’s all, now we have a fully functional Metro Skin.

SYSMENU by right click on App Title

Our application wouldn’t be complete if we leave the right click that shows the System Menu of our application. So we will use the MouseUp event of lblAppTitle

procedure TMetroGUI.lblAppTitleMouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
const
  WM_SYSMENU = 787;
var
  P: TPoint;
  MP: Integer;
begin
  if Button = mbRight then
  begin
    P:= ClientToScreen(Point(X,Y));
    asm
      mov ax, word(P.Y);
      shl eax, 16;
      mov ax, word(P.X);
      mov MP, eax;
    end;
    SendMessage(Handle,WM_SYSMENU,0,MP);
  end;
end;

For this purpose we first make sure we clicked with the right button of our mouse (this is hacky approach since other user might have enabled the left handed feature that uses the oposite buttons). Anyways, let’s continue.

The X and Y values store the coordinates relative to our form, so we need to convert it to screen coordinates, thankfully with ClientToScreen we can do that.

After that we place those new coordinates in a 32bits value, the first 16bits holding the Y value and the last 16bits the X value. I don’t know how to do it, so assembly might help . And finally we send a message to our application with the command SysMENU and MP holding the coordinates where it will be shown.

Conclusion

Making a custom Delphi application that mimics the Metro Style of Zune is not a trivial work without the knowledge of WINAPI tricks, and taking into consideration every aspect that a normal application has. However, they’re not as difficult as it might look, with the right tools everything is possible. I know there are many ways to achieve this pseudo skin, with VCL components already built, but I found them the lack of WinSnap, and other features. With this approach you have the entire control of your code.

However, our work until here is not complete, we need to add a shadow effect and the correct icons as our main goal was the Metro Browser concept by Sputnik8, and of course adding the WebBrowser support maybe with TWebBrowser or TChromium.

Finally, I would like to thank you for reading this walkthrough of building a Metro like application with Delphi. Hope you liked it and hope it might be of use for your projects. It took me a lot of try and error, and finally I’ve come up with something I’m satisfied by now.

Download sources

You can get this article source codes for free here:

My final result, very ugly, I know.

Download sources only here, the binary here.

Metro UI with Delphi by Victor Alberto Gil <vhanla> is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.theverge.com.

Win7sé – una herramienta en la cual voy trabajando

2011-11-11T00:40:00.001-05:00

Win7sé es otra de mis creaciones que la hice por necesidad, y las comparto con ustedes, la podrán descargar desde deviantart o desde apps.codigobit.info.

¿Qué es Win7sé?

La idea nació a partir de ver la funcionalidad Exposé de MacOSX, y también el cambiador de aplicaciones de Windows 7 que muestra los iconos y miniaturas.

Me pareció mucho más sencillo poder llamar a esta característica de Windows (Ctrl-Alt-Tab) utilizando mi programa como un lanzador de dicha combinación de tecladazos, y qué mejor que utilizar las esquinas de mi monitor al posar el puntero del ratón en esos lugares.

Este proyecto lo tengo hecho hace bastante, pero no me había dado tiempo de terminarlo. Sin embargo, durante esa etapa pude aprender algunas otras cosas las que también incluí en este programa, como es la de poder integrar mi otra aplicación DesktopFast para poder mostrar los iconos del escritorio aprovechando la funcionalidad que ya tenía esta aplicación.

Como pueden visualizar en la imagen superior, se puede apreciar cómo funciona o algo así, en la pantalla clara pueden ver el configurador de la aplicación, en la cual se pueden asignar los puntos (esquinas) a una acción específica. A su derecha, podemos ver como es lanzado Ctrl-Alt-Tab después de mostrar un fondo oscuro translucido.

Abajo se pueden ver los iconos del escritorio, inclusive si se está utilizando el tan popular programa Fences de Stardock, estos iconos se muestran sobre un fondo oscuro si se está utilizando varios fondos de pantalla a la vez en la configuración de Windows, de lo contrario mostrará la imagen (wallpaper) junto a los iconos, pero éstos se sobreponen a nuestros programas, ahorrándonos minimizar nuestras “quizás muchísimas” ventanas.

Y finalmente podemos ver los gadgets de Windows sobre un fondo oscuro, aunque no funciona muy de manera adecuada, en algunas ocasiones, cumple con su objetivo.

Si deseasen probarlo, pueden descárgalo gratuitamente aquí ~> http://apps.codigobit.info/2011/11/win7se.html

Windows 8 Menu Switcher actualizado

2011-11-05T18:50:00.001-05:00

A propósito de mi entrada anterior de cómo cerrar adecuadamente el explorador de Windows, incluí esta nueva manera (hackish way) a este utilitario que permite cambiar de menú en Windows 8, entre el menú de inicio convencional y el nuevo al estilo metro.

La actualización la publiqué en mi sitio de deviantart, si deseas saber más visita el sitio oficial de la aplicación ~> Windows 8 Menu Switcher

Cómo reiniciar explorer.exe en Windows Vista/7/8 de forma segura [Delphi]

2011-11-05T17:50:00.001-05:00

Muchas veces deseamos reiniciar el explorador de Windows ya sea para aplicar cambios hechos al modificar el mismo explorer, modulos activex que requieren reiniciar explorer, modificaciones al registro de windows entre otras cosas.

En mi caso es la de reiniciar Windows Explorer para cambiar entre el entorno anterior de Windows 8 y el entorno Metro Style.

Pero dejando de lado eso, muchos recurren a matar el proceso del explorador de windows, otros recurren a comandos internos como taskkill entre otras maneras que finalmente eliminan explorer de la memoria, sin embargo existen procesos dependientes de explorer que requieren de un cierre adecuado del explorador, ya sea objetos ShellObj u otros.

Debido a estas razones (pérdida de datos, corrupción de archivos), no es muy recomendable eliminar el explorador de windows de esa manera, por lo tanto, la mejor manera es utilizando el propio método que ofrece tanto Windows Vista, 7 y 8.

El método consiste en presionar Ctrl-Shift y hacer clic derecho en un área vacía del menú inicio, éste mostrará un menú desplegable con la opción escondida de Salir de Explorer.

Bueno, pero como programador, eso no nos interesa, lo que sí interesa es cómo aprovechar esa característica para poder utilizarlo en nuestras aplicaciones (utilitarios) y cerrar Explorer de manera segura.

Utilizando Spy++ para espíar ese proceso, me di con el siguiente mensaje que recibe la barra de tareas para poder cerrar Windows Explorer, el mensaje es WM_USER+436, así que para cerrar el explorador de windows con todas sus instancias abiertas, basta con enviar este mensaje a la barra de tareas.

El código es el siguiente:

PostMessage(FindWindow('Shell_TrayWnd'),nil),WM_USER+436,0,0);

Sleep(1000); //esperamos un segundo al menos

WinExec('explorer.exe',SW_NORMAL); //y volvemos a ejecutar explorer

Con eso basta para que nuestra aplicación pueda reiniciar el explorador de Windows.

Un proyecto de Ejemplo

Para este ejemplo utilizaré Delphi XE2, cualquier otra versión, inclusive Lazarus, permite realizar lo anterior.

File->New->VCL Forms Application – Dephi

Agregamos al formulario un TButton y un TTimer

Deshabilitamos Timer1 (Enabled:=False)

Hacemos doble clic al botón y escribimos el siguiente código:

procedure TForm1.Button1Click(Sender: TObject);
begin
PostMessage(FindWindow('Shell_TrayWnd',nil),WM_USER+436,0,0);

Sleep(1000); //esperamos un segundo al menos
Timer1.Enabled:=true;

end;

Finalmente agregamos este otro pedazo de código a Timer1:

procedure TForm1.Timer1Timer(Sender: TObject);
begin
if FindWindow('Shell_TrayWnd',nil)=0 then
begin
  WinExec('explorer.exe',SW_NORMAL); //y volvemos a ejecutar explorer
  Timer1.Enabled:=false;
end;
end;

Ahora sólo queda probar, presionamos F9 y ya podemos ver funcionando a nuestro pequeño utilitario.

Explicación:

El botón enviará un mensaje a la barra de tareas, el cual cerrará inmediatamente todas las instancias abiertas del explorador de Windows, y luego activará al temporizador (Timer), este último se encargará de verificar si ya se cerró la barra de tareas, y cuando sea así, volverá a lanzar explorer.exe quien es el que contiene a la barra de tareas, una vez hecho eso, el timer se desactivará.

Codigo fuente ~> RestartDesktop.zip (80KB) <~ al descargar cambiar de extensión a .zip

Probando Artisteer3

2011-11-05T17:38:00.001-05:00

Artisteer 3 es una herramienta genial, pues permite crear plantillas tanto para Blogger, como para los demás motores conocidos de blogging o manejo de contenido como Joomla, Drupal, Wordpress entre otros, y lo más interesante es que al realizar una plantilla para este blog, me tomó un rato y utilizarlo fue cuestión de darle mis datos de acceso al programa, y sin necesidad de subir nada, se hizo la actualización de mi plantilla así de rápido.

Este programa es de prueba y desde luego para utilizarlo sin restricciones, vale la pena comprarlo, en especial cuando creas plantillas para estos distintos motores PHP de contenido, así como los gratuitos como Blogger.

www.artisteer.com

Win8Menu AppSwitcher v0.1

2011-08-18T17:44:00.000-05:00

Este es el AppSwitcher sin el menú ni otras de esas cosas de Win8Menu original.

Si han usado con anterioridad Win8Menu, se habrán fijado de la característica para cambiar entre aplicaciones.

Lo pueden descargar desde aquí

Trabajando en Win8Menu un menú parecido al de Windows 8

2011-06-19T17:08:00.000-05:00

No me imaginé que un sencillo programita que lo hice como jugando tuviera tanta acogida, a pesar de no tener mucho que ofrecer al usuario, lo publiqué el pasado 16 de Junio y en tan sólo tres días ya van como 16,800 descargas (4 días).

Debo confesar que mi intención no era más la de maquetar un menú parecido al que ofrece Windows 8 para tablets, y con la ayuda de las sugerencias de la gente en el sitio de descarga, voy agregando algunas nuevas características a este programita, aunque lidiando con muchos bugs ya que soy nuevo en este tipo de aplicaciones.

El sitio de descargas oficial : http://vhanla.deviantart.com/art/Win8Menu-213387297

Espero estar a la altura de sus espectativas, aunque esta experiencia me hace sentir más emocionado y animado en llevar este pequeño proyecto más lejos, al menos de lo que siempre suelo llegar :P

Menu Windows 8 en Windows 7

2011-06-15T22:08:00.000-05:00

Este es un adelanto de lo que voy realizando, está todavía en pañales, se trata de un menú que se parece a la de Windows 8 para Tablets, lo empecé a hacer anteayer y bueno, ahí voy con algunas ideas que me van y vienen para integrarlo.

Este es el vídeo demostrativo de lo que hace hasta ahora.

Como pueden ver, aún le falta un menú más usable, el que estoy utilizando es una página web de inicio.

Si quieren probarlo, adelante lo pueden descargar desde deviantart http://vhanla.deviantart.com/art/Win8Menu-213387297

Este es el vídeo de Windows 8

Estaré agregándole algunas cosas más, si tienen sugerencias por favor escriban en los comentarios.

La verdad sobre King Kong

2011-06-10T08:21:00.000-05:00

La verdad sea dicha, King Kong sólo buscaba una buena recepción.

Vía : Mashable Comics