Ask Question, Ask an Expert

+1-415-315-9853

info@mywordsolution.com

Ask Programming Language Expert

Canvas Printing Calculator

In this assignment we will continue to work on our canvas printing web service. Specifically we will make use of Javascript to create a webpage that has client-side interaction with the user. Javascript allows some client-side dynamics by reacting to user events and getting access to values that users type in XHTML form elements. For this assignment the technologies that you may use are: xhtml, css, and javascript.

Canvas printing involves printing images on rolls of canvas. A popular printer for this application is the Epson 9900 printer which can accommodate canvas rolls up to 44" wide. Rolls of canvas come in widths of 24", 36" and 44". When a printer wants to to print some images they must decide what size roll would make the most economical use of the canvas. When a picture is printed there must be at least 3" of extra canvas on all sides of the image so that it can be stretched on a wooden frame. A 24"x36" image could be printed on a 36" wide roll of canvas and consume 42" of canvas, or it could be printed on a 44" wide canvas roll and consume 30" of canvas. So depending on the desired image size it, you need to choose the roll size and the picture orientation to print the picture most economically. Any extra canvas beyond the 3" required border would be waste and reduce the profit of the printer.

There is another problem with canvas printing. When the ink is applied to the canvas the canvas shrinks. Therefore the image has to be printed slightly larger than the final desired size. If the person is printing the image to go on a pre-made stretcher frame the dimensions are critical -especially for gallery wrap prints. Therefore the printer must find out this adjustment and make their image size in photoshop larger. The two most popular canvases, made by Epson and Breathing Color, both shrink 0.01 inch/picture inch in the roll length direction, but don't shrink in the roll width direction at all. So a picture that is intended to be 30"x60" and which is printed on a 36" wide roll will require that the actual picture dimensions in photoshop be set to 30"x60.6".

In this assignment we will build a webpage that allows the user to enter their desired final picture size and also allows them to crop the intended picture. Once they have done this and pressed a "submit" or "find out" button the page should display the following:

• The nominal (intended) dimensions of the picture.

• The actual (photoshop) size of the picture.

• The size of canvas roll to mount in the printer (24",36",or "44").

• The total area of canvas consumed for printing that picture and the total area of canvas wasted.

• A visual representation of how the picture will be oriented on the canvas roll for printing (e.g. will the picture have to be turned sideways to fit on the canvas roll of a particular width.)

• A visual representation of the picture cropping.

• A visual representation of the picture area versus the consumed canvas area.

There are many alternative ways of how you can solve this assignment with xhtml, css and javascript. Here are some of the things you will probably need to figure out how to do.

• React to buttons on a form.

• Get values entered in a form text field.

• Set values in a form text field based on computed results.

• Prevent users from typing in form text fields who values are meant to computed.

• Draw and position elements at specific locations.

• React to mouse events.

• Possibly drag elements around in the window with the mouse.

• Determine the size of components and use their values in computations.

• Alter the size of components based on computation.

• Modify the css style properties of elements based on computation or user events.

Final Note: You could probably do this assignment by only using the DOM 0 event handling model, but feel free to use DOM 2 event handling also if you like even though it not work in all browsers. (Internet Explorer 8 did not implement DOM 2, IE-9 might, ...) The other major Browsers should handle the DOM 2 model. All of your XHTML or HTML5 files should validate using the 3WC file upload validator provided at athttp://validator.w3.org/. All of your CCS style sheet files should validate using the 3WC CSS code validator provided at at http://jigsaw.w3.org/cssvalidator. You may use CSS2 or CSS3 features.

Design Requirements for Canvas Printing Calculator 

1)The topmost homepage should be in a file called index.html, but your index.html page could redirect the viewer to another page with your calculator on it if you wish.

2)There should be an image on your calculator page that presumably represents the one that the viewer selected (Optionally you can build in this selection if you want and actually allow the user to select from among many gallery images.)

3)There should be two text fields, appropriately labelled, which represent the intended finished width and height of the image from the viewer's perspective (that is, the width is the dimension of the top and bottom edge of the picture as intended  to be viewed.)

4) There should be two text fields, appropriately labelled, which represent the photoshop print size of the image. (One of these dimensions will be larger than the nominal based on the canvas stretching and the orientation in which the picture is printed.)

5) There should be an indicator (maybe radio buttons, whatever) that shows the printer operator, after the calculations are done, which size canvas roll to load in the printer.

6) There should be an indicator, preferably visual, that shows the printer whether the image has to be turned on its side for printing. That is, if the picture is too wide for the roll of canvas, it could be turned 90 degrees for printing. Note that the actual process of turning the picture on its side is done in the print dialog box in photoshop when doing the actual printing.

7) If the user enters only a width or only a height for their intended image dimension then the other dimension should be find outd based on the aspect ratio of the image, or the aspect ratio of their crop. If the user enters both dimensions but has cropped the picture then the UI should ask them if they want to use the entered dimensions or the cropped aspect ratio and the entered width.

8) The user should be able to crop the image. This should be done by dragging a line, a box, or mask, or something with the mouse.

9) The cropping should be shown on the intended image so the user can visually decide on the final crop. When the user has finished cropping the image, dimension calculations should be based on their crop.

10) The web page should have instructions on it on how to crop an image. That is, the user, or TA, should not have to read other documentation to figure out how cropping works in your design. Your page should guide them.

11)Your calculator will need do determine which width of canvas roll to mount so that the least amount of canvas is wasted. For ex if a 24"x48" image is printed on 36" wide canvas that waste will be 6"x54" or 324 sq inches. On the other hand if the same image is printed on 44" wide canvas the waste would be 14"x54" or 756 sq inches. Your calculator needs to decide which roll and which picture orientation would be the most economical. Remember the picture must have at least a 3" border of canvas beyond the intended image area.

12) There should be a "find out" button which, when pressed will cause the find outd values to appear in your web page.

13) After the calculations your site should show the amount of canvas consumed in square inches and also the amount wasted in square inches.

14) Your web page should show graphically how the image is positioned on the canvas and what part is waste. For ex you might show the amount of canvas that will be consumed as a box and the image as a smaller box within it (you don't have to show the actual image -just an area representing it). The size of the image shown within should include the required 3" border around the image.

15) Your web page does not have remember the user settings. If the site is revisited, or reloaded, it can go back to its initial settings.

OPTIONAL:

This assignment requires that you work in inches because that is still the most common among photo printers. You could optionally provide a toggle that will also allow the user to work in metric dimensions instead. If you do this you must still provide the imperial (inches) option.

Programming Language, Programming

  • Category:- Programming Language
  • Reference No.:- M91852

Have any Question? 


Related Questions in Programming Language

Cp1404cp5632 2016 sp22252 assignment 1 - shopping list

CP1404/CP5632 2016 SP2/22/52 Assignment 1 - Shopping List 1.0 Task: You are to plan and then code a console-based program in Python 3, as described in the following information and sample output. This assignment will hel ...

Object oriented system analysis and design1non-functional

Object Oriented System Analysis and Design 1. Non-Functional Requirements a) Analysis of NFRs Analyse the Case Study documents and determine the non-functional requirements (NFRs) or system quality attributes necessary t ...

Operating systems assignment-1 binary record sorting in

Operating Systems Assignment- 1. Binary Record Sorting in Ascending Order| You will write a simple sorting program. This program should be invoked as follows: shell% ./fastsort -i inputfile -o outputfile The above line m ...

Shell programmingyou have created the directory structure

Shell Programming You have created the directory structure and some base files to be used by the Web server and Web site. For the Web site to be created in a production environment, you need to package your commands in a ...

The given machine description will provide the basis for

The given machine description will provide the basis for this assignment. You will create a virtual machine/operating system for the machine described below that will accept programs in the target machine language. The d ...

This assignment introduces you to the perl language and cgi

This assignment introduces you to the Perl language and CGI programming. You will use your scripting and html skills to build a Perl program that will gather user input to then generate a personal webpage. This program w ...

1 tic tac toein a tic tac toe game two players x and o take

1 TIC TAC TOE In a Tic Tac Toe game two players, X and O, take turns to mark the spaces in a 3X3 grid. The winner will be the player who first succeeds in placing three of his/her marks in a horizontal, vertical, or diag ...

1 construct a markov algorithm that will reverse the order

1) Construct a Markov Algorithm that will reverse the order of an input string that consists of zero or more upper case letters. ABCDE should become EDCBA, AB should become BA, A should stay A, and A should stay A. NOTE: ...

Programming assignment- implement a udp client and udp

PROGRAMMING ASSIGNMENT- Implement a UDP client and UDP server that support simple timeout-based retransmission with AIMD congestion control: -The client should send as many packets as are in its CURWIN (current window) a ...

Programming lab assignment set awhat to submitcomplete

Programming Lab Assignment (Set A) What to Submit Complete Problem Solving Steps 1 - 3 (check plan, data analysis, initial algorithm, and refinement algorithm) for the following programs. 1. (Name: lab1a-1.cpp) Write a p ...

  • 4,153,160 Questions Asked
  • 13,132 Experts
  • 2,558,936 Questions Answered

Ask Experts for help!!

Looking for Assignment Help?

Start excelling in your Courses, Get help with Assignment

Write us your full requirement for evaluation and you will receive response within 20 minutes turnaround time.

Ask Now Help with Problems, Get a Best Answer

A cola-dispensing machine is set to dispense 9 ounces of

A cola-dispensing machine is set to dispense 9 ounces of cola per cup, with a standard deviation of 1.0 ounce. The manuf

What is marketingbullwhat is marketing think back to your

What is Marketing? • "What is marketing"? Think back to your impressions before you started this class versus how you

Question -your client david smith runs a small it

QUESTION - Your client, David Smith runs a small IT consulting business specialising in computer software and techno

Inspection of a random sample of 22 aircraft showed that 15

Inspection of a random sample of 22 aircraft showed that 15 needed repairs to fix a wiring problem that might compromise

Effective hrmquestionhow can an effective hrm system help

Effective HRM Question How can an effective HRM system help facilitate the achievement of an organization's strate