Posted by: adamws | February 24, 2009

ViewPort JavaScript Object

For all those who do not know what the viewport is, it’s the portion of the document that is currently within view. This generally changes whenever you use the scrollbars. For example, if you were to scroll down on this webpage then the viewport would change.  Likewise, if you were to resize the browser window, then the viewport size would also be changed. It’s still the same document that was originally loaded, but you can only look at a portion of the document at one time. This portion is called the viewport.

I haven’t really seen too much javascript code snippets written that focused on the viewport, which is a shame because I believe it could lead to a lot of very smooth looking javascript effects.

I went ahead and used a few functions that jQuery defines to help describe the viewport and I created a viewport object. In addition to jQuery this code also uses ASP .NET 3.5’s built in javascript library.  If you would like to use this code but are not using the javascript library that ASP .NET provides, then you should only need to  replace the functions Sys.UI.DomElement.getBounds(element) and Sys.UI.DomElement.setLocation(element, x, y) with javascript code that gets the x and y coordinates and sets a new x, y location for a given element (e.g. the popup). I can’t imagine that would be too hard to find.

Here’s the code:

————————————–

function ViewPortVars()
{ }

ViewPortVars.prototype =
{
    X: function()
    {
        return $(window).scrollLeft();
    },
    Y: function()
    {
        return $(window).scrollTop();
    },
    Width: function()
    {
        return $(window).width();
    },
    Height: function()
    {
        return $(window).height();
    },
    UpperLeft: function()
    {
        return { X: this.X(), Y: this.Y() };
    },
    UpperRight: function()
    {
        return { X: this.X() + this.Width(), Y: this.Y() };
    },
    LowerLeft: function()
    {
        return { X: this.X(), Y: this.Y() + this.Height() };
    },
    LowerRight: function()
    {
        return { X: this.X() + this.Width(), Y: this.Y() + this.Height() };
    },
    ElementAreaOutsideViewPort: function(element)
    {
        var area = { Right: 0, Left: 0, Top: 0, Bottom: 0 };
        if (element)
        {
            var bounds = Sys.UI.DomElement.getBounds(element);
            if (bounds.height <= 0 || bounds.width <= 0 || bounds.x < 0 || bounds.y < 0)
                return null;
            if (bounds.x + $(element).width() > this.UpperRight().X)
                area.Right = bounds.x + $(element).width() - this.UpperRight().X;
            if (this.UpperLeft().X > bounds.x)
                area.Left = this.UpperLeft().X - bounds.x
            if (this.UpperLeft().Y > bounds.y)
                area.Top = this.UpperLeft().Y - bounds.y;
            if (bounds.y + $(element).height() > this.LowerLeft().Y)
                area.Bottom = bounds.y + $(element).height() - this.LowerLeft().Y
        }
        if (area.Left > 0 || area.Right > 0 || area.Top > 0 || area.Bottom > 0)
            return area;
        else
            return null;
    },
    IsOutsideViewPort: function(element)
    {
        return this.ElementAreaOutsideViewPort(element) != null;
    },
    PositionPopup: function(element)
    {
        if (element)
        {
            var outsideArea = viewport.ElementAreaOutsideViewPort(element);
            if (outsideArea)
            {
                var bounds = Sys.UI.DomElement.getBounds(element);
                var x = bounds.x;
                var y = bounds.y;
                var padding = 10;
                if (outsideArea.Left > 0)
                    x = bounds.x + outsideArea.Left + padding;
                else if (outsideArea.Right > 0)
                    x = bounds.x - outsideArea.Right - padding;

                if (outsideArea.Top > 0)
                    y = bounds.y + outsideArea.Top + padding;
                else if (outsideArea.Bottom > 0)
                    y = bounds.y - outsideArea.Bottom - padding;

                Sys.UI.DomElement.setLocation(element, x, y);   
            }       
        }
    }
}

var viewport = new ViewPortVars();

——————————

You’ll notice at the very end of the code block I instantiated a viewport object. The idea here is that if you put this code in it’s own file and referenced it at the top of the page, then if you needed to use any of these functions then you could just call the viewport object.

Now here’s an explanation of what each function does:

viewport.X()

Returns the X coordinate of the viewport in reference to the top left corner of the document. For example, if you scroll 200 pixals to the right then this function will return the number 200 when it’s called.

viewport.Y()

Returns the Y coordinate of the viewport in reference to the top left corner of the document. For example, if you scroll 400 pixals down, then this function will return 400 when it’s called.

viewport.Width()

Returns the current width of the viewport.

viewport.Height()

Returns the current height of the viewport.

viewport.UpperLeft()

Returns the X and Y coordinates of the upper left corner of the viewport. To call the X coordinate call viewport.UpperLeft().X and likewise for Y.
viewport.UpperRight()

Returns the X and Y coordinates of the upper right corner of the viewport. To call the X coordinate call viewport.UpperRight().X and likewise for Y.

viewport.LowerLeft()

Returns the X and Y coordinates of the lower left corner of the viewport. To call the X coordinate call viewport.LowerLeft().X and likewise for Y.

viewport.LowerRight()

Returns the X and Y coordinates of the lower right corner of the viewport. To call the X coordinate call viewport.LowerRight().X and likewise for Y.

viewport.ElementAreaOutsideViewPort(element)

This function returns an object with four properties: Right, Left, Top and Bottom. Each property refers to the amount of pixals that the element is occupying outside of the visible viewport. For example, if the element has 20 px off the right side of the screen such that you need to scroll at least 20 px to the right in order to bring the entire element into view then the Right property will be 20. If the rest of the element with exception to the right side is perfectly within view then all other properties will be 0. I made it return null if all properties were 0 just because it saved me some coding in certain projects.

Ex.
var area = viewport.ElementAreaOutsideViewPort(element);
var r = area.Right; //returns 20 in above example
var l = area.Left; //returns 0 in above example
var t = area.Top; //returns 0 in above example
var b = area.Bottom; //returns 0 in above example

viewport.IsOutsideViewPort(element)

Returns true if there’s a little bit of the element outside of the viewport. Returns false if the element is completely within view. You could also write a similar function like IsElementWithinView(element) that would return just the opposite (true if the element is completely within view).

viewport.PositionPopup(element)

This function is actually the concept that lead me to writing this object. When you click a button or a link that displays a popup on the screen this function will determine whether or not the popup is completely within view and if not then it will nudge the popup into view. The element in this case is the popup. I should mention that this function assumes that the code work in this order:

1) The popup is displayed (e.g. “pops up”)

2) This function is called

Whether or not you use this object for a popup, it’s basic purpose is to describe the current state of the viewport and also to tell whether an element is within the viewport or out of view from the user.

Posted by: adamws | May 28, 2008

VOIP with Python or C++

If I wanted to tinker around with writing VOIP applications (preferably using Python or C++ as the programming language) does anyone know where I could start? Is there a package I need to install? I’ve been looking at the Asterisk server but I haven’t had any luck finding a good tutorial on setting it up and communicating to it from a client app.

I don’t have a VOIP phone. I was hoping to just do computer-to-phone or computer-to-computer for now.

I’ve seen a lot of programming language battles. I’ve even been a part of a few. Every accomplished programmer seems to have an opinion on which language they think EVERYONE should use.

…BUT WAIT! I thought the right thing to do was to pick the language based on the project at hand. If you need string manipulation go with Perl, if you need to use objects go with one of the others. Is it a big project that requires some sort of framework.  Okay, then maybe Ruby on Rails or .NET is more what you’re looking for.

The problem I’ve noticed is that no one seems to follow this strategy. Everyone has a language that they are comfortable with and so they would rather go with this language when starting a new project than waste time learning a new one that might not be what they’re looking for.

For example, I’ve talked to a lot of die hard RoR fans out there, and the first point all of them make is “Everything’s just easier in Ruby”. The reason for this, from what I can tell, is that everything follows the 3-tiered “MVC” architecture. That basically means that code for the HTML is held separate from the code that handles data which held separate from the business logic – “A place for everything and everything in its place”. On top of that there are a million-and-one different shortcuts that just make life so much easier.

But the evolutionary wheel hasn’t stopped turning because of Ruby on Rails. To someone that’s not used to the framework or the language it can be a pain in the butt to switch from file to file so many times. It still makes sense to organize it and you’re bound to switch files a lot in programming, but to someone that’s not used to the way it’s organized it can have a backwards affect. Take the endless amount of shortcuts for example. Sure, they make life easier, but only if you already know the shortcut. “I know there’s a fast way to do date validation…now I just have to spend some time looking up what that fast way is.”

I think this is the reason why people stick to the language they’re used to. I don’t mean to pick on Ruby on Rails, it’s just the language I have the most examples for. With every new language comes some frustrating times that may lead most programmers back to their native language. With every technology comes an array of shortcuts and better ways of doing things. The learning curve always gets to be frustrating because the shortcut doesn’t become short until you’ve got it down.

In my opinion the major flaw that causes people to abandon the idea that “the language should be chosen based off the project” is that the learning curve of a newer language can cause people to just go with the language they’re comfortable with instead of the one that might better fit the project.

Posted by: adamws | May 9, 2008

Is Boredom Evolving?

I saw two videos this week that struck me. The first one I saw on Life Hacker by a man named Clay Shirky. The lecture he gave was titled Gin, Television and Social Surplus. In this talk he addressed the issue that I’m sure a lot have people have raised which was “Where do all these people find the time to spend online?” Seriously. All the Wikipedia entries, YouTube videos, Diggs, MySpace profiles and everything related to Web 2.0 are produced mostly by people that are generally just bored. [Click here to view]

Shirky basically states that (and this is a vast over-summarized version – you should really just watch the video) people find the time by social networking when they would normally just watch TV or listen to the radio.

That being said, is this an improvement? Is blogging, YouTubing, Googling, Wiki-ing and general social networking better than watching television?

Most people might say “Yes”, “No” or “Really? Who cares?”

At first I thought it was an interesting discussion but I was indifferent nonetheless. It didn’t really strike a chord until I saw this video published by Wikipedia: [Click here to view]

There’s an image in this video that stood out in my brain. A woman in a third world country reading a Wikipedia article on Vaccines.

Now I’m not going to make the dramatic jump from social networking to world peace, but it does bring up an interesting point. The flow of information has vastly changed in the last decade. Television is unidirectional. Whatever they tell us, we have to listen or turn it off (…or fast forward – but you get my point). With Web 2.0 comes the ability for 2-way media. Not only does information come to us, but now anyone with an internet connection, the know-how and a little boredom can give it out. It may be something as simple as a photograph showing my trip to the East Coast. But it’s there. And whatever small dent it makes on this massive collection of information that is readily available, the more our flow of information grows.

Posted by: adamws | May 9, 2008

Digital Video Editing

Hey guys,

Today’s post is more of a question than anything else. I would like to get into video editing as a hobby. With the popularity of services like YouTube digital video editing and producing is becoming more and more widespread.

So my question to you is how did you get started? What kind of content did you start shooting? What were your first effects/transitions/tricks that you tinkered with? Did you bring in actors (professional or friends)?

What advice would you give someone like myself who is just starting out?

Posted by: adamws | May 6, 2008

Home theatre Setup

As most guys do, I like to tinker with gadgets. However my newest project is seeming to be a bit of a head-scratcher. Maybe you guys can help me out with it.

Ultimately, as an end result I would like to be able to load all my DVD’s onto my computer along side my music library. The goal of this is to store all forms of entertainment media onto one, easily searchable, easily maintainable, source (e.g. my computer). This is easy enough to do considering I can simply rip all my movies using a ripping program, so getting the movies onto my computer isn’t my concern, and naturally getting music onto my computer in this day and age shouldn’t be any big mystery either.

My concern is that, with all my media in one spot, I would like to be able to double-click on a movie on my computer and have it play on my television. Along the same idea I would also like to double click on a music playlist and have that play over my stereo. The problem is that the computer that I would like to house all this media is in my home office and my television set and stereo are in my living room.

This is a problem. I can easily connect my television as a second monitor using the right gadgets and I can very easily connect my stereo to my computer, but that’s not the problem at hand. The television needs to not only be independent of the computer, but in an entirely different room. It also needs to be able to act entirely like a TV should so that if a guest comes to stay they can just turn it on and start watching cable TV. Also when TVs are connected as second monitors they often lose the quality of picture and this is not a fair sacrifice.

I do have a partial solution. I have an old computer that was built right before XP came out (yes, that’s an old computer – who’s feeling the gray hairs poke through). I can put that computer in the living room and connect it to my network. Then I can go onto my office computer (the one with all my movies and songs) and share the directory that holds all the media. This will allow me to go onto the living room computer and access the movies/songs over the network. After that, I just have to get the movie to output to one of the audio/video ports on the back of the television set computer. Then I can probably just do something similar for my music.

But alas, there’s more…

The living room computer still resides on a desk that is far away from the television. To avoid having wires go all over my living room, I would also like to figure out a way to do all of this wirelessly.

…Any thougts???

Posted by: adamws | May 6, 2008

The future of the internet

I was thinking the other day about the future of the internet. What direction does it seem to be going? What are people currently doing on the internet and what will people probably be doing ten years from now?

The answer is of course, “I don’t know” and no one, for that matter, really does know. It’s a relatively new science, and could even be considered a new “organism” for that matter. By organism I don’t mean to suggest anything as science fiction as iRobot or anything to that nature. Instead I consider it to be an organism in the same way that I consider advertising, television, radio and general business to be organisms. They all grow by feeding off of things around them. Most pop-culture mediums could be considered organisms in that they feed off of the mind of people that invest time and money into them.

However when a real organism feeds and then grows, the item by which it fed off of has now been destroyed. This does not seem to be true for pop-culture organisms such as the internet. For example, if a woman invests her time into building a social network, the social network grows but her time has not been destroyed. She invested her time and now she can keep in touch with her friends. She created her MySpace/Facebook/YouTube account for herself and now she gets something out of it for free. And at the same time the organism that is the social network has grown, but not at the price of the woman who gave her time.

But wait, where does the funding come for all these social networks? Advertising right? Money is handed off so the network must feed off of money, right? Well, even then money isn’t really consumed it’s traded for value. Both the social network and the company buying advertising space gets something out of the deal so nothing is really destroyed for the sake of something bigger.

So I sat and thought about this for awhile, and if the internet is an organism how does it evolve? Of course, this led me back to the conclusion that ultimately “I don’t know”. It still is as new of a science as it was five minutes ago. But for the sake of discussion let’s look at the short history that it does have.

In the 1990’s the big thing was online shopping. It was a new and amazing idea that anyone with a 56K connection could buy their Christmas and birthday presents from the comfort of their own home without even changing out of their pajamas. Everyone was sure that the future of the internet was online shopping. But then as most of you know, the market was over-saturated with online stores and most of them ended up going out of business. Only the strong online stores survived and continued to make revenue off of their product. There are still a lot of online shopping companies but no one would consider it to be the center of the internet.

Enter Web 2.0! The future of the internet is definitely social networking. We’re sure of that now! …right? How many social networks are you a part of? How many social networks exist? A LOT. In fact there are more than most people think or even recognize.

Now recall what I mentioned earlier about how advertisers trade money for value by buying ad space on social networking sites. A lot of these companies buying ad space are none other than the online stores that have gained their balance from the bubble burst of the 1990’s, or better yet, are new companies that learned from the bubble burst and developed a better business plan. They may not be the future of the internet but they’re still around. And now they seem to be working with social networking sites that are currently rumored to be the future of the internet.

So will social networking sites be doomed to experience the same fate as the online shopping sites of yesteryear? Maybe. Maybe not. I still don’t know, and I don’t claim to know. My best guess is that they’re probably not going to be the future of the internet. Instead the market will probably get over-saturated and another bubble will burst. However, just as the strongest online stores survived the first bubble burst, I’m sure we’ll see some survivors come out of this one alive.

This still doesn’t completely answer the question of “how does this organism evolve”. I’d like to think of it like pouring dish soup into a sink and then turning on the water. At first an explosion of new bubbles begin to appear and grow. But they can only grow so much before they burst. However when they burst they do not disappear. Instead the suds stick around and help out the new bubbles that seem to forming. This cycle continues as the huge mound of bubbles grows bigger and bigger, not off of one big bubble, but instead off of the millions of small ones. Every single bubble that forms is expected to break. But after all, the most important part isn’t each individual bubble, but the huge mound that the sum of all bubbles form.

Categories