Web Programming with html5, css, and JavaScript

Point Tracker

Click your mouse anywhere on this web page to capture its location.
After capturing two locations,click the "Distance apart" button to
display their separation in pixels. Click again for additional points.
Point 1:
Point 2:
onclick="displayDistance(event);">

Point Tracker

Click your mouse anywhere on this web page to capture its location.
Click again for additional points.
Point location:

Pet Registry

Pet name:

Pet type:
onchange="adjustForm(this.form);">

Dog
Hedgehog

Favorite trick:

onclick="register(this.form);">

Book Club Organizer

High culture and pretentious literature at its finest

Author:

Book title:

Meeting date:

You must enter values for all fields.

onclick="addMtg(this.form);">

Meeting Schedule:

Property Description

 

 

 
Address Number:  
Street Name:

 

 
Frontage (ft):  
Height (ft):
Roof Type:

 

 
 
onclick="property.deleteProperty()"> 

 

Instructions:

 
To add a new property, enter values in input boxes and click the 
"Add" button. 
To select an existing property and display its data in input boxes, 
in the table below, click anywhere on the row which describes that 
property. To alter a particular property's data, select it, change 
displayed value(s) in input boxes, and click the "Replace" button. 
To delete a property, select it and click the "Delete" button.
The "Cancel" button clears all input-box entries and de-selects any 
corresponding property. 
 
 
 

Number	Street	Width	Height	Roof

 

onclick="addCheerleader();">
onclick="displayStuntGroup();">

Sorry - This page uses canvas and
your browser doesn't support it.


Sorry - This page uses canvas, and
your browser doesn't support it.




 






onclick="rotateClockwise();">
onclick="moveUp();">

Solar Shadowing by Collector Array

Latitude (Deg):

Base Spacing / Panel Height:

Clearance / Panel Height:

Panel Slope (Deg):

onclick="setup(this.form)">
Month (0 to 12):

Hour (0 to 24):

onclick="showBehavior(this.form)">
Azimuth (Deg):

Altitude (Deg): 

onclick="runClock(this.form)">
onclick="stopClock(this.form)">

614
Chapter 12
 
Canvas

---

FIGUre 12.23a 
JavaScript file for Solar Shadowing web page
/***********************************************************************
* solarAngles.js
* John Dean
*
* This file contains functions supporting solarShadowing.html
***********************************************************************/
var image; // image of one row of PV solar collectors
var form; // html input form
var spacing; // pixel distance between array bases 
var slope; // radians up from horizontal facing south
var canvas; // active display
var context; // nature of active display
var length = 0.5 * 160; // 80 pixels for 160 cm panel height
var X0 = 50; // left side of arrays
var Y0; // bottom of north array
var dyP; // panel bottom-to-top horizontal projection
var altitude; // solar altitude angle above horizon
var azimuth; // solar azimuth angle from south
var cosIncidenceAngle; // angle between sun and normal to panel
var timer; // timer controlling display dynamics
// This function is called when the Install Collectors button is clicked.
function setup(solarForm) {
image = document.getElementById("pvArray");
form = solarForm;
spacing = length * parseFloat(form.elements["spacing"].value);
slope = form.elements["panelSlope"].value * Math.PI/180;
canvas = document.getElementById("topView");
context = canvas.getContext("2d");
canvas.style.backgroundColor = "lightgray";
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.font = "1em Tahoma";
context.fillText("(North)", 324, 20);
if (slope < 0) { // north-facing panels
Y0 = 0.5 * (canvas.height - spacing - length);
dyP = + length * Math.cos(slope); // south end higher
}
else { // south-facing panels
Y0 = 0.5 * (canvas.height - spacing + length);
dyP = - length * Math.cos(slope); // north end higher
}
drawOneArray(Y0);
drawOneArray(Y0 + spacing);
} // end setup
615
12.12 Case Study: Solar Shadowing Dynamics

---

The 
setup
function executes when a user clicks the web page’s 
Install Collectors
button. It initializes the first five global variables and sets the 
canvas
background color. It then 
clears the canvas drawing area. The clearing operation is not necessary at first, but after a change 
in Panel Slope, it is needed to remove previously painted panels. The 
setup
method then writes 
“(North)” at the top of the canvas drawing area to orient the user.
The 
X0
and 
Y0
variables specify the location of the lower west corner of the northern panel 
array such that the two arrays will be equally spaced north and south of the centerline of the 
canvas if their slopes are zero, that is, if they are horizontal. If the panels face south— positive 
panelSlope
—the lower end is the south end. If the panels face north—negative
panelSlope
—
the lower end is the north end. The 
dyP
variable is the horizontal projection of the distance 
from the lower end of either array to the upper end of that same array. It’s the canvas’s 
y
-distance 
in pixels. For north-sloping (southern hemisphere) arrays, 
dyP
is downward and positive. For 
south-sloping (northern hemisphere) arrays, 
dyP
is upward and negative. The 
setup
function 
ends by making a call to the subordinate 
drawOneArray
function for each of the two panel arrays.
FIGUre 12.23B
shows the 
drawOneArray
function. First the function deposits a collec-
tor image that is scaled down in the 
y
-direction to depict an overhead view of a sloped surface. 
Because the 
context.scale
function scales both the image and its location, this scaling must 
be reversed for the 
y
-location argument in the 
drawImage
method call to make the deposited 
image’s location independent of slope. Because the 
drawImage
method specifies the location 
by the image’s minimum-
x
and minimum-
y
(its Northwest corner), and because 
y0
specifies the 
location of the lower edge of the array and the lower edge is the southern edge when 
slope
is