Happy Easter Everyone,

It was an awesome weekend, had a big party at my house with the whole family… 30+ people.  Food was great mimosa was even better… haha.  So I spent I bit of time testing  my drawing app on the iPad.  I was trying to fix a page bouncing issue.  Obviously, this is a problem that has come up before for other developers.  I started working on the tests pretty late so I probably overlooked the obvious due to being a bit tired but this is what happened.  

The Worcester Art Museum tested our coloring app this week, but when the user drags on the screen you just get a page bounce effect.  According to all my research, the way to fix this problem is very simple: you just add the event.preventDefault(); to your touchmove event.  However, I tested this fix several times and it did not work.  The problem I believe, that when I updated our repository it also updated our testing server… this is not the case.  I will be waiting to get access from our Server team so that I can debug my code on the iPad.   I think the fix will be very simple once I can access the server for testing.  Spray paint will have to wait for now.

Till next time.

Jason Hintlian.

From the blog jasonhintlian » cs-wsu by jasonhintlian and used with permission of the author. All other rights reserved by the author.

This week, I am working on the java script Light Box foe both article chapter and slide show chapter. I have find an example online to do such a thing. And by simply add my code to both chapters index will make the light box function work!
And here is my code:

Quick Simple Light Box

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
z-index:50;
display:none;
}

.box
{
position:absolute;
top:5%;
left:25%;
background: #000;
z-index:51;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:0px 0px 15px #444444;
-webkit-box-shadow:0px 0px 15px #444444;
box-shadow:0px 0px 15px #444444;
display:none;

}
}

$(document).ready(function(){

$(‘.lightbox’).click(function(){
$(‘.backdrop, .box’).animate({‘opacity’:’.50′}, 300, ‘linear’);
$(‘.box’).animate({‘opacity’:’1.00′}, 300, ‘linear’);
$(‘.backdrop, .box’).css(‘display’, ‘block’);
});

$(‘.close’).click(function(){
close_box();
});

$(‘.backdrop’).click(function(){
close_box();
});

});

function close_box()
{
$(‘.backdrop, .box’).animate({‘opacity’:’0′}, 300, ‘linear’, function(){
$(‘.backdrop, .box’).css(‘display’, ‘none’);
});
}

This is Quick Simple Light Box

Realized that the picture I use in the web page is called 1.jpg and 1-mini.jpg. These two picture have different size. So before we upload the picture, I will need to smaller the regular size pictures and then it should work prefect.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

After few weeks of study JQuery and research on the light up box, I decided to use the example from web named demozoom. The picture will be enlarged if the user click on it as the picture shown.I have got the code running. So the next week I have to figure out the way to make the code runable on the existing code I have.

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

After few weeks process of the project, I have some general understanding of how to build a data which could connect with the jsp file. During the class, we have decided to start to build up a sever to host this app. And I decided to change my focus on web interface, something I have never done before. Together with Joe, we will working on the article secession which should display some reading while having some pictures on the side. Joe has got some functions working and display very nicely. And someone suggested to us to have a function to enlarge the picture if people want to take a close look at the picture. What I have done this week is try out the functions that its already exist , and get familiar with the JQuery. And I will focus more how to make a lights up box at the following week. 

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

While I am working on the article secession, gitHub is being introduced to the class as a tool to use for the online project hosting. So set up gitHub and learn how to use it is another task for me in this week. In web http://git-scm.com/book, it has 9 chapters guild you all kinds of different things within the git. After I installing the git in my windows, I will being able to clone the our class’s repo,  remote the cloned repo, create and delete a new branch, push your files to the branch on Github, etc. It is really helpful for doing a project as a group and to kept working on it as a whole. 

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.

James found a great template slideshow under the GNU license which is perfect for this project. I made a couple of modifications to it already and it seems like it is a great candidate for the end product. It was basically in a perfect state as is. The only modifications that are now needed (as far as I can tell) are to put the picture finder at the bottom of the screen (Tim’s request) and add the swipe functionality from JQuery to the pictures. Moving the picture finder to the bottom of the screen maybe harder than I originally thought, but we’ll look into it.

Now where the issues lie… As far as I can tell, the slideshow works great on my machine and from the github server, but it will not load while trying to access it from the school server. This is a major issue. It will not load in a browser from the server or on the iPad. Parts of the page will load and it seems like it will function from what is there. It just will not load the pictures. I’m not sure if this a problem with the code (most likely) or a problem when it got uploaded to the server (maybe the images didn’t get uploaded)? Anyways, hopefully we can figure this out. We still have six weeks left, so no hair pulling yet.

If you want to try the slideshow you’ll have download it from github.

From the blog Sean » cs-wsu by shorton1 and used with permission of the author. All other rights reserved by the author.

James found a great template slideshow under the GNU license which is perfect for this project. I made a couple of modifications to it already and it seems like it is a great candidate for the end product. It was basically in a perfect state as is. The only modifications that are now needed (as far as I can tell) are to put the picture finder at the bottom of the screen (Tim’s request) and add the swipe functionality from JQuery to the pictures. Moving the picture finder to the bottom of the screen maybe harder than I originally thought, but we’ll look into it.

Now where the issues lie… As far as I can tell, the slideshow works great on my machine and from the github server, but it will not load while trying to access it from the school server. This is a major issue. It will not load in a browser from the server or on the iPad. Parts of the page will load and it seems like it will function from what is there. It just will not load the pictures. I’m not sure if this a problem with the code (most likely) or a problem when it got uploaded to the server (maybe the images didn’t get uploaded)? Anyways, hopefully we can figure this out. We still have six weeks left, so no hair pulling yet.

If you want to try the slideshow you’ll have download it from github.

From the blog Sean » cs-wsu by shorton1 and used with permission of the author. All other rights reserved by the author.

Today during class we implemented the tool that allowed the puzzle pieces to be dragged across the screen. It was awesome to see all of the groups work up on the server running on the iPad. During class me and my group discussed some up coming features we wanted to add to the puzzle application. The main ones where the ability to change the difficulty level. Our first demo had this but it took a little bit research to learn how to do it in jQuery. I just finished implementing the puzzle to now have ability to select a level for difficulty. Below you will find 2 screen shots of the different levels the puzzle will have. Our next step is to implement a side bar with the different images supplied from Tim to use for the puzzle. This way the user can see what the image is and then select it from the drop down list to complete the puzzle.

This is currently not on the web server for testing. Should be up there by the end of the week.

From the blog rwilliams5262 » cs-wsu by rwilliams5262 rwilliams5 and used with permission of the author. All other rights reserved by the author.

Today during class we implemented the tool that allowed the puzzle pieces to be dragged across the screen. It was awesome to see all of the groups work up on the server running on the iPad. During class me and my group discussed some up coming features we wanted to add to the puzzle application. The main ones where the ability to change the difficulty level. Our first demo had this but it took a little bit research to learn how to do it in jQuery. I just finished implementing the puzzle to now have ability to select a level for difficulty. Below you will find 2 screen shots of the different levels the puzzle will have. Our next step is to implement a side bar with the different images supplied from Tim to use for the puzzle. This way the user can see what the image is and then select it from the drop down list to complete the puzzle.

This is currently not on the web server for testing. Should be up there by the end of the week.

From the blog rwilliams5262 » cs-wsu by rwilliams5262 rwilliams5 and used with permission of the author. All other rights reserved by the author.

Continue from last week, by connected SQL with JSP, the next step is to know how to modify the data in the table by insert, delete, select such functions. There is a very useful web that I found online: http://www.w3schools.com/sql/. On the web, there are a lot a good code basic and advanced feature about SQL.

There are some feature that I found might help out from our project.

The INSERT INTO Statement

The first form doesn’t specify the column names where the data will be inserted, only their values:

INSERT INTO table_name
VALUES (value1, value2, value3,…)

The second form specifies both the column names and the values to be inserted:

INSERT INTO table_name (column1, column2, column3,…)
VALUES (value1, value2, value3,…)

The UPDATE Statement

The UPDATE statement is used to update existing records in a table.

SQL UPDATE Syntax

UPDATE table_name
SET column1=value, column2=value2,…
WHERE some_column=some_value

SQL DELETE Statement

The DELETE Statement

The DELETE statement is used to delete rows in a table.

SQL DELETE Syntax

DELETE FROM table_name
WHERE some_column=some_value

From the blog zli1 » cs-wsu by zhengjunli and used with permission of the author. All other rights reserved by the author.