What have done in the last 2 days? (2010-10-05)
A mind struck me one night before I was going to sleep. It is from the movie named “The Curious Case of Benjamin Button”. In order to seeking his dead son, a man made a clock which is anticlockwise. Although time never comes back, I want to make one too. Everyone has something that he wants to get it back.
First, I chose HTML5 to draw an analog clock. Because HTML5 could also make animation like Adobe Flash does. It is the future web page development standard. Steve Jobs enjoy HTML5 too. I find some HTML5 clocks and all of them are very beautiful. I select CoolClock which could change skin of clock easily. It contains 3 import file:, excanvas.js, . The files can be downloaded from github git://github.com/simonbaird/CoolClock.git.
How to use CoolClock?
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/coolclock.js"></script>
<script type="text/javascript" src="js/moreskins.js"></script>
2.set body tag: <body align="center" onload="CoolClock.findAndCreateClocks()">
3.in the body tag where you want to put the Clock:
<canvas id='clockid' class='::'></canvas>
class='CoolClock::::' is the setting of a clock. Watermelon is the skin name in the moreskins.js.
I change a little of coolclock.js to make the clock could anticlockwise. During the process, I think one could change the skin of the clock when he click a button. At first, I try to use mycanvas.setAttribute(“attribute_name”,”new_value”) to change the class attribute to change the skin. But it is not work on canvas. In HTML5 document canvas doesn't has a class attribute but width and height. At last, I have to change the canvas tag to implement it. Let's make canvas tag is part of a div tag. In the html file where I want to put a clock add:
<div id="pclock"></div>
<script language="JavaScript">
document.getElementById("pclock").innerHTML=
"<canvas id='clockid' class='CoolClock:watermelon:::'></canvas>";
</script>
if we want to change the canvas, we could define a JavaScript function like this:
function changeClock(){
var cStr = Array("swissRail","chunkySwiss","chunkySwissOnBlack","fancy","machine","simonbaird_com","classic","modern","simple","securephp","Tes2","Lev","Sand","Sun","Tor","Cold","Babosa","Tumb","Stone","Disc","watermelon");
//define a array to store different skin id pay attention to how to define a array in JS.
var n = Math.floor(Math.random()*21);
//get a random number to select a skin.
document.getElementById("pclock").innerHTML="<canvas id='clockid' class='CoolClock:"+cStr[n]+":::'></canvas>";
//change the canvas in the div tag
CoolClock.findAndCreateClocks();
//don't forget this to create a clock
}
In the html file, add a button:
<input type="button" id="changeclock" value="换个模样" onclick="changeClock();" />
The second job is to count down the left time from a define time use JS.
The follow function implements the time count job. It use a global variable to get the object Date.
function GetRTime()
{
var EndTime= new Date(userDate);
var NowTime = new Date();
var nMS =EndTime.getTime() - NowTime.getTime();
var nsec = nMS/1000;
var nD, nH, nM, ns;
nD =Math.floor(nsec / (3600 * 24));
nH=Math.floor(nsec/ 3600) % 24;
nM=Math.floor(nsec/60) % 60;
nS=Math.floor(nsec) % 60+1;
document.getElementById("RemainD").innerHTML=nD;
document.getElementById("RemainH").innerHTML=nH;
document.getElementById("RemainM").innerHTML=nM;
document.getElementById("RemainS").innerHTML=nS;
setTimeout("GetRTime()",1000);
}
Why I use a global variable userDate? In this part, setTimeout() is really hard to tackle. SetTimeout() use an independent stack to store the function that pass to it. If your function has a parameter you should use it like this: setTimeout(function(){GetRTime(a)},1000);
e.g.if a=5 but if you change the parameter a into 9 for a change in GetTime() the last value of 5 is store in the stack. When the setTimeout() is executed it will get the parameter stored in the stack execute GetTime(9) and wait for 1000ms then get a=5 from the stack and execute GetTime(5) and wait 1000ms......The GetTime() will execute the last parameter value and the new value for each time. So it doesn't well here when I want to change a different time to count.
When I want to change the date to count, add these two lines in the html file:
<input type="text" id="inDate" value="2010/10/11" />
<input type="button" id="changedate" value="修改日期" onclick="changeTime();" />
The button calls function changeTime(). I don't know why when I use a function with a parameter like onclick="changeTime(“2010/10/06”);” the javascript doesn't work.
function changeTime()
{
userDate = $("inDate").value;
//get the new date from input
isdate(userDate);
modify(userDate);
}
function isdate(theinput)
identifis the new date whether is a date format or not.
function isdate(theinput)
{
if(theinput.length>0)
{
var thechar=theinput.substring(4,5);
if(thechar!="/")
{
alert("请输入正确的日期格式(如2010/12/25)");
return false;
}
}
else
{
alert("Nothing input!");
return false;
}
return true;
}
Function modify(strs) change the time display. The parameter strs pass the new date to the function.
function modify(strs)
{
var EndTime= new Date(strs);
var year = EndTime.getFullYear();
var month = EndTime.getMonth()+1;
var day = EndTime.getDate();
$("CountMsg").innerHTML = "<font color='red'>距"+year+"年"+month+"月"+day+" 日还有: </font>"; //change the hints
to a new date
GetRTime();
}
Another work implements a servlet to handle user's request. Recently I change my phone No. for some reason. I want to make a check that if a person is my classmates, he could get my new phone No. The validation is very simple i.e. the last name of our head teacher. Because java didn't support Chinese natively and I don't want to change the charset of the jsp file, I just use Pinyin to check the string.
In the jsp file there is a form:
<form action="/sign" method="post">
<div>
你是我的<select name="school" id="idschool">
<option value ="primary">小学同学</option>
<option value ="junior">初中同学</option>
<option value="high">高中同学</option>
<option value="college">大学同学</option>
</select> ?
</div>
<div>请输入三年级时班主任的姓氏拼音:<br>
<input name="headteacher" type="text" /></div>
<div><input type="submit" value="Get it!" /></div>
</form>
to make a the form submited correctly, in the war/WEB-INF/web.xml file should add:
<servlet>
<servlet-name>sign</servlet-name>
<servlet-class>guestbook.SignGuestbookServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>sign</servlet-name>
<url-pattern>/sign</url-pattern>
</servlet-mapping>
In the package guestbook, SignGuestbookServlet.java handle the requset and make response.
public class SignGuestbookServlet extends HttpServlet{
private static final Logger log = Logger.getLogger(SignGuestbookServlet.class.getName());
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws IOException {
req.setCharacterEncoding("utf-8");
UserService userService = UserServiceFactory.getUserService();
User user = userService.getCurrentUser();
resp.setContentType("text/html;charset='utf-8' ");
String school = req.getParameter("school");
String headteacher = new String(req.getParameter("headteacher").getBytes("ISO-8859-1"),"utf-8");
String content = req.getParameter("content");
//log.info(school);
log.info(headteacher);
String htmlcontent = "<html><body align='center'><br><br><br><br>" +
" <strong>My No.<strong><br>" +
" <p><a href='/'>back</a></p><body></html>";
if(school!=null&&headteacher!=null){
if(school.equals("primary")&&headteacher.equals("XX")){
PrintWriter out = resp.getWriter();
out.println(htmlcontent);
Then all the work is done. I have forgotten most part of servlet and jsp which I learned 4 years ago. The application is hosted on Google app engine. I have learned this before for using gaeproxy. This time I want to do a small experiment by myself. Sina also supply a cloud platform name sina app, but it is not open to everybody now. The import thing is that Sina require fees but Google app engine is free for 500M each month. But there is a risk to use Google’s service, we don't know when we will not be able to access to Google through the GFW. I download eclipse Helios JavaEE edition, the simple java edition didn’t work for jsp. Then follow the google app engine document’s instruction to add Google eclipse plugin and Google app engine java sdk. I studied the “Guestbook” tutorial of the document to learn the development on google app engine. It take me half a day to learn the basic development on GAE, mainly because I make a dumb mistake (I use the simple java edition not support jsp). I have use Google app engine before so I have an account to upload my project. It is hard to select a good name for your app as a lot of name is not available. At last I select urdoomtime.appspot.com. Urdoomtime means your doom time because my object is to make a time left count down tool. The inspiration is from the movie “2012”, so I make 2012-12-21 as the default end time.
I just did a simple test when I study GAE. It's a good opportunity to recover my javascript and jsp&servlet knowledge. I also spend two hour to study JQuery lib. It is a cool lib that can help you construct complex javascript application easily. Google app engine is really a good platform to deploy your application by Google’s infrastructure.
The computer and network in the college of information engineer masters' study room are really rubbish. The poor environment makes you waste a lot time when you start an eclipse and search some material on Internet. However, I have to bear it for another year.
Appendix
How to download a project from github?
1.Download msysgit : http://code.google.com/p/msysgit/ and install it
2.Create a directory where you want to put the project. E:\clock\
3.In the directory select “Git Bash” on the right click menu. Then a command window show up.
4.Use git clone to download the project: “git clone git://github.com/simonbaird/CoolClock.git”
Google app engine homepage?
http://code.google.com/appengine/
my google app engine test page?
Http:// urdoomtime.appspot.com
JQuery homepage?
Jquery.com
A good website to learn jQuery?
http://www.k99k.com/jQuery_getting_started.html
CoolClock homepage?
http://randomibis.com/coolclock/
