Tutorial: LS Chat Panel in Photoshop CS5

Photoshop/painter techniques. Brush creation and sharing. Actions. How-to's. Etc.

Moderators: Zombie Dave McCaig, Reber, Laura, Dean Welsh, Scott Johnson

Tutorial: LS Chat Panel in Photoshop CS5

Postby Eagle » Wed Jul 27, 2011 5:02 am

[Unfortunately, anything you type in it will be considered a keyboard shortcut by Photoshop. Chris, WHY?!? :knob: PLEASE make it default to regular Ps shortcuts, as it is now, but have an option to disable them while the cursor's hovering over the panel, and give us options to set up our own shortcuts that only work while the cursor's there. Or at least make it so typing in text boxes doesn't trigger them at all, like any other text input box in Photoshop. For now, I'm using these panels as monitors to see if anyone says anything, then switch to my browser to answer.]

Alex Sollazzo did this first, but he did it in Adobe Configurator version 1.0. I just now got around to figuring it out myself, thought someone else might be interested. There isn't a bloody lick of information on how to do this anywhere I could find online.

I used Configurator 2.0. I don't know if the following steps will work the same in 1.0.

Configurator won't work with versions of Photoshop earlier than CS4 and you need Adobe Air to be installed.

This method should, in theory, work with any streaming site's chat box, as long as you can find and edit their specific embed code.

Photoshop has to be able to access the Internet to load the chat box, whether or not you store the HTML file locally or on a server.

There may be a way to embed the HTML code directly in Configurator, but I couldn't get it to work, so I'm using this external file method instead.

This ZIP file contains the files I used to set up my own chat panel: http://clockworkgate.com/Chats/Mine.zip

[The Mine.gpc file needs to be in the same location as the Mine.assets folder, but NOT inside it.]

First, create an HTML file [or edit the Mine.html file in the ZIP]. If you haven't done this before, I do it by creating a new TXT file on my desktop [I'm in Windows, mind you], open it in Notepad, dump in text like this:

Code: Select all
<table border="0" bordercolor="#000000" style="background-color:#FFFFFF" width="85%" cellpadding="3" cellspacing="3" align="center">
         <object width="200" height="228" id="lschat" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
            <param name="movie" value="http://cdn.livestream.com/chat/LivestreamChat.swf?&showTimestamp=true&channel=comicflats"></param>
            <param name="allowScriptAccess" value="always"></param>
            <param name="allowFullScreen" value="true"></param>
            <embed src="http://cdn.livestream.com/chat/LivestreamChat.swf?&showTimestamp=true&channel=comicflats" name="lschat" width="200" height="228" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" bgcolor="#ffffff"></embed>

If you use BlogTV or Ustream or whatever other service's chat, your code will be different.

[I'm not an HTML expert, but I know at least some of that is actually junk code. I don't feel like figuring out what's extraneous right now. If you know more and could help me clean it up a little, please do!]

In that jumble of code, there are two instances of "comicflats": That's what tells it to load my chat panel. The address to my Livestream account is:


You would replace "comicflats" in the above code with whatever appears there for your account, or whoever's account is your favourite.

There are also two instances of width="200" height="228". I don't know why it needs two. The first instance doesn't seem to change anything, but I set both to the same values anyway. You may want to experiment with different values for your own environment.

Save, close Notepad, rename the TXT file to Whatever.html. Put this file wherever you want to store it. If you have a web server, you can use that, or somewhere on your hard drive.

You can open my GPC file in Configurator, or create your own.

Here's how to create your own:

    Open Configurator and click Create Panel:


    Name your panel whatever you want:


    Increase the size of your working area by dragging a corner. It doesn't have to be very big. Don't worry about its location on the screen:


    On the left, expand the Widgets menu and find HTML in there. Click on it, hold and drag it into the working area:


    While the HTML widget is selected, scroll down the Attributes panel and find the Basic Attributes section. These settings are important:


      1: Change Starting Location (URL): to whatever the path to your HTML file is. In my case, the path to it on my web server looks like:


        If it's on my desktop, it looks like:


      2: Change Width to 215

      3: Change Height to 268

      4: Change Position (Horizontal): to 0

      5: Change Position (Vertical): to -25

      6: This extraneous button bar gets hidden by setting 5:

    [These height and width numbers work for the height and width values in my HTML code. If you put different values in your HTML, you'll need to put different values in Configurator too. HTML Height + 40, Width + 15 should do.]

    You should now have something like this [though yours may actually load the chat box inside Configurator; my firewall defaults to blocking everything from accessing the Internet]:


    Click File -> Save Panel

    Click File -> Export Panel

    The Panels folder is located here:

    <Your install path>\Photoshop CS5\Adobe Photoshop CS5\Plug-ins\Panels

    If you have Photoshop open already, save your work and close out.

    Relaunch Photoshop.

    Hit Window -> Extensions -> <Your panel name>

    It should look something like this [I had to resize it to not waste space around the edges]:


I have three tabs there because I made three chat panels. One for mine, one for Alex's and one for Emily Warren's. You can make however many you want, but since the Livestream chats are Flash-based, you may or may not see a performance hit if you have a hundred running.

As you can see, it ends up very small using my height and width numbers.

The HTML widget acts like a mini browser inside Photoshop. You could technically load any web page in it by setting, for example, index.php as the Starting Location (URL):. I don't know what code base this mini browser uses, so I don't know what vulnerabilities it has. USE IT TO BROWSE THE INTERNET AT YOUR OWN RISK.
User avatar
Posts: 6078
Joined: Wed Feb 07, 2007 1:54 pm
Location: French-Québecois

Re: Tutorial: LS Chat Panel in Photoshop CS5

Postby ChrisCox » Fri Jul 29, 2011 10:10 am

Typing being considered a shortcut is a bug. You need to file a bug report with details and the panel for debugging. Unfortunately, it needs to go to a different group and I can't help too much.
User avatar
Posts: 569
Joined: Tue Apr 29, 2003 3:05 pm
Location: San Jose, CA

Re: Tutorial: LS Chat Panel in Photoshop CS5

Postby Eagle » Fri Jul 29, 2011 11:07 am

Alright, thanks.
User avatar
Posts: 6078
Joined: Wed Feb 07, 2007 1:54 pm
Location: French-Québecois

Return to Tricks & Techniques

Who is online

Users browsing this forum: No registered users and 4 guests