Molten Llama fucked around with this message at 07:53 on Jul 30, 2014

<script>

// JSON Start Locations config
// Each path should contain the full list of Destinations
var startLocations = [
    "Main.Lobby": {
        
        name: "Main Lobby",
        path: "/kiosk/maps/ntheater/",
    },
    "South.Theater": {
        name: "South Theatre",
        path: "/kiosk/maps/stheater/",
    },
    "North.Theater": {
        name: "North Theatre"
        path: "/kiosk/maps/ntheater/",
    }
];

// JSON Destinations Config
// Each folder from StartLocations should have these destinations.
var destinations = [
    "cafeteria": {
       name: "Cateteria",
       path: "cafeteria.png"
    },
    "toilets": {
       name: "Toilets",
       path: "toilets.png"
    }
];
</script>

<!-- The only HTML you didn't mention was the iFrame. Here it is. 
     Side note: You're just pointing to an image (not a page) so is it necessary to use an iFrame? Why not just an img? -->
<div>
   <iframe id="MyCoolIframe"></iframe>
</div>

<script>
/**
 * Get the route URL from the given kiosk_name and destination_name
 * I'm assuming these get defined (picked) by the user, or something.
 * @param string kiosk_name         Should match "startLocations.x"
 * @param string destination_name   Should match "destinations.x"
 * @return string|false
 */
function createRouteUrl(kiosk_name, destination_name) {

    // Resolve locations
    var start = startLocations[kiosk_name];
    var dest = destinations[destination];

    // Validate: Does start location NOT exist?
    if (start === undefined) {
        // TODO: Consider doing this a better way. Modal? Noty?
        alert('Selected start location does not exist');
        return false;
    }

    // Validate: Does end location NOT exist?
    if (dest === undefined) {
        // TODO: Consider doing this in a better way. Modal? Noty?
        alert('Selected destination does not exist');
        return false;
    }

    // Generate URL
    return start.path + dest.path;
}


/**
 * Change the target location of the iFrame based on kiosk_name and destination_name
 * @param string kiosk_name         Should match "startLocations.x"
 * @param string destination_name   Should match "destinations.x"
 */
function changeMap(kiosk_name, destination_name) {

    // Fetch URL
    var url = createRouteUrl(kiosk_name, destination_name);

    // Validate: URL returned should be non-false. False indicates a cock-up.
    if (url === false) {
        // Do nothing else on error.
        return;
    }

    // Change iFrame src attribute
    $('#MyCoolIframe').attr('src', url);
}

// TODO: Something (user interaction?) should trigger this:
// (this is just a jquery wrapper to fire this on document.ready)
$(function() {

    // Everybody poops
    changeMap("Main.Lobby", "toilets");

});

</script>

v1nce fucked around with this message at 00:31 on Jul 31, 2014

Pollyanna fucked around with this message at 22:27 on Aug 1, 2014