Since this is the beginning of the project start, our class have being meet for three times. And We decided to use a web based to create the app. And we will use HTML, CSS and JAVA SCRIPT to write code on them. I was reading about a web : https://developer.mozilla.org/en-US/learn , given by the professor in general about how to install and basic function in these three area.
I have learn a couple useful things from the web:
To get start a JavaScript:
“Getting started with JavaScript is very easy. You don’t have to have complicated development programs installed. You don’t have to know how to use a shell, program Make or use a compiler. JavaScript is interpreted by your web browser. All you have to do is save your program as a text file and then open it up in your web browser. That’s it!”
To get start a HTML
” HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor. “
With these simple examples on the web, this week, I am being able to create a local web page.

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

Hello again,

This little demo (someone had lots of fun producing it; not me since I have no drawing talent) was done on a new version of the coloring app I came up with. When you click on the index.html file, it features a slideshow as an intro to the app, it also focuses on a minimalistic User Interface where everything needed is on the screen and would provide immediate and intuitive interaction to users, specially children, who would be able to start sketching and coloring right away. 

 

As I have mentioned before, while we have been waiting on a decision from the WAM on the ipad setup, the user interface for the coloring app (and maybe other parts of the main application), I spent some time playing around with some jquery plugins, namely slides.js http://slidesjs.com/ and sketch.js https://github.com/soulwire/sketch.js?utm_source=javascriptweekly&utm_medium=email

 

This app make use of these plugins and allows for (maybe) less, simpler code and smaller file size. The code is on github at https://github.com/betoluna/sketchNcolor , you can fork the repo, clone it and test it in your local machine, or even easier, go to the web server http://cstest.worcester.edu/development/betoluna/sketchNcolor/ and try it there, this will take you right to the intro page. I made some initial testing in the Ipad and it seems to be working without problems.

 

Until next time 

Beto.

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

 

Hello,

As a curious note, this week while exploring some jquery plugins that would potentially find use in the coloring app, I encountered a situation in which I needed to be able to click on a link  -an <a></a> html element- and not only have the link do its job but, as a side effect also activate or click a second link with that had different purpose.

 

You may be wondering: why on earth would anyone want to do that? Well, for various different reasons. If you look around on the web and you will definitively find some. It turns out that in this particular case, sketch.js, the plugin I was testing, works by simply using links that work as tool buttons. The link’s href tag just has to point to the id of the canvas and will automatically be considered a tool link.

 

For the sake of simplicity in the functionality of the app, I wanted to chain links so that the first would act and then trigger the next. My first obvious thought was to nest links. Not good; it cannot be done. According to the World Wide Web Consortium (w3.org), nested links are illegal: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2 Of course there are workarounds for this but, as I was browsing around, I found solutions that were either elaborated or involved defining some jquery functions in which I didn’t want to spend too much time. I kept doing a little more research and was delighted when I bumped into a javascript solution that is beautiful in its simplicity.

 

As an example, clicking on the first link below, will also trigger the second link after that:

 

<a href=”#” onclick=”document.getElementById(‘anyId’).click();”></a>

<a id=”anyId” href=’#canvas’ “some javascript”></a>

 

And that is achieved by just adding: onclick=”document.getElementById(“anyId”).click()”  to the first link where “anyId” is of course the Id of the second link. Simple right? 

Well, if you ever want to chain links in this way, this simple line of code can save the day.

Until next week.

 

From the blog betoluna » CS WSU by betoluna1 and used with permission of the author. All other rights reserved by the author.

So this will be a relatively short blog as I am deeply engrossed in coding the coloring page.  I have been working on a flood fill feature for the coloring page for four days now, It has not been an easy task.  The only way to make a fast flood fill method is to directly access the pixels memory.  I was lucky enough to find a flood fill javascript file that does this and I have been working to change my algorithm to do the same.  In light of this new fill feature multiple canvases seemed like they would be more of a hindrance than a benefit, so I have refactored the code to use a redraw method in order to keep the outline image untouched.  The concepts used where taken from a tutorial at http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/.

I am currently trying to address a pixel matching issue with my flood fill algorithm as well as finding a way to handle redrawing the fill feature.  There will be a long blog that will come hopefully soon if a figure all this out, that will explain flood fill and the redrawing method in detail.

UPDATE: I wanted to quickly update this blog to just let everyone know that I got my floodFill algorithm working and it is very fast.  I also got it working in the redraw method.  The next step will be to optimize redraw so it only redraws what it has to.

Till next time.

Jason

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

I missed some blog posts, due to midterms and other distractions.  So this post will include information from the missed blogs as well as the current one this week.

First having nothing more to research for the group I joined the testing group to go over what other people were doing looking for any bugs, errors, or ideas I thought that could be useful.  My main goal was to be doing the testing on the iPad to make sure it worked, did what it was supposed to, and that there wasn’t any compatibility problems.  The first week on testing was slow, few things were ready for testing and those that had something it wasn’t complete so hard to do much.  The second week was a bit better but still not as progressive as I would like.  I came up with some suggestions but It was a question if any were viable.

This week, after a lot of delays was able to work on the iPad and make a lot of progress there.  Below is a detailed account but in short, there was some good and some not as good in my work.  The good, is the Kiosk Pro does seem to really deliver on it’s promises, also there is a lot of helpful information on the settings screen, and even links to online tutorials.  I’ll be going over some of these during the vacation break next week.  I believe that Kiosk Pro will work just fine as believed and there were some features that we might be able to use to cut down on the needed coding.

The bad, some of the features don’t work when I tested them.  Though I found out for the most part it seems to be the iPad not Kiosk pro in general, as the same errors came up when I viewed the project just in a regular browser.  The coloring and puzzle apps were the primary area this came into play (Details below).  So after finishing this blog post I’ll be sending out an e-mail to list with my findings so that people can start thinking about the new problems that have come up.  I’ll also be including a quick guide how to get into the Kiosk Pro to do the testing there.

Some questions also came up, features we may or may not use, and setting choices that will need WAM input (not a big rush on these as they don’t really need to be resolved until the iPads are ready to be set up).  As these items get resolved and I am able to get more of the settings on the iPad ready I will likely put together an easy to follow step by step guide on configuring the settings of Kiosk Pro, both in general and specifically to work with the kiosks and our program.  This way if WAM wishes to add more in the future or something needs to be changed but Tim is not around there will be an easy step by step to follow.

iPad Testing specifics

Note: I’ve split up the things I found into sections per what part they pertain to.  So if you just want to see the notes on your groups sections then you can look for it.  Also take a look at the general items as well as some may pertain to your group.  I’ll continue to use this format as I make future updates.

Overall Program: Partially Working

The ‘home’ link at the top right of the homepage, article page and slideshow does not work as a link, and on the iPad the house image shows up as a check mark instead.  This seems to be an issue with the new iPads as older ones still show the house image.

For all pages, had to use the Kiosk Pro built in back button to get back to the home page, as the pages either don’t have a working button, or none at all.

Touch control worked fine on all pages, was able to scroll and zoom without any troubles.

There is an idle timer set that will return to the home page if it is idle for 30seconds (This time is for testing purposes and can be changed later to whatever is decided would be best).  If there is a point that we don’t want the idle timer to activate, there is code for supplying a condition that will shut off the idle timer.  The code is below.

Function KioskShouldDisableTimer() {

            var shouldSkipAction = “NO”;

            if(someCondition) {

                        shouldSkipAction = “YES”;

            }

            return shouldSkipAction;

}

This is all the information it gives, but if there are problems I can help trying to figure out how to use this properly.  There is a demo on using this that I will be viewing over vacation or next week.

I looked at all the pages in both Portrait and landscape mode.  None of the pages seemed really squished in landscape, and the homepage does not work in portrait.   The messages and buttons within the boxes are not shown so you can’t navigate at all.

 

HOME PAGE: Working

The only issue currently for the homepage is that it is a bit to long, had to actually scroll down to see the entire page.  At the moment doesn’t matter as there is nothing on the navigation boxes, but as that changes it might not look good to have to scroll down to see.  I don’t know that it is possible to shrink the page, but if we just avoid using the bottom it would have the same effect.

 

Article: Working

When scrolling on the page, the images on the left don’t update until the scrolling action stops.  This isn’t a major issue and it is possible there isn’t a way to really change this as it may well be part of the iPad programming.

When I used the zoom feature to look at the text closer, the image box stayed partially on the screen blocking some of the text that the customer would be trying to read.  I’m not sure on a solution for this.

Besides the issues up above, all the buttons worked and the image box did change with that section reached the top of the screen.  I had no trouble scrolling through the images in the box on the left, or using the buttons in the text section.

 

Slideshow: Not working

The issues here I believe are all ones that are just in the works and not to do with the iPad in specific.

When the pictures are clicked get a blank page with ‘undefined’ at the top left.

have thumbnails of the pictures at the bottom which can be scrolled through, but top of the screen is blank so far.

 

Puzzle App: Not working – error

While it works on other systems, on the iPad (through kiosk pro or directly in browser) can’t select the puzzle pieces at all.  The shuffle button works find and the pieces are the correct puzzle shaped pieces but can’t move them around.

The example image takes up only a small portion of the screen at the top left, with the pieces scattered across the top half of the screen.  they actually go to the right enough that scrolling is needed to see all of them.  The bottom portion of the screen is completely unused.  Not major issues but something that right now gives a poor look to the app.

 

Coloring: Not working – error

Like the puzzle app there is a problem on the iPad (in kiosk pro or just in browser) that you can’t actually color the picture.  all other buttons and scrolling works just the coloring action doesn’t work.

When I go into the color select menu and select a color it closes the menu automatically, this is good I think.  However, the brush size menu, when a brush size is picked the menu doesn’t close, you have to click on the brush size menu button again to get it to close.

 

Screensaver: Not implemented yet

Some information, if we decided to use the built in video screensaver.

The iPad screen is a 4:3 aspect ratio, so to be true full screen the video will need to be the same.  If not Kiosk Pro will get it as close as possible and should fill in the rest of the screen not used with black.

It supports .mp4 and .mov as well as remote streaming video (.m3u8 format)

 

These are all my notes for the groups so far.  If there are any questions let me know and if any of the teams have something specific they want me to test for or want/need help in testing their stuff let me know.

 

General Questions

Kiosk Pro has it’s own navigation bar that can be customized, this might be usable but likely we will want to disable this once we have our own added.  As if we used this feature, and WAM released the program openly after the display of the statues, there would be no navigation buttons.

WAM needs to get screen protectors for the iPads, for now I’m going to bring in one of my touch screen cleaning cloths to keep it looking good while we have it.

I will be looking more into the local file information to make sure there will be no trouble backing up our program locally on the iPad to be used when there is no internet connection

I will also be looking into the Remote Monitoring features to be able to give a good explanation of how they work to WAM.

While I’ll be doing some things over the vacation time I likely will not make a blog post, so what I get done will be on the next week’s blog post.

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

For the last week, i learned how to work with Github basically. We saw on Sompop’s post before, there were some commands that we can use to clone, pull, push, fetch. After the class time on Monday, Sompop helped me know more about using git and Github. I’ll write all the commands i learned out now to be my record firstly, and it would be great if anyone finds it helpful.

1- cd, ls list and change your directory. In the terminal, using cd command to move to your desired directory, which is used to save your files from Github.

2- git clone  https://github.com/CS-Worcester/CS401Spring2013.git to clone the our class’s repo.

3- Now there is a sub-directory in your your desired one named CS401Spring2013. Change to that directory by using cd command.

4- git remote origin to remote the cloned repo.

5- git branch to list all the branches on the repo.

6- git branch <name of your new branch> to create a new branch.

7- git branch -D <name of your new branch> to delete your new branch.

8- git checkout <name of another branch> to switch to another branch.

9- git status to show which branch you’re on currently.

10- git pull origin to fetch then merge everything on the current branch to your local directory.

11- git push origin to push your files to the branch on Github.

12- git fetch origin to fetch everything on the current branch (just getting updates, not merge them to your local branch).

13- git pull origin <name of another branch (different from the branch you’re currently on)> to pull everything from another branch and merge to your current branch. With this command, you need to commit the merge before continuing by using: git commit .Then you need to commit again for the change you made to the current branch.

Here is a similar infer. for that kind of pull: http://stackoverflow.com/questions/1709177/git-pull-certain-branch-from-github

Similar to push and fetch.

14- git add < file name> to commit and let the tracker track the file for any change you make on it.

That is all i know about using Git and Github for now.

More on next post for this week….

 

From the blog daunguyen10&#039;s Blog » CS-WSU by daunguyen10 and used with permission of the author. All other rights reserved by the author.

After trying out a few different options, I finally came up with an easy way to move files to the server using git. This isn’t using GitHub at all, but actually a Git repository on our server. It’s nice and you never have to use FTP or SCP, just some shell commands for the initial setup! The setup might seem a bit daunting but it’s not that hard and you’ll have it running in no time. It may ask for your password a few times in the commands, keep in mind when you’re typing characters they won’t show up when doing the password. This is for security purposes, of course.)

SSH into the server, Windows users can use puTTY, OS X and GNU/Linux users can use the ssh command like this:

ssh user@server.internet.com

(obviously replacing user with your username and server.internet.com with the server)

Then do the following commands: (replace web with what you want to call the repo if you want to call it anything else. web is perfectly ok though.)

mkdir web
cd web
git init –bare
cd hooks
touch post-receive
nano post-receive

This will open a text file to edit. You can use a text editor of your choice instead of nano, but I think the server only has nano and vim. Vim is what I’d recommend using if you know how, but if not nano is perfectly O.K. Here’s what you need to fill the file with:

#!/bin/bash
GIT_WORK_TREE=~/html/ git checkout -f
echo Updated Successfully

After that save the file and exit (I think it’s CTRL+X with Nano, and :wq on Vim). Then you will be all set with the server. After this you need to clone the repo. I’m not sure how to do this properly on Windows, but for the OS X and GNU/Linux users you do the following command:

git clone user@server.internet.com:web

(where user is your username and server.internet.com is our server. web is the repo)

This will clone the repo to your machine. It’s going to be empty, so it’s time to fill it with things. I’d test it first, by putting an index.html file with some stuff in it in the folder, and then adding, committing, and pushing. (If you don’t know the commands, they’re:

git add -A
git commit
git push origin master

git add -A adds every file in the folder, so watch out) Then the server should be updated. Put the server address in an address bar and head to your user folder and your files should now be there. They’re also tracked by git so if you’re familiar with git you can revert changes and all that fun stuff.

Hope this is helpful to some people. I’d recommend doing this over the other options as this’ll help get you familiar with git and it’s also much simpler to do after the initial set-up.

From the blog Five mvs of Doom by Chad Wade Day, Jr. and used with permission of the author. All other rights reserved by the author.

Now that we have a server set up and you can remotely access it, I can full document how to get your files on there. Make sure you get your username set up by Dillon before attempting this, if you don’t have that info, you’re not going to be able to do anything. Make sure you put your files in the html directory for things to show up on the server online under the development folder.

There’s a few options available to you.

Using SCP

scp (Secure Copy) is a means of simply copying files over SSH (Secure Shell). It’s a replacement for the old rcp (Remote Copy) command which was functionally equivalent, but unencrypted so not secure at all. It’s a safe, easy, and fast way of getting files from one place to another.

In Linux (and possibley OS X systems, I’m honestly not too sure), you can do this with a simple command line command. To copy files to the server, here’s what you’d do in a shell:

scp file-to-copy user@server:path

an example would be

scp test.txt chad@example.com:html/

which would copy a test.txt file to the html/ directory on the server relative to a user chad’s home folder. You can also use the -P option to specify a port, but for our purposes we’re using the default SSH port so you don’t have to worry about that. Also if you’re copying over a directory, you’ll have to use the -r option for recursive, as without it it’ll only transfer individual files (don’t worry though, it’ll warn you). Depending on your setup, it might ask for your password when you want to copy, enter your password (your text won’t show up on the screen as you type a password) if it does that and hit enter and you should be ok.

You can also copy files from the server back, just by swapping the inputs,

scp user@server:file-to-copy location-to-copy-to

I use this command quite a bit, so if you have any trouble with it, feel free to ask.

For Windows users, you can use WinSCP. Basically you start the program up, and it should prompt you with a window called WinSCP Login. Set the protocol to SCP, the Host name to our server, enter your username and password in the appropriate fields and ignore the key field. Click Login, and another prompt should pop up telling you about the key on the server, just hit Yes and it should connect you from there. It should be pretty easy to understand from there.

You can also do SFTP from WinSCP which leads us to the next option

Using SFTP

SFTP is the FTP (File Transfer Protocol) over SSH. It offers a few more features than SCP such as changing file permissions, which shouldn’t matter, but some people might be more comfortable with FTP. WinSCP works fine for this, but FileZilla is cross platform so that’s what I’d recommend using. Pretty much any modern FTP client should support the SFTP protocol though (you could even do it from command line although I’m not a fan of doing that)

Open up FileZilla, and head to File -> Server Manager. Click on New Site and call it whatever you want. In the General tab, for host fill in our server, and port 22. For Protocol make sure to pick SFTP (FTP is the default option). Change Logon type to Normal, and enter your username and password in those fields and hit connect. Then you can click connect and it should put you on the server (if there’s a prompt about a key, just hit yes or ok).

Using Git

Ideally we should be able to set up a git repo on the server that we can push local projects to. I’m going to look into this for another blog post.

Hope this helps, and if you have any questions, be sure to drop me an email at cdayjr@worcester.edu or send me a message in the comments.

From the blog Five mvs of Doom by Chad Wade Day, Jr. and used with permission of the author. All other rights reserved by the author.