PHP and Javascript and CSS Shape Drawing Tutorial

PHP and Javascript and CSS Shape Drawing Tutorial

PHP and Javascript and CSS Shape Drawing Tutorial

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 …

  1. number of polygon sides
  2. 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.

HTML and Javascript and CSS Survey Traverse Tutorial

HTML and Javascript and CSS Survey Traverse Tutorial

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, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;
Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;
Traverse networks are free of the strength of figure considerations that happen in triangular systems;
Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.

The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]

Let’s see some simple HTML in action in a tutorial …

Link to HTML “spiritual home” … at W3Schools has many tutorials.
Link to Survey Traverse live run … here.
Link to Survey Traverse live run (additional Google Line Chart functionality) here.
Link to Survey Traverse information … from Wikipedia from which quote above comes.
Link to some downloadable HTML code … rename to SurveyTraverse.html which packages up a lot of Javascript and a little bit of CSS … or JaCvasScriptS … not sure whether this would ever catch on.
Link to some downloadable PHP programming code (additional Google Line Chart functionality) … rename to SurveyTraverse.php

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Land Surveying, Tutorials and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

16 Responses to PHP and Javascript and CSS Shape Drawing Tutorial

  1. honest says:

    My wife and i have been peaceful that Edward could deal with his web research through your ideas he acquired from your very own blog. It is now and again perplexing to simply choose to be releasing hints that many some others might have been selling. We understand we have the writer to be grateful to for that. The type of explanations you have made, the straightforward website navigation, the relationships you aid to create – it is most astounding, and it is facilitating our son in addition to us imagine that that idea is awesome, and that’s seriously serious. Many thanks for all the pieces!

  2. "KW"" says:

    Some truly good blog posts on this website , regards for contribution.

  3. Discover how to deal along with your domain get in touch with details and registration. Realize domain namelocking and Exclusive domain name Registration.

  4. enquiry says:

    It’s remarkable designed for me to have a website, which is useful in favor of my knowledge. thanks admin|

  5. buy kratom says:

    Thanks for this post. I surely agree with what that you are saying. I have been talking about this topic a whole lot lately with my father so hopefully this will get him to see my point of view. Fingers crossed!

  6. linked site says:

    If you are going for finest contents like myself, only pay a visit this site daily because it gives quality contents, thanks|

  7. Absolutely says:

    I really enjoy reading through on this web site , it has good blog posts. “The longing to produce great inspirations didn’t produce anything but more longing.” by Sophie Kerr.

  8. Sweet internet site , super layout, really clean and utilize genial .

  9. Brendan Diss says:

    I’m actually enjoying the style and layout of your site. It’s an extremely straightforward on the eyes which makes it a lot more pleasant for me to come here and pay a visit to far more generally. Did you hire out a developer to produce your theme? Fantastic function!

  10. never saw a web site like this, relaly impressed. compared to other blogs with this write-up this was definatly the best web site. will save.

  11. Wow! This could be one certain of the most helpful blogs We’ve ever arrive across on this subject. Basically Outstanding. I’m also an expert in this subject therefore I can understand your effort.

  12. I’m curious to find out what blog platform you happen to become utilizing? I’m having some tiny security problems with my latest web-site and I would like to find something a lot more risk-free. Do you’ve got any options?

  13. I simply had to thank you very much yet again. I do not know the things that I could possibly have carried out without the type of tips provided by you directly on this concern. Entirely was an absolute frustrating circumstance for me personally, however , understanding the well-written approach you resolved it made me to weep with contentment. Now i am happier for this work and as well , hope you know what a great job you happen to be accomplishing training many people all through your web page. Most probably you have never encountered all of us.

  14. Ikraam says:

    I have been exploring for a bit for any high quality articles or weblog posts on this kind of area .
    Exploring in Yahoo I at last stumbled upon this site. Studying this info So i’m glad to show that
    I’ve a very excellent uncanny feeling I found out exactly what I needed.

    I so much surely will make certain to don?t forget this site and give it a look on a constant basis.

  15. I got what you intend, appreciate it for putting up.Woh I am lucky to find this website through google. “It is a very hard undertaking to seek to please everybody.” by Publilius Syrus.

  16. Enjoyed reading this, very good stuff, appreciate it. “A man may learn wisdom even from a foe.” by Aristophanes.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>