Category Archives: cs-wsu

Puzzle now supports difficulty levels

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.

Image

Image

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.

Feb-24 How to use SQL

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.

Feb-17 how to install SQL and JSP

This week, we meet up again and we have made the decisions about how to splits people into groups and start our project. There are groups in Coloring, Puzzle, Content Frames, Home Page, PhoneGap and Database. And I choice to been in the Database group, I wish to build a database in order to replace the content in the app easily to make the app will being used wildly. None of our group member have very specific experience on build such a database in a web. So we have to starting from doing a research on it.

And what I have done this week is installed both Java and mySQL on the computer. And most important thing to know about is how to make the connection between these two. So I found out a good example on the web to show such thing.

 

 

<html>
<head><title>Enter to database</title></head>
<body>
<table>
<%@ page import=”java.util.*” %>
<%@ page import=”javax.sql.*;” %>
<% 

java.sql.Connection con;
java.sql.Statement s;
java.sql.ResultSet rs;
java.sql.PreparedStatement pst;

con=null;
s=null;
pst=null;
rs=null;

// Remember to change the next line with your own environment 
String url= 
“jdbc:jtds:sqlserver://nameofyourdatabaseserver.or.ipaddress/yourdatabasename”;
String id= “username”;
String pass = “password”;
try{

Class.forName(“net.sourceforge.jtds.jdbc.Driver”);
con = java.sql.DriverManager.getConnection(url, id, pass);

}catch(ClassNotFoundException cnfex){
cnfex.printStackTrace();

}
String sql = “select top 10 * from tbl_sys_user”;
try{
s = con.createStatement();
rs = s.executeQuery(sql);
%>

<%
while( rs.next() ){
%><tr>
<td><%= rs.getString(“cust_id”) %></td>
<td><%= rs.getString(“rdate”) %></td>
<td><%= rs.getString(“email”) %></td>
</tr>
<%
}
%>

<%

}
catch(Exception e){e.printStackTrace();}
finally{
if(rs!=null) rs.close();
if(s!=null) s.close();
if(con!=null) con.close();
}

%>

</body>
</html>

 

(From: http://www.java-samples.com/showtutorial.php?tutorialid=619 )

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

Puzzle Weekly Report

During the spring break I saw the email about the testing so far with the code we have. I noticed that the puzzle game was not working for dragging wise the pieces across the screen. Else the buttons worked with no issue. Kerry found on the web that there is a tool called touchPunch. How it works is it uses simulated events to map the touch events to their mouse event analogs. All this needs it to add the touchPunch.js tool to the index.html file after the defining of the jQuery UI package tool. Then from here it should allow you to move the pieces. 

Here is the link to touchPunch tool:

http://touchpunch.furf.com

We have implemented this into the code and and from testing wise through the web browser everything seems good. The next step is to test this on the iPad to see if this tool actually works or not. 

We have been working on implementing a main screen page which would allow the user to select the difficulty level of the puzzle, the image they would like to view (if have more than 1) and then a button that starts the puzzle. Once the user starts the puzzle they can complete the puzzle or click the button at the top left corner to go back to the main page. We figured it would be a good idea to have a main page which allows the user to select all the different options they wish to use inside the puzzle and then move onto a different page for the actual game. The issue we have come across is getting the button id values passed to the 2nd html file. The first puzzle application we had did this all within one main html page which we were able to pass the id value to the javascript from there inside. We are stuck on passing the value from one index page to another. If anyone has any idea how this is possible that would be greatly appreciated! 

Overall it has been a lot of learning and trying to find different ways to get this value passing for me over the past week. We are hoping to have theses new features added in soon once we get past this small bug we are stuck on. 

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

Puzzle Weekly Report

During the spring break I saw the email about the testing so far with the code we have. I noticed that the puzzle game was not working for dragging wise the pieces across the screen. Else the buttons worked with no issue. Kerry found on the web that there is a tool called touchPunch. How it works is it uses simulated events to map the touch events to their mouse event analogs. All this needs it to add the touchPunch.js tool to the index.html file after the defining of the jQuery UI package tool. Then from here it should allow you to move the pieces. 

Here is the link to touchPunch tool:

http://touchpunch.furf.com

We have implemented this into the code and and from testing wise through the web browser everything seems good. The next step is to test this on the iPad to see if this tool actually works or not. 

We have been working on implementing a main screen page which would allow the user to select the difficulty level of the puzzle, the image they would like to view (if have more than 1) and then a button that starts the puzzle. Once the user starts the puzzle they can complete the puzzle or click the button at the top left corner to go back to the main page. We figured it would be a good idea to have a main page which allows the user to select all the different options they wish to use inside the puzzle and then move onto a different page for the actual game. The issue we have come across is getting the button id values passed to the 2nd html file. The first puzzle application we had did this all within one main html page which we were able to pass the id value to the javascript from there inside. We are stuck on passing the value from one index page to another. If anyone has any idea how this is possible that would be greatly appreciated! 

Overall it has been a lot of learning and trying to find different ways to get this value passing for me over the past week. We are hoping to have theses new features added in soon once we get past this small bug we are stuck on. 

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

Update

I have so far been unable to get the slideshow to work. I believe the problem i am having most is that I am unaware of how the slideshow is set up being that i joined in only 2 weeks ago or so. I do have several slideshows set up that i was able to make with the help of online tutorials. I was hoping to discuss this with my partner however he never responded to the email i sent last Monday, I suspect gmail may have given me the wrong email address . With hope we can have some resolution at the end of class. And end being able to move forward.

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

Just got back from Spring Break in Oregon!

Hello everyone of the CS department,

For this past spring break, I went to Corvallis, OR, for this awesome program hosted by the Oregon State University, http://web.engr.oregonstate.edu/mcai

Apparently there were over 200 applicants, and they only accept 20 students, and I got it (somehow)!! In this “short-course,” we learned about the Monte Carlo methods; essentially what the algorithm is about, how to implement it, as well as its wide range of applications in real-world computing problems.

To be honest, the course was VERY VERY difficult, as the professors tried to cram everything in one week, so I studied really hard every day…but it was WORTH IT! I felt like I learned a lot, and I had a really great experience there. Also, this is a good chance to network with other smart and motivated peers from other schools. Plus, everything was paid for (food, flight, hotel), so it was AWESOME!

I’d encourage every CS students (sophomore, junior, and senior) to try and apply for this program next year. I know it’s a spring break and all, and you will probably want to be in Miami, or some other beach and not study. But doing this will really help motivate you to go to grad school (if you are looking for motivation), and it would also look good on your resume as well.

Also, after attending this course, I realize that I am still lacking a lot of math for graduate school. So I would also recommend taking more math courses than the minimum CS requirement, if grad school is your goal.

Hope you all had a nice break from school, now lets get back to studying!!

Image

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

Just got back from Spring Break in Oregon!

Hello everyone of the CS department,

For this past spring break, I went to Corvallis, OR, for this awesome program hosted by the Oregon State University, http://web.engr.oregonstate.edu/mcai

Apparently there were over 200 applicants, and they only accept 20 students, and I got it (somehow)!! In this “short-course,” we learned about the Monte Carlo methods; essentially what the algorithm is about, how to implement it, as well as its wide range of applications in real-world computing problems.

To be honest, the course was VERY VERY difficult, as the professors tried to cram everything in one week, so I studied really hard every day…but it was WORTH IT! I felt like I learned a lot, and I had a really great experience there. Also, this is a good chance to network with other smart and motivated peers from other schools. Plus, everything was paid for (food, flight, hotel), so it was AWESOME!

I’d encourage every CS students (sophomore, junior, and senior) to try and apply for this program next year. I know it’s a spring break and all, and you will probably want to be in Miami, or some other beach and not study. But doing this will really help motivate you to go to grad school (if you are looking for motivation), and it would also look good on your resume as well.

Also, after attending this course, I realize that I am still lacking a lot of math for graduate school. So I would also recommend taking more math courses than the minimum CS requirement, if grad school is your goal.

Hope you all had a nice break from school, now lets get back to studying!!

Image

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

Multi-Layer Flood Fill and More …

Image

 Hello again

 The past two weeks have really been very eventful as far as the coloring app goes.

I have spent most of my spring break writing code and I am not the least bit regretful… well perhaps a little bit.  I at least managed to squeeze in a few flicks this week so not a total loss.  I started this week with a very slow flood fill algorithm a few minor inconsistencies with clicking and several other short comings.  As I mentioned In last week blog update though, I got the flood fill algorithm working very fast and I will explain how. Aside from that I have completely abandoned redraw because it is slow with flood fill.  In addition to all this I rewrote all the event to work with jQuery mobile and even rigged up new toggle button for tools and menus to fix issues on the iPad.  I also added fading scroll indication arrows to the scroll menu this week, cleaned up all the code and segmented each piece of functionality with comments.

 So lets start with redraw and why we are not going to use it.  Though I don’t doubt there is some way to make redraw efficient, I have found a much easier solution to the problem redraw had solved for me.  Originally I switched to redrawing each event click so I could avoid drawing over the coloring outline  by drawing after each click.  This allowed the flood fill to interact with the outline image and anything drawn to screen as well.  The problem was the redrawing of flood fill is very costly and after a few flood fills had been applied the code became sluggish.  The solution was actually quite simple in the end.  The flood fill algorithm has to check the canvas pixel memory directly during it process for speed, its very fast. The pixels data is divided into 4 bytes one for Red Green Blue and Alpha(Transparency).  The flood fill algorithm has to compare RGB values for the drawing canvas so it knows what to color, so why not make comparison to the outline canvas at the same time, it certainly would be more efficient than redrawing.  Well that’s exactly what I did, I wrote a simple method that just checks the alpha value for the outline canvas and added the necessary checks to the algorithm.

 That leads me to the topic of pixel memory access.  As it turns out, it’s easy to access the pixel memory it just can be a bit confusing.  So you can get pixel data by calling getImageData() on the context of your canvas.  This gives you a pixel at an x and y coordinates. The pixel memory is ordered top to bottom left to right.  Imagine a 9 pixel canvas ordered like this. 

 X and Y Memory Address

 00   01   02    0   12   24

10   11   12 = 4   16   28

20   21   22    8   20   32

 If you are at the pixel memory address of 12 you can traverse to 24 with (y * widthOfGrid + x) *4) because at memory address 12,  x and y = (0, 1) so you can see that(1* 3 + 0) * 4 = 12 so Our location + (y * widthOfGrid + x) *4) brings us to the pixel to our right and like wise you would subtract to move to the left.  That is the secret to fast flood fill algorithms in javascript.  That and don’t use recursion due to stack limitation but that’s a whole different topic.

 

A few other small changes where the size menu was set to close when you clicked the button but not the menu itself.  It was suggested that that would be better so that was fixed right away this week along with a few other changes to buttons. The Worcester Art Museum had also suggested disappearing scroll arrows would be nice for the coloring outline selection menu, so I did that this week too.  I found an easy tutorial at jsfiddle.net that worked quite well, I modified it to work with two arrows and that was that.  I also did a lot of work rigging and making toggle buttons for the tools size and color menus.

 

I think that about wraps it up, Next week spray paint!

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.

CS 401 Blog – Weeks 7 and 8

These past few weeks in CS 401 have had their moments of progress as well as a few setbacks. The main accomplishment was that a working web app, supported by a server to hold all of the different parts of the app, was completed. Even though it was mostly bare boned, it contains the functionality that we need to push out a completed project. The server is able to handle all necessary basic functions that need to be operational in order for the class to make more progress.

Due to the functionality of the server, the different parts of the app were able to be tested on the iPad which they will be run on. This was where a few setbacks occurred, as the iPad was not running a few aspects of the app as well as they were showing up on desktops. With the example of the puzzle, which Ryan, Kathleen, and myself are working on; The puzzle pieces show up on the screen, but are unable to be selected by touch. The shuffle function work and the pieces are correctly sized and shaped, but no actions can be taken on them. This is a bug that we will work on correcting throughout this next week. The sizing is also off on where the puzzle shows up on the screen, but this is a minor issue compared to the issue affecting the main functions of the puzzle, and will be a secondary task for the week.

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