Tag Archives: geometry

PHP and Javascript and CSS Shape Rotation Tutorial

Posted on by

We’re continuing on with our Geometry and Land Surveying theme today, following on from yesterday’s PHP and Javascript and CSS Shape Drawing Tutorial as shown below. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements. If you read yesterday’s posting you’ll see that we added some popup window functionality to display the Convex Polygon created by the web application in a relative sense, and to do this we called on (where variable “opop” is global in scope) … opop = window.open(“”, “Polygon ” + numlegs, “left=400,top=250,height=” + parseFloat(50 + maxy) + “,width=” + parseFloat(50 + maxx)); opop.document.write([someDerivedHTML]); We’re here, today, to remind you, that that popup doesn’t have to be like a dead fish, just displaying information. It can be interactive itself, and is known to the “parent” window, so can have its own “hidden input” HTML element (for example) as per … <input id=”myunload” type=”hidden” value=””></input> … that is updated when a button as per (this function, that is used to create this button and a related dropdown) … function buttonideas() { var crotate1 = “<input type=’button’ onclick=’ if (document.getElementById(\”myunload\”) != null) { document.getElementById(\”myunload\”).value=\”” + initiallength + “,” + numlegs + “,” + “\” + document.getElementById(\”myselect\”).value; }’ value=’Rotate Clockwise’></input> <select id=’myselect’><option value='” + eval(180.0 / numlegs) + “‘>By ” + eval(180.0 / numlegs) + “° … vs …</option></select>”; for (var steps=0; steps<=360; steps++) { crotate1=crotate1.replace(“</option></select>”, “</option><option value='” + steps + “‘>By ” + steps + “°</option></select>”); } return crotate1; } … then our “parent” window can swing into action via a setInterval() scenario (where variable sipos is global) … sipos = setInterval(takealook, 5000); … with code like … function takealook() { var things; if (opop != null) { if (opop.document.getElementById(‘myunload’).value.indexOf(“,”) != -1) { things = opop.document.getElementById(‘myunload’).value.split(“,”); opop.close(); opop = null; if (things.length >= 3) { if (sipos != null) { clearInterval(sipos); sipos = null; } var bis = 0.0; bis += parseFloat(initialbearing); bis += parseFloat(things[2]); window.location = “./ShapeDraw.php?sides=” + things[1] + “,0&length=” + things[0] + “&bearing=” + posval(bis); } } } } … to allow for some HTML “svg” element rotation functionality, if the button is pressed, that is. One last nicety is to use the Window Event “onunload” to clear the setInterval handler with a web browser close or a user closing the parent webpage as per … <body onunload=” if (sipos != null) { clearInterval(sipos); sipos = null; }” style=”background-color: #fffff0;”> Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here. Link to Shape Draw PHP source code ShapeDraw.php with changes from code yesterday as per this link. You may be interested in CSS3 ways to rotate … Continue reading →

Posted in eLearning, Event-Driven Programming, GUI, Land Surveying, Tutorials | Tagged , , , , , , , , , , , , , , , , | 15 Comments

PHP and Javascript and CSS Shape Drawing Tutorial

Posted on by

It is no coincidence that Geometry and Land Surveying have a lot in common. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements. So today, with our Plane Geometry web application, we start with our previous Survey Traverse web application, and add to its functionality with ability for it to fill out more for the user to describe a regular polygon of their choosing, defined by … number of polygon sides length of each polygon side We also add to the Google Charts Line Graph of the Drawn Shape a popup window showing the polygon as an HTML svg element. Part of the reason for this is that the Google Chart Line Graph can exaggerate the x or y co-ordinate of its plots, but with the HTML svg element, you avoid this issue, as we are just showing you a “relative” view of the shape (ie. as distinct from an “absolute” view with distinct co-ordinates). The thinking here started with a look at New Century Maths stages 5.2/5.3 “Exterior angle sum of a convex polygon”. Did you know? The sum of the exterior angles of a convex polygon is 360°. What we found to be the case, practically speaking, to imagine the drawing of a regular even-sided convex polygon (with “numsides” sides) was … look north … turn clockwise (360° / numsides) for first line to draw (NB. there is more symmetry if this number is then divided by 2) … then from then on … off this previous line, turn clockwise (180° + (360° / numsides)) for subsequent lines Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here. Link to Shape Draw PHP source code ShapeDraw.php with changes from code below as per this link. Hope you enjoy the geometry ideas, and will leave you with a very useful link that helped with the Convex Polygon method to calculate the Surface Area here. Previous relevant HTML and Javascript and CSS Survey Traverse Tutorial is shown below. Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts. The tutorial subject matter is a webpage to perform Survey Traverse calculations. A Survey Traverse is: Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including: Less reconnaissance and organization needed; While in other systems, … Continue reading →

Posted in eLearning, Land Surveying, Tutorials | Tagged , , , , , , , , , , , , , , | 18 Comments

HTML Canvas Perfect T Game Primer Tutorial

Posted on by

The HTML Canvas element is great for mathematical games especially where you draw your own graphics based on interaction from the user. Today’s game‘s geometrical theme tests whether the user can mimic the drawing of a diameter line across a circle … doesn’t sound hard, does it? But are things as easy as that? Where you have the scenario in mathematics of a line touching a circle just the once, this is called a tangent. Today we draw you a tangent point, and that represents the middle of the top of the “Perfect T” we want you to draw, where the two user defined points draw the “T” that has two lines of equal length, meeting at right angles and not overshooting or falling short of the mark. Here is the HTML programming source code for today’s tutorial you could call perfectt.html There is functionality in this game to email a snapshot of the game and the PHP programming source code that helps facilitate this functionality for today’s tutorial you could call perfectt.php See for yourself if it is as easy as it sounds … you start with 3000 points and see how many goes you can have surviving with a positive score here. If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , | 14 Comments

Java Swing Line Graph Primer Tutorial

Posted on by

Sort of miss Java Applets, myself, as they were once “the thing” for some people writing code for the web. You got used to paint() and repaint() methods because you could imagine, word for word, codewise, what was happening. So here is another tutorial that uses Swing functionality in Java to create a GUI (Graphical User Interface) desktop program on a Mac laptop (but same code may well work, compiled on a Windows laptop (the same way)) that harkens back to those Java Applet ideas drawing graphics (we even use “repaint()” … yay) that is a simple Java JFrame object, graphics for a Line Graph, accepting co-ordinate input from the (Linux) command line arguments or taking this interactively via the JOptionPane showInputDialog() method, and then, optionally, later you can add to your Line Graph via mouse clicks understood as vertices of the one continuous line you are creating … in other words, not scribble, that would require different logic, but not that much more difficult or involved logic actually … would just involve some intervention with the onmousemove event function. Some of the points of interest, and you may want to see our previous relevant Java Swing JTree Primer Tutorial as shown below, as well, are: Is a desktop Java application that uses a Java Swing JFrame GUI framework Is a desktop Java application that uses a Java Swing JPanel GUI object Is a desktop Java application that uses a Java Swing JOptionPane showInputDialog() method to obtain the interactive input required It implements Mouse event functionality via MouseListener It uses a kludgy-feeling approach to drawLine() work by drawing the one line with five drawLine() calls to give the impression of a thicker line Download programming source code and rename to LineChart.java that has the very simple command line compilation procedure:         javac LineChart.java         java LineChart Of great help was this link and this link … and the general idea and code ideas also came from Developing Java Entertainment Applets by John Withers … thanks heaps. Previous relevant Java Swing JTree Primer Tutorial is shown below. Here is another tutorial that uses Swing functionality in Java to create a GUI (Graphical User Interface) desktop program on a Mac laptop (but same code may well work, compiled on a Windows laptop (the same way)) that tests the use of a simple Java JTree object, adding to the thought processes, perhaps, of the previous Java Swing Sound Primer Tutorial as shown below. Some of the points of interest, and you may want to see our previous relevant Java Swing Desktop Primer Tutorial as shown below, as well, are: Is a desktop Java application that uses a Java Swing JFrame GUI framework It uses a private JTree object in which to store the hierarchical data … in our case the lineage (up to 5 generations) of Falleur’s Nelson the Golden Retriever … yes, dog   … Continue reading →

Posted in eLearning, Event-Driven Programming, GUI, Tutorials | Tagged , , , , , , , , , , , , , , , , | Leave a comment

PHP/Javascript SVG Primer Tutorial

Posted on by

The HTML5 specification allows for the display of 2D-graphics via SVG HTML tags which use graphical applications in XML and the XML is then rendered by an SVG viewer. SVG stands for Scalable Vector Graphics. We’ve talked about the HTML canvas element as another means to come to this end, but the SVG methods are more straightforward in their creation. For today’s tutorial we follow the advice at this wonderful tutorial and wrap it in PHP, so that you can specify your own parameters. Hope you find it very useful, and easy. This demonstrates to you that if you have some great static HTML you can keep that great static content and present a dynamic version the user can play around with, and learn from, by adding that PHP server-side content. For today’s PHP interface we got the HTML to use an HTML form of the relevant shape’s characteristics and post this data back to the same PHP webpage, analyzing the $_POST[] data to fill in the static HTML parameter values with user-defined parameter alternatives. Today we have PHP and Javascript programmable source code you could call SVG_Primer.php and here is its live run. If this was interesting you may be interested in this too.

Posted in eLearning, Tutorials | Tagged , , , , , , , | Leave a comment