CSS 450: Programming Assignment #2
HTML and Event Driven Programming
Due time: Please refer to out course web-site
Objective
In this programming assignment we will practice building graphical user interface (GUI) based on event driven programming with HTML and AngularJS as we have learned in the lectures. We will build a system to report pixel movements in different units. Yes, it is true, this is a completely useless system, but then, it does interact with the user in a defined manner, and this is like the second week of class?
Our system must satisfy the following specifications.
Approach
Before enabled, your system should be hide irrelevant GUI elements to avoid confusing your user. For example, your system may look like the following. Notice that the timer output is always visible, and set to 0 when measurement is disabled.
You must allow option for your user to enable measuring. When enabled, your system reports total mouse movements between left mouse button (LMB) clicks.
o Measurement State: Your user can disable the measurement state at any time. When the measurement state is disabled you must hide all unrelated GUI elements. User can enable the measurement state by toggling a switch.
o Hint: I use the ng-hide directive in an enclosing <div> tag. In my implementation, I used “!mSessionEnabled” (notice the “!” as in not) as my hide condition.
o Reference: https://docs.angularjs.org/api/ng/directive/ngHide
o
“A mouse
click” is defined as the “Mouse Button Down” event in the measuring area
(to be discussed). We compute the distance based on where the left mouse button
went down in this area.
o A Measuring session: is defined as consecutive LMB clicks until we encounter a right mouse button click (RMB). For example, LMB clicks ptA, ptB, and ptC, move the mouse around and RMB clicks at ptD. The distance we should report for this measuring session is the sum of ptA-ptB distance and ptB-ptC distance. ptC-ptD distance is not part of our measurement session because user did not do a LMB at ptD.
o Hint: you may want to disable the RMB context menu with: oncontextmenu ="return false;" // disable right mouse button context menu
o Reference: http://stackoverflow.com/questions/10864249/disabling-right-click-context-menu-on-a-html-canvas
When enabled, your system must support the following:
o Measuring Area: this is the area where you will measure your LMB. This is how I define my area:
<div
ng-mousemove="serviceMove($event)"
ng-mousedown="serviceDown($event)"
style="width: 800px; height:
200px; outline: 1px solid;
background-color: #EEEEFF">
<h2> Measuring Area
</h2>
</div>
o Measurement state timer: Whenever the measurement state is enabled, the timer will start counting and showing the number of elapsed seconds since the measurement is enabled. Disabling the measurement state must set the timer to zero.
o Measurement Unit: To ensure we practice with different UI elements, we will report all measurements in four different units: Pixel, millimeter (mm), centimeter (cm), and meter (m). Notice, you are only expected to report the units-strings, you are not expected to compute mouse movements in different units. For example, when user select mm, and the mouse moved from (0,0) to (0, 5), you will report 5-mm.
o Scaling Slider Bar: Your UI also supports a scaling slider bar. This slider bar allows user to scale the output of their measurement. For example, a user will set the slider bar to 2.0, move mouse from (0, 0) to (0, 5), and expect to see 10 units measured. To ensure proper communication to the user, your slider bar must include a numeric echo. Changing of measurement unit will also change the slider bar:
1. Pixel: Slider bar scale will be set to 1
2. MM: Slider bar scale will be set to 5
3. CM: Slider bar scale will be set to 10
4. M: Slider bar scale will be set to 50
o UI Echo: You will inform the user what is going on with the following 5 UI outputs:
Ø A: Total Displacement in Pixels: this is the total pixel movement of the mouse in a measuring session.
Ø B: Total Displacement in Units: this is simply Total Displacement in Pixels multiply by the scaling slider bar value. It is important that your output include the unit strings (e.g. “mm”) informing the user what is the current measurement units.
Ø C: Last LMB Click position: this is the most recently LMB click position.
Ø D: Current Mouse Position: this is the current mouse position (regardless of any button clicked or not).
Ø E: Measurement State: There are 4 different status message you must support
§ Measurement Disabled – when the measurement state is switched off (and all GUI hidden).
§ Measurement Enabled – when the measurement state is enabled, but before the first LMB click.
§ Measurement In Progress – when the LMB starts to click. You must inform the user how many LMB clicks have been recorded in the current measuring session.
§ Measurement Done – when the RMB clicks. You must inform the user how many LMB clicks were in the measuring that was terminated.
o
Grouping
of UI: This has nothing to do with our application, but we want to practice
grouping of UI elements in a region (I use the “div” tag). In this assignment,
you must include at least two regions containing collections of UI elements. In my
implementation, I grouped the measuring results and mouse movements. You can
choose to include any UI elements in any number of regions. Just to make sure it makes sense, and you include at least two such regions of UI
elements.
In your implementation:
· Your system must reflect user’s action instantaneously.
· Your system should be user friendly and tell your user what is going on at all times.
· Very importantly your system should look different from my mp2 implementation. Among other problems I have, I have no artistic talents and cannot do any useful GUI design. Please show me what a good system should look like. PLEASE. I’m not kidding!
· When first enabled, all GUI output must reflect a consistent initial state (e.g., measurement should be zero, timer should start from zero, etc.).
· Your system should not contain any unused functionality or code (unused event handlers, meaningless output from examples, etc.) will all cause you points! So please pay attention to the details.
· If you find inconsistency between the above system description and my implementation, please ASK! I may have bugs in my program. It is kind of late right now J.
Here are some screen shots from my implementation:
· 4 seconds after the measuring state is enabled before the first LMB. Notice the relevant GUI output:
o State message: clearly points out before first click
o Timer output: 4 seconds has passed
o Pixel unit is selected, and thus the default slider scale is set to 1 (user can change this at any time, but click on the 4 units will pre-set the scales).
· Many seconds later (25 to be specific), after three LMB clicks:
o State message: saying measuring in progress and 3 LMB clicks
o Timer output: 25 seconds has passed
o CM is selected, and thus the default slider scale is set to 10
o
Total measurement results: in pixels, and in CM
Units (which, in this case is 10x)
· After two more LMB and one RMB:
o State message: saying measuring has ended with 5 LMB clicks
o Timer output: 107 seconds has passed
o CM is selected, and thus the default slider scale is set to 10
o Total measurement results: in pixels, and in CM Units (which, in this case is 10x)
· At this point
o If the user disables the measurement, all results will be lost. Re-enabling will give a brand new session.
o If the user click on LMB again, a new measuring session will begin, timer will continue to count.
Hints:
· In my implementation I defined a MeasureCore object and a corresponding MeasureCore_ViewModel class to keep my controller clean from accessing any MeasureCore object’s instance variables.
· Please! You are welcome … in fact, you are encouraged to use any of the source code we talk about in class.
Credit Distribution
Here is how the credits are distributed in this assignment:
|
1.
|
Measuring State |
|
20% |
|
a. Toggle and/or otherwise on/off switch b. Hide/Show UI c. Clean UI state when enabled d. Proper
timer support (show 0 when disabled) |
5% 5% 5% 5% |
||
|
2.
|
Measuring State |
|
25% |
|
a. LMB Start Session b. Proper status echo with LMB clicks c. RMB Ends Session d. Instantaneous echo of state |
5% 10% 5% |
||
|
3.
|
Measurement Unit |
|
25% |
|
a. Proper support choosing 1 of 4 b. Proper support of output unit string c. Proper support of default scale setting d. Proper support of adjustable scales |
5% 5% 10% 5% |
||
|
4.
|
Measurement Echo |
|
15% |
|
a. Proper and Correct Distance Measurement values b. Proper echo of unit strings in unit echo |
10% 5% |
||
|
5.
|
Mouse Echo |
|
5% |
|
a. Current Mouse Position echo (when mouse in area) b. Proper LMB Click Echo |
|
||
|
6.
|
2X regions that groups UI |
|
5% |
|
a. The grouping make sense |
|
||
|
7.
|
Others |
|
5% |
|
a. General program efficiency/style b. Proper submission c. Zip file names with NO SPACES d. NEW: MP Project Name (in Netbeans): FirstLastMP2 |
|
Extra Credit:
This programming assignment will count 10% towards your final grade for this class.