Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I am adding the whole code. You have to add a variable graphtype. In onButtonClick, you set it. Then you draw based on graphtype:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;script&gt; var END_CLICK_RADIUS = 5; //the max number of points of your poygon var MAX_POINTS = 8; var mouseX = 0; var mouseY = 0; var isStarted = false; var points = null; var polygons = null; var lines = null; var canvas = null; var ctx = null; var graphtype="polygon"; window.addEventListener('load', onPageLoaded, false); function onPageLoaded() { } function byId(e){return document.getElementById(e);} //object representing a point function Point(x, y) { this.x = x; this.y = y; } // object representing a polygon function Polygon(points, color) { this.points = points; this.color = color; } // object representing a single line segment function LineSegment(point1, point2, color) { this.p1 = point1; this.p2 = point2; this.color = color; } function onPageLoaded() { var buttons = document.getElementsByClassName('draw'); for(var i=0;i &lt; buttons.length; i++) { buttons[i].addEventListener("click", onButtonClick, false); } canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); setColor( byId('color').value ); canvas.addEventListener("click", onCanvasClick, false); canvas.addEventListener("mousemove", onCanvasMouseMove, false); polygons = new Array(); lines = new Array(); //refresh time setInterval(updateScreen, 100); } function onButtonClick(e){ switch (this.getAttribute("data-type")) { case 'poly': graphtype="polygon"; break; case 'line': graphtype="line"; break; } } function onCanvasMouseMove(e) { mouseX = e.clientX - canvas.offsetLeft; mouseY = e.clientY - canvas.offsetTop; } function addPolygon() { polygons[polygons.length] = new Polygon(points, byId('color').value); alert(polygons.length + " polygons completed"); } function addLine() { lines[lines.length] = new LineSegment(points[0], points[1], byId('color').value); } function onCanvasClick(e) { var x = e.clientX-canvas.offsetLeft; var y = e.clientY-canvas.offsetTop; switch ( graphtype) { case 'polygon': polyClick(x,y); break; case 'line': lineClick(x,y); break; } } function lineClick(x,y) { if (isStarted) { points[points.length] = new Point(x,y); addLine(); reset(); isStarted = false; // points = new Array(); } else { isStarted = true; points = new Array(); points[points.length] = new Point(x,y); } } function polyClick(x, y) { if(isStarted) { //drawing the next line, and closing the polygon if needed if(Math.abs(x - points[0].x) &lt; END_CLICK_RADIUS &amp;&amp; Math.abs(y - points[0].y) &lt; END_CLICK_RADIUS) { isStarted = false; addPolygon(); reset(); } else { points[points.length] = new Point(x, y); if(points.length &gt;= MAX_POINTS) { addPolygon(); reset(); } } } else if(points == null) { //opening the polygon points = new Array(); points[0] = new Point(x, y); isStarted = true; } } //changes the color of the draw function setColor(color) { ctx.strokeStyle = color; } //resets the application function reset() { isStarted = false; points = null; } // called whenever the screen needs updating function updateScreen() { ctx.clearRect(0, 0, canvas.width, canvas.height); switch ( graphtype) { case 'polygon': drawIncompletePolygon(); break; case 'line': drawIncompleteLine(); break; } var i, n; n = polygons.length; for (i=0; i&lt;n; i++) drawPolygon(polygons[i]); n = lines.length; for (i=0; i&lt;n; i++) drawLineSegment(lines[i]); } // draws an arbitrary polygon. Takes a Polygon object as the input function drawPolygon(polyToDraw) { setColor(polyToDraw.color); var i, n = polyToDraw.points.length; ctx.beginPath(); ctx.moveTo(polyToDraw.points[0].x, polyToDraw.points[0].y); for (i=1; i&lt;n; i++) ctx.lineTo(polyToDraw.points[i].x, polyToDraw.points[i].y); ctx.lineTo(polyToDraw.points[0].x, polyToDraw.points[0].y); ctx.closePath(); ctx.stroke(); } function drawLineSegment(lineSegToDraw) { setColor(lineSegToDraw.color); ctx.beginPath(); ctx.moveTo(lineSegToDraw.p1.x, lineSegToDraw.p1.y); ctx.lineTo(lineSegToDraw.p2.x, lineSegToDraw.p2.y); ctx.closePath(); ctx.stroke(); } function drawIncompleteLine() { if (isStarted) { setColor(byId('color').value); ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); ctx.lineTo(mouseX, mouseY); ctx.closePath(); ctx.stroke(); } } function onCanvasClick(e) { var x = e.clientX-canvas.offsetLeft; var y = e.clientY-canvas.offsetTop; switch ( graphtype){ case 'polygon': polyClick(x,y); break; case 'line': lineClick(x,y); break; } } //draws the current **in-progress** shape function drawIncompletePolygon() { setColor(byId('color').value); ctx.beginPath(); if(points != null &amp;&amp; points.length &gt; 0) { ctx.moveTo(points[0].x, points[0].y); for(i = 1 ; i &lt; points.length ; i++) { ctx.lineTo(points[i].x, points[i].y); } if(isStarted) { ctx.lineTo(mouseX, mouseY); } else { ctx.lineTo(points[0].x, points[0].y); } } ctx.stroke(); ctx.closePath(); } &lt;/script&gt; &lt;style&gt; body { margin: 0; } #board { margin: 0 auto; width: 500px; } #myCanvas { border: 3px dotted #000; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="board"&gt; &lt;canvas id="canvas" width="300" height="300" style="border: 1px solid black;"&gt;&lt;/canvas&gt; &lt;br /&gt; Couleur : &lt;select id="color" onchange="setColor(this.value);"&gt; &lt;option value="red" selected="selected"&gt;Red&lt;/option&gt; &lt;option value="blue"&gt;Blue&lt;/option&gt; &lt;option value="green"&gt;green&lt;/option&gt; &lt;option value="black"&gt;black&lt;/option&gt; &lt;option value="yellow"&gt;yellow&lt;/option&gt; &lt;/select&gt; &lt;input type="button" value="Add polygon" class="draw" data-type="poly"&gt; &lt;input type="button" value="Add line" class="draw" data-type="line"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POevent listener of javascript converting drop down list to input button
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USMusfiqur rahman
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload