SVG Zone - Developer Track - Visual Building Search

Web products

SVG

Developer track

Visual Building Search demo

The Visual Building Search demo is a considerable advance from your typical phone directory application. Not only can you search for a particular person, you can see the floor plans of the building, view a path from the elevators to the person's office, and even print a crystal clear map of the route to take with you.

On the right side of the demo, there is initially an SVG graphic of the two towers of the Adobe Systems' San Jose offices. In this graphic, you can move your mouse over any of the upper floors of either tower, which causes an arrow to appear and the floor to be highlighted. On the left side is an "elevator-type" control panel, where you can choose where you want to go. (This "elevator" has the added feature of being able to move between buildings!)

There are two ways to visit a floor. In the elevator panel, you can click the mouse on the buttons to choose a floor to see. In the building schematic, move the pointer over a floor and then click. Either way, you are whisked away to view an SVG graphic of the chosen floor plan. From the floor plan, you can click on a office to see information about that room, including the person in the office and his/her phone number. (Of course, the names and other data in this demo are fictitious.)

Reuse SVG and Reduce Downloading Bitmaps

Since neither the buildings nor the floor plans are rendered in a bitmap, you can change the image of the floor plan without recalculating and downloading a more detailed bitmap. You can interact with an SVG image, processing mouse interactions and redisplaying the scene with only client-side operations. You can zoom in and pan around to get a better look, and the SVG graphic adjusts size without diminishing its quality, scaling both text and graphics without loss of resolution. Using SVG, you can print at that higher resolution.

In the following SVG Building View, as the viewer moves the mouse over the building, SVG highlights (and removes highlights from) floors, with only client-side rendering using data from the SVG file. As the viewer zooms closer, the building, the arrow-shaped floor indicator, and the highlighting of the windows all correspondingly increase in size. (Note that the Elevator Panel has not zoomed, because it's in a different SVG file in a different HTML frame.)

As seen below, the viewer may also zoom in and out for the Floor Plan View. There is no loss of text resolution, which would typically occur with a standard bitmap. Any particular room may be selected and highlighted without creating a new bitmap.

The floor plan consists of three SVG graphic files: title.svg, info.svg, and either EastFloorPlan.svg or WestFloorPlan.svg. In the previous example, title.svg displays a string that reads "15th Floor, East Tower, San Jose", but JavaScript is used to determine what floor, building, and location to display for a specific situation. (In this demo, most of the JavaScript code is in the file arrays.js. Actions brought about as a result of mouse movement and clicking are also defined in JavaScript functions.) info.svg is displayed at the bottom of the window, and it shows text describing a specific conference room or occupant of an office.

EastFloorPlan.svg and WestFloorPlan.svg display their respective conference rooms, offices, break areas, bathrooms, elevators, and stairs. Each of the two buildings has its own distinctive basic floor plan, and this demo has chosen to use different SVG files for each building. In a single building, most floors are uniform, but there are some exceptions: skybridges connecting the 14th and 15th floors of the two buildings and slightly different floor plans for the 6th, 9th, 16th, 17th, and 18th floors of the West Tower and the 6th and 16th floors of the East Tower. To reuse as much data as possible in these special instances, a set of overlay SVG graphics is defined for display over the ordinary floor pattern. Using overlays is considerably more efficient than using a different SVG graphic or bitmap file to represent every bit of the entire floor.

Conference room and office data, which is different on every floor, is displayed in info.svg. For this demo, the conference room and office data have been put into HTML files in the floorData directory. For example, the file usa.CA-WestTower-12-pdata.html describes conference rooms and offices on the 12th floor of the West Tower and contains the following JavaScript code:

parent.confs = new Array("Gold", "Grand", "Gown", "Ghost", "Good", "Gallop")
...
parent.Rm[6] = new parent.confRm('Gallop', '408-555-1212 ', 'seats 10')
...
parent.Rm[210] = new parent.occupant("Julia Chamberlin%JChamberlin%408-555-1212%Adobe Studio® Marketing")

It is also possible, if not indeed more likely, that a database would maintain this conference room and office data. For an example of SVG integrated with a database, see the Adobe Theater demo.

User Interaction with SVG and JavaScript

The query string of the URL is an indicator of what action needs to be performed. The init() JavaScript function checks for the query string. If the query string is empty, then a floor has not yet been selected, and the default file SJMain.html is loaded. SJMain.html embeds the AdobeBuilding.svg building graphic, which has been created by using Adobe Illustrator. A non-empty query string denotes a floor plan for a particular floor has been requested and may also specify a particular room on that floor.

In the AdobeBuilding.svg building graphic, SVG elements in the imagemaps group support mouse interaction. Path elements have been created to render each floor and to highlight appropriate floors. When the pointer is moved over, moved out of, or clicked on an active floor, a JavaScript function is invoked to navigate to the proper floor plan file (either SJEast.html or SJWest.html), using the id property of the path element to determine which building and which floor to find.

The name of each path element identifies the building and the floor, and the name also forms the basis for other SVG elements. For example, for the w_15 path element, there are elements named w_15_w, w_15_s, w_15_cr, w_15_cl, w_15_b, and w_15_l, which corresponds to west-facing windows, south-facing windows, right-side corner windows, left-side corner windows, windows behind the bridge, and the labelled arrow, respectively. Mouse overs and mouse exits alternately expose and hide these corresponding path elements to highlight a chosen floor.

The elevator panel is a more straightforward way to choose a floor and a building. Along the left side is nav.html, which embeds the SVG file ElevatorPanel.svg. The two buttons, named WestTower and EastTower, inherit the JavaScript functions that handle mouse interaction. Clicking either of the buttons calls the function button() to choose which building you want. button() also populates the elevator buttons to match the floors of the chosen building.

Group <g> elements (named "b06", "b07", "b08", and so on) represent a bank of elevator buttons. When clicked, the elevator buttons also invoke button() to navigate the user to a specific floor plan.

Checking for SVG Viewer Support

The Visual Building demo starts from the file index.html and calls the JavaScript function checkAndGetSVGViewer() (in svgcheck.js) to see if the SVG viewer has been installed. If the viewer hasn't been installed, the user is rerouted to install.html, where he/she will be prompted to download the viewer. This technique is a highly recommended way to ensure the user doesn't have to work too hard to find the viewer. (Also, since JavaScript is required for this demo, index.html also checks to make sure the browser configuration supports it. For example, a warning is sent when trying to run this on Internet Explorer for the Macintosh.)

Frames and SVG

If the SVG viewer is already available, then the user is redirected to frameset.html, where the components of the Visual Building demo are organized into HTML frames. SVG works perfectly fine in HTML frames, although one should generally proceed carefully when working with frames in any circumstance.

The upper frame is banner.html, which contains the predominant SVG banner (banner.svg), an HTML form for submitting search requests, and an SVG graphic for requesting help (help.svg). Two other frames are opened on the right side: main.html and data.html.

Return to demo