Test Store Location of Items using SVG

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Checkout Closed Checkout Open 1 2 3 4 5 6 7 8 9 10 Main Entrance
Your browser does not support SVG!

Click on your product to select it

Your product "Salad Dressing" is located on the right side in aisle 5
To see the product click the link here
This a sample of a test application to help a customer locate items in a large
store.  The code here has been copied from a browser's source after having been
generated by a JSF application.  Much of the SVG code was generated on the
server using a different method than given in section (I) of the Integrating SVG
with AngularJS and JSF page.  The original version is partly functional with
some test data, the display here is only a dummy, and is non-functional.  Some
of the generated code has been edited and formatted for clarity.

This diagram shows the layout of the store with the main entrance at the bottom.
The aisles are numbered and are represented as vertical yellow strips between
the shelves which are red on each side of an aisle.  The black lines represent
the partitions separating the shelves from adjacent aisles.  The sections
outside the first and last aisles are also in yellow, with the associated
shelves in red.  The numbered checkout lanes are below the aisles nearest the
main entrance, with green showing a lane that is open and red showing one that
is closed.  On initialization, the number of aisles and checkout lanes can be
specified, together with the number of products per aisle, and the ordering
left to right or right to left of the aisles and checkout lanes can also be
specified.  Note that some simple code was written to make some checkout lanes
open and some closed for demonstration purposes.  A real application should show
which lanes are open and which are closed based on the status of the cash
registers in the checkout lanes.
When an item is selected from the menu, a flashing green triangle shows its
location on the plan (not shown here), and its location is also indicated to the 
right of the menu (a dummy example for salad dressing is shown here).  In some
cases a link is given for an image of the product, which is displayed by
clicking the "here" link (non-functional here).

A more advanced application should be able to show items around the sides of the
store, and at other locations, and have variable numbers of items per aisle.
Such an application should of course know where items are located in the store,
and be updated each time shelves are restocked or rearranged.
Click here to return to the SVG/AngularJS/JSF integration page.

Click here to return to the main selection page.