• 1. Accessing Website Source
• 2. Webpage Structure
• CSS Stylesheet
• JavaScript Functions
• 3. Sensors and Channels
• Database
• SVG Maps
• Pictures and Spectra

2. Website Structure: JavaScript Functions

---

[ Prev ] [ Index ] [ Next ]

---

Aside from interactions with the database, all other interactivity on the website is controlled with JavaScript functions. These are separated into two groups: the three functions found at the top of the .svg maps control interactions with the map, and the rest of the functions that control the webpage are found in script.js. Below are descriptions of their properties and purposes:

• map_to_channel(selection)
  

  This function gets called by lookupChannel(id), a function defined in the .svg maps. lookupChannel(id) passes the name of a sensor on the map to map_to_channel(selection), which then posts the channel name in the search form on the webpage and submits the search. This sends a query to the database, and returns information about the selected channel.

  highlight(selection)
  

  This function gets called in index.php every time the search form is submitted (i.e. when the user clicks one of the "Go" buttons or on a sensor on the map). It searches the svg document for an object whose "id" matches the selected channel, then identifies all the path elements of that sensor. It calls color(newElements) on those path elements every 600ms to achieve the flashing effect.

  color(newElements)
  

  This function first stores the original colors of the path elements of a sensor, then colors them all yellow. It calls uncolor(newElements) every 300ms so that the sensor flashes yellow at 300ms intervals.

  uncolor(newElements)
  

  This function restores the original colors of a sensor. It is called 300ms after color(newElements) is called.

  toggle()
  

  This function toggles between hiding and showing the search section of the webpage. By default the search section is shown, but when the search form is submitted, this function is called, which hides the search section and makes room for displaying the channel information. This function is called whenever the hide/show button in the top right corner of the search section is pressed.

  loadPage(page)
  

  This loads data into the right hand side of the webpage, into the section the map occupies by default. For example, when a user clicks on the LLO link, this function loads the LLO map into the map section. It can also load text into the map section, e.g. when the user clicks on "Channel Naming", "Sensor Info", or "Contact".

For the JavaScript functions related to the .svg map, see the SVG Maps page.