Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

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

Posted in Photography, Trips | Tagged , , , , , , , , , | 336 Comments

Web Server Primer Tutorial

Web Server Primer Tutorial

Web Server Primer Tutorial

Here is a tutorial that shows some Web Server functionality in terms of Web Hosting for the domain rjmprogramming.com.au via Crazy Domains. It concentrates on the cPanel WHM interface. This is a massive topic covering hardware, networking and software and can only be presented in overview by a stream-of-consciousness type of presentation, as we do here. Maybe for starters, let’s get Wikipedia to define a Web Server.

The term web server can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver web content that can be accessed through the Internet.[1]

The most common use of web servers is to host websites, but there are other uses such as gaming, data storage or running enterprise applications.

Enjoy the tutorial that shows some Web Server functionality in terms of Web Hosting for the domain rjmprogramming.com.au here that we host with an Australian (.au Internet country code top-level domain) domain specialist, Crazy Domains. Many other countries would have web hosting that caters well for their country’s Internet country code top-level domain, and we got a heads up regarding web hosting in India (for .in) via alloverindia.in‘s Hostgator Web Hosting and yourlasthost.com‘s article on reseller hosting.

In terms of your research and development, have a look at the information for the long list below, all information being from Wikipedia:

World Wide Web Internet website
web server hardware software
networking virtual server CentOS
operating system Unix cPanel
WHM VPS VMware
IP address nameserver DNS
A entry MX entry SSH
SSL ftp sftp
Apache PHP MySql
CPU memory swap
email domain subdomain
web hosting account theme
RPM plugin SDK
TCP/IP DHCP PPP
TLS phpMyAdmin reseller
// https:// file://

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

Posted in Database, Hardware, Networking, Operating System, Software, Tutorials, eLearning | Tagged , , , , , , , , , , , | 6 Comments

Viewport and CSS Calc Intersection Algorithm Tutorial

Viewport and CSS Calc Intersection Algorithm Tutorial

Viewport and CSS Calc Intersection Algorithm Tutorial

Do you eat “separatist style”? I used to, leaving the good stuff until last, until one day a grandparent kindly taught me the weakness with this system, quietly pinching the best stuff during the prelude period. The recent Viewport and CSS Calc Primer Tutorial has set us on a “separatist course” (which we hope does not lead to any tears at bedtime) …

  • initially talking just HTML and CSS (and no Javascript) with that first incarnation of the “Viewport and CSS Calc” proof of concept web application as above … and now today …
  • we add Javascript (that dynamically creates its own HTML and CSS via two conduit helpers … those being …

    1. <body onload='divpolys();'>

    2. function divpolys() {
      var divsii;
      divs=document.getElementsByTagName('div');
      for (var ii=0; ii<divs.length; ii++) {
      divsii=divs[ii].getBoundingClientRect(); // the way CSS proportionate styling can become co-ordinate reality
      // co-ordinate finding processing continues
      }
      // More work here
      }

    … helping us show, in another “proof of concept” that will get nuanced and genericized (we hope) to show “Two Convex Polygon Intersections”)

“Nuanced and genericized”? Yes, as our case is even simpler (because in our case the polygons are always rectangles) than the premise of our muse for today’s work, the wonderful algorithmic ideas for Intersection of Convex Polygons Algorithm (and also helped out by the great PNPOLY – Point Inclusion in Polygon Test) but we plump for an array of structures data arrangement (rather than classes) reminiscent of our book web application discussion at Javascript Array of Structures Primer Tutorial (and also see MySql Polygon Spatial Relations via Image Map Tutorial for GIS MySql Spatial functions regarding some of this same line of thinking). And so, being that simple, we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6.

Again, take a look at the changed viewport_poc.html‘s live run link …

… or HTML iframe supervision to see what we are getting at here.

You can also see this play out at WordPress 4.1.1′s Viewport and CSS Calc Intersection Algorithm Tutorial.


Previous relevant Viewport and CSS Calc Primer Tutorial is shown below.

Viewport and CSS Calc Primer Tutorial

Viewport and CSS Calc Primer Tutorial

Keeping on with some themes of yesterday’s Responsive Design Viewport Width Considerations Tutorial, today, we combine ideas around …

… in a “proof of concept” web application we are using to explore ideas from the ground up … hello, wormies!

This is precise pixel placement 101, bringing us to a division of concept with webpage design …

Screen Viewport
Width and Height Unitary Units px px
Width Proportionate Units % vx
Height Proportionate Units % vh
Width (or Left) Calc-friendly %,px %,px,100vx
Height (or Top) Calc-friendly %,px %,px,vh,100vh

… where our “proof of concept” findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport width: calc(100vx – 60px); CSS definition type of syntax that sounds great on paper does not appear to work in practice.

So take a look at our very symmetric viewport_poc.html‘s live run link …

… or HTML iframe supervision to see what we are getting at here.


Previous relevant Responsive Design Viewport Width Considerations Tutorial is shown below.

Responsive Design Viewport Width Considerations Tutorial

Responsive Design Viewport Width Considerations Tutorial

Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of …

  • Mobile Friendly Meta Viewport Tag Zoom Tutorial by now going with …

    Was .. Now is

    <meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Google PageSpeed and Firebug Mobile Friendly Primer Tutorial by now going with …
    Was ..

    function widthfix() { //
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
    document.getElementById('body_content').style.width='100%';
    document.getElementById('nav_layer').style.width='100%';
    document.getElementById('widget0').style.width='100%';
    }
    Now is

    function widthfix() { //
    if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
    document.getElementById('body_content').style.width='100%';
    document.getElementById('nav_layer').style.width='100%';
    document.getElementById('widget0').style.width='100%';
    }

Why?

  • viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple …

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts

Food for thought, we hope, for those chipping away at responsive design amalgamations!

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


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


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

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

Acronyms Lookup Wikipedia Tutorial

Acronyms Lookup Wikipedia Tutorial

Acronyms Lookup Wikipedia Tutorial

We’re revisiting the PHP web application of Acronyms Lookup Follow Up Tutorial because …

  • knowledge moves on, and we can normally think of either new ways (eg. today we add an onkeydown event … ” onkeydown=’okd(event);’ ” …

    function okd(event) { // thanks to https://stackoverflow.com/questions/15355948/preventing-tab-to-cycle-through-address-bar
    if ((event.keyCode == 9 || event.keyCode == 13 || event.keyCode == 10) && event.shiftKey == false) {
    getacronym(event.target.value); // rejoin onblur event logic
    }
    }

    … to the textbox to allow an Enter key function as well as a Tab key does on non-mobile platforms to set off the onblur event logic, which is a good logical improvement when only one textbox is involved in user interaction) or new functionality to add, when relooking at projects after some time (a practice we recommend) … and…
  • the whole point of an acronym is that that shortening itself often hides complexity, which we think links to Wikipedia

    function wikilinkit(inwds) {
    return "<a target=wikif onmouseover=\"window.open('//en.wikipedia.org/wiki/" + inwds.toLowerCase().replace(/\ /g,'_') + "','wikif');\" href='//en.wikipedia.org/wiki/" + inwds.toLowerCase().replace(/\ /g,'_') + "'>" + inwds + "</a>";
    }

    function getacronym(vsselname) { // textbox onblur event logic
    //code above ... see a bit of it in excerpt later ...
    var w = window.open();
    w.document.open();
    var bits=output.split('</td><td>');
    for (var ij=(-2 + bits.length); ij>1; ij--) {
    if ((bits[ij] + ' ').substring(0,1).toUpperCase() >= 'A' && (bits[ij] + ' ').substring(0,1).toUpperCase() <= 'Z') {
    output=output.replace('</td><td>' + bits[ij] + '</td><td>', '</td><td>' + wikilinkit(bits[ij]) + '</td><td>');
    }
    }

    w.document.write(output.replace('vis' + 'ible','VIS' + 'ible').replace('hid' + 'den','VIS' + 'IBLE').replace('hid' + 'den','VIS' + 'IBLE').replace('hid' + 'den','VIS' + 'IBLE').replace('hid' + 'den','VIS' + 'IBLE'));
    w.document.close();
    // code below
    }

    … can really help the user understand more, and be functionally quite useful

How do we know? Well, we tried it, and found in a short space of time we learnt a lot by (on non-mobile) hovering over (and on mobile, clicking) newly linked acronym meanings, and seeing information to the right, if possible or below, otherwise, in an HTML iframe element containing the Wikipedia lookup of those acronym meaning words.

It may have happened before, we cannot exactly recall, but today’s changes made real use of window.opener “reference to parent(.window) of a window.open() child window” …


function getacronym(vsselname) { // textbox onblur event logic
if (window.opener) { // ie. this window was opened using window.open
window.opener.document.getElementById('acronym').value=vsselname;
window.opener.getacronym(vsselname);
} else {

//usual parent (ie. window.opener) textbox onblur logic goes here
}
}

… so that a user can enter new acronyms in any textboxes that present themselves (parent window, or otherwise), and the logic to open a new window (via window.open) is redirected back to that very first textbox’s (onblur logic, eventually), every time.

You can check out these changes of getacronymdata.htm‘s acronym web application to see (or try) this all for yourself.

You can also see this play out at WordPress 4.1.1′s Acronyms Lookup Wikipedia Tutorial.


Previous relevant Acronyms Lookup Follow Up Tutorial is shown below.

Acronyms Lookup Follow Up Tutorial

Acronyms Lookup Follow Up Tutorial

Wanted, today, to follow up on yesterday’s Acronyms Lookup Primer Tutorial as shown below, with some improvements, we think would be good, regarding …

  • making its aesthetics more impactive … via background image up the top, created by a combination of (Mac) Paintbrush and good ol’ Gimp (you may want to refer to Gimp Transparency Primer Tutorial here) … the inspiration for which came from this link and which set in play, for consistency’s sake, that if some of the more modern background image acronyms are used we should get a result, even if that acronym is not on the NaCTeM database, but not say they have a “frequency” nor “since” value (to differentiate them) … affecting …
  • add to the functionality by allowing sorts on columns in the header fields … do you remember jQuery Sortable Table Primer Tutorial? … we include this functionality … which meant that …
  • all JSON parsing will now be handled by PHP (whether uppercase or lowercase), in this amended parent HTML you could call getacronymdata.htm calling getacronymdata.php (and the differences to yesterday’s can be found at getacronymdata.htm and getacronymdata.php)

You may notice with the amended HTML that we made use of JavaScript “var w = window.open();” (exactly) and JavaScript “w.document.write([newHTMLviaPHP]);” to have the jQuery Sortable Table logic happen at the web page’s onload event, where so much needs to go on, when you get into HTML and JavaScript usage, and where the interface of traditional JavaScript and jQuery means that you should not assume both “onload” logics will get a look in without testing this out for yourself.

We’ve tagged this posting with “ESL” (because we leave it open to a teacher of English whether such a web application could become a resource for a good lesson about acronymns). We think the increasing everyday use of acronyms in all walks of life maybe make it a necessary “getting by” lesson for English learners, but maybe not very early English learners.

Hope you like the new web application that results at this live run.


Previous relevant Acronyms Lookup Primer Tutorial is shown below.

Acronyms Lookup Primer Tutorial

Acronyms Lookup Primer Tutorial

It’s good every now and then to see what is new in the world of data feeds on the internet, so that is how, via this great link, we got onto the wonderful Acronym lookup resource at NaCTeM (The National Centre for Text Mining) … thanks …

Acromine: Okazaki, N., Ananiadou, S. (2006) Building an abbreviation dictionary using a term recognition approach. Bioinformatics, Volume 22, Number 24, pp. 3089-3095, Oxford University Press

So this tutorial uses the data emanating from NaCTeM’s feed of Acronym data. You fill in an Acronym of interest into an input text box and known results are sent back in JSON format.

The two big PHP functions of use for JSON parsing are (normally):

Another tool you should have in your armoury for jobs like this is the online JSON validator here. A generic JSON approach to issues could be:

  1. Type the URL you were given into a web browser address bar and have a look at it
  2. Type the URL you were given into //jsonlint.com/ and have it validated
  3. Understand in your own mind what would be different about 1. to make it suitable
  4. Incorporate findings of 3. into massaging of data between file_get_contents and json_decode

Here is a link to some downloadable HTML programming source code which you may want to rename to getacronymdata.html which calls some downloadable PHP programming source code which you may want to rename to getacronymdata.php

Here are a few things you may find interesting about the code …

  • the HTML calls the PHP via jQuery Ajax (and avoids cross-domain issues by using local PHP)
  • the HTML will parse the JSON callback data if it is a totally capitalised entry (using JSON.parse()), else the PHP will do the JSON parsing
  • we found the raw callback data needed the outer [] stripped to be JSON parsable

So maybe you will find something interesting with today’s live run, and hope to see you tomorrow with improvements.

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


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


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

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

Viewport and CSS Calc Primer Tutorial

Viewport and CSS Calc Primer Tutorial

Viewport and CSS Calc Primer Tutorial

Keeping on with some themes of yesterday’s Responsive Design Viewport Width Considerations Tutorial, today, we combine ideas around …

… in a “proof of concept” web application we are using to explore ideas from the ground up … hello, wormies!

This is precise pixel placement 101, bringing us to a division of concept with webpage design …

Screen Viewport
Width and Height Unitary Units px px
Width Proportionate Units % vx
Height Proportionate Units % vh
Width (or Left) Calc-friendly %,px %,px,100vx
Height (or Top) Calc-friendly %,px %,px,vh,100vh

… where our “proof of concept” findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport width: calc(100vx – 60px); CSS definition type of syntax that sounds great on paper does not appear to work in practice.

So take a look at our very symmetric viewport_poc.html‘s live run link …

… or HTML iframe supervision to see what we are getting at here.

You can also see this play out at WordPress 4.1.1′s Viewport and CSS Calc Primer Tutorial.


Previous relevant Responsive Design Viewport Width Considerations Tutorial is shown below.

Responsive Design Viewport Width Considerations Tutorial

Responsive Design Viewport Width Considerations Tutorial

Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of …

  • Mobile Friendly Meta Viewport Tag Zoom Tutorial by now going with …

    Was .. Now is

    <meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Google PageSpeed and Firebug Mobile Friendly Primer Tutorial by now going with …
    Was ..

    function widthfix() { //
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
    document.getElementById('body_content').style.width='100%';
    document.getElementById('nav_layer').style.width='100%';
    document.getElementById('widget0').style.width='100%';
    }
    Now is

    function widthfix() { //
    if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
    document.getElementById('body_content').style.width='100%';
    document.getElementById('nav_layer').style.width='100%';
    document.getElementById('widget0').style.width='100%';
    }

Why?

  • viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple …

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts

Food for thought, we hope, for those chipping away at responsive design amalgamations!

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


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

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

Responsive Design Viewport Width Considerations Tutorial

Responsive Design Viewport Width Considerations Tutorial

Responsive Design Viewport Width Considerations Tutorial

Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of …

  • Mobile Friendly Meta Viewport Tag Zoom Tutorial by now going with …

    Was .. Now is

    <meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Google PageSpeed and Firebug Mobile Friendly Primer Tutorial by now going with …
    Was ..

    function widthfix() { //
    if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
    document.getElementById('body_content').style.width='100%';
    document.getElementById('nav_layer').style.width='100%';
    document.getElementById('widget0').style.width='100%';
    }
    Now is

    function widthfix() { //
    if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
    document.getElementById('body_content').style.width='100%';
    document.getElementById('nav_layer').style.width='100%';
    document.getElementById('widget0').style.width='100%';
    }

Why?

  • viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple …

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts

Food for thought, we hope, for those chipping away at responsive design amalgamations!

You can also see this play out at WordPress 4.1.1′s Responsive Design Viewport Width Considerations Tutorial.

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

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

Full Sized Fixed Background Image Primer Tutorial

Full Sized Fixed Background Image Primer Tutorial

Full Sized Fixed Background Image Primer Tutorial

We’ve started a Full Sized Fixed Background Image web application project that dovetails a little with that recent PHP Image Dimensions Linux and Windows Glob Curl Tutorial, and so we added links to today’s PHP cover_fixed.php‘s live run to the “x” dropdown elements there.

There are a couple of aspects to this new project of immediate interest, in our view, those being …

  • the basic CSS styling basis, we got inspired to use, via W3School’s Full Size Background Image

    html {
    background: url(img_man.jpg) no-repeat center fixed;
    background-size: cover;
    }

    … onto which we added a “background image independently transparent” (thanks to advice of this great link when we presented Column Intelligence Primer Tutorial) piece of additional functionality, involving CSS linear-gradients

  • use the file object method to browse for local image files in addition to offering an image URL textbox method of changing that background image data

Or see it interfaced to today’s changed find_images_via_size.php that can be downloaded or tried out at this live run link.

You can also see this play out at WordPress 4.1.1′s Full Sized Fixed Background Image Primer Tutorial.

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

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

Inhouse Slideshow Design Exif Order Tutorial

Inhouse Slideshow Design Exif Order Tutorial

Inhouse Slideshow Design Exif Order Tutorial

Ever get those “oops” moments?

Anyone, anyone? … no, Reverend William Archibald Spooner … we will not accept that answer here now, thank you very much.

Ever get an “oops” moment that you can wait for a little while before resolving? …

No, William Archibald, history does not always repeat, and may we reiterate … no, William Archibald, history does not always repeat … that’s right … history does not always burprepeat.

Well, we got one regarding our Inhouse Slideshow reworkings. You see, though we automated, as with many automation thoughts, there is a chance some nuances don’t come across with translation (of concept). In the “old days” of this concept we’d manually put together HTML that involved a table with a single row (tr) element containing multiple (horizontal scrolling) cells (td elements) in an order of our choosing. What we have forsaken, if you will, with our automation, is the absolute control of that ordering process …in short hand …


we've automated into PHP glob() usage, a piece of mind "ordering of a moment"

… that latter method involving screen captures placed via Mac Paintbrush into slideshow slide images, and often realizing we’d missed something, and going back to infill or jump forward with image file naming with regards to its numerical uniquifiers.

We’d left poor old “glob” to rescramble what we’d been thinking, order wise, regarding the slideshow slide presentation order. This is too much to ask of poor old “glob” which orders by default via an alphabetical sort. Truth be told, having lost track of the original HTML efforts of the past, now, this is too much to ask of any software component. However, we can reduce the “automation error rate” of poor old “glob” (alone) by helping it out with good ‘ol natsort

natsort — Sort an array using a “natural order” algorithm

… which would reorder a “glob” alphabetic sort order like …


Word_Web_Primer-0of.jpg Word_Web_Primer-10of.jpg Word_Web_Primer-11of.jpg Word_Web_Primer-1of.jpg Word_Web_Primer-2of.jpg Word_Web_Primer-3of.jpg Word_Web_Primer-4of.jpg Word_Web_Primer-5of.jpg Word_Web_Primer-6of.jpg Word_Web_Primer-7of.jpg Word_Web_Primer-8of.jpg Word_Web_Primer-9of.jpg

… into a “natsort” order like …


Word_Web_Primer-0of.jpg Word_Web_Primer-1of.jpg Word_Web_Primer-2of.jpg Word_Web_Primer-3of.jpg Word_Web_Primer-4of.jpg Word_Web_Primer-5of.jpg Word_Web_Primer-6of.jpg Word_Web_Primer-7of.jpg Word_Web_Primer-8of.jpg Word_Web_Primer-9of.jpg Word_Web_Primer-10of.jpg Word_Web_Primer-11of.jpg

… which, we know (within ourselves) matches better the line ————— of our thinking. See, _______________—————. Thanks to this useful link for the natsort() usage ideas here.

Unit testing completed, the deployment, again, matches those ideas of the recent Inhouse Slideshow Design Exif Zip Tutorial … in that …

You can also see this play out at WordPress 4.1.1′s Inhouse Slideshow Design Exif Order Tutorial.


Previous relevant Inhouse Slideshow Design Exif Zip Tutorial is shown below.

Inhouse Slideshow Design Exif Zip Tutorial

Inhouse Slideshow Design Exif Zip Tutorial

An inhouse reason is behind today’s additional functionality on top of this year’s Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial about our “inhouse slideshow” presentation arrangements. This is that we now cater for, as an “input ingredient” choice on top of the existant …

  • image *[-_][0-9]*of.[jJgGpP][pPiInN]* or *[-_][0-9]*of.[jJgGpP][pPiInN]* … with, as of today …
  • zip *[-_][0-9]*.[zZ][iI][pP] or *[-_][0-9]*of.[zZ][iI][pP] containing aforesaid mentioned image filespecs, and only if the former is not found

… but along the way there is a functionality benefit fixing a couple of bugs and extending the filespec filtering above to “lasoo in” more possibilities.

We got helped out by the recent work of Sass CSS Stylesheet Watchdog Updates Tutorial‘s PHP startBackgroundProcess function to start background processes and its ourrealpath, a wrapper (that little bit different again) to PHP’s native realpath function (helping with absolute paths).

Deployment of …

  • the changed index.php new “inhouse slideshow” presentation supervisor (exemplified by this live run link) reading of a slideshow_0.zip zip file … was done in …
  • virtually an unchanged job.ksh (Korn shell) arrangement … as per the answers

    # ksh ./job.ksh
    Files of a pattern and the same size replaced by a new version ...

    Path to new version of file eg. ./index.php
    ./index.php

    Must find this string eg. foreach (glob(
    foreach (glob(

    Must be this many bytes long eg. 7006 or 11472
    11472

    Path to files to be replaced by this new version of file eg. /a/path/to/root/directory/of/interest/
    $HOME/public_html/

    Filespec or filename of files to be replaced by a new version of file eg. index.php
    index.php

    Starting the assembly of information to later execute a copy script or manual cp statements ...

    cp ./index.php $HOME/public_html/iMovie/YouTube/Primer/index.php
    cp ./index.php $HOME/public_html/iMovie/YouTube/index.php
    ... Hardworking duck paddling furiously lives here ...
    ... Hardworking duck paddling furiously lives here ...
    ... Hardworking duck paddling furiously lives here ...
    ... Hardworking duck paddling furiously lives here ...
    ... Hardworking duck paddling furiously lives here ...
    ... Hardworking duck paddling furiously lives here ...

    cp ./index.php $HOME/public_html/DropBox/index.php

    Optional ksh file as above to create and get edit and execute advice eg. ./therealchange.ksh
    ./therealchange.ksh
    vi ./therealchange.ksh # can edit, with a wq! to save, in vi editor
    ksh ./therealchange.ksh # can execute the statements to perform the copying
    #
    # vi ./therealchange.ksh # we did check it out
    # ksh ./therealchange.ksh # we did deploy the changed "inhouse slideshow" presentation changed pieces of PHP code

And so, what was the inhouse reason? Free up some inodes on the RJM Programming web server, because we can zip up and delete image *[-_][0-9]*of.[jJgGpP][pPiInN]* or *[-_][0-9]*of.[jJgGpP][pPiInN]* into zip *[-_][0-9]*.[zZ][iI][pP] or *[-_][0-9]*of.[zZ][iI][pP] to replace many files for one, that, when called upon by a curious user, will unzip its contents for an hour (hence the “startBackgroundProcess” interest) while the user looks at an “inhouse slideshow” presentation, the reason being not every “inhouse slideshow” presentation zipfile will be being accessed within any given hour, and so we will still save on inodes (for a longer response time small counterpoint).


Previous relevant Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial is shown below.

Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial

Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial

As promised with yesterday’s Inhouse Slideshow Design Exif Integration Tutorial we’re here today to talk about a Korn Shell assisted deployment strategy for …

the “implementation and deployment” phase of the “Inhouse Slideshow Exif Integration” project

We have the presentation part of many of our blog postings featuring this “Inhouse Slideshow” methodology, and recently we genericized it from a different set of HTML slideshow displays to a single index.php distributed to web server folders where these slideshow images resided. By “generic” we mean generic, as they all feature identical content, so our strategy is … ask of the user the following information (for our parent job.ksh), the safeguards being with the fact that they are not allowed to use blank answers, and the input file size in bytes is asked for, as well as a string to find in all those input files …


#!/bin/ksh
echo 'Files of a pattern and the same size replaced by a new version ...'
echo ''
echo 'Path to new version of file eg. ./index.php'
read index

if [ -f "$index" ]; then
echo ''
echo 'Must find this string eg. foreach (glob('
read findstring

if [ ! -z "$findstring" ]; then
echo ''
echo 'Must be this many bytes long eg. 7006'
read thismany

if [ ! -z "$thismany" ]; then
echo ''
echo 'Path to files to be replaced by this new version of file eg. /a/path/to/root/directory/of/interest/'
read path

if [ -d "$path" ]; then
echo ''
echo 'Filespec or filename of files to be replaced by a new version of file eg. index.php'
read filespec

if [ ! -z "$filespec" ]; then
echo ''
echo 'Starting the assembly of information to later execute a copy script or manual cp statements ...'
# find $path -size ${thismany}c -name "$filespec" -exec cp $index {} \;
IFS=
result=`find $path -size ${thismany}c -name "$filespec" -exec grep -H "$findstring" {} \;`
if [ -z "$result" ]; then
echo "No candidate files for change"
exit
else
indexsed=`echo "$index" | sed '/\//s//~!/g'`
echo $result | cut -d : -f 1 | uniq | sed "/^/s//cp $indexsed /g" | sed '/\~\!/s//\//g'
echo ''
echo 'Optional ksh file as above to create and get edit and execute advice eg. ./therealchange.ksh'
read thisksh

if [ ! -z "$findstring" ]; then
echo "#/bin/ksh" > $thisksh
echo $result | cut -d : -f 1 | uniq | sed "/^/s//cp $indexsed /g" | sed '/\~\!/s//\//g' >> $thisksh
echo "vi $thisksh # can edit, with a wq! to save, in vi editor"
echo "ksh $thisksh # can execute the statements to perform the copying"
exit
fi
fi
echo ''
echo 'Finished'
fi
else
echo "$path path is non-existant"
fi
fi
fi
else
echo "$index file not found"
fi
exit

… the use of which you can see us applying in a MacBook Pro (local MAMP web server) environment and then at the rjmprogramming.com.au web server as a “live run”. Notice all the sanity checks we make, such as editing the optional script output of the parent script execution, and the rerun to establish that then there should be no further input files found to process, and the (doh!) bringing up of one of the Inhouse Slideshow presentations to see that now, yes, they include an “Exif Slideshow” mode of use improvement. If you write such a procedure yourself, please know that a backup mechanism could improve your peace of mind considerably. Korn Shell being that powerful tool it is, it can happen in the blink of an eye, a big mistake by user mistake!


Previous relevant Inhouse Slideshow Design Exif Integration Tutorial is shown below.

Inhouse Slideshow Design Exif Integration Tutorial

Inhouse Slideshow Design Exif Integration Tutorial

A project of reasonable scale has several phases to it, the ones that spring to mind for us, being …

  • concept
  • planning and design
  • coding and unit testing
  • user acceptance and testing
  • platform acceptance and testing
  • implementation and deployment
  • going live
  • monitoring performance and uptake and usage patterns
  • user feedback and improvement planning

… in that order conceptually and initially, perhaps, but often messed up as a project matures and grows.

We have a mini project getting the work of yesterday’s PHP Exif Image Information Revisit Tutorial‘s PHP Exif information web application’s workings and aesthetics be put to good use, and straight off the bat we got going …

  • project “One Image Website Exif Integration” as small enough (“planning and design” established we’d only need to change 6 or 7 files) to have a very simple TextWrangler 7 file session followed by sftp over to the RJM Programming website as its “implementation and deployment” phase … the coding changes involving …
    HTML (new)

    <body id="body" style="background-color: #E4E4E4;" onload=' if (document.URL.indexOf("exif=") != -1) { dexifit(); } window.setTimeout("FadeInImage()", 4000); '>
    <a onclick=huhit(); onmousedown=huhittwo(); style=display:inline-block;cursor:pointer;text-decoration:underline;>Exif Run</a>


    <div id=dexif></div>
    </body>
    </html>
    CSS (new) is “Overlay Iframe Remembering” work

    <style>
    iframe {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    }
    </style>
    Javascript (new code) and integration steps


    function huhit() {
    top.location.href=('' + document.URL).split('#')[0].split('?')[0] + '?exif=y';
    }

    function huhittwo() {
    alinktop='#';
    }

    function dexifit() {
    document.getElementById('dexif').innerHTML='<iframe id=iexif style="position:absolute;top:0px;left:0px;z-index:45;" src=../PHP/read_exif_off_image_rotate.php></iframe>';
    }

    //
    // The existence of iframe "iexif" causes the "get new image" Javascript function to intervene and update the "src" property of iframe "iexif" with a
    // URL showing an image Exif report webpage as per "top.location.href=('' + document.URL).split('#')[0].split('?')[0] + '?exif=y';" codeline above (rather than display a new image and scroll within it (that being the default behaviour the build up for unchanged for our work))
    //

    … and today we shall …

  • get up to the “implementation and deployment” phase of the “Inhouse Slideshow Exif Integration” project … via …

    … above (or see them in a new window with the changed index.php‘s live run) … the “implementation and deployment” phase being involved (and big) enough that we need to explain more about with tomorrow’s blog posting … and in the meantime as a “refresher” have a read of Inhouse Slideshow Design Makeover Tutorial below

Previous relevant Inhouse Slideshow Design Makeover Tutorial is shown below.

Inhouse Slideshow Design Makeover Tutorial

Inhouse Slideshow Design Makeover Tutorial

One of the last times we considered the way we “worked” using our “Inhouse Slideshow Design” was when we presented Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial below, some time back. Perhaps, that is because this method has gone out of favour with us, with the number of image files required, and we’ve preferred in more recent times to …

  • annotate individual screenshots
  • compose multi-slide PDF presentations
  • compose multi-slide animated GIF presentations
  • compose multi-slide video presentations (much less often) … rather than using …
  • inhouse slideshow … when many slides are needed to explain a blog posting

Looking back, we spent too long creating these inhouse slideshows, compiling image lists into td cells of a single tr row in a single table element within individually tailored index.html (HTML) files.

Today’s makeover genericizes an overarching piece of PHP (we’ll be calling index.php) we place into the web server directory with these


foreach (glob("*-[0-9]*.[jJgGpP][pPiInN]*") as $ifil) {
if (strpos($spush, "'" . $surlprefix . $ifil . "'") === false) {
$ibits=explode("-", $ifil);
if (sizeof($ibits) > 1) {
$proposedstitle=str_replace("_", " ", $ibits[0]);
if ($proposedstitle != $stitle) {
if ($stitle == "") {
$stitle=$proposedstitle;
} else if (strpos($sothers, $proposedstitle) === false) {
$spush.="\n firstones.push(" . $scnt . "); \n";
$spush.="\n lastones.push(" . (-1 + $scnt) . "); \n";
$sothers.="<br><a id='apre" . $sscnt . "' href='#s" . $scnt . "' title=\"Movie'ize Here vs Follow Red Right Arrows with Bottom Scrollbar\" onclick='prehavealook(this); havealook(-" . $scnt . ");'>" . $proposedstitle . "</a>";
$sscnt++;
}
}
$smodebit.="\n if (smode != '0') document.getElementById('row').innerHTML+='<td><span style=\"color:red;font-size:14px;\"><b>--></b></span></td><td><img onclick=\"onck(this);\" id=\"i" . $scnt . "\" src=\"" . $surlprefix . $ifil . "\" title=\"" . $proposedstitle . "\" /></td>'; \n";
$spush.="\n uarraydatauri.push('" . $surlprefix . $ifil . "'); \n";
$scnt++;
}
}
}

… image filenames we can collect in that “glob” friendly *-[0-9]*.[jJgGpP][pPiInN]* (filespec) habit we had (and have), make genericization possible, and we’ll proceed on that understanding. What extra is needed, though, is to cater for more than one set of such slideshow image sets within any one web server directory (gleaned off the incoming URL, in PHP).

Here’s what we came up with in PHP called index.php we’ll start placing into the relevant rjmprogramming.com.au web server folders, over the next several days.


Previous relevant Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial is shown below.

Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial

Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial

To us, there are great similarities between animated GIFs and slideshows, as two forms of “presentation”, and so to extend yesterday’s Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI “exports” we add the functionality for …

  • slideshow creation (using our inhouse methods) which defaults to a horizontal (hashtag type of) navigation … as well as adding a …
  • slideshow creation, with Data URI image data, using functionality as if CSS z-index (ie. slides stacked on top of each other in “overlay” style) was being used, but actually isn’t …

… that little bit different to another “stacked” (or z-index feeling) approach we talked about with Multiple Class Slideshow Details Tutorial, where HTML element “class” properties were changed so that the last class defined reflects the look of the slideshow slide desired at any given time. We just use an array, and a setTimeout timer to achieve the same ends today, with our work (or “presentation”). If this “horizontal versus stack” navigation choice interests you, also take a read of HTML Input Element Types Randomized History Tutorial.

Again, with all this added functionality, because it is “hosted” in an HTML iframe element all the existant web browser (Windows right click or Mac OS X two finger gesture) functionality can come into play, and make life quite interesting for your non-mobile users “collecting” data URIs … there are worse hobbies!

You can see this in the context of how this PHP tutorial_to_animated_gif.php code changed for slideshows in this way or try it as a live run.


Previous relevant Animated GIF via PHP Writing PHP Data URI Tutorial is shown below.

Animated GIF via PHP Writing PHP Data URI Tutorial

Animated GIF via PHP Writing PHP Data URI Tutorial

The previous relevant “PHP writes PHP” methodology animated GIF creator we talked about, first, with Animated GIF via PHP Writing PHP Primer Tutorial came back to mind yesterday with our Missing Javascript Audio on Unmute Tutorial, where we pondered on whether an animated GIF could be represented on a webpage by a data URI. Why take an interest in this? Data URIs are very important to do with …

  • future mobile development web form navigation benefits from their usage
  • the use of data URIs make your web pages independent of web server location issues, so make your web data more portable, and flexible

… and ideally, animated GIFs are also not just a decorative part of all this web application usage (as they can be a very efficient representation of an animation that could not be a more succinct way to show that animation or presentation), and if they can be made to be like any other GIF or image data file in the ways they can be represented (and used), then that is all for the good.

So we changed the Jeroen van Wissen’s inspired PHP (“PHP writes PHP” methodology) code tutorial_to_animated_gif.php code allow for this extra animated GIF data URI representation in a new additional HTML iframe (containing the animegif.html of code below) that when harnessing existant web browser (Windows right click or Mac OS X two finger gesture) functionality can glean for us, as required, that animated GIF’s data URI representation. But don’t get too excited about this being rocket science, in that with a bit of effort, and PHP, it could have been gleaned from what we already produced, in that (in PHP “land”) …


$lastbitto="\$fp = fopen('animegif.gif', 'w');
\$data = \$gif->GetAnimation();
\$dataUri = 'data:image/gif;base64,' . base64_encode(\$data);
fwrite(\$fp, \$data);
fclose(\$fp);
\$fp = fopen('animegif.html', 'w');
fwrite(\$fp, '<!doctype html><html><body><h1>Data URI version below<h1><br><h4> ... via web browser (Windows right click, Mac OS X two finger gesture ...</h4><br><img src=' . \"\\n\" . \$dataUri . \"\\n\" . ' title=DataURI></img></body></html>');
fclose(\$fp);";

You can see this in the context of how this PHP code changed in this way or try it as a live run.


Previous relevant Animated GIF via PHP Writing PHP Primer Tutorial is shown below.

Animated GIF via PHP Writing PHP Primer Tutorial

Animated GIF via PHP Writing PHP Primer Tutorial

We find another very useful reason for PHP to write PHP. Today we establish a PHP web application to dynamically create Animated GIF images via some still images, like Gifpal would do.

We have some great open source PHP code to thank for the basis of the functionality we found at Jeroen van Wissen’s very useful link, thanks.

Then we added a more user friendly interface to get the information off the user we need. We present this in an HTML form, which navigates to the same PHP to do the actual assembly of the Animated GIF via techniques where PHP writes PHP … and really needs to, to be useful.

Do you remember, last, when we did some PHP writing PHP functionality … PHP Writes PHP Vertical TextBoxes Primer Tutorial?

And inside the PHP it makes big use of the GD and Image Functions to read and write the image data we assemble via the user information.

This Animated GIF form of animation is the easiest to implement, as it consists of just the one GIF image file, but the user has very little control over the animation settings, such as the delay between stills, one of the settings we ask about in our web application.

Our PHP source code today you could call tutorial_to_animated_gif.php and we redirect you to some live run ideas …

  • normal run with HTML form which posts back to itself … live run
  • example GET parameters run (like our tutorial picture)

Hope you find this tutorial useful.

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


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


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


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


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


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


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


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

Posted in Operating System, Tutorials, Uncategorized, eLearning | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

PHP Image Dimensions Linux and Windows Glob Curl Tutorial

PHP Image Dimensions Linux Linux and Windows Glob Curl Tutorial

PHP Image Dimensions Linux and Windows Glob Curl Tutorial

Yes, we do believe that of the PHP modes of use, those being …

  • surfing the net
  • command line
  • curl

… there can be a role for curl as that hybrid “bit of both worlds” mode of use with today’s changed find_images_via_size.php that can be downloaded or tried out at this live run link.

That circumstance is regarding when a user is online (ie. starts out “surfing the net”) and would prefer an option to just see the Image Dimensions report as a really simple “no bells and whistles” offering. Though there are ways, at least with Linux (and macOS) tee command to do this quite neatly and stay in “surfing the net” mode. But this did not appeal to us now that we support Windows as the underlying operating system. And this is where “curl” being that hybrid is interesting, and there is “delimitation” interest galore in our idea to, for this “simple report curl subproject” …

  • within “surfing the net” mode offer a new HTML form input type=button as per …

    <input style='background-color:orange;font-size:20px;' type=button onclick='shortlist();' value=Short></input>
  • with Javascript event logic as per …


    function shortlist() {
    var ccmd=document.URL.split('?')[0].split('#')[0] + '?curl=' + encodeURIComponent('-p') + encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent(document.getElementById('path').title) + encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent('-f') + encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent(document.getElementById('filespec').title);
    var sels=document.getElementsByTagName('select');
    for (var isels=0; isels<sels.length; isels++) {
    if (('' + sels[isels].title) != '') {
    ccmd+=encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent(sels[isels].title);
    }
    }
    location.href=ccmd;
    }

  • feeding off the way we now utilize HTML form element (user) data collection element title attributes in conjunction with Javascript functions …

    function selsett(os) {
    for (var i=0; i<os.length; i++) {
    if (os.options[i].selected) {
    if (os.id == 'wo') {
    os.title=(os.options[i].title.replace(/\ /g,String.fromCharCode(9)) + String.fromCharCode(9) + document.getElementById('wv').value + String.fromCharCode(9)).replace(' ',' ').replace(' ',' ').replace(' ',' ');
    } else if (os.id == 'ho') {
    os.title=(os.options[i].title.replace(/\ /g,String.fromCharCode(9)) + String.fromCharCode(9) + document.getElementById('hv').value + String.fromCharCode(9)).replace(' ',' ').replace(' ',' ').replace(' ',' ');
    } else {
    os.title=os.options[i].title.replace(/\ /g,String.fromCharCode(9));
    }
    }
    }
    }

    function sett(os) {
    if (os.id == 'wv') {
    selsett(document.getElementById('wo'));
    os.title='';
    } else if (os.id == 'hv') {
    selsett(document.getElementById('ho'));
    os.title='';
    } else {
    os.title=os.value;
    }
    }
  • where the String.fromCharCode(9) (horizontal tab) delimitation used is a hint that “curl” might be the “end game” here … huh?! … well, “curl” is called from the command line (or we do it in PHP “surfing the net” mode via exec) and it takes as its argument an absolute URL, which as you probably know consists of “[absoluteURL]?arg1name=arg1value&arg2name=arg2value” type of arrangement … Linux/macOS alert!!! (and we all know the woooooorrrrrllllldd needs more lerts … but we digress) … in Linux/macOS “&” has that other meaning of “put command into background” … so rather than trying to work out “curl” syntax in this scenario we’ve always used alternative delimitation ideas (hence the tabs) in the one (now far more complex) “?arg1name=arg1value” data arrangement … leading to us …
  • recalling “surfing the net” with that function shortlist ?curl=[complexArg1Value] and on that re-entry use the PHP to …

    if (isset($_GET['curl'])) { // in surfing the net mode wanting to call a curl mode of use execution
    exec("curl \"" . "HTTP://" . $_SERVER['SERVER_NAME'] . "" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "" . str_replace("find_images_via_size.php","",explode("#",explode("?",$_SERVER['REQUEST_URI'])[0])[0]) . "find_images_via_size.php?commandline=" . urlencode(str_replace("+"," ",urldecode($_GET['curl']))) . "\"");
    echo "<!doctype html><html><head><title>Find Images Via Size - RJM Programming - October, 2019</title><meta charset='utf-8'></head><body><div>Find Images Via Size<br><br>RJM Programming - October, 2019<br><br><br>Width x Height File<br>" . str_replace(" "," ",str_replace("\n","<br>", file_get_contents("find_images_via_size.txt"))) . "</div></body></html>";
    exit;
    }

    if (isset($_GET['commandline'])) { // in curl mode
    $gcl=str_replace("+"," ",urldecode($_GET['commandline']));
    if (!isset($argc)) {
    if (strpos($gcl, "\t") !== false) {
    $argv=explode("\t", "file_images_via_size.php\t" . $gcl);
    $argc=sizeof($argv);
    for ($ii=0; $ii<$argc; $ii++) {
    $argv[$ii]=trim($argv[$ii]); // join "command line" mode of use logic
    }
    valit('','');
    }
    }
    }

    … rejoin “command line” mode of use logic by inventing our own (does not normally exist with “curl”) $argv array of size $argc … and …
  • you can output Image Dimension report data in that simplified way to the webpage (rather than the command line) and make use of that (use of) &emsp; advice we got from this useful link regarding tabstop spacing simulation on a webpage (without using table elements) … thanks

… adding onto that “command line” mode of use “push” of yesterday’s PHP Image Dimensions Linux and Windows Glob Command Line Tutorial.

You can also see this play out at WordPress 4.1.1′s PHP Image Dimensions Linux and Windows Glob Curl Tutorial.


Previous relevant PHP Image Dimensions Linux and Windows Glob Command Line Tutorial is shown below.

PHP Image Dimensions Linux Linux and Windows Glob Command Line Tutorial

PHP Image Dimensions Linux and Windows Glob Command Line Tutorial

Yesterday’s PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial helped out a PHP …

  • “surfing the net” mode of use … but what if you are on Windows? (well, today we link up PHP’s glob‘s organizational skills with its image interrogation getimagesize skills to help) … and as far as …
  • “command line” mode of use … yes, that could be useful as a report with brevity … no links, nor webpages, but still lots of the data of interest in a text Image Dimensions report

Differentiating these two different modes of use in PHP? Pretty simple really …


<?php
if (isset($argc)) {
// do command line mode of use logics here
} else {
// do surfing the net (or perhaps, curl), modes of use here logics here
}
?>

If this is of interest, take a skeg at today’s changed find_images_via_size.php that can be downloaded or tried out at this live run link.


Previous relevant PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial is shown below.

PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial

PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial

It’s a little bit funny, this feeling inside, how yesterday’s PHP Image Dimensions Linux Find File Awk Sed UX Tutorial was about UX (or user experience), what to our eyes very much involves “front-end” concepts, yet the vast majority of work done on this remained on the “server” side of the software coding ledger. Even our one tiny foray (via “Operation 4Ay U Over There, ‘guv”) into Javascript “client land” we used to set non-default select (dropdown) element values on analyzing posted data we could have handled in “server land” by inserting some “selected” HTML element attributes. And so, yesterday, we didn’t even have a “script” tag within a “head” tag, which is quite unusual.

Not so today, though, where we unleash Javascript in all its glorious “client side” partnership with the “server side” PHP, as a layer of web application logic for immediately before the user sees the web page, from that time when a “web browser address bar URL” equates to Javascript DOM’s “document.URL”, through “document onload” event logic and responding to user actions. Today, in this regard, we convert that hardcoded “x” between the width column and the height column into a select (dropdown) element initially showing that “x” but selectable so that …

  • Exif Information
  • Blog Search
  • Animated GIF Creation

… “client facing” functionalities have been added with today’s changed find_images_via_size.php that can be downloaded or tried out at this live run link.

Please note with Node.js Javascript is used as a “server” language and “client” language. Interesting, huh?!


Previous relevant PHP Image Dimensions Linux Find File Awk Sed UX Tutorial is shown below.

PHP Image Dimensions Linux Find File Awk Sed UX Tutorial

PHP Image Dimensions Linux Find File Awk Sed UX Tutorial

Yesterday’s PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial set the scene for a new approach to an Image by Dimension Size web application idea. Today we turn our attention to …

  1. user experience (ie. UX) functionality improvements …
  2. user experience fixes for annoyances

… both contributors to the overall viability of a web application project.

What are some examples of this for this project? We’d say the offering of several “sorting of data” mechanisms falls into the “improvements” category. The moving of the “form” back above the fold when there is a report to show is the fix of an annoyance, and, it pans out, an improvement, because we take advantage of this change to …

  • make it an optional “read” for non-IE and non-Edge users by encasing it in a “reveal star” details tag (and its nested summary) HTML element encasing (initially set to “hide”) … as well as …
  • start initializing form defaults according to user designations so that the form can also be like a report header helper, to explain the Image Find Parameters of an execution run

The emoji hashtag navigation? Doesn’t matter either way, but at least brings attention to a navigational offering.

So here’s the thing. Am sure you can think of a whole swag of offerings to improve. It is up to the programmer, or user acceptance test results, to try to imagine improvement ideas and to imagine what might annoy. On hover (for non-mobile users) over an image link, for example, we faintly show that image full size as a (total) webpage background image. There might be those who hate any overlay clashes to be annoyed by what we were hoping would be an UX functional improvement. More assured, we’d say, are the newly displayed thumbnail images next to the (image) URLs, that when clicked, still go off showing the user the full image in a new (target=_blank) window (or tab … which is a web browser setting of your choosing, to do with the web browser). UX considerations are subjective by nature, though you can look around the net and see lots of do’s and don’ts talked about ad infinitum with regard to UX.

So, “UX-wise” see the changed find_images_via_size.php that can be downloaded or tried out at this live run link.


Previous relevant PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial is shown below.

PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial

PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial

We’ve written web applications to list image files via their dimension, based on the incredible ImageMagick, when we presented the blog post thread ending with PHP ImageMagick Image Dimensions Sort Tutorial. But ImageMagick, alas, does not come out of the box with an operating system, always. Looking for an image bigger than or equal to a particular dimension yesterday, our online research had us thinking, “What about a macOS (or Mac OS X) and Linux “PHP supervises exec supervises find pipes file pipes awk pipes sed” solution (inspired by this useful link, thanks), relying on not much more than having a Unix (ie. Linux) shell?” Sounds good?! And why, pray tell, when macOS has the Finder desktop app? Well, remarkably, here with macOS Mojave, we think we’ve seen better times showing image dimensions. But even if we have missed something, we’re looking for …

  • a report … ideally …
  • tabularized … ideally …
  • linkable to the images themselves … and user interactive tailorable as far as being able to …
  • define width and height operator and value constraints (eg. width >= 567 and height < 751)

… which is all beyond a GUI like macOS’s Finder desktop app. But it isn’t beyond our “PHP supervises exec supervises find pipes file pipes awk pipes sed” solution called find_images_via_size.php that can be downloaded or tried out at this live run link.

We’ve long admired unix’s (ie. Linux’s) sed but our admiration grew with today’s project. It truly is a star of a piece of software functionality. The modesty of “man sed”‘s “sed — stream editor” heading belies the power of the combination …

  • “stream” being any text piped to it … and …
  • “editor” which covers a lot more than just a …
    1. “substituting” tool … when you consider its “regex” type syntax particularly featuring its “group regex” syntax today allowing it to be …
    2. “expanding and repeating of data” tool … eg. find occurrence 1, replace with find occurrence (or back-reference) 1, find occurrence 2, replace with find occurrence (or back-reference) 2,

      $ echo " in Spain " | sed 's/\(\ \)\(in\ [^\ ]*\)/The rain\1\2\1falls mainly on the plain./g'
      The rain in Spain falls mainly on the plain.
      $

Add the incredible Linux (and macOS command line) find and file and awk into the mix and behind the scenes of our PHP web application and PHP could have fed exec (after a quiche entree) … for the example of our MAMP document root HTTP://localhost:888/find_images_via_size.php address bar URL …


cd /Applications/MAMP/htdocs; find . -name '*.*g' -exec file {} \; | sed 's/\(.*g\): .* \([0-9]* x [0-9]*\).*/\2 \1/' | awk 'int($1) > 500 && int($3) > 500 {print}' | sed 's/\(\ \)\(\.[^\<]*\)/\ \<a target=_blank title="\/Applications\/MAMP\/htdocs\/\2" href="\2"\>\2\<\/a\>/g'

… resulting in (the first five lines of result set) …


625 x 896 <a target=_blank title="/Applications/MAMP/htdocs/./HTMLCSS/MIDI.js-master/examples/images/tuna.png" href="./HTMLCSS/MIDI.js-master/examples/images/tuna.png">./HTMLCSS/MIDI.js-master/examples/images/tuna.png</a>
2880 x 1800 <a target=_blank title="/Applications/MAMP/htdocs/./HTMLCSS/web_audio.png" href="./HTMLCSS/web_audio.png">./HTMLCSS/web_audio.png</a>
800 x 563 <a target=_blank title="/Applications/MAMP/htdocs/./vmcommerce/administrator/templates/hathor/template_preview.png" href="./vmcommerce/administrator/templates/hathor/template_preview.png">./vmcommerce/administrator/templates/hathor/template_preview.png</a>
800 x 767 <a target=_blank title="/Applications/MAMP/htdocs/./vmcommerce/templates/atomic/template_preview.png" href="./vmcommerce/templates/atomic/template_preview.png">./vmcommerce/templates/atomic/template_preview.png</a>
2880 x 1800 <a target=_blank title="/Applications/MAMP/htdocs/./stopPropagation_preventDefault.png" href="./stopPropagation_preventDefault.png">./stopPropagation_preventDefault.png</a>

… the parts thereof gleaned via a combination of user interactive HTML input textbox values and PHP dirname(__FILE__) and Linux awk space delimiter arguments and Linux find data and Linux file data and Linux sed “x” inclusions and Linux sed edits (within as well, regarding those file and awk “replace with find occurrence” usages, but others override).


Previous relevant PHP ImageMagick Image Dimensions Sort Tutorial is shown below.

PHP ImageMagick Image Dimensions Sort Tutorial

PHP ImageMagick Image Dimensions Sort Tutorial

It’s natural for people to try to introduce order into their world. No matter what you think of the goings on in the world, you can “retire” into that “cushioned world” of I.T. and create your own order. The most common form of “order” used, we dare to guess, in the I.T. world is to sort data. Our data we started with yesterday’s PHP ImageMagick Image Dimensions Primer Tutorial in the form of image URLs and their dimensions (plus some other fields) presented in a table are a case in point where a lot of people would be quick to point out “that it would be good to sort by width” and those who would “do a triple pike with a double somersault to see data sorted by height”.

If you are in charge of the data that forms your data, that is easy to arrange. But if you are the “second source” you need to work out your own ways to manipulate the data to be able to sort it usefully. We found these manipulations still only had to call on …

  • awk # command line processor repeats column field data
  • sed # command line editor most associated with pipe commands

… with the focus, today, on awk‘s String functionality …

… preparing the ground for the Linux command …

  • sort # sort with its -k -t -n -r switches

… enabling the useful sorting of image URL filespec data presented in a table … order indeed!

You can retry this out for yourself at today’s live run link with its underlying serverside PHP code you could call image_dimensions.php and changed in this way as you wish.


Previous relevant PHP ImageMagick Image Dimensions Primer Tutorial is shown below.

PHP ImageMagick Image Dimensions Primer Tutorial

PHP ImageMagick Image Dimensions Primer Tutorial

We revisit the talents of the brilliant ImageMagick‘s Identify command featuring, last, in Location Services iPad Camera Geolocation Png Metadata Tutorial to start down the road of a web server image information presenter web application.

With ImageMagick command line …


identify [webServerImageFileSpec]

… sums up what we build a web application around, having a PHP shell use its exec method to filter the information through (Linux command line) …

  • awk # command line processor repeats column field data
  • sed # command line editor most associated with pipe commands

… to result in the table contents of our image (specification) table in our web application today.

You can try this out for yourself at today’s live run link with its underlying serverside PHP code you could call image_dimensions.php as you wish.


Previous relevant Location Services iPad Camera Geolocation Png Metadata Tutorial is shown below.

Location Services iPad Camera Geolocation Png Metadata Tutorial

Location Services iPad Camera Geolocation Png Metadata Tutorial

Today’s “foot further into the water” progress building on Location Services iPad Camera Geolocation Jpeg Exif Tutorial, as shown below, has a posting title that includes the word “Geolocation”, but alas, we’ve found with PNG files coming off our iPad that Geolocation or Geotagging information is lost, unlike our recent iPad JPEG files, and so our preference for the latter has become stronger. We discuss this also at WordPress 4.1.1′s Location Services iPad Camera Geolocation Png Metadata Tutorial. However, there are other interesting pieces of information regarding an image that don’t involve the “where” of life, and so we find this topic interesting even so, and hope you do too.

As with so many issues in Information Technology, there are often many approaches to solving problems, and we took the first approach of just some of the possibilities for approaches to PNG metadata processing, listed below …

… and so, once again, we find useful work for the wonderful ImageMagick software product for our purposes. As we say, our foot is just further in the water, and there is more analysis and testing we feel necessary here, but hope this helps you out or is a source of ideas for you.

We leave you with the reworked read_exif_off_image_rotate.php, changed this way, that has this corresponding new live run.


Previous relevant Location Services iPad Camera Geolocation Jpeg Exif Tutorial is shown below.

Location Services iPad Camera Geolocation Jpeg Exif Tutorial

Location Services iPad Camera Geolocation Jpeg Exif Tutorial

Maybe you were here when we left off with Location Services iPad Camera Geolocation Primer Tutorial as shown below …

  • amazed at the power of mobile devices, specifically an iPad, with their Camera apps and Geolocation data … and/or …
  • not knowing enough … and still not … about when the iPad chooses to output the photograph in *.PNG or *.JPG … ie. the blurb below about meta data versus exif data … and …
  • vowing to be like Fu Manchu … so here we are

Okay, you might want to read more about that iPad decision regarding *.PNG versus *.JPG, and you may want to start here, but in any case, with our fish photographs from that day we got a mix of …

  • JPG
  • PNG

… and as far as teeing into Geolocation (or Geotagging) data goes we, so far, much prefer JPG, because we can use PHP exif methods, and today’s tutorial is about that, building on what we did at PHP Exif Image Information Rotation Tutorial. As far as the PNG photos go … well, there’s more to do regarding metadata considerations, and we haven’t given up on that … but that is for another day. In the meantime, enjoy the reworked read_exif_off_image_rotate.php, changed this way, that has this corresponding new live run link to show that GPS data we haven’t seen up until the fish photographs, and interpreting the exif data now, means we can display a Google Chart Map Chart …

Location Services iPad Camera Geolocation Jpeg Exif Tutorial

… showing the Geolocation context of where and when, and even how high up, this photograph was taken. Cute, huh?!


Previous relevant Location Services iPad Camera Geolocation Primer Tutorial is shown below.

Location Services iPad Camera Geolocation Primer Tutorial

Location Services iPad Camera Geolocation Primer Tutorial

We had occasion to read here about resetting Location Services on an iPad … which, we need to say, you’d only read about and contemplate if something you’ve done has stopped a Geolocation thing you wanted to happen to no longer happen and you’ve ruled out tweaks to Location Service individual app settings with regard to this (and you may have been in on the discussion we had with some time back with Location Services iPad Battery Loss Issue Tutorial) … and the result of doing this opened up the iPad’s Camera app for permission for Location Services to record Geolocation data, and it looks like, time, information on the photographs you take. We also explore this subject at WordPress 4.1.1′s Location Services iPad Camera Geolocation Primer Tutorial. Presumably, this happens in the photograph’s exif data, perhaps (am not promising, might pan out to be metadata) … which interests us as well, and we’ll go into that more soon.

So we used this functionality, as well as zooming in on some fish in our pond for today’s digital photography sojourn. Maybe seeing fish is a source of mindfulness

… for you, as it seems to help for me?

The Geolocation aspects are great, as you can imagine, for helping document a trip, in pictures, even well after the event, if you can get the context of where you are when a photograph is taken.

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


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


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


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


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


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


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


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


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


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

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

PHP Image Dimensions Linux and Windows Glob Command Line Tutorial

PHP Image Dimensions Linux Linux and Windows Glob Command Line Tutorial

PHP Image Dimensions Linux and Windows Glob Command Line Tutorial

Yesterday’s PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial helped out a PHP …

  • “surfing the net” mode of use … but what if you are on Windows? (well, today we link up PHP’s glob‘s organizational skills with its image interrogation getimagesize skills to help) … and as far as …
  • “command line” mode of use … yes, that could be useful as a report with brevity … no links, nor webpages, but still lots of the data of interest in a text Image Dimensions report

Differentiating these two different modes of use in PHP? Pretty simple really …


<?php
if (isset($argc)) {
// do command line mode of use logics here
} else {
// do surfing the net (or perhaps, curl) modes of use here logics here
}
?>

If this is of interest, take a skeg at today’s changed find_images_via_size.php that can be downloaded or tried out at this live run link.

You can also see this play out at WordPress 4.1.1′s PHP Image Dimensions Linux and Windows Glob Command Line Tutorial.


Previous relevant PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial is shown below.

PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial

PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial

It’s a little bit funny, this feeling inside, how yesterday’s PHP Image Dimensions Linux Find File Awk Sed UX Tutorial was about UX (or user experience), what to our eyes very much involves “front-end” concepts, yet the vast majority of work done on this remained on the “server” side of the software coding ledger. Even our one tiny foray (via “Operation 4Ay U Over There, ‘guv”) into Javascript “client land” we used to set non-default select (dropdown) element values on analyzing posted data we could have handled in “server land” by inserting some “selected” HTML element attributes. And so, yesterday, we didn’t even have a “script” tag within a “head” tag, which is quite unusual.

Not so today, though, where we unleash Javascript in all its glorious “client side” partnership with the “server side” PHP, as a layer of web application logic for immediately before the user sees the web page, from that time when a “web browser address bar URL” equates to Javascript DOM’s “document.URL”, through “document onload” event logic and responding to user actions. Today, in this regard, we convert that hardcoded “x” between the width column and the height column into a select (dropdown) element initially showing that “x” but selectable so that …

  • Exif Information
  • Blog Search
  • Animated GIF Creation

… “client facing” functionalities have been added with today’s changed find_images_via_size.php that can be downloaded or tried out at this live run link.

Please note with Node.js Javascript is used as a “server” language and “client” language. Interesting, huh?!


Previous relevant PHP Image Dimensions Linux Find File Awk Sed UX Tutorial is shown below.

PHP Image Dimensions Linux Find File Awk Sed UX Tutorial

PHP Image Dimensions Linux Find File Awk Sed UX Tutorial

Yesterday’s PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial set the scene for a new approach to an Image by Dimension Size web application idea. Today we turn our attention to …

  1. user experience (ie. UX) functionality improvements …
  2. user experience fixes for annoyances

… both contributors to the overall viability of a web application project.

What are some examples of this for this project? We’d say the offering of several “sorting of data” mechanisms falls into the “improvements” category. The moving of the “form” back above the fold when there is a report to show is the fix of an annoyance, and, it pans out, an improvement, because we take advantage of this change to …

  • make it an optional “read” for non-IE and non-Edge users by encasing it in a “reveal star” details tag (and its nested summary) HTML element encasing (initially set to “hide”) … as well as …
  • start initializing form defaults according to user designations so that the form can also be like a report header helper, to explain the Image Find Parameters of an execution run

The emoji hashtag navigation? Doesn’t matter either way, but at least brings attention to a navigational offering.

So here’s the thing. Am sure you can think of a whole swag of offerings to improve. It is up to the programmer, or user acceptance test results, to try to imagine improvement ideas and to imagine what might annoy. On hover (for non-mobile users) over an image link, for example, we faintly show that image full size as a (total) webpage background image. There might be those who hate any overlay clashes to be annoyed by what we were hoping would be an UX functional improvement. More assured, we’d say, are the newly displayed thumbnail images next to the (image) URLs, that when clicked, still go off showing the user the full image in a new (target=_blank) window (or tab … which is a web browser setting of your choosing, to do with the web browser). UX considerations are subjective by nature, though you can look around the net and see lots of do’s and don’ts talked about ad infinitum with regard to UX.

So, “UX-wise” see the changed find_images_via_size.php that can be downloaded or tried out at this live run link.


Previous relevant PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial is shown below.

PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial

PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial

We’ve written web applications to list image files via their dimension, based on the incredible ImageMagick, when we presented the blog post thread ending with PHP ImageMagick Image Dimensions Sort Tutorial. But ImageMagick, alas, does not come out of the box with an operating system, always. Looking for an image bigger than or equal to a particular dimension yesterday, our online research had us thinking, “What about a macOS (or Mac OS X) and Linux “PHP supervises exec supervises find pipes file pipes awk pipes sed” solution (inspired by this useful link, thanks), relying on not much more than having a Unix (ie. Linux) shell?” Sounds good?! And why, pray tell, when macOS has the Finder desktop app? Well, remarkably, here with macOS Mojave, we think we’ve seen better times showing image dimensions. But even if we have missed something, we’re looking for …

  • a report … ideally …
  • tabularized … ideally …
  • linkable to the images themselves … and user interactive tailorable as far as being able to …
  • define width and height operator and value constraints (eg. width >= 567 and height < 751)

… which is all beyond a GUI like macOS’s Finder desktop app. But it isn’t beyond our “PHP supervises exec supervises find pipes file pipes awk pipes sed” solution called find_images_via_size.php that can be downloaded or tried out at this live run link.

We’ve long admired unix’s (ie. Linux’s) sed but our admiration grew with today’s project. It truly is a star of a piece of software functionality. The modesty of “man sed”‘s “sed — stream editor” heading belies the power of the combination …

  • “stream” being any text piped to it … and …
  • “editor” which covers a lot more than just a …
    1. “substituting” tool … when you consider its “regex” type syntax particularly featuring its “group regex” syntax today allowing it to be …
    2. “expanding and repeating of data” tool … eg. find occurrence 1, replace with find occurrence (or back-reference) 1, find occurrence 2, replace with find occurrence (or back-reference) 2,

      $ echo " in Spain " | sed 's/\(\ \)\(in\ [^\ ]*\)/The rain\1\2\1falls mainly on the plain./g'
      The rain in Spain falls mainly on the plain.
      $

Add the incredible Linux (and macOS command line) find and file and awk into the mix and behind the scenes of our PHP web application and PHP could have fed exec (after a quiche entree) … for the example of our MAMP document root HTTP://localhost:888/find_images_via_size.php address bar URL …


cd /Applications/MAMP/htdocs; find . -name '*.*g' -exec file {} \; | sed 's/\(.*g\): .* \([0-9]* x [0-9]*\).*/\2 \1/' | awk 'int($1) > 500 && int($3) > 500 {print}' | sed 's/\(\ \)\(\.[^\<]*\)/\ \<a target=_blank title="\/Applications\/MAMP\/htdocs\/\2" href="\2"\>\2\<\/a\>/g'

… resulting in (the first five lines of result set) …


625 x 896 <a target=_blank title="/Applications/MAMP/htdocs/./HTMLCSS/MIDI.js-master/examples/images/tuna.png" href="./HTMLCSS/MIDI.js-master/examples/images/tuna.png">./HTMLCSS/MIDI.js-master/examples/images/tuna.png</a>
2880 x 1800 <a target=_blank title="/Applications/MAMP/htdocs/./HTMLCSS/web_audio.png" href="./HTMLCSS/web_audio.png">./HTMLCSS/web_audio.png</a>
800 x 563 <a target=_blank title="/Applications/MAMP/htdocs/./vmcommerce/administrator/templates/hathor/template_preview.png" href="./vmcommerce/administrator/templates/hathor/template_preview.png">./vmcommerce/administrator/templates/hathor/template_preview.png</a>
800 x 767 <a target=_blank title="/Applications/MAMP/htdocs/./vmcommerce/templates/atomic/template_preview.png" href="./vmcommerce/templates/atomic/template_preview.png">./vmcommerce/templates/atomic/template_preview.png</a>
2880 x 1800 <a target=_blank title="/Applications/MAMP/htdocs/./stopPropagation_preventDefault.png" href="./stopPropagation_preventDefault.png">./stopPropagation_preventDefault.png</a>

… the parts thereof gleaned via a combination of user interactive HTML input textbox values and PHP dirname(__FILE__) and Linux awk space delimiter arguments and Linux find data and Linux file data and Linux sed “x” inclusions and Linux sed edits (within as well, regarding those file and awk “replace with find occurrence” usages, but others override).


Previous relevant PHP ImageMagick Image Dimensions Sort Tutorial is shown below.

PHP ImageMagick Image Dimensions Sort Tutorial

PHP ImageMagick Image Dimensions Sort Tutorial

It’s natural for people to try to introduce order into their world. No matter what you think of the goings on in the world, you can “retire” into that “cushioned world” of I.T. and create your own order. The most common form of “order” used, we dare to guess, in the I.T. world is to sort data. Our data we started with yesterday’s PHP ImageMagick Image Dimensions Primer Tutorial in the form of image URLs and their dimensions (plus some other fields) presented in a table are a case in point where a lot of people would be quick to point out “that it would be good to sort by width” and those who would “do a triple pike with a double somersault to see data sorted by height”.

If you are in charge of the data that forms your data, that is easy to arrange. But if you are the “second source” you need to work out your own ways to manipulate the data to be able to sort it usefully. We found these manipulations still only had to call on …

  • awk # command line processor repeats column field data
  • sed # command line editor most associated with pipe commands

… with the focus, today, on awk‘s String functionality …

… preparing the ground for the Linux command …

  • sort # sort with its -k -t -n -r switches

… enabling the useful sorting of image URL filespec data presented in a table … order indeed!

You can retry this out for yourself at today’s live run link with its underlying serverside PHP code you could call image_dimensions.php and changed in this way as you wish.


Previous relevant PHP ImageMagick Image Dimensions Primer Tutorial is shown below.

PHP ImageMagick Image Dimensions Primer Tutorial

PHP ImageMagick Image Dimensions Primer Tutorial

We revisit the talents of the brilliant ImageMagick‘s Identify command featuring, last, in Location Services iPad Camera Geolocation Png Metadata Tutorial to start down the road of a web server image information presenter web application.

With ImageMagick command line …


identify [webServerImageFileSpec]

… sums up what we build a web application around, having a PHP shell use its exec method to filter the information through (Linux command line) …

  • awk # command line processor repeats column field data
  • sed # command line editor most associated with pipe commands

… to result in the table contents of our image (specification) table in our web application today.

You can try this out for yourself at today’s live run link with its underlying serverside PHP code you could call image_dimensions.php as you wish.


Previous relevant Location Services iPad Camera Geolocation Png Metadata Tutorial is shown below.

Location Services iPad Camera Geolocation Png Metadata Tutorial

Location Services iPad Camera Geolocation Png Metadata Tutorial

Today’s “foot further into the water” progress building on Location Services iPad Camera Geolocation Jpeg Exif Tutorial, as shown below, has a posting title that includes the word “Geolocation”, but alas, we’ve found with PNG files coming off our iPad that Geolocation or Geotagging information is lost, unlike our recent iPad JPEG files, and so our preference for the latter has become stronger. We discuss this also at WordPress 4.1.1′s Location Services iPad Camera Geolocation Png Metadata Tutorial. However, there are other interesting pieces of information regarding an image that don’t involve the “where” of life, and so we find this topic interesting even so, and hope you do too.

As with so many issues in Information Technology, there are often many approaches to solving problems, and we took the first approach of just some of the possibilities for approaches to PNG metadata processing, listed below …

… and so, once again, we find useful work for the wonderful ImageMagick software product for our purposes. As we say, our foot is just further in the water, and there is more analysis and testing we feel necessary here, but hope this helps you out or is a source of ideas for you.

We leave you with the reworked read_exif_off_image_rotate.php, changed this way, that has this corresponding new live run.


Previous relevant Location Services iPad Camera Geolocation Jpeg Exif Tutorial is shown below.

Location Services iPad Camera Geolocation Jpeg Exif Tutorial

Location Services iPad Camera Geolocation Jpeg Exif Tutorial

Maybe you were here when we left off with Location Services iPad Camera Geolocation Primer Tutorial as shown below …

  • amazed at the power of mobile devices, specifically an iPad, with their Camera apps and Geolocation data … and/or …
  • not knowing enough … and still not … about when the iPad chooses to output the photograph in *.PNG or *.JPG … ie. the blurb below about meta data versus exif data … and …
  • vowing to be like Fu Manchu … so here we are

Okay, you might want to read more about that iPad decision regarding *.PNG versus *.JPG, and you may want to start here, but in any case, with our fish photographs from that day we got a mix of …

  • JPG
  • PNG

… and as far as teeing into Geolocation (or Geotagging) data goes we, so far, much prefer JPG, because we can use PHP exif methods, and today’s tutorial is about that, building on what we did at PHP Exif Image Information Rotation Tutorial. As far as the PNG photos go … well, there’s more to do regarding metadata considerations, and we haven’t given up on that … but that is for another day. In the meantime, enjoy the reworked read_exif_off_image_rotate.php, changed this way, that has this corresponding new live run link to show that GPS data we haven’t seen up until the fish photographs, and interpreting the exif data now, means we can display a Google Chart Map Chart …

Location Services iPad Camera Geolocation Jpeg Exif Tutorial

… showing the Geolocation context of where and when, and even how high up, this photograph was taken. Cute, huh?!


Previous relevant Location Services iPad Camera Geolocation Primer Tutorial is shown below.

Location Services iPad Camera Geolocation Primer Tutorial

Location Services iPad Camera Geolocation Primer Tutorial

We had occasion to read here about resetting Location Services on an iPad … which, we need to say, you’d only read about and contemplate if something you’ve done has stopped a Geolocation thing you wanted to happen to no longer happen and you’ve ruled out tweaks to Location Service individual app settings with regard to this (and you may have been in on the discussion we had with some time back with Location Services iPad Battery Loss Issue Tutorial) … and the result of doing this opened up the iPad’s Camera app for permission for Location Services to record Geolocation data, and it looks like, time, information on the photographs you take. We also explore this subject at WordPress 4.1.1′s Location Services iPad Camera Geolocation Primer Tutorial. Presumably, this happens in the photograph’s exif data, perhaps (am not promising, might pan out to be metadata) … which interests us as well, and we’ll go into that more soon.

So we used this functionality, as well as zooming in on some fish in our pond for today’s digital photography sojourn. Maybe seeing fish is a source of mindfulness

… for you, as it seems to help for me?

The Geolocation aspects are great, as you can imagine, for helping document a trip, in pictures, even well after the event, if you can get the context of where you are when a photograph is taken.

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


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


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


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


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


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


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


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


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

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