Unsurprisingly, even for non-mobile usage, the 2015 HTML/Javascript Music Chord Game Tutorial Name Those Notes and Name Those Chords game playing of audio before a click usage instigated by the user ways does not pass muster in the web browser rules of 2024.
We decided to start showing the HTML iframe hosted middle player helper, so that the user gets a chance to click/tap a Web Audio (API) means by which to …
supply that click/tap required before playing audio
Yesterday we wrote a musical pitch game for one note at a time and today we extend that functionality to allow the user to guess the characteristics of musical chords and intervals played for them by this MIDI music web application (as you can review with HTML/Javascript Music Pitch Game Tutorial).
We used the HTML iframe element yesterday, and today we further nest these elements to have an iframe within an iframe, all at the same domain. The reason to do this is that we think the logic for examination of the musical chord guesses by the user is quite different because we need to …
cater for HTML select tags with multiple selections
add a new guessable concept … the type of chord played
As we mentioned yesterday, if you write lots of your own web applications, and they are all sitting in the same domain, then the HTML iframe element is a great tool for web application code modularisation and the iframe can see what its parent contains content-wise as well as the other way around. This can be a very useful attribute of these HTML elements.
Try the live run today supervising yesterday’s old functionality and today’s new functionality, at the one place, thanks to the HTML iframe element.
See today’s downloadable supervised (optionally via iframe) HTML and Javascript source code you could call name_those_chords.html (or try its live run)
See yesterday’s downloadable supervised (optionally via iframe) HTML and Javascript source code you could call name_those_notes.html (or try its live run or see the differences to this code from yesterday with name_those_notes.html)
See the doubly supervised downloadable iframe HTML and Javascript source code MyScale.html
See the doubly supervised downloadable iframe HTML and Javascript source code differences from a day ago via MyScale.html
The code is based on the wonderful software ideas (with thanks) from …
Yesterday we continued on with the MIDI music web application (as you can see below with HTML/Javascript/PHP Compose Music Tutorial) we’ve been working on almost to the point of it being useful to be called upon within an HTML iframe element to be useful in other ways.
If you write lots of your own web applications, and they are all sitting in the same domain, then the HTML iframe element is a great tool for web application code modularisation, rather than rewriting the cart, the horse and the wheel all while still trying to perfect that breakfast in bed with coffee made via thought transference, and sending drones to active robots to do your office work (project) … that can wait.
If you see people critical of the iframe element it is usually due to security concerns, and cross-domain use of the HTML iframe element does not always work. You can do things in your code to restrict misuse.
End of rave … today we test your “Perfect Pitch” … well, maybe?!
Try the live run today and maybe it is enlightening or maybe not. After all, many musical instruments are really sensitive to the environment around them, and whether they are in tune. All we can say here, is that the computer approximates what it thinks is the sound frequency required to produce a certain note, and maybe that is what you see it as too … if so, it is likely you have perfect pitch, but maybe if you are always, like, a semitone off the same way each time, it could be something else going on.
So, here we are with …
See the downloadable supervisory HTML and Javascript source code you could call name_those_notes.html (or try its live run)
See the downloadable iframe HTML and Javascript source code MyScale.html
See the downloadable iframe HTML and Javascript source code differences from a day ago via MyScale.html
The code is based on the wonderful software ideas (with thanks) from …
Hope you enjoy the game where you score one point for a match of note in a generic sense, and five points for an exact match of a note, in its correct octave (where middle C (in a piano) is known as C4. Try it out.
Yesterday we set up the MIDI music web application we’ve been working on to take the first steps with composing, with HTML/Javascript Music Follow Up Tutorial as shown below, and as you may recall from this the idea that the GET method would cause URLs that are too long for the web browser with any length to your musical composition, and that we’d have to involve the POST method on an HTML form element, perhaps feeding this through to a server-side language like PHP … well, it panned out this involvement of PHP and HTML forms was overkill for “playing” these long pieces … for that we could resort to “hidden” input text fields … but … yes, there’s always a but … when we got to wanting to be able to save our compositions, and come back to them for playing or tweaking, or both, we could not avoid the use of a server-side language (for us, this is PHP) and the interface to that server-side language, an HTML form element … basically because how else are you going to be able to save the composition to a file, and then reread that file? You need a language like PHP.
So, here we are, still needing to calibrate the Italian speed words methinks, but otherwise, now, we can (on laptops only, it looks like) …
play a note
play scales and arpeggios
play a small tune … and as of today …
play a longer tune
compose a tune you can play (but you’ll need earplugs for our “Rhapsody in Puce”)
save a composed tune and recall it for playing (where PHP needed)
… but still no match for the complex scenarios sheet music can handle … still, we’re getting there … speaking of which …
See the downloadable HTML and Javascript source code MyScale.html
See the new downloadable PHP source code MyScale.php
We follow up on our HTML/Javascript Music Primer Tutorial as shown below, today, by setting our minds to a “first draft” of a method to construct a tune in MIDI … say “first draft” because, it is often easier on a “first draft” to involve GET parameters with a URL, for ease of testing. This idea is a “first draft” because there are limits with URL lengths allowable this way, and in order to get around more involved examples than today’s first few bars of Für Elise (by Beethoven), we’ll need a subsequent draft that caters for POST parameters involving, perhaps, an HTML form and maybe calling on server-side PHP work … we’ll have to see.
So what can get sorted out with this “first draft” idea? How about sorting out an internal protocol of communication of data? This type of decision is a hugely important part of the design phases of a project. We’ve opted for …
comma separated word list
special rules for the user regarding these, with respect to …
one “+” sign at start or end signifies two notes are playing at once (during any and all ideas of below)
rests … via “0”
volume … via leading “0” value
note (or rest) length … via negative number (loosely) based on -1 = crotchet
MIDI note (ie. sound frequency) … via number as the MIDI note code or decimal frequency
speed … Italian words Largo or Larghetto or Adagio or Andante or Moderato or Allegro or Presto or slowx? or slowby? or fastx? or fastby?
We discovered some great HTML and Javascript code to help make music with a web application, and for this we want to thank and congratulate mudcube for some really great software.
In addition to that we found at The Glass Armonica a wonderfully useful table to use as a basis for the user to “make music”.
If you’ve learnt a musical instrument, you may have self-taught yourself by playing songs, maybe on a guitar, by working out the basic chords, but, here, today, we start the “music” ball rolling with some scales and arpeggios. If it was good enough for J.S. Bach, who are we mere mortals, to complain … whinge, maybe … but never complain. Learning the piano was given this book we just called “Hanon” which did a thorough job of making scale type practice more interesting, but personally, couldn’t wait to get to more melodic music.
Anyway, how do you feel about synthesised music? Guess a lot of people are okay with it, but there’ll be others who “try” to avoid it … but think it might be pretty hard to completely avoid it now with so much involvement with computers and such. Maybe we should do some research with the excellent article Best Synthesizer | Beginner Guitar HQ, and see some of this history according to Wikipedia, and what it has written regarding synthesiser (and while you are there, read about MIDI).
So the software, in its “innards” will be concerned with calculating sound frequencies … because it’s all about waves man person. If the music is long lasting, maybe a bit like a permanent wave, man person.
If you like, take a look at the HTML and Javascript code you could call MyScale.html or execute a live run.
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.
That is, of course, unless the horse is the famous Mister Ed!
And we wanted to harness these mathematical skills to write a new web application rewarding those eager beaver budding mathematicians (and, presumably, giving short shrift to people yackety yack a streakAnd waste your time of day.But Mr. Ed will never speakUnless he has something to say. A horse is a horse, of course, of course,And this one will talk till his voice is hoarse.You never heard of a talking horse?Well, listen to this:“I am Mr. Ed.”) with … well, see for yourself with the “how we got there”mr_ed_maths.htmlMister Ed Maths web application …
If this was interesting you may be interested in this too.
… migrating from similar one based on CentOS web hosting of PHP version starting with a 5, following on from the work of Registration via Captcha Primer Tutorial.
user can safely log in to an authorization style set of webpages
… the bit after logging in, less interesting to us, here, with this exercise, and with thanks to Professional PHP Programming by Jesus Castagnetto, Haeish Rawat, Sascha Schumann, Chris Scollo, Deepak Veliath (chapter 20) for the basis in code.
crontab and curl “MySql Watchdog” basis … we also, around here, use …
crontab and curl “Landing Page Daily Updates Regarding WordPress Blog Posting Content”
… so that going to the RJM Programming Landing Page can glean the latest WordPress Blog content.
During our “pre AlmaLinux” “pre DNS changeover” period, we’ve been doing two lots of WordPress Post “CMS style” textarea blog posting sessions for each daily new blog posting. We’ve got a WordPress Blog with permalinks set to a variant of the blog posting title, and between the two versions …
that part of a URL to get to this content remains the same (phew!) but the POST_ID becomes unreliable as a guaranteed thaing … the least worriesome aspect, against …
the Landing Page dropdowns for new, but soon to be the DNS IP address need to be populated via WordPress Blog MySql based data, via a tutorial_options.php piece of inhouse PHP which needs to change in a few ways …
references to what used to be “mysql_” style PHP calls now need to be transferred to equivalent “mysqli_” ones (and thanks to php – Replacement for deprecated function mysql_connect – Stack Overflow here, regarding great advice) where, as well as the i change, for all but …
$link = mysqli_connect($hostname, $username, $password);
mysqli_num_rows($res)
mysqli_fetch_row($res)
mysqli_close($link)
… references, for our PHP code, which used mysqli_select_db($link, $dbname) and mysqli_query($link,$qry) and mysqli_errno($link) … we needed that extra first argument of the mysqli connection value … changes that reminded us, a tad, of how to go from a CSS Selector to a Javascript DOM by getting rid of _ and just to the right of where that was, capitalize that character, thinking
rethink any $_GET[] or $_POST[] arrangements into $argc (and $argv[1] argument) based logic …
<?php
$index = "index";
if (isset($argc)) {
if ($argc >= 2) {
if ($argv[1] != "mobile") {
$index = $argv[1];
}
}
} else if (isset($_GET['index'])) {
$index = $_GET['index'];
} else if (isset($_POST['index'])) {
$index = $_POST['index'];
}
?>
… so that …
AlmaLinux
CentOS
cd ~rjmprogr/public_html/PHP; php tutorial_options.php
Yes, we’re migrating again (as we were talking about with Apache/PHP/MySql Web Hosting Website Migration ssh Tutorial), though as you read this blog posting, if hot off the press here on 19/7/2024, we’ll not have transferred the DNS over yet, which we’ll outline the reasons for into the future. But, today, we’re excited to outline some steps after …
… it was, mainly, regarding our MySql Watchdog ( korn shell scripting in the Linux Apache/PHP/MySql web server /etc/init.d scripts called via crontab ) that concerned us most. Why (Nala getting distracted, ever since MySql Down Thinking Followup Tutorial … or …)?
Well, understandably our Crazy Domains web hosts were kind enough to …
take on the migration … thanks … and not, just blithely …
make any “old scripting” assumptions ( ie. we came across the new web server’s /etc/init.d folder as empty (and /etc/rc.d/init.d folder, for your AlmaLinux Apache2 daemon process folder arrangements not empty, but missing our own tailored scripting (and that scripting and our crontabbing used /etc/init.d mentions) … so …) … especially any to do with anything even resembling …
crontab … nor, heaven forbid …
curl … (the use of which, up to now, we’ve only ever combined with argument URLs that mentioned rjmprogramming.com.au rather than any numerical IP address … hence, our concerns) … scripting being helped out by crontab … that had any personal tailoring ( ie. a crontab -l
# showed default AlamaLinux arrangements only
This can be very powerful stuff, and you could, during a period before the DNS changeover, if you had a matching crontab situation happening, having two watchdogs on two different IP addresses (only one of which is pointed to proper DNS rjmprogramming.com.au arrangements trying to pick up a MySql service, and though only one would get through picking up the true rjmprogramming.com.au MySql service, the other would, at the very least, be doing superfluous activity because of the way we scripted it. We scripted for …
one DNS arrangement for the one IP address related to rjmprogramming.com.au … rather than …
one DNS arrangement for the one IP address related to rjmprogramming.com.au and another IP address being readied for a future DNS rearrangement that it will map to … and after that …
one DNS arrangement where that new IP address can newly become the DNS for rjmprogramming.com.au and another obsolete (but still having a working crontab happening) IP address awaits a decommission
That is the power, and also the worry, regarding how curl and crontab can be such useful Linux web server tools!
For number 3 scenario, perhaps we can be quick decommissioning, but we imagine we’ll want to have another test period after the DNS changeover. We’ll see. Anyway, on the road towards solutions we’re pretty sure a first step is …
before thinking of starting up any “inhouse scripting componentry” crontab schedulings on the new IP address web server …
populate our empty /etc/init.d … with …
matching script content and permissions and ownership as is (and then, was) happening on the current (but soon to be decommissioned) IP address web server
This transfer of scripts is not suitable for our FileZilla sftp transferring arrangements, and we do not feel like tackling any big shake up of arrangements here.
But, we ended up with a zipping and unzipping methodology that went like …
pick a folder that is hidden to the public (for both IP addresses) but that your Linux administration user (in our case “root”) can get to and our FileZilla web server user (in our case “rjmprogr”) can plonk to and from, for us, that being (notice, regarding Apache, no “public_html” mention) … /home/rjmprogr
for current, but soon to be decommissioned IP address … ssh login … cd /etc/init.d … zip /home/rjmprogr/etcinitd.zip *
use relevant FileZilla on current, but soon to be decommissioned IP address setup to copy this back to your local operating system, ours being macOS …
use relevant FileZilla on new, but soon to be the DNS IP address setup to copy this local operating system etcinitd.zip over to /home/rjmprogr
for new, but soon to be the DNS IP address … ssh login … cd /etc/init.d … unzip /home/rjmprogr/etcinitd.zip *
if happy ( via … ls -l /etc/init.d/* … checking and comparing between IP addresses ), for current, but soon to be decommissioned IP address … ssh login … rm -f /home/rjmprogr/etcinitd.zip # or do this via appropriate FileZilla session
if happy ( via … ls -l /etc/init.d/* … checking and comparing between IP addresses ), for new, but soon to be the DNS IP address … ssh login … rm -f /home/rjmprogr/etcinitd.zip # or do this via appropriate FileZilla session
… that we were really happy with.
For a small number of script files, though, an animated GIF presentation we’ve provided (and don’t you just hate it when you only get the knack of it near the end of the job … sheeesh!) you might want to use …
open two macOS Terminal windows side by side (and not overlapping) …
left one has ssh login to current, but soon to be decommissioned IP address … cd /etc/init.d
right one has ssh login to new, but soon to be the DNS IP address … cd /etc/init.d
for each ( mainly *.*sh for us ) (korn shell usually for us) script of interest (we’ll call thesc.ksh below) …
# no return key press below …
left % cat thesc.ksh
# you might want to use Terminal app’s Edit -> Copy the highlighted “thesc.ksh” to help (via Terminal app’s Edit -> Paste) with …
right % vi thesc.ksh
at left, as necessary, press Return key
at left highlight from the bottom ( probably “exit” ) up to the top ( probably “#!/bin/ksh” ) and use Terminal app’s Edit -> Copy
at right, as necessary, press Return key
at right, if content already there, use appropriate <escape>999dd command to clear to nothing then …
at right, press “i” key (for Insert) …
at right, use Terminal app’s Edit -> Paste
at right, maybe press <escape>w (to have an interim look) ahead of …
at right, maybe press <escape>wq!
attend to any ownership (research chown and chgrp) or file permission (research chmod) mismatches you would tweak to via ls -l /etc/init.d/* … checking and comparing between IP addresses
and consider only leaving “inhouse scripting” in /etc/init.d on new, but soon to be the DNS IP address here, for now (and into the future rewrite scripting for /etc/rc.d/init.d reuse)
When we discussed Linux Watchdog Primer Tutorial in that very generic fashion below, we were being that … generic. Today we turn to specifics in that regard. On the rjmprogramming.com.au domain we use a …
(software) watchdog which checks for the health of the MySql Service, and if not healthy, restore it to health … which is all fine and good from the point of view of the domain rjmprogramming.com.au … but depending on what the user was doing we could …
code for intervention within the MySql using piece of software, and writing out the database error to the webpage, and present alternative navigation
… on the understanding with that latter thought, that we put into play today for a WordPress 4.1.1 blog, we realized we needed to intervene in …
… where the redirection to /slideshow.html effectively “Cuts to the Chase” for the gist of that blog posting you never got to, as MySql is currently down.
Notice how specific the actions can be when you write code “dependent” on another software component, as distinct from the “watchdog” approach we often want to be “independent” in its thinking.
Guess this begs the question? How did we work out where to intervene? We just got to folders on the rjmprogramming.com.au web server with the WordPress (Codex) software and went (showing you the one that yielded the nicest result for us) …
pwd // and we are at [DocumentRoot]/ITblog
cd wp-includes
fgrep 'Error establishing a database connection' *.php
Do you have a computer operational problem? What the … what is that humanoid on about? Well, is there a computer operation you have to do routinely, to fix an ongoing problem, that relies on your personal intervention that, one day, you’d like to not have to worry about, or better still … you usually intervene, but would like a backup approach should you get sick and can’t do it … here’s where you need Fido a watchdog
… am not recommending a Golden Retriever, unless you want your process licked rather than attended to? (had you forgotten this was a question, CedricLinux Nala)? …
oh, moi?)
“
Why is bellybutton fluff blue? But we digress, or at Buckingham Palace one digresses.
Right, back at watchdogs, there are schools of thought …
The process is down for too long and we need to do something about it, because customers are leaving
If you need a watchdog to save your bacon, then (clearly you’re not with it, because the dog’s eaten the bacon and) there is something else fundamentally wrong or something you do not understand, which is what you really should resolve, either way
My view is that, if the underlying process would take years to understand or if it is written in legacy code, I’d go more with the former idea, especially as there is delight in creating a really good watchdog (training one? not so easy) … it can be really hard to do … for this reason cannot give code here really, because there is no “out of the box” that is a responsible approach to advise … you have to study the issue and cut it into its components, unit test the solutions to the components of your watchdog solution, and retest with the interactions of those components. However, this is a coding enthusiast’s view, and is a bit short-sighted, perhaps. In any case, what will save the day is that this decision will probably be made for you by an operations expert, if you work in a large organization.
Some other watchdog considerations should be …
Is the attempt to automate the solution that the watchdog will provide technically possible … may not be?!
We can resolve it with personal intervention … can the watchdog simulate each step of the human intervention? If so, go for that approach if possible.
Be very careful of approaches that involve mouse clicks, as they are quite often relative to too many other environmental issues … try to restrict the watchdog solution to command line/scripting/keyboard ideas … on Windows, AutoHotKey is an excellent recording program of interest (would recommend just using it for keyboard recordings, if using it for a watchdog … by the way, tomorrow (tomorrow arrived today) we do a tutorial showing you how to create an AutoHotKey terminate-and-stay-resident program on Windows).
Have we identified the real intervention points? If not, you might succeed some of the time, but not all the time, and you may cause damage on those times when you have made some assumptions, with your incomplete understanding.
Here is an example. You have an overnight batch process run, and it falls over at a certain point, and you get paged at 3 or 4 (it’s bound to be AM). It has been tentatively decided you might want to create a watchdog … what are some considerations …
What do log files tell me? Find out.
Is it a single thing that is missing that would resolve the problem once and for all? If yes, well, you know not to deviate from this one thing … ignore ideas below.
Of the few problems, is it worth proceeding with the watchdog idea, because the number of separate issues can often cause a factor of ten more complication issue points, and maybe you should stick with human intervention.
Break the watchdog problem into these problem issues as a separate unit-testable piece of scripting code (or whatever your watchdog solution entails) … test each for success … retest for their interaction with each other (ie. that they don’t interfere with each other).
The title of this tutorial mentions Linux but generic thinking like above covers other operating system thought patterns, but there are some Linux (or Unix) tools that are great Linux commands that we should point out … thanks to Hscripts.com and CyberCiti.biz for this …
crontab ( eg. */5 * * * * Username /path/to/command # where /path/to/command gets run by Username every five minutes … arranged via crobtab -e ) … for Windows, equivalent would be Task Schedular in Windows Primer Tutorial
And here are some of the practicalities of a watchdog …
Where does it run? If at more than one place, consider each place separately. If it runs on more than one computer, then clearly this is important. Does the directory and file permissions allow the watchdog to run, but do not allow other users to misuse it? (Please say yes here.) A generic thing about crontab or nohup (or Windows start) scripting arrangements are that you should not assume the environments of these processes is the same as your current running command line process … you should write as if you have just logged on and have done nothing … so just about the first decision of the script is to “cd” itself to the proper place where it was designed to run.
Which user(s) (on whichever computer(s)) can run it?
When does it run? If the solution is uncomplicated enough, maybe you can use a pre-emptive approach. For example, you know the problem is to do with a file missing when a non-critical process fails but later on that file is looked for, then why not pre-emptively get the watchdog to create that file (with default data) ahead of the process run crash point time.
As part of the question above, does one subprocess need to end before another starts? If yes, you need to intervene in such a way that that process architecture remains, and you need to work out an independent way for your independent watchdog to step in, at the correct time, and take over the same task, as required. But if it gets to this, don’t you understand the underlying process well enough to have a crack at doing the “real” solution (for all time)? Have a think, now, and keep checking in on the issue?
You need to log the workings of the watchdog both for information and for further research which might help in achieving a “real” solution (without the watchdog) further down the track.
So why was this posting called a tutorial? Well, there’s some homework. You see there are these Daleks, and we sort of need to know when they’re going to invade Earth again, and Dr Who is not always available, so, was wondering, if it wouldn’t be too inconvenient … if you wouldn’t mind writing that watchdog to detect a Dalek invasion and shoo them off … 6 hours … okay?
“
Woofsky!
“
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.
Code Difference AlmaLinux HTML Issue Followup Tutorial
Web application solutions, looking at them the next day, can often throw up …
There’s more to it than that.
… ideas, especially if you’ve been beavering away at the one code source (section), and the overall solution might involve more than that. And it may be …
your own followup testing … or …
your own followup usage (somewhere else, that annoys) … or …
someone else’s observations
… which gets you to realize you’ve only addressed one part of several parts to an overall solution. This occurred regarding Code Difference AlmaLinux HTML Issue Tutorial from a couple of days ago, and us happening upon a link like the https://www.rjmprogramming.com.au/HTMLCSS/body_cavities.html-GETME (and we’re only worrying about .html and GETME style URLs here) of …
… is like one we’d use at this blog but want it to display code, and in this scenario we often display …
a code differences link … the problems of which we addressed in part one of the solution a few days ago …
a link like above that is meant to display HTML code …
as applicable, a link to the web application involved
So, as of a couple of days ago, that middle one would do something, for HTML code links, but not what we were expecting. But because we have that access to the WordPress blog TwentyTen theme header.php PHP codex code, we can amend as per (working off the structure of a previous modification you can read about at WordPress Table Cell Nests Code Element Overflow Issue Tutorial) …
<?php
function calendar_pass() {
var thisc='', thiscc='', thist='', jiicp=0, thisdate='', thistime='', nexttime='', thishour=0, nexthour=0, thisminute='', thissecond='00', thisurl='';
var h1cps=docgetclass('entry-title','*'); //document.getElementsByTagName('h2');
var tdzs=document.getElementsByTagName('td'), itdzs=0;
var cps=document.getElementsByTagName('a');
var cdes=document.getElementsByTagName('code');
var mfnd=false, washref='';
for (var ijcal=0; ijcal<cps.length; ijcal++) { // new calendar links background image
// Check for GETME links for .htm and no diff.php mention
if (('' + cps[ijcal].href).toLowerCase().indexOf('.htm') != -1 && ('' + cps[ijcal].href).indexOf('GETME') != -1 && ('' + cps[ijcal].href).indexOf('diff.php') == -1) {
washref=('' + cps[ijcal].href);
cps[ijcal].href='//www.rjmprogramming.com.au/PHP/Geographicals/diff.php?zero=' + encodeURIComponent(washref) + '#seehtmllook=n';
}
if (eval('' + ('' + cps[ijcal].href).split('/').length) == 8) {
if (eval('' + ('' + cps[ijcal].href).split('/')[4].length) == 4) {
mfnd=false;
for (itdzs=0; itdzs<tdzs.length; itdzs++) {
if (tdzs[itdzs].innerHTML.replace(String.fromCharCode(10),'').indexOf('<code') == 0 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (tdzs[itdzs].outerHTML.indexOf('-webkit-overflow-scrolling') == -1) {
if (1 == 1) {
tdzs[itdzs].innerHTML=tdzs[itdzs].innerHTML.replace('<code>','<code style="-webkit-overflow-scrolling:touch;overflow:scroll;">').replace('<code style="','<code style="-webkit-overflow-scrolling:touch;overflow:scroll;');
} else {
tdzs[itdzs].WebkitOverflowScrolling='touch';
tdzs[itdzs].Overflow='scroll';
}
}
}
cps[jiicp].innerHTML+=' <a id="oe' + h1cps[iicp].innerHTML.split(' id="d')[1].split('"')[0] + '" title="Change order of blog posts (now newest to oldest) to oldest through to newest (like a book)" target=_blank style="text-decoration:none;cursor:pointer;" onclick="hrrearrange(this);">🔀</a>';
… shows the content as an HTML webpage, whereas we’re used to seeing this display the HTML code contained within that file.
Our code difference reporting system worked that way, ideally. Other extensions like *.php* based ones act the same way between CentOS and AlmaLinux, but we’ve decided to live with this “new woooorrrrllldddd order”, and turn it, in a mild way, to our advantage, offering code difference report readers of *.html* code the chance now to …
see the content as the HTML text within … now that we intervene with PHP code such as …
It took us a long time, but we now feel we’re better across, writing web applications, and dealing with URLs, that …
not mentioning protocols http: nor https: specifically is preferable …
As time goes on, more and more we see the benefits of URLs that start with “/” (but not HTTP:// nor HTTPS:// absolute URL designations), especially when it comes to pointing at a “tool” (eg. external Javascript). It has
the benefits of …
is programmer controlled, so they can place the tool in Document Root folder (in the case of an Apache web server) … and, in so doing …
it’s irrelevant where the “parent” (calling) web application is placed … and …
mixed content issues are avoided by not using an absolute URL, though it kind of, is!
… both ideals above related to Mixed Content (ie. involving “competing protocols” within a webpage).
… and we suspect either of these two URLs might have caused this upper and lower HTML iframes issue up until today. How did we approach the remedy? We could have …
detected the Mixed Content potential of the incoming URL and in the PHP reissued the address bar call, effectively, via a header(‘Location: [newUrlFixedForNiMixedContent]’); style of recall … or, what we ended up doing, being (some readers may find the following “a little bit kludgy , this kludgy inside 🎵, am not one of those, who easily 🎶 kludgifies (at least in public)“) …
stayed on the same PHP execution call via …
<?php
if (isset($_GET['one'])) { // && !isset($_GET['two'])) {
if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['one']), 'HTTP') !== false && strpos(strtoupper($_GET['one']), 'HTTPS') === false) {
$_GET['one']='HTTPS' . substr($_GET['one'], 4);
} else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['one']), 'HTTPS') !== false) {
$_GET['one']='HTTP' . substr($_GET['one'], 5);
}
if (isset($_GET['two'])) {
if (strpos(('' .$_SERVER['SERVER_PORT']), '443') !== false && strpos(strtoupper($_GET['two']), 'HTTP') !== false && strpos(strtoupper($_GET['two']), 'HTTPS') === false) {
$_GET['two']='HTTPS' . substr($_GET['two'], 4);
} else if (strpos(('' .$_SERVER['SERVER_PORT']), '443') === false && strpos(strtoupper($_GET['two']), 'HTTPS') !== false) {
$_GET['two']='HTTP' . substr($_GET['two'], 5);
}
}
// more PHP
}
?>
… to not mix any of the apples with any of the pears!
Code Difference Highlighting User Interface Tutorial
Unless a piece of your web application functionality is categorized as “internal use only” you, as a programmer, will want to offer functionality that does not ask the user to remember some arcane URL (GET ? and &) arrangement at the address bar of a web browser. And so, onto yesterday’s Code Difference Highlighting Tutorial, talking about our inhouse PHP Code Difference Reporting functionality, we wanted to offer …
The PHP diff.php code got changed so that a user entered comma separated list will be scrutinised for whether it represents a single string to find, or if highlighting should happen for each list member in the comma separated list.
also useful, here, could be a highlighting functionality making use of the HTML mark element, that we gave a sneak peek to regarding, yesterday, with Ants Up a Wall Game Mobile Tutorial if you were one of those readers to click the …
It meant, in that scenario yesterday, when a single variable usage “tells a story” in the code, this code difference highlighting might be more effective at explaining the issues rather than showing the code in a code element (even with inhouse colour coding), because there is also the “before” and “after” scenarios there on the screen for the reader to contextualize. See the newly changed PHP diff.php code or try it yourself here.
the server side file and database and operating system smarts of the great serverside language PHP is … all while …
PHP writing out HTML (with its CSS and Javascript) has a web application able to access all that clientside intelligence
… and with this in mind, we allow for saved CSS styling user settings, as of today, with our Difference Report web application arrangements.
Don’t we need a database for this? Well, that is possible, and with serverside PHP, could be done, but we opt for clientside window.localStorage usage to …
Save user CSS styling settings
Recall user CSS styling settings
… so that a user might opt to “set and forget” their preferred set of …
New additional
Changed single line
New block of lines
Deleted lines
Changed multiple lines
… (CSS Selector) sensitive “categories” of Difference Report data type settings.
<?php
$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";
$legend="";
$mx="";
$onecommand=" function nocaret(invx) { var outvx=decodeURIComponent(invx); while (outvx.indexOf('<') > outvx.indexOf('>')) { outvx=outvx.replace('>' + outvx.split('>')[1].split('<')[0] + '<',''); } return encodeURIComponent(outvx); } function onb(event) { var othis=event.target, cih=''; if (('' + othis.id + ' ').substring(0,1) == 'f') { cih=('' + window.localStorage.getItem('diff_' + othis.id)).replace(/^undefined$/g,''.replace(/^null$/g,'')); if (('' + othis.innerHTML.replace(/\ \;/g,' ') + '~~').indexOf(' ~~') != -1) { if (cih == '') { window.localStorage.setItem('diff_' + othis.id, encodeURIComponent('14 >' + othis.innerText + '<')); } else { window.localStorage.removeItem('diff_' + othis.id); window.localStorage.setItem('diff_' + othis.id, nocaret(cih) + encodeURIComponent(' >' + othis.innerText + '<')); } } } } function blurize(othis) { if (1 == 2) { othis.onblur=function(event) { onb(event); }; } return othis; } function perhapsih(insg,ofo) { if (insg.indexOf('<') > insg.indexOf('<') && insg.indexOf('<') != -1) { ofo.innerHTML=insg.split('>')[1].split('>')[0]; ofo.setAttribute('data-ih', insg.split('>')[1].split('>')[0]); return insg.replace('>' + insg.split('>')[1].split('>')[0] + '<', ''); } } function givef(idn,cssis) { if (('' + document.getElementById('f' + idn).title).indexOf(' ' + decodeURIComponent(cssis) + ' ') == -1) { document.getElementById('f' + idn).title=document.getElementById('lspan').title + ' You have user CSS styling friendly one off setting of ' + decodeURIComponent(cssis) + ' for this category of Difference Reporting'; } } function getmaybe(foin,defis) { var mgs=document.URL.split(foin.id + '='); thatget=('' + window.localStorage.getItem('diff_' + foin.id)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thatget != '') { if (eval('' + mgs.length) == 1) { return decodeURIComponent(thatget); } else if (mgs[1].split('&')[0].split('#')[0] == '') { return decodeURIComponent(thatget); } } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { return decodeURIComponent(mgs[1].split('&')[0].split('#')[0]); } } return defis; } function getany() { var mgs=[],addget='',thisget=''; if (document.URL.replace('?','&').indexOf('&f') == -1 || 1 == 1) { for (var iig=0; iig<=6; iig++) { mgs=document.URL.split('f' + iig + '='); thisget=('' + window.localStorage.getItem('diff_f' + iig)).replace(/^undefined$/g,'').replace(/^null$/g,''); if (thisget != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(thisget) + ' for this category of Difference Reporting'; } if (eval('' + mgs.length) > 1) { if (mgs[1].split('&')[0].split('#')[0] != '') { document.getElementById('f' + iig).title=document.getElementById('lspan').title + ' You have user CSS styling friendly setting of ' + decodeURIComponent(mgs[1].split('&')[0].split('#')[0]) + ' for this category of Difference Reporting'; } } if (document.URL.replace('?','&').indexOf('&f' + iig + '=') == -1) { addget+='&f' + iig + '=' + thisget; } } } if (addget != '') { location.href=(document.URL.split('#')[0] + addget).replace('.php&','.php?'); } } setTimeout(getany,2000); function removeany(newfo) { window.localStorage.removeItem('diff_' + newfo.id); } function addany(newishfo,newwhat) { removeany(newishfo); window.localStorage.setItem('diff_' + newishfo.id, newwhat); } function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; ). Append spaces to save for other Coding Difference Report sessions into the future. Prefix with minus ( ie. - ) to forget any remembered setting. An entry can be > followed by a new wording for this category followed by <', getmaybe(fo,defd)); if (numis != null) { if ((perhapsih(numis,fo) + 'x').trim().substring(0,1) == '-') { removeany(fo); numis=numis.replace('-',''); } if (('' + numis).trim() != '') { if (numis.replace(/\ $/g,'') != numis) { addany(fo,encodeURIComponent(numis.trim())); } location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } ";
if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) {
$onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); ";
for ($ij=0; $ij<=6; $ij++) {
if (isset($_GET['f' . $ij])) {
$ihbit="";
$words=str_replace('+',' ',urldecode($_GET['f' . $ij]));
if (strpos($words, '<') !== false && strpos($words, '>') !== false) {
if (strpos($words, '<') > strpos($words, '>')) {
$ihbit=" document.getElementById('f" . $ij . "').innerHTML='" . str_replace("'", "' + String.fromCharCode(39) + '", explode('<',explode('>',$words)[1])[0]) . "'; ";
}
}
if (trim($words) != '') { $onecommand=str_replace("} ", " givef(" . $ij . ",'" . $_GET['f' . $ij] . "'); } ", $onecommand); }
$wordsa=explode(' ', trim($words));
if (sizeof($wordsa) > 1) {
$words=substr($words,(1 + strlen($wordsa[0])));
for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) {
if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) {
$words=trim(substr($words,(0 + strlen($wordsa[$ijj]))));
$style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>';
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand);
}
}
if (trim($words) != '') {
if (strpos($words, "{") !== false && strpos($words, "}") !== false) {
$style.='<style> ' . $words . ' </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand);
} else {
$style.='<style> .f' . $ij . " { " . $words . ' } </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand);
}
}
}
$onecommand=str_replace("} ", $ihbit . " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand);
$style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>';
}
}
}
?>
… to start making this happen (including being able to change our “inhouse category” names, if you like) in our changeddiff.php‘s more colourful Code Differences helper.
Yesterday’s Code Difference Privacy Tutorial represented too much of an echo chamber for our liking. Where possible, we prefer functionality that the users out there can tweak themselves.
In thinking about this, those 5 categories (involving 2 subcategories) …
New additional
Changed single line
New block of lines
Deleted lines
Changed multiple lines
… were what occurred to us could be the CSS Selector basis for us to improve the Code Difference reporting via CSS styling functionality.
Up to today the deployment of that CSS selector logic would have had to be more complex than necessary, but today’s …
giving new id and class attributes to the “legend” span id=lspan elements … and …
equivalent class attribute to report matching element data
… makes the deployment of CSS selector logic really easy, in PHP, as per …
<?php
$style="<style> font { text-shadow: -1px 1px 1px #ff2d95; } </style>";
$legend="";
$mx="";
$onecommand=" function askabout(fo) { var defd='14', ccol='black', ccols=fo.outerHTML.split(' color=' + String.fromCharCode(34)), psizes=fo.outerHTML.split('px'); if (eval('' + ccols.length) > 1) { ccol=ccols[1].split(String.fromCharCode(34))[0]; } if (eval('' + psizes.length) > 1) { defd=psizes[0].split(':')[eval(-1 + psizes[0].split(':').length)].trim(); } var numis=prompt('How many px (ie. pixels) do you want for the font size of these ' + fo.innerHTML + ' parts of report? Optionally append after a space a colour that is not the default colour ' + ccol + ' for this category of difference report. Optionally append after a space any other styling you want ( eg. text-shadow: -1px 1px 1px #ff2d95; )', defd); if (numis != null) { if (('' + numis).trim() != '') { location.href=(document.URL.split('#')[0] + '&' + fo.id + '=' + encodeURIComponent(numis.trim())).replace('.php&','.php?'); } } } ";
if (isset($_GET['f0']) || isset($_GET['f1']) || isset($_GET['f2']) || isset($_GET['f3']) || isset($_GET['f4']) || isset($_GET['f5']) || isset($_GET['f6'])) {
$onecommand.=" function sizefonts() { } setTimeout(sizefonts, 3000); ";
for ($ij=0; $ij<=6; $ij++) {
if (isset($_GET['f' . $ij])) {
$words=str_replace('+',' ',urldecode($_GET['f' . $ij]));
$wordsa=explode(' ', trim($words));
if (sizeof($wordsa) > 1) {
$words=substr($words,(1 + strlen($wordsa[0])));
for ($ijj=1; $ijj<sizeof($wordsa); $ijj++) {
if (strpos($wordsa[$ijj], ':') === false && $ijj == 1) {
$words=trim(substr($words,(0 + strlen($wordsa[$ijj]))));
$style.='<style> .f' . $ij . " { font-color: " . trim($wordsa[$ijj]) . '; } </style>';
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').color='' + '" . trim($wordsa[$ijj]) . "'; document.getElementById('f" . $ij . "').style.fontColor='' + '" . trim($wordsa[$ijj]) . "'; } ", $onecommand);
}
}
if (trim($words) != '') {
if (strpos($words, "{") !== false && strpos($words, "}") !== false) {
$style.='<style> ' . $words . ' </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> ' + '" . $words . " </style>'; } ", $onecommand);
} else {
$style.='<style> .f' . $ij . " { " . $words . ' } </style>';
$onecommand=str_replace("} ", " document.getElementById('dstyle').innerHTML+='<style> .f" . $ij . " { ' + '" . $words . " } </style>'; } ", $onecommand);
}
}
}
$onecommand=str_replace("} ", " document.getElementById('f" . $ij . "').style.fontSize='' + '" . trim($wordsa[0]) . "px'; } ", $onecommand);
$style.='<style> .f' . $ij . " { font-size: " . trim($wordsa[0]) . 'px; } </style>';
}
}
}
it was possible, but unlikely, for users to see other user generated reports, if they happened to be asking for reports at exactly the same time … because …
we had not catered for busy traffic here … but, today …
we cater, better, for busy online traffic … and at the same time …
improve the privacy of the reporting on an IP address basis
The downside, at least for us managing this, is that we do not want a build up of files belonging to difference reports long gone. We arrange it, then, that as soon as the report is created, a window.open scenario is coded for …
It’s coming up to a few years now, since we looked at the code differences reporting we offer the reader, as a way to scrutinize code changes, around here, when we presented Code Download Table Difference Functional Hover Tutorial. Well, we thought we might try some colour coding to perhaps lift the fog on the cryptic nature of Linux diff (difference) command based reports. They can be cryptic because they can feed into the automation feeding of the report into other Linux commands to facilitate ongoing editing endeavours, but we do not want to go into that here, at least today.
But on examining the reports we came up with the following difference report “categories” if you will …
New additional
Changed single line
New block of lines
Deleted lines
Changed multiple lines
… the header (of a block of interest) the dead give away, depending on the existence of “a” or “c” or “d” and/or “,” for a common sense reinterpretation by us not visiting “man diff” ourselves, yet, regarding this work.
Is it worth adding “onmouseover” event logic onto yesterday’s Code Download Table Difference Functional Linking Tutorial? You bet it is! Just because “onmouseover” has no relevance to mobile platforms, so, obversely, developing software with version control systems is irrelevant to mobile platforms.
… we figure. But this is of relevance to the programmer. Sometimes, rather than cater for all the platforms, settling on a subset (of those platforms) can be apt because …
one of mobile or non-mobile subsets of platforms is irrelevant to the scenario … as for today … or …
you try to reinvent the wheel on the pretext that you are waiting for a particular web browser or platform to allow the functionality in, into the future … you could be waiting a while, with the complexity of app arrangements going on around the net these days
Anyway, back to the “onmouseover” event on non-mobile platforms … it was the case that this event was a favourite for the conduit towards Ajax (client) functionality. And thinking on what we do today to nuance our Code Differences PHP web application, we were thinking …
What would Ajax (like to) do?
… and we decided Ajax would really like to …
populate a “div” style=display:inline-block; element adjacent to the functional detail to inform about … but this was not possible … so, instead, we …
populate a popup window near to the functional detail to inform about
… for a non-mobile “hover” (ie. “onmouseover”) event.
Along the way we add some more hashtag navigations and set up more colour coding to the output of (the optional) “functional links” Code Difference reporting.
So take a look at our changeddiff.php Code Differences helper applied to itself below …
“Report” button shows to its right …
function domrows() {
document.getElementById('dawrc').innerHTML='<input style=inline-block; type=button onclick=treportdo(); value=Report></input>';
var trsis=document.getElementsByTagName('tr');
for (var itrsis=0; itrsis<trsis.length; itrsis++) {
trsis[itrsis].onclick = function(e) { if (e.target.innerHTML != '') { var trs=document.getElementsByTagName('tr'); for (var itrs=0; itrs<trs.length; itrs++) { if (trs[itrs].outerHTML.indexOf(e.target.innerHTML) != -1) { trs[itrs].style.border='2px dotted red'; } } } };
}
}
… and table row onclick logic is dynamically applied to those “tr” elements
User clicks somewhere within rows they are interested in seeing be included in a report (which is a snippet of the whole Code Download Table, perhaps to do with a project of interest, or a learning topic of interest)
User optionally clicks the “Report” button …
function treportdo() {
var trsis=document.getElementsByTagName('tr');
webc='<html><head><script type="text/javascript"> function emailto(eto) { window.opener.parentemailto(eto); } function xemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","Code Download Table part"); zform.append("body",document.getElementById("mytable").outerHTML); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } } </script></head><body><table id=mytable></table><br><br><br><input onblur=emailto(this.value); placeholder="Email to" type=email></input></body></html>';
for (var itrsis=0; itrsis<trsis.length; itrsis++) {
if (itrsis == 0) {
webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>');
}
if (trsis[itrsis].outerHTML.indexOf('>') > trsis[itrsis].outerHTML.indexOf('border:')) {
if (trsis[itrsis].outerHTML.indexOf('dotted') > trsis[itrsis].outerHTML.indexOf('border:')) {
webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>');
}
}
}
var woois=window.open('','_blank','top=20,left=20,width=600,height=600');
woois.document.write(webc);
}
… which causes a …
New popup window opens showing the relevant snippet of Code Download Table of interest to the user … including …
Textbox for an optional emailee entry that can be filled in … to …
Set off Ajax/FormData methodology means …
function parentemailto(eto) {
if (eto.indexOf("@") != -1) {
var zhr=new XMLHttpRequest();
var zform=new FormData();
zform.append("inline","");
zform.append("to",eto);
zform.append("subj","RJM Programming Code Download Table part");
zform.append("body", reltoabs('<table' + webc.split('</table>')[0].split('<table')[1] + '</table>'));
zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true);
zhr.send(zform);
alert("Email sent to " + eto);
}
}
… to send off an Inline HTML Email report to the emailee … including …
Links of email can be clicked to get back to source code and other links back at the RJM Programming domain web server
… and … lo and behold … we saw a good use for the idea of …
download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI
… and allowing for that second step above be programmatical with the most apt functionality that had ever passed our cotton pickin’ mind … our Code Download Table … wi’ all tho’ GETME’s!
But we don’t want to interfere too much with the Code Download Table “flow” here, so create up the top left 20 seconds worth of time (extendable by their actions) available to the user to create “download” attributes on all …
“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)
… plus no href attribute containing “?s=” either, for today’s purposes with a changedgetmelist.js external Javascript code file (that you can try out for yourself at this live run link) … via its new …
var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')); //.replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_');
var delaymore=0;
var prefixask='<div id=firstask style="position:absolute;top:0px;left:0px;"> Download GETME? <input id=dpccb style=inline-block; type=checkbox onchange="dogetmes(document.getElementById(' + "'" + 'dpcis' + "'" + ').value);"></input> <input style=inline-block;width:300px; onclick="delaymore+=20000;" onblur="if (document.getElementById(' + "'" + 'dpccb' + "'" + ').checked) { dogetmes(document.getElementById(this.value); }" type=text id=dpcis placeholder="Optional Download Folder Later Copy to Place via Listener" value="' + dnprefix + '"></input></div>';
function dogetmes(dpprefix) {
delaymore+=20000;
var asis=document.getElementsByTagName('a');
if (dpprefix != dnprefix && 1 == 7) {
localStorage.setItem('download_copy_to_folder', dpprefix);
}
for (var iasis=0; iasis<asis.length; iasis++) {
if (asis[iasis].href.indexOf('diff.php') == -1 && asis[iasis].href.indexOf('?s=') == -1 && asis[iasis].href.indexOf('GETME') != -1) {
asis[iasis].download=dpprefix.replace(/\//g,'_').replace(/\\\\/g,'_').replace(/\:/g,'_') + asis[iasis].href.split('/')[eval(-1 + asis[iasis].href.split('/').length)];
}
}
}
function nomorepa() {
if (eval('' + delaymore) == 0) {
if (document.getElementById('firstask')) {
document.getElementById('firstask').innerHTML='';
}
} else {
setTimeout(nomorepa, eval('' + delaymore));
delaymore=0;
}
}
function lastdivpop() {
var wasih='';
if (document.getElementById('lastdiv')) {
if (document.getElementById('lastdiv').innerHTML == '') {
wasih=wasih;
setTimeout(lastdivpop, 3000);
} else if (document.getElementById('lastdiv').innerHTML.indexOf('firstask') == -1) {
wasih=document.getElementById('lastdiv').innerHTML;
document.getElementById('lastdiv').innerHTML=prefixask + wasih;
prefixask='';
setTimeout(nomorepa, 20000);
} else {
setTimeout(lastdivpop, 3000);
}
}
}
… and we’ve just “tweaked” (albeit, very importantly, in our books (… but the pamphlettes are still not playing ball)) to ensure no “file clobbering” takes place so that the Korn Shell now does …
suf=""
isuf=-1
while [ -f "${dpath}/${brest}${suf}" ]; do
((isuf=isuf+1))
suf="_${isuf}"
done
if [ ! -z "$suf" ]; then
echo "mv ${dpath}/${brest} ${dpath}/${brest}${suf} # `date`" >> download_to_place.out
mv ${dpath}/${brest} ${dpath}/${brest}${suf} >> download_to_place.out 2>> download_to_place.err
fi
But today is mainly about filling in the missing bits on the “server” side. This (need for a) “conduit” we referred to yesterday is because we accept no folder paths can be mentioned at the “server” end. Suppose, though, that the “non-pathed” filename we supply to an “a” link’s “download” attribute can be prefixed by a mildly mashed up version of that path we copy to from the Downloads folder of your “client” computer or device, as you perform a “download” via the clicking of an “a” link.
Well, at this blog we’d already started functionality to toggle the use or not of …
“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)
displaying of source code in a new webpage for GETME “a” links … versus …
use the changed PHPtoggle_download.php in conjunction with a changed good ‘ol TwentyTen Theme header.php as below …
<?php
if (outs == null) {
var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')).replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_');
for (idmjk=0; idmjk<admjk.length; idmjk++) {
if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) {
big = '----------------------GETME';
stuffs = newaspare.split('/');
if (dnprefix != '') {
admjk[idmjk].download = dnprefix + prestuffs[stuffs.length - 1];
} else {
admjk[idmjk].download = dnprefix + stuffs[stuffs.length - 1];
}
admjk[idmjk].title = "(Really download) " + admjk[idmjk].title + ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled';
admjk[idmjk].onmouseover = " getDownloadMode(); ";
admjk[idmjk].onmouseout = " yehBut(); ";
admjk[idmjk].ontouchstart = " getDownloadMode(); ";
admjk[idmjk].ontouchend = " yehBut(); ";
}
} else if (admjk[idmjk].href.indexOf('GETME') != -1 && origcafd < 0) { //!cafd) {
xp=admjk[idmjk].href.split("GETME");
prexp=xp[0].split("/");
postprexp=prexp[-1 + prexp.length].split(".");
extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,"");
outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis;
aorig=admjk[idmjk].innerHTML;
selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&')[0]);
admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚫</option>" + selbitis + "</select></span>");
if (aorig == admjk[idmjk].innerHTML && admjk[idmjk].innerHTML.indexOf('er posts') == -1) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚪</option>" + selbitis + "</select></span>");
cafd++;
} else if ((admjk[idmjk].innerHTML.indexOf('live run') != -1 || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1) && origcafd < 0) { //!cafd) {
outs="//www.rjmprogramming.com.au/slideshow.html#tuts";
admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=650,height=100'); } return false; \">✂</span>");
cafd++;
}
}
}
?>
… to, depending on whether the user specifies in the “All Posts” toggling’s Javascript prompt window presented, specifies a new comma separated “client folder of interest to copy to” place (stored in window.localStorage), will …
download with the GETME to the Downloads folder and copy off to the specified folder of interest (backing up as necessary) … versus …
the default download mode downloads to the Downloads folder without the GETME parts
See these changes in action below, contextualizing “server” and “client” codes in the full picture of assisted Downloads (copied on to a folder of the user’s interest) …
Downloading from “the net” (“server land”) to your computer or device (“client land”) is a big part of the online experience and the sharing of data over the world wide web. But have you ever wondered about the two step design of …
download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI
… ? Why not allow the “server” side define where it can download to on the “client”? Well, that would be a security nightmare, allowing a highjacking of mission critical files on your computer or device. So, I get it, that is a “no no”. But could we have a controlled “arrangement” between …
… ? We think that sounds reasonable and so, today, we start our (two parts or more) mini-project (making step 2 above be considered to be programmatically handled, sometimes) designing a Korn Shell (“client” side) listener to suit our macOS “client” computer, executed as a background process via …
But what is the conduit, if the “server” web applications/pages cannot define a destination folder other than the macOS Downloads folder for the user involved? Well, that is where we need either …
Korn Shell interactive input (via read command) … or …
… to define a “client land” folder to copy to (from the user’s Download folder (receiving the downloaded data).
That first Korn Shell read command interactive input was interesting to us for a command backgrounded via the “&” command suffix. But if stdin and stdout are not mentioned in the command you can answer this interactive input and then the processing the Korn Shell performs proceeds in the background. Exactly what we were hoping for, but weren’t sure that this was the case!
The picture is filled in better tomorrow as we discuss the conduit in more detail tomorrow.
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.
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.
Belief systems can stick, perhaps to your detriment, on occasions. Until recently, somehow, we thought it was asking too much of Javascript DOM, that we can dynamically change an HTML element attribute …
id
name
… as if they were sacrosanct attributes, or something. This belief, regarding name is doubly naive, as name is used in form navigation, flagging the element values that will be passed on through to the destination webpage.
Recently we’ve been debunking such naivety, using methodology always available to you regarding the extremely flexible, and non-damaging, ways of Javascript and DOM, on the clientside of the webpage “client/server equation”. In other words …
If you don’t know if something will work, or not, using clientside Javascript, and it’s Document Object Model (ie. DOM) arrangements, just try it. What harm can it do, except to something in the webpage session you are in, or perhaps HTTP Cookies or perhaps window.localStorage, all of which can be repaired, and, for that matter examined, using a web inspector?
<?php
function captionsearchit() {
var ps=document.getElementsByTagName("p");
for (var i=0; i<ps.length; i++) {
if (('' + ps[i].className) == 'wp-caption-text') {
ps[i].innerHTML+=" <a onclick=\"document.getElementById('s').scrollIntoView();\" style=text-decoration:none;cursor:pointer; title=Search>🔍</a>";
}
}
}
?>
… which “did the job”, but on us mulling over it’s stinginess regarding where any Back 🔙 link would lob you back onto (ie. not showing up the top the blog posting’s full title nor it’s accompanying “header media” always), we thought an improvement could be made by …
prefixing an “a” to the caption emoji 🔍 link’s id attribute and …
assign what we used to have as this emoji link id attribute to the hosting element …
… which we’ll (more happily, and more contextually, and less stingily) lob back onto as per, the new header.php (PHP writing Javascript) snippet …
Regarding the composing of reasonably complex business emails, in our mind, we like to separate the Gmail (iOS mobile app, in today’s case) email composing of ones that will involve a photograph image attachment or two into two categories, in our mind …
we want to base the composition on the photos, and so use the Photos app here on this MacBook Air using macOS, or on the iPhone or iPad using iOS, and …
Select photos then use the Share method called Mail to fill out the rest
… which is our “majority methodology” if you will. But, we grant you, and many others will be in sympathy with this, that there are occasions where …
the blurb is by far the bigger priority and should be composed first, with the images interspersed amongst the text
And, using Gmail app here, performing the second, there is a bit of advice we’d like to share, for those people put off by not seeing their image attachment content as graphical content, before their eyes (and we’re guessing the majority of people are like that), as they are composing the Gmail email, and these images only exist on another device you Message over to the device you are working on.
At the Messages app, reading one of these incoming “image attached” SMS messages, use …
Save
… icons and links (and those “fleeting” little blue “Save” icons to the right of the images will do), not any of the “Copy” ones. Why? On an email we were composing recently, that caused a gobbledegook link, like …
… which might work (but looks wrong to me) by the time it gets to the recipient end of the whole thing, but can be a bit offputting at the Gmail email composer’s end.
What does this “Save” refer to? On macOS and iOS, it means “Saved” to your Photos app photo library, and once there selecting such a photo, it is okay, then, to dwell on the photo and pick a “Copy” icon or link. On being back at the email and dwelling on the spot to place the photo and picking a “Paste” icon or link, this photo’s content will be graphical, by nature, to both the composer of the email and the recipient of the email, whether that be as an image showing there and then or as a downloadable email attachment.
There is today’s animated GIF presentation to refer to here, or if you are still confused by what we are talking about, that animated GIF has us …
opening Gmail app on an iPad
filling out Subject and who to send the email to …
start writing “the blurb”, or text, into the body section of the email …
and get to a part where an attached photo would be good … but the image exists on another device … so …
on that other device organize to Message us that image …
open Messages app to view the incoming SMS with relevant image attached … so what we are advising here is either …
use either the small blue “Save” icon to right of image or dwell on the image and select “Save” (but, please, not “Copy”) …
in Photos app Select that latest photo and dwell on the image to select the Photos “Copy” icon or link …
back in Gmail app’s email body, position where you want the image to show, dwell there, and touch the “Paste” icon or link, to get a graphical rendition of that photo, in the email body
etcetera etcetera etcetera
Happy composing!
If this was interesting you may be interested in this too.
We had occasion to revisit the PHP (Pear installed) Image_3D package (we last talked about with Image_3D PHP Package Sharing Tutorial) inhouse interfacing web application, in it’s new home on AlmaLinux. Yes, there were issues moving from a PHP environment on …
CentOS Apache PHP version starting with a 5 … to …
AlmaLinux Apache PHP version starting with an 8
… and found an alarming looking lot of errors, which panned out mainly the same few errors … so … don’t panic!
Most of this list involved deprecated calls to the PHP GD library fixed via …
… in the changedGd.php as the GD interfacing part to this great Image_3D package.
We noticed our changedindex.phpinhouse Image_3D interfacing web application was lacking a bit of “branding”, should we say?! So, in the existing table’s single row of cells, we add a new one with id=’tdright’ …
You guessed it. Taking off from where we left off with yesterday’s Image_3D PHP Package Overlay Tutorial “data-uri” promise, today we allow for some emailing with HTML attachments snapshotting the status of your Image_3D web application.
When you email (via our new form input type=button “Email” element (button)) an HTML attachment it becomes a file:// protocol controlled webpage after downloading and opening with a web browser. Worry about relative URL links as they are unlikely to work in this scenario. Absolute URLs might work. But as far as image data goes, the data-uri inherent in our HTML, as of yesterday, can be adjusted …
function emailit() {
emailee=prompt(\"Enter email recipient (and can change default subject 'Image_3D Graphics' via |[subject] suffix)\", emailee);
if (emailee == null) { emailee=''; }
if (emailee.indexOf('@') != -1) {
document.getElementById('emailto').value=emailee.split('|')[0];
if (emailee.indexOf('|') == -1) {
document.getElementById('subject').value='Image_3D Graphics';
} else {
document.getElementById('subject').value=emailee.split('|')[1];
}
var prehcontis='<!doctype html><html><head>' + document.head.innerHTML + '</head><body>';
var hcontis=document.body.innerHTML + '</body></html>';
var thdsh=hcontis.split('</td>');
//hcontis=hcontis.replace(thdsh[0], thdsh[0].replace(/ title\=/g, ' TITLE='));
var duris=hcontis.split(' title=\"data:');
for (var ij=1; ij<duris.length; ij++) {
if (ij == 1) {
hcontis=hcontis.replace(' title=\"data:' + duris[ij].split('\"')[0] + '\"', '');
} else {
hcontis=hcontis.replace(' title=\"data:' + duris[ij].split('\"')[0] + '\"', '><img src=\"data:' + duris[ij].split('\"')[0] + '\"></img');
}
}
var xh=hcontis.split('</table>');
var xhh=xh[0].replace(/\<iframe/g, '<!--iframe').replace(/\<\/iframe\>/g, '</iframe-->');
hcontis=hcontis.replace(xh[0], xhh);
document.getElementById('hcont').innerHTML=prehcontis + hcontis.replace(' action=\"//www.rjmprogramming.com.au', ' action=\"http://www.rjmprogramming.com.au');
document.getElementById('iemail').click();
}
}
… to use the “data-uri” in table cell CSS background scenarios, as required, to help the user.
On top of the progress with yesterday’s Image_3D PHP Package Parameterize Tutorial today we go one better than a three word slogan, and do a two word slogan, hoping that one day we can perfect the “Zero Word Slogan”, those words being …
data-URI (the minus sign saving us from embarrassment)
… to do with, respectively …
increased and more sophisticated functionality
data transportability and independence
More on data-URI tomorrow, but for today, what is the broad brush approach to overlay (of 3D graphic images) functionality today …
we add a form input type=button “Overlay” element (button) that …
performs the onclick logic Javascript function topoverlay snippet (like) …
if (document.getElementById('form_' + tdfs).method.toUpperCase() != 'GET') {
document.getElementById('form_' + tdfs).target='ifinv';
document.getElementById('form_' + tdfs).method='GET';
document.getElementById('submit_' + tdfs).click();
setTimeout(topoverlay, 5000);
}
… to change from form method=POST to method=GET (that knowledge used to reason if such a method=GET scenario has been the call, the invocation called just outputs an invisible HTML img with the user definitions, opening up the ability to have the image data be shared up through the webpage hierarchy) and click the input type=submit button to an invisible HTML iframe name=ifinv to re-execute this webpage as the creator of that user defined image whose data-URI is saved into the title property of this webpage’s parent table cell as well as to a new HTML img element starting to deploy some overlay favourites …
opacity 0.5 CSS property (which is also applied to the original img element as well)
Up to now with our PHP “Image_3D” package inspired web application of Pear Install of Image_3D PHP Package Tutorial we’ve “come to grips” with some of the concepts by following leads from that previous link and Paint 3-D images with PHP, as we need help to know where to look. Those 3D graphic shape examples used “hardcodings”, principally numbers, involved with suitable shape constructions and displays.
That’s all fine and good, but how else can you take some steps in keeping up the learning, and at the same time progressing the project? We find “parameterizing” a useful exercise, quite often, with regard to this. We define “parameterizing” in PHP (or in another language) as …
changing “hardcodings” (involving modes and colours and scales and offsets and rotations and detail and radii and lengths) into variables …
maintained in HTML form (method=POST) input fields and a shape select (dropdown) element … passed back to the same PHP where we …
check $_POST data to tailor the 3D graphical display … and at the same time …
update the HTML form input fields for those passed in values … that form of interest being in a …
table cell (within the one table row) labelled with the shape name is visible … whereas …
other table cells (within the one table row) labelled with other shape names are initially set display:none (ie. invisible)
… and a design feature we have with this web application, now, is to have a separate PHP $_GET[‘shape’] (or ?shape=[shapename]) arrangements allowing the change of dropdown shape to cause one of the invisible table cells to open up and contain an HTML iframe element showing that shape with good appropriate initial values on which to build, should the user choose to. That is up to them.
Yesterday’s Image_3D PHP Package Primer Tutorial introduced for this blog the very useful looking PHP “Image_3D” (3D graphics) package. But how did we reach this discovery? Well, it comes from “cPanelling” around, a faux verb an Apache web administrator will probably understand. The cPanel web server administrative suite of software has a vast number of features, and under …
Module Installers
… you’ll see there a pretty old installer, now, called Pear (the PHP Extension and Application Repository), which we’d never used, but were curious about, so we tried the link chain …
… which got us to thinking to deploy that to our PHP 7 (Image_3D needs PHP 5 or above) local MAMP web server system. To do this we needed to install Pear itself via …
Today, we’re starting out on a new 3d graphics idea, talking about a PHP package named “Image_3D” written by Arne Nordmann, Tobias Schlitt and Kore Nordmann. You may recall an alternative 3d graphics idea called WebGL talked about with the thread of blog postings down from WebGL Prism Canvas Email Tutorial.
We installed “Image_3D” via the Pear PHP installer, but we shall talk more about that tomorrow. For today, it is more “proof of concept” territory, taking leads from the excellent Paint 3-D images with PHP resource we thank profusely.
Today we’re revisiting our “Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the WebGL API scenario”, we last talked about with PHP and Javascript and CSS WebGL Prism Tutorial as shown below. We revisit with a view to …
make it more aesthetically pleasing, we hope
centre the main graphical elements of the web application when unsupervised and avoid our old “sinful” align=’center’ “habit” usage we talked about at W3C XHTML Nu Checker Validation Primer Tutorial going on, which we diligently changed to style=” width:100%;text-align:center; “ here today … when unsupervised, but …
left justify the main graphical elements of the web application when supervised, so this involved detecting “supervision” and Javascript DOM changes at …
window.onload = function init() { if (document.URL.indexOf('huh=') != -1 || parent.document.getElementById('glcanvas') != null || (document.referrer.indexOf('/HTMLCSS/ShapeDraw') != -1 && document.referrer.indexOf('.htm') == -1)) {
document.getElementById('myform').innerHTML+='<input type=hidden name=huh value=></input>';
document.getElementById('mydiv').style.position='absolute';
document.getElementById('mydiv').style.top='0px';
document.getElementById('mydiv').style.left='0px';
document.getElementById('mydiv').style.width='300px';
document.getElementById('mydiv').style.textAlign='left';
document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="300" height="300"></canvas>';
document.getElementById('mydiv2').style.position='absolute';
document.getElementById('mydiv2').style.top='310px';
document.getElementById('mydiv2').style.left='0px';
document.getElementById('mydiv2').style.textAlign='left';
document.getElementById('mydiv3').style.position='absolute';
document.getElementById('mydiv3').style.top='330px';
document.getElementById('mydiv3').style.left='0px';
document.getElementById('mydiv3').style.textAlign='left';
} else {
document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="400" height="400"></canvas>';
}
canvas = document.getElementById( "gl-canvas" );
// more follows ...
adding new Email functionality via mailto: tags linking to the user’s default Email client program, featuring the ability to …
have the body section of that email be able to have a clipboard image pasted into it, for which we can utilize HTML5 canvas element’s toDataURL() method, teamed up with a window.open popup window of the toDataURL image data, which can be selected and copied, optionally, by the user themselves, should they wish this to make their email more self explanatory … and that canvas element’s “meeting of minds” with WebGL changing as per …
… the help for which we got great ideas from this useful link, thanks, and which allows the canvas element content to be retained long enough to be available for the toDataURL() call of it
As we’ve said before about email, as a communication tool, its use can add a lot of accountability to your web applications, as well as being a great “sharing” method.
To infinity and beyond!! … well, at least to the 3rd dimension … yes, we’re rejoining our Geometry and Land Surveying theme today, rejoining the discussion of PHP and Javascript and CSS Shape Rotation Tutorial as shown below, but giving some additional functionality to show the Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the WebGL API, modelling the additional code via the public generosity and wonderful resources from the University of New Mexico … our heartfelt thanks.
If you have been a recent reader you’ll have seen that we have been discussing OpenGL. OpenGL has a OpenGL.org landing page which will talk about all the platforms supported, and let’s just remind you about the purpose, with a quote from the webpage …
The Industry’s Foundation for High Performance Graphics
from games to virtual reality, mobile phones to supercomputers
… well, today, we use some of that knowledge … some being the operative word, and we’ll talk more on this tomorrow, but … with the sequence of blog posts culminating in C++ OpenGL in Xcode Generic Regular Prism Drawing Tutorial we learnt some things about graphics software and the concepts of …
object vertices definition
object colour
lighting … direction, type, angle, numbers of sources etcetera
perspective … field of view, aspect ratio, Z position
… and the Land Surveying use of thinking about Survey Traverses as an idea to genericize the vertex definition phase, as this is the major difference between drawing a “cube” or a “hexagonal prism” or a “butterfly in Brazil” (just kidding … that’s for tomorrow (in Klingon time)).
So the wonderful code from the University of New Mexico (via StackOverflow) was to show a cube, and the use of buttons to display animation and rendering “smarts” … so am really really really keen for you to examine this additional HTML code of today you could call webgl_test.html … we change it to add some Land Surveying feeling to the creation of vertices for our Convex Polygon extended into a Prism arrangement as per the Javascript code …
WebGL API performs its graphics via the use of the HTML5 canvas element. We’ll be discussing more on this topic, no doubt, as time goes on.
Here is a link to Shape Draw live run (with Google Line Chart and HTML svg and WebGL 3D Prism drawing and University of New Mexico inspired animation functionality) here.
Here is a link to Shape Draw PHP source code ShapeDraw.php with changes from previous code as per this link.
Try it out, and get into web based 3D graphics via the WebGL API … you’ll be drawing prism animals before the sun goes down!
PHP and Javascript and CSS Shape Rotation Tutorial
We’re continuing on with our Geometry and Land Surveying theme today, following on from yesterday’s PHP and Javascript and CSS Shape Drawing Tutorial as shown below. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements.
If you read yesterday’s posting you’ll see that we added some popup window functionality to display the Convex Polygon created by the web application in a relative sense, and to do this we called on (where variable “opop” is global in scope) …
We’re here, today, to remind you, that that popup doesn’t have to be like a dead fish, just displaying information. It can be interactive itself, and is known to the “parent” window, so can have its own “hidden input” HTML element (for example) as per …
function takealook() {
var things;
if (opop != null) {
if (opop.document.getElementById('myunload').value.indexOf(",") != -1) {
things = opop.document.getElementById('myunload').value.split(",");
opop.close();
opop = null;
if (things.length >= 3) {
if (sipos != null) { clearInterval(sipos); sipos = null; }
var bis = 0.0;
bis += parseFloat(initialbearing);
bis += parseFloat(things[2]);
window.location = "./ShapeDraw.php?sides=" + things[1] + ",0&length=" + things[0] + "&bearing=" + posval(bis);
}
}
}
}
… to allow for some HTML “svg” element rotation functionality, if the button is pressed, that is. One last nicety is to use the Window Event “onunload” to clear the setInterval handler with a web browser close or a user closing the parent webpage as per …
Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here.
Link to Shape Draw PHP source code ShapeDraw.php with changes from code yesterday as per this link.
You may be interested in CSS3 ways to rotate HTML elements as well, so we’ll leave you with this link to point you in the direction of where we have discussed this previously.
It is no coincidence that Geometry and Land Surveying have a lot in common. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements.
So today, with our Plane Geometry web application, we start with our previous Survey Traverse web application, and add to its functionality with ability for it to fill out more for the user to describe a regular polygon of their choosing, defined by …
number of polygon sides
length of each polygon side
We also add to the Google Charts Line Graph of the Drawn Shape a popup window showing the polygon as an HTML svg element. Part of the reason for this is that the Google Chart Line Graph can exaggerate the x or y co-ordinate of its plots, but with the HTML svg element, you avoid this issue, as we are just showing you a “relative” view of the shape (ie. as distinct from an “absolute” view with distinct co-ordinates).
The thinking here started with a look at New Century Maths stages 5.2/5.3 “Exterior angle sum of a convex polygon”. Did you know?
The sum of the exterior angles of a convex polygon is 360°.
What we found to be the case, practically speaking, to imagine the drawing of a regular even-sided convex polygon (with “numsides” sides) was …
look north …
turn clockwise (360° / numsides) for first line to draw (NB. there is more symmetry if this number is then divided by 2) … then from then on …
off this previous line, turn clockwise (180° + (360° / numsides)) for subsequent lines
Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here.
Link to Shape Draw PHP source code ShapeDraw.php with changes from code below as per this link.
Hope you enjoy the geometry ideas, and will leave you with a very useful link that helped with the Convex Polygon method to calculate the Surface Area here.
HTML and Javascript and CSS Survey Traverse Tutorial
Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts. The tutorial subject matter is a webpage to perform Survey Traverse calculations. A Survey Traverse is:
Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:
Less reconnaissance and organization needed;
While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;
Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;
Traverse networks are free of the strength of figure considerations that happen in triangular systems;
Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.
The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]
Let’s see some simple HTML in action in a tutorial …
Link to HTML “spiritual home” … at W3Schools has many tutorials.
Link to Survey Traverse live run … here.
Link to Survey Traverse live run (additional Google Line Chart functionality) here.
Link to Survey Traverse information … from Wikipedia from which quote above comes.
Link to some downloadable HTML code … rename to SurveyTraverse.html which packages up a lot of Javascript and a little bit of CSS … or JaCvasScriptS … not sure whether this would ever catch on.
Link to some downloadable PHP programming code (additional Google Line Chart functionality) … rename to SurveyTraverse.php
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
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.
A topic we hadn’t thought about then was the CSS box-shadow property we got encouraged to “take on” by CSS Box Shadow, thanks.
So we decided to pit these two element types up against each other, again, in an …
Everything you can do,
I can do better
… feeling scenario, where (don’t tell these two, but) really, there is this, as well as a “complementary” feeling about the interactions, especially regarding the HTML textarea faux “resizing talents” (we were gobsmacked to learn from this excellent “Textarea onresize Not Working” link could not be harnessed via an onresize event, but rather use onmouseup and onmousemove), the intelligence of which can pass onto resizing the HTML div element in a similar way.
As far as a document.body onload event Javascript function “amalgamating” approach to assimilate the two …
Textarea Pointing Local Font Canvas Overlay Deletes Tutorial
In life, as in programming, it’s the “what ifs?” about a job that can take a whole lot longer than you think, I suppose, as much as anything, if you’re an optimist like me, and want to get into projects at the start to see progress early (as to not assign a project to the “do later” basket), and so have left those “what ifs?” to tackle later. Or maybe, really, it’s just your simpler thinking types, like me, that work it this way. Anyway, whatevvvvveerrr, they often take more time, and in today’s case, we find it hard to envisage we should have made its functionality a “central tenet” to doing the project.
So what is this newly introduced functionality to our “Textarea Pointing” and “Local Fonts” projects? It’s the “textarea” keyboard functionality requirements in relation to “what if the user hits the …
Backspace or Delete
… keys?“. Our non central view of this issue panned out as an okay strategy, and maybe a few days back with the Textarea Pointing Local Font Event Usage Tutorial (shenanigans, that required a Stop Press) you were nodding your head (very sagely, no doubt?!) when we said …
Stop Press
New preference to use onkeypress is to do with its better interpretation (with respect to onkeyup) of those characters that share a keyboard button and are not letters nor numbers (eg. the comma). Thanks to this useful link and this Firefox good advice, thanks, for excellent information here.
… predicting we’d come to a pretty pass when we lifted our gaze to the “Backspace Delete dilemma” … da da da da. On that day we got confused by Firefox behaviour with characters like comma (“,”) and, we think now, co-ordinates that are real rather than integers, and we gave the onkeydown event a try for a few minutes (maybe you saw with an earlier version of the Stop Press). Well, now, we realize in hindsight, that the onkeypress event is not the place to trap Backspace, nor Delete keys, and in the …
onkeydown/onkeypress/onkeyup
… common ordering of web browser keyboard events it is actually good to compartmentalize the onkeypress event logic to handle the “non what if?” work and onkeydown event logic (new to our code today) to handle the “Backspace Delete … da da da da dilemma” … fortuitous, huh?!
What’s our approach? We store in a global Javascript …
var verboselastcharsare='';
… at “textarea” onclick events an initialized value of …
mousePositionX,mousePositionY,0
… and henceforward an updated semicolon delimited set of …
Today we also do a bit of pixel level tweaking of “phalanx of canvases on top of posse of textareas” positioning and sizing, to try to improve its look slightly, as well as turn off web browser “textarea” spell checking via the newly used attribute …
spellcheck="false"
Also, today, adding to the progress of the recent Textarea Pointing Local Font Canvas Overlays Tutorial, we allow users to override “local font” tutti frutti‘ness (how could you?) by, when asking the Javascript prompt window asking for a “local font” name you suffix your answer (not used) with …
:[colour]
The live run‘s textarea_pointing.htm HTML and Javascript (DOM) and CSS changed this way to continue for this progress, crablike as it may appear, down the “use of local fonts” (and “textarea pointing”) superishhighway.
… but for today’s progress, just canvas work in an HTML iframe channeling our Signature Signature Primer Tutorial‘s “Signature of Signature” (hard working “duck” web application) examined … you guessed it … via a “client pre-emptive iframe” determination of its existence. We limit the height and width of that HTML iframe to reflect the height and width of a font character, but bear with us if the size of this changes a bit over time. We’ll see. The iframe starts in “scribble” data capture mode, reflecting you creating your own unique font character versions, hence the “local font” concept.
… how we wanted to truly differentiate the functionalities of …
“Font Learning via Textarea“
“Font Learning via Both“
… and today’s the day for that differentiation to occur, so that, in our books … but not our pamphlettes …
“Font Learning via Textarea” … will, in the posse of “textareas” display, for “local fonts” linked to, will display those “local font” characters at the appropriate time within the “textarea” of focus, as the user types the (keyboard) character of interest, as the “linework” it is represented as in the “local font” data (in web storage “localStorage” … so local to the web browser the user is currently using), else for other (keyboard) characters the usual functionality of “textarea” display and data collection and input, apply … and will not show those “local font” mappings after clicking the “Canvas” button
“Font Learning via Both” … is as above but will show those “local font” mappings after clicking the “Canvas” button, as well
Given we are not mentioning “@font-face” (for online font methodologies) anywhere, how do we achieve the new functionality differentiation for those two options above? Canvases again, a whole “phalanx” of them, overlayed (via CSS position:absolute and z-index properties) on top of the “posse” of “textareas” at places where “local font” characters can be plucked out of storage and used in the displays.
Moving forward, today, we catered for the possibilities of a paste operation delivered into our “posse” of “textareas” … Clag salespeople perhaps? … on the scenario that we are using “local fonts”, and when you use “local fonts” we want you to have many keyboard “onkeypress” events try and keep up with what you are typing … so we looked up the web and got the code below, largely thanks to this useful link (thanks) helps us out with …
// Thanks to https://stackoverflow.com/questions/3368578/trigger-a-keypress-keydown-keyup-event-in-js-jquery
function triggerEvent(el, type, keyCode) {
if ('createEvent' in document) {
// modern browsers, IE9+
var e = document.createEvent('HTMLEvents');
e.keyCode = keyCode;
e.initEvent(type, false, true);
el.dispatchEvent(e);
} else {
// IE 8
var e = document.createEventObject();
e.keyCode = keyCode;
e.eventType = type;
el.fireEvent('on'+e.eventType, e);
}
}
function pasted(element) {
setTimeout(function(){
if (dynamiccanvas) {
for (var iii=0; iii<element.value.length; iii++) {
triggerEvent(document.getElementById(focusto), 'keypress', element.value.substring(iii,eval(1 + iii)).charCodeAt());
}
}
}, 4);
}
… for HTML “textarea” elements containing onpaste=”pasted(this);” within their attributes.
As far as dealing with non-monospaced fonts, we again got good advice from the “net” and used the code of this useful link (thanks) as below …
// Handy JavaScript to measure the size taken to render the supplied text;
// you can supply additional style information too if you have it.
// Thanks to https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
function measureText(pText, pFontFamily, pFontSize, pStyle) {
var lDiv = document.createElement('div');
var lResult = {
width: lDiv.clientWidth,
height: lDiv.clientHeight
};
lResult.width/=2;
//lResult.width*=1.2;
document.body.removeChild(lDiv);
lDiv = null;
return lResult;
}
… to be constantly updating our Javascript’s global var charwh = {width: 0, height: 0}; so that real rendered character widths are calculated to allow us, when in “local fonts” mode, more reliably draw “local font” linework and non-“local font” characters alike with a suitable width for that Font Family and Font Style and Font Size combination.
And thanks to the wonderful rainbow colours webpage helping us out with our (tutti frutti) “local fonts” execution example as shown in today’s tutorial picture.
Today we embark on our journey to incorporate the “local fonts” of yesterday’s Textarea Pointing Local Font Colour Tutorial, and earlier, in real scenarios. The first cab off the rank is this web application, “Textarea Pointing” we’ve been working on. We now allow you to (but need more refinement on the detail of) …
specify a font family which is a “local font” name (which the user can arrange at the Javascript prompt window asking for this “local font” name of use)
while you enter keyboard characters in the bank of “textarea” elements we trap the onkeyuponkeypress event to obtain the (keyboard) character that was pressed, while already existant was functionality at the “textarea” onclick event to have available to us that first “textarea” top left position (that we then offset our position from based on font size characteristics and the onkeyuponkeypress detection of ascii code 13 for carriage return (to create a new line within the “textarea”))
as necessary, if the keyboard character has been digitised into the “local font” record the “linework” of that character for that “local font”, else record the way that character would be placed as text, into the underlying HTML5 canvas element
as the user then next presses the “Canvas” button they see the results of this merging of default font with “local font” rendering
Stop Press
New preference to use onkeypress is to do with its better interpretation (with respect to onkeyup) of those characters that share a keyboard button and are not letters nor numbers (eg. the comma). Thanks to this useful link and this Firefox good advice, thanks, for excellent information here.
… but, as you can see from today’s tutorial picture tweaking all this correctly, is a work in progress. Of course, one issue is that most fonts are not monospaced fonts, as Courier New is, so letters such as “i” take up a much smaller width to characters like “m” and “w” … oh! happy days?! Making it more generic is a work in progress too, but we are encouraged by the early workings of the “proof of concept” parts to this “local font” usage.
The normal way we deal with fonts online is to define a …
font family
font style
font size
… or say nothing and let the defaults happen. That can then be modified by a …
font colour
… and the whole sets of characters you’ve defined these settings for will have those characteristics “mapped” onto them. However, with our “local fonts”, we are making the rules (and though we are not sure this thinking will “map” over to our work later, when we will try to have all this data capture amount to creating a real online font (we’ll at least look into it)), and we are free to rejoin yesterday’s Textarea Pointing Local Font Editing Tutorial‘s …
Did you notice how we differentiated the X co-ordinates as “Integers” (ie. counting numbers) and did not say that about the Y co-ordinates? That’s because we want some flexibility down the track to be able to add some business logic somewhere, but try not to break the basic delimitation rules of the design
… to take up the challenge of using an mantissa part to that Y co-ordinate consisting of (for the case of {startYCoord}) …
{startYCoord} is made up of {startIntegerYCoord}[.{Red3Digits}{Green3Digits}{Blue3Digits}]
… enabling what we like to call “tutti frutti” ideas with your font characters, in that they can have multiple colours in their makeup at the font creation level. The creator of the local font can control this by setting a colour and then clicking on a previously digitized font character, to modify it for this new colour setting imbued in its co-ordinate makeup. Cute, huh?
In order to achieve that idea, we again needed to set up more “interplay” between …
Today’s live run‘s textarea_pointing.htm HTML and Javascript (DOM) and CSS changed this way to allow for these new “colourful” local “Font Creation” canvas editing functionalities … supervising …
Called HTML and Javascript and CSS (with the canvas element) signature_signature.htmlchanged this way sharing canvas co-ordinates when a parent web application is interested in “rasterizations”, sometimes colourful
A basic design, as presented in the first of the “Local Font” thread of blog postings called Textarea Pointing Local Font Tutorial yesterday provided a blueprint to move forward on this project. We think we can work with its architecture. Did you notice how we differentiated the X co-ordinates as “Integers” (ie. counting numbers) and did not say that about the Y co-ordinates? That’s because we want some flexibility down the track to be able to add some business logic somewhere, but try not to break the basic delimitation rules of the design, but more on that idea later.
Today, we want to set about improving on aspects to the user experience (UX) of a user maintaining a “local font”. How would it be if I said to you to use this piece of functionality you had to repeat a set of actions 128 (-34 nonprintable inapplicables) times to complete a font set, and could not come back in just to edit one of those 128 (-34 nonprintable inapplicables) characters. I’d imagine you’d be pretty unimpressed. By the end of today though …
yes, you still should complete, once, those 128 (-34 nonprintable inapplicables) font characters, to complete a “local font” character set (of data captures) … but …
as we say, “just the once” … and …
a set that has only one character defined can still be worked with (and yes, we’ll be getting to that in future tutorials), before you visit all/some of those 128 (-34 nonprintable inapplicables) characters … this blog post is hereby dedicated to Alice’s Restaurant …
any one font character edit (out of those 128 (-34 nonprintable inapplicables)) can have old attempts “Retained” (where you see that old attempt, and add your new “scribble” data to that old attempt, as required) or “Cleared” (in order to start again) … as new HTML a tags added into our new “local font” menu table
the user (has a mechanism now whereby they) can choose to now wipe the slate clean for a whole “local font” name of their choosing, and start again with it, as required
In order to achieve that second last idea, we needed to set up more “interplay” (such as making the nocookies= URL argument be able to contain the pen up/pen down instructions for an old attempt at the font character in question, as needed, and if not, signal a “Cleared” scenario) among …
Today’s live run‘s textarea_pointing.htm HTML and Javascript (DOM) and CSS changed this way to allow for these new local “Font Creation” canvas editing functionalities … supervising …
Called HTML and Javascript and CSS (with the canvas element) signature_signature.htmlchanged this way sharing canvas co-ordinates when a parent web application is interested in “rasterizations” … and calling …
External Javascript called signature_signature.jschanged this way regarding stopping localStorage and HTTP Cookie logic within its usual logic (collecting people’s signatures, that is, and more had to change regarding its workings for “local font” work)
Hopefully this improves the web application, as far as the user using it goes. This may all sound pretty obvious, but often it is not easy to arrange to improve these aspects to your applications. It tends to matter (or not) on a case by case basis.
A large part of the design of a web application relates to the agreed message formats. Yesterday’s Textarea Pointing Rasterise Tutorial started us down the road of a new message format whose delimitation highlights goes like an encodeURIComponent() version of …
… where in general terms “,” is “pen down” and “;” is “pen up” (and “:” separates a {header} from “the rest”), and in yesterday’s thoughts …
{header} consists of {dataLength}.{numberOfPixelsInOneRowWidth}
… and because of this, these message types stand alone (important when designing a message format) in that any one {startIntegerCoord} or any of {nonStartIntegerCoords} could get an (x,y) co-ordinate set be defined via (for the case of {startIntegerCoord}) …
x = ({startIntegerCoord} % {numberOfPixelsInOneRowWidth})
y = (({startIntegerCoord} - x) / {numberOfPixelsInOneRowWidth})
But we’ve digressed a little from today’s “Textarea Pointing Local Font Tutorial” topic haven’t we? Well, not entirely, because the messages used to define our “local fonts” (yes, we are setting about a system of defining fonts local to other web applications on the same domain using [canvasContext].strokeText() or [canvasContext].fillText() (if we are interested), the storage means being as a few tutorials ago …
… hence the encodeURIComponent() bit to the blurb above) … will base themselves on the same delimitation rules, but it’s just that, with “local font” messaging …
{header} is {nameOfYourLocalFont}
… and that will not start with a number … now will it, “compliant user”? … so the logic should be able to categorize logic for those via …
… but for today’s progress, just canvas work in an HTML iframe channeling our Signature Signature Primer Tutorial‘s “Signature of Signature” (hard working “duck” web application) examined … you guessed it … via a “client pre-emptive iframe” determination of its existence. We limit the height and width of that HTML iframe to reflect the height and width of a font character, but bear with us if the size of this changes a bit over time. We’ll see. The iframe starts in “scribble” data capture mode, reflecting you creating your own unique font character versions, hence the “local font” concept.
In summary, codewise …
Today’s live run‘s textarea_pointing.htm HTML and Javascript (DOM) and CSS changed this way to allow for these new local “Font Creation” (initially via canvas) logics available as (non default) options off an HTML select element dropdown (hived off the web application H1 title) … supervising, newly …
Called HTML and Javascript and CSS (with the canvas element) signature_signature.htmlchanged this way sharing canvas co-ordinates when a parent web application is interested in “rasterizations” … and calling …
External Javascript called signature_signature.jschanged this way regarding stopping localStorage and HTTP Cookie logic within its usual logic (collecting people’s signatures, that is)
[canvasContext].getImageData() … to derive pixel information via canvas … and (it’s what you do in the middle here that is the most impactive … we do inversing colours and grayscale manipulations via pixel changes here, in between) …
[canvasContext].putImageData() … to place pixel information into canvas
… and you’ve also got the more geometrically based …
… do what they say, to create new image conversions for our (central) canvas element.
But of more interest, today, at least for us, is us starting down that “reverse route” of scanning (post “blobbing”). Even though two days ago we said …
This is all great, but that’s it, unless you want to run that image data back through an intelligent scanning process to try to regain the “character data”? Some scanners do this, but do you really think you are going to continue getting a good result that way forever? We say, hang on to data in rawer forms and resolutions until the very last minute, and only go to these very well programmed for “graphical” forms (of final reporting) for your final reporting, or if you know that only that “blobby” “graphical” form is all that’s required anyway. If so, think about using HTML canvas from the start. It’s data capture capabilities, as we at this blog have been at pains to point out for a long time now, are also excellent.
… we couldn’t resist while we had the opportunity in code in between …
[canvasContext].getImageData() … to derive pixel information via canvas … and …
[canvasContext].putImageData() … to place pixel information into canvas
… to read canvas pixels and we “Re-stringify” or (we label it) “Rasterise” the data to create the slightly shaky (but we may be able to improve it) first goes at re-scanning already “blobbed” out “graphics” data … just to see how far all this is feasible?! We need more work retaining non black and white colours, and we’ll let you know more about that as time goes on, but in the meantime …
We add some “accountability” to where we stopped off at yesterday with Textarea Pointing Canvas Tutorial today. We define “accountability” in this context, and with our rules, short of bothering with …
Porridge is served! How to make this decision? To us, it goes by “permanence factor” (database really good) and “data size requirements” (and today we store the whole innerHTML of the HTML form that encompasses all our “textarea posse” and this is far too much for HTTP Cookies … so HTML5 localStorage is our decision).
There are these aspects to doing this …
in the menu section of the webpage have one select element id=ssaveas (dropdown) (with an initial option element labelled “Fill in Save As or choose”) and one input type=text element
at document.body onload event look through localStorage … as per the Javascript …
if (window.localStorage) {
for (var iq in window.localStorage) {
val = localStorage.getItem(iq);
if (val) {
if (iq.substring(0,3) == 'tp_') {
document.getElementById('ssaveas').innerHTML+='<option value="' + iq.substring(3) + '">Recall "' + iq.substring(3) + '"</option>';
}
}
}
}
… to further populate, as necessary, the dropdown, that has …
onchange event for select element dropdown reads localStorage … as per Javascript (for variable newo being that webpage snapshot’s name) … as entered by user …
if (localStorage) {
if (localStorage.getItem('tp_' + newo)) {
var bih=decodeURIComponent(localStorage.getItem('tp_' + newo));
document.getElementById('myform').innerHTML=bih;
}
}
at onblur event of the input type=text element … Javascript (for variable newo being that webpage snapshot’s name and variable hcont is the HTML code for a “New Window” scenario) as per …
if (newo != '') {
if (localStorage) {
if (localStorage.getItem('tp_' + newo)) {
localStorage.removeItem('tp_' + newo);
}
var bbit='m' + hcont.split('<f' + 'orm')[1].split('>')[0] + '>';
localStorage.setItem('tp_' + newo, encodeURIComponent(hcont.split('<fo' + 'r')[1].replace(bbit,'').split('</f' + 'orm>')[0]));
document.getElementById('ssaveas').innerHTML+='<option value="' + newo + '">Recall "' + newo + '"</option>';
}
}
… not for “nga, nga, nga nga, nga” reasons, but because we want to show that the starting out with “textarea character data” sets is a useful layer of information that can sit on top and easily pass onto these (last two above in particular) functionalities above in optional reporting modes of use, but still keep that “textual context” in place as well. Win, win, we’d say.
However, on non-mobile web browsers in particular, you’ve got to appreciate how the modern browsers interface to canvas elements and image data (which can be derived from that canvas element by the oft mentioned [canvasElement].toDataURL() method) with a myriad of right click (Windows or two finger gesture on Mac OS X) options, our favourites of which are …
image – Open Image in New Tab (or Window)
image – Save Image to Desktop
image – Save Image As…
image – Copy Image
image – Share Mail (to client email (ie. your own email address is “From” email address) as image attachment)
image – Share Message
canvas – Save Page as Web Archive
canvas – Print Page… Open PDF in PDF Reader
canvas – Print Page… Save As PDF
canvas – Print Page… Save As PostScript
canvas – Print Page… Mail PDF (to client email (ie. your own email address is “From” email address) with a PDF attachment)
… so much so that we just want all this clientside (no PHP serverside “anything” today) to wash over you with your mind “swimming” with possibilities, perhaps?!
Take a look at today’s live run‘s textarea_pointing.htm HTML and Javascript (DOM) and CSS code changed this way as all that needed to change to involve canvas and image data and data URIs in our Textarea Pointing project.
If there is no serverside “anything” going on, what is the “glue” that holds all this clientside interfacing together? These days, more and more, it is the use of data URI portable data that can be used in, just with today’s work …
HTML img element src attribute
HTML img element style attribute background URL(data URI)
This is all great, but that’s it, unless you want to run that image data back through an intelligent scanning process to try to regain the “character data”? Some scanners do this, but do you really think you are going to continue getting a good result that way forever? We say, hang on to data in rawer forms and resolutions until the very last minute, and only go to these very well programmed for “graphical” forms (of final reporting) for your final reporting, or if you know that only that “blobby” “graphical” form is all that’s required anyway. If so, think about using HTML canvas from the start. It’s data capture capabilities, as we at this blog have been at pains to point out for a long time now, are also excellent.
Yesterday’s Textarea Pointing Email Tutorial was a start to our “sharing” functionality “push” with our new Textarea Pointing project. That work involved …
(new window) with menu
(new window) without menu
email with HTML attachment … and today we add to that …
… to be more applicable to programming like for the way vinyl records work with their stylus, in other words, at a given …
HTML textarea element (x,y) position … we gather …
HTML textarea element font information stored in the alt attribute … to place text …
to be able to … $outputpdf->SetFont($fontFamily, $fontStyle, $fontSize);
$outputpdf->SetTextColor($fontColR, $fontColG, $fontColB);
$outputpdf->Text($x, $y, $line_of_text);
… as the “work of the code” needed to transition from our “user capture with character data” (in the “textarea”s) to a graphical system (or “widget”, you might like to think of this as). It just so happens that the first (graphical) “widget” design of interest is the creation of PDF, as it is a good conduit between “character data” and a “graphical look”. A “widget” feeling thing being what it is though, expect more integrations to come, as time goes on!
Yesterday’s Textarea Pointing Primer Tutorial was a little too localised in its application in our books. Not if a web application is not of generic use, but this one could be of generic use, in our pamphlettes books.
Our favourite “sharing” idea is email, by far, as today, as far as that goes, we are going to offer email “services” via a “client pre-emptive iframe” determination of whether where you have placed today’s live run‘s textarea_pointing.htm code (changed this way) has, relative to it, an existant ../PHP/Geographicals/prediff.php PHP code source (that we left to go on our Textarea Pointing project) of Linux diff PDF Tutorial (live run‘s prediff.php PHP code’s last changes were used to cater for the Textarea Pointing HTML email attachment requirement).
We like to use a “client pre-emptive iframe” technique initial check for whether the HTML finds prediff.php because the email functionality is optional after all. If prediff.php is not found, then the Email button is never shown, simple as that. But the other two displays of the HTML in new popup windows …
with menu
without menu … as well as …
email with HTML attachment
… complete the scope of the new “Sharing” functionalities today, and this year, on this!
Completely new idea today, so hoping this does not put some of you “episodic” users off. We’ll get back to incomplete recent “threads” at a later date. This is because we had pause for thought, due to yesterday’s PDF textual data positioning work, regarding one of our favourite HTML fundamental element types of interest (that we are always comparing) …
It’s crucial for getting HTML or non-caretted Text (that is internally turned into HTML behind the scenes) … via those wonderfultabs … off the user and onto the MySql database, and then out to the client user as part of a webpage. Out at that webpage, though, we’ve no doubt this content is embedded in an HTML div element, the other “talent” here.
But their strengths and weaknesses go like this, at least to us, in the limited HTML text view of things …
Text Functionality Issue
HTML Element Type
Strength
Weakness (where a “Yes” is like … “Oh No!”)
Display Monocolour Text
Textarea
Yes
Div
Yes
Display Editable Text
Textarea
Yes
Div
Yes
Display Multicolour Text
Textarea
Yes
Div
Yes
Nothing there above gives much encouragement about the HTML textarea‘s “positioning” talents. But what if we were to create a “posse”, or perhaps a “phalanx”, of “textarea”s to bank up with “bits and pieces” of the positioning “issue” (under the auspices of an HTML form element, for later accountability)?
What do we mean by “issue” here? Well, something like a letter, as with the end product of a scanning process involving a hardcopy letter, is that much more useful if what we end up with is the “characters” that go to make up that letter (or report, or essay), not some graphic (or totally visual) encapsulation of it, which can be what happens when you involve as your HTML “capture” element the “canvas” element. No, we want that “posse” of “textarea”s be that “character” source, which later, we can present as an overall graphic at a later date, for sharing purposes for instance, and maintain the “letter” (or report or essay) data continuously as the user edits.
How to do? We click/touch with a base “textarea” and that is enough to arrange for an “overlay” “textarea” (via CSS position:absolute and z-index properties, some background-color:transparent styling, along with div id=dscript (innerHTML) appended dynamic CSS styling making use of CSS calc‘ing <style> .mboard2 { width: calc(85% – 56px); } </style> type syntax (where the 56px would have been derived via the onclick event logic, the 85% is to allow for a 15% width menu at the right, and the 2 in mboard2 refers to the second textarea in question)) to follow (ironically an HTML div element is by far the best “container” in a (Javascript DOM controlled) linked list fashion for this, rather than appending to the HTML form element’s innerHTML (which seems to wipe out previous textarea values)), like a linked list of “textarea”s. Along the way we allow for font information to be collected and kept as well (for now, via the textarea‘s alt attribute), to add to the chances for variety with our overall “letter” (or report or essay) reporting end product.
Which leaves us to talk about the “textarea pointing” live run‘s underlying HTML and Javascript and CSS textarea_pointing.html code for your perusal.
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.
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.
