HW#4 --- last modified May 03 2021 19:03:43.

Solution set.

Due date: Apr 30

Files to be submitted:
  Hw4.zip

Purpose: To gain experience in programming iin using version control system and in taking first steps in using Javascript.

Related Course Outcomes:

The main course outcomes covered by this assignment are:

LO4 -- Write client-side scripts that validate HTML forms.

LO5 -- Develop and deploy web applications that involve components, web services, and database

Description: For this homework, you are going to code a simple tile server for maps as well as a command line tool for making tiles.

1. Your homework should be developed as a composer project, so should have a composer.json file.
2. Your project is written using namespaces. You only create variables, arrays, objects, define new classes, etc. in the namespace cool_name_for_your_group\hw4 and subnamespaces thereof.
3. The folder structure for your project should be the same as for HW3 and you should use the MVA design pattern for the web app part. As this project does not involve a database, you will not need a CreateDB.php file. As you will be using packagist.org you need a vendor folder. You should also have a executables folder which will hold your command-line image tool.
4. You should develop your whole project using git. If the grader does a diff between any two adjacent commits in the git log history, the number of lines of code that change should never be more than 100 lines.
5. You should have a file issues.txt where you split the project into issues. Each issue should have a number by it and an initial description. If you are working in a group of more than one person, the issues should be assigned to team members. Beneath the initial description, should be bullet points for any discussion comments between team members (or between yourself if you are in a group one).
6. The command line tool should be called TileMaker.php. It will be run from the command line with a syntax like:

   php TileMaker.php some_map_image some_folder
   

   For example,

   php TileMaker.php san_jose.jpg images
   

7. Your program only needs to work for .jpg images. To do image manipulation you should use PHP's Image Manipulation Functions. On such a command as above, your program should create a folder some_folder (in the particular example, images), and then store in it a sequence of images: a black 200px x 200px images blank.jpg, a 800px x 800px all.jpg, sixteen 200px x 200px images of name a two digit number where each digit is between 0 to 3 inclusive followed .jpg, two hundred and fifty six 200px x 200px images of name a four digit number where each digit is between 0 to 3 inclusive . 02.jpg is an example name of one 16 images, and 3103.jpg is an example name of one of the two hundred and fifty six images. all.jpg should be the originally supplied image, some_map_image (or in the particular example san_jose.jpg), rescaled so as to be 800 x 800x. An image ij.jpg (for example, 02.jpg) should correspond to the sub-region of the all.jpg image with top-left coordinates (i*200, j*200) and bottom right coordinates (i*200 + 200, j*200 +200). An images of name ijnm.jpg corresponds to the sub-region of the all.jpg image with top-left coordinates (i*200 + n*50, j*200 + m*50) and bottom right coordinates (i*200 + n*50 + 50, j*200 + m*50 + 50) rescaled as a 200px by 200px image.
8. Immediately after saving one of these images to a file, your program should use monolog/monolog to write a log message saying which images was just saved.
9. You can assume that after downloading your project, the grader will open it and delete any resources folder present. The grader will then delete any files in your vendor folder. The grader will then run the command:

   composer install
   

   to install any dependencies your project has. Then the grader will from your project's executables folder run a command:

   php TileMaker.php path_to_some_image_of_the_graders_choice.jpg path_to_projects_resource_folder
   

   to generate the tiles needed for resting your web app.
10. Your web app should look roughly like (obviously not in character graphics):

                            Map Server
    
    Coords: [1,1] [GO] |     
    Zoom: [In|Out]     |     A 3 x 3 grid of of image tiles from the map centered at image 11.jpg
        ^              |
       < >             |
        V              |
    

11. The only require or include statement your web app itself (i.e., not TileMaker.php) is allowed to have should occur in the index.php file and should be a require of the Composer generated autoload.php file.
12. Coordinates in the coordinate text field should either be of the format [i,j] or [i,j,n,m] and should indicate the either ij.jpg or ijnm.jpg file at the center of the 3x3 grid. If that tile is at the boundary of the map, the appropriate surrounding tiles on the map should be blank.jpg.
13. When a user enters a coordinate in the coordinate text field and clicks go, your program should validate the coordinate using Javascript and only submit the form if the coordinate is valid. Otherwise, some error message should be briefly displayed on the screen (using Javascript). If the coordinate is valid , then the returned pages should have its center tile that coordinate on the map.
14. Clicking the In button when the coordinate is of the form [i,j] should cause the coordinate to change to [i,j,1,1] and the appropriate four coordinate tiles should be used to display the 3x3 image grid. Clicking the Out button when the coordinate is of the form [i,j,n,m] should cause the coordinate to change to [i,j] and the appropriate two coordinate tiles should be used to display the 3x3 image grid.
15. When the coordinate is of the form [i,j], the Out button should be disabled/grayed out. When the coordinate is of the form [i,j,n.m], the In button should be disabled/grayed out.
16. Clicking the arrow buttons shouldchange what is displayed in the 3x3 grid of images tiles appropriately for that zoom level.

Point Breakdown

Items (a)-(f), (h)-(l), (n)-(p) are each worth (1/2pt). If an item involves several sentences, then all of the sentences must be accomplished to receive the 1/2 pt.	7pts
Items (g), (m) are each worth (1.5pt).	3pts
Total	10pts