VideoSkin™, a non-rectangular browser skin
Introduction to SlickSkins™ and VideoSkins™
What's the big deal with skins anyway? In addition to looking very cool, they provide many marketing advantages. Back in 1997, I decided to create skins by creating a NON-rectamgular shape, i.e. region, for the Internet Explorer browser as you can see in the image above.
This automatically gives your skin the incredible functionality built into the Internet Explorer browser like DHTML, Java, Video, and the ease of creating fantastic looking web pages which can reside client side or come from a remote server. All we need to is to DISGUISE the Internet Explorer browser so we can use all of the incredible GUI functionality that is ALREADY resident in it and resident on every Windows computer.
Just think of the development time companies can save in creating and updating their applications GUI screens because instead of hiring a C++ or C# programmer, they can have their artist change any program screen and its functionality remotely or client side in just seconds! And any screen can be displayed in any language, including Japaneese and Chinese instantly while keeping the size of the executable file to under 200 Kb, and without the need for any additional programming.
Skins make your program Stand Out, and FIRST impressions are everything
- Skins make users Recognize your program, i.e. Brand Identification
- Skins are the best form of advertising, and users will REMEMBER your software
- Skins make your program Competitive
- Users can't help but notice your SKINNED software
In software markets competition of products is mostly based on the user interface, and a well designed Skin puts your software ahead of the competition! In addition to looking very cool, skins provide many programming advantages in the development of all kinds of business applications. Skins are by their very nature "self-distributing" which means that people like to play with them so much that skins of any kind are the hottest downloads on the Internet.
In 1997, I decided to solve this problem by using a new approach to creative skins in general that would be both easy so any user could create their owns skins, and have greater functionality.
I decided to use Ordinary Web Pages with Non-Rectangular Regions as Skins...
Why? Because of the the incredible functionality that is already built into the Internet Explorer browser like DHTML, Java, Video, and the ease of creating fantastic looking web pages which can reside client side or come from a remote server. This approach that uses Web Pages as Skins that I call "Web Skins" provides a lot more than simply a slick looking screen in that they drastically reduce the cost and development time of any application, and allow a company to provide information to installed applications on millions of computers instantly without using additional bandwidth. Here are just a few of the many advantages to using Web Pages as Skins:
- Ability to Change Scale or Media Player Size Proprotionately. This is one of the biggest advantages of using Web Skins in that they are based upon MFC's Region APIs that have the best code already written for proportionally scalling any window. When you create a web page to use as a skin, you can smoothly change the size of the Media Player without the need to create a new region because it uses Scaled Vector Graphics to accomplish any change in screen size. This is VERY COOL. The current demo does not illustrate the scaling features.
- Reduced Development Cost & Time. Companies save development time and cost in creating and updating their applications because instead of hiring a C++ programmer, an artist can change the screens and functionality of any screen element instantly on millions of users' computers by simply change a web page on the company's website.
- Automatic Download & Installation of New Versions & Updates. Users do not have to ever download any new versions or install any updates.
- Displays Screens in ANY Language. Screens can be displayed in any language, including Japaneese and Chinese instantly without the need for users to download any new software for that new language.
- Smaller Size for Faster & Cheaper Downloads. Media Players that use my Web Skins are less than 100Kb in size which saves money on bandwidth and makes it much easier and faster for users to download.
Re-Shaping Internet Explorer
It's easy to disguise Internet Explorer so its looks exactly like any other screen you would create by simply creating a non-rectangular, region, or skin.
The approach here was developed by me in 1997 to place the code for creating regions inside of a Dialog Class and later a Form Class to retireve the region for the Form's shape from the HTML code itself retrieved from a remote server. Each screen or GUI in the application is the Internet Explorer WebBrowser Control sinked into the client's Internet Explorer or Netscape browser to respond in some way to the user's Internet activity.
In practice, my own applications retrieve from a JSP or ASP server the screen and the screen's region file. In this way, the cient program can remain UNDER 200 Kb in size and be able to instantly retrieve in any language, including Japanese or Chinese the content of screen, and the functionality of the screen's controls themselves---all retrieve from some remote website! This means you can instantly change any screen or its functionality on millions of computers without the necessity of the user downloading a new update. Screens can also be generated from the client side as well.
One common use, for such "Skins" applications is to provide competitive pricing alternatives to users while they are shopping on some website by sinking the events of the browser and the shopping cart they are using.
SlickSkins™ and VideoSkins™ Modeless Forms with IE Browser
We dynamically create the Microsoft WebBrowser Control on a modeless form where the entire surface of the form is covered with a browser to give us a GUI screen that is instantly language independent with incredible graphics and includes powerful XML functionality without the need to write any code! In addition, the GUI content can be either client side based or server based which means that a company can INSTANTLY change all of the screens and their functionality in their software in less than one second on millions of computers without ever re-installing one copy of their software!
This means that ALL of the screens in this sample application are skinned, non-rectangular browser windows filled with .htm files which allows for spectacular looking screens that can be easily modified by anyone either client side or server side.
How To Make SlickSkins™ and VideoSkins™ "Draggable"
One important requirement is that we make our Internet Explorer GUI "draggable" so that users can click on some image, region or text INSIDE OF the displayed web page and, holding down their mouse, drag the ENTIRE browser window anywhere on the desktop. There are several ways to do this but the easiestr and most reliable I've found so far is the following:
private void skinBrowser_Navigating(object sender, WebBrowserNavigatingEventArgs e)
{
string csEvent = string.Empty;
string csAction = string.Empty;
string csData = string.Empty;
string csQuestionMark = string.Empty;
string test1 = e.Url.ToString();
string test = test1.ToUpper();
string[] url1 = test.Split(':');
if(url1.Length>0)
csEvent = url1[0];
if (url1.Length > 1)
csAction = url1[1];
if (url1.Length > 2)
csData = url1[2];
if (csAction.IndexOf("DRAG")>-1)
{
e.Cancel = true;
ReleaseCapture();
SendMessage(Handle, WM_NCLBUTTONDOWN, HT_CAPTION, 0);
}
}
The best way to prevent the right-mouse click from popping up a menu in a skin dialog is to add the following to the BODY tag:
oncontextmenu="return false"
Another subtle feature that you must address is that when you drag the skin around is the problem of a LARGE rectangle that appears around the skin as you drag it thanks to Microsoft's lack of attention to making things look good. To solve this problem you need to the "SetViewWhileDrag" property and to make sure there is a registry entry for it as well. This is done as follows:
SystemParametersInfo(SPI_SETDRAGFULLWINDOWS,1,NULL,SPIF_SENDWININICHANGE);
Create Cool Looking VideoSkins™ & SlickSkins™
My Media Player is a modeless dialog with a Web Browser. When a VideoSkin™ is loaded an ordinary web page becomes the screen of the player and a non-rectangular region is created for dialog and the video window on the dialog.
One of really cool features of VideoSkins™ is that you can create skins with ordinary web pages (Patents Pending). To stimages the process of creating an ad you simply use your favorite word processor or hypertext editor to create your skin. You can use any type of picture file format, here we are using ".gif files"
 |
 |
| Skin Image (tvdoor.gif ) |
"TV Door" Media Player |
Create web page with image of your skin. Use a <DIV> tags to position skin as follows:
<html><body text="#FFFFFF" bgcolor="#000000" onLoad="testDoors()" oncontextmenu="return false">
<div id="skin" style="position:absolute; width: 400; height: 432; z-index: 7; border: 0px none #000000; left: 0; top: 0">
...
</div>
</body></html>
I included a Skins Editor that allows you to open up ANY TYPE of image file and create a region from it, and save that region to a file with the extension ".rgn" so you can create and save your own region files.
In this example, we take the main picture of player that is in our web page, and we create a Player Mask, in this case, the image file "tvdoor.gif" shown below in Figure 1. Then we create a Video Mask, in this case, "tvdoorv.gif", as shown below in Figure 2. We will call our skin, "door.htm" and the skin info is placed INSIDE of the .htm file, but I prefer this external naming approach myself.
You use the Skins Editor to select the mask image files, p1.gif and v1.gif, respectively, and create their corresponding region files, p1.rgn and v1.rgn, which you need to save in the regions directory. The Skins Editor will take the color of the pixel in the upper-left hand corner of the image as the color to make transparent in the region file.
Create a mask for the player and the video screen as shown below. It doesn't matter what type of picture file format you use. In this case we are using ".gif" files. The color of the pixel in the upper-left hand corner of the picture will be used as the color to set to "Alpha" or transparent. It is not necessary to create a mask for your browser, since the browser is made non-rectangular by the Region for The Player Screen itself. It is easy to create great Eye-Catching, Money-Making Effects..
Player Mask (p1.gif)
region file = "p1.rgn"
Figure 1 |
Video Mask (v1.gif)
region file = "v1.rgn"
Figure 2 |
= |
Player & Video Regions
Figure 3 |
Script Language Overview
Event Handlers
The following Event Handlers are important because they allow you to control what VideoSkin™ does from WITHIN your Javascript.
To create a control button for the Windows Media Player, simply create a button using hypertext or javascript and make the link action for the button as indicated below. For example, to create a button to CLOSE the Media Player you would simply attach the link:
<a href="EVENT:CLOSEPLAYER">
to the button's action. It is that simple! To add more options than listed here, simply launch the Options Panel which gives the user control over almost all of the properties of the media being played such as control of filters and other special effects.
| Close Screen |
<a href="EVENT:CLOSEPLAYER"> |
| Minimize |
<a href="EVENT:MINIMIZE"> |
| Options Panel |
<a href="EVENT:GETOPTIONS"> |
| Select Media |
<a href="EVENT:GETMEDIA"> |
| Select Skin |
<a href="EVENT:GETSKIN"> |
| Play |
<a href="EVENT:PLAYVIDEO"> |
| Pause |
<a href="EVENT:PAUSVIDEO"> |
| Stop |
<a href="EVENT:STOPVIDEO"> |
| Rewind |
<a href="EVENT:RWVIDEO"> |
| Fast Forward |
<a href="EVENT:FFVIDEO"> |
| Beg |
<a href="EVENT:BEGVIDEO"> |
| End |
<a href="EVENT:ENDVIDEO"> |
| Small |
<a href="EVENT:LOADSKIN:SMALL"> |
| Big |
<a href="EVENT:LOADSKIN:BIG"> |
| Hide Video Screen |
<a href="EVENT:HIDEVIDEO"> |
| Show Video Screen |
<a href="EVENT:SHOWVIDEO"> |
|
Make skins "draggable" so users can click on any image,
or <div> region INSIDE OF displayed skin and, holding
down their mouse, drag the skin.
|
<a href="EVENT:DRAG"> |
| Launch Web Page in IE Browser |
<a href=
"EVENT:
IEBROWSER:www.somedomain.com/page.htm">
or for a local client side file use...
<a href="EVENT:IEBROWSER:page.htm"> |
| ONLY Load Player Rgn Instead of Entire Skin |
<a href="EVENT:RGNPLAYER:stone"> |
| ONLY Load Video Rgn Instead of Entire Skin |
<a href="EVENT:RGNVIDEO:stonev"> |
Remove Right Mouse Menu Popup
The CORRECT WAY to prevent the right-mouse click from popping up a menu in a skin dialog is to add the following to the BODY tag:
oncontextmenu="return false"
NOTE: You may NOT use the names SlickSkins™, VideoSkins™, LiquidVideo™, or VideoAnyWhere™, etc. These are trademarks and copyrights of my company, William SerGio & Co., Inc.
Creating SlickSkins™ and VideoSkins™ Regions Dynamically
There are a lot of different ways to setup the skin and its region. You can include a region file (.rgn) as you would a .gif or .jpg file art file and the program will retrieve the region file from the client or server as it would any image file. Region files are only 3k or 4k in size. In this example, I cover these different approaches:
Reading .htm and region file from a directory or zipped file that is located either on client or a server to create the skin. This allows you to create the region first while the browser is loading on a separate thread.
Reading .htm file from a directory or zipped file that is located either on client or a server, and then retrieving the region from the "OnDocumentComplete" event of the WebBrowser control. This technique means that the region can be read dynamically from an html tag that specifies the ".rgn" file or art file located on a remote server to use for the region and is better suited to some business applications.
Transform the contents of a Region File to a Static Data File and included that data in the text of the html file itself as text, and transform it your .cpp file. Say your region file is "myregion.rgn," with a file size of 6 bytes, and its content in hexadecimal values is "0xFF 0xF0 0xDD 0x3A 0x00 0x28", then TYPE the STATIC DATA FILE into your .html file and read and transform it in your .cpp file as follows:
unsigned char RGN_DATA = {0xFF, 0xF0, 0xDD, 0x3A,0x00, 0x28};
int RGN_SIZE = 6;
CRgn m_Rgn;
m_Rgn.CreateFromData(NULL, RGN_SIZE, (LPRGNDATA) RGN_DATA);
Dynamic Re-Sizing of Regions.I resize the non-rectangular regions dynamically using using a STATIC DATA FILE for the region and "GetRgnBox(LPRECT lpRect )" to resize the region so that it fits every screen exactly on any monitor or operating system.
The SlickSkins™ and VideoSkins™ Editor
I will upload shortly a Skins Editor that allows you to open up ANY TYPE of image file and create a region from it, and save that region to a file with the extension ".rgn" so you can create and save your own region files.
Plugins and Pathway Settings
This program does NOT require you to install any media player. It does NOT use the vlc activex control. It uses e a very simple .NET Interface to the vlc, VLC.cs, to play video and access all of the vlc plugins.
I posted 3 zipped files of all of the most important vlc plugins including all of the DirectX effects that you can apply to any video. You can play almost anything from DVDs to streaming television and transcode and save videos in any video file formats.
You must download and install the plugins in the plugins directory inside of the bin directory. I only included the very minimum plugins needed to play video and you really should download all the vlc plugins from the vlc website and install them in this plugins directory.
The executable, videoskins.exe, and the vlc library dll, libvlc.dll, must be in the same directory that the plugins directory is located inside of in order to work.
The interface is created by simply declaring the functions found in vlc's source code. You can easily add any additional functions from vlc you might want to add like these were added:
[DllImport("libvlc")]
static extern int VLC_Create();
[DllImport("libvlc")]
static extern Error VLC_Init(int iVLC, int Argc, [MarshalAs(UnmanagedType.LPArray,
ArraySubType = UnmanagedType.LPStr)]string[] Argv);
To create a handle to the library, i.e., iVLC, you just call:
this.iVLC = VLC_Create();
To play video in any window, control, region, or object you just pass the handle to VLC_VariableSet as an integer as follows:
public void SetOutputWindow(int outputWindow)
{
if (outputWindow > 0)
VLC_VariableSet(iVLC, "drawable", outputWindow);
}
Summary
If you have any questions about this article or source code, please feel free to contact me, or would just like to put your website on national television, please feel free to contact me. And SlickSkins™, VideoSkins™, WebSkins™, and LiquidVideo™ are trademarks and copyrightof William SerGio & Co., Inc.
