Javascript "setTimeout()" Function

I needed to write a portion of the billboard to have information stored and linked to each other. I first thought about having classes, but I originally thought that Javascript was a classless language. After doing some research I found that classes can be imitated in Javascript by using functions. I found a good article on defining a class in Javascript that helped me learn about the Javascript classes. A each of these 'classes' have public and private variables. The public variables are set by using the 'this' keyword while the private variables do not have the keyword.

In this billboard application, I also needed to find a way to have the function call itself and loop. So I decided on using the setTimeout() function. The setTimeout() function actually calls the function after a set amount of time. I originally thought that the code stops at this function then moves on to the next line of code after the function is called, but in actuality, the code is put in the background for a set amount of time then executed when the time is up. This was a big relief as it allowed me to execute each of the individual 'div' portions of the page.

I ran into an interesting problem while working with the setTimeout function. Trying to call a function that has parameters in the setTimeout() function. For example:

setTimeout(foo(parameter1, parameter2,parameter3), 2000);

would not work since the function expects the function that will be called, a comma, then the time (in milliseconds) to wait before the code is executed. So I looked up this problem and learned that I had to use closures in my code. I found a good article about how to use closures. So to get my code running I had to set a variable that holds the function call with the parameters. Using closures, my code looks like the following:

var temp = function() {foo(parameter1, parameter2,parameter3);};
setTimeout(temp, 2000);

Our billboard is now almost complete as it has nice transitions from one of the content to the other. Our billboard for the kukui cup can be found here.

Useful sites I found:
Using Closures:
http://www.lejnieks.com/2008/08/21/passing-arguments-to-javascripts-settimeout-method-using-closures/

Set Interval vs setTimeout:
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Defining a class in Javascript:
http://www.phpied.com/3-ways-to-define-a-javascript-class/

Fade in and Fade out

While working on the class project, I needed to find a good way to get each of the individual div's in the html file to transition from one information to the other. I wanted to the transition to have the the information to fade in and then fade out. Since I am a total novice, I first looked up transitions and found that transitions could be easily done if I used the 'meta' tag. I tried using this tag with the appropriate attributes, but for some reason the code would not work on my screen. It turns out, the 'meta' tag is only useful in IE. The tag is made by Microsoft and only works on their browsers. So I needed to find another way to implement a fade in/out effect. After looking a little bit online, I found that there was a way to have a something fade in and fade out using Javascript. It is actually a very simple piece of code that uses the DOM styles attribute. The code is as follows:

FUNCTION setFadeIn(value){
IF (value <= 100) {
setOpacityValue(value);
+value += 10;
window.setTimeout("setFadeIn("+value+")" 100);
}
}

FUNCTION setFadeOut(value){
IF (value >= 0) {
setOpacityValue(value);
value -= 10;
setTimeout("setFadeOut("+value+")" 100);
}
}

FUNCTION setOpacityValue(opacityValue){
document.getElementById("someID".style.opacity = opacityValue/100;
}



By simply changing the opacity of an element, having something fade in and out is pretty simple. I have gotten this transition to look nice and work, but I now have to figure out how to get the transition to work with all the different elements of the current billboard gadget. Having the different elements working concurrently is pretty challenging and I hope to figure out this problem by my next week's blog.

Our current billboard, which still has some debug code on it, can be found at our google project site.

Full Screen Problems

My group, Paul and I, have finished working on our gauge project and are now working on a billboard for the upcoming kukuicup competition with two other gadget group members, Kendyll and Edward. This billboard will be displayed on a screen within the eating area of UH campus during the kukuicup competition. We have decided to make this billboard using HTML, CSS, and Javascript.

This week Paul and I did the mockups for the billboards. These mockups can be found at our project hosting site in the images folder in the wiki page.

Since the we will be showing the billboard using HTML, we need to have the browser have a nice full screen so we tested out some pages in full screen to see how it looks. While looking at the full screen of the Chrome browser, I saw that there were boarders around the edges of the screen. It turns out that these boarders only show up on Windows 7 when trying to view a page in full screen. These boarders show up because of Windows 7's default glass theme, which allows the user to see a blurred view of what's behind the window. To fix this, all I had to do was change the default theme to something else and it was fixed. But I liked my theme so I decided to try to find another browser to test the billboard.

Next I decided to use Mozilla Firefox. This browser also has a problem with the full screen capability as it was setup to always have a small boarder at the top of the screen that shows the menu when it is scrolled over. Luckily this problem has been experienced by many others and someone already made an add-on that fixes this problem. The add-on is called 'Full Fullscreen' and can be found here. Once installed, all I had to do was change the options of the add-on by checking the 'Hide tab bar' option in the add-on's option menu.

My new group's project site can be found here.

Gauge Milestone Review

This week we made many small changes to our gauge gadget this week. There were no major problems that arose with the changes to I will just talk about the changes that we made this week and why and how we made these changes. Some changes we made were making the user input a wattdepot server url, we had to change the datatable that we receive from the wattdepot server to only show the units, added a timestamp and display the data type (power generated or consumed) below the gauge visualization in the gadget. The last problem (display the data type below the gauge visualization) is pretty self explanatory so I will not talk about it.

In our last gauge, we did not allow the user to input a specific URL to the wattdepot server but instead had the URL hard-coded. We did not know that there were many different URLs to different wattdepot servers so we took out the hard-coded URLs and added a user preference where a user can input the URL.

The second problem was that we decided to change the label within the gauge to just show the units of power generated or consumed. The following image shows our problem.

As the image shows, the label for the gauge is "Power Cons. (W)". The gauge retrieves the label from the first column of the data table. So to fix this problem we just used the setColumn() method in the dataTable class.

We also added a timestamp to the gadget where the timestamp will indicate the last refresh check. Adding this was pretty simple as we were just able to copy the code from our wattdepot monitor gadget.

After making the changes to our gauge the gauge currently looks like the following:


Something that I thought about for this gadget while writing this blog is to maybe have the url and sources be dynamically updated and be in a drop down format. Since the URLs are a little long and hard to memorize, having the URLs in a drop down menu will be much easier for the user. Also, since the certain wattdepot server URLs have specific sources that they are able to reference (ex. http://server.wattdepot.org:8188/gviz have sources kailua-house, saunders-floor-2) we could try to set the dropdown menus to display only sources associated with the selected server URL. So given the last example, if a user selects the server URL http://server.wattdepot.org:8188/gviz from the drop down menu, only the sources kailua-house and saunders-floor-2 will be in the sources drop down menu.I am not sure if this is possible but I will look into it have hopefully find a way to implement this idea in the coming weeks.

The gadget project can be found here.

Gauge Ticker

While updating the gauge gadget for wattdepot this week, we ran into a few small problems. Initially, we ran into a simple problem that every programmer hits once in a while. I had a small bug where we missed typed an id for one of our id's in the XML google gadget. Instead of writing 'data_source_URL', I wrote 'datasourceURL'. This one small bug caused me problems for about 1-2 hours. We initially thought that the bug in our program was from the query request and retrieve that we made to the spreadsheet document. We thought that the query was the cause of error since the program would seem to bomb out every time it would enter the function that gets information from the spreadsheet. I had to figure out the program by trying to show the string on the screen through a 'div' statement in the xml.

After I finally fixed the problem I began to work on getting the gadget to refresh every 5, 10, 30, 60, and 300 seconds. I quickly got the gauge to refresh every x amount of seconds by using the setTimeout() function. But I couldn't figure out why the gadget wouldn't get the new values that were being updated on the spreadsheet. I found that the 'Query' function for the google visualizations needed to be called to get the more recent spreadsheet info. So i wrote the following code:

function moveTicker() {
queryDataValue = new google.visualization.Query(dataSourceUrl);
queryDataValue.send(handleDataValueQueryResponse);
setTimeout("moveTicker()", x);
}

This new function call to the spreadsheet at the given URL using the Query information every x amount of seconds. The function handleDataValueQueryResponse is a function that is called when the query is sent. The handleDataValueQueryResponse function, only retrieves the spreadsheet data and updates the gauge. This code runs in an infinite loop, since the program is designed to always retrieve data.

My project can be found here.

Return from Break

Spring break was a very refreshing week. There was not much progress with our gauge application during the break. This was due to the face that we (me and my group mate paul) was assigned to work on getting the basics of the gadget running. This was a pretty simple task as both my partner and I worked on gadgets for the past 2 milestones. There is only one small problem with the gadget so far. There is an overlap in within the visualization.

At first I thought that this overlap may be a problem later on. But after talking with my partner, we figure that we will only be using one gauge at a time in each of the gadgets. So although we have two gauges shown in the gadget at the moment, we will cut it to one gauge.

New Group Project/Gadgets in review

After a couple months of working with Google gadgets, our group has moved away from the Google gadgets with visualizations and instead we are going to concentrate more on the visualization aspect. By focusing on the visualization aspect some of the coding should be a little bit easier. I am not 100% sure on what exactly we have to accomplish in this next portion of the course so I will write in more detail what we plan on working on in my next blog. So, since we are shifting our focus a little, I have decided to write a review some of what I have learned from the gadget projects.

In the Google gadgets projects, we had to pass a lot of information back and fourth and retrieve data from many different sources. While making the stoplight gadget and also making the wattdepot monitor gadget, we had to do two things to get the gadget working. We first had to get the visualization aspect of the code up and running, which is written in javascript. We then had to get the visualization code to run and work with the xml code that google gadget uses. So the gadget xml code retrieved the user inputted data, which then passes the information to the javascript where the visualization code runs. This visualization code retrieves the current api from the visualization website and draws up the information we need to get the visualization working. On top of that, both the stoplight and monitor gadget is looking at a data spreadsheet that is constantly changing. Having the code run through all these steps to get it running was a little of a pain. Luckily, while working on the project we never ran into a problem where something small that was out of our control went down. For example, we never had a problem with the visualization code not retrieving the library for the visualization. So by just having to work with the visualization portion of the code, I hope to sharpen my javascripting.

Overall, it was very fun working with the Gadgets and my group mates. I have learned a lot working on this project, especially about svg images and javascript. I enjoy coding and hope that the next half of the semester will just as fun.