JavaScript Graphics Library (JSGL.org) Draw and move interactive vector graphics easily in Javascript!

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

pathfinder [2013/03/14 03:17] (current)
Line 1: Line 1:
 +====== JSGL Demo: Path Finder ======
  
 +
 +<html>
 +<script type="text/javascript" src="../example/jsgl.js"></script>
 +<script type="text/javascript" src="../example/pathfinder/data.js"></script>
 +<div id="panel" style="height: 650px; width: 1050px; cursor: default; border: 2px solid black; background-color: #bf9"></div>
 +<table style="width: 350px; height: 200px; position: relative; float: left; left: 700px; top: -650px; background-color: #eee; border: 1px solid black; font-family: sans-serif"
 +  cellpadding="0" cellspacing="10">
 +<tr><th colspan="2">Algorithm setting</th></tr>
 +<tr><td>Start:</td><td><select id="startComboBox" style="width: 210px"></select></td></tr>
 +<tr><td>Destination:</td><td><select id="endComboBox" style="width: 210px"></select></td></tr>
 +<tr><td>Algorithm:</td><td>
 +<select id="algorithm" style="width: 210px">
 +  <option value="bfs">BFS</option>
 +  <option value="dfs">DFS</option>
 +  <option value="greedy">Greedy Search</option>
 +  <option value="astar" selected="selected">A*</option>
 +</select></td></tr>
 +<tbody id="optimizationGroup" style="display:none">
 +<tr><td rowspan="2" valign="top">Optimization:</td><td><input type="radio" id="speed" name="optimization" />speed (time)</td></tr>
 +<tr><td><input type="radio" id="distance" name="optimization" checked="true" />distance</td></tr>
 +</tbody>
 +<tr><td colspan="2" align="center"><input id="startButton" type="button" value="Go!" /></td></tr>
 +</table>
 +
 +<div id="log">
 +</div>
 +</body>
 +<script type="text/javascript" src="../example/pathfinder/pathfinder.js"></script>
 +<script type="text/javascript">
 +
 +var select1 = document.getElementById("startComboBox"),
 +    select2 = document.getElementById("endComboBox"),
 +    option;
 +
 +for(var i=0; i<inputDataObj.cities.length; i++)
 +{
 +  option=document.createElement("option");
 +  option.innerHTML = inputDataObj.cities[i].id + " &ndash; " + inputDataObj.cities[i].name;
 +  option.value=inputDataObj.cities[i].id;
 +  if(inputDataObj.cities[i].id==21) option.selected="selected";
 +  select1.appendChild(option);
 +  option=document.createElement("option");
 +  option.value=inputDataObj.cities[i].id;
 +  option.innerHTML = inputDataObj.cities[i].id + " &ndash; " + inputDataObj.cities[i].name;
 +  if(inputDataObj.cities[i].id==104) option.selected="selected";
 +  select2.appendChild(option);
 +}
 +
 +
 +function enableStart()
 +{
 +  document.getElementById("startButton").disabled=false;
 +}
 +
 +function disableStart()
 +{
 +  document.getElementById("startButton").disabled=true;
 +}
 +
 +document.getElementById("algorithm").onchange=function()
 +{
 +  document.getElementById("optimizationGroup").style.display=
 +    (((this.value!="bfs")&&(this.value!="dfs"))?"":"none");
 +}
 +
 +// po pripadnem refreshi na Firefoxu
 +document.getElementById("algorithm").onchange();
 +
 +lastAlgorithm = null;
 +
 +document.getElementById("startButton").onclick=function()
 +{
 +  if(lastAlgorithm)
 +  {
 +    lastAlgorithm.cleanup();
 +  }
 +    
 +  disableStart();
 +  
 +  var algorithm;
 +  
 +  switch(document.getElementById("algorithm").value)
 +  {
 +    case "bfs": algorithm=BFS; break;
 +    case "dfs": algorithm=DFS; break;
 +    case "greedy":
 +      algorithm=GreedySearch;
 +      algorithm.heuristic=document.getElementById("speed").checked
 +        ? function(fromCity,neighbor,destinationCity)
 +          {
 +            return jsgl.Vector2D.getDistance(neighbor.getLocation(),destinationCity.getLocation())
 +              / fromCity.getRoadTo(neighbor).getSpeed();
 +          }    
 +        : function(fromCity,neighbor,destinationCity)
 +          {
 +            return jsgl.Vector2D.getDistance(neighbor.getLocation(),destinationCity.getLocation());
 +          };
 +      break;
 +    case "astar":
 +      algorithm=AStar;
 +      algorithm.hHeuristic=document.getElementById("speed").checked
 +        ? function(fromCity,neighbor,destinationCity)
 +          {
 +            return jsgl.Vector2D.getDistance(neighbor.getLocation(),destinationCity.getLocation()) / 130;
 +          }
 +        : function(fromCity,neighbor,destinationCity)
 +          {
 +            return jsgl.Vector2D.getDistance(neighbor.getLocation(),destinationCity.getLocation());
 +          };
 +      algorithm.pHeuristic=document.getElementById("speed").checked
 +        ? function(fromCity,neighbor)
 +          {
 +            return fromCity.getDistance() +
 +              jsgl.Vector2D.getDistance(fromCity.getLocation(),neighbor.getLocation())
 +                / fromCity.getRoadTo(neighbor).getSpeed();
 +          }
 +        : function(fromCity,neighbor)
 +          {
 +            return fromCity.getDistance() +
 +              jsgl.Vector2D.getDistance(fromCity.getLocation(),neighbor.getLocation());
 +          };
 +      break;
 +  }
 +  
 +  algorithm.startID=select1.value;
 +  algorithm.endID=select2.value;
 +  algorithm.finishHandler=enableStart;
 +  
 +  algorithm();
 +  
 +  lastAlgorithm=algorithm;
 +}
 +
 +</script>
 +<script type="text/javascript" src="./examples/pathfinder/pathfinder.js"></script>
 +</html>
 
pathfinder.txt · Last modified: 2013/03/14 03:17 (external edit)
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Driven by DokuWiki Powered by PHP Valid XHTML 1.0 Valid CSS