Vertex-Edge Graph Creator / Solver

The start of an application which allows you to generate simple vertex-edge graphs and analyze them with graph theory. The analysis part is not complete.

by sirfizx

HTML

<!DOCTYPE html>
<html>
 <!-- /*
*      Copyright (C) 2014
*      Author:  Eric Eisaman (SirFizX)
*
*        This software is provided as-is under GNU Version 3 License.
*        https://www.gnu.org/licenses/gpl.html
*        
*/-->
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Fun with Graphs</title>
  </head>
  <body>
    <!--<p class='centeredImage'><img src='' id='logo_name' width='220px' ></p> -->
    <div id='canvas_frame' >
        
        <canvas id="graphCanvas" width='400' height='300'></canvas>
        
    </div>
    <div id='controls' width='400px'>
        <fieldset>
            <div id='mode'>
                <div id='modename'>
                    Add Vertices
                </div>
                <div id='usevisual' visibility='hidden'>
                    <input type="checkbox" class="checkbox" name="usevisual" id="checkbox" />
                    <label for="y">Use Visual Distance as Weight</label>
                </div>
            </div>
            
            <div class='btnset'>
                <button id='btn_mode'>Change Mode</button>
                <button id='btn_clear'>Clear</button>
                <button id='btn_json'>Export JSON</button>
                <button id='btn_png'>Export PNG</button>
                <button id='btn_start'>Set Start</button>
                <button id='btn_finish'>Set Finish</button>
                <button id='btn_compute'>Compute Shortest Path</button>
            </div>
            
            
            
        </fieldset>
        <div id='drop'>
                <div id="drop_zone">Drop JSON Graph Here</div>
                <output id="list"></output>
        </div>
        
    </div>

  </body>
</html>

CSS

/* make the body fill the window */
body {
    margin: 0px;
    width: 100%;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}

div{
    margin:0px;
    padding:0px;
}

.centeredImage{
    text-align:center;
    margin-top:2px;
    margin-bottom:0px;
    padding:0px;
    }


 /* make any canvas fill its container */
 /* canvas background-color #223322;*/
canvas {
    background-color:white;
 }
 #mode{
     color:black;
     display:inline-block;
     padding: 2px 1em 0 0;
 }

fieldset { overflow:hidden; border:none; }
#usevisual { display:inline-block; clear:none; visibility:hidden;}
label { clear:none; display:inline-block; padding: 2px 0.1em 0 0; color:red;}
.checkbox { display:inline-block; clear:none; margin: 2px 0 0 2px; }

 #canvas_frame{
    border-radius: 8px;
    border-width:10px;
    border-color:rgb(76,76,76);;
    border-style:solid;
    width:400px;
    height:300px;
    margin:0 auto;
    margin-top:6px;
 }
 #controls{
     width:400px;
     margin:0 auto;
     font-size:15px;
 }
 
 #drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold 'Vollkorn';
color: #bbb;
}

#drop {
padding: 10px;
border: 1px solid...

JavaScript

/*
*      Copyright (C) 2014
*      Author:  Eric Eisaman (SirFizX)
*
*        This software is provided as-is under GNU Version 3 License.
*        https://www.gnu.org/licenses/gpl.html
*        
*/

function Vec2D(x,y){
        this.x =x;
        this.y =y;
    }
Vec2D.prototype.distSqrd = function(v2d){
    return (this.x-v2d.x)*(this.x-v2d.x)+(this.y-v2d.y)*(this.y-v2d.y);
}



function Vertex2D(position,name){
    this.name = name;
    this.x = position.x;
    this.y = position.y;
    this.connections = [];// this creates a circular reference, instead use connections[names]
}

////////////////////////////////////////////////////////////////////////////////

function Edge2D(verts){
	this.verts = verts;
	this.weight;
}

Edge2D.prototype.setWeight = function(){
	this.weight = parseInt(prompt('Edge Weight: ','Use visual distance.'));
	return this.weight;
}


////////////////////////////////////////////////////////////////////////////////

/*
*      Copyright (C) 2014
*      Author:  Eric Eisaman (SirFizX)
*
*        This software is provided as-is under GNU Version 3 License.
*        https://www.gnu.org/licenses/gpl.html
*        
*/

function UI2D(canvas){
        this.vertex_sprites = [];
        this.edge_sprites = [];
        this.canvas = canvas;
        this.context = canvas.getContext('2d');
        this.radius = 7;
        this.textcolor = 'blue';
        this.fontsize = 10;
        this.fontstyle = 'bold';
        this.fontfamily = 'Calibri';
        this.startcolor = 'green';
        this.finishcolor = 'red';
        
        this.vertexColor = 'grad'; // indicates to return a gradient fill when gradientFill() is called
        this.edgeColor = 'black';
    }
    
    
UI2D.prototype.drawVertexSprite= function(vs){

      this.context.beginPath();
      //this.context.moveTo(v2d.x,v2d.y);
      this.context.arc(vs.v2d.x, vs.v2d.y, vs.radius, 0, 2 * Math.PI, false);
      this.context.fillStyle = this.gradientFill(vs);
      this.context.fill();
     ...