Created
December 10, 2017 21:38
-
-
Save sriharrsha/13946bbded76fdd4a8aa41d37c13eaa6 to your computer and use it in GitHub Desktop.
Open Layer tile with googleMaps implementation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>C3STEM - INSTITUTE FOR SOFTWARE INTEGRATED SYSTEMS</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <link href="Styles/Main.css" rel="stylesheet" type="text/css" /> | |
| <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/cupertino/jquery-ui.css" /> | |
| <link rel="stylesheet" type="text/css" media="screen" href="Tools/jqGrid-4.6.0/css/ui.jqgrid.css" /> | |
| <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAc6WbHRRh5N7_g1lBzkatUZ138uMuI5io&sensor=false"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> | |
| <script type="text/javascript" src="https://www.google.com/jsapi"></script> | |
| <script type="text/javascript" src="Tools/jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script> | |
| <script type="text/javascript" src="Tools/jqGrid-4.6.0/js/jquery.jqGrid.min.js"></script> | |
| <script type="text/javascript" src="Tools/spin.min.js"></script> | |
| <script type="text/javascript" src="Tools/jquery.spin.js"></script> | |
| <script type="text/javascript" src="Tools/notify-combined.min.js"></script> | |
| <script type="text/javascript" src="Scripts/XmlUtils.js"></script> | |
| <script type="text/javascript" src="Scripts/Traffic.js"></script> | |
| <script type="text/javascript"> | |
| // Holds all markers on the map | |
| isRunning = false; | |
| isConfigured = false; | |
| isCurrentSimulation = 1; | |
| loadedSimulationId = "-1"; | |
| tempSimulationId = "-1"; | |
| var markersArray = []; | |
| var vehiclesArray = []; | |
| var stopSignArray = []; | |
| var flowPointsArray = []; | |
| var trafficSignalArray = []; | |
| var trafficSignalIconArray = []; | |
| var counter = 0; | |
| var dataFolder = ""; | |
| var intersectionType = "UNPROTECTED"; | |
| var activeUserInfo = null; | |
| // Holds all info windows | |
| var infoWindowArray = new Array(); | |
| // global "map" variable | |
| var map = null; | |
| // Global traffic data xml | |
| var trafficDataXml = null; | |
| // Traffic Signal data xml | |
| var trafficSignalDataXml = null; | |
| // Actual problem student is working on | |
| var actualProblemID = 1; | |
| // Next problem set on Set Problem form | |
| var nextProblemID = -1; | |
| /* Load Google Charts*/ | |
| google.load("visualization", "1", { | |
| packages: ["corechart", "table"] | |
| }); | |
| // A function to create the marker and set up the event window function | |
| function createMarker(id, latlng, infohtml, icn) { | |
| if (!this.markersArray[id]) { | |
| this.markersArray[id] = []; | |
| this.markersArray[id][0] = new google.maps.Marker({ | |
| position: latlng, | |
| map: map, | |
| zIndex: Math.round(latlng.lat() * -100000) << 5, | |
| icon: icn | |
| }); | |
| this.markersArray[id][1] = this.bindInfoWindow(this.markersArray[id][0], this.map, infohtml); | |
| } | |
| if (latlng != "") { | |
| this.markersArray[id][0].setPosition(latlng); | |
| } | |
| if (icn != "") { | |
| this.markersArray[id][0].setIcon(icn); | |
| } | |
| } | |
| function createFlowPoints(id, latlng, infohtml, icn, point_name, intersection_id) { | |
| if (!this.flowPointsArray[id]) { | |
| this.flowPointsArray[id] = []; | |
| this.flowPointsArray[id][0] = new google.maps.Marker({ | |
| position: latlng, | |
| map: map, | |
| zIndex: Math.round(latlng.lat() * -100000) << 5, | |
| icon: icn | |
| }); | |
| //this.flowPointsArray[id][1] = this.bindInfoWindow(this.flowPointsArray[id][0], this.map, infohtml); | |
| google.maps.event.addListener(flowPointsArray[id][0], 'click', function (event) { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| $("#defineFlow").dialog('option', 'title', "Point " + point_name.substring(0, 1)); | |
| $("#txt_point_name").val(point_name); | |
| $("#getFlowForm").submit(); | |
| // In collaboration mode disable update button of others intersections | |
| if ($("#hdnAssociatedJunctions").val().indexOf(intersection_id) == -1) { | |
| $("#defineFlow_UpdateButton").hide(); //.prop('disabled', true); | |
| } | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| } | |
| } | |
| // A function to create the marker and set up the event window function | |
| function createStopSign(id, latlng, infohtml, icn) { | |
| if (!this.stopSignArray[id]) { | |
| this.stopSignArray[id] = []; | |
| this.stopSignArray[id][0] = new google.maps.Marker({ | |
| position: latlng, | |
| map: map, | |
| zIndex: Math.round(latlng.lat() * -100000) << 5, | |
| icon: icn | |
| }); | |
| this.stopSignArray[id][1] = this.bindInfoWindow(this.stopSignArray[id][0], this.map, infohtml); | |
| } | |
| } | |
| // A function to create the marker and set up the event window function | |
| function createVehicleMarker(id, latlng, infohtml, icn) { | |
| if (!this.vehiclesArray[id]) { | |
| this.vehiclesArray[id] = []; | |
| this.vehiclesArray[id][0] = new google.maps.Marker({ | |
| position: latlng, | |
| map: map, | |
| zIndex: Math.round(latlng.lat() * -100000) << 5, | |
| icon: icn | |
| }); | |
| this.vehiclesArray[id][1] = this.bindInfoWindow(this.vehiclesArray[id][0], this.map, infohtml); | |
| } | |
| this.vehiclesArray[id][2] = counter; | |
| if (latlng != "") { | |
| this.vehiclesArray[id][0].setPosition(latlng); | |
| } | |
| if (icn != "") { | |
| this.vehiclesArray[id][0].setIcon(icn); | |
| } | |
| } | |
| function bindInfoWindow(marker, map, html) { | |
| var infowindow = new google.maps.InfoWindow({ | |
| size: new google.maps.Size(150, 50) | |
| }); | |
| google.maps.event.addListener(marker, 'click', function () { | |
| infowindow.setContent(html); | |
| infowindow.open(map, marker); | |
| }); | |
| return infowindow; | |
| } | |
| // Check whetwer a key exist in hashtable | |
| function hasItem(key) { | |
| return typeof (this.markersArray[key]) != 'undefined'; | |
| } | |
| // Remove item from markers array | |
| function removeItem(key) { | |
| var tmpValue; | |
| if (typeof (this.markersArray[key]) != 'undefined') { | |
| this.length--; | |
| var tmpValue = this.markersArray[key]; | |
| delete this.markersArray[key]; | |
| } | |
| return tmpValue; | |
| } | |
| function createTrafficSignal(trafficLightId, imageId, trafficLightLinkIndex, | |
| trafficLightLoc, title, intersectionId, trafficLightState, presentFolder, intersectionTitleName) { | |
| var turnColor; | |
| var trafficLightColor = "#FFFFFF"; | |
| var iconColorName = ""; | |
| switch (trafficLightState) { | |
| case "Green": | |
| trafficLightColor = "#347C17" | |
| iconColorName = "green" | |
| break; | |
| case "Yellow": | |
| trafficLightColor = "#FFA500" | |
| iconColorName = "yellow" | |
| break; | |
| case "Red": | |
| trafficLightColor = "#FF0000" | |
| iconColorName = "red" | |
| break; | |
| } | |
| switch (title) { | |
| case "west_to_north": | |
| case "south_to_west": | |
| case "east_to_south": | |
| case "north_to_east": | |
| turnColor = "#000000" | |
| break; | |
| default: | |
| turnColor = trafficLightColor | |
| } | |
| if (!this.trafficSignalArray[trafficLightId]) { | |
| var populationOptions = { | |
| strokeColor: turnColor, | |
| strokeOpacity: 1, | |
| strokeWeight: 2, | |
| fillColor: trafficLightColor, | |
| fillOpacity: 4, | |
| map: map, | |
| center: trafficLightLoc, | |
| radius: 1, | |
| clickable: true | |
| }; | |
| //var tlight = new google.maps.Circle(populationOptions); | |
| var tlight = new google.maps.Marker({ | |
| position: trafficLightLoc, | |
| map: map, | |
| zIndex: Math.round(trafficLightLoc.lat() * -100000) << 5, | |
| //icon: "/static/Images/" + iconColorName + "0" + imageId + ".png", | |
| icon: "/static/Images/" + imageId + "_" + iconColorName + "_s.gif", | |
| title: "Traffic Light " | |
| }); | |
| //this.trafficSignalIconArray[trafficLightId] = signalIcon; | |
| // In collaboration mode, show the rest of the intersections but disable clicking | |
| if ($("#hdnAssociatedJunctions").val().indexOf(intersectionId) != -1) { | |
| google.maps.event.addListener(tlight, 'click', function (event) { | |
| $("#defineTrafficLight").load('/static/TrafficLight.html', function () { | |
| $("#defineTrafficLight").dialog('option', 'title', intersectionTitleName); | |
| $("#txt_intersection_id").val(intersectionId); | |
| $("#txt_light_index").val(trafficLightLinkIndex); | |
| $("#defineTrafficLight").dialog("open"); | |
| loadTrafficLights(presentFolder); | |
| }); | |
| }); | |
| } | |
| this.trafficSignalArray[trafficLightId] = tlight; | |
| } else { | |
| /*var tlight = this.trafficSignalArray[trafficLightId]; | |
| var populationOptions = { | |
| fillColor: trafficLightColor, | |
| strokeColor: turnColor | |
| }; | |
| tlight.setOptions(populationOptions);*/ | |
| var tlight = this.trafficSignalArray[trafficLightId]; | |
| //signalIcon.setIcon("/static/Images/" + iconColorName + "0" + imageId + ".png"); | |
| tlight.setIcon("/static/Images/" + imageId + "_" + iconColorName + "_s.gif"); | |
| } | |
| } | |
| function PlotVehicles(doc) { | |
| if(doc == "") | |
| return; | |
| this.trafficDataXml = xmlParse(doc); | |
| var sim = this.trafficDataXml.documentElement.getElementsByTagName("sim_execution"); | |
| if (sim.length > 0) { | |
| $("#hidden_sim_duration").val(sim[0].getAttribute("duration")); | |
| var isSimRunning = (sim[0].getAttribute("running") === "true"); | |
| if(isCurrentSimulation) { | |
| if(isSimRunning || isRunning) | |
| $("#btnHideShowButton").button("option", "label", "Time: " + sim[0].getAttribute("duration")); | |
| } | |
| isRunning = isSimRunning; | |
| } | |
| /*Vehicles*/ | |
| var vehicles = this.trafficDataXml.documentElement.getElementsByTagName("vehicle"); | |
| for (var i = 0; i < vehicles.length; i++) { | |
| // obtain the attribues of each marker | |
| var vehId = vehicles[i].getAttribute("id"); | |
| var vehLat = parseFloat(vehicles[i].getAttribute("lat")); | |
| var vehLng = parseFloat(vehicles[i].getAttribute("lng")); | |
| var vehLoc = new google.maps.LatLng(vehLat, vehLng); | |
| var type = vehicles[i].getAttribute("type"); | |
| var icon = "/static/Images/car.png"; | |
| switch (type) { | |
| case "Bus": | |
| icon = "/static/Images/bus.png"; | |
| break; | |
| case "Truck": | |
| icon = "/static/Images/truck.png"; | |
| break; | |
| } | |
| // create the vehicles on map | |
| this.createVehicleMarker(vehId, vehLoc, "", icon); | |
| } | |
| tempArray = []; | |
| $.extend(tempArray, this.vehiclesArray); | |
| for (var id in tempArray) { | |
| if (tempArray[id][2] != this.counter) { | |
| this.vehiclesArray[id][0].setMap(null); | |
| delete this.vehiclesArray[id]; | |
| } | |
| } | |
| this.counter++; | |
| } | |
| function updateIntersection(intersectionType) { | |
| if(intersectionType == "TRAFFIC_SIGNAL") { | |
| tempArray = []; | |
| $.extend(tempArray, this.stopSignArray); | |
| for (var id in tempArray) { | |
| this.stopSignArray[id][0].setMap(null); | |
| delete this.stopSignArray[id]; | |
| } | |
| downloadUrl("/static/Data/" + dataFolder + "/TrafficSignalData.xml?r=" + Math.random(), plotSignals); | |
| } | |
| else if(intersectionType == "STOP_SIGN") { | |
| tempArray = []; | |
| $.extend(tempArray, this.trafficSignalArray); | |
| for (var id in tempArray) { | |
| this.trafficSignalArray[id].setMap(null); | |
| delete this.trafficSignalArray[id]; | |
| } | |
| downloadUrl("/static/Data/" + dataFolder + "/StopSignData.xml?r=" + Math.random(), plotStopSigns); | |
| } else { | |
| tempArray = []; | |
| $.extend(tempArray, this.stopSignArray); | |
| for (var id in tempArray) { | |
| this.stopSignArray[id][0].setMap(null); | |
| delete this.stopSignArray[id]; | |
| } | |
| tempArray = []; | |
| $.extend(tempArray, this.trafficSignalArray); | |
| for (var id in tempArray) { | |
| this.trafficSignalArray[id].setMap(null); | |
| delete this.trafficSignalArray[id]; | |
| } | |
| } | |
| } | |
| function plotSignals(doc) { | |
| /*Traffic Lights*/ | |
| this.trafficSignalDataXml = xmlParse(doc); | |
| var trafficLights = this.trafficSignalDataXml.documentElement.getElementsByTagName("trafficlight"); | |
| var containingClass = this; | |
| $.each(trafficLights, function (i, trafficLight) { | |
| var trafficLightId = trafficLights[i].getAttribute("id"); | |
| var imageId = trafficLights[i].getAttribute("img_id"); | |
| var intersectionId = trafficLights[i].getAttribute("intersection_id"); | |
| var trafficLightName = trafficLights[i].getAttribute("name"); | |
| var intersectionTitleName = trafficLights[i].getAttribute("intersection_desc"); | |
| // In group mode, show only the associated intersection | |
| // In collaboration mode, show the rest of the intersections but disable clicking | |
| if (mode != "COLAB") { | |
| if ($("#hdnAssociatedJunctions").val().indexOf(intersectionId) == -1) | |
| return true; | |
| } | |
| var trafficLightState = trafficLights[i].getAttribute("state"); | |
| var trafficLightLinkIndex = trafficLights[i].getAttribute("link_index"); | |
| var trafficLightLat = parseFloat(trafficLights[i].getAttribute("lat")); | |
| var trafficLightLng = parseFloat(trafficLights[i].getAttribute("lng")); | |
| var trafficLightLoc = new google.maps.LatLng(trafficLightLat, trafficLightLng); | |
| containingClass.createTrafficSignal(trafficLightId, imageId, trafficLightLinkIndex, trafficLightLoc, | |
| trafficLightName, intersectionId, trafficLightState, dataFolder, intersectionTitleName); | |
| }); | |
| } | |
| function plotStopSigns(doc) { | |
| data = xmlParse(doc); | |
| var stopSigns = data.documentElement.getElementsByTagName("stopsign"); | |
| var containingClass = this; | |
| $.each(stopSigns, function (i, stopSign) { | |
| var stopSignId = "stopsign-" + stopSigns[i].getAttribute("id"); | |
| var intersectionId = stopSigns[i].getAttribute("intersection_id"); | |
| // In group mode, show only the associated intersection | |
| // In collaboration mode, show the rest of the intersections but disable clicking | |
| if (mode != "COLAB") { | |
| if ($("#hdnAssociatedJunctions").val().indexOf(intersectionId) == -1) | |
| return true; | |
| } | |
| var lat = parseFloat(stopSigns[i].getAttribute("lat")); | |
| var lng = parseFloat(stopSigns[i].getAttribute("lng")); | |
| var loc = new google.maps.LatLng(lat, lng); | |
| var icon = "/static/Images/stop.png"; | |
| containingClass.createStopSign(stopSignId, loc, "", icon); | |
| }); | |
| } | |
| function PlotPoints() { | |
| try { | |
| downloadUrl("/static/Data/" + dataFolder + "/TrafficData.xml?r=" + Math.random(), PlotVehicles); | |
| if(intersectionType == "TRAFFIC_SIGNAL") | |
| downloadUrl("/static/Data/" + dataFolder + "/TrafficSignalData.xml?r=" + Math.random(), plotSignals); | |
| // Reload status of groups | |
| //$('#groupCollaborationStatus').setGridParam({ page: 1, datatype: "json" }).trigger('reloadGrid'); | |
| if (isRunning) | |
| setTimeout("PlotPoints()", 500); | |
| else | |
| setTimeout("PlotPoints()", 2000); | |
| } catch (err) { | |
| alert(err.description); | |
| } | |
| } | |
| function ReloadGroupStatus() | |
| { | |
| try { | |
| // Reload status of groups | |
| $('#groupCollaborationStatus').setGridParam({ page: 1, datatype: "json" }).trigger('reloadGrid'); | |
| setTimeout("ReloadGroupStatus()", 8000); | |
| } | |
| catch (err) { | |
| alert(err.description); | |
| } | |
| } | |
| // Create the Google Map to be used. | |
| function loadMap() { | |
| var postdata = {}; | |
| jsonData = $.ajax({ | |
| url: "/getGroupData", | |
| dataType: "json", | |
| async: false, | |
| data: postdata | |
| }).responseText; | |
| try { | |
| data = jQuery.parseJSON(jsonData); | |
| } catch (e) { | |
| $('body').html(jsonData); | |
| } | |
| var lat, lng; | |
| if (data['response']['status'] == "failure") | |
| $.notify("Unauthorized Access", "error"); | |
| else { | |
| var siminfo = data['response']['siminfo']; | |
| this.activeUserInfo = data['response']; | |
| lat = siminfo['latitude']; | |
| lng = siminfo['longitude']; | |
| junctions = siminfo['junctions']; | |
| non_assoc_junctions = siminfo['assoc_junctions']; | |
| mode = siminfo['mode']; | |
| $("#hdnAssociatedJunctions").val(junctions); | |
| $("#hdnNonAssociatedJunctions").val(non_assoc_junctions); | |
| $('#' + 'user_mode_' + mode).prop('checked', true); | |
| loadedSimulationId = data['response']['sim_id']; | |
| $("#logged_user").text("User: " + data['response']['firstname'] + " " + data['response']['lastname']); | |
| $("#group_name").text("Group: " + data['response']['groupname']); | |
| if (data['response']['sim_folder'] != 'NONE') | |
| dataFolder = data['response']['sim_folder']; | |
| else | |
| dataFolder = ""; | |
| actualProblemID = data['response']['problem_id']; | |
| $("#btnProblemID").button("option", "label", "P" + actualProblemID); | |
| intersectionType = data['response']['problem_type']; | |
| } | |
| var mapOptions = { | |
| center: new google.maps.LatLng(lat, lng), | |
| mapTypeId: "OSM", | |
| zoom: 20, | |
| mapTypeControl: true, | |
| mapTypeControlOptions: { | |
| style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, | |
| position: google.maps.ControlPosition.TOP_RIGHT | |
| }, | |
| panControl: true, | |
| panControlOptions: { | |
| position: google.maps.ControlPosition.RIGHT_TOP | |
| }, | |
| zoomControl: true, | |
| zoomControlOptions: { | |
| style: google.maps.ZoomControlStyle.LARGE, | |
| position: google.maps.ControlPosition.RIGHT_TOP | |
| }, | |
| scaleControl: true, | |
| scaleControlOptions: { | |
| position: google.maps.ControlPosition.RIGHT_BOTTOM | |
| }, | |
| streetViewControl: true, | |
| streetViewControlOptions: { | |
| position: google.maps.ControlPosition.RIGHT_TOP | |
| } | |
| }; | |
| this.map = new google.maps.Map(document.getElementById("map"), mapOptions); | |
| //Define OSM map type pointing at the OpenStreetMap tile server | |
| this.map.mapTypes.set("OSM", new google.maps.ImageMapType({ | |
| getTileUrl: function(coord, zoom) { | |
| // "Wrap" x (logitude) at 180th meridian properly | |
| // NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib | |
| var tilesPerGlobe = 1 << zoom; | |
| var x = coord.x % tilesPerGlobe; | |
| if (x < 0) { | |
| x = tilesPerGlobe+x; | |
| } | |
| // Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll | |
| return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png"; | |
| }, | |
| tileSize: new google.maps.Size(256, 256), | |
| name: "OpenStreetMap", | |
| maxZoom: 18 | |
| })); | |
| // create the speed signs on map | |
| //$("#hdnSpeedSignId").val("speedsign_0"); | |
| //this.createMarker("speedsign_0", new google.maps.LatLng(36.138915, -86.812), document.getElementById("infoWindowCustom"), "./Images/speed_40.png"); | |
| google.maps.event.addListener(this.map, "rightclick", function (event) { | |
| var lat = event.latLng.lat(); | |
| var lng = event.latLng.lng(); | |
| alert("lat=\"" + lat + "\" lng=\"" + lng + "\"") | |
| }); | |
| // update here with intersection type | |
| updateIntersection(intersectionType); | |
| downloadUrl("/static/Data/DetectorData.xml?r=" + Math.random(), function (doc) { | |
| this.DetectorDataXml = xmlParse(doc); | |
| /*Induction Loop Sensors*/ | |
| var detectors = this.DetectorDataXml.documentElement.getElementsByTagName("detector"); | |
| $.each(detectors, function (i, detector) { | |
| var detectorId = detectors[i].getAttribute("id"); | |
| var idparts = detectorId.split("!"); | |
| var intersectionId = idparts[1]; | |
| if (mode != "COLAB") { | |
| if ($("#hdnAssociatedJunctions").val().indexOf(intersectionId) == -1) | |
| return true; | |
| } | |
| var detectorLat = parseFloat(detectors[i].getAttribute("lat")); | |
| var detectorLng = parseFloat(detectors[i].getAttribute("lng")); | |
| var type = detectors[i].getAttribute("type"); | |
| var detectorLoc = new google.maps.LatLng(detectorLat, detectorLng); | |
| var iconImage; | |
| switch (idparts[0]) { | |
| case "east_lane_in": | |
| case "west_lane_out": | |
| iconImage = "https://www.google.com/mapfiles/west.png" | |
| break; | |
| case "west_lane_in": | |
| case "east_lane_out": | |
| iconImage = "https://www.google.com/mapfiles/east.png" | |
| break; | |
| case "south_lane_in": | |
| case "north_lane_out": | |
| iconImage = "https://www.google.com/mapfiles/north.png" | |
| break; | |
| default: | |
| iconImage = "https://www.google.com/mapfiles/south.png" | |
| } | |
| var marker = new google.maps.Marker({ | |
| position: detectorLoc, | |
| map: map, | |
| zIndex: Math.round(detectorLoc.lat() * -100000) << 5, | |
| icon: iconImage, | |
| title: idparts[0] | |
| }); | |
| marker.type = type; | |
| google.maps.event.addListener(marker, 'click', function (event) { | |
| $("#inductionLoopDialog").dialog('option', 'title', marker.title); | |
| drawInductionLoopWindow(detectorId, marker.type); | |
| $("#inductionLoopDialog").dialog("open"); | |
| }); | |
| if (idparts[2] != "no-id") { | |
| if ($("#hdnAssociatedJunctions").val().indexOf(intersectionId) != -1) { | |
| google.maps.event.addListener(marker, 'rightclick', function (event) { | |
| $("#defineTurnProbability").load('/static/TurnProbability.html', function () { | |
| $("#defineTurnProbability").dialog('option', 'title', idparts[0]); | |
| $("#txt_edge_id").val(idparts[2]); | |
| $("#getTurnProbabilityForm").submit(); | |
| $("#defineTurnProbability").dialog("open"); | |
| }); | |
| }); | |
| } | |
| } | |
| }); | |
| }); | |
| /* | |
| RealAllFlows | |
| */ | |
| loadAllFlowPoints(); | |
| /* | |
| downloadUrl("/static/Data/FlowData.xml?r=" + Math.random(), function (doc) { | |
| this.flowDataXml = xmlParse(doc); | |
| var flows = this.flowDataXml.documentElement.getElementsByTagName("flow"); | |
| $.each(flows, function (i, flow) { | |
| var flowId = flows[i].getAttribute("id"); | |
| var name = flows[i].getAttribute("name"); | |
| var flowLat = parseFloat(flows[i].getAttribute("lat")); | |
| var flowLng = parseFloat(flows[i].getAttribute("lng")); | |
| var edgeId = flows[i].getAttribute("edge_id"); | |
| var flowLoc = new google.maps.LatLng(flowLat, flowLng); | |
| var marker = new google.maps.Marker({ | |
| position: flowLoc, | |
| map: map, | |
| zIndex: Math.round(flowLoc.lat() * -100000) << 5, | |
| icon: "https://maps.google.com/mapfiles/marker" + flowId.substring(flowId.length - 1, flowId.length) + ".png", | |
| title: name | |
| }); | |
| google.maps.event.addListener(marker, 'click', function (event) { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| $("#defineFlow").dialog('option', 'title', name); | |
| $("#txt_edge_id").val(edgeId); | |
| $("#getFlowForm").submit(); | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| }); | |
| });*/ | |
| // Collaboration Mode | |
| loadGroupsStatus(); | |
| PlotPoints(); | |
| // Timer for Reload grid | |
| ReloadGroupStatus(); | |
| } | |
| function handleresponse(data) { | |
| if (typeof data == 'object') { | |
| if (data['response'] == "failure") | |
| $.notify("Unauthorized Access", "error"); | |
| else | |
| $.notify("Operation performed", "info"); | |
| } else | |
| $('body').html(data); | |
| } | |
| var spinner = new Spinner(); | |
| function handlestartresponse(data) { | |
| if (typeof data == 'object') { | |
| if (data['response'] == "failure") | |
| $.notify("Unauthorized Access", "error"); | |
| else if (data['response'] == "notavailable") | |
| $.notify("Simulation platform not available, please wait for some time or stop an existing simulation..", "warn"); | |
| else { | |
| dataFolder = data['response']; | |
| $('#startSim').notify('Starting Simulation ...', 'info', { position:"center" }); | |
| $('#progressbar').after(spinner.spin().el); | |
| checkStartStatus(); | |
| } | |
| } else | |
| $('body').html(data); | |
| } | |
| function checkStartStatus() { | |
| var jsonData; | |
| var postdata = {}; | |
| var responseData = $.ajax({ | |
| url: "/checkStartStatus", | |
| dataType: "json", | |
| async: false, | |
| data: postdata | |
| }).responseText; | |
| try { | |
| jsonData = jQuery.parseJSON(responseData); | |
| } catch (e) { | |
| spinner.spin(false); | |
| $('#startSim').notify("Something went wrong!", "error"); | |
| return; | |
| } | |
| if (jsonData['response'] == 'NOT_RUNNING') { | |
| spinner.spin(false); | |
| $('#startSim').notify("Simulation did not start!", "error"); | |
| return; | |
| } else if (jsonData['response'] == 'CONFIGURED') { | |
| if (!isConfigured) { | |
| $('#startSim').notify("Simulation Configured", "info"); | |
| isConfigured = true; | |
| } | |
| } else if (jsonData['response'] == 'RUNNING') { | |
| spinner.spin(false); | |
| $('#startSim').notify("Simulation started", "success"); | |
| isConfigured = false; | |
| return; | |
| } | |
| setTimeout("checkStartStatus()", 1000); | |
| } | |
| function handlesetmoderesponse(data) { | |
| if (typeof data == 'object') { | |
| if (data['response'] == "failure") | |
| $.notify("Unauthorized Access", "error"); | |
| else if (data['response'] != "notavailable") { | |
| dataFolder = data['response']['sim_folder']; | |
| loadedSimulationId = data['response']['sim_id']; | |
| location.reload(); | |
| } | |
| } else | |
| $('body').html(data); | |
| } | |
| function drawChart() { | |
| /* | |
| if (isCurrentSimulation && ($("#hidden_sim_duration").val() <= 0)) { | |
| $("#vehicleChart").text("Please run the simulation first."); | |
| return; | |
| }*/ | |
| var postdata = { | |
| sim_id: loadedSimulationId | |
| }; | |
| var jsonData; | |
| var responseData = $.ajax({ | |
| url: "/getVehicleResult", | |
| dataType: "json", | |
| async: false, | |
| data: postdata | |
| }).responseText; | |
| try { | |
| jsonData = jQuery.parseJSON(responseData); | |
| } catch (e) { | |
| $('body').html(responseData); | |
| return; | |
| } | |
| if (jsonData['response']['status'] == 'notloaded') { | |
| $("#vehicleChart").text("Please wait till simulation completes and results are loaded."); | |
| } else if (jsonData['response']['status'] == 'nosimexec') { | |
| $("#vehicleChart").text("Please run the simulation first."); | |
| } else { | |
| $("#simulationResultDialog").dialog('option', 'title', "Simulation Result: Duration=" + jsonData['response']['steps'] + " s"); | |
| var data = new google.visualization.DataTable(jsonData['response']['resultdata']); | |
| var table = new google.visualization.Table(document.getElementById('vehicleChart')); | |
| table.draw(data, { | |
| showRowNumber: true | |
| }); | |
| } | |
| } | |
| function drawInductionLoopWindow(id, type) { | |
| $("#hdnInductionId").val(id); | |
| $("#hdnInductionType").val(type); | |
| $("#selectInductionChart").children("option[value='queue']").remove(); | |
| if (type == "in") { | |
| $("#selectInductionChart").append('<option value="queue">Queue Chart</option>'); | |
| } | |
| $("#selectInductionChart").children("option[value='data_table']").prop('selected', true); | |
| drawInductionLoopChart(); | |
| } | |
| function drawInductionLoopChart() { | |
| var postdata = { | |
| sim_id: loadedSimulationId, | |
| loop_id: $("#hdnInductionId").val() | |
| }; | |
| var jsonData; | |
| if ($("#selectInductionChart").val() == "data_table") { | |
| $("#inductionLoopChart").hide(); | |
| $("#queueChart").hide(); | |
| var responseData = $.ajax({ | |
| url: "/getInductionDataTable", | |
| dataType: "json", | |
| async: false, | |
| data: postdata | |
| }).responseText; | |
| try { | |
| jsonData = jQuery.parseJSON(responseData); | |
| } catch (e) { | |
| $('body').html(jsonData); | |
| return; | |
| } | |
| if (jsonData['response']['status'] == 'notloaded') { | |
| $("#vehicleChart").text("Please wait till simulation completes and results are loaded."); | |
| } else if (jsonData['response']['status'] == 'nosimexec') { | |
| $("#vehicleChart").text("Please run the simulation first."); | |
| } else { | |
| var data = new google.visualization.DataTable(jsonData['response']['resultdata']); | |
| var table = new google.visualization.Table(document.getElementById('inductionDataTable')); | |
| table.draw(data, { | |
| showRowNumber: false | |
| }); | |
| } | |
| $("#inductionDataTable").show(); | |
| } else if ($("#selectInductionChart").val() == "queue") { | |
| var responseData = $.ajax({ | |
| url: "/getQueueResult", | |
| dataType: "json", | |
| async: false, | |
| data: postdata | |
| }).responseText; | |
| try { | |
| jsonData = jQuery.parseJSON(responseData); | |
| } catch (e) { | |
| $('body').html(jsonData); | |
| return; | |
| } | |
| if (jsonData['response']['status'] == 'notloaded') { | |
| $("#vehicleChart").text("Please wait till simulation completes and results are loaded."); | |
| } else if (jsonData['response']['status'] == 'nosimexec') { | |
| $("#vehicleChart").text("Please run the simulation first."); | |
| } else { | |
| var data = new google.visualization.DataTable(jsonData['response']['resultdata']['chart_data']); | |
| var options = { | |
| legend: 'none', | |
| titleX: 'Time in secs since Simulation Start', | |
| titleY: 'Queue length in feet', | |
| 'width':1000, | |
| 'height':500, | |
| pointSize: 1, | |
| interpolateNulls: true, | |
| hAxis: { | |
| minValue: 0, | |
| maxValue: jsonData['response']['resultdata']['steps'] | |
| } | |
| }; | |
| var chart = new google.visualization.LineChart(document.getElementById('queueChart')); | |
| chart.draw(data, options); | |
| } | |
| $("#inductionDataTable").hide(); | |
| $("#inductionLoopChart").hide(); | |
| $("#queueChart").show(); | |
| } else { | |
| var flow_rate_agg = 50; | |
| if ($("#selectInductionChart").val() == 'flow_rate_10') | |
| flow_rate_agg = 10; | |
| postdata = { | |
| sim_id: loadedSimulationId, | |
| loop_id: $("#hdnInductionId").val(), | |
| flow_rate_agg :flow_rate_agg | |
| }; | |
| var responseData = $.ajax({ | |
| url: "/getInductinLoopResult", | |
| dataType: "json", | |
| async: false, | |
| data: postdata | |
| }).responseText; | |
| try { | |
| jsonData = jQuery.parseJSON(responseData); | |
| } catch (e) { | |
| $('body').html(jsonData); | |
| return; | |
| } | |
| if (jsonData['response']['status'] == 'notloaded') { | |
| $("#vehicleChart").text("Please wait till simulation completes and results are loaded."); | |
| } else if (jsonData['response']['status'] == 'nosimexec') { | |
| $("#vehicleChart").text("Please run the simulation first."); | |
| } else { | |
| var data = new google.visualization.DataTable(jsonData['response']['resultdata']['chart_data']); | |
| title_y = 'Number of Vehicles aggregated at ' + flow_rate_agg + ' secs'; | |
| var options = { | |
| titleX: 'Time in secs since Simulation Start', | |
| titleY: title_y, | |
| 'width':1000, | |
| 'height':500, | |
| pointSize: 1, | |
| interpolateNulls: true, | |
| hAxis: { | |
| minValue: 0, | |
| maxValue: jsonData['response']['resultdata']['steps'] | |
| } | |
| }; | |
| var chart = new google.visualization.LineChart(document.getElementById('inductionLoopChart')); | |
| chart.draw(data, options); | |
| } | |
| $("#queueChart").hide(); | |
| $("#inductionDataTable").hide(); | |
| $("#inductionLoopChart").show(); | |
| } | |
| } | |
| function loadAllFlowPoints() { | |
| var postdata = {}; | |
| var containingClass = this; | |
| // Delete all points first | |
| for (var id in this.flowPointsArray) { | |
| this.flowPointsArray[id][0].setMap(null); | |
| delete this.flowPointsArray[id]; | |
| } | |
| jsonData = $.ajax({ | |
| url: "/readAllFlows", | |
| dataType: "json", | |
| async: false, | |
| data: postdata | |
| }).responseText; | |
| try { | |
| data = jQuery.parseJSON(jsonData); | |
| } catch (e) { | |
| $('body').html(jsonData); | |
| } | |
| if (data['response']['status'] == "failure") { | |
| $.notify("Unauthorized Access", "error"); | |
| } | |
| else { | |
| var flows = data['response']['flows']; | |
| $.each(flows, function (i, flow) { | |
| var flow_id = flow["id"]; | |
| var simulation_id = flow["simulation_id"]; | |
| var point_name = flow["point_name"]; | |
| var intersection_id = flow["intersection_id"]; | |
| var flow_latitude = parseFloat(flow["latitude"]); | |
| var flow_longitude = parseFloat(flow["longitude"]); | |
| var flow_rate = flow["flow_rate"]; | |
| var flow_location = new google.maps.LatLng(flow_latitude, flow_longitude); | |
| var icn = "https://maps.google.com/mapfiles/marker" + point_name.substring(0, 1) + ".png"; | |
| containingClass.createFlowPoints(flow_id, flow_location, "", icn, point_name, intersection_id); | |
| /*var marker = new google.maps.Marker({ | |
| position: flow_location, | |
| map: map, | |
| zIndex: Math.round(flow_location.lat() * -100000) << 5, | |
| icon: "https://maps.google.com/mapfiles/marker" + point_name.substring(0, 1) + ".png", | |
| title: point_name | |
| }); | |
| google.maps.event.addListener(marker, 'click', function (event) { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| $("#defineFlow").dialog('option', 'title', "Point " + point_name.substring(0, 1)); | |
| $("#txt_point_name").val(point_name); | |
| $("#getFlowForm").submit(); | |
| // In collaboration mode disable update button of others intersections | |
| if ($("#hdnAssociatedJunctions").val().indexOf(intersection_id) == -1) { | |
| $("#defineFlow_UpdateButton").hide(); //.prop('disabled', true); | |
| } | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| });*/ | |
| }); | |
| } | |
| } | |
| function grpStatusImageFormatter(cellvalue, options, rowObject) | |
| { | |
| var html = "<img src=\"Images/"+cellvalue+"-icon.png\">"; | |
| return html; | |
| } | |
| function grpNameFormatter(cellvalue, options, rowObject) | |
| { | |
| var linkHref = rowObject[3] + "&host_name=" + $(location).attr('hostname') + "&user_name=" + window.activeUserInfo['username'] + "&problem_id=" + window.activeUserInfo['siminfo']['problem_id']; | |
| var html = "<a href=\"javascript:void(0)\" onclick=\"window.open('"+linkHref+"', '_blank')\">"+cellvalue+"</a>"; | |
| return html; | |
| } | |
| function loadGroupsStatus() { | |
| jQuery("#groupCollaborationStatus").jqGrid({ | |
| url: '/getGroupStatusAll', | |
| datatype: "json", | |
| width: 175, | |
| height: 300, | |
| colNames: ['ID', 'Group Status', 'Group Name', 'coll_url'], | |
| colModel: [ | |
| { name: 'id', index: 'id', sortable: false, editable: false, editoptions:{readonly:true}, hidden:true}, | |
| { name: 'grp_status', index: 'grp_status', width: 70, formatter:grpStatusImageFormatter, sortable: false, editable: false, editoptions:{readonly:true}, hidden:false}, | |
| { name: 'group_name', index: 'group_name', width: 150, formatter:grpNameFormatter, sortable: true, editable: false, editoptions:{readonly:true}, hidden:false}, | |
| { name: 'coll_url', index: 'coll_url', sortable: false, editable: false, editoptions:{readonly:true}, hidden:true} | |
| ], | |
| multiselect: false, | |
| viewrecords: true, | |
| pager: '#lightNavBar', | |
| caption: "Collaboration", | |
| loadui: 'disable', | |
| sortname: 'group_name', | |
| sortorder: 'asc', | |
| rowNum: 125, | |
| jsonReader: { | |
| root: 'groups', | |
| id: "id", | |
| page: function(obj) { return 1; }, | |
| total: function(obj) { return 1; }, | |
| records: function(obj) {return obj.groups.length; } | |
| }, | |
| }); | |
| $('.ui-jqgrid-hdiv').hide(); | |
| $(".ui-jqgrid-titlebar").hide(); | |
| } | |
| $(function () { | |
| var icons = { | |
| header: "ui-icon-circle-arrow-e", | |
| activeHeader: "ui-icon-circle-arrow-s" | |
| }; | |
| $("#Accordion").accordion({ | |
| icons: icons, | |
| collapsible: true | |
| }); | |
| document.oncontextmenu = function () { return false; }; | |
| $("input[type=submit], button") | |
| .button() | |
| $("#btnHideShowButton").button({ | |
| icons: { | |
| primary: "ui-icon-scissors" | |
| } | |
| }); | |
| $("#btnHideShowButton").click(function () { | |
| $("#LeftMenuBottomPanel").fadeToggle("slow"); | |
| }); | |
| $("#startSim").click(function () { | |
| if (isCurrentSimulation) { | |
| var resp = {}; | |
| $.post('/startSimulation', resp, function (data) { | |
| handlestartresponse(data); | |
| }); | |
| } | |
| return false; | |
| }); | |
| $("#speedupSim").click(function () { | |
| if (isCurrentSimulation) { | |
| var resp = {}; | |
| $.post('/speedupSimulation', resp, function (data) { | |
| handleresponse(data); | |
| }); | |
| } | |
| return false; | |
| }); | |
| $("#finishSim").click(function () { | |
| if (isCurrentSimulation) { | |
| var resp = {}; | |
| $.post('/finishSimulation', resp, function (data) { | |
| handleresponse(data); | |
| }); | |
| } | |
| return false; | |
| }); | |
| $("#restoreSim").click(function () { | |
| if (isCurrentSimulation) { | |
| var resp = {}; | |
| $.post('/restoreSimulationRate', resp, function (data) { | |
| handleresponse(data); | |
| }); | |
| } | |
| return false; | |
| }); | |
| $("#setmode_content input[name='user_mode']").click(function () { | |
| var postdata = { | |
| user_mode: $('input:radio[name=user_mode]:checked').val() | |
| }; | |
| $.post('/setMode', postdata, function (data) { | |
| handlesetmoderesponse(data); | |
| }); | |
| }); | |
| $("#viewResult").click(function () { | |
| drawChart(); | |
| $("#simulationResultDialog").dialog("open"); | |
| }); | |
| $("#viewSimulations").click(function () { | |
| $("#defineSimulations").load('/static/SimVersions.html', function () { | |
| $("#defineSimulations").dialog("open"); | |
| }); | |
| }); | |
| $("#defineSimulations").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| title: 'Simulation History', | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: {} | |
| }); | |
| $("#inductionLoopDialog").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| Ok: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#simulationResultDialog").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| Ok: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#opener").click(function () { | |
| $("#inductionLoopDialog").dialog("open"); | |
| }); | |
| $("#defineVehicles").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| title: 'Define Vehicles', | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: {} | |
| }); | |
| $("#defineVehiclesTrigger").click(function () { | |
| $("#defineVehicles").load('/static/Vehicles.html', function () { | |
| $("#defineVehicles").dialog("open"); | |
| }); | |
| }); | |
| $("#defineTurnProbability").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 450, | |
| autoResize: true, | |
| title: 'Define Turn Probability', | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| "Update": function () { | |
| $("#turnProbabilityForm").submit(); | |
| }, | |
| Cancel: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#turnProbabilityMessage").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| title: 'Turning Probability', | |
| resizable: false, | |
| modal: true, | |
| buttons: { | |
| Ok: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#defineTurnProbabilityTrigger").click(function () { | |
| $("#turnProbabilityMessage").dialog("open"); | |
| }); | |
| $("#defineTrafficLight").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| } | |
| }); | |
| $("#trafficLightMessage").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| title: 'Traffic Light', | |
| resizable: false, | |
| modal: true, | |
| buttons: { | |
| Ok: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#defineTrafficLightTrigger").click(function () { | |
| $("#trafficLightMessage").dialog("open"); | |
| }); | |
| $("#defineFlow").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 350, | |
| autoResize: true, | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| "defineFlow_UpdateButton" : { | |
| id: "defineFlow_UpdateButton", | |
| text: "Update", | |
| click: function() { | |
| $("#flowForm").submit(); | |
| /*var isUpdated = $("#txt_flow_rate_updated").val(); | |
| if (isUpdated == "1"){ | |
| var flowDialog = $(this); | |
| setTimeout(function() { | |
| flowDialog.dialog('close'); | |
| }, 2000); | |
| }*/ | |
| } | |
| }, | |
| Cancel: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#flowRateMessage").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 'auto', | |
| autoResize: true, | |
| title: 'Vehicle Generation Rate', | |
| resizable: false, | |
| modal: true, | |
| buttons: { | |
| Ok: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#flowRateMessageTrigger").click(function () { | |
| $("#flowRateMessage").dialog("open"); | |
| }); | |
| /* | |
| $("#defineFlowsTrigger1").click(function () { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| map.setCenter(new google.maps.LatLng(36.14255346852943, -86.81547224521637)); | |
| $("#defineFlow").dialog('option', 'title', "31st Ave - West End"); | |
| $("#txt_edge_id").val("19485812#0"); | |
| $("#getFlowForm").submit(); | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| $("#defineFlowsTrigger2").click(function () { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| map.setCenter(new google.maps.LatLng(36.14304298829766, -86.81011319160461)); | |
| $("#defineFlow").dialog('option', 'title', "Natchez Trace - 28th Ave"); | |
| $("#txt_edge_id").val("19457616#2"); | |
| $("#getFlowForm").submit(); | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| $("#defineFlowsTrigger3").click(function () { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| map.setCenter(new google.maps.LatLng(36.13508466424713, -86.81141138076782)); | |
| $("#defineFlow").dialog('option', 'title', "Natchez Trace - Fairfax Ave"); | |
| $("#txt_edge_id").val("19457616#7"); | |
| $("#getFlowForm").submit(); | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| $("#defineFlowsTrigger4").click(function () { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| map.setCenter(new google.maps.LatLng(36.13096872001422, -86.80603623390198)); | |
| $("#defineFlow").dialog('option', 'title', "24th Ave - Blair Ave"); | |
| $("#txt_edge_id").val("19479459#3"); | |
| $("#getFlowForm").submit(); | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| $("#defineFlowsTrigger5").click(function () { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| map.setCenter(new google.maps.LatLng(36.14252314419553, -86.80477559566498)); | |
| $("#defineFlow").dialog('option', 'title', "24th Ave - Highland Ave"); | |
| $("#txt_edge_id").val("19479457#1"); | |
| $("#getFlowForm").submit(); | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| $("#defineFlowsTrigger6").click(function () { | |
| $("#defineFlow").load('/static/Flows.html', function () { | |
| map.setCenter(new google.maps.LatLng(36.13731368287647, -86.79816260933876)); | |
| $("#defineFlow").dialog('option', 'title', "Wedgewood Ave - 19th Ave"); | |
| $("#txt_edge_id").val("19479801#3"); | |
| $("#getFlowForm").submit(); | |
| $("#defineFlow").dialog("open"); | |
| }); | |
| }); | |
| */ | |
| $("#reasonForChange").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 550, | |
| autoResize: true, | |
| title: 'Reason for changing values', | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| "Save": function () { | |
| $("#reasonForm").submit(); | |
| }, | |
| Cancel: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#selectProblem").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 550, | |
| autoResize: true, | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| "selectProblem_SetButton" : { | |
| id: "selectProblem_SetButton", | |
| text: "Set Problem", | |
| click: function () { | |
| $("#problemForm").submit(); | |
| $(this).dialog("close"); | |
| if (actualProblemID != nextProblemID) { | |
| /* | |
| $("#reasonForChange").load('/static/Reason.html', function () { | |
| $("#reasonForChange").dialog("open"); | |
| $("#reason_title").text("Reason for changing values in PROBLEM #" + actualProblemID); | |
| }); | |
| */ | |
| actualProblemID = nextProblemID; | |
| $("#btnProblemID").button("option", "label", actualProblemID); | |
| } | |
| loadAllFlowPoints(); | |
| } | |
| }, | |
| Cancel: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#selectMyProblem").click(function () { | |
| $("#selectProblem").load('/static/Problems.html', function () { | |
| if(mode == "INDIVIDUAL") { | |
| $("#sel_problem_id").children().remove(); | |
| $("#sel_problem_id").append('<option value="3">3</option>'); | |
| $("#sel_problem_id").append('<option value="6a">6(a)</option>'); | |
| $("#sel_problem_id").append('<option value="6b">6(b)</option>'); | |
| $("#sel_problem_id").append('<option value="6c">6(c)</option>'); | |
| $("#sel_problem_id").append('<option value="8">8</option>'); | |
| } else { | |
| $("#sel_problem_id").children().remove(); | |
| $("#sel_problem_id").append('<option value="10a">10(a)</option>'); | |
| $("#sel_problem_id").append('<option value="10b">10(b)</option>'); | |
| $("#sel_problem_id").append('<option value="10c">10(c)</option>'); | |
| } | |
| $("#selectProblem").dialog('option', 'title', "Set Problem (Parameters reset to default)"); | |
| $("#sel_problem_id").val(actualProblemID); | |
| $("#getProblemForm").submit(); | |
| $("#selectProblem").dialog("open"); | |
| }); | |
| }); | |
| $("#copySim").click(function () { | |
| if (!isCurrentSimulation) { | |
| tempSimulationId = loadedSimulationId; | |
| $("#copyConfirmationDialog").dialog("open"); | |
| } else { | |
| $.notify("Cannot copy current simulation.", "warn"); | |
| } | |
| return false; | |
| }); | |
| $("#copyConfirmationDialog").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 350, | |
| autoResize: true, | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 5 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 5 | |
| }, | |
| buttons: { | |
| "Ok": function () { | |
| var postdata = { sim_id: tempSimulationId }; | |
| $.post('/copySimVersionToCurrent', postdata, function (data) { | |
| var isJSON = (typeof data == 'object'); | |
| if (isJSON) { | |
| if (data['response'] === "failure") { | |
| $.notify("Unauthorized Access", "error"); | |
| } | |
| else if (data['response'] === "ALL_MODE_COPY_FAILURE") { | |
| $.notify("Cannot copy simulation shared with all.", "error"); | |
| $(this).dialog("close"); | |
| return; | |
| } | |
| else | |
| location.reload(true); | |
| } | |
| else { | |
| $('body').html(data); | |
| } | |
| }); | |
| $(this).dialog("close"); | |
| }, | |
| Cancel: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| $("#saveSim").click(function () { | |
| if (isCurrentSimulation) { | |
| $("#saveSimDiv").load('/static/SaveSimulation.html', function () { | |
| $("#saveSimDiv").dialog('option', 'title', "Save current simulation"); | |
| $("#saveSimDiv").dialog("open"); | |
| }); | |
| } | |
| return false; | |
| }); | |
| $("#saveSimDiv").dialog({ | |
| autoOpen: false, | |
| height: 'auto', | |
| width: 350, | |
| autoResize: true, | |
| resizable: false, | |
| show: { | |
| effect: "blind", | |
| duration: 1000 | |
| }, | |
| hide: { | |
| effect: "explode", | |
| duration: 1000 | |
| }, | |
| buttons: { | |
| "Save": function () { | |
| $("#saveSimForm").submit(); | |
| }, | |
| Cancel: function () { | |
| $(this).dialog("close"); | |
| } | |
| } | |
| }); | |
| // Onload handler to fire off the app. | |
| google.maps.event.addDomListener(window, 'load', loadMap); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 100%; height: 100%;"> | |
| </div> | |
| <div id="footer">© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</div> | |
| <!--<div class="Toolbar"> | |
| <table border="0" cellpadding="0" cellspacing="0" style="width: 440px; height: 33px; margin-left: auto; margin-right: auto;" class="CommonTable"> | |
| <tr> | |
| <td style="background-image: url(Images/MenuLeft.gif); width: 20px; background-repeat: no-repeat; height: 33px"></td> | |
| <td style="width: 15px; background-repeat: no-repeat; height: 37px"></td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| <img src="Images/trafficlight.png" border="0" alt="Add Traffic Light" onclick="ChangeMapIcon(this.src)" /> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| <img src="Images/accesdenied.png" border="0" alt="Add Access Denied Sign" onclick="ChangeMapIcon(this.src)" /> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| <img src="Images/stop.png" border="0" alt="Add Stop Sign" onclick="ChangeMapIcon(this.src)" /> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| <img src="Images/speed_30.png" border="0" alt="Add Speed Limit (30)" onclick="ChangeMapIcon(this.src)" /> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| </td> | |
| <td style="cursor: pointer; width: 40px; height: 37px"> | |
| <img src="Images/add.png" border="0" alt="Add Sign to Map" onclick="addPoint()" /> | |
| </td> | |
| <td style="width: 20px"></td> | |
| </tr> | |
| </table> | |
| </div>--> | |
| <div id="LeftMenuTopPanel" class="MenuPanel"> | |
| <button id="btnHideShowButton" class="HideShowButton">Time : 000000</button> | |
| <button id="btnProblemID" class="ProblemIDButton"></button> | |
| </div> | |
| <div id="LeftMenuBottomPanel"> | |
| <div id="Accordion" class="AccordionMenu"> | |
| <h4> | |
| 1- Experiment Mode</h4> | |
| <div> | |
| <label id="logged_user">Text</label> <br/> | |
| <label id="group_name">Text</label> | |
| <div id="setmode_content"> | |
| Set Mode: | |
| <br> | |
| <form class="user_mode"> | |
| <input type="radio" name="user_mode" id="user_mode_INDIVIDUAL" value="INDIVIDUAL">Individual | |
| <br> | |
| <input type="radio" name="user_mode" id="user_mode_COLAB" value="COLAB">Collaboration | |
| </form> | |
| </div> | |
| </div> | |
| <h4> | |
| 2- Problem Set</h4> | |
| <div> | |
| <p> | |
| <a id="selectMyProblem" href="#">Select Problem</a> | |
| <br/> | |
| </p> | |
| </div> | |
| <h4> | |
| 3- Traffic Flow</h4> | |
| <div> | |
| <p> | |
| <a id="flowRateMessageTrigger" href="#">Define Vehicle Generation Rate</a> | |
| </p> | |
| <!-- <p> | |
| <a id="defineFlowsTrigger1" href="#">Point A</a> | |
| <br/> | |
| <a id="defineFlowsTrigger2" href="#">Point B</a> | |
| <br/> | |
| <a id="defineFlowsTrigger3" href="#">Point C</a> | |
| <br/> | |
| <a id="defineFlowsTrigger4" href="#">Point D</a> | |
| <br/> | |
| <a id="defineFlowsTrigger5" href="#">Point E</a> | |
| <br/> | |
| <a id="defineFlowsTrigger6" href="#">Point F</a> | |
| <br/> | |
| </p>--> | |
| </div> | |
| <h4> | |
| 4- Vehicles</h4> | |
| <div> | |
| <p> | |
| <a id="defineVehiclesTrigger" href="#">Define Vehicles</a> | |
| </p> | |
| </div> | |
| <h4> | |
| 5- Turn Probability</h4> | |
| <div> | |
| <p> | |
| <a id="defineTurnProbabilityTrigger" href="#">Define Turn Probabilities</a> | |
| </p> | |
| </div> | |
| <h4> | |
| 6- Traffic Lights</h4> | |
| <div> | |
| <p> | |
| <a id="defineTrafficLightTrigger" href="#">Traffic Light Logic Programming</a> | |
| </p> | |
| </div> | |
| <!--<h4> | |
| Traffic Signs</h4> | |
| <div> | |
| <p> | |
| <img src="Images/trafficlight.png" border="0" alt="Add Traffic Light" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;" /> | |
| <img src="Images/accesdenied.png" border="0" alt="Add Access Denied Sign" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;" /> | |
| <img src="Images/stop.png" border="0" alt="Add Stop Sign" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;"/> | |
| <img src="Images/speed_30.png" border="0" alt="Add Speed Limit (30)" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;"/><br /><br /> | |
| <img src="Images/speed_40.png" border="0" alt="Add Speed Limit (40)" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;"/> | |
| <img src="Images/speed_50.png" border="0" alt="Add Speed Limit (50)" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;"/> | |
| <img src="Images/speed_60.png" border="0" alt="Add Speed Limit (60)" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;"/> | |
| <img src="Images/speed_70.png" border="0" alt="Add Speed Limit (70)" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;"/><br /><br /> | |
| <img src="Images/trafficcamera.png" border="0" alt="Add Speed Limit (70)" onclick="ChangeMapIcon(this.src)" style="cursor: pointer;"/> | |
| </p> | |
| </div>--> | |
| <h4> | |
| 7- Traffic Simulation</h4> | |
| <div> | |
| <p> | |
| <a id="startSim" href="#">Start</a> <br/> | |
| <a id="finishSim" href="#">Stop</a> <br/> | |
| <a id="speedupSim" href="#">Speedup Simulation</a><br/> | |
| <a id="restoreSim" href="#">Restore Sim Rate</a> | |
| </p> | |
| <p> | |
| <a id="viewResult" href="#">Simulation Result</a> | |
| </p> | |
| <p> | |
| <a id="saveSim" href="#">Save Simulation</a> | |
| <a id="revertSim" href="/">Revert Simulation</a> | |
| <a id="copySim" href="#">Copy Simulation</a> | |
| <a id="viewSimulations" href="#">View Simulations</a> | |
| </p> | |
| </div> | |
| <h4> | |
| 8- Collaboration</h4> | |
| <div> | |
| <table id="groupCollaborationStatus"> | |
| </table> | |
| </div> | |
| <h4> | |
| 9- Settings</h4> | |
| <div> | |
| <p> | |
| <form id="logout" action="/auth/logout" method="get"> | |
| <input type="submit" value="Logout"/> | |
| </form> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="inductionLoopDialog" title="Induction Loop Sensor" style="text-align:center"> | |
| <form id="selectInductionChartForm"> | |
| <p> | |
| <label for="selectInductionChart">Select:</label> | |
| <select onChange="drawInductionLoopChart()" id="selectInductionChart"> | |
| <option value="data_table" selected>Data</option> | |
| <option value="flow_rate_10">Flow Rate Chart (10 sec)</option> | |
| <option value="flow_rate_50">Flow Rate Chart (50 sec)</option> | |
| <option value="queue">Queue Chart</option> | |
| </select> | |
| </p> | |
| <input id="hdnInductionId" type="hidden" /> | |
| <input id="hdnInductionType" type="hidden" /> | |
| <input id="hdnAssociatedJunctions" type="hidden" /> | |
| <input id="hdnNonAssociatedJunctions" type="hidden" /> | |
| <input type="hidden" id="hidden_sim_duration" value="-1"> | |
| </form> | |
| <div id="inductionLoopChart"></div> | |
| <div id="queueChart"></div> | |
| <div id="inductionDataTable"></div> | |
| </div> | |
| <div id="simulationResultDialog" title="Simulation Result" style="text-align:center"> | |
| <div id="vehicleChart"></div> | |
| </div> | |
| <div id="turnProbabilityMessage"> | |
| <p> | |
| <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span> | |
| Please right click on each inbound arrows | |
| <br />to modify the turning probability values. | |
| </p> | |
| </div> | |
| <div id="trafficLightMessage"> | |
| <p> | |
| <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span> | |
| Please click on each traffic lights | |
| <br />to add/modify/remove traffic light logic. | |
| </p> | |
| </div> | |
| <div id="flowRateMessage"> | |
| <p> | |
| <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span> | |
| Please click on each point (e.g. A, B, C, etc.) on the map | |
| <br />to modify the vehicle generation rate values. | |
| </p> | |
| </div> | |
| <div id="progressbar"></div> | |
| <div id="defineVehicles"></div> | |
| <div id="defineSimulations"></div> | |
| <div id="defineTurnProbability"></div> | |
| <div id="defineTrafficLight" title="Traffic Light Logic Programming"></div> | |
| <div id="defineFlow"></div> | |
| <div id="saveSimDiv"></div> | |
| <div id="selectProblem"></div> | |
| <div id="reasonForChange"></div> | |
| <div id="copyConfirmationDialog" title="Confirmation">Do you want to make this simulation current?</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment