The recent Colour Wheel Calling Passthru Protocol Issue Tutorial had us revisiting our inhouse Colour Wheel web application, and wishing we could improve some of the display aesthetics, mainly to do with reducing “whitespace” (“to our minds” unused and unnecessary webpage space … ie. some what we loosely call “whitespace” can be necessary for breathing space but the “whitespace” here we are referring to truncates HTML elements, whereas “whitespace” in more technical terms relates to keyboard characters involving no rendering effect) in favour of content. We were surprised by number of …
<br> line breaks we could do without … to reduce whitespace …
negative margin-top CSS to one div … to reduce whitespace …
relevant to mobile we involved …
better meta tag viewport …
<meta name="viewport" content="width=device-width, initial-scale=0.98, minimum-scale=0.1, maximum-scale=8, user-scalable=yes">
some new CSS styling we thank this link regarding …
<style>
html, body {
margin: 0;
padding: 0;
}
/* Target the first element on the page if the issue persists */
h1:first-child, .top-section {
margin-top: -1px;
}
</style>
with the latest AlmaLinux migration and upgrade of web server here the PHP … passthru
… command appears to be a security “no-no” now … and …
we’re not sure why (after checking file_get_contents calls that need to be http: protocol rather than https: protocol, or be web server directory based) but it works so much better in http: protocol than https: protocol …
<?php
if (strpos($_SERVER['SERVER_NAME'], 'rjmprogramming.com.au') !== false && 6 == 6) {
if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') { // thanks to https://www.google.com/search?q=php+check+for+https+protocol&rlz=1C5OZZY_en&oq=php+check+for+https+protocol&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRifBdIBCDg4MTRqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8
// The request was made over HTTPS
$dru='http://' . $_SERVER['SERVER_NAME'] . "" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "" . $_SERVER['REQUEST_URI']; // . $_SERVER['QUERY_STRING'];
header('Location: ' . $dru); // echo "HTTPS is active.";
} //else {
// The request was made over HTTP
//echo "HTTP is active.";
//}
}
?>
… and we’ve decided to pivot rather than argue, in that with all this, even though the changedget_tz.php PHP helper supervisor web application runs on the RJM Programming public web server, all of this project would be better transferred and run at a local web server such as the MAMP local Apache/PHP/MySql web server
Why? Because, if you can get XQuartz going in your local environment, the X11 C++ worrrlllddd of this SVG Network Clock can open up to you, and there is no way that alternative GUI approach will ever fly on our public web server, for instance.
And so, we’ll be going around checking that PHP up at RJM Programming does not call passthru, our alternatives being exec (returning operating system call’s last line of logging) or shell_exec (returning all of operating system call’s logging).
In yesterday’s Colour Wheel Size and Spoke Colour Tutorial discussion around the Javascript alert popup ideas we never actually call the “alert” (that references the window.alert) method in what we are doing. We just are using an “alert” box look of things.
But today, with those “prompt” based code off that “alert box look” code (buttons) we really make a call to this “prompt” code. Ah, but what code? Normally, it’s the “window.prompt” method, where the arrangement is a modal window, where you are stuck until you answer the question (of the prompt). But what if we change that arrangement, and allow “prompt” to swing it that you can do other work until you answer the “prompt” at your leisure?
Now what we are suggesting as one solution here, will not suit every situation, but our situation (ie. in this Colour Wheel web application) only has two simple calls to “prompt” and whatever we come up with as this solution needs to tailor its logic to cover for what the modal “prompt” logic used to do … but this is not too involved and so we are proceeding with our …
prompt method override
… idea. That way, often used in Object Oriented code whereby any one method or function can be overridden, often, there, with different argument and/or return value forms. We write this “inhouse” version of “prompt” as per …
way for the user to change the Colour Wheel radius … in other words, its size … and …
way for the user to change the spoke colour(s) of the Colour Wheel
… and wondered where to offer the Javascript prompt window logic we had in mind … when …
da, da da da da, da, da da
… we remembered our rare venturing into non-alert Javascript popup window box thinking logic that we developed when you click the wheel. Well, what a relief! It does pay, sometimes, to do the hard work of tailoring your own alert box scenario in your code, and then later, you can tailor that inhouse arrangement for future requirements, as we did, today, with our changed Colour Wheel colour_wheel.htmlColour Wheel web application (also, the “Child” popup appearing via clicks of the clock parts of our SVG Network Clock web application), as per the changed spoke colour creation code snippet …
right click (Windows) or two finger gesture (macOS) event logic …
var altwo=""; //"//www.rjmprogramming.com.au/PHP/Map/map.php?title=Greenwich%20London&onclick=y&label=['Lat',&value='Lon','Name']&data=,[51.4769,-0.0005,~Greenwich~]";
var althree="//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=Greenwich%20London%20Places&aregexographicals=y&aregeographicals=HTTP.From%2Chttp.To%2Chttp.Greenwich&peninfo=51.4769|-0.0005|127968_From,51.4769|-0.0005|128205_To,51.4769|-0.0005|Greenwich&width=834&height=520&country=Places&popularity=&data=%20[51.4769|-0.0005|~From~,2]%20,%20[51.4769|-0.0005|~To~,2]%20,%20[51.4769|-0.0005|~Greenwich~,2]";
Clock clicks popup Colour Wheel, Separator click for Timezone Info, Separator right click for Google Geo Chart Map, Flag text click for Google Maps and right click for concatenated Google Map Chart
Did you know?
Or “would you believe” is more like it, for us. Yesterday’s SVG Network Clock Iframe Window Opener Tutorial work did not amount to the popup windows being dynamic on mobile platforms. It is hard to believe, at least for us, but, we’d not set the Parent iframe’s return value to the window.open opens of the popup Child windows be stored in a var(iable (as we never used that var(iable we mistakenly thought it did not matter … but patently it does) for mobile platform Child popup window dynamics as per …
Onto the interfacing and integration work of yesterday’s SVG Network Digital and Analogue Clock Synchronizing Tutorial, today we have a three way relationship set to achieve a more dynamic popup window that responds to changes of its window.opener, the “kicker” being (as a first for us) that that window.opener is a “child iframe” itself, and so …
Grandparent
Parent (or iframe child of Grandparent)
Child
Source
svg_clock.html
cldate.php
colour_wheel.html
Linkage Description
Child can see and modify Grandparent’s document.title as window.opener.parent.document.title
Child can see Parent’s document.getElementById(‘sclock’) contents as window.opener.document.getElementById(‘sclock’).outerHTML
Child can read Grandparent’s document.title to detect a change of conditions when it should change its own dropdown …
… those window.opener based relationships protected at the Grandparent level by continuing on in an overlayed “total webpage” iframe usage as per …
if (document.title.indexOf(' ... ') != -1 || document.title.indexOf('A SVG') != -1 || document.title.indexOf('One SVG') != -1) {
document.getElementById('mytd').style.opacity='0.0';
document.getElementById('botif').src=locationhref;
document.getElementById('botif').style.position='absolute';
document.getElementById('botif').style.top='0px';
document.getElementById('botif').style.left='0px';
document.getElementById('botif').style.width='100%';
document.getElementById('botif').style.height='100%';
document.getElementById('botif').style.zIndex='99';
document.getElementById('botif').style.display='block';
} else {
location.href=locationhref;
}
user clicks a Parent (iframe child of Grandparent) clock part, whether analogue or digital …
causing Child popup window to “pop up” … and if user intends changing timezones back at the Grandparent it would be best to …
arrange the two windows to be separated and non-overlapping (or do this manually yourself at a later date) …
after the Child popup window settles …
change to Grandparent timezone dropdown … will set in play …
Child timezone dropdown will match that of Grandparent timezone dropdown (via software logic, where multiple changes may result in some Child animation of shows of these timezones)
“; ?>
… but please see over at the child the “outerHTML” attribute is the safest to use and cut up for our purposes when dealing with SVG
more daylight saving time considerations … ie. do not rely on PHP, but rather Javascript, regarding GMT timezone offsets, in colour_wheel.html (child) …
const findTimeZoneOffset = (tz,date) => { // thanks to https://stackoverflow.com/questions/57837631/timezone-offset-by-timezone-name-for-a-specific-date-in-javascript
let utcDate = new Date(date.toLocaleString('en-US', { timeZone: "UTC" }));
let tzDate = new Date(date.toLocaleString('en-US', { timeZone: tz }));
let diff = ( tzDate.getTime() - utcDate.getTime() ) / 1000 / 60 / 60;
return diff;
};
timing and priority of datetime functionalities in Colour Wheel … ie. do not wait for background images before adjusting clock time (and allowing for non-mobile (more SVG element) cursors representing Wikipedia (thanks) image background progress) …
var lastimagesetfor='', lastisfit='';
timezone time of set off point … compared, and next to a clock with …
timezone time of destination point
… which might be useful before ringing somebody or getting your stomach ready for the jetlag to come!
Once there getting this going, yes, we felt compelled to want to offer the user the chance to ( given global var scalar=1.0; ) …
toggle visibility of left hand clock …
function disappearmy(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('mytd').style.display=disp;
}
function tdisappearmy(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('mytd').style.display=disp;
}
toggle visibility of right hand clock …
function disappearnext(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('nexttd').style.display=disp;
}
function tdisappearnext(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('nexttd').style.display=disp;
}
local time … and today we remedy that, as well as …
improve a loading logic weakness that could result in our SVG object element returning null … and …
add an onhover Country Name piece of display data
Leaving out the fairly straightforward last change above, let’s go into more detail regarding those other improvements.
local time …
the issue here being that a “local time” is awkward, but possible (thanks to this useful link) in serverside PHP …
<?php
if (strpos(('' . $_SERVER['QUERY_STRING']), "localtime") !== false) {
echo "<html><body><div id=mydiv></div><script type='text/javascript'>
var asuff='" . $midbit . $csuff . "';
var adate = new Date();
var dow=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var his=eval('' + adate.getHours());
var mis=eval('' + adate.getMinutes());
var sis=eval('' + adate.getSeconds());
var ssuff='';
if (('' + adate).indexOf(' GMT') != -1) { ssuff=' GMT' + ('' + adate).split(' GMT')[1]; }
if (1 == 1) {
document.getElementById('mydiv').innerHTML=dow[eval('' + adate.getDay())] + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).split('.')[0].slice(-2) + ' ' + ('0' + adate.getDate()).slice(-2) + ' ' + ('0' + eval(1 + eval('' + adate.getMonth()))).slice(-2).replace('01','Jan').replace('02','Feb').replace('03','Mar').replace('04','Apr').replace('05','May').replace('06','Jun').replace('07','Jul').replace('08','Aug').replace('09','Sep').replace('10','Oct').replace('11','Nov').replace('12','Dec') + ' ' + ('' + adate.getFullYear()) + ' ' + ssuff + asuff;
} else {
document.write(dow[eval('' + adate.getDay())] + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).split('.')[0].slice(-2) + ' ' + ('0' + adate.getDate()).slice(-2) + ' ' + ('0' + eval(1 + eval('' + adate.getMonth()))).slice(-2).replace('01','Jan').replace('02','Feb').replace('03','Mar').replace('04','Apr').replace('05','May').replace('06','Jun').replace('07','Jul').replace('08','Aug').replace('09','Sep').replace('10','Oct').replace('11','Nov').replace('12','Dec') + ' ' + ('' + adate.getFullYear()) + ' ' + ssuff + asuff);
}
</script></body></html>";
}
?>
… but patently more suited to the Javascript available to us with the “HTML supervisor” client facing web application component as per …
var loct='';
var adate = new Date();
var dow=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var his=eval('' + adate.getHours());
var mis=eval('' + adate.getMinutes());
var sis=eval('' + adate.getSeconds());
var ssuff='';
if (('' + adate).indexOf(' GMT') != -1) { ssuff=' GMT' + ('' + adate).split(' GMT')[1]; }
var curts=dow[eval('' + adate.getDay())] + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).split('.')[0].slice(-2) + ' ' + ('0' + adate.getDate()).slice(-2) + ' ' + ('0' + eval(1 + eval('' + adate.getMonth()))).slice(-2).replace('01','Jan').replace('02','Feb').replace('03','Mar').replace('04','Apr').replace('05','May').replace('06','Jun').replace('07','Jul').replace('08','Aug').replace('09','Sep').replace('10','Oct').replace('11','Nov').replace('12','Dec') + ' ' + ('' + adate.getFullYear()) + ' ' + ssuff;
var loct='';
if (tz.indexOf('localtime') != -1) { loct=curts; }
… and, as such, to continue the process every second to update our clock, we set in play a navigational technique we’d never put into play before that we can remember, that being …
// Rather than reloading content in an HTML iframe element via [iFrameElementObject].src=[URLtoUseAsContentForTheIframe]; ... for SVG object ID=myclock we ...
function getmelt(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
if (tz.indexOf('localtime') != -1) {
if (aconto.body.innerHTML.indexOf('</div>') != -1) {
loct=aconto.body.innerHTML.split('</div>')[0].split('>')[eval(-1 + aconto.body.innerHTML.split('</div>')[0].split('>').length)];
} else {
loct=aconto.body.innerHTML;
}
if (uprefix.indexOf('&both=') > 0) {
uprefix='&both=' + uprefix.split('&both=')[1];
} else if (uprefix.indexOf('&analogue=') > 0) {
uprefix='&analogue=' + uprefix.split('&analogue=')[1];
} else if (uprefix.indexOf('&y=') > 0) {
uprefix='&y=' + uprefix.split('&y=')[1];
} document.getElementById('myclock').data="svg_clock.php?timezone=" + encodeURIComponent(tz + loct) + uprefix;
setTimeout(morelt, 1000);
}
}
}
}
}
function morelt() {
document.getElementById('loces').src='cldate.php?localtime=' + Math.floor(Math.random() * 198765433);
}
// ... in an onload event function for an HTML iframe element, presenting "enough of a flag" to tell the other web application components we are wanting local time
… the downside being that the SVG tends to flash a bit (with activity)
improve a loading logic weakness that could result in our SVG object element returning null …
we actually had flawed code up until today not doing its job, but today the “HTML Supervisor”‘s “setTimeout(checkmyobject,4000);” checker of existence of the SVG object is better for …
function checkmyobject() {
if (!document.getElementById('myclock')) { window.location.reload(true);
} else {
var t=document.querySelector("#myclock");
var htmlDocument=t.contentDocument;
if (('' + htmlDocument).replace(/\<p\>/g,'').replace(/\<\/p\>/g,'').replace(String.fromCharCode(10),'').replace('null','') == '') { window.location.reload(true); }
}
}
… in its approach to, for the first time we can remember doing, refreshing the webpage programmatically via “window.location.reload(true);” to eventually get such failed initially loaded SVG object data to succeed
SVG Network Digital and Analogue Clock Daylight Saving Tutorial
We were pondering how best to “value add” onto the web application of our recent SVG Network Digital and Analogue Clock Tutorial when we remembered that the “star codeline” of that project’s “PHP (Digital Clock) content helper” was …
<?php
$thedate=date('l H:i:s d M Y e');
?>
… and we leave this to be …
<?php
$thedate=date('l H:i:s d M Y e I~') . $emflag;
?>
… after today’s two streams of work …
flag Daylight Saving clock times having noticed researching PHP date function’s “date ( string $format [, int $timestamp = time() ] ) : string” first format parameter the interesting switch …
format character
Description
Example returned values
I (capital i)
Whether or not the date is in daylight saving time
… as a means by which its compadre web application components can be helped out recognizing Daylight Saving clock (time) scenarios
add some Internationalization improvement by adding some emoji flag improvements getting to this project’s “PHP (Digital Clock) content helper” as that $emflag variable as per …
<?php
$emflag="";
if (isset($_GET['emflag'])) {
$emflag=" " . urldecode($_GET['emflag']);
}
?>
… and instigated back at the HTML supervisor as per …
var froms='youllneverfindthis';
var tos='';
var prevfromefs='youllneverfindthis';
var fromefs='youllneverfindthis';
var toefs='';
var isotwois='';
var flagbit='';
var lri="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var dri=["127462","127463","127464","127465","127466","127467","127468","127469","127470","127471","127472","127473","127474","127475","127476","127477","127478","127479","127480","127481","127482","127483","127484","127485","127486","127487"];
var ourtzlist="<option value=\"Africa/Abidjan\" data-geo=\"5.31666,-4.03334,GMT,CI,+0\">Africa/Abidjan</option><option value=\"Africa/Accra\" data-geo=\"5.55,-0.21667,GMT,GH,+0\">Africa/Accra</option><option value=\"Africa/Addis_Ababa\" data-geo=\"9.03333,38.7,EAT,ET,+3\">Africa/Addis_Ababa</option><option value=\"Africa/Algiers\" data-geo=\"36.78333,3.05,CET,DZ,+1\">Africa/Algiers</option><option value=\"Africa/Asmara\" data-geo=\"15.33333,38.88333,EAT,ER,+3\">Africa/Asmara</option><option value=\"Africa/Bamako\" data-geo=\"12.65,-8,GMT,ML,+0\">Africa/Bamako</option>"]; // etcetera etcetera etcetera
var parts;
var tz=location.search.split('timezone=')[1] ? decodeURIComponent(location.search.split('timezone=')[1].split('&')[0]).replace(/\+/g,' ') : '';
if (tz != '') { froms=location.search.split('timezone=')[1].split('&')[0]; parts=ourtzlist.split(decodeURIComponent(froms)); if (parts.length > 1) { isotwois=parts[1].split(',')[3]; if (isotwois.replace(/\?/g,'').length == 2) { if (document.URL.indexOf('?') != -1) { fromefs=encodeURIComponent(orccflag(isotwois.toUpperCase())); flagbit='&emflag=' + fromefs; } else { fromefs=encodeURIComponent(orccflag(isotwois.toUpperCase())); flagbit='?emflag=' + fromefs; } } } }
var uprefix=('?' + (document.URL + flagbit + '?#').split('#')[0].split('?')[1]).replace('?','&').replace('timezone=','prtimezoneev=').replace('emflag=','premflagev=').replace(froms,tos).replace(fromefs,toefs).replace('prtimezoneev=&','').replace('premflagev=&','');
Another approach to a Digital Clock web application is off and running today, reminiscent of some of the concepts in Digital Clock Styling for Daylight Saving Tutorial. Today’s difference though is a significant one involving …
… and we’d like to thank The PHP Anthology (Volume II: Applications) by Harry Fuecks (ISBN: 0-9579218-4-5) for the inspiration of methodologies used. We are encouraged to move on from this “proof of concept” beginning because we are enthusiastic to build on the very simple SVG text element beginnings with more advanced work in future blogs.
Feel free to try it yourself here or look below at (initially) a GMT digital clock …
Digital Clock Styling for Daylight Saving Tutorial
The Daylight Saving Time web application we talked about with Daylight Saving Time TimeZone Emoji Tutorial starts out showing a digital clock displaying the time at various Timezone Places around the world. It occurred to us, this morning, looking over at the alarm clock (also digital) that it would be interesting to recreate that look, at least a bit. But what immediately seemed appealing was not any photography or media based work, but the really simple CSS idea to make use of …
HTML table elements containing …
two tr row elements per numeral (or digit) of time to define … each row containing a …
single td cell with the content (ie. non-breaking space) … but working to define the numbers via the correct combinations of use of …
… reminding me of how incredible it is that just a few lines can be used by artists to have a viewer know exactly what they were depicting. More with faces, mind you, but even so, is an interesting part of how our brains work.
The code changes just involve a new array in the Javascript as per …
The last time we added a change to our Daylight Saving TimeZone Information web application was during our Other Side of the World Google Chart Tutorial work, and then, so many things were going on with interfacing and integration we didn’t really revisit the Daylight Saving TimeZone Information web application for itself, as it is so good to do every now and then to …
incorporate new things you’ve learnt
check on functionality that has fallen by the wayside (or, sin of all sins, never got to the wayside)
Our recent perusals around the “wooooooooorrrrllldd” of CSS3 reminded us of the power of CSS Selectors, especially the ones that came in with CSS3. The “two out of three” that we use today are described on today’s tutorial picture as well as we’d want to do here … so here goes …
Featuring
CSS3 Selectors for element attributes
^= (starts with)
*= (contains)
$= (ends with … not used)
Thanks to
When you try to memorize syntax do you look for “linkages”? Yes, you can find anything on the net. But seriously, this CSS syntax can be remembered because it uses the characters of a lot of RegEx wildcarding systems. Another kind of “linkage” we saw between this CSS(3) Selector functionality, and where it would be useful, was that we’d noted that TimeZone identifiers have a name, and generally they take a form …
Region/Placename
… and that Region (plus or minus the “/“) felt to us like a good candidate for functionality enhancement via the CSS(3) Selectors above. You can judge for yourself way below, or by clicking today’s tutorial picture.
Three other “popular” items around here, featuring, today, are …
emojis (some of which were multiple and so we wish to rethank Iemoji (multiple HTML entity information) and FileFormat Information (normal HTML entity information) and Emojipedia (finding them) for these emoji lookups, as well as the CSS syntax help from this webpage (needed, because, unbelievable to us, we’d only ever done this with Javascript, in the past)), and their role to help internationalization of your web applications, and to add a bit of colour, and cuteness
HTML element alt attribute when a data busy HTML select element option tag (the tag that we get most satisfaction from, making busy … it has to be said) is already using …
title
value
text (or innerHTML)
… and you come along later not wanting to clobber any good logic looking for another “data place” to populate with your new “data item” (of interest) … well, that could be the “oft neglected except perhaps with the HTML img tag” alt attribute
Apart from that alt logic above the changes we made to daylight_saving_time.html amounted to changes adding in new CSS(3) Selectors (that just happen … the joy of CSS, we guess) …
Google Charts provides great chart tools for various purposes. We already use the Map Chart heavily with our “Other Side of the World” recent web application we last talked about below with Other Side of the World Continents and Countries Tutorial. This is no surprise given the geolocation and positioning and mapping aspects to the project. But also apt is the …
Geo Chart which displays nominated countries and/or regions on a world map … and we also thought it would be good to call on a …
Bar Chart can display Great Circle distances between places the user identifies during an execution of the “Other Side of the World” web application session
Over time you get a feeling for what Google Chart suits what scenario of data arrangements. Perhaps, here it would be instructional to read Google’s miscellaneous examples if you are wondering what is possible with this great software suite. We interface to many of these charts here at this blog and to read through these you could visit this link.
Today, as far as this “feel” goes, we’d like to admire how the Google Chart “way” of being housed in an HTML div element leads itself to scaling ready for smaller format devices, so long as you, the coder above, “play the game” so to speak, trying to specify percentage values for HTML element width properties where possible. This came to play with today’s Google Chart Bar Chart “fitting in” with right column table cell (td) widths with today’s “Other Side of the World” web application.
These two code files were involved in these changes …
Other Side of the World Continents and Countries Tutorial
Today, as with WordPress 4.1.1’s Other Side of the World Continents and Countries Tutorial, we came across a scenario where there was a tiny advantage being Australian, in that our “Continent Name” equals our “Country Name” … which I suppose you could argue for Antarctica, maybe?!
We were amused by this at school, and now have the first real world “application” of this in that today’s task, much harder than we thought it would be, was, with our “Other Side of the World” web application (we last talked about with Other Side of the World Timezone Tutorial as shown below) to link the two bigger data sets up the top of the list of three datasets going on with our application …
The Weather Underground tends to talk about Placenames and their Country Names whereas the PHP TimeZones tend to link Placenames with Continent (or region) Names … and the missing link between these two talking to each other a good percentage of the time involves the PHP’s getLocation() functionality we’ve talked about before as a method for the DateTimeZone class, along with some 2 character ISO Country code information you can read more about at //stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name.
Making this link has lots of benefits …
our “closest to” lists now have more data to call on (supplementing the last of those datasets above) … and …
we can now allow for searches by Country on that top HTML select (dropdown) element …
we can fill in more specified places now that we can add in a Country so often and often reach a point with the Weather Underground scrutiny where there is only one returned value, at which point, some days ago, we added logic to say just go and display this on the Map Chart and the rest straight away to save some time
people tend to think of a Country when they think of a place, at least on dry land, that is.
An unusual code threesome were involved in these changes …
… that last one getting a new calling method just for this purpose of …
take a placename
take its inputted Continent (or region) Name … and …
have the supervisory codes send to tz_places.php a $_GET[] call for the purpose of …
using getLocation() functionality find a 2 character ISO Country Code … and …
link this to a full Country Name via various arrays we have in the PHP … and finish off by …
sign off the PHP (in an HTML iframe element) by changing relevant fields in top.document or parent.document DOM HTML elements via a simple HTML body onload event method of making those changes and exiting the called PHP … allowing for …
supervisors pick up their usual logic flows once we have a Placename,CountryName textbox scenario going
Of course “Australia” the continent name being the same as “Australia” the country name saves so much time I’ll think I’ll have that cup of coffee now. See ya!
We’ve got a lot of “where” functionality mixed in with “when” functionality with our “Other Side of the World” web application. To us, the easiest way to link “where” and “when” in the world is the concept of Earth’s timezones. We spent a lot of time looking into this with the blog thread ending with TimeZone Country Places Data Tutorial and then it went through another makeover when we tackled its integration into the Weather Underground API inspired blog postings culminating in Weather API via Iframe jQuery Ajax AutoComplete Tutorial
Reading down that first blog posting thread to its “Primer Tutorial” …
… you can see how good PHP is, natively, with timezones, and how approachable all this is for all PHP programmers … exciting stuff!
And there’s another series of blog postings culminating in HTML/PHP Timezone Feed Function Keys Tutorial involved in this same realm of thinking, that we use today (as with WordPress 4.1.1’s Other Side of the World Timezone Tutorial), along with the … you guessed it … Client Pre-emptive Iframe technique approaches to making use of what it helps with. Integrating “what it helps with” is quite interesting, and quite “Ajax”y in its ways. We call its supervisory web application into a new HTML iframe element of our “Other Side of the World” web application and pluck out only its initial “Digital Clock” HTML table display, and transfer that HTML table and its modified CSS styling over into a new HTML div element within the “Other Side of the World” web application, initially style “display:none;” but capable of being called into play via the user selecting an “Hour Time of the Day” value of interest, that causes the iframeddaylight_saving_time.html (changed this way).
What the user sees/does to use this new functionality looks like …
they see the “Hour of the Day” dropdown
they select an “Hour of the Day” value of interest … in today’s tutorial picture, here in AEST Australia (around about 8pm) we chose “07am”
the “Digital Clock” flashes random current times of day from around the “TimeZone Places World” and when it lobs onto the first matching time between 07am and 08am (exclusive) …
that matching “TimeZone Place” is copied into the “Other Side of the World” Place textbox … and …
the “Weather Underground” (autocomplete) database is scrutinized for a match, and if so …
the Map Chart shows the matched place as the base position along with its “Other Side of the World” counterpart, allowing for Google Chart click/touch (its “select”) event logic to allow for other functionalities that include a Weather link and TimeZone information (with a current time of day) … along with the …
usual “packdrill” for TimeZone Places iframe table cell and YouTube API Embedded iframe table cell in the (now) bottom row of the “Other Side of the World” (big) table element
The code for these TimeZone integration changes, building on yesterday’s Other Side of the World Map Chart Styling Tutorial, remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of additional TimeZone functionalities today) if you like, or want to try out (or try out for a specific (argument) location, such as Tokyo try out), again. The Client Pre-emptive Iframe reading and use of PHP continues today, making great use of its TimeZone code talents.
Other Side of the World Map Chart Styling Tutorial
You’ll have noticed with our “Other Side of the World” web application of recent days … or maybe not, if you were dozing off … how much use we make of the Google ChartsMap Chart functionality. Can’t do without it … thanks, Google.
Now if you go to read about the Google Chart Map Chart you may end up at this very interesting webpage, and even if it was some time back you were last there, it is always worth checking back in every now and then for information on changes, or to reread this functionality rich software suite documentation. We only touch the “tip of the iceberg” with the way we interface to Google Charts, but today we want to take some small steps to improving on that. Even taking small steps, when dealing with a third-party product so rich in possibilities, we try to be generic and be able to offer more to those adventurous users out there, both laptop and mobile (at least iPad only at this stage) users.
So we have set up a way for iPad users using the mobile app to be able to save their comma prefixed …
localized Google Chart Map Chart styling ideas from here when they interactively enter Map Chart criteria … and for …
all users of our “Other Side of the World” web application get an additional non-default Google Chart Map Chart “Styled Map” tab (in addition to their default “Map” and “Satellite” tabs), and some non-default Google Chart Map Chart icons … thanks to Icons-Land here
The new icons for that latter scenario also feature a different icon showing after a “pin” icon is selected (ie. the Google Chart click/touch “select” event is called into play).
The code for these Map Chart changes remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of Google Chart Map Chart purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Beijing try out), again. The major changes related to in the Google Chart Map Chart web application PHP you could call map.php, and which changed in this way, starting down our long path towards more Map Chart styling possibilities.
Our “Other Side of the World” web application we’ve been developing lately has made extensive use of the HTML iframe element, mainly as a “reader” of data in that Client Pre-emptive Iframe technique way. But the HTML iframe element is probably better known for its data integration and display talents, and it is these that we call upon today, to (software) integrate two other existing sources of data so that, display-wise we have four table (td) cells in play now those being the original …
top left cell where the user interacts to show latitude and longitudes and placenames of interest
top right cell showing these “latitude and longitudes and placenames of interest” paired with their “Other Side of the World” counterparts within a Google ChartsMap Chart (software) integration … and, as of today we add into the equation …
bottom left cell where depending on whether we’ve derived our “latitude and longitudes and placenames of interest” from …
bottom right cell where the user’s “latitude and longitudes and placenames of interest”‘s “Other Side of the World” interfaces to the useful webpage (thanks) HTML select (dropdown) element results in an HTML iframe element hosting a YouTube Embedded Video in Iframe API RegEx Tutorial ‘s YouTube (embedded) video integrator
We now think the use of all this can have you hopping around the world discovering lots of geographical based, video based and timezone based information about lots of places around the world, lots of which you may never have known much about.
We’ve software integrated today, as well as integrated “where” web application thoughts with “when” web application thoughts.
Another feature of today’s changes involves the geolocation features of the Javascript …
The code for this remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our HTML iframe (software) integration purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Alice Springs try out), again. It also required small changes to …
The onblur event in web programming is a very important event regarding interactive keyboard entries made by the user. We base new functionality, today, with our “Other Side of the World” web application, by allowing a user who enters in their own “place” information, can have that information filtered through the same “autocomplete” database provided by the wonderful Weather Underground and its great API service.
When we presented the last Weather Underground related blog posting we even used this functionality also interfacing to the onkeyup keyboard event, making it look up the database after just a few characters typed into the associated HTML input type=text text box, but today we lessen the interaction, presuming the user knows a location of interest and will only want information after tabbing out of this text box … hence the onblur event, only, logic interface to new functionality that creates an additional HTML select (dropdown) element of use to populate those same …
So that’s the idea, but making it happen involved some tweaking of the parts to the Weather Underground blog posting Weather API via Iframe jQuery Ajax AutoComplete Tutorial from some time back, the changes for which we’ll explain later.
Again we call on Client Pre-emptive Iframe techniques for this, telling us that you can just keep on adding HTML iframe elements to make this technique happen for several different sources of information, as necessary.
The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our onblur event purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Darwin try out), again. It also required small changes to …
A fair while ago now we were in the midst of writing a Geographicals Suite of web applications that, given Latitude and Longitude pairs you could calculate things like …
Sun Angle at noon
Moon Angle at noon
Coriolis Effect
Distance between Geographical Locations
Weather at Geographical Location
… and that we eventually added some “placename” capabilities to all this, introduced with PHP/Javascript/HTML Sun Angle Tutorial, which harnessed all this useful goodwill of this useful webpage (thanks) publishing some placename geographicals data.
placename
country … linked to …
latitude
longitude
… and that we “channel” today, via our beloved Client Pre-emptive Iframe techniques, so that we reuse PHP, rather than having to create new PHP, as an aid to the modularization for added “placename” functionality to our “Other Side of the World” web application we started presenting yesterday with Other Side of the World Primer Tutorial as shown below.
Another thing we are trialling today is a concept (that admittedly seems to need more work in Firefox) of an HTML select (dropdown) element having an onclick event (after an onchange event that changes that select element value to a non-nothing value) having a logic whereby that select element value is used to repopulate the …
placename (, country) (Great Circle Distance in km away)
latitude
longitude
… HTML input type=text and type=number fields automatically. In the normal case of events in non-Firefox web browsers an onchange event change of value to a non-nothing value just causes that select element value to be one of the places shown on the Google ChartsMap Chart that we display.
The default is to show five of the nearest placenames in the derived list, but a “+” button can increase that number of “nearest”s as required.
The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our purposes today) if you like, or want to try out, again perhaps?
Today we’ve written a first draft of an “Other Side of the World” web application using a Google Chart Map Chart embedded into an HTML iframe element to show the user …
the position of the place that they enter in for their latitude and longitude … as well as …
“the other side of the world” to the position of the place that they enter in for their latitude and longitude, calculated by imagining you take a trip from your original location through the middle of the Earth and straight through onto the other location
Is this our “sister” location? Am not sure. But somebody was telling “Porkies” to me as a child where we were told “China” as being on the other side.
The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.html if you like, or want to try out.
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.
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.
with the latest AlmaLinux migration and upgrade of web server here the PHP … passthru
… command appears to be a security “no-no” now … and …
we’re not sure why (after checking file_get_contents calls that need to be http: protocol rather than https: protocol, or be web server directory based) but it works so much better in http: protocol than https: protocol …
<?php
if (strpos($_SERVER['SERVER_NAME'], 'rjmprogramming.com.au') !== false && 6 == 6) {
if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') { // thanks to https://www.google.com/search?q=php+check+for+https+protocol&rlz=1C5OZZY_en&oq=php+check+for+https+protocol&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRifBdIBCDg4MTRqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8
// The request was made over HTTPS
$dru='http://' . $_SERVER['SERVER_NAME'] . "" . str_replace("~","",str_replace(":443~","",str_replace(":80~","",(":" . $_SERVER['SERVER_PORT'] . "~")))) . "" . $_SERVER['REQUEST_URI']; // . $_SERVER['QUERY_STRING'];
header('Location: ' . $dru); // echo "HTTPS is active.";
} //else {
// The request was made over HTTP
//echo "HTTP is active.";
//}
}
?>
… and we’ve decided to pivot rather than argue, in that with all this, even though the changedget_tz.php PHP helper supervisor web application runs on the RJM Programming public web server, all of this project would be better transferred and run at a local web server such as the MAMP local Apache/PHP/MySql web server
Why? Because, if you can get XQuartz going in your local environment, the X11 C++ worrrlllddd of this SVG Network Clock can open up to you, and there is no way that alternative GUI approach will ever fly on our public web server, for instance.
And so, we’ll be going around checking that PHP up at RJM Programming does not call passthru, our alternatives being exec (returning operating system call’s last line of logging) or shell_exec (returning all of operating system call’s logging).
In yesterday’s Colour Wheel Size and Spoke Colour Tutorial discussion around the Javascript alert popup ideas we never actually call the “alert” (that references the window.alert) method in what we are doing. We just are using an “alert” box look of things.
But today, with those “prompt” based code off that “alert box look” code (buttons) we really make a call to this “prompt” code. Ah, but what code? Normally, it’s the “window.prompt” method, where the arrangement is a modal window, where you are stuck until you answer the question (of the prompt). But what if we change that arrangement, and allow “prompt” to swing it that you can do other work until you answer the “prompt” at your leisure?
Now what we are suggesting as one solution here, will not suit every situation, but our situation (ie. in this Colour Wheel web application) only has two simple calls to “prompt” and whatever we come up with as this solution needs to tailor its logic to cover for what the modal “prompt” logic used to do … but this is not too involved and so we are proceeding with our …
prompt method override
… idea. That way, often used in Object Oriented code whereby any one method or function can be overridden, often, there, with different argument and/or return value forms. We write this “inhouse” version of “prompt” as per …
way for the user to change the Colour Wheel radius … in other words, its size … and …
way for the user to change the spoke colour(s) of the Colour Wheel
… and wondered where to offer the Javascript prompt window logic we had in mind … when …
da, da da da da, da, da da
… we remembered our rare venturing into non-alert Javascript popup window box thinking logic that we developed when you click the wheel. Well, what a relief! It does pay, sometimes, to do the hard work of tailoring your own alert box scenario in your code, and then later, you can tailor that inhouse arrangement for future requirements, as we did, today, with our changed Colour Wheel colour_wheel.htmlColour Wheel web application (also, the “Child” popup appearing via clicks of the clock parts of our SVG Network Clock web application), as per the changed spoke colour creation code snippet …
right click (Windows) or two finger gesture (macOS) event logic …
var altwo=""; //"//www.rjmprogramming.com.au/PHP/Map/map.php?title=Greenwich%20London&onclick=y&label=['Lat',&value='Lon','Name']&data=,[51.4769,-0.0005,~Greenwich~]";
var althree="//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?title=Greenwich%20London%20Places&aregexographicals=y&aregeographicals=HTTP.From%2Chttp.To%2Chttp.Greenwich&peninfo=51.4769|-0.0005|127968_From,51.4769|-0.0005|128205_To,51.4769|-0.0005|Greenwich&width=834&height=520&country=Places&popularity=&data=%20[51.4769|-0.0005|~From~,2]%20,%20[51.4769|-0.0005|~To~,2]%20,%20[51.4769|-0.0005|~Greenwich~,2]";
Clock clicks popup Colour Wheel, Separator click for Timezone Info, Separator right click for Google Geo Chart Map, Flag text click for Google Maps and right click for concatenated Google Map Chart
Did you know?
Or “would you believe” is more like it, for us. Yesterday’s SVG Network Clock Iframe Window Opener Tutorial work did not amount to the popup windows being dynamic on mobile platforms. It is hard to believe, at least for us, but, we’d not set the Parent iframe’s return value to the window.open opens of the popup Child windows be stored in a var(iable (as we never used that var(iable we mistakenly thought it did not matter … but patently it does) for mobile platform Child popup window dynamics as per …
Onto the interfacing and integration work of yesterday’s SVG Network Digital and Analogue Clock Synchronizing Tutorial, today we have a three way relationship set to achieve a more dynamic popup window that responds to changes of its window.opener, the “kicker” being (as a first for us) that that window.opener is a “child iframe” itself, and so …
Grandparent
Parent (or iframe child of Grandparent)
Child
Source
svg_clock.html
cldate.php
colour_wheel.html
Linkage Description
Child can see and modify Grandparent’s document.title as window.opener.parent.document.title
Child can see Parent’s document.getElementById(‘sclock’) contents as window.opener.document.getElementById(‘sclock’).outerHTML
Child can read Grandparent’s document.title to detect a change of conditions when it should change its own dropdown …
… those window.opener based relationships protected at the Grandparent level by continuing on in an overlayed “total webpage” iframe usage as per …
if (document.title.indexOf(' ... ') != -1 || document.title.indexOf('A SVG') != -1 || document.title.indexOf('One SVG') != -1) {
document.getElementById('mytd').style.opacity='0.0';
document.getElementById('botif').src=locationhref;
document.getElementById('botif').style.position='absolute';
document.getElementById('botif').style.top='0px';
document.getElementById('botif').style.left='0px';
document.getElementById('botif').style.width='100%';
document.getElementById('botif').style.height='100%';
document.getElementById('botif').style.zIndex='99';
document.getElementById('botif').style.display='block';
} else {
location.href=locationhref;
}
user clicks a Parent (iframe child of Grandparent) clock part, whether analogue or digital …
causing Child popup window to “pop up” … and if user intends changing timezones back at the Grandparent it would be best to …
arrange the two windows to be separated and non-overlapping (or do this manually yourself at a later date) …
after the Child popup window settles …
change to Grandparent timezone dropdown … will set in play …
Child timezone dropdown will match that of Grandparent timezone dropdown (via software logic, where multiple changes may result in some Child animation of shows of these timezones)
“; ?>
… but please see over at the child the “outerHTML” attribute is the safest to use and cut up for our purposes when dealing with SVG
more daylight saving time considerations … ie. do not rely on PHP, but rather Javascript, regarding GMT timezone offsets, in colour_wheel.html (child) …
const findTimeZoneOffset = (tz,date) => { // thanks to https://stackoverflow.com/questions/57837631/timezone-offset-by-timezone-name-for-a-specific-date-in-javascript
let utcDate = new Date(date.toLocaleString('en-US', { timeZone: "UTC" }));
let tzDate = new Date(date.toLocaleString('en-US', { timeZone: tz }));
let diff = ( tzDate.getTime() - utcDate.getTime() ) / 1000 / 60 / 60;
return diff;
};
timing and priority of datetime functionalities in Colour Wheel … ie. do not wait for background images before adjusting clock time (and allowing for non-mobile (more SVG element) cursors representing Wikipedia (thanks) image background progress) …
var lastimagesetfor='', lastisfit='';
timezone time of set off point … compared, and next to a clock with …
timezone time of destination point
… which might be useful before ringing somebody or getting your stomach ready for the jetlag to come!
Once there getting this going, yes, we felt compelled to want to offer the user the chance to ( given global var scalar=1.0; ) …
toggle visibility of left hand clock …
function disappearmy(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('mytd').style.display=disp;
}
function tdisappearmy(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('mytd').style.display=disp;
}
toggle visibility of right hand clock …
function disappearnext(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('nexttd').style.display=disp;
}
function tdisappearnext(obis) {
var disp='none';
if (obis.innerHTML != 'X') { disp='table-cell'; obis.innerHTML='X'; } else { obis.innerHTML='O'; }
document.getElementById('nexttd').style.display=disp;
}
local time … and today we remedy that, as well as …
improve a loading logic weakness that could result in our SVG object element returning null … and …
add an onhover Country Name piece of display data
Leaving out the fairly straightforward last change above, let’s go into more detail regarding those other improvements.
local time …
the issue here being that a “local time” is awkward, but possible (thanks to this useful link) in serverside PHP …
<?php
if (strpos(('' . $_SERVER['QUERY_STRING']), "localtime") !== false) {
echo "<html><body><div id=mydiv></div><script type='text/javascript'>
var asuff='" . $midbit . $csuff . "';
var adate = new Date();
var dow=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var his=eval('' + adate.getHours());
var mis=eval('' + adate.getMinutes());
var sis=eval('' + adate.getSeconds());
var ssuff='';
if (('' + adate).indexOf(' GMT') != -1) { ssuff=' GMT' + ('' + adate).split(' GMT')[1]; }
if (1 == 1) {
document.getElementById('mydiv').innerHTML=dow[eval('' + adate.getDay())] + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).split('.')[0].slice(-2) + ' ' + ('0' + adate.getDate()).slice(-2) + ' ' + ('0' + eval(1 + eval('' + adate.getMonth()))).slice(-2).replace('01','Jan').replace('02','Feb').replace('03','Mar').replace('04','Apr').replace('05','May').replace('06','Jun').replace('07','Jul').replace('08','Aug').replace('09','Sep').replace('10','Oct').replace('11','Nov').replace('12','Dec') + ' ' + ('' + adate.getFullYear()) + ' ' + ssuff + asuff;
} else {
document.write(dow[eval('' + adate.getDay())] + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).split('.')[0].slice(-2) + ' ' + ('0' + adate.getDate()).slice(-2) + ' ' + ('0' + eval(1 + eval('' + adate.getMonth()))).slice(-2).replace('01','Jan').replace('02','Feb').replace('03','Mar').replace('04','Apr').replace('05','May').replace('06','Jun').replace('07','Jul').replace('08','Aug').replace('09','Sep').replace('10','Oct').replace('11','Nov').replace('12','Dec') + ' ' + ('' + adate.getFullYear()) + ' ' + ssuff + asuff);
}
</script></body></html>";
}
?>
… but patently more suited to the Javascript available to us with the “HTML supervisor” client facing web application component as per …
var loct='';
var adate = new Date();
var dow=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var his=eval('' + adate.getHours());
var mis=eval('' + adate.getMinutes());
var sis=eval('' + adate.getSeconds());
var ssuff='';
if (('' + adate).indexOf(' GMT') != -1) { ssuff=' GMT' + ('' + adate).split(' GMT')[1]; }
var curts=dow[eval('' + adate.getDay())] + ' ' + ('0' + his).slice(-2) + ':' + ('0' + mis).slice(-2) + ':' + ('0' + sis).split('.')[0].slice(-2) + ' ' + ('0' + adate.getDate()).slice(-2) + ' ' + ('0' + eval(1 + eval('' + adate.getMonth()))).slice(-2).replace('01','Jan').replace('02','Feb').replace('03','Mar').replace('04','Apr').replace('05','May').replace('06','Jun').replace('07','Jul').replace('08','Aug').replace('09','Sep').replace('10','Oct').replace('11','Nov').replace('12','Dec') + ' ' + ('' + adate.getFullYear()) + ' ' + ssuff;
var loct='';
if (tz.indexOf('localtime') != -1) { loct=curts; }
… and, as such, to continue the process every second to update our clock, we set in play a navigational technique we’d never put into play before that we can remember, that being …
// Rather than reloading content in an HTML iframe element via [iFrameElementObject].src=[URLtoUseAsContentForTheIframe]; ... for SVG object ID=myclock we ...
function getmelt(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
if (tz.indexOf('localtime') != -1) {
if (aconto.body.innerHTML.indexOf('</div>') != -1) {
loct=aconto.body.innerHTML.split('</div>')[0].split('>')[eval(-1 + aconto.body.innerHTML.split('</div>')[0].split('>').length)];
} else {
loct=aconto.body.innerHTML;
}
if (uprefix.indexOf('&both=') > 0) {
uprefix='&both=' + uprefix.split('&both=')[1];
} else if (uprefix.indexOf('&analogue=') > 0) {
uprefix='&analogue=' + uprefix.split('&analogue=')[1];
} else if (uprefix.indexOf('&y=') > 0) {
uprefix='&y=' + uprefix.split('&y=')[1];
} document.getElementById('myclock').data="svg_clock.php?timezone=" + encodeURIComponent(tz + loct) + uprefix;
setTimeout(morelt, 1000);
}
}
}
}
}
function morelt() {
document.getElementById('loces').src='cldate.php?localtime=' + Math.floor(Math.random() * 198765433);
}
// ... in an onload event function for an HTML iframe element, presenting "enough of a flag" to tell the other web application components we are wanting local time
… the downside being that the SVG tends to flash a bit (with activity)
improve a loading logic weakness that could result in our SVG object element returning null …
we actually had flawed code up until today not doing its job, but today the “HTML Supervisor”‘s “setTimeout(checkmyobject,4000);” checker of existence of the SVG object is better for …
function checkmyobject() {
if (!document.getElementById('myclock')) { window.location.reload(true);
} else {
var t=document.querySelector("#myclock");
var htmlDocument=t.contentDocument;
if (('' + htmlDocument).replace(/\<p\>/g,'').replace(/\<\/p\>/g,'').replace(String.fromCharCode(10),'').replace('null','') == '') { window.location.reload(true); }
}
}
… in its approach to, for the first time we can remember doing, refreshing the webpage programmatically via “window.location.reload(true);” to eventually get such failed initially loaded SVG object data to succeed
SVG Network Digital and Analogue Clock Daylight Saving Tutorial
We were pondering how best to “value add” onto the web application of our recent SVG Network Digital and Analogue Clock Tutorial when we remembered that the “star codeline” of that project’s “PHP (Digital Clock) content helper” was …
<?php
$thedate=date('l H:i:s d M Y e');
?>
… and we leave this to be …
<?php
$thedate=date('l H:i:s d M Y e I~') . $emflag;
?>
… after today’s two streams of work …
flag Daylight Saving clock times having noticed researching PHP date function’s “date ( string $format [, int $timestamp = time() ] ) : string” first format parameter the interesting switch …
format character
Description
Example returned values
I (capital i)
Whether or not the date is in daylight saving time
… as a means by which its compadre web application components can be helped out recognizing Daylight Saving clock (time) scenarios
add some Internationalization improvement by adding some emoji flag improvements getting to this project’s “PHP (Digital Clock) content helper” as that $emflag variable as per …
<?php
$emflag="";
if (isset($_GET['emflag'])) {
$emflag=" " . urldecode($_GET['emflag']);
}
?>
… and instigated back at the HTML supervisor as per …
var froms='youllneverfindthis';
var tos='';
var prevfromefs='youllneverfindthis';
var fromefs='youllneverfindthis';
var toefs='';
var isotwois='';
var flagbit='';
var lri="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var dri=["127462","127463","127464","127465","127466","127467","127468","127469","127470","127471","127472","127473","127474","127475","127476","127477","127478","127479","127480","127481","127482","127483","127484","127485","127486","127487"];
var ourtzlist="<option value=\"Africa/Abidjan\" data-geo=\"5.31666,-4.03334,GMT,CI,+0\">Africa/Abidjan</option><option value=\"Africa/Accra\" data-geo=\"5.55,-0.21667,GMT,GH,+0\">Africa/Accra</option><option value=\"Africa/Addis_Ababa\" data-geo=\"9.03333,38.7,EAT,ET,+3\">Africa/Addis_Ababa</option><option value=\"Africa/Algiers\" data-geo=\"36.78333,3.05,CET,DZ,+1\">Africa/Algiers</option><option value=\"Africa/Asmara\" data-geo=\"15.33333,38.88333,EAT,ER,+3\">Africa/Asmara</option><option value=\"Africa/Bamako\" data-geo=\"12.65,-8,GMT,ML,+0\">Africa/Bamako</option>"]; // etcetera etcetera etcetera
var parts;
var tz=location.search.split('timezone=')[1] ? decodeURIComponent(location.search.split('timezone=')[1].split('&')[0]).replace(/\+/g,' ') : '';
if (tz != '') { froms=location.search.split('timezone=')[1].split('&')[0]; parts=ourtzlist.split(decodeURIComponent(froms)); if (parts.length > 1) { isotwois=parts[1].split(',')[3]; if (isotwois.replace(/\?/g,'').length == 2) { if (document.URL.indexOf('?') != -1) { fromefs=encodeURIComponent(orccflag(isotwois.toUpperCase())); flagbit='&emflag=' + fromefs; } else { fromefs=encodeURIComponent(orccflag(isotwois.toUpperCase())); flagbit='?emflag=' + fromefs; } } } }
var uprefix=('?' + (document.URL + flagbit + '?#').split('#')[0].split('?')[1]).replace('?','&').replace('timezone=','prtimezoneev=').replace('emflag=','premflagev=').replace(froms,tos).replace(fromefs,toefs).replace('prtimezoneev=&','').replace('premflagev=&','');
Another approach to a Digital Clock web application is off and running today, reminiscent of some of the concepts in Digital Clock Styling for Daylight Saving Tutorial. Today’s difference though is a significant one involving …
… and we’d like to thank The PHP Anthology (Volume II: Applications) by Harry Fuecks (ISBN: 0-9579218-4-5) for the inspiration of methodologies used. We are encouraged to move on from this “proof of concept” beginning because we are enthusiastic to build on the very simple SVG text element beginnings with more advanced work in future blogs.
Feel free to try it yourself here or look below at (initially) a GMT digital clock …
Digital Clock Styling for Daylight Saving Tutorial
The Daylight Saving Time web application we talked about with Daylight Saving Time TimeZone Emoji Tutorial starts out showing a digital clock displaying the time at various Timezone Places around the world. It occurred to us, this morning, looking over at the alarm clock (also digital) that it would be interesting to recreate that look, at least a bit. But what immediately seemed appealing was not any photography or media based work, but the really simple CSS idea to make use of …
HTML table elements containing …
two tr row elements per numeral (or digit) of time to define … each row containing a …
single td cell with the content (ie. non-breaking space) … but working to define the numbers via the correct combinations of use of …
… reminding me of how incredible it is that just a few lines can be used by artists to have a viewer know exactly what they were depicting. More with faces, mind you, but even so, is an interesting part of how our brains work.
The code changes just involve a new array in the Javascript as per …
The last time we added a change to our Daylight Saving TimeZone Information web application was during our Other Side of the World Google Chart Tutorial work, and then, so many things were going on with interfacing and integration we didn’t really revisit the Daylight Saving TimeZone Information web application for itself, as it is so good to do every now and then to …
incorporate new things you’ve learnt
check on functionality that has fallen by the wayside (or, sin of all sins, never got to the wayside)
Our recent perusals around the “wooooooooorrrrllldd” of CSS3 reminded us of the power of CSS Selectors, especially the ones that came in with CSS3. The “two out of three” that we use today are described on today’s tutorial picture as well as we’d want to do here … so here goes …
Featuring
CSS3 Selectors for element attributes
^= (starts with)
*= (contains)
$= (ends with … not used)
Thanks to
When you try to memorize syntax do you look for “linkages”? Yes, you can find anything on the net. But seriously, this CSS syntax can be remembered because it uses the characters of a lot of RegEx wildcarding systems. Another kind of “linkage” we saw between this CSS(3) Selector functionality, and where it would be useful, was that we’d noted that TimeZone identifiers have a name, and generally they take a form …
Region/Placename
… and that Region (plus or minus the “/“) felt to us like a good candidate for functionality enhancement via the CSS(3) Selectors above. You can judge for yourself way below, or by clicking today’s tutorial picture.
Three other “popular” items around here, featuring, today, are …
emojis (some of which were multiple and so we wish to rethank Iemoji (multiple HTML entity information) and FileFormat Information (normal HTML entity information) and Emojipedia (finding them) for these emoji lookups, as well as the CSS syntax help from this webpage (needed, because, unbelievable to us, we’d only ever done this with Javascript, in the past)), and their role to help internationalization of your web applications, and to add a bit of colour, and cuteness
HTML element alt attribute when a data busy HTML select element option tag (the tag that we get most satisfaction from, making busy … it has to be said) is already using …
title
value
text (or innerHTML)
… and you come along later not wanting to clobber any good logic looking for another “data place” to populate with your new “data item” (of interest) … well, that could be the “oft neglected except perhaps with the HTML img tag” alt attribute
Apart from that alt logic above the changes we made to daylight_saving_time.html amounted to changes adding in new CSS(3) Selectors (that just happen … the joy of CSS, we guess) …
Google Charts provides great chart tools for various purposes. We already use the Map Chart heavily with our “Other Side of the World” recent web application we last talked about below with Other Side of the World Continents and Countries Tutorial. This is no surprise given the geolocation and positioning and mapping aspects to the project. But also apt is the …
Geo Chart which displays nominated countries and/or regions on a world map … and we also thought it would be good to call on a …
Bar Chart can display Great Circle distances between places the user identifies during an execution of the “Other Side of the World” web application session
Over time you get a feeling for what Google Chart suits what scenario of data arrangements. Perhaps, here it would be instructional to read Google’s miscellaneous examples if you are wondering what is possible with this great software suite. We interface to many of these charts here at this blog and to read through these you could visit this link.
Today, as far as this “feel” goes, we’d like to admire how the Google Chart “way” of being housed in an HTML div element leads itself to scaling ready for smaller format devices, so long as you, the coder above, “play the game” so to speak, trying to specify percentage values for HTML element width properties where possible. This came to play with today’s Google Chart Bar Chart “fitting in” with right column table cell (td) widths with today’s “Other Side of the World” web application.
These two code files were involved in these changes …
Other Side of the World Continents and Countries Tutorial
Today, as with WordPress 4.1.1’s Other Side of the World Continents and Countries Tutorial, we came across a scenario where there was a tiny advantage being Australian, in that our “Continent Name” equals our “Country Name” … which I suppose you could argue for Antarctica, maybe?!
We were amused by this at school, and now have the first real world “application” of this in that today’s task, much harder than we thought it would be, was, with our “Other Side of the World” web application (we last talked about with Other Side of the World Timezone Tutorial as shown below) to link the two bigger data sets up the top of the list of three datasets going on with our application …
The Weather Underground tends to talk about Placenames and their Country Names whereas the PHP TimeZones tend to link Placenames with Continent (or region) Names … and the missing link between these two talking to each other a good percentage of the time involves the PHP’s getLocation() functionality we’ve talked about before as a method for the DateTimeZone class, along with some 2 character ISO Country code information you can read more about at //stackoverflow.com/questions/17842003/php-intl-country-code-2-chars-to-country-name.
Making this link has lots of benefits …
our “closest to” lists now have more data to call on (supplementing the last of those datasets above) … and …
we can now allow for searches by Country on that top HTML select (dropdown) element …
we can fill in more specified places now that we can add in a Country so often and often reach a point with the Weather Underground scrutiny where there is only one returned value, at which point, some days ago, we added logic to say just go and display this on the Map Chart and the rest straight away to save some time
people tend to think of a Country when they think of a place, at least on dry land, that is.
An unusual code threesome were involved in these changes …
… that last one getting a new calling method just for this purpose of …
take a placename
take its inputted Continent (or region) Name … and …
have the supervisory codes send to tz_places.php a $_GET[] call for the purpose of …
using getLocation() functionality find a 2 character ISO Country Code … and …
link this to a full Country Name via various arrays we have in the PHP … and finish off by …
sign off the PHP (in an HTML iframe element) by changing relevant fields in top.document or parent.document DOM HTML elements via a simple HTML body onload event method of making those changes and exiting the called PHP … allowing for …
supervisors pick up their usual logic flows once we have a Placename,CountryName textbox scenario going
Of course “Australia” the continent name being the same as “Australia” the country name saves so much time I’ll think I’ll have that cup of coffee now. See ya!
We’ve got a lot of “where” functionality mixed in with “when” functionality with our “Other Side of the World” web application. To us, the easiest way to link “where” and “when” in the world is the concept of Earth’s timezones. We spent a lot of time looking into this with the blog thread ending with TimeZone Country Places Data Tutorial and then it went through another makeover when we tackled its integration into the Weather Underground API inspired blog postings culminating in Weather API via Iframe jQuery Ajax AutoComplete Tutorial
Reading down that first blog posting thread to its “Primer Tutorial” …
… you can see how good PHP is, natively, with timezones, and how approachable all this is for all PHP programmers … exciting stuff!
And there’s another series of blog postings culminating in HTML/PHP Timezone Feed Function Keys Tutorial involved in this same realm of thinking, that we use today (as with WordPress 4.1.1’s Other Side of the World Timezone Tutorial), along with the … you guessed it … Client Pre-emptive Iframe technique approaches to making use of what it helps with. Integrating “what it helps with” is quite interesting, and quite “Ajax”y in its ways. We call its supervisory web application into a new HTML iframe element of our “Other Side of the World” web application and pluck out only its initial “Digital Clock” HTML table display, and transfer that HTML table and its modified CSS styling over into a new HTML div element within the “Other Side of the World” web application, initially style “display:none;” but capable of being called into play via the user selecting an “Hour Time of the Day” value of interest, that causes the iframeddaylight_saving_time.html (changed this way).
What the user sees/does to use this new functionality looks like …
they see the “Hour of the Day” dropdown
they select an “Hour of the Day” value of interest … in today’s tutorial picture, here in AEST Australia (around about 8pm) we chose “07am”
the “Digital Clock” flashes random current times of day from around the “TimeZone Places World” and when it lobs onto the first matching time between 07am and 08am (exclusive) …
that matching “TimeZone Place” is copied into the “Other Side of the World” Place textbox … and …
the “Weather Underground” (autocomplete) database is scrutinized for a match, and if so …
the Map Chart shows the matched place as the base position along with its “Other Side of the World” counterpart, allowing for Google Chart click/touch (its “select”) event logic to allow for other functionalities that include a Weather link and TimeZone information (with a current time of day) … along with the …
usual “packdrill” for TimeZone Places iframe table cell and YouTube API Embedded iframe table cell in the (now) bottom row of the “Other Side of the World” (big) table element
The code for these TimeZone integration changes, building on yesterday’s Other Side of the World Map Chart Styling Tutorial, remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of additional TimeZone functionalities today) if you like, or want to try out (or try out for a specific (argument) location, such as Tokyo try out), again. The Client Pre-emptive Iframe reading and use of PHP continues today, making great use of its TimeZone code talents.
Other Side of the World Map Chart Styling Tutorial
You’ll have noticed with our “Other Side of the World” web application of recent days … or maybe not, if you were dozing off … how much use we make of the Google ChartsMap Chart functionality. Can’t do without it … thanks, Google.
Now if you go to read about the Google Chart Map Chart you may end up at this very interesting webpage, and even if it was some time back you were last there, it is always worth checking back in every now and then for information on changes, or to reread this functionality rich software suite documentation. We only touch the “tip of the iceberg” with the way we interface to Google Charts, but today we want to take some small steps to improving on that. Even taking small steps, when dealing with a third-party product so rich in possibilities, we try to be generic and be able to offer more to those adventurous users out there, both laptop and mobile (at least iPad only at this stage) users.
So we have set up a way for iPad users using the mobile app to be able to save their comma prefixed …
localized Google Chart Map Chart styling ideas from here when they interactively enter Map Chart criteria … and for …
all users of our “Other Side of the World” web application get an additional non-default Google Chart Map Chart “Styled Map” tab (in addition to their default “Map” and “Satellite” tabs), and some non-default Google Chart Map Chart icons … thanks to Icons-Land here
The new icons for that latter scenario also feature a different icon showing after a “pin” icon is selected (ie. the Google Chart click/touch “select” event is called into play).
The code for these Map Chart changes remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this minor way for our HTML supervisor of Google Chart Map Chart purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Beijing try out), again. The major changes related to in the Google Chart Map Chart web application PHP you could call map.php, and which changed in this way, starting down our long path towards more Map Chart styling possibilities.
Our “Other Side of the World” web application we’ve been developing lately has made extensive use of the HTML iframe element, mainly as a “reader” of data in that Client Pre-emptive Iframe technique way. But the HTML iframe element is probably better known for its data integration and display talents, and it is these that we call upon today, to (software) integrate two other existing sources of data so that, display-wise we have four table (td) cells in play now those being the original …
top left cell where the user interacts to show latitude and longitudes and placenames of interest
top right cell showing these “latitude and longitudes and placenames of interest” paired with their “Other Side of the World” counterparts within a Google ChartsMap Chart (software) integration … and, as of today we add into the equation …
bottom left cell where depending on whether we’ve derived our “latitude and longitudes and placenames of interest” from …
bottom right cell where the user’s “latitude and longitudes and placenames of interest”‘s “Other Side of the World” interfaces to the useful webpage (thanks) HTML select (dropdown) element results in an HTML iframe element hosting a YouTube Embedded Video in Iframe API RegEx Tutorial ‘s YouTube (embedded) video integrator
We now think the use of all this can have you hopping around the world discovering lots of geographical based, video based and timezone based information about lots of places around the world, lots of which you may never have known much about.
We’ve software integrated today, as well as integrated “where” web application thoughts with “when” web application thoughts.
Another feature of today’s changes involves the geolocation features of the Javascript …
The code for this remains as just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our HTML iframe (software) integration purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Alice Springs try out), again. It also required small changes to …
The onblur event in web programming is a very important event regarding interactive keyboard entries made by the user. We base new functionality, today, with our “Other Side of the World” web application, by allowing a user who enters in their own “place” information, can have that information filtered through the same “autocomplete” database provided by the wonderful Weather Underground and its great API service.
When we presented the last Weather Underground related blog posting we even used this functionality also interfacing to the onkeyup keyboard event, making it look up the database after just a few characters typed into the associated HTML input type=text text box, but today we lessen the interaction, presuming the user knows a location of interest and will only want information after tabbing out of this text box … hence the onblur event, only, logic interface to new functionality that creates an additional HTML select (dropdown) element of use to populate those same …
So that’s the idea, but making it happen involved some tweaking of the parts to the Weather Underground blog posting Weather API via Iframe jQuery Ajax AutoComplete Tutorial from some time back, the changes for which we’ll explain later.
Again we call on Client Pre-emptive Iframe techniques for this, telling us that you can just keep on adding HTML iframe elements to make this technique happen for several different sources of information, as necessary.
The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our onblur event purposes today) if you like, or want to try out (or try out for a specific (argument) location, such as Darwin try out), again. It also required small changes to …
A fair while ago now we were in the midst of writing a Geographicals Suite of web applications that, given Latitude and Longitude pairs you could calculate things like …
Sun Angle at noon
Moon Angle at noon
Coriolis Effect
Distance between Geographical Locations
Weather at Geographical Location
… and that we eventually added some “placename” capabilities to all this, introduced with PHP/Javascript/HTML Sun Angle Tutorial, which harnessed all this useful goodwill of this useful webpage (thanks) publishing some placename geographicals data.
placename
country … linked to …
latitude
longitude
… and that we “channel” today, via our beloved Client Pre-emptive Iframe techniques, so that we reuse PHP, rather than having to create new PHP, as an aid to the modularization for added “placename” functionality to our “Other Side of the World” web application we started presenting yesterday with Other Side of the World Primer Tutorial as shown below.
Another thing we are trialling today is a concept (that admittedly seems to need more work in Firefox) of an HTML select (dropdown) element having an onclick event (after an onchange event that changes that select element value to a non-nothing value) having a logic whereby that select element value is used to repopulate the …
placename (, country) (Great Circle Distance in km away)
latitude
longitude
… HTML input type=text and type=number fields automatically. In the normal case of events in non-Firefox web browsers an onchange event change of value to a non-nothing value just causes that select element value to be one of the places shown on the Google ChartsMap Chart that we display.
The default is to show five of the nearest placenames in the derived list, but a “+” button can increase that number of “nearest”s as required.
The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.htm (changed in this way for our purposes today) if you like, or want to try out, again perhaps?
Today we’ve written a first draft of an “Other Side of the World” web application using a Google Chart Map Chart embedded into an HTML iframe element to show the user …
the position of the place that they enter in for their latitude and longitude … as well as …
“the other side of the world” to the position of the place that they enter in for their latitude and longitude, calculated by imagining you take a trip from your original location through the middle of the Earth and straight through onto the other location
Is this our “sister” location? Am not sure. But somebody was telling “Porkies” to me as a child where we were told “China” as being on the other side.
The code for this is just HTML (apart from the supervised PHP for the Google Chart interface) that you could call other_side_of_the_world.html if you like, or want to try out.
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.
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.
… concepts happening and our “Other Side of the World” web application had a good example of the last overlooked possibilities happening. Frankly, with fresh eyes, we could not believe that with that topmost dropdown a selection of a country of interest did not fill out the rest (ie. Placename and Latitude and Longitude and then Closest Places to Your Place and Closest Places to the Other Side of the World to Your Place), given we have within the Javascript to play around with, data-wise, at our disposal …
TimeZone Placename and Latitude and Longitude and ISO 2 character country code … as derived from PHP (thanks) …
ISO 2 character country code mapping to Country Name array
Other Side of the World Reworked Dropdowns Tutorial
Continuing on from Other Side of the World Reworked Logic Tutorial‘s first rearrangements at the lack of access to a weather (and its associated placename) API database we turn to that top dropdown (ie. HTML select element), with its …
hour of day (ie. pointing at a timezone)
country
… options, and try to make it easier for the user to populate those latitude and longitude fields, then on to other map and video information, data flows.
These changes, amongst other things, calls on HTML iframe onload usage …
… which got us to our “Other Side of the World” web application. Well, some of the workings of that web application function best when the Weather Underground weather API’s autocomplete functionality is working. Alas, it is not (with us any more) … prescient, indeed, after the recent HTML Map Element SVG Context Google Search Tutorial‘s …
When including URLs away from the domain (ie. “third party”) on which your webpage resides then you are at risk, over time, when it comes to using URLs optionally involving arguments delimited by ? (first) and (subsequent) & (what we call the “GET” arguments) optionally delimited by # before a hashtag that used to work, but may stop working into the future.
We cannot replace the data lost regarding Weather and Placename lists from this, but we can thank Wikipedia, yet again, to help us link a single Placename with a single Geographical (Latitude, Longitude) geodata set that can match to those two HTML input elements for latitude and longitude, to improve the situation.
… be our “media middle conduit”. It even got to “[data URI of media]“ absolute URLs coming into play!
But how can a URL be given a “media representation”? There used to be …
Google Page Speed Insights could supply an image data URI of a screenshot of that URL as a web browser webpage … but now out of reach to us … and/or …
Google used to supply a data URI QR Code image representation … but now out of reach to us … so our research got us to the excellent …
goqr.me free API means to a data URI QR Code image representation … thanks
… that we have incorporated into the code for this scenario in downloadablelatest draftrecording_ideas.php placed into it’s Document Root, and so be accessible via URL http://localhost/recording_ideas.php (Windows) or http://localhost:8888/recording_ideas.php (macOS) on a MAMP local Apache web server to make all this be possible.
… email body media attachment logics “less than optimal” … putting it kindly. Today, though, for your shorter audio or video media instances, within that email body content we can offer a new hashtagging URL paradigm that goes …
… style of link now created, and in the case of macOS, perhaps automated, into the email body, not as an attachment, but as a link the email recipient can click to see that media content display … for your smaller media content usages.
The keen eyed will see that recording_ideas.php has gone through extensive changes to “shapen up or fly right” regarding other ambitions we have for it, which Luna has told me is …
Here in December, 2025 we have lost touch with the original media_via_pb.php code from back in November 2018 and we are in the process of repiecing a similar but different set of logics in a similar vein. Please stay tuned for interplay with macOS pbcopy and pbpaste and Windows clip commands or some other methodology involvement not existing in this reconstituted first draft.
… as anything that can explain the overnight disappearances of code you’ve worked on, and is not “hacking activity”, tends to be “a relief to one’s system” and “double the relief to a set of twins” (as Nala wanted to point out).
But, it is only occasionally you get this type of problem happening and the scheduled ways of crontab are just so useful, we’re proceeding with the file tidying ways of crontab, but shoring up the wildcarding we apply so that the entry …
45 4 * * * ksh -c 'for i in `find /home/rjmprogr/ -name "media_*" -cmin +720`; do rm -f $i; done'
… becomes …
45 4 * * * ksh -c 'for i in `find /home/rjmprogr/ -name "media_*[0-9]*" -cmin +720`; do rm -f $i; done'
… to solve our current project’s constant need for resurrection surrounding it’s media_via_pb.* naming ways.
<?php
function andthenlater($andmore) {
global $incopy, $pathbit, $basebit, $mampfilelist, $mampfs;
$thingos=[''];
$afters='';
$rel='x';
if (PHP_OS == 'Darwin') {
if (strlen($andmore) > 1) {
$thingos=explode(',', $andmore);
}
for ($iwe=0; $iwe<sizeof($thingos); $iwe++) {
$thingo=$thingos[$iwe];
$pbit='';
if (basename($thingo) == $thingo && $pathbit != '') {
$pbit=$pathbit;
}
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo);
if (strlen($thingo) > 1) {
if (strpos(strtolower($thingo), '.png') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class PNGf»)'");
} else if (strpos(strtolower($thingo), '.jp') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class JPEG»)'");
} else if (strpos(strtolower($thingo), '.gif') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class GIF»)'");
} else {
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo . "\n" . "osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class optd»)'");
exec("echo " . $pbit . $thingo . " | pbcopy");
$afters=("osascript -e 'tell application \"Finder\"
set thesong to \"" . $pbit . $thingo . "\" as string
end tell
tell application \"QuickTime Player\"
activate
open thesong
play document 1
end tell'");
}
sleep(5);
}
// Thanks to https://www.google.com/search?q=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&rlz=1C5OZZY_en&oq=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTQ3NDg4ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
$retis=shell_exec("osascript -e 'tell application \"System Events\"
# Get the name of the current application (which is likely the Script Editor or Automator)
set currentApp to name of current application
# Check if the current app is one of the script runners and hide it to allow the target app to become frontmost
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to false
# Wait a moment for the target app to become active
delay 0.1
end if
# Simulate the Command+V keystroke in the now frontmost application
keystroke \"v\" using command down
# (Optional) Unhide the script application afterward
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to true
end if
end tell
'");
if ($afters != '') { sleep(5); exec($afters); $afters=''; }
}
if (strlen($andmore) > 1 && $incopy != '') {
return exec($incopy);
}
}
if (strlen($andmore) <= 1 && sizeof($mampfs) > 1 && $basebit != '' && $rel != '') {
$newc='';
for ($ijk=0; $ijk<sizeof($mampfs); $ijk++) {
if (strpos(explode('##',$mampfs[$ijk])[0], $basebit) === false) {
if ($newc == '') {
$newc=explode('##',$mampfs[$ijk])[0];
} else {
$newc=explode('##',$mampfs[$ijk])[0] . ',' . $newc;
}
}
}
sleep(5);
//file_put_contents('x.x', $pathbit . "\n" . $basebit . "\n" . $newc);
andthenlater($newc);
}
return '';
}
function andthenlater($andmore) {
global $incopy, $pathbit, $basebit, $mampfilelist, $mampfs;
$thingos=[''];
$rel='x';
if (PHP_OS == 'Darwin') {
if (strlen($andmore) > 1) {
$thingos=explode(',', $andmore);
}
for ($iwe=0; $iwe<sizeof($thingos); $iwe++) {
$thingo=$thingos[$iwe];
$pbit='';
if (basename($thingo) == $thingo && $pathbit != '') {
$pbit=$pathbit;
}
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo);
if (strlen($thingo) > 1) {
if (strpos(strtolower($thingo), '.png') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class PNGf»)'");
} else if (strpos(strtolower($thingo), '.jp') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class JPEG»)'");
} else if (strpos(strtolower($thingo), '.gif') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class GIF»)'");
}
sleep(5);
}
// Thanks to https://www.google.com/search?q=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&rlz=1C5OZZY_en&oq=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTQ3NDg4ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
$retis=shell_exec("osascript -e 'tell application \"System Events\"
# Get the name of the current application (which is likely the Script Editor or Automator)
set currentApp to name of current application
# Check if the current app is one of the script runners and hide it to allow the target app to become frontmost
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to false
# Wait a moment for the target app to become active
delay 0.1
end if
# Simulate the Command+V keystroke in the now frontmost application
keystroke \"v\" using command down
# (Optional) Unhide the script application afterward
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to true
end if
end tell
'");
}
if (strlen($andmore) > 1 && $incopy != '') {
return exec($incopy);
}
}
if (strlen($andmore) <= 1 && sizeof($mampfs) > 1 && $basebit != '' && $rel != '') {
$newc='';
for ($ijk=0; $ijk<sizeof($mampfs); $ijk++) {
if (strpos(explode('##',$mampfs[$ijk])[0], $basebit) === false) {
if ($newc == '') {
$newc=explode('##',$mampfs[$ijk])[0];
} else {
$newc=explode('##',$mampfs[$ijk])[0] . ',' . $newc;
}
}
}
sleep(5);
//file_put_contents('x.x', $pathbit . "\n" . $basebit . "\n" . $newc);
andthenlater($newc);
}
return '';
}
to a local web server (such as MAMP) underlying operating system environments, to the point that an email attachment piece of automation can be worked from a downloadedchangedmedia_via_pb.phpmedia_via_pb.php web application …
so that up at the public domain webpage when local media browsing …
with email address defined …
the “Intranet feeling” window.open(MAMP-get-style-url.php, iframe-name, ‘top=?,width=?,left=?,height=?’) can work it’s magic in amongst, in order …
public domain does window.open as above
public domain webpage does “a” mailto: link click to open email client
MAMP-get-style-url.php in macOS or Windows copies image into Clipboard as graphics
if macOS can go on to paste that Clipboard image into that email body as an attachment
… but only if, as we’ve verified again today and only for sure on macOS Google Chrome web browser so far, otherwise CORS restrictions come into it, MAMP-get-style-url.php only performs PHP stuff and does not try to write out a webpage of any sort. We can arrange it that way in this project but can easily imagine other projects where this can not be wrangled using a public domain webpage incarnation this “Intranet feeling” way.
Here in December, 2025 we have lost touch with the original media_via_pb.php code from back in November 2018 and we are in the process of repiecing a similar but different set of logics in a similar vein. Please stay tuned for interplay with macOS pbcopy and pbpaste and Windows clip commands or some other methodology involvement not existing in this reconstituted first draft.
Bit sad, but a new opportunity too?!
And so, with that opportunity, we can apply some recent work knowledge, especially regarding a local web server (such as MAMP) underlying operating system environments, to the point that an email attachment piece of automation can be worked from a downloadablechangedmedia_via_pb.phpmedia_via_pb.php web application.
… command to “provide copying and pasting to the pasteboard (the Clipboard) from command line” (quoting from “man pbcopy”).
And where there is a “copy” there’s a … anyone, anyone? … yes, Smithers, a “paste”. And so, new to today’s work, we start combining that pbpaste with the brilliant passthru …
… to position at the place to “plonk” media data into a webpage, often, and let it display.
You’ll notice in today’s PHP (only really suits localhost local web server hosting code, such as MAMP) “Media via pbcopy and pbpaste” web application’s http://localhost:8888/media_via_pb.php code that we code an exec style …
Mac OS X Clipboard to File to Datauri Primer Tutorial
Today’s tutorial is a lot about the image two below the one above. It looks pretty much like any other image on this web page, I’m sure, at first glance, you’d say?! But the fact is, this image does not involve a web server image file of any sort, though its storage does involve a web server database, because all these blog postings exist in a table of a MySql database that WordPress uses to store information. Has this let you down? Hope not, because this is still a pretty big concept, getting bigger and bigger as time goes on, and spurred on by the mobile device revolution, and that is the rise and rise of the use of datauri based media. Let’s see what Wikipedia says …
The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple HTTP requests.[1] Data URIs are sometimes referred to incorrectly as “data URLs”.[citation needed] As of 2015, data URIs are fully supported by most major browsers, and partially supported in Internet Explorer and Microsoft Edge.[2]
With this image, two down, we didn’t feel like plonking this as a file on our web server, basically because it was that bit smaller than the usual, and so the basic steps of how we constructed it was …
we’d Prnt-Scrn buttoned this part of a screen snapshot on Windows 10 … and then …
we emailed it to ourselves, but logged onto our MacBook Pro laptop … and so we …
downloaded that email attachment into the Preview desktop application … where we …
drew a rectangle around the dialog of interest and used Edit -> Copy to get it into a Mac OS X clipboard … and though we didn’t do this right here and now, we did do before the final step, copy the clipboard into an image file called huh.png (via File -> Save As…) via Paintbrush desktop application’s File -> New from clipboard option … and so then …
looked up Google in this way … and the second link in the list got me to …
see some incredibly useful Mac OS X Terminal application command line usage … to aim for … and we adapted to, namely … openssl base64 < ./huh.png | tr -d '\n' | pbcopy
… which got into a Mac OS X clipboard the suffix (called [suffix] that gets appended to the prefix [prefix] we’ll talk about in the next step) of an HTML image element of the form <img title=’Datauri image’ src=’[prefix][suffix]‘></img> … leaving us to work out for the png image type we desired the prefix [prefix] could be …
found a typical datauri prefix for a base64 encode png image at this really useful link so that prefix [prefix] above could be data:image/png;base64, … the missing piece of being able to HTML code the datauri image two below the one above … and not requiring a web server image file to exist, as the image data exists in this blog posting … brought to you by the wonders of CMS (Content Management Systems).
Hope this interests you, and perhaps that you try out one of these datauri HTML img elements for yourself.
In the area of robotics and artificial intelligence, perhaps the best known concept to we “mere mortals” is “voice recognition”. Perhaps because research into it goes back to 1932, before the Second World War … and 66 years before the “Worm Farm Incident of Simmons Street Disaster” … but we digress … and no … “I’m not ready to open up about this at this delicate stage of my life, yet, Brad.”.
Voice recognition has come a long way from those earliest endeavours when the speech recognition relied on training software for an individual voice. This became apparent to me trying out Cortana in Windows 10. Once working, it didn’t seem to matter who in our house asked the same question of Cortana, the speech recognition software recognized and translated the speech into the same text for all of us. Actually, Microsoft describes Cortana this way …
Cortana is your clever new personal assistant.
Cortana will help you find things on your PC, manage your calendar, track packages, find files, chat with you, and tell jokes. The more you use Cortana, the more personalized your experience will be.
To get started, type a question in the search box on the taskbar. Or select the microphone icon and talk to Cortana. (Typing works for all types of PCs, but you need a mic to talk.)
… and I see what they mean by this, because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone). Perhaps Cortana should have a special “Darkroom Edition” for people who …
have the urge to run for the nearest cupboard before being caught talking into a computer (microphone) … and who …
have a hobby developing and printing photographs
Anyway, we agree with Microsoft that Cortana is clever, and it’s nice for us to find another use for the microphone (brand called MXL Tempo) we used with WebEx work we talked about with WebEx Presentation with Microphone Tutorial below.
There is not much to setting up Cortana, except, perhaps, for the microphone bit, which we’ll talk more about later. Cortana’s “personal assistant” and interface down next to the Windows icon at the bottom left of the screen guides you well through what you have to do.
We got stuck a bit, regarding setting up the microphone, with a cycle of it presenting this voice recognition test always resulting in a message wondering whether we had the microphone set to “mute on”, which wasn’t the case. But what was the case, and remedied this problem was to use a USB 2 port rather than a USB 3 port … in case this happens to you.
Other than that, Cortana is pretty cute, and could be a good enough reason on its own to upgrade to Windows 10 from Windows 7, Windows 8.1, Windows Phone 8.1 or Windows 9 operating systems before Friday, 29th July 2016 which is the cut off day for free upgrades. Our experience of the upgrade was talked about at Windows 10 Upgrade Primer Tutorial (and backups were discussed at Windows File History Backup Primer Tutorial).
We’ve been doing some more WebEx (by Cisco) lately, and realised, at least with using a MacBook Pro laptop, we needed to invest in a microphone, to be heard, as the inbuilt microphone systems were not up to it.
We opted for a USB connected microphone brand called MXL Tempo, sold here in Australia, and have found it to be good, especially mounted on the stand provided … well, no complaints, anyway?! Where it has a 1/8″ (3.5mm) Headphone Jack we plugged in our own speakers, though you could use headphones here as well.
Of course we’ll also be constructing a garage, and buying a guitar, and calling on “tree fellers”karaoke backing track of Peter, Paul and Mary to complete the picture of this week’s project … getting the new microphone to make breakfast in the morning before you even knew you needed breakfast get me on The Voices.
In the WebEx “Audio Connection” menu via “Call Using Computer” option have both input and output audio be handled by “USB audio CODEC” (if they are options … if not, there is a hardware (perhaps configuration) problem with your audio and microphone connection) as you can see at today’s tutorial picture. So long as you succeed and have the USB connected, the audio connection will default to this arrangement for the next time. Cute, huh?!
To make it permanent that the MXL Tempo microphone arrangement is the default device for recordings …
click on System Preferences off the Apple menu
click the Sound option
click the Output tab
pick USB audio CODEC
if you intend using speakers or headphones connected off this microphone from its 1/8″ (3.5mm) Headphone Jack, click the Input tab
… regarding video conferencing products we’ve tried at this blog.
Have to say, WebEx is great, even with respect to the “wide eyed and bushy tailed” reaction “this little black duck” has to all these networky communicaty ideas on the net (at least we spelt “net” correctly).
Have to thank my wife, Maree, for her expertise and the facilities her company, Thomson Reuters, supplies for the serving of WebEx recordings … thanks everyone. Have been assured they are periodically deleted, and my lame impersonations of the old “ducks on the wall” can rest in peace shortly.
And so, we have a slideshow starting with a WebEx email link to join a meeting, and we pan down the email to show you other WebEx functionalities, such as adding a Calendar reference to the meeting time, and though we haven’t shown you detail here, rest assured it handles timezone scenarios very well, unless you lie about living in Antarctica, that is … sorry, scientists in Antarctica reading this blog posting … all 237 of you.
During this “earlier than today exploration of WebEx” session the necessary software installs just happened for this MacBook Pro Mac OS X laptop as if we were shelling peas … it’s always good to have some handy when installing any software. So we won’t show you this unless we deem it essential at a later date. You can perhaps do as I did, and ask a real WebEx user invite you to a meeting, to set yourself up. In fact, today’s session meeting creation time you may notice is well in the past from that earlier introductory learning session Maree and I had, and you can bring back up that old email, and resurrect that meeting again and again, if you like … am not sure if there is an expiry date on this too, like with server stored WebEx prerecordings.
So also rest assured, WebEx handles …
video via webcam on your device
audio via microphone on your device (“Use Computer”) or via a phone line
the synchronization of the two above
mobile devices
Did you know?
A .ics extension file, as you can see being used as an email attachment file extension in is, as explained in this link‘s sublink …
ICS is a global format for calendar files widely being utilized by various calendar and email programs including Google Calendar, Apple iCal, and Microsoft Outlook. These files enable users to share and publish information directly from their calendars over email or via uploading it to the world wide web.
… as helping interface meetings to online calendar appointments. Cute, huh?!
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
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.
numerical codepoint definition means to an Emoji definition in terms of web browser tab icon creation capabilities
… shone a light, a “lightbulb moment” for us, in terms of the fact that so many Emojis of interest are actually multiple HTML entity ones (eg. all the national flag emojis are actually made up of four HTML entities) and our initial textbox design of …
<?php echo ”
<input title='Emoji codepoint as web browser tab icon (ie. look up to see after clicking display)' type=number onchange=emnone(); onblur=emnone(); id=codepoint name=codepoint step='1' value='-1' min='-1'></input>
“; ?>
… should be able to become the more savvy (for multiple emojis now possible because of the logics behind the new textbox mentioned below) via this new Javascript …
<?php echo ”
/**
* Convert a string to HTML entities ... thanks to https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
*/
String.prototype.toHtmlEntities = function() {
return this.replace(/./gm, function(s) {
// return \"&#\" + s.charCodeAt(0) + \";\";
return (s.match(/[a-z0-9\s]+/i)) ? s : \"&#\" + s.charCodeAt(0) + \";\";
});
};
function emnone() {
document.getElementById('anemoji').value='';
}
function cpit(otb) {
if (otb.value != '') {
if (otb.value.toHtmlEntities().indexOf('&#x') != -1) {
} else if (otb.value.toHtmlEntities().indexOf('&#') != -1) {
document.getElementById('codepoint').type='text';
//alert('' + otb.value.toHtmlEntities().replace(/^\&\#/g,'').replace(/\;$/g,'').replace(/\;\&\#/g,'.'));
document.getElementById('codepoint').value='' + otb.value.toHtmlEntities().replace(/^\&\#/g,'').replace(/\;$/g,'').replace(/\;\&\#/g,'.');
} else {
document.getElementById('codepoint').value='';
for (var jj=0; jj<otb.value.length; jj++) {
if (document.getElementById('codepoint').value == '') {
document.getElementById('codepoint').value='' + otb.value.substring(jj).substring(0,1).charCodeAt();
} else {
document.getElementById('codepoint').type='text';
document.getElementById('codepoint').value+='.' + otb.value.substring(jj).substring(0,1).charCodeAt();
}
}
}
//alert(otb.value.toHtmlEntities());
}
}
“; ?>
… that supplements the web application user interaction possibilities via a new HTML textbox definition …
<?php echo ”
<input type=text placeholder=Emoji onblur=cpit(this); maxlength=4 value='' id=anemoji title='Emoji ... perhaps via control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard ... but please note not all International codes work with XML 1.0'></input>
“; ?>
… and the new intelligence catered for via the more astute PHP …
Basically, we only offered cryptic (ie. address bar) ways the user could control the look of their web browser (but some, like Safari, do not support SVG content based) tab icon via …
codepoint number based emoji SVG icon content … and, as of today, also available to the user in the user input parts to the web application involves the optional use of a …
textarea … default “red hexagon” … based SVG that may work as suitable for a web browser tab icon (ie. not too big)
Is there anything as easy to arrange as the great HTML textarea element as far as “programming code as data” navigational purposes the way the static innerHTML …
… where you can plug just about anything, as is, into, at the onload event, and which can be magically converted into an appropriate textarea value attribute, the contents of which, is encodeURIComponent encrypted by the HTML form element hosting to arrive at the recipient in good condition?
favicon web browser tab icon … SVG type not accepted by all browsers and platforms …
dynamism … and today we start with another offshoot of thought regarding this, as well as …
document.title also showing in the web browser tab icon … universally accepted …
… ideas we wanted to get into by writing a pretty simple generic PHP helper emojiicon.php, we got a great heads up from regarding its logic, thanks, to dynamically create favicon.svg, currently looking like …
… in our nominated folder (so, so far not catering for a lot of online traffic … we’ll see) …
Well, we were re-researching the topic of Favicon (those images on the tabs of your web browser tabs) that we talked about when we presented Gimp Favicon via Logo Primer Tutorial, but we realize now, things have moved on with the web browsers supporting SVG svg+xml “favicons” so much better these days, that we’d better “get with the plan”, so to speak (though it might be better if I give that a rest for a minute).
…
…
…
…
…
…
…
…
…
…
…
…
Okay, minutes up!
With increased usage of SVG svg+xml text element solutions for things around here lately, we wondered whether there was a dynamic way to start using these SVG favicons, in some way. Then we thought of our SVG Clock work. At first we thought a favicon that is a relevant timestamp, but realized the impost on the web server is too big for that, and so we set out to present a local start time of the SVG Clock for a user of this web application. The SVG favicon basis is so simple …
Stick the SVG file in Document Root folder, and replace “11:54” with the relevant timestamp and we’re away, right? Yes, sort of, but there is the little matter of the relevant favicon link statement existing as a non-dynamic call to that SVG in the head section of the webpage.
Bit onerous, huh? But, what did work for us was to have a static starting wrong favicon SVG link (in head) statement that now goes in the parental svg_clock.htmlSVG Network Clock …
… those Page Visibility API ideas you might equate to “minimize” concepts, that originated when GUIs were left to deal with how to present the representation of an application when it is no longer front and center in front of the user as an opened up window. We’d “minimize” back down to the desktop icon or toolbar view of the application. Web browsers can have tabs for this equivalent purpose, and we can improve the usefulness of a web application that can still be useful when “minimized” out of the top viewing tab. Date and time themed web applications can be your more obvious candidate for usefulness here. Just present a form of “digital clock readout” and your web applications like our SVG Network Clock can still be a source of information, even when “minimized”. We think that is an improvement?!
MAMP Timekeeping Web Application Desktop Application Tutorial
We figured that an improvement on the progress with our Timekeeping web application of the recent MAMP Timekeeping Web Application Audio Broadcast Tutorial would be to mention what macOS or Mac OS X Desktop Application is topmost when the screenshot is taken. When thinking about solutions for this, there was not much time before thinking turned to …
Apple Script, which has its GUI Apple “look” … but also …
Apple Script PHP shell_exec and (macOS Terminal) command line accessible osascript command line “look” too
… and excellent resources such as this excellent one to read that made us realize a PHP codeline such as …
<?php
$tma="";
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'script.jxa')) {
// Thanks to https://stackoverflow.com/questions/5292204/macosx-get-foremost-window-title
$scris="var seApp = Application(\"System Events\");
var oProcess = seApp.processes.whose({frontmost: true})[0];
var appName = oProcess.displayedName();
var url;
var title;
switch(appName) {
case \"Safari\":
url = Application(appName).documents[0].url();
title = Application(appName).documents[0].name();
break;
case \"Opera\":
url = Application(appName).windows[0].activeTab().url();
title = Application(appName).windows[0].activeTab().name();
break;
case \"Google Chrome\":
url = Application(appName).windows[0].activeTab().url();
title = Application(appName).windows[0].activeTab().name();
break;
case \"Google Chrome Canary\", \"Chromium\":
url = Application(appName).windows[0].activeTab().url();
title = Application(appName).windows[0].activeTab().name();
break;
default:
title = oProcess.
windows().
find(w => w.attributes.byName(\"AXMain\").value() === true).
attributes.
byName(\"AXTitle\").
value()
}
offer an optional audio broadcasting piece of functionality … presented via a new 📢 (📢) emoji button, that might accompany …
notifications
… when a screenshot is taken. As good as notifications are, it could be that the user is beavering away with their head down at work as the screenshot is taken, but welcome the audio queue that a Timekeeping screenshot has been taken. As well as that, with this new audio broadcasting, the *.aiff audio files created are available to share via email or SMS using the Web Share API interfacing code. This involved changes to …
MAMP Timekeeping Web Application Web Share Personalization Tutorial
Your words, helped out by some computer derived detail data, can help personalize your work using the Quarter Hour Timekeeping web application of yesterday’s MAMP Timekeeping Web Application Web Share API Tutorial which, at least with the Safari browser (and a whole lot of other macOS conditions), now integrates with the Web Share API to attach images to prepared emails with a “body blurb”. It is that prepared “body blurb” we are trying to refine, today, should the user attach any of those Timekeeper screenshot files created via macOS screencapture command.
This is because these screenshot file names, by our convention, are of the format …
screen-yyyymmdd-hhmi.jpg
… within the macOS MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] folder (though the path to the file is unavailable to File API File object programmers).
That, teamed with the fact that individual user comments linked to any one quarter hour screenshot image has an ID attribute of the form …
tatd_yyyymmdd_hhmi
… and you have modified Javascript helping the user to tailor better personalized and detail email or SMS communications using the changedmacos_say_record.js external Javascript via …
var wsadate=new Date();
var lfd=String.fromCharCode(10);
function getwsadate(dd, mm, yyyy, hh, mi) {
wsadate=new Date(yyyy, eval(-1 + eval('' + mm)), dd, hh, mi, 0, 0);
var outdstr=wsadate.toDateString() + ' ' + wsadate.toTimeString();
outdstr=outdstr.replace('Sun ', 'Sunday ').replace('Mon ', 'Monday ').replace('Tue ', 'Tuesday ').replace('Wed ', 'Wednesday ').replace('Thu ', 'Thursday ').replace('Fri ', 'Friday ').replace('Sat ', 'Saturday ');
outdstr=outdstr.replace(':00 ', ' ').replace(' Jan ', ' January ').replace(' Feb ', ' February ').replace(' Mar ', ' March ').replace(' Apr ', ' April ').replace(' Jun ', ' June ').replace(' Jul ', ' July ').replace(' Aug ', ' August ').replace(' Sep ', ' September ').replace(' Oct ', ' October ').replace(' Nov ', ' November ').replace(' Dec ', ' December ');
//console.log('tatd_' + yyyy + mm + dd + '_' + hh + mi);
if (document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi)) {
//console.log('yes tatd_' + yyyy + mm + dd + '_' + hh + mi);
if (document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).value.trim() != '') {
outdstr+=' ' + String.fromCharCode(10) + '"' + document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).value + '"';
} else if (document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).innerHTML.trim() != '') {
outdstr+=' ' + String.fromCharCode(10) + '"' + document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).innerHTML + '"';
}
}
lfd='';
return outdstr + String.fromCharCode(10);
}
async function atclick() {
const files = document.getElementById('files').files;
var moressi='', ifl=0, lessssi='';
lessssi=moressi;
while (lessssi.indexOf(String.fromCharCode(10)) != -1) {
lessssi=lessssi.replace(String.fromCharCode(10), ' ');
}
// feature detecting navigator.canShare() also implies
// the same for the navigator.share()
if (!navigator.canShare) {
//if (document.URL.indexOf('localhost') != -1) { alert('Can not share'); }
document.getElementById('output').textContent = `Your browser doesn't support the Web Share API.`;
return;
//} else {
//if (document.URL.indexOf('localhost') != -1) { alert('Can Share'); }
}
if (navigator.canShare({ files })) {
try {
console.log('Can share');
await navigator.share({
files,
title: 'Timekeeping screenshots' + lessssi + ' or media or documents',
text: 'Timekeeping screenshots' + moressi + ' perhaps?! Take a look at media or documents below' + String.fromCharCode(10) + String.fromCharCode(10)
});
document.getElementById('output').textContent = 'Shared!';
} catch (error) {
document.getElementById('output').textContent = `Error: ${error.message}`;
}
} else {
//if (document.URL.indexOf('localhost') != -1) { alert('Cannot share'); }
document.getElementById('output').textContent = `Your system doesn't support sharing these files.`;
}
lfd=String.fromCharCode(10);
}
the changed HTML and Javascriptquarter_hour_timer.html (we still ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) Web Application supervisor …
<script type='text/javascript' src='//www.rjmprogramming.com.au/web_share_api_test.js?populate=as_necessary' defer></script>
… nicely
… but as we’ve warned before you may need all these for total success for the Timekeeping Quarter Hour Timer web application (that can screenshot, can create notification when screenshot taken, and have audio commentary, and share screenshot image(s) or Timekeeper URL) …
… sitting up at the Document Root of your public domain, that “?ongoing=” based $_GET[‘ongoing’] argument deliberate, effectively asking the code to look out for “on the fly” HTML elements created within an execution run of the webpage.
<script type='text/javascript'>
var commentary_array=['textarea', 'You can enter comments about this screenshot here %value%outerHTML%@yyyymmdd%hhmm%.', 'img', 'Timekeeper screenshot here %id%@yyyymmdd%hhmm%.'];
</script>
… where the first field describes an HTML element attribute to first look at, the optional second is a stand by attribute, followed by “date extraction” fields to match with numerical data found so as to substitute the blue parts with a “date and timestamp” string.
not necessarily frontmost … but benefitting from any …
notification reminders separate from web activities and webpage focus issues can help tell the user when they might want to turn back attention to the timekeeping screenshot recording
This needs PHP to work and it needs real access via PHP exec function to underlying operating system commands. When this happens, we still try to offer a public RJM Programming interface but this interface is far less useful if you have not downloaded to your local Apache/PHP/MySql local web server (such as a MAMP one) as per …
settle for mobile platforms never being able to screenshot, on this round of looking, and redirecting to the “Monthly Chronicler” web application (of (the unchanged) monthly_chronicler.html we ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) …
<script>
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|iPad|Opera Mini|IEMobile/i)) {
document.write("<scri" + "pt> location.href='./monthly_chronicler.html'; </scr" + "ipt> <style> a.adate { border:1px solid green; background-color:#f0f0f0; border-radius:50px; } </style> <table id=mtable style=display:none;width:95%;><tr><th><input style=width:450px; placeholder='' id=iask type=text value=''></input><</th><th><input onclick=\" document.getElementById('mtable').style.display='none'; document.getElementById('mybod').style.opacity='1.0'; postask(document.getElementById('iask'));\" type=button value=OK></input></th><th><input onclick=\"document.getElementById('iask').value=''; document.getElementById('mtable').style.display='none'; document.getElementById('mybod').style.opacity='1.0'; \" type=button value=Cancel></input></th></tr></table>");
}
</script>
… dumbing down, but working more reliably, using “Javascript writes Javascript” methodology
Again, feel free to try the changedquarter_hour_timer.html (we ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) Timekeeping Web Application suited to macOS (or Mac OS X) “screencapture” command line usage, is helped out by a “mobile platform check” changedquarter_hour_timer.php PHP (we ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) for you to try out on your MAMP macOS environment, or all showing up at an RJM Programming public domain webpage, in an iframe element, visible now.
… which you may glean has a Windows “fallback” position (with that “copy” codeline). Why? Well, we found a .Net framework “exe creation via bat” using ScreenCapture.bat (thanks to this useful link) created black screen shots. Probably a privilege thing or PHP exec thing, but we’ve opted for the workaround, which is just “Windows talk” …
write Windows batch scapcontinuous.bat as a continuous fifteen minute user of the .Net Framework (ScreenCapture.exe) derived from above
set up a task via “Task Schedular” (please ignore the warts ‘n all “garden path” schtask ideas in the video below) that has an action “C:\MAMP\htdocs\scapcontinuous.bat” and starts when the Windows user logs in and takes (successful) screen shots at 14 and 29 and 44 and 59 minutes (in the hour) times
Take a more detailed look at “warts ‘n all” crab progression towards the Windows (client) solution, below …
This bit of functionality works (interfacing) both with MAMP and with the public RJM Programming domain incarnation of the Timekeeping web application, so that could be interesting. It can interface via …
… modes of use. In action, should you create an iCal file this way, the web application will download the resultant .ics file into your Downloads folder and to interface into your default online Calendar application double click that Downloads folder file to complete the Calendar integration …
function icalpostit(tl, tg) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var hh = today.getHours();
var minm = today.getMinutes(); //January is 0!
//if (icalavailable) { alert('is ' + ('' + yyyy + ('00' + mm).slice(-2) + ('00' + dd).slice(-2) ) + ' >= ' + tl.substring(1)); }
if ((document.getElementById('yics').value.indexOf('all') != -1 || tl.substring(1) >= ('' + yyyy + ('00' + mm).slice(-2) + ('00' + dd).slice(-2) )) && icalavailable && document.getElementById('yics').value != '') {
if (document.getElementById('yics').value.indexOf('nw') != -1) {
icald=tl.substring(1) + ':' + ('00' + hh).slice(-2) + ('00' + minm).slice(-2) + '59';
icalg=tg;
if (icalwo != null) { icalwo.close(); icalwo=null; }
icalwo=window.open('../PHP/ics_attachment.php','_blank','top=100,left=100,width=740,height=800');
if (1 == 1) {
setTimeout(icalw, 3000);
} else {
icalwo.document.getElementById('datestart').value=icald;
icalwo.document.getElementById('dateend').value=icald;
icalwo.document.getElementById('eventwords').value=icalg.replace(/\<br\>/g, String.fromCharCode(10)).replace(/\<Br\>/g, String.fromCharCode(10)).replace(/\<BR\>/g, String.fromCharCode(10));
if (document.URL.indexOf('localhost') != -1) {
var jcald=icalg.replace(/\<br\>/g, String.fromCharCode(10)).replace(/\<Br\>/g, String.fromCharCode(10)).replace(/\<BR\>/g, String.fromCharCode(10)).replace(/\ \;>/g, ' ');
while (jcald.indexOf(String.fromCharCode(10)) != -1) { jcald=jcald.replace(String.fromCharCode(10),' '); }
icalwo.document.getElementById('title').value=jcald;
} else {
icalwo.document.getElementById('title').value='Calendar event at ' + icald;
}
icalwo.document.getElementById('description').value='Calendar event at ' + icald;
icalwo.document.getElementById('address').value=document.URL.split('?')[0].split('#')[0];
icalwo.document.getElementById('mmdatestart').value=icald.substring(4,6);
icalwo.document.getElementById('mmdateend').value=icald.substring(4,6);
icalwo.document.getElementById('dddatestart').value=icald.substring(6,8);
icalwo.document.getElementById('dddateend').value=icald.substring(6,8);
icalwo.document.getElementById('ssdatestart').value='59';
icalwo.document.getElementById('ssdateend').value='59';
icalwo.document.getElementById('yyyydatestart').value=icald.substring(0,4);
icalwo.document.getElementById('yyyydateend').value=icald.substring(0,4);
if ( ('' + today.getTimezoneOffset()).replace('null','').replace('undefined','') != '' ) {
//alert(('' + eval(eval('' + qd.getTimezoneOffset()) / 60.0)).replace('.00','').replace('.0',''));
icalwo.document.getElementById('tz').value=('' + eval(eval('' + today.getTimezoneOffset()) / 60.0)).replace('.00','').replace('.0','');
}
//icalwo.document.getElementById('pform').onsubmit=function() { window.opener.document.getElementById('icalstatus').innerHTML=' '; return true; };
Mac OS MAMP Timekeeping Web Application PHP Calendar Contenteditable Tutorial
We’ve spoken quite a bit in the past about the joys of involving the “contenteditable=true” attribute for HTML elements that have an “innerHTML” (ie. they have a formalized end tag arrangement eg. div, span, p, td, th etcetera) and with today’s work which extends that started with yesterday’s Mac OS MAMP Timekeeping Web Application PHP Calendar Past Tutorial it is the turn of a set of “p” elements it helps out today.
The scenario is that yesterday’s work did not allow for “orphaned screenshots” of the past be allowed to be brought back into play to “annotate them” and in so doing “give them a home”. This led us to …
allow for a new “Infill Earlier Days All Screenshots” button augment yesterday‘s “Infill Earlier Days Just Annotated Screenshots” button …
the pressing of that new “Infill Earlier Days All Screenshots” button causes all screenshot 15 minute entries relevant to the current year be displayed in the calendar … but then it occurred to us users might want to “annotate them” … but how? …
?>
… to, when an “orphaned” screen shot image is happened upon, allows …
contenteditable=true “does its stuff” turning might might have been a pretty unintelligent HTML element into a “textarea” type collector of user input, and then that onblur event logic’s “midair feeling” Ajax/FormData “recursive feeling” methodology …
function repostit(ih) {
var ihis=(ih.innerText || ih.contentWindow || ih.contentDocument);
var pathpart=ih.id;
if (ihis != '') {
var xzhr = new XMLHttpRequest();
var xform=new FormData();
xform.append('myta',ihis);
xform.append(pathpart.split('.')[0].replace('ip_','screen-').replace('_','-'),'');
xzhr.open('post','./quarter_hour_timer.php',true);
xzhr.send(xform);
}
}
… which can cement that (newly user entered) annotation into future permanency in the “Yearly Report Calendar” section
… feel to it all. Today, we improve on the latter “restrictiveness” issue, within yesterday’s “Yearly Report Calendar” new functionality, by looking back into the current calendar year’s “past” with respect to the date of using the web application, whether that be …
screen captures from days in the current calendar year’s “past”
text entries made and remembered (in window.localStorage) in the current calendar year’s “past”
if ($bcontis != "''" && $bcontis != "") {
if ($htmlis == '') {
$htmlis="<html><head><script type=text/javascript> var imois=null, iwo=null; function wopen(event,overvsout) { if (!overvsout) { if (imois == event.target) { imois=null; } return; } imois=event.target; setTimeout(postwopen, 2000); } function postwopen() { var pois=imois; if (pois.outerHTML.indexOf('URL(') != -1) { window.open(pois.outerHTML.split('URL(')[1].split(')')[0].replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),''),'_blank','top=50,left=50,width=600,height=600'); } }</script></head><body onload=\" var huhg=''; if (parent.document.getElementById('" . $idcali . "')) { huhg='" . $ccpre . $bcontis . $ccpost . "'; while (huhg.indexOf(String.fromCharCode(10)) != -1) { huhg=huhg.replace(String.fromCharCode(10),'<br>'); } parent.document.getElementById('" . $idcali . "').innerHTML+=huhg; } \"></body></html>";
} else if (strpos($htmlis, $bcontis) === false) {
$htmlis=str_replace("+=huhg; }", "+=huhg; huhg='" . $ccpre . $bcontis . $ccpost . "'; while (huhg.indexOf(String.fromCharCode(10)) != -1) { huhg=huhg.replace(String.fromCharCode(10),'<br>'); } parent.document.getElementById('" . $idcali . "').innerHTML+=huhg; }", $htmlis);
}
}
}
}
if ($htmlis != "") { echo $htmlis; }
}
}
}
}
}
}
// blah else if blah else if blah
?>
… which you may notice implements a “long hover” window.open scenario (using non-mobile platforms) for screenshot images on the calendar by combining the use of …
global variables …
var imois=null;
var iwo=null;
onmouseover event logic …
Call
onmouseover=wopen(event,true);
setTimeout delays …
Called
function wopen(event,overvsout) {
if (!overvsout) {
if (imois == event.target) {
imois=null;
}
return;
}
imois=event.target;
setTimeout(postwopen, 2000);
}
function postwopen() { //pois) {
if (imois) {
var pois=imois;
if (pois.outerHTML.indexOf('URL(') != -1) {
if (iwo) { iwo.close(); iwo=null; }
iwo = window.open(pois.outerHTML.split('URL(')[1].split(')')[0].replace(String.fromCharCode(34), '').replace(String.fromCharCode(34), ''), '_blank', 'top=50,left=50,width=600,height=600');
}
}
}
onmouseout event logic …
Call
onmouseout=wopen(event,false);
… so that this logic is not responsible for clobbering the default “hover” shows of the “p” element “title” attribute with the onmouseover event for non-mobile platforms.
Mac OS MAMP Timekeeping Web Application PHP Image Metadata Tutorial
In our opinion, what would make the day before yesterday’s Mac OS MAMP Timekeeping Web Application PHP Intranet Tutorial “Timekeeping Web Application” cooler would be to add to the intelligence of the screen capture images, ahead of other data related improvements to come.
We’ve spoken in the past about Exif in that respect but PHP has Iptc image metadata functions we can call on …
iptcembed to embed new metadata into an existant image from those associated “caption” textarea elements we offer
iptcparse to extract old metadata from an existant image into those associated “caption” textarea elements we offer
This metadata can be like a database source we use moving forward on this project, meaning the one image data entity can suffice for both visual and textual usage purposes.
Mac OS X MAMP Timekeeping Web Application Email Tutorial
The practicalities of yesterday’s (Mac OS X MAMP Timekeeping Web Application Primer Tutorial) timekeeping Mac OS X Web Application, left as they are, would leave you with a somewhat useful web application whose use is only for the here and now, but what if you want it to be more accountable? Well, that is when we, here, at RJM Programming, like to use that tried and trusted email form of communication.
Today’s email methods spurn the use of server-side intervention, at least for now. So what is available to us as tools, if we don’t include Ajax nor jQuery in that list? Well, we have, to our minds …
the body section of that email can 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
We rely on the crontab functionality, being as there is no server-side help, to create the image file, whose contents eventually go to make up the contents that can be selected and copied and pasted by the user into the body section of the email (and sent off to whosoever they feel like sending it too, as you have the full power of the email client available to you with the interaction you have with an actual email client program).
Here is the HTML and Javascript quarter_hour_timer.html which changed to cater for today’s email functionality in this way, and, as per the Stop Press from yesterday, we’ll also have a live run link here today.
Mac OS X MAMP Timekeeping Web Application Primer Tutorial
Sometimes when you program, especially for administrative type functionality, there are useful programs to write, that are able to become web applications, but in a limited set of platforms. So it is today with our timekeeping web application that relies on …
MAMP installed to, in our case, /Applications/MAMP/htdocs/ (as is mentioned in the relevant crontab background task that snapshots the user’s screen every quarter hour) that maps to the MAMP web application URL http://localhost:8888/ … or …
crontab directory mention that corresponds to a URL call of our web application like for our Google Chrome example (where the directory below, used, could be a place of your choosing (that matches what is in your crontab task entry)) …
file:///Applications/MAMP/htdocs/quarter_hour_timer.html?localplace=
… or just, via the web browser’s File -> Open File menu …
file:///Applications/MAMP/htdocs/quarter_hour_timer.html
… pretty restrictive, huh? … but pretty useful for our quarter hour timekeeping purposes today.
We want to have a web application that is running at the user’s discretion, and when first fired up, looks for outputs from crontab tasks above …
… for the current day in question and if existant show …
a date and time stamp +
the snapshot of what you were doing at the quarter hour, that is clickable to make bigger for more in depth viewing +
an HTML textarea element in which you can optionally type in more specifics about that quarter hour
So, as much as we like to think of Mac OS X Terminal application’s BSD (a unix derivative) operating system, as being a lot like Linux, there are some commands and usage that …
adds Mac OS X specific command line functionality to a Linux or unix base set of functionality, like for today’s screencapture command … and we’ve included another such example, below, with the command say featuring in Mac OS X Text to English Speech Primer Tutorial as shown below
changes switches on Linux or unix commands
won’t have some Linux or unix commands that other platforms do
In the great tradition of behoving … we behove … we behove thee quarter_hour_timer.html if you like, my liege. On this occasion you’ll have gleaned that there is no live run link, because the RJM Programming web server is not Mac OS X … so command line screencapture has no meaning for a CentOS web server’s operating system command line. You’ll see in the code that rather than use “Client Pre-emptive Iframe” concepts to check for existence of crontab screen capture images, we, instead use the onerror event for HTML img elements to check for non-existance.
Stop Press
Just noticed that, perhaps, after all, a live run from the RJM Programming website can make sense if you have a Mac OS X laptop, for instance, that is running that suggested crontab entry as explained in tutorial above. That type of live run managed to latch on to our local crontab screencaptures on my MacBook Pro.
Text to English Speech via Mac OS X’s command line say command used by PHP via exec to make say.php (which is useful as a download to a Mac OS X laptop using MAMP) which, today, does not have a live run because the web server of domain rjmprogramming.com.au is a CentOS Linux server … Linux equivalent of Mac OS X’s say? … read here
Trying to present this brought up the usual movie production problem with iMovie overlaying the audio on top of the video (though you may want to try, and you could start reading with this link) versus QuickTime Player talent to catch both audio and video tracks (and that we ended up using), but not of the “screen goings on”, alas versus MPlayer OSX Extended which can play separately but not two tracks on top and doesn’t do any reconstituting … so …
Improved on our inhouse Video/Audio synchronizing efforts by allowing audio_video.html supervisor (changed in this way) be able to be called to press one of its preconceived synchronization buttons onload which we do with (the newly added) Macbeth Act 1 Scene 1 … in a small celebration of the Bard … who, am thinking (in that Falstaff way), would have got a huge chuckle out of “anonymous” instead of “anon” during the Three Witches scene … we had to do something to say Happy Birthday
Along the way we tried filming the MacBook Pro with the iPad to a YouTube …
… but weren’t happy with the audio quality, alas (too/two).
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.
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.
Basically, we only offered cryptic (ie. address bar) ways the user could control the look of their web browser (but some, like Safari, do not support SVG content based) tab icon via …
codepoint number based emoji SVG icon content … and, as of today, also available to the user in the user input parts to the web application involves the optional use of a …
textarea … default “red hexagon” … based SVG that may work as suitable for a web browser tab icon (ie. not too big)
Is there anything as easy to arrange as the great HTML textarea element as far as “programming code as data” navigational purposes the way the static innerHTML …
… where you can plug just about anything, as is, into, at the onload event, and which can be magically converted into an appropriate textarea value attribute, the contents of which, is encodeURIComponent encrypted by the HTML form element hosting to arrive at the recipient in good condition?
favicon web browser tab icon … SVG type not accepted by all browsers and platforms …
dynamism … and today we start with another offshoot of thought regarding this, as well as …
document.title also showing in the web browser tab icon … universally accepted …
… ideas we wanted to get into by writing a pretty simple generic PHP helper emojiicon.php, we got a great heads up from regarding its logic, thanks, to dynamically create favicon.svg, currently looking like …
… in our nominated folder (so, so far not catering for a lot of online traffic … we’ll see) …
Well, we were re-researching the topic of Favicon (those images on the tabs of your web browser tabs) that we talked about when we presented Gimp Favicon via Logo Primer Tutorial, but we realize now, things have moved on with the web browsers supporting SVG svg+xml “favicons” so much better these days, that we’d better “get with the plan”, so to speak (though it might be better if I give that a rest for a minute).
…
…
…
…
…
…
…
…
…
…
…
…
Okay, minutes up!
With increased usage of SVG svg+xml text element solutions for things around here lately, we wondered whether there was a dynamic way to start using these SVG favicons, in some way. Then we thought of our SVG Clock work. At first we thought a favicon that is a relevant timestamp, but realized the impost on the web server is too big for that, and so we set out to present a local start time of the SVG Clock for a user of this web application. The SVG favicon basis is so simple …
Stick the SVG file in Document Root folder, and replace “11:54” with the relevant timestamp and we’re away, right? Yes, sort of, but there is the little matter of the relevant favicon link statement existing as a non-dynamic call to that SVG in the head section of the webpage.
Bit onerous, huh? But, what did work for us was to have a static starting wrong favicon SVG link (in head) statement that now goes in the parental svg_clock.htmlSVG Network Clock …
… those Page Visibility API ideas you might equate to “minimize” concepts, that originated when GUIs were left to deal with how to present the representation of an application when it is no longer front and center in front of the user as an opened up window. We’d “minimize” back down to the desktop icon or toolbar view of the application. Web browsers can have tabs for this equivalent purpose, and we can improve the usefulness of a web application that can still be useful when “minimized” out of the top viewing tab. Date and time themed web applications can be your more obvious candidate for usefulness here. Just present a form of “digital clock readout” and your web applications like our SVG Network Clock can still be a source of information, even when “minimized”. We think that is an improvement?!
MAMP Timekeeping Web Application Desktop Application Tutorial
We figured that an improvement on the progress with our Timekeeping web application of the recent MAMP Timekeeping Web Application Audio Broadcast Tutorial would be to mention what macOS or Mac OS X Desktop Application is topmost when the screenshot is taken. When thinking about solutions for this, there was not much time before thinking turned to …
Apple Script, which has its GUI Apple “look” … but also …
Apple Script PHP shell_exec and (macOS Terminal) command line accessible osascript command line “look” too
… and excellent resources such as this excellent one to read that made us realize a PHP codeline such as …
<?php
$tma="";
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'script.jxa')) {
// Thanks to https://stackoverflow.com/questions/5292204/macosx-get-foremost-window-title
$scris="var seApp = Application(\"System Events\");
var oProcess = seApp.processes.whose({frontmost: true})[0];
var appName = oProcess.displayedName();
var url;
var title;
switch(appName) {
case \"Safari\":
url = Application(appName).documents[0].url();
title = Application(appName).documents[0].name();
break;
case \"Opera\":
url = Application(appName).windows[0].activeTab().url();
title = Application(appName).windows[0].activeTab().name();
break;
case \"Google Chrome\":
url = Application(appName).windows[0].activeTab().url();
title = Application(appName).windows[0].activeTab().name();
break;
case \"Google Chrome Canary\", \"Chromium\":
url = Application(appName).windows[0].activeTab().url();
title = Application(appName).windows[0].activeTab().name();
break;
default:
title = oProcess.
windows().
find(w => w.attributes.byName(\"AXMain\").value() === true).
attributes.
byName(\"AXTitle\").
value()
}
offer an optional audio broadcasting piece of functionality … presented via a new 📢 (📢) emoji button, that might accompany …
notifications
… when a screenshot is taken. As good as notifications are, it could be that the user is beavering away with their head down at work as the screenshot is taken, but welcome the audio queue that a Timekeeping screenshot has been taken. As well as that, with this new audio broadcasting, the *.aiff audio files created are available to share via email or SMS using the Web Share API interfacing code. This involved changes to …
MAMP Timekeeping Web Application Web Share Personalization Tutorial
Your words, helped out by some computer derived detail data, can help personalize your work using the Quarter Hour Timekeeping web application of yesterday’s MAMP Timekeeping Web Application Web Share API Tutorial which, at least with the Safari browser (and a whole lot of other macOS conditions), now integrates with the Web Share API to attach images to prepared emails with a “body blurb”. It is that prepared “body blurb” we are trying to refine, today, should the user attach any of those Timekeeper screenshot files created via macOS screencapture command.
This is because these screenshot file names, by our convention, are of the format …
screen-yyyymmdd-hhmi.jpg
… within the macOS MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] folder (though the path to the file is unavailable to File API File object programmers).
That, teamed with the fact that individual user comments linked to any one quarter hour screenshot image has an ID attribute of the form …
tatd_yyyymmdd_hhmi
… and you have modified Javascript helping the user to tailor better personalized and detail email or SMS communications using the changedmacos_say_record.js external Javascript via …
var wsadate=new Date();
var lfd=String.fromCharCode(10);
function getwsadate(dd, mm, yyyy, hh, mi) {
wsadate=new Date(yyyy, eval(-1 + eval('' + mm)), dd, hh, mi, 0, 0);
var outdstr=wsadate.toDateString() + ' ' + wsadate.toTimeString();
outdstr=outdstr.replace('Sun ', 'Sunday ').replace('Mon ', 'Monday ').replace('Tue ', 'Tuesday ').replace('Wed ', 'Wednesday ').replace('Thu ', 'Thursday ').replace('Fri ', 'Friday ').replace('Sat ', 'Saturday ');
outdstr=outdstr.replace(':00 ', ' ').replace(' Jan ', ' January ').replace(' Feb ', ' February ').replace(' Mar ', ' March ').replace(' Apr ', ' April ').replace(' Jun ', ' June ').replace(' Jul ', ' July ').replace(' Aug ', ' August ').replace(' Sep ', ' September ').replace(' Oct ', ' October ').replace(' Nov ', ' November ').replace(' Dec ', ' December ');
//console.log('tatd_' + yyyy + mm + dd + '_' + hh + mi);
if (document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi)) {
//console.log('yes tatd_' + yyyy + mm + dd + '_' + hh + mi);
if (document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).value.trim() != '') {
outdstr+=' ' + String.fromCharCode(10) + '"' + document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).value + '"';
} else if (document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).innerHTML.trim() != '') {
outdstr+=' ' + String.fromCharCode(10) + '"' + document.getElementById('tatd_' + yyyy + mm + dd + '_' + hh + mi).innerHTML + '"';
}
}
lfd='';
return outdstr + String.fromCharCode(10);
}
async function atclick() {
const files = document.getElementById('files').files;
var moressi='', ifl=0, lessssi='';
lessssi=moressi;
while (lessssi.indexOf(String.fromCharCode(10)) != -1) {
lessssi=lessssi.replace(String.fromCharCode(10), ' ');
}
// feature detecting navigator.canShare() also implies
// the same for the navigator.share()
if (!navigator.canShare) {
//if (document.URL.indexOf('localhost') != -1) { alert('Can not share'); }
document.getElementById('output').textContent = `Your browser doesn't support the Web Share API.`;
return;
//} else {
//if (document.URL.indexOf('localhost') != -1) { alert('Can Share'); }
}
if (navigator.canShare({ files })) {
try {
console.log('Can share');
await navigator.share({
files,
title: 'Timekeeping screenshots' + lessssi + ' or media or documents',
text: 'Timekeeping screenshots' + moressi + ' perhaps?! Take a look at media or documents below' + String.fromCharCode(10) + String.fromCharCode(10)
});
document.getElementById('output').textContent = 'Shared!';
} catch (error) {
document.getElementById('output').textContent = `Error: ${error.message}`;
}
} else {
//if (document.URL.indexOf('localhost') != -1) { alert('Cannot share'); }
document.getElementById('output').textContent = `Your system doesn't support sharing these files.`;
}
lfd=String.fromCharCode(10);
}
the changed HTML and Javascriptquarter_hour_timer.html (we still ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) Web Application supervisor …
<script type='text/javascript' src='//www.rjmprogramming.com.au/web_share_api_test.js?populate=as_necessary' defer></script>
… nicely
… but as we’ve warned before you may need all these for total success for the Timekeeping Quarter Hour Timer web application (that can screenshot, can create notification when screenshot taken, and have audio commentary, and share screenshot image(s) or Timekeeper URL) …
… sitting up at the Document Root of your public domain, that “?ongoing=” based $_GET[‘ongoing’] argument deliberate, effectively asking the code to look out for “on the fly” HTML elements created within an execution run of the webpage.
<script type='text/javascript'>
var commentary_array=['textarea', 'You can enter comments about this screenshot here %value%outerHTML%@yyyymmdd%hhmm%.', 'img', 'Timekeeper screenshot here %id%@yyyymmdd%hhmm%.'];
</script>
… where the first field describes an HTML element attribute to first look at, the optional second is a stand by attribute, followed by “date extraction” fields to match with numerical data found so as to substitute the blue parts with a “date and timestamp” string.
not necessarily frontmost … but benefitting from any …
notification reminders separate from web activities and webpage focus issues can help tell the user when they might want to turn back attention to the timekeeping screenshot recording
This needs PHP to work and it needs real access via PHP exec function to underlying operating system commands. When this happens, we still try to offer a public RJM Programming interface but this interface is far less useful if you have not downloaded to your local Apache/PHP/MySql local web server (such as a MAMP one) as per …
settle for mobile platforms never being able to screenshot, on this round of looking, and redirecting to the “Monthly Chronicler” web application (of (the unchanged) monthly_chronicler.html we ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) …
<script>
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|iPad|Opera Mini|IEMobile/i)) {
document.write("<scri" + "pt> location.href='./monthly_chronicler.html'; </scr" + "ipt> <style> a.adate { border:1px solid green; background-color:#f0f0f0; border-radius:50px; } </style> <table id=mtable style=display:none;width:95%;><tr><th><input style=width:450px; placeholder='' id=iask type=text value=''></input><</th><th><input onclick=\" document.getElementById('mtable').style.display='none'; document.getElementById('mybod').style.opacity='1.0'; postask(document.getElementById('iask'));\" type=button value=OK></input></th><th><input onclick=\"document.getElementById('iask').value=''; document.getElementById('mtable').style.display='none'; document.getElementById('mybod').style.opacity='1.0'; \" type=button value=Cancel></input></th></tr></table>");
}
</script>
… dumbing down, but working more reliably, using “Javascript writes Javascript” methodology
Again, feel free to try the changedquarter_hour_timer.html (we ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) Timekeeping Web Application suited to macOS (or Mac OS X) “screencapture” command line usage, is helped out by a “mobile platform check” changedquarter_hour_timer.php PHP (we ask you to download to MAMP‘s $_SERVER[‘DOCUMENT_ROOT’] “HTMLCSS” subfolder) for you to try out on your MAMP macOS environment, or all showing up at an RJM Programming public domain webpage, in an iframe element, visible now.
… which you may glean has a Windows “fallback” position (with that “copy” codeline). Why? Well, we found a .Net framework “exe creation via bat” using ScreenCapture.bat (thanks to this useful link) created black screen shots. Probably a privilege thing or PHP exec thing, but we’ve opted for the workaround, which is just “Windows talk” …
write Windows batch scapcontinuous.bat as a continuous fifteen minute user of the .Net Framework (ScreenCapture.exe) derived from above
set up a task via “Task Schedular” (please ignore the warts ‘n all “garden path” schtask ideas in the video below) that has an action “C:\MAMP\htdocs\scapcontinuous.bat” and starts when the Windows user logs in and takes (successful) screen shots at 14 and 29 and 44 and 59 minutes (in the hour) times
Take a more detailed look at “warts ‘n all” crab progression towards the Windows (client) solution, below …
This bit of functionality works (interfacing) both with MAMP and with the public RJM Programming domain incarnation of the Timekeeping web application, so that could be interesting. It can interface via …
… modes of use. In action, should you create an iCal file this way, the web application will download the resultant .ics file into your Downloads folder and to interface into your default online Calendar application double click that Downloads folder file to complete the Calendar integration …
function icalpostit(tl, tg) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var hh = today.getHours();
var minm = today.getMinutes(); //January is 0!
//if (icalavailable) { alert('is ' + ('' + yyyy + ('00' + mm).slice(-2) + ('00' + dd).slice(-2) ) + ' >= ' + tl.substring(1)); }
if ((document.getElementById('yics').value.indexOf('all') != -1 || tl.substring(1) >= ('' + yyyy + ('00' + mm).slice(-2) + ('00' + dd).slice(-2) )) && icalavailable && document.getElementById('yics').value != '') {
if (document.getElementById('yics').value.indexOf('nw') != -1) {
icald=tl.substring(1) + ':' + ('00' + hh).slice(-2) + ('00' + minm).slice(-2) + '59';
icalg=tg;
if (icalwo != null) { icalwo.close(); icalwo=null; }
icalwo=window.open('../PHP/ics_attachment.php','_blank','top=100,left=100,width=740,height=800');
if (1 == 1) {
setTimeout(icalw, 3000);
} else {
icalwo.document.getElementById('datestart').value=icald;
icalwo.document.getElementById('dateend').value=icald;
icalwo.document.getElementById('eventwords').value=icalg.replace(/\<br\>/g, String.fromCharCode(10)).replace(/\<Br\>/g, String.fromCharCode(10)).replace(/\<BR\>/g, String.fromCharCode(10));
if (document.URL.indexOf('localhost') != -1) {
var jcald=icalg.replace(/\<br\>/g, String.fromCharCode(10)).replace(/\<Br\>/g, String.fromCharCode(10)).replace(/\<BR\>/g, String.fromCharCode(10)).replace(/\ \;>/g, ' ');
while (jcald.indexOf(String.fromCharCode(10)) != -1) { jcald=jcald.replace(String.fromCharCode(10),' '); }
icalwo.document.getElementById('title').value=jcald;
} else {
icalwo.document.getElementById('title').value='Calendar event at ' + icald;
}
icalwo.document.getElementById('description').value='Calendar event at ' + icald;
icalwo.document.getElementById('address').value=document.URL.split('?')[0].split('#')[0];
icalwo.document.getElementById('mmdatestart').value=icald.substring(4,6);
icalwo.document.getElementById('mmdateend').value=icald.substring(4,6);
icalwo.document.getElementById('dddatestart').value=icald.substring(6,8);
icalwo.document.getElementById('dddateend').value=icald.substring(6,8);
icalwo.document.getElementById('ssdatestart').value='59';
icalwo.document.getElementById('ssdateend').value='59';
icalwo.document.getElementById('yyyydatestart').value=icald.substring(0,4);
icalwo.document.getElementById('yyyydateend').value=icald.substring(0,4);
if ( ('' + today.getTimezoneOffset()).replace('null','').replace('undefined','') != '' ) {
//alert(('' + eval(eval('' + qd.getTimezoneOffset()) / 60.0)).replace('.00','').replace('.0',''));
icalwo.document.getElementById('tz').value=('' + eval(eval('' + today.getTimezoneOffset()) / 60.0)).replace('.00','').replace('.0','');
}
//icalwo.document.getElementById('pform').onsubmit=function() { window.opener.document.getElementById('icalstatus').innerHTML=' '; return true; };
Mac OS MAMP Timekeeping Web Application PHP Calendar Contenteditable Tutorial
We’ve spoken quite a bit in the past about the joys of involving the “contenteditable=true” attribute for HTML elements that have an “innerHTML” (ie. they have a formalized end tag arrangement eg. div, span, p, td, th etcetera) and with today’s work which extends that started with yesterday’s Mac OS MAMP Timekeeping Web Application PHP Calendar Past Tutorial it is the turn of a set of “p” elements it helps out today.
The scenario is that yesterday’s work did not allow for “orphaned screenshots” of the past be allowed to be brought back into play to “annotate them” and in so doing “give them a home”. This led us to …
allow for a new “Infill Earlier Days All Screenshots” button augment yesterday‘s “Infill Earlier Days Just Annotated Screenshots” button …
the pressing of that new “Infill Earlier Days All Screenshots” button causes all screenshot 15 minute entries relevant to the current year be displayed in the calendar … but then it occurred to us users might want to “annotate them” … but how? …
?>
… to, when an “orphaned” screen shot image is happened upon, allows …
contenteditable=true “does its stuff” turning might might have been a pretty unintelligent HTML element into a “textarea” type collector of user input, and then that onblur event logic’s “midair feeling” Ajax/FormData “recursive feeling” methodology …
function repostit(ih) {
var ihis=(ih.innerText || ih.contentWindow || ih.contentDocument);
var pathpart=ih.id;
if (ihis != '') {
var xzhr = new XMLHttpRequest();
var xform=new FormData();
xform.append('myta',ihis);
xform.append(pathpart.split('.')[0].replace('ip_','screen-').replace('_','-'),'');
xzhr.open('post','./quarter_hour_timer.php',true);
xzhr.send(xform);
}
}
… which can cement that (newly user entered) annotation into future permanency in the “Yearly Report Calendar” section
… feel to it all. Today, we improve on the latter “restrictiveness” issue, within yesterday’s “Yearly Report Calendar” new functionality, by looking back into the current calendar year’s “past” with respect to the date of using the web application, whether that be …
screen captures from days in the current calendar year’s “past”
text entries made and remembered (in window.localStorage) in the current calendar year’s “past”
if ($bcontis != "''" && $bcontis != "") {
if ($htmlis == '') {
$htmlis="<html><head><script type=text/javascript> var imois=null, iwo=null; function wopen(event,overvsout) { if (!overvsout) { if (imois == event.target) { imois=null; } return; } imois=event.target; setTimeout(postwopen, 2000); } function postwopen() { var pois=imois; if (pois.outerHTML.indexOf('URL(') != -1) { window.open(pois.outerHTML.split('URL(')[1].split(')')[0].replace(String.fromCharCode(34),'').replace(String.fromCharCode(34),''),'_blank','top=50,left=50,width=600,height=600'); } }</script></head><body onload=\" var huhg=''; if (parent.document.getElementById('" . $idcali . "')) { huhg='" . $ccpre . $bcontis . $ccpost . "'; while (huhg.indexOf(String.fromCharCode(10)) != -1) { huhg=huhg.replace(String.fromCharCode(10),'<br>'); } parent.document.getElementById('" . $idcali . "').innerHTML+=huhg; } \"></body></html>";
} else if (strpos($htmlis, $bcontis) === false) {
$htmlis=str_replace("+=huhg; }", "+=huhg; huhg='" . $ccpre . $bcontis . $ccpost . "'; while (huhg.indexOf(String.fromCharCode(10)) != -1) { huhg=huhg.replace(String.fromCharCode(10),'<br>'); } parent.document.getElementById('" . $idcali . "').innerHTML+=huhg; }", $htmlis);
}
}
}
}
if ($htmlis != "") { echo $htmlis; }
}
}
}
}
}
}
// blah else if blah else if blah
?>
… which you may notice implements a “long hover” window.open scenario (using non-mobile platforms) for screenshot images on the calendar by combining the use of …
global variables …
var imois=null;
var iwo=null;
onmouseover event logic …
Call
onmouseover=wopen(event,true);
setTimeout delays …
Called
function wopen(event,overvsout) {
if (!overvsout) {
if (imois == event.target) {
imois=null;
}
return;
}
imois=event.target;
setTimeout(postwopen, 2000);
}
function postwopen() { //pois) {
if (imois) {
var pois=imois;
if (pois.outerHTML.indexOf('URL(') != -1) {
if (iwo) { iwo.close(); iwo=null; }
iwo = window.open(pois.outerHTML.split('URL(')[1].split(')')[0].replace(String.fromCharCode(34), '').replace(String.fromCharCode(34), ''), '_blank', 'top=50,left=50,width=600,height=600');
}
}
}
onmouseout event logic …
Call
onmouseout=wopen(event,false);
… so that this logic is not responsible for clobbering the default “hover” shows of the “p” element “title” attribute with the onmouseover event for non-mobile platforms.
Mac OS MAMP Timekeeping Web Application PHP Image Metadata Tutorial
In our opinion, what would make the day before yesterday’s Mac OS MAMP Timekeeping Web Application PHP Intranet Tutorial “Timekeeping Web Application” cooler would be to add to the intelligence of the screen capture images, ahead of other data related improvements to come.
We’ve spoken in the past about Exif in that respect but PHP has Iptc image metadata functions we can call on …
iptcembed to embed new metadata into an existant image from those associated “caption” textarea elements we offer
iptcparse to extract old metadata from an existant image into those associated “caption” textarea elements we offer
This metadata can be like a database source we use moving forward on this project, meaning the one image data entity can suffice for both visual and textual usage purposes.
Mac OS X MAMP Timekeeping Web Application Email Tutorial
The practicalities of yesterday’s (Mac OS X MAMP Timekeeping Web Application Primer Tutorial) timekeeping Mac OS X Web Application, left as they are, would leave you with a somewhat useful web application whose use is only for the here and now, but what if you want it to be more accountable? Well, that is when we, here, at RJM Programming, like to use that tried and trusted email form of communication.
Today’s email methods spurn the use of server-side intervention, at least for now. So what is available to us as tools, if we don’t include Ajax nor jQuery in that list? Well, we have, to our minds …
the body section of that email can 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
We rely on the crontab functionality, being as there is no server-side help, to create the image file, whose contents eventually go to make up the contents that can be selected and copied and pasted by the user into the body section of the email (and sent off to whosoever they feel like sending it too, as you have the full power of the email client available to you with the interaction you have with an actual email client program).
Here is the HTML and Javascript quarter_hour_timer.html which changed to cater for today’s email functionality in this way, and, as per the Stop Press from yesterday, we’ll also have a live run link here today.
Mac OS X MAMP Timekeeping Web Application Primer Tutorial
Sometimes when you program, especially for administrative type functionality, there are useful programs to write, that are able to become web applications, but in a limited set of platforms. So it is today with our timekeeping web application that relies on …
MAMP installed to, in our case, /Applications/MAMP/htdocs/ (as is mentioned in the relevant crontab background task that snapshots the user’s screen every quarter hour) that maps to the MAMP web application URL http://localhost:8888/ … or …
crontab directory mention that corresponds to a URL call of our web application like for our Google Chrome example (where the directory below, used, could be a place of your choosing (that matches what is in your crontab task entry)) …
file:///Applications/MAMP/htdocs/quarter_hour_timer.html?localplace=
… or just, via the web browser’s File -> Open File menu …
file:///Applications/MAMP/htdocs/quarter_hour_timer.html
… pretty restrictive, huh? … but pretty useful for our quarter hour timekeeping purposes today.
We want to have a web application that is running at the user’s discretion, and when first fired up, looks for outputs from crontab tasks above …
… for the current day in question and if existant show …
a date and time stamp +
the snapshot of what you were doing at the quarter hour, that is clickable to make bigger for more in depth viewing +
an HTML textarea element in which you can optionally type in more specifics about that quarter hour
So, as much as we like to think of Mac OS X Terminal application’s BSD (a unix derivative) operating system, as being a lot like Linux, there are some commands and usage that …
adds Mac OS X specific command line functionality to a Linux or unix base set of functionality, like for today’s screencapture command … and we’ve included another such example, below, with the command say featuring in Mac OS X Text to English Speech Primer Tutorial as shown below
changes switches on Linux or unix commands
won’t have some Linux or unix commands that other platforms do
In the great tradition of behoving … we behove … we behove thee quarter_hour_timer.html if you like, my liege. On this occasion you’ll have gleaned that there is no live run link, because the RJM Programming web server is not Mac OS X … so command line screencapture has no meaning for a CentOS web server’s operating system command line. You’ll see in the code that rather than use “Client Pre-emptive Iframe” concepts to check for existence of crontab screen capture images, we, instead use the onerror event for HTML img elements to check for non-existance.
Stop Press
Just noticed that, perhaps, after all, a live run from the RJM Programming website can make sense if you have a Mac OS X laptop, for instance, that is running that suggested crontab entry as explained in tutorial above. That type of live run managed to latch on to our local crontab screencaptures on my MacBook Pro.
Text to English Speech via Mac OS X’s command line say command used by PHP via exec to make say.php (which is useful as a download to a Mac OS X laptop using MAMP) which, today, does not have a live run because the web server of domain rjmprogramming.com.au is a CentOS Linux server … Linux equivalent of Mac OS X’s say? … read here
Trying to present this brought up the usual movie production problem with iMovie overlaying the audio on top of the video (though you may want to try, and you could start reading with this link) versus QuickTime Player talent to catch both audio and video tracks (and that we ended up using), but not of the “screen goings on”, alas versus MPlayer OSX Extended which can play separately but not two tracks on top and doesn’t do any reconstituting … so …
Improved on our inhouse Video/Audio synchronizing efforts by allowing audio_video.html supervisor (changed in this way) be able to be called to press one of its preconceived synchronization buttons onload which we do with (the newly added) Macbeth Act 1 Scene 1 … in a small celebration of the Bard … who, am thinking (in that Falstaff way), would have got a huge chuckle out of “anonymous” instead of “anon” during the Three Witches scene … we had to do something to say Happy Birthday
Along the way we tried filming the MacBook Pro with the iPad to a YouTube …
… but weren’t happy with the audio quality, alas (too/two).
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.
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.
And in those terms, we can illustrate what we mean below, by you leaving checked the checkbox ignoring the # hashtagging (ie. opening up the possibility of both 404 errors and introducing 414 (request too long) errors we can’t do much about (except to suggest positioning # hashtagging after your established RJM Programming website URL and ahead of the data URI may help) and likely when using data URI incarnations copied to the web browser address bar URL and not including the # hashtagging) regarding some web browser address bar URL “imaginings” a user may append (probably via copy and paste (perhaps via a Google image search’s right click menu’s Copy Image Address option, most likely after a # (bearing in mind the cache may annoy without a new ? argument on previously used web browser tabs) methodologies) onto established RJM Programming website URLs probably there already to the left of the web browser‘s relevant tab’s address bar …
… is using a custom error page called 404.php featuring PHP writes Javascript changes …
<script type="text/javascript">
// focus on search field after it has loaded
document.getElementById('s') && document.getElementById('s').focus();
<?php echo $wobitis . "
Also, today, we allow image editing regarding the downloadablelatest draftrecording_ideas.php placed into it’s Document Root, and so be accessible via URL http://localhost/recording_ideas.php (Windows) or http://localhost:8888/recording_ideas.php (macOS) on a MAMP local Apache web server to make all this be possible.
… being that, within the purview of the RJM Programming domain these two represent two different websites and so use their own different custom error document or custom error page Apache web server arrangements.
Today, we consider RJM Programming domain’s Apache web server’s Landing Page (et al) website “Not Found” (ie. HTTP error code 404) scenario.
And in those terms, we can illustrate what we mean below, by you leaving checked the checkbox ignoring the # hashtagging (ie. opening up the possibility of both 404 errors and introducing 414 (request too long) errors we can’t do much about (except to suggest positioning # hashtagging after your established RJM Programming website URL and ahead of the data URI may help) and likely when using data URI incarnations copied to the web browser address bar URL and not including the # hashtagging) regarding some web browser address bar URL “imaginings” a user may append (probably via copy and paste (perhaps via a Google image search’s right click menu’s Copy Image Address option, most likely after a # (bearing in mind the cache may annoy without a new ? argument on previously used web browser tabs) methodologies) onto established RJM Programming website URLs probably there already to the left of the web browser‘s relevant tab’s address bar …
Non-Hashtag Tests … optional or
Hashtag
Non-Hashtag
From where, for the RJM Programming’s Landing Page website’s purposes, is the logic for these HTTP error code 404 redirections, springing?
The 404.shtml custom error page file is doing this job, and has new Javascript code snippets as per …
var locwo=null;
var jnuidea='';
var usuff=(document.URL.indexOf('/ITblog') != -1 ? 'ITblog/' : '');
var plusd='+';
if (('' + decodeURIComponent(('' + document.URL))).indexOf('data:') != -1 && ('' + ('' + document.URL)).indexOf('%20') != -1) { plusd=' '; }
Landing Page “hashtag containing” data URI and absolute URL redirection logics … helps, as a one to one block of Javascript code usefulness to …
WordPress Blog “hashtag containing” data URI and absolute URL redirection logics
… being that, within the purview of the RJM Programming domain these two represent two different websites and so use their own different custom error document or custom error page Apache web server arrangements.
Our logic here involves hashtag concerns, and hashtag data does not even register at the serverside end of the “delivery of online HTML webpage display” workflow, and so is a Javascript, purely clientside part of the scope of work. So, regarding a PHP written WordPress Blog, what we need for interventional purposes here is to locate where the document.body element is coded for. Luckily, we do a lot of tweaks to the PHP code where the “onload” event is defined in good ol’ header.php WordPress TwentyTen theme codex PHP file. And we pick the first of our document.body “onload” event “inhouse functions” called chkinodo to plug the slightly modified from yesterday …
… mainly regarding working the logic for svg+xml utf8 data URI where the blank character encoding %20 can come into play …
… and we output raw SVG HTML in this webpage display mode of application, allowing address bar RJM Programming’s Landing Page intended hashtag URLs such as …
… “to also press towards” … chortle, chortle … a happier place. More aspects to redirection ideas regarding this will be happening over a couple more days.
Have you ever noticed how good humans are at one-to-one mapping? Okay, okay, K9s too … sheeeeessssshhhhh!
This thinking suits substitutional programmatical thinking. In other words you’re presented with something to tweak … perhaps in private … and one of the favourite ways we can think of to quickly get somewhere changing it, hopefully for the better, could be to …
recognize a hard-coding or phrase or word … that in an initial draft is kind of static by nature … and go ahead and code for it to be substituted or mapped or you might want to say “redirected” to …
some dynamic HTML and Javascript code, such as a dropdown (ie. select) element, for instance
data URI (possibly media) generic definition of what is otherwise some web server (possibly media) file’s contents, in amongst the Landing Page hashtag URL component … or …
absolute URL, in amongst the Landing Page hashtag URL component
… we’re starting down this “redirection path”, today, adjusting RJM Programming’s Landing Page PHP code, as per …
… email body media attachment logics “less than optimal” … putting it kindly. Today, though, for your shorter audio or video media instances, within that email body content we can offer a new hashtagging URL paradigm that goes …
… style of link now created, and in the case of macOS, perhaps automated, into the email body, not as an attachment, but as a link the email recipient can click to see that media content display … for your smaller media content usages.
The keen eyed will see that recording_ideas.php has gone through extensive changes to “shapen up or fly right” regarding other ambitions we have for it, which Luna has told me is …
Here in December, 2025 we have lost touch with the original media_via_pb.php code from back in November 2018 and we are in the process of repiecing a similar but different set of logics in a similar vein. Please stay tuned for interplay with macOS pbcopy and pbpaste and Windows clip commands or some other methodology involvement not existing in this reconstituted first draft.
… as anything that can explain the overnight disappearances of code you’ve worked on, and is not “hacking activity”, tends to be “a relief to one’s system” and “double the relief to a set of twins” (as Nala wanted to point out).
But, it is only occasionally you get this type of problem happening and the scheduled ways of crontab are just so useful, we’re proceeding with the file tidying ways of crontab, but shoring up the wildcarding we apply so that the entry …
45 4 * * * ksh -c 'for i in `find /home/rjmprogr/ -name "media_*" -cmin +720`; do rm -f $i; done'
… becomes …
45 4 * * * ksh -c 'for i in `find /home/rjmprogr/ -name "media_*[0-9]*" -cmin +720`; do rm -f $i; done'
… to solve our current project’s constant need for resurrection surrounding it’s media_via_pb.* naming ways.
<?php
function andthenlater($andmore) {
global $incopy, $pathbit, $basebit, $mampfilelist, $mampfs;
$thingos=[''];
$afters='';
$rel='x';
if (PHP_OS == 'Darwin') {
if (strlen($andmore) > 1) {
$thingos=explode(',', $andmore);
}
for ($iwe=0; $iwe<sizeof($thingos); $iwe++) {
$thingo=$thingos[$iwe];
$pbit='';
if (basename($thingo) == $thingo && $pathbit != '') {
$pbit=$pathbit;
}
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo);
if (strlen($thingo) > 1) {
if (strpos(strtolower($thingo), '.png') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class PNGf»)'");
} else if (strpos(strtolower($thingo), '.jp') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class JPEG»)'");
} else if (strpos(strtolower($thingo), '.gif') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class GIF»)'");
} else {
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo . "\n" . "osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class optd»)'");
exec("echo " . $pbit . $thingo . " | pbcopy");
$afters=("osascript -e 'tell application \"Finder\"
set thesong to \"" . $pbit . $thingo . "\" as string
end tell
tell application \"QuickTime Player\"
activate
open thesong
play document 1
end tell'");
}
sleep(5);
}
// Thanks to https://www.google.com/search?q=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&rlz=1C5OZZY_en&oq=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTQ3NDg4ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
$retis=shell_exec("osascript -e 'tell application \"System Events\"
# Get the name of the current application (which is likely the Script Editor or Automator)
set currentApp to name of current application
# Check if the current app is one of the script runners and hide it to allow the target app to become frontmost
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to false
# Wait a moment for the target app to become active
delay 0.1
end if
# Simulate the Command+V keystroke in the now frontmost application
keystroke \"v\" using command down
# (Optional) Unhide the script application afterward
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to true
end if
end tell
'");
if ($afters != '') { sleep(5); exec($afters); $afters=''; }
}
if (strlen($andmore) > 1 && $incopy != '') {
return exec($incopy);
}
}
if (strlen($andmore) <= 1 && sizeof($mampfs) > 1 && $basebit != '' && $rel != '') {
$newc='';
for ($ijk=0; $ijk<sizeof($mampfs); $ijk++) {
if (strpos(explode('##',$mampfs[$ijk])[0], $basebit) === false) {
if ($newc == '') {
$newc=explode('##',$mampfs[$ijk])[0];
} else {
$newc=explode('##',$mampfs[$ijk])[0] . ',' . $newc;
}
}
}
sleep(5);
//file_put_contents('x.x', $pathbit . "\n" . $basebit . "\n" . $newc);
andthenlater($newc);
}
return '';
}
function andthenlater($andmore) {
global $incopy, $pathbit, $basebit, $mampfilelist, $mampfs;
$thingos=[''];
$rel='x';
if (PHP_OS == 'Darwin') {
if (strlen($andmore) > 1) {
$thingos=explode(',', $andmore);
}
for ($iwe=0; $iwe<sizeof($thingos); $iwe++) {
$thingo=$thingos[$iwe];
$pbit='';
if (basename($thingo) == $thingo && $pathbit != '') {
$pbit=$pathbit;
}
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo);
if (strlen($thingo) > 1) {
if (strpos(strtolower($thingo), '.png') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class PNGf»)'");
} else if (strpos(strtolower($thingo), '.jp') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class JPEG»)'");
} else if (strpos(strtolower($thingo), '.gif') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class GIF»)'");
}
sleep(5);
}
// Thanks to https://www.google.com/search?q=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&rlz=1C5OZZY_en&oq=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTQ3NDg4ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
$retis=shell_exec("osascript -e 'tell application \"System Events\"
# Get the name of the current application (which is likely the Script Editor or Automator)
set currentApp to name of current application
# Check if the current app is one of the script runners and hide it to allow the target app to become frontmost
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to false
# Wait a moment for the target app to become active
delay 0.1
end if
# Simulate the Command+V keystroke in the now frontmost application
keystroke \"v\" using command down
# (Optional) Unhide the script application afterward
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to true
end if
end tell
'");
}
if (strlen($andmore) > 1 && $incopy != '') {
return exec($incopy);
}
}
if (strlen($andmore) <= 1 && sizeof($mampfs) > 1 && $basebit != '' && $rel != '') {
$newc='';
for ($ijk=0; $ijk<sizeof($mampfs); $ijk++) {
if (strpos(explode('##',$mampfs[$ijk])[0], $basebit) === false) {
if ($newc == '') {
$newc=explode('##',$mampfs[$ijk])[0];
} else {
$newc=explode('##',$mampfs[$ijk])[0] . ',' . $newc;
}
}
}
sleep(5);
//file_put_contents('x.x', $pathbit . "\n" . $basebit . "\n" . $newc);
andthenlater($newc);
}
return '';
}
to a local web server (such as MAMP) underlying operating system environments, to the point that an email attachment piece of automation can be worked from a downloadedchangedmedia_via_pb.phpmedia_via_pb.php web application …
so that up at the public domain webpage when local media browsing …
with email address defined …
the “Intranet feeling” window.open(MAMP-get-style-url.php, iframe-name, ‘top=?,width=?,left=?,height=?’) can work it’s magic in amongst, in order …
public domain does window.open as above
public domain webpage does “a” mailto: link click to open email client
MAMP-get-style-url.php in macOS or Windows copies image into Clipboard as graphics
if macOS can go on to paste that Clipboard image into that email body as an attachment
… but only if, as we’ve verified again today and only for sure on macOS Google Chrome web browser so far, otherwise CORS restrictions come into it, MAMP-get-style-url.php only performs PHP stuff and does not try to write out a webpage of any sort. We can arrange it that way in this project but can easily imagine other projects where this can not be wrangled using a public domain webpage incarnation this “Intranet feeling” way.
Here in December, 2025 we have lost touch with the original media_via_pb.php code from back in November 2018 and we are in the process of repiecing a similar but different set of logics in a similar vein. Please stay tuned for interplay with macOS pbcopy and pbpaste and Windows clip commands or some other methodology involvement not existing in this reconstituted first draft.
Bit sad, but a new opportunity too?!
And so, with that opportunity, we can apply some recent work knowledge, especially regarding a local web server (such as MAMP) underlying operating system environments, to the point that an email attachment piece of automation can be worked from a downloadablechangedmedia_via_pb.phpmedia_via_pb.php web application.
… command to “provide copying and pasting to the pasteboard (the Clipboard) from command line” (quoting from “man pbcopy”).
And where there is a “copy” there’s a … anyone, anyone? … yes, Smithers, a “paste”. And so, new to today’s work, we start combining that pbpaste with the brilliant passthru …
… to position at the place to “plonk” media data into a webpage, often, and let it display.
You’ll notice in today’s PHP (only really suits localhost local web server hosting code, such as MAMP) “Media via pbcopy and pbpaste” web application’s http://localhost:8888/media_via_pb.php code that we code an exec style …
Mac OS X Clipboard to File to Datauri Primer Tutorial
Today’s tutorial is a lot about the image two below the one above. It looks pretty much like any other image on this web page, I’m sure, at first glance, you’d say?! But the fact is, this image does not involve a web server image file of any sort, though its storage does involve a web server database, because all these blog postings exist in a table of a MySql database that WordPress uses to store information. Has this let you down? Hope not, because this is still a pretty big concept, getting bigger and bigger as time goes on, and spurred on by the mobile device revolution, and that is the rise and rise of the use of datauri based media. Let’s see what Wikipedia says …
The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple HTTP requests.[1] Data URIs are sometimes referred to incorrectly as “data URLs”.[citation needed] As of 2015, data URIs are fully supported by most major browsers, and partially supported in Internet Explorer and Microsoft Edge.[2]
With this image, two down, we didn’t feel like plonking this as a file on our web server, basically because it was that bit smaller than the usual, and so the basic steps of how we constructed it was …
we’d Prnt-Scrn buttoned this part of a screen snapshot on Windows 10 … and then …
we emailed it to ourselves, but logged onto our MacBook Pro laptop … and so we …
downloaded that email attachment into the Preview desktop application … where we …
drew a rectangle around the dialog of interest and used Edit -> Copy to get it into a Mac OS X clipboard … and though we didn’t do this right here and now, we did do before the final step, copy the clipboard into an image file called huh.png (via File -> Save As…) via Paintbrush desktop application’s File -> New from clipboard option … and so then …
looked up Google in this way … and the second link in the list got me to …
see some incredibly useful Mac OS X Terminal application command line usage … to aim for … and we adapted to, namely … openssl base64 < ./huh.png | tr -d '\n' | pbcopy
… which got into a Mac OS X clipboard the suffix (called [suffix] that gets appended to the prefix [prefix] we’ll talk about in the next step) of an HTML image element of the form <img title=’Datauri image’ src=’[prefix][suffix]‘></img> … leaving us to work out for the png image type we desired the prefix [prefix] could be …
found a typical datauri prefix for a base64 encode png image at this really useful link so that prefix [prefix] above could be data:image/png;base64, … the missing piece of being able to HTML code the datauri image two below the one above … and not requiring a web server image file to exist, as the image data exists in this blog posting … brought to you by the wonders of CMS (Content Management Systems).
Hope this interests you, and perhaps that you try out one of these datauri HTML img elements for yourself.
In the area of robotics and artificial intelligence, perhaps the best known concept to we “mere mortals” is “voice recognition”. Perhaps because research into it goes back to 1932, before the Second World War … and 66 years before the “Worm Farm Incident of Simmons Street Disaster” … but we digress … and no … “I’m not ready to open up about this at this delicate stage of my life, yet, Brad.”.
Voice recognition has come a long way from those earliest endeavours when the speech recognition relied on training software for an individual voice. This became apparent to me trying out Cortana in Windows 10. Once working, it didn’t seem to matter who in our house asked the same question of Cortana, the speech recognition software recognized and translated the speech into the same text for all of us. Actually, Microsoft describes Cortana this way …
Cortana is your clever new personal assistant.
Cortana will help you find things on your PC, manage your calendar, track packages, find files, chat with you, and tell jokes. The more you use Cortana, the more personalized your experience will be.
To get started, type a question in the search box on the taskbar. Or select the microphone icon and talk to Cortana. (Typing works for all types of PCs, but you need a mic to talk.)
… and I see what they mean by this, because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone). Perhaps Cortana should have a special “Darkroom Edition” for people who …
have the urge to run for the nearest cupboard before being caught talking into a computer (microphone) … and who …
have a hobby developing and printing photographs
Anyway, we agree with Microsoft that Cortana is clever, and it’s nice for us to find another use for the microphone (brand called MXL Tempo) we used with WebEx work we talked about with WebEx Presentation with Microphone Tutorial below.
There is not much to setting up Cortana, except, perhaps, for the microphone bit, which we’ll talk more about later. Cortana’s “personal assistant” and interface down next to the Windows icon at the bottom left of the screen guides you well through what you have to do.
We got stuck a bit, regarding setting up the microphone, with a cycle of it presenting this voice recognition test always resulting in a message wondering whether we had the microphone set to “mute on”, which wasn’t the case. But what was the case, and remedied this problem was to use a USB 2 port rather than a USB 3 port … in case this happens to you.
Other than that, Cortana is pretty cute, and could be a good enough reason on its own to upgrade to Windows 10 from Windows 7, Windows 8.1, Windows Phone 8.1 or Windows 9 operating systems before Friday, 29th July 2016 which is the cut off day for free upgrades. Our experience of the upgrade was talked about at Windows 10 Upgrade Primer Tutorial (and backups were discussed at Windows File History Backup Primer Tutorial).
We’ve been doing some more WebEx (by Cisco) lately, and realised, at least with using a MacBook Pro laptop, we needed to invest in a microphone, to be heard, as the inbuilt microphone systems were not up to it.
We opted for a USB connected microphone brand called MXL Tempo, sold here in Australia, and have found it to be good, especially mounted on the stand provided … well, no complaints, anyway?! Where it has a 1/8″ (3.5mm) Headphone Jack we plugged in our own speakers, though you could use headphones here as well.
Of course we’ll also be constructing a garage, and buying a guitar, and calling on “tree fellers”karaoke backing track of Peter, Paul and Mary to complete the picture of this week’s project … getting the new microphone to make breakfast in the morning before you even knew you needed breakfast get me on The Voices.
In the WebEx “Audio Connection” menu via “Call Using Computer” option have both input and output audio be handled by “USB audio CODEC” (if they are options … if not, there is a hardware (perhaps configuration) problem with your audio and microphone connection) as you can see at today’s tutorial picture. So long as you succeed and have the USB connected, the audio connection will default to this arrangement for the next time. Cute, huh?!
To make it permanent that the MXL Tempo microphone arrangement is the default device for recordings …
click on System Preferences off the Apple menu
click the Sound option
click the Output tab
pick USB audio CODEC
if you intend using speakers or headphones connected off this microphone from its 1/8″ (3.5mm) Headphone Jack, click the Input tab
… regarding video conferencing products we’ve tried at this blog.
Have to say, WebEx is great, even with respect to the “wide eyed and bushy tailed” reaction “this little black duck” has to all these networky communicaty ideas on the net (at least we spelt “net” correctly).
Have to thank my wife, Maree, for her expertise and the facilities her company, Thomson Reuters, supplies for the serving of WebEx recordings … thanks everyone. Have been assured they are periodically deleted, and my lame impersonations of the old “ducks on the wall” can rest in peace shortly.
And so, we have a slideshow starting with a WebEx email link to join a meeting, and we pan down the email to show you other WebEx functionalities, such as adding a Calendar reference to the meeting time, and though we haven’t shown you detail here, rest assured it handles timezone scenarios very well, unless you lie about living in Antarctica, that is … sorry, scientists in Antarctica reading this blog posting … all 237 of you.
During this “earlier than today exploration of WebEx” session the necessary software installs just happened for this MacBook Pro Mac OS X laptop as if we were shelling peas … it’s always good to have some handy when installing any software. So we won’t show you this unless we deem it essential at a later date. You can perhaps do as I did, and ask a real WebEx user invite you to a meeting, to set yourself up. In fact, today’s session meeting creation time you may notice is well in the past from that earlier introductory learning session Maree and I had, and you can bring back up that old email, and resurrect that meeting again and again, if you like … am not sure if there is an expiry date on this too, like with server stored WebEx prerecordings.
So also rest assured, WebEx handles …
video via webcam on your device
audio via microphone on your device (“Use Computer”) or via a phone line
the synchronization of the two above
mobile devices
Did you know?
A .ics extension file, as you can see being used as an email attachment file extension in is, as explained in this link‘s sublink …
ICS is a global format for calendar files widely being utilized by various calendar and email programs including Google Calendar, Apple iCal, and Microsoft Outlook. These files enable users to share and publish information directly from their calendars over email or via uploading it to the world wide web.
… as helping interface meetings to online calendar appointments. Cute, huh?!
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
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.
… being that, within the purview of the RJM Programming domain these two represent two different websites and so use their own different custom error document or custom error page Apache web server arrangements.
Today, we consider RJM Programming domain’s Apache web server’s Landing Page (et al) website “Not Found” (ie. HTTP error code 404) scenario.
And in those terms, we can illustrate what we mean below, by you leaving checked the checkbox ignoring the # hashtagging (ie. opening up the possibility of both 404 errors and introducing 414 (request too long) errors we can’t do much about (except to suggest positioning # hashtagging after your established RJM Programming website URL and ahead of the data URI may help) and likely when using data URI incarnations copied to the web browser address bar URL and not including the # hashtagging) regarding some web browser address bar URL “imaginings” a user may append (probably via copy and paste (perhaps via a Google image search’s right click menu’s Copy Image Address option, most likely after a # (bearing in mind the cache may annoy without a new ? argument on previously used web browser tabs) methodologies) onto established RJM Programming website URLs probably there already to the left of the web browser‘s relevant tab’s address bar …
Non-Hashtag Tests … optional or
Hashtag
Non-Hashtag
From where, for the RJM Programming’s Landing Page website’s purposes, is the logic for these HTTP error code 404 redirections, springing?
The 404.shtml custom error page file is doing this job, and has new Javascript code snippets as per …
var locwo=null;
var jnuidea='';
var usuff=(document.URL.indexOf('/ITblog') != -1 ? 'ITblog/' : '');
var plusd='+';
if (('' + decodeURIComponent(('' + document.URL))).indexOf('data:') != -1 && ('' + ('' + document.URL)).indexOf('%20') != -1) { plusd=' '; }
Landing Page “hashtag containing” data URI and absolute URL redirection logics … helps, as a one to one block of Javascript code usefulness to …
WordPress Blog “hashtag containing” data URI and absolute URL redirection logics
… being that, within the purview of the RJM Programming domain these two represent two different websites and so use their own different custom error document or custom error page Apache web server arrangements.
Our logic here involves hashtag concerns, and hashtag data does not even register at the serverside end of the “delivery of online HTML webpage display” workflow, and so is a Javascript, purely clientside part of the scope of work. So, regarding a PHP written WordPress Blog, what we need for interventional purposes here is to locate where the document.body element is coded for. Luckily, we do a lot of tweaks to the PHP code where the “onload” event is defined in good ol’ header.php WordPress TwentyTen theme codex PHP file. And we pick the first of our document.body “onload” event “inhouse functions” called chkinodo to plug the slightly modified from yesterday …
… mainly regarding working the logic for svg+xml utf8 data URI where the blank character encoding %20 can come into play …
… and we output raw SVG HTML in this webpage display mode of application, allowing address bar RJM Programming’s Landing Page intended hashtag URLs such as …
… “to also press towards” … chortle, chortle … a happier place. More aspects to redirection ideas regarding this will be happening over a couple more days.
Have you ever noticed how good humans are at one-to-one mapping? Okay, okay, K9s too … sheeeeessssshhhhh!
This thinking suits substitutional programmatical thinking. In other words you’re presented with something to tweak … perhaps in private … and one of the favourite ways we can think of to quickly get somewhere changing it, hopefully for the better, could be to …
recognize a hard-coding or phrase or word … that in an initial draft is kind of static by nature … and go ahead and code for it to be substituted or mapped or you might want to say “redirected” to …
some dynamic HTML and Javascript code, such as a dropdown (ie. select) element, for instance
data URI (possibly media) generic definition of what is otherwise some web server (possibly media) file’s contents, in amongst the Landing Page hashtag URL component … or …
absolute URL, in amongst the Landing Page hashtag URL component
… we’re starting down this “redirection path”, today, adjusting RJM Programming’s Landing Page PHP code, as per …
… email body media attachment logics “less than optimal” … putting it kindly. Today, though, for your shorter audio or video media instances, within that email body content we can offer a new hashtagging URL paradigm that goes …
… style of link now created, and in the case of macOS, perhaps automated, into the email body, not as an attachment, but as a link the email recipient can click to see that media content display … for your smaller media content usages.
The keen eyed will see that recording_ideas.php has gone through extensive changes to “shapen up or fly right” regarding other ambitions we have for it, which Luna has told me is …
Here in December, 2025 we have lost touch with the original media_via_pb.php code from back in November 2018 and we are in the process of repiecing a similar but different set of logics in a similar vein. Please stay tuned for interplay with macOS pbcopy and pbpaste and Windows clip commands or some other methodology involvement not existing in this reconstituted first draft.
… as anything that can explain the overnight disappearances of code you’ve worked on, and is not “hacking activity”, tends to be “a relief to one’s system” and “double the relief to a set of twins” (as Nala wanted to point out).
But, it is only occasionally you get this type of problem happening and the scheduled ways of crontab are just so useful, we’re proceeding with the file tidying ways of crontab, but shoring up the wildcarding we apply so that the entry …
45 4 * * * ksh -c 'for i in `find /home/rjmprogr/ -name "media_*" -cmin +720`; do rm -f $i; done'
… becomes …
45 4 * * * ksh -c 'for i in `find /home/rjmprogr/ -name "media_*[0-9]*" -cmin +720`; do rm -f $i; done'
… to solve our current project’s constant need for resurrection surrounding it’s media_via_pb.* naming ways.
<?php
function andthenlater($andmore) {
global $incopy, $pathbit, $basebit, $mampfilelist, $mampfs;
$thingos=[''];
$afters='';
$rel='x';
if (PHP_OS == 'Darwin') {
if (strlen($andmore) > 1) {
$thingos=explode(',', $andmore);
}
for ($iwe=0; $iwe<sizeof($thingos); $iwe++) {
$thingo=$thingos[$iwe];
$pbit='';
if (basename($thingo) == $thingo && $pathbit != '') {
$pbit=$pathbit;
}
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo);
if (strlen($thingo) > 1) {
if (strpos(strtolower($thingo), '.png') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class PNGf»)'");
} else if (strpos(strtolower($thingo), '.jp') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class JPEG»)'");
} else if (strpos(strtolower($thingo), '.gif') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class GIF»)'");
} else {
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo . "\n" . "osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class optd»)'");
exec("echo " . $pbit . $thingo . " | pbcopy");
$afters=("osascript -e 'tell application \"Finder\"
set thesong to \"" . $pbit . $thingo . "\" as string
end tell
tell application \"QuickTime Player\"
activate
open thesong
play document 1
end tell'");
}
sleep(5);
}
// Thanks to https://www.google.com/search?q=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&rlz=1C5OZZY_en&oq=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTQ3NDg4ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
$retis=shell_exec("osascript -e 'tell application \"System Events\"
# Get the name of the current application (which is likely the Script Editor or Automator)
set currentApp to name of current application
# Check if the current app is one of the script runners and hide it to allow the target app to become frontmost
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to false
# Wait a moment for the target app to become active
delay 0.1
end if
# Simulate the Command+V keystroke in the now frontmost application
keystroke \"v\" using command down
# (Optional) Unhide the script application afterward
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to true
end if
end tell
'");
if ($afters != '') { sleep(5); exec($afters); $afters=''; }
}
if (strlen($andmore) > 1 && $incopy != '') {
return exec($incopy);
}
}
if (strlen($andmore) <= 1 && sizeof($mampfs) > 1 && $basebit != '' && $rel != '') {
$newc='';
for ($ijk=0; $ijk<sizeof($mampfs); $ijk++) {
if (strpos(explode('##',$mampfs[$ijk])[0], $basebit) === false) {
if ($newc == '') {
$newc=explode('##',$mampfs[$ijk])[0];
} else {
$newc=explode('##',$mampfs[$ijk])[0] . ',' . $newc;
}
}
}
sleep(5);
//file_put_contents('x.x', $pathbit . "\n" . $basebit . "\n" . $newc);
andthenlater($newc);
}
return '';
}
function andthenlater($andmore) {
global $incopy, $pathbit, $basebit, $mampfilelist, $mampfs;
$thingos=[''];
$rel='x';
if (PHP_OS == 'Darwin') {
if (strlen($andmore) > 1) {
$thingos=explode(',', $andmore);
}
for ($iwe=0; $iwe<sizeof($thingos); $iwe++) {
$thingo=$thingos[$iwe];
$pbit='';
if (basename($thingo) == $thingo && $pathbit != '') {
$pbit=$pathbit;
}
//file_put_contents('x.xx', $pathbit . "\n" . $basebit . "\n" . $thingo);
if (strlen($thingo) > 1) {
if (strpos(strtolower($thingo), '.png') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class PNGf»)'");
} else if (strpos(strtolower($thingo), '.jp') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class JPEG»)'");
} else if (strpos(strtolower($thingo), '.gif') !== false) {
exec("osascript -e 'tell application \"Finder\" to set the clipboard to (read (POSIX file \"" . $pbit . $thingo . "\") as «class GIF»)'");
}
sleep(5);
}
// Thanks to https://www.google.com/search?q=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&rlz=1C5OZZY_en&oq=macos+osascript+paste+from+clipboard+where+the+cursor+is+in+whatever+window&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTQ3NDg4ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
$retis=shell_exec("osascript -e 'tell application \"System Events\"
# Get the name of the current application (which is likely the Script Editor or Automator)
set currentApp to name of current application
# Check if the current app is one of the script runners and hide it to allow the target app to become frontmost
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to false
# Wait a moment for the target app to become active
delay 0.1
end if
# Simulate the Command+V keystroke in the now frontmost application
keystroke \"v\" using command down
# (Optional) Unhide the script application afterward
if currentApp is in {\"Script Editor\", \"Automator\", \"Script Debugger\"} then
set visible of process currentApp to true
end if
end tell
'");
}
if (strlen($andmore) > 1 && $incopy != '') {
return exec($incopy);
}
}
if (strlen($andmore) <= 1 && sizeof($mampfs) > 1 && $basebit != '' && $rel != '') {
$newc='';
for ($ijk=0; $ijk<sizeof($mampfs); $ijk++) {
if (strpos(explode('##',$mampfs[$ijk])[0], $basebit) === false) {
if ($newc == '') {
$newc=explode('##',$mampfs[$ijk])[0];
} else {
$newc=explode('##',$mampfs[$ijk])[0] . ',' . $newc;
}
}
}
sleep(5);
//file_put_contents('x.x', $pathbit . "\n" . $basebit . "\n" . $newc);
andthenlater($newc);
}
return '';
}
to a local web server (such as MAMP) underlying operating system environments, to the point that an email attachment piece of automation can be worked from a downloadedchangedmedia_via_pb.phpmedia_via_pb.php web application …
so that up at the public domain webpage when local media browsing …
with email address defined …
the “Intranet feeling” window.open(MAMP-get-style-url.php, iframe-name, ‘top=?,width=?,left=?,height=?’) can work it’s magic in amongst, in order …
public domain does window.open as above
public domain webpage does “a” mailto: link click to open email client
MAMP-get-style-url.php in macOS or Windows copies image into Clipboard as graphics
if macOS can go on to paste that Clipboard image into that email body as an attachment
… but only if, as we’ve verified again today and only for sure on macOS Google Chrome web browser so far, otherwise CORS restrictions come into it, MAMP-get-style-url.php only performs PHP stuff and does not try to write out a webpage of any sort. We can arrange it that way in this project but can easily imagine other projects where this can not be wrangled using a public domain webpage incarnation this “Intranet feeling” way.
Here in December, 2025 we have lost touch with the original media_via_pb.php code from back in November 2018 and we are in the process of repiecing a similar but different set of logics in a similar vein. Please stay tuned for interplay with macOS pbcopy and pbpaste and Windows clip commands or some other methodology involvement not existing in this reconstituted first draft.
Bit sad, but a new opportunity too?!
And so, with that opportunity, we can apply some recent work knowledge, especially regarding a local web server (such as MAMP) underlying operating system environments, to the point that an email attachment piece of automation can be worked from a downloadablechangedmedia_via_pb.phpmedia_via_pb.php web application.
… command to “provide copying and pasting to the pasteboard (the Clipboard) from command line” (quoting from “man pbcopy”).
And where there is a “copy” there’s a … anyone, anyone? … yes, Smithers, a “paste”. And so, new to today’s work, we start combining that pbpaste with the brilliant passthru …
… to position at the place to “plonk” media data into a webpage, often, and let it display.
You’ll notice in today’s PHP (only really suits localhost local web server hosting code, such as MAMP) “Media via pbcopy and pbpaste” web application’s http://localhost:8888/media_via_pb.php code that we code an exec style …
Mac OS X Clipboard to File to Datauri Primer Tutorial
Today’s tutorial is a lot about the image two below the one above. It looks pretty much like any other image on this web page, I’m sure, at first glance, you’d say?! But the fact is, this image does not involve a web server image file of any sort, though its storage does involve a web server database, because all these blog postings exist in a table of a MySql database that WordPress uses to store information. Has this let you down? Hope not, because this is still a pretty big concept, getting bigger and bigger as time goes on, and spurred on by the mobile device revolution, and that is the rise and rise of the use of datauri based media. Let’s see what Wikipedia says …
The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple HTTP requests.[1] Data URIs are sometimes referred to incorrectly as “data URLs”.[citation needed] As of 2015, data URIs are fully supported by most major browsers, and partially supported in Internet Explorer and Microsoft Edge.[2]
With this image, two down, we didn’t feel like plonking this as a file on our web server, basically because it was that bit smaller than the usual, and so the basic steps of how we constructed it was …
we’d Prnt-Scrn buttoned this part of a screen snapshot on Windows 10 … and then …
we emailed it to ourselves, but logged onto our MacBook Pro laptop … and so we …
downloaded that email attachment into the Preview desktop application … where we …
drew a rectangle around the dialog of interest and used Edit -> Copy to get it into a Mac OS X clipboard … and though we didn’t do this right here and now, we did do before the final step, copy the clipboard into an image file called huh.png (via File -> Save As…) via Paintbrush desktop application’s File -> New from clipboard option … and so then …
looked up Google in this way … and the second link in the list got me to …
see some incredibly useful Mac OS X Terminal application command line usage … to aim for … and we adapted to, namely … openssl base64 < ./huh.png | tr -d '\n' | pbcopy
… which got into a Mac OS X clipboard the suffix (called [suffix] that gets appended to the prefix [prefix] we’ll talk about in the next step) of an HTML image element of the form <img title=’Datauri image’ src=’[prefix][suffix]‘></img> … leaving us to work out for the png image type we desired the prefix [prefix] could be …
found a typical datauri prefix for a base64 encode png image at this really useful link so that prefix [prefix] above could be data:image/png;base64, … the missing piece of being able to HTML code the datauri image two below the one above … and not requiring a web server image file to exist, as the image data exists in this blog posting … brought to you by the wonders of CMS (Content Management Systems).
Hope this interests you, and perhaps that you try out one of these datauri HTML img elements for yourself.
In the area of robotics and artificial intelligence, perhaps the best known concept to we “mere mortals” is “voice recognition”. Perhaps because research into it goes back to 1932, before the Second World War … and 66 years before the “Worm Farm Incident of Simmons Street Disaster” … but we digress … and no … “I’m not ready to open up about this at this delicate stage of my life, yet, Brad.”.
Voice recognition has come a long way from those earliest endeavours when the speech recognition relied on training software for an individual voice. This became apparent to me trying out Cortana in Windows 10. Once working, it didn’t seem to matter who in our house asked the same question of Cortana, the speech recognition software recognized and translated the speech into the same text for all of us. Actually, Microsoft describes Cortana this way …
Cortana is your clever new personal assistant.
Cortana will help you find things on your PC, manage your calendar, track packages, find files, chat with you, and tell jokes. The more you use Cortana, the more personalized your experience will be.
To get started, type a question in the search box on the taskbar. Or select the microphone icon and talk to Cortana. (Typing works for all types of PCs, but you need a mic to talk.)
… and I see what they mean by this, because you can work Cortana without the voice recognition part, if you like, or if you have the urge to run for the nearest cupboard before being caught talking into a computer (microphone). Perhaps Cortana should have a special “Darkroom Edition” for people who …
have the urge to run for the nearest cupboard before being caught talking into a computer (microphone) … and who …
have a hobby developing and printing photographs
Anyway, we agree with Microsoft that Cortana is clever, and it’s nice for us to find another use for the microphone (brand called MXL Tempo) we used with WebEx work we talked about with WebEx Presentation with Microphone Tutorial below.
There is not much to setting up Cortana, except, perhaps, for the microphone bit, which we’ll talk more about later. Cortana’s “personal assistant” and interface down next to the Windows icon at the bottom left of the screen guides you well through what you have to do.
We got stuck a bit, regarding setting up the microphone, with a cycle of it presenting this voice recognition test always resulting in a message wondering whether we had the microphone set to “mute on”, which wasn’t the case. But what was the case, and remedied this problem was to use a USB 2 port rather than a USB 3 port … in case this happens to you.
Other than that, Cortana is pretty cute, and could be a good enough reason on its own to upgrade to Windows 10 from Windows 7, Windows 8.1, Windows Phone 8.1 or Windows 9 operating systems before Friday, 29th July 2016 which is the cut off day for free upgrades. Our experience of the upgrade was talked about at Windows 10 Upgrade Primer Tutorial (and backups were discussed at Windows File History Backup Primer Tutorial).
We’ve been doing some more WebEx (by Cisco) lately, and realised, at least with using a MacBook Pro laptop, we needed to invest in a microphone, to be heard, as the inbuilt microphone systems were not up to it.
We opted for a USB connected microphone brand called MXL Tempo, sold here in Australia, and have found it to be good, especially mounted on the stand provided … well, no complaints, anyway?! Where it has a 1/8″ (3.5mm) Headphone Jack we plugged in our own speakers, though you could use headphones here as well.
Of course we’ll also be constructing a garage, and buying a guitar, and calling on “tree fellers”karaoke backing track of Peter, Paul and Mary to complete the picture of this week’s project … getting the new microphone to make breakfast in the morning before you even knew you needed breakfast get me on The Voices.
In the WebEx “Audio Connection” menu via “Call Using Computer” option have both input and output audio be handled by “USB audio CODEC” (if they are options … if not, there is a hardware (perhaps configuration) problem with your audio and microphone connection) as you can see at today’s tutorial picture. So long as you succeed and have the USB connected, the audio connection will default to this arrangement for the next time. Cute, huh?!
To make it permanent that the MXL Tempo microphone arrangement is the default device for recordings …
click on System Preferences off the Apple menu
click the Sound option
click the Output tab
pick USB audio CODEC
if you intend using speakers or headphones connected off this microphone from its 1/8″ (3.5mm) Headphone Jack, click the Input tab
… regarding video conferencing products we’ve tried at this blog.
Have to say, WebEx is great, even with respect to the “wide eyed and bushy tailed” reaction “this little black duck” has to all these networky communicaty ideas on the net (at least we spelt “net” correctly).
Have to thank my wife, Maree, for her expertise and the facilities her company, Thomson Reuters, supplies for the serving of WebEx recordings … thanks everyone. Have been assured they are periodically deleted, and my lame impersonations of the old “ducks on the wall” can rest in peace shortly.
And so, we have a slideshow starting with a WebEx email link to join a meeting, and we pan down the email to show you other WebEx functionalities, such as adding a Calendar reference to the meeting time, and though we haven’t shown you detail here, rest assured it handles timezone scenarios very well, unless you lie about living in Antarctica, that is … sorry, scientists in Antarctica reading this blog posting … all 237 of you.
During this “earlier than today exploration of WebEx” session the necessary software installs just happened for this MacBook Pro Mac OS X laptop as if we were shelling peas … it’s always good to have some handy when installing any software. So we won’t show you this unless we deem it essential at a later date. You can perhaps do as I did, and ask a real WebEx user invite you to a meeting, to set yourself up. In fact, today’s session meeting creation time you may notice is well in the past from that earlier introductory learning session Maree and I had, and you can bring back up that old email, and resurrect that meeting again and again, if you like … am not sure if there is an expiry date on this too, like with server stored WebEx prerecordings.
So also rest assured, WebEx handles …
video via webcam on your device
audio via microphone on your device (“Use Computer”) or via a phone line
the synchronization of the two above
mobile devices
Did you know?
A .ics extension file, as you can see being used as an email attachment file extension in is, as explained in this link‘s sublink …
ICS is a global format for calendar files widely being utilized by various calendar and email programs including Google Calendar, Apple iCal, and Microsoft Outlook. These files enable users to share and publish information directly from their calendars over email or via uploading it to the world wide web.
… as helping interface meetings to online calendar appointments. Cute, huh?!
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
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.
always resulting in a message wondering whether we had the microphone set to “mute on”, which wasn’t the case. But what was the case, and remedied this problem was to use a 
is, as explained in 
