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.

Stoplight gadget 1.7

This week I am still working on the stoplight gadget. Hopefully, this will be the final touches on the stoplight gadget. The other two people in my group are working on the wattdepot monitor gadget. The modifications that we have made to the stoplight gadget this week are minor changes that will enhance the user experience while using the gadget.

The modifications are: for the gadget window to automatically adjust its height when the image size changes, the entire page does not refresh every time the reload time expires, and move the title of the gadget from the top of the gadget window to above the stoplight image. In our previous version (version 1.6), there is a lot of extra white space beneath the gadget when user would change the image size.

Luckily, this was very simple to fix since there is already a 'dynamic-height' feature in the google gadget api. So I only had to add a few lines of code.

The most tricky part of this weeks changes were getting the old values to change without changing the entire script. I originally thought that I would have had to add in some AJAX code to get the image, message, and units to all refresh without refreshing the entire page. I needed to find a way to trigger the event. Using the setTimeout() javascript function, I was able to get the images to reload without refreshing the entire page.

More stoplight modifications

After looking at our stoplight gadget again at our weekly meetings, we yet again found some bugs and fixes that we decided to make to our gadget. This time, we found that we mistakenly used parseInt() to parse our strings to numbers instead of parseFloat(). This was a simple fix and didn't take much time to fix. However, we also found that the way we handled retrieving the message from the message spreadsheets needed to be changed. Previously we had our message spreadsheets have the upper threshold, lower threshold, and message fields. Comparing the thresholds in this manner had a few problems that we decided to get rid of my changing the format of the spreadsheets. Our previous format looked like this:

The problem with having the spreadsheet in this manner allows for too much error. If the data source that the user is looking at has the value 20.5, the stoplight returned would be a blank one, since the value is between 20 and 21. So we decided to change the layout of the message spreadsheets to the following:The way the spreadsheet is now setup is pretty obvious after a small amount of explanation. The message would be 'low' if the value received from the data source is less than or equal to 10. The message would be 'medium' if the value received from the data source is less than or equal to 61. The message would be 'high' if the value received from the data source is less than or equal to 90. Finally, the message would be ' very high' if the value received from the data source is greater than 90. Having the spreadsheet formatted in this way removed the error that was previously discussed. This change, along with the parsing problem was fixed and is now implemented in the most current release of our stoplight project, version 1.6.

The stoplight gadget and any information about it can be found here.

Polishing Stoplight Gadget

This past week was an interesting week for our stoplight gadget group. Going into our weekly meetings, with professor Johnson and Robert, we believed that we were going to be finished with the stoplight gadget and were going to begin work on a new gadget. As we were demoing our stoplight gadget to professor Johnson and Robert, we decided to add a few new features to add to our gadget. We added a 'title' feature where the user will be able to input their own title for the gadget to help them differentiate between each stoplight when a user has multiple stoplight gadgets on their iGoogle page. Also, since I couldn't get the stoplight image to auto-scale within the google gadget, we decided to have a user preference that will allow users to pick a small, medium or large image to display. Doing these tasks were pretty simple and I was assigned to polish up our stoplight gadget, while the rest of my group was assigned to create a new gadget. I didn't run into any problem while working adding these two new user preferences and was able to accomplish both tasks over the week.

The most recent stoplight gadget can be found here.

The new gadget that our group is assigned to work on is a WattDepot Monitor. The WattDepot Monitor gadget will display the current power usage. This power usage data will also come from a spreadsheet just like our stoplight gadget.

Stoplight gadget 1.4

For our first milestone we got a majority of the gadget done. So for the past week we polished up our gadget for by adding some error handling, synchronized the image refresh with the message refresh, added a unit field, we automatically checked for threshold direction, and I tried to work on having the image auto-scaled. The threshold direction is just a small javascript code that checks if the red threshold value is lower than the green threshold value. This is for people who want high numbers to be green and low numbers to be red. We decided to automatically check for the this instead of letting the user choose another settings. We already have enough user preferences and do not want to add too many choices unless we really need to.

Having the image auto-scaled to always fit within the gadget boarders proved a challenge for me. First I had to research on AJAX to have the image refresh without reloading the entire page. After working on it for a couple of hours I was able to get the image to auto-scale locally. Using the "onresize" event within the body tag, I was able to get an image to auto-scale. Unfortunately, when I looked through our code, we used the 'div' tag within our visualizations. The "onresize" event didn't seem to work with the 'div' tags. So I added in the body tags into the visualization and set the 'div' tag that held our svg image to contain the id "stoplight". When I tried to implement the auto-scaling image with the gadget, the image did not auto-scale. This seemed to be because I was not able to get to the gadget width and height parameters. After all that work, we decided to just leave the image how we had it before.

Our current version of the gadget can be found here.

First Milestone

Tomorrow is our due date for our first milestone for our project. The past week has been very hectic as we had to make many changes to our stoplight gadget as well as many modifications to our Google project hosting site to get things ready for the first milestone. The goal for our first milestone was to get the stoplight gadget ready for people to begin using and developing.

Some of the modifications that we made to the stoplight gadget this week was using a better stoplight image, give the user an option to use auto page refresh, and we also added an option for the user to input their own messages for certain values. Our original image was too 'cartoony' and plain. Instead I was able to find a good svg stoplight image. I was assigned to get the new image. As easy as this task sounded, I ended up spening a lot of time on it since 1), it was my first time working with an svg file type and 2) I kept running into problem after problem. The image gave me many problems as I was the one to implement the new image. The first problem that I had was finding a good editor to modify the image. I ended up using the open source program Inkscape to modify svg images. I needed to use the program because i was only able to get the svg image with the red light and the svg image with all the lights. So I tinkered with the program and image to get the yellow light and green light images. I uploaded the images into our project host and then tried to use the files but encountered another problem. When I tried to embed the image in an html file using the files from our project host, the image would not appear. Instead the there would be a link that asked me to download the plugin to view the svg images. It turned out that the images mime type was not correct. I fixed this problem by changing the file's mime type through Tortoise. When I was finally able to get the image to appear, I ran into a formatting problem. I was only able to get a portion of the image to show when i messed with the parameters in the html <> command. Again after some research I was able to find out that the problem lied in the xml code that svg uses. I needed to change the parameters in the svg tag in the xml for the svg image file. I had to modify the width and height parameters to equal 100% and then add the code viewBox="0 0 1500 1000" to get the svg image to view properly.

A few changes we made to our project hosting site were cleaning up our project directory, adding user and developer wikis, and create a nice homepage. These changes were simple and easy and took only a hour or so to get done.

For our next version of our gadget, we plan on adding error handling, since our gadget still has some glitches. For example, if we remove the source URL then click save, the gadget will not run. Other things we might add is an option for users to use different types of stoplight images, in case the users do not like the one provided.

The project page for our stoplight gadget can be found here.

stoplight gadget 1.2

This week we planned to finish version 1.1 of the stoplight gadget. But after our weekly meeting with our professor, we decided to finish both version 1.1 and version 1.2 within the week since there wasn't much of a difference between the two versions. Thus, the jump to version 1.2.

Stoplight gadget version 1.0 only shows a number from a hard coded location. Version 1.2 of the stoplight gadget is now able to show a stoplight image. The first page that the user views when the stoplight gadget is first embedded tells the user to input values into the user preferences. After the user inputs the values in the 'Edit settings' portion of the gadget, a stoplight will appear either red light, yellow light, or green light on.

We still have some problems with the stoplight gadget that we hope we will fix by next week. We first have to figure out what we will show when the gadget is first loaded. Since we do not have any ideas yet, all the gadget does is tell the user that the gadget will needs inputted values in the user preferences. Right now, the gadget only allows for the user to input numbers to check against each other. By the next version of our stoplight, we will allow for the user to compare two strings to one another. We might also try to get the stoplight to be shown with a corresponding message from a different place on their data source.

The biggest problem that we need to address with our professor is the problem of users not being able to edit the settings of the gadget and manipulate the thresholds outside of iGoogle. When we tried to embed the gadget on our google code hosting page, we were not able to manipulate the settings there. Hopefully after doing more research we will find a suitable solution to this problem.

Since we have not published our google gadget yet, but you want to try out the gadget, add the gadget on iGoogle. Here is the URL to the gadget.

Stoplight Gadget Version 1.0

Originally, our group thought that we were making a stoplight gadget that would work with the Wattdepot server. Last Wednesday we had a meeting with our professor on exactly what he wanted us to implement in creating this stoplight gadget. This meeting cleared up a lot on confusion that we originally had. We found out that we will try to create a generic stoplight gadget that anyone can use by inputting their own thresholds. For instance a person might want to use the stoplight to help keep track of waveheights, where they could maybe set the stoplight to be green when the waves are above a certain height and red when the waves are small. So over the past week since our meeting, we got started on the stoplight gadget project.

Our version 1.0 of our project doesn't do much of anything. To make sure that we are able to get everything working together, version 1.0 of the stoplight project just returns a number that can be found on a spreadsheet from google docs. We first created a google visualization to run and retrieve the number from the spreadsheet. When we tried to simply move the code and copy the visualization into the google editor that we were using, we ran into a little bit of problems. For one thing, after we simply copied the code into the tags and saved in the google editor, we were not able to reopen the file from the google editor. To open the file in the google editor we had to open the file from a URL. After tinkering with the code for a few hours, we were able to get the code running as a google gadget. Our code can be found here.

We are looking into using an IDE that could help us with the google gadget editing since there are still some bugs with the google editor gadget online. We have just found that Eclipse has a plugin for google gadgets. We will hopefully decide to use the IDE for further development.

For version 1.1, we are planning to implement a picture stoplight with hard-coded thresholds. We also have to figure out where the user will get their data from that they will use with the stoplight gadget. We hope to get all that up and running by next week.

Software Engineering Part 2

Hi everyone! This is my first blog for the new semester. This new set of blogs will concentrate on the happenings of the second half of my software engineering experiences and projects. The class will be concentrating of further developing the wattdepot service. The professor plans on trying to create an energy conservation game for the University of Hawaii dorms by the end of the semester.

To start the semester, the class was divided up into smaller groups where each group has a task to accomplish. I was assigned to a group that is dedicated to creating a stoplight using google visualizations and also google gadgets. We have to figure out how to connect to the wattdepot server and output the current electrical output. This will be similar to the stoplight that we had to make in our last semester. This first week my group will be learning javascript since it is accompanied with google gadgets and visualizations.

We are a little unsure about what we exactly have to accomplish. So to get started on the project we have studied up on our javascript, google gadgets, and visualizations. To refresh myself on javascript I skimmed though a javascript book that I have had from a scripting class that I have taken at UH. To learn about google gadgets I did the tutorials that was given to our group by our professor, found here. I still have to look over google visualizations, but for now our group is not sure how we are going to incorporate google visualizations into making a gadget stoplight.