Tag Archives: geometry

PHP GD Image at Pixel Level Open Image in New Tab Tutorial

Posted on by

We encouraged recently to use the web browser right click (for Windows, two finger gesture on Mac) functionality on our pixellated images in yesterday’s PHP GD Image at Pixel Level User of Signature Tutorial work, for instance. But we were slothful about unit testing enough all the scenarios. Hold your breath, while we explain. We use a “rigid” … HTML form method=POST action=’//www.rjmprogramming.com.au/PHP/pixellate.php’ … interfacing method to do this with the User of Signature Signature (and indeed the Signature Signature) web application failing because the web browser functionalities here use that HTML form’s URL in a get parameters sense, which in the “old days” amounted to … //www.rjmprogramming.com.au/PHP/pixellate.php … “rigid” (that simplifies logic) in the sense that we do not test the length of a proposed $_GET[] message against the server limit for URL lengths, in order to change method=POST to method=GET … but to solve this issue, jumping to the conclusion here for a second, we start to now use a mix of predominantly $_POST[] data (minus “lookfor” and minus “mode”) but additionally the one vital $_GET[] as per … //www.rjmprogramming.com.au/PHP/pixellate.php?lookfor=postget Why? Well, the “?lookfor=postget” serves to signal to our child PHP pixellator we are posting via an HTML form method=POST but we could expect a web browser right click (Windows, two finger gesture on Mac) piece of functionality to follow, so, in the meantime, in a flat file on the server record the pertinent parts of the contents of the values of that HTML form (with its POSTed input elements), and if then presented with … //www.rjmprogramming.com.au/PHP/pixellate.php?lookfor=postget … but this time from a web browser right click (for Windows, two finger gesture on Mac) piece of functionality, the PHP “child” pixellator will know to not get its argument data from the $_POST[] array, but rather from that web server flat file’s information. Cute, huh? Please note, in this way, this modern day dilemma is the result of an HTML form method=POST (where we only use the $_POST[] array). We get around it with that mix of $_POST[] and that one $_GET[]’s “lookfor” value (and with the “user of signature signature” we add a random “r” value to fool the cache to make the web browser revisit the web server (and back to the web browser) for information). The “bad” (before) versus “good” (after) view of this happens on today’s tutorial picture. The “child” PHP pixellate.php changed in this … Continue reading →

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

PHP GD Image at Pixel Level User of Signature Tutorial

Posted on by

We’re getting there, but we are not there yet. Sound familiar?! Yes, to learn how to do something, it often requires the breaking up of the problem into bits. But no spoiler alerts today, as you continue on our journey … to who knows where?! Yesterday’s PHP GD Image at Pixel Level Signature Web Storage Tutorial got us “projecting” scribble data, our signatures, to a pixellated image data source. That work yesterday involved HTML … creating signatures via this downloadable HTML signature_signature.html (with these changes and supervising the changed Javascript signature_signature.js) we now show a pixellated view, like a negative, of the signature (with all the web browser sharing functionality) along with the dataURI image already created … and for today’s purposes the changes to the Javascript signature_signature.js represented the biggest changes to have canvas geometry being projected onto a pixellated image data source. Where do we do this interfacing? Read down from Signature Signature Supervisor PDF Writing Tutorial through the blog posting to see us work up from that initial “signature” idea into a “user of signatures” supervisor with this live run showing a canvas that can “project” these new pixellated images now, using the HTML user_of_signature_signature.html (which changed in this way for those purposes). So please hang on while we think about piecing some of these ideas into concepts to “kick us down the road” towards our destination … no, we’re not just going to celebrate “bin night” … but you’re getting warmer. Stop Press The “child” PHP pixellate.php (that changed in this way and that you can try for yourself an example positive live run) now accepts the (non-negative) or … positive=Y … argument to have a white background rather than the default black one, with the pixellated images created. We’d like to thank this very useful link. Previous relevant PHP GD Image at Pixel Level Signature Web Storage Tutorial is shown below. With yesterday’s PHP GD Image at Pixel Level Signature Tutorial pixellating of a signature, behind the scenes there were HTTP Cookies used as a mechanism to store signature data. Today, we have a dual purpose, that being … signatures are a good candidate to start using web storage (localStorage – stores data with no expiration date) rather than HTTP Cookies, as there is about 10mB to play around with using this method … as well as … when creating signatures via this downloadable HTML … Continue reading →

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

PHP GD Image at Pixel Level Signature Web Storage Tutorial

Posted on by

With yesterday’s PHP GD Image at Pixel Level Signature Tutorial pixellating of a signature, behind the scenes there were HTTP Cookies used as a mechanism to store signature data. Today, we have a dual purpose, that being … signatures are a good candidate to start using web storage (localStorage – stores data with no expiration date) rather than HTTP Cookies, as there is about 10mB to play around with using this method … as well as … when creating signatures via this downloadable HTML signature_signature.html (with these changes and supervising the changed Javascript signature_signature.js) we now show a pixellated view, like a negative, of the signature (with all the web browser sharing functionality) along with the dataURI image already created Just to reiterate on web storage, that was introduced with HTML5 … With web storage, web applications can store data locally within the user’s browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data. Previous relevant PHP GD Image at Pixel Level Signature Tutorial is shown below. Yesterday’s PHP GD Image at Pixel Level Geometry Tutorial set us up for more organizational uses of our pixel level image web application of late. We continue on with that idea, today, with the idea of a signature, and go right back to the Signature Signature Primer Tutorial scribble in a canvas functionality (as the source of our co-ordinates for a signature) and ready the PHP pixellate.php (that changed in this way) to accept … map/area element HTML input data … like we deal with “legend” functionality as mentioned in Legend for and from HTML Map Element Web Server Tutorial (and its ilk) … (all the way) down to (the pared down essence that is a) … co-ordinate list of comma separated (x,y) values that is “pen down” as the default but +0,0, or ; can be indicators of “pen up” … the latter of which we take from the “signature” web application (via Google Chrome Developer Tools) over to the “legends” functionality legend_via_map.htm that changed in this small … Continue reading →

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

PHP GD Image at Pixel Level Signature Tutorial

Posted on by

Yesterday’s PHP GD Image at Pixel Level Geometry Tutorial set us up for more organizational uses of our pixel level image web application of late. We continue on with that idea, today, with the idea of a signature, and go right back to the Signature Signature Primer Tutorial scribble in a canvas functionality (as the source of our co-ordinates for a signature) and ready the PHP pixellate.php (that changed in this way) to accept … map/area element HTML input data … like we deal with “legend” functionality as mentioned in Legend for and from HTML Map Element Web Server Tutorial (and its ilk) … (all the way) down to (the pared down essence that is a) … co-ordinate list of comma separated (x,y) values that is “pen down” as the default but +0,0, or ; can be indicators of “pen up” … the latter of which we take from the “signature” web application (via Google Chrome Developer Tools) over to the “legends” functionality legend_via_map.htm that changed in this small way (and that you can try for yourself with this live run link) to add another new button to link to the PHP pixellate live run type functionality. Maybe you can see where we are heading with all this, but we need to walk before running?! This link to “scribble” canvas work is a step in itself, and if you are new to the idea of “scribbling” on canvas then you’ll need to sidetrack with that Signature Signature Primer Tutorial link way above to get all this in context. Chow for now. Previous relevant PHP GD Image at Pixel Level Geometry Tutorial is shown below. We’re off jumping again (post yesterday’s PHP GD Image at Pixel Level Animation Tutorial “chicken” work) a.k.a. … On a (web application) “tool” project, is it the chicken or the egg that drives you? Sometimes, for us, we jump around. For us, depending on the nature of the “tool” we enjoy trying to … make the “child” generic … the “egg” above interface interestingly from the “parent” usefully … the “chicken” above … because it occurs to us, with the “egg”, so far we’ve just been throwing “game like” … $x = rand(0, $width); $y = rand(0, $height); … randomosity regarding co-ordinates used to pixellate “point” data. But suppose, today, we open the door to some order, some mathematical geometry ideas?! We’ve come up with the … Continue reading →

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

PHP GD Image at Pixel Level Geometry Tutorial

Posted on by

We’re off jumping again (post yesterday’s PHP GD Image at Pixel Level Animation Tutorial “chicken” work) a.k.a. … On a (web application) “tool” project, is it the chicken or the egg that drives you? Sometimes, for us, we jump around. For us, depending on the nature of the “tool” we enjoy trying to … make the “child” generic … the “egg” above interface interestingly from the “parent” usefully … the “chicken” above … because it occurs to us, with the “egg”, so far we’ve just been throwing “game like” … $x = rand(0, $width); $y = rand(0, $height); … randomosity regarding co-ordinates used to pixellate “point” data. But suppose, today, we open the door to some order, some mathematical geometry ideas?! We’ve come up with the following additional parameterization ideas (not interfering with anything else that has come before … ie. “forward compatibility”), namely … coords … comma separated (x,y) co-ordinate set pairs that, by default, represent “pen down” rasterizations (our best “thought bubble” word for pixellations not in “point” form but in “pen down” “plotting” form … from the early “scanning” days of laser printers and even earlier days of data plotters … that “rasterize” linear data into “pixellated” form) … including a “+” sign at the start of “x” or “y” values is your way of defining “pen up” closecoords … as above, but join last to first as well (or just mention to say this about the coords value) circle … circle information comma separated (cx,cy,radius) sets arc … relevant to circle in the form of clockwise arc in degrees to allow or the comma separated (start,end) of clockwise arc in degrees starting with the zero degrees (north) bearing as zero … and you’ve got the beginnings of some “orderly” geometry, and some “pen up/pen down” thoughts (and we recommend insomniacs try chanting “pen up”, “pen down” very sombrely for however long it takes rather than envisaging “pigs” … now that’s almost as ridiculous as baaaaa baaaaaaas), simple though it is, up to now. Again, you can try this for yourself at this “child” “standalone” live run link for the PHP pixellate.php that changed in this way for today’s extended geometry (and pen up/pen down logic) choices. Previous relevant PHP GD Image at Pixel Level Animation Tutorial is shown below. Yesterday’s PHP GD Image at Pixel Level Outputs Tutorial was a tilt back to getting the “hard … Continue reading →

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

PHP/Javascript SVG YUI Geometry Tracing Tutorial

Posted on by

We came across another great “Geometry Tracing” functionality possibility the other day. It revolved around using the excellent YUI (by Yahoo) library of Javascript functionality, and we wanted to integrate it into yesterday’s PHP/Javascript SVG Geometry Tracing Tutorial start to our software integration journey of late. Before going on, we’d like to thank Graphics: Path Drawing Tool – YUI Library for the basis in code of today’s supervised additions in HTML and Javascript and CSS web application components. To involve Javascript libraries like YUI is more than a Javascript dynamic HTML “workings” experience. Built in, if you choose to access it … all free, thanks … are a lot of aesthetically pleasing stylesheet ideas, and this shows with our “better than usual” look to our supervised YUI web application components. What we have now is as below, with the bold section new for today’s work. the supervising PHP and Javascript web application‘s SVG_Primer.php changed in this way, today, building on yesterday’s PHP/Javascript SVG Geometry Tracing Tutorial … supervising … the supervised HTML/Javascript Canvas Geometry Tracing Game Tutorial‘s HTML and Javascript geometry_tracing.html changed in this way to interface (and integrate) with the supervisor above, via an HTML iframe element arrangement, and the HTML(5) canvas element’s drawImage() method … as one choice, the second choice being … the supervised HTML and Javascript yui_path_tool.html to interface (and integrate) with the supervisor above, via an HTML iframe element arrangement … as well as being a separate web application as per this live run link We like YUI’s pencil as the draggable cursor that the user can use to trace around their SVG … again via … ?area=[parent determined area of SVG element] &svg=[data URI of SVG xml] … GET call of the YUI magic! Yesterday’s work, as well as not working for Firefox (web browser), didn’t work for Internet Explorer nor Microsoft Edge (so I found out today), so, in order to solve the cross-browser issues once and for all, today, (after we realized that bullets don’t taste very good) we use the “data:image/svg+xml;base64,” prefixed Data URI for SVGs across the board … ditching the HTML(5) canvas element’s drawImage() method … and, instead, instituting a background image (to the canvas (is elem below, and ourtowhat equates to the base64 headed Data URI for SVG content)) approach as for … elem.style.backgroundRepeat=’no-repeat’; elem.style.backgroundPosition=’20px 20px’; elem.style.backgroundImage=’url(‘ + ourtowhat + ‘)’; … and this started working for Firefox, … Continue reading →

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

PHP/Javascript SVG Geometry Tracing Tutorial

Posted on by

The tutorial today is about software (web application) integration that is value adding but in an optional way. The software integration is between … the supervising PHP/Javascript SVG Colour Picker Tutorial‘s PHP and Javascript web application‘s SVG_Primer.php changed in this way, today … supervising … the supervised HTML/Javascript Canvas Geometry Tracing Game Tutorial‘s HTML and Javascript geometry_tracing.html changed in this way to interface (and integrate) with the supervisor above, via an HTML iframe element arrangement, and the HTML(5) canvas element’s drawImage() method We integrate these two in quite a neat way, allowing for the extension of the supervised’s static arrays which go … var imageo=[]; var ourareawas=[36213.0, 25382.0, 19608.0, 39366.5, 24471.5, 43679.5, 37633.5, 45130.5, 40987.5, 51842.5]; var image_array=[“one_sided.jpg”, “two_sided.jpg”, “three_sided.jpg”, “four_sided.jpg”, “five_sided.jpg”, “six_sided.jpg”, “seven_sided.jpg”, “eight_sided.jpg”, “nine_sided.jpg”, “ten_sided.jpg”]; … extended by Javascript’s [array].push method (often good for those dynamic Javascript DOM driven extensions of functionality) … to establish the (communication protocol) ideas for the “Geometry” the user can be “Tracing” around, by allowing new GET parameters … ?area=[parent determined area of SVG element] &svg=[data URI of SVG xml] … the latter of which we’re using for the first time in this project, and want to thank the Data URI’s for SVG paragraph for great ideas here. As you do software integration, sometimes you think of it as a slog, and yes, it usually is a bit of a slog. When the slog is more a neat data efficient form of integration, that Data URIs for SVG seems to us to be, then it all seems worthwhile. However, in this early days integration, we still have to iron out some cross-browser issue aspects that don’t work in Firefox, for us not working with “data:image/svg+xml;base64,” nor “data:image/svg+xml;utf8,” prefixed Data URI for SVG forms. Possibly it’s to do with using it via GET arguments. Time will tell, we hope. And so you can see us integrating the display of an SVG piece of geometry to offering the user the (optional) chance to play a game seeing how accurately they can trace around that shape and match the supervisor calculated mathematics (Area of a Polygon) algorithm (we use a lot in various web applications) generated area value. Value adding, and entertainment adding, we think … we hope. Previous relevant PHP/Javascript SVG Colour Picker Tutorial is shown below. Today’s posting hooks up two HTML5 concepts, as described below … The HTML5 specification allows for the display … Continue reading →

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

SketchUp Primer Tutorial

Posted on by

Today we’re following up on a tip and trying out a 3D Modelling suite of software called SketchUp on a MacBook Pro using Mac OS X. SketchUp can also work with the Windows operating system. Reading “PC & Tech Authority” June, 2017 (“the tip”) we’re looking forward to the idea of a 2D model being able to become 3D by “pulling up” the walls … as an upwards swipe of the mouse with the Pull tool The other great thing about SketchUp is that it is free … yayyyyyy! And so, what were the steps getting today’s tutorial picture to happen? installed SketchUp from this link because of my lack of experience piecing together 3D models, followed this great advice at Creating your first 3D model in SketchUp (paragraph) starting out with SketchUp Select the person, context-click the selection, and select Erase in the context menu that appears. In the Getting Started toolbar, select the Rectangle tool (). On the ground plane, in the space between the red and green axis, click the Rectangle tool cursor (). Then move your cursor to the right and click again. A rectangle appears on the ground, as shown here. A rectangle drawn on the groundplane On the Getting Started toolbar, select the Push/Pull tool (), and place the Push/Pull cursor over the rectangle you just created, as shown in the following figure. Click and drag your rectangle up into a 3D shape. Keep an eye on the Measurements box and release the cursor when your shape is about 5 feet tall. experimented with Orbit view experimented with Move tool experimented more with the addictive Pull tool after more 2D Rectangle tool usages experimented with 3D Warehouse … some of the prebuilt models there are amazing! experimented with Paint Bucket experimented with the Camera menu options Parallel Projection Perspective Two-Point Perspective tried File -> Save As … SketchUp model (FirstTry.skp) Perhaps SketchUp is a good option for 3D Modelling work you are undertaking? We definitely recommend it on a first look. That look, for you, ahead of time, could be today’s “stream of consciousness” PDF presentation. If this was interesting you may be interested in this too.

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