Tuesday, February 16, 2010

Pre-Competition Design

This week we received feedback regarding our design from milestone one. Because of some confusion we were given a one site layout and this week we began to fill in these blank lay out pages. The presentation tomorrow will contain a rough version of the site with the modifications from the first milestone incorporated.

Pre-Competition:

This week I was responsible for creating the pre-competition kukui nut page. This page was to contain basic information. So I decided to have a top box that spanned the page and contained a description of the competition. Underneath that I decided to have 3 sections, one section devoted to describing the prizes that could be won from this competition, a picture of the dorms where the competition would be held and lastly a description of the scoring system of the competition. Hopefully this page will give people a feel of what the competition is all about and how to compete.

Admin 1.0:

The modifications to our milestone 1 site included a requirement for an admin page. The requirements for this page was that the admin should be able to edit any of the other pages as well as approve kukui nuts, commitments, events as well as user submitted tips. In order to do this efficiently I created a home admin page with all the editable options (all pages, kukui nuts, tips ect..) having its own link.

When the admin wants to edit a page, then he selects the page and the HTML code will pop up in a box where the admin can make changes to a page. I designed it this way since the admin most likely won't make structural changes to a site, but more likely weekly updates as well as additional links to movies or external sites.

When the admin clicks on the approve kukui nuts link he is taken to a page that contains a list of users and the actions and commitments they have completed. The admin then has the option to approve or reject the actions or commitments. If the action or commitment is approved then the action or commitment will show up in the users profile as well as the addition of kukui nuts to their current total. If the action or commitment is rejected then nothing will be displayed in the users profile and they will receive a notice of disapproval.

When the admin clicks on the approve commitments or approve user tips then they will be sent to a page that is similar to the approve kukui nuts page. Here the admin will have a listing of the user as well as the commitment or tip that they submitted. Again the admin has the choice to approve or reject these commitments or tips. If the commitments are approved then they will be displayed in the users profile. If the tip is approved then it will be added to the list that contains the weekly tips. Also kukui nuts may be awarded to the user. If the commitment is rejected then the user will receive a notification.

The admin also has the option to add or delete users from the competition. This is setup just in case if a user transfers from a competition dorm to a non-competition dorm or if a user moves in from a non-competition dorm to a competition dorm.

Lastly there is a page where the admin can edit those who will receive kukui nuts for attending certain events. On this page there is a header which describes the event, then underneath that the users will be displayed. The users displayed are then compared to a list of users that attended the event and the admin then approves or rejects users according to their attendance. On this page all of the past events that still have users waiting for approval will be displayed. Once an event has all of the users verified or rejected, then the header for that event will disappear.

Monday, February 8, 2010

Milestone 1

This week we decided on layout for our webpage as well as a basic layout for it. After debating between using 1 website or 2 websites we decided that it would be the most effective solution to use one webpage but slim down the content and make it more simple and intuitive to use. In order to complete the desired layout by the milestone we decided that it would be most efficient for the website to be divided among all group members then joined together on the Monday before the milestone. For this portion I was in charge of designing the home page as well as the home page that is displayed once a user has logged in.

Home Spec.

We decided that the home page needed the following on it:
- An app that rotates various pictures from the competition
- A graph of the current dorm standings
- A video box for providing a video introduction to the competition
- A box that contained writings about the competition
- A ticker tape that displayed various energy consumption tips
- A box that listed out the upcoming events for the competition

At first it was hard to fit all of the data into the website, but after lots of rearranging I manged to fit all of the information onto the page while making it as simple and user friendly as possible. A image of the layout can be found here. Like my previous layouts, this one displays (and contains a link to) how much UH has saved for the competition to date.

Competition Spec.

We decided that the competition page needed to have the following requirements:
- A profile picture
- Current amount of kukui nuts that the user has as well as the amount that the kukui nut leader has
- A box that contains tabs for events and commitments
- A box that contains tabs for updates, current commitments as well as a graph

I found the idea of a profile picture a nice feature as it made the site more like a social networking site. At first I suggested that we used tabs to separate the data within a box, however I realized that having tabs within tabs from our main page layout just looked bad, so I moved all the of the boxes that were to be tabbed into one box with buttons to switch between each of the options. Also I included the current goals list at the bottom of the page instead of in the above box with the rest of the data. My original lay outs can be found here: Home, commitments and goals. The update button would display a selections of graphs through ajax and I was unsure on how to display that so there is no layout for that page.

Revisions:

After today's team meeting we decided that the home page, pre-competition page, post-competition page, resources and contact pages should stay the same. However the during-competition page needed to be changed. During today's meeting we decided to keep my general layout, however we combined elements from Anthony's layouts which provided some nice features to our site. We also decided that commitments and goals were too similar, so we eliminated the goals from our project. The final product can be found here: Updates, Activities, Commitments and Stats. The stats page might be a little confusing so I will explain it. When the user clicks on this button a pop up will appear with a near real time graph (10 sec delay)of the current power usage. This will allow students to see the impacts of their actions almost instantaneously.

Wiki:

The wiki for our layout for milestone 1 can be found here.

Tuesday, February 2, 2010

Split Decisions

This week in our group meeting we decided that we should have the following included in a possible interface that would be set up in the lobby of the dorms:

1. Showing weekly results for each tower (includes floor leaders, energy consumption).
2. Show the energy consumption in relational terms, such as money.

By displaying this data we hope that we can encourage a spirit of competition within the towers as well as giving the students a tangible way to learn about energy consumption.

Site Battle:

We also continued to design the user interface. However we are in the process of either using one website to hold all of the data or using two sites to display the data (one site of the competition and the other for education). Currently I am in charge of developing the two site approach. I currently have a rough layout of the sites which can be found here. My sites are distinguished from the others with the heading of Resources_*, or by author (smichaelwong).

Additional Goals:

Also this week we decided that there would be 4 additional groups. Anthony is in charge of creating the mockups for the one website approach, Kelli is in charge of forming focus groups and assessing the RA's reaction to the competition proposals, John is in charge of gathering energy consumption and energy saving resources which will be used to educate people and lastly Wing is in charge of putting together Google charts and visualizations which aid in presenting the energy consumption data to the students.

At the Milestone:

At the milestone we will have the following completed:

1. Either the one site approach or the two site approach will be decided on as the final interface.
2. The resources will be completely gathered and will be ready to be processed.
3. The charts will be finalized (what data will be displayed and how).
4. The questions for the RA's will be designed and implemented after the milestone when the interface is decided on.

Monday, January 25, 2010

Design Phase II

During this week's meeting our group established some more guidelines for our design project as well as various other details of the overall Dorm Energy Competition.

Choosing a Dorm:

During this week's meeting we established that the competition would most likely take place between two dorms instead of by floor. We also decided that the freshman towers provided the best competition grounds for a few reasons:

1. All the floors are even. One of the main reasons Frear was abandoned as a competition dorm was the fact that the floors are uneven. By this I mean that some floors have a laundry room, some floors have a study lounge each of which consumes various amounts of energy and gives floors unfair advantages over other floors.

2. Fulfills one of the goals for the competition. One of the goals is to raise awareness about energy conservation as early as possible. By using the freshman dorms as a competition we are able to reach students at the earliest possible stage and hopefully raise awareness that will stick with them throughout their academic careers and beyond.

Other Guidelines:

We also determined that we should have weekly floor leaders in order to promote healthy competition among the students on the floor. Ideally we would like to have lcd screen in the dorm lobby displaying such stats as the current dorm energy usage, the past week floor leader as well as various other data about the floors and their energy consumption. Additionally we reviewed the 3 main goals (which can be found here) of the competition and adjusted our guidelines as well as the way we educate the students in order to meet the 3 goals.

Monday, January 18, 2010

Kukui Design

For the first quarter of software engineering II I have been assigned to the Kukui design team. We are in charge of providing the interface for the user to be able to view specified energy related data and adjust their consumption accordingly.

Ideas:

As stated in class there should be some sort of chart (I think that a bar graph would do the job well) that displays the real time energy data with a 10 second delay. Also at this stage it might be impossible for us to measure personal consumption so maybe a more realistic goal might be to have a chart that displays the user's room energy consumption. Additionally I think that all of the data for all the dorms should be displayed on the login page. This would allow users to see how their dorms stand in comparison to the other dorms in the competition. Lastly I think that there should be some widget type box that displays the daily/monthly values (such as the cost of the energy consumption thus far, the amount CO2 that was emitted and what percentage of the dorm's total energy usage and CO2 emissions that the user has contributed).

Thursday, December 17, 2009

Final Thoughts

ICS 413 has been a very eye opening experience for me. I was able to apply what I learned before from previous Java classes which I enjoyed since I don't like to learn things and not get to see some practical application for it.

Valuable Experiences:

I found that most of the class provided very valuable information and incite to the world of software development. I think that the group experience was the best part as we were able to share knowledge and see different views on how to solve a problem. SVN in particular was an interesting experience since we were able to work on the project even if we weren't together, plus the ability to revert to a previous version was a nice feature for the projects. Also the Ant tools added an interesting aspect to the development process as it allowed for testing and the catching of errors that we otherwise might have missed when just looking over or simply just running the code and assuming there are no errors. Lastly I thought that Wicket gave some interesting experience as well as an introduction to web frameworks.

More Experience:

The only thing I felt needed improvement in the class was the coverage of Wicket. I found that Wicket was a particularly difficult language to get a hold of and I thought that the book did a fairly poor job of explaining how Wicket works, plus having it available to only 4 people at a time was a major inconvenience. With that said I think that more time should be spent on Wicket in order for students to full grasp and get the hang of using the language.

More Learning:

After taking this class, I have come to realize that I do not want to become a software developer. While I did enjoy working in groups, I found that software development is extremely time consuming and has the potential to be extremely frustrating. So really I have no interesting in continuing my learning in this area. However if I had to choose an area, I would like to learn more about web frameworks (maybe not Wicket) and how they integrate with Java, HTML and various other languages.

Overall:

I found this class to be extremely helpful in that it gives a great overview of the process and the tools of software development. I enjoyed the experiences from this class, not only for the basic knowledge of software development and the great experience of working in groups but also the fact that this course has helped me decide what I would like to do with my ICS degree when I graduate (most likely networking and IT work).

Greensmart Ver. 2.0

Greensmart Ver. 2.0 saw some major changes as well as some minor changes from the 1.0 version. We fixed the bugs found in version 1.0 and improved the overall look and feel of the website.

What does this do?

This project has two options. You can view the stoplight page or view the chart page. Should the user go to the stoplight page then they will find that there is a stoplight there that displays the current level of carbon intensity with a specific message to the color. If the user chooses to go to the chart page then they can select a date or a range of dates and the data will be displayed in chart form.

Changes:

Originally we only had one page which took a date and then printed the resulting carbon intensity, carbon intensity level and the hour in a long chart that didn't fit on a screen. However in version 2.0 we changed that. Now there is a home page where you can choose to go to either the chart page (which displays carbon intensity data) or the stop light page which takes the current computer time and calculates the carbon level then displays the results on a stop light with a corresponding message depending on the color of the level. On the chart page we now use Google Charts to graph the carbon intensity and the hour and use background colors to show the level of the intensity instead of printing everything out in a table. Also the user is now able to choose to graph either the carbon intensity or the energy for a given time period.

We also changed the look of the page by changing the background color to the color white and also added "web 2.0" buttons and a new logo that we designed ourselves. Also we created a contacts page and now all of the pages have links to all of the other pages of our project which makes navigation around the site a breeze. To further improve the look of the page we incorporated the date picker to the chart page so now the user has the option to visually pick out which date or which date ranges of data they wish to view.

In addition to the date picker the other extra credit option that we choose to implement was the nice urls. This eliminates the strange wicket generated urls and replaces them with text which gives the project a more professional look to it.

Lessons Learned:

Through this project I was able to gain basic knowledge of Wicket and how it interacts with both Java and HTML. Another thing that I learned was while the project might meet the specifications (like our ver. 1.0), the user interfaces must be easy and friendly to use without too much clutter and a lot of intuitiveness for ease of use for any user no matter how computer literate they are. Lastly I realize that had the option been available it would have been better for us to specialize in certain areas of the project. For example one person does the HTML work, one person does the Wicket and one one person works on the Google charts, ect. Specialization would have allowed for less errors as well as a faster production time.