The recent Knockout Dice Game Emoji Tutorial got us a little peeved. We do like fairness, even for your humble web application, and when The Knockout Dice Game got an “emoji makeover” a few days ago … well … we’re telling you … around here there were stares and whispers … or was that 🖕👇stairs and wise purrs.
… all demanded “emoji ⚖ equality” … and who are we to argue?!
Each demanded nuanced modification differences, but we were glad regarding the “code cloning” that got us arriving at a fairly consistent starting point even before the Knockout Dice Game changes of Knockout Dice Game Emoji Tutorial and the day before that. Cloning should take place whenever you as the programmer have achieved functioning milestones.
And then we come to …
If you (Dice Game web applications) all want consistency you’ll want to easily see that grouping reflected in a peer to peer dropdown navigation arrangement?
Rhetorical question alert!!
Yes, dropdown (ie. select) elements are great for these peer to peer concept ideas, but the default CSS styling grates here. So how can a select element look more like an h1 element? Glad we asked! Have a look at this …
Are you looking for a cross-browser means of right justifying the option text of a select (ie. dropdown) element? This very useful link, thanks, got us to try, successfully …
<select dir="rtl" style="text-align:right;" onchange="location.href='/HTMLCSS/' + this.value + '_dice_game.html?rand=' + Math.floor(Math.random() * 19878654);" id=gamemode><option value=knockout>Knockout</option><option value=runforit>Run for It 🏃‍♀️</option><option value=threeormore>Three or More 🕒<sup>➕➕</option></select>
To our mind, the invention of emojis has been a really positive part of the online world. Maybe we’re that extra bit fond of them because it can go somewhere on the way to …
covering up image media deficiencies (cough, cough) with this text/image hybrid alternative where the artistry has already been done, just asking for your coding intervention to use (where our favourite emoji coding access means, (using example of “dice” here) is to …
For the first time we can remember we needed to get ahead of the curve picking a suitable CSS font-family property for all text with this work because we found that some of the dice guise emojis were really new and not found in all the font families out there, so …
… solved some issues for us, here. And in researching totally CSS ways to style via content, again, we got a leave pass to not look again. CSS (style) and HTML (substance) have been separated by the W3C powers that be, for a reason, and we see that CSS selectors based on “content starts with” will never happen, though you can probably use jQuery library calls to achieve this.
Okay, with that in mind, we abandoned a CSS only “cute” way to display die values either side of a numerical dice roll total in the header table cell which updates dynamically, instead using this Javascript …
Around here, we’re often moving on in a project via …
the changing of hardcodings into “dropdown” select elements (especially within h1 header elements) … but today, to move on, we arrange for …
the nested insertion of a checkbox (initially checked) within an h1 header element
… which for the first time we can remember, we adjust “opacity aesthetics” to add a useful dynamic setting adjustment to the Knockout Dice Game created when we presented Knockout Dice Game Primer Tutorial some time ago now …
This “Winner Takes All” checkbox controlled mode of use defaults to being set (which is unusual for us, when we add a new form of methodology like this) because we discovered, revisiting this game, that “passivity” was, sort of, being rewarded and so we felt like we needed to add in the idea (and the concept of “No Winner” needed to be added), into the game, where it is really user participation encouraged here, to make the game interesting. Adding to that interest is that in a “Winner Takes All” mode of use, if a player can be the lone player to survive “Knockouts” they score a point for every roll of the two dice to get to this “lone winner” scenario.
The other issue we noticed were the right hand overflows of our tabulated dropdowns when a lot of players are asked for. We started rearranging content justifications (to now be left justified) so it did not matter if we reduced the (now a better Responsive Design friendly table cell percentage) widths of those dropdowns, so as to fit more fields into the webpage …
a dice game for 2 to 9 players … which you should establish, as necessary, straight up …
then rename any player names you don’t want to be the default Player1 up to Player9 values, again, making use of the contenteditable=”true” global HTML attribute and the HTML div element’s onchange event to achieve this
then in each round of competition the players choose a two dice roll value between 6 to 9 as the value they don’t want to see turn up, because if it does, they score nothing for that round of competition, else the players last not rejected when there is one or no players left, score a point in that round of competition … and …
the web application randomly throws the dice the necessary number of times to find winner(s) once the “Roll the Dice for Each Player” button is pressed
We’d like to thank the very useful webpage for ideas for how (for the most part) this Knockout Dice Game design, execution and rules should go.
And again, we’d welcome your try out of this new Knockout Dice Guessing Game, and please feel free to tell us what you think. Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the knockout_dice_game.html link.
In today’s new (up to two player) Dice Game, we use some of these to represent the numbers from 1 to 6 on the faces of the dice, similar to how you may have seen this happen with dice in various games you play, or hanging from your car’s front visor perhaps?
We’d welcome your try out of this Dice Guessing Game, and feel free to tell us what you think (or if its two of you “tell us what you think” … huh?!). Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the dice_game.html link. If you do, you’ll see the mildly interesting scoring system, that can be explained via the equation …
… allowing for the incorporation of this Javascript array initialization …
var probabilities=[0,0,1,2,3,4,5,6,5,4,3,2,1]; // score will be 7-guessValue
… that we were capable of working out ourselves but were reassured by the mathematics of this very useful link, thanks.
Another game thought unique to how we do things that has been introduced today, is that a user can change the default player names, those being Player1 and Player2 via an HTML div element utilizing the contenteditable=”true” global HTML attribute to make it look readable, but be also “quietly” editable.
a web browser screen resizes … the best place to intervene is, a little counterintuitively …
the document.body onresize event
… and rather than bothering trying to stay with the same webpage incarnation here, because the webpage content is static, all we need to do to cater for screen resizing here, in the code, is to …
… the delay being so the user can complete their final resizing so that the onresize event number of calls is minimized, in the changedviewport_poc.htm‘s live run link.
mobile “pinch” and “spread” gestures … no issues surprisingly … but there were with …
non-mobile “onresize” (of window) created issue of a misplaced yellow intersection HTML div
Fixing this bug was interesting. At first we thought that yesterday’s …
… we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6.
… should be arranged to be …
... we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in % specified) to represent the intersection of Polygon 5 and 6.
… but found that that (idea that “W% = (WpxValue * 100.0 / screen.width)”) was not really the silver bullet here.
What was better was to create a bit of a “rubber band” feel (for 1/20 of a second of flexibility) to onresize events as per …
// HTML
<body onload='dbih=document.body.innerHTML; divpolys();' onresize='if (!rdone) { rdone=true; setTimeout(reloadit, 50); divpolys(); } else { divpolys(); }'>
// Javascript
var rdone=false;
function reloadit() {
location.href=document.URL;
}
Viewport and CSS Calc Intersection Algorithm Tutorial
Do you eat “separatist style”? I used to, leaving the good stuff until last, until one day a grandparent kindly taught me the weakness with this system, quietly pinching the best stuff during the prelude period. The recent Viewport and CSS Calc Primer Tutorial has set us on a “separatist course” (which we hope does not lead to any tears at bedtime) …
initially talking just HTML and CSS (and no Javascript) with that first incarnation of the “Viewport and CSS Calc” proof of concept web application as above … and now today …
we add Javascript (that dynamically creates its own HTML and CSS via two conduit helpers … those being …
<body onload='divpolys();'>
function divpolys() {
var divsii;
divs=document.getElementsByTagName('div');
for (var ii=0; ii<divs.length; ii++) { divsii=divs[ii].getBoundingClientRect(); // the way CSS proportionate styling can become co-ordinate reality
// co-ordinate finding processing continues
}
// More work here
}
… helping us show, in another “proof of concept” that will get nuanced and genericized (we hope) to show “Two Convex Polygon Intersections”)
“Nuanced and genericized”? Yes, as our case is even simpler (because in our case the polygons are always rectangles) than the premise of our muse for today’s work, the wonderful algorithmic ideas for Intersection of Convex Polygons Algorithm (and also helped out by the great PNPOLY – Point Inclusion in Polygon Test) but we plump for an array of structures data arrangement (rather than classes) reminiscent of our book web application discussion at Javascript Array of Structures Primer Tutorial (and also see MySql Polygon Spatial Relations via Image Map Tutorial for GIS MySql Spatial functions regarding some of this same line of thinking). And so, being that simple, we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6.
… in a “proof of concept” web application we are using to explore ideas from the ground up … hello, wormies!
This is precise pixel placement 101, bringing us to a division of concept with webpage design …
Screen
Viewport
Width and Height Unitary Units
px
px
Width Proportionate Units
%
vx
Height Proportionate Units
%
vh
Width (or Left) Calc-friendly
%,px
%,px,100vx
Height (or Top) Calc-friendly
%,px
%,px,vh,100vh
… where our “proof of concept” findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport width: calc(100vx – 60px); CSS definition type of syntax that sounds great on paper does not appear to work in practice.
Regarding our Landing Page series of HTML/Javascript/CSS webpages here at RJM Programming, we’re streamlining our device width (Responsive Web Design) considerations of …
function widthfix() { //
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
document.getElementById('body_content').style.width='100%';
document.getElementById('nav_layer').style.width='100%';
document.getElementById('widget0').style.width='100%';
}
Now is …
function widthfix() { //
if (1 == 7 && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device
document.getElementById('body_content').style.width='100%';
document.getElementById('nav_layer').style.width='100%';
document.getElementById('widget0').style.width='100%';
}
Why?
viewport advice of W3School’s Responsive Web Design – The Viewport useful link, thanks … to keep it simple …
<meta name="viewport" content="width=device-width, initial-scale=1.0">
we were able to use Safari (web browser) Develop Menu “Responsive Design Mode” functionality (as per Safari Develop Menu Responsive Design Primer Tutorial) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts
Food for thought, we hope, for those chipping away at responsive design amalgamations!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
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.
2026 … yes …
World Cup … yes …
Winner will be … yes …
…
…
… A… n… t… a… r… c… t… i… c… a
…
…
Thaumeledone on the tools … yes … Caspar guest appearance in goals
Okay, that’s it! No more! Not even “finding an arrowed diagram for Octopus Anatomy that functioned like the one we used for our Carpentry web application” … though that’s remarkably prescient. No, it’s that … yes, Katherine and Richard … you’re right there … Songs, Lyrics, Music!
And so, further to yesterday’s Octopus Anatomy YouTube Tutorial, we’re adding access to the great Lyrics.com because, let’s face it, songs have been written for a lot of life’s ideas and thoughts in both …
floor_wall_roof_framing_members‘s changed codeCarpentry Game … also below …
function check(oa) {
var dorandd=false, dolyricsmatch=false;
//alert(document.getElementById('ui').width + ' ... ' + document.getElementById('ui').style.top + ' ... ' + document.getElementById('ui').style.left);
var rectarr=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
var words=oa.getAttribute("data-title").replace(",","").replace("(","").replace(")","").toLowerCase().split('_');
var minx=-1, miny=-1, maxx=-1, maxy=-1, jj=0;
var carray=oa.coords.split(',');
if (carray.length > 4) {
carray.push(carray[0]);
carray.push(carray[1]);
}
var considered=' ... (' + carray.length + ') ';
for (var ii=0; ii<carray.length; ii++) {
jj = eval(eval(ii - eval(ii % 2)) / 2);
considered+=' =' + jj + '= ';
if (carray.length == 4) {
if (ii == 0) {
minx=eval(carray[ii]);
maxx=eval(carray[ii]);
} else if (ii == 1) {
miny=eval(carray[ii]);
maxy=eval(carray[ii]);
} else if (ii == 2) {
if (eval(carray[ii]) < minx) minx=eval(carray[ii]);
if (eval(carray[ii]) > maxx) maxx=eval(carray[ii]);
} else {
if (eval(carray[ii]) < miny) miny=eval(carray[ii]);
if (eval(carray[ii]) > maxy) maxy=eval(carray[ii]);
}
} else if (eval(ii % 2) == 0 && (jj == 0 || jj == 1 || jj == eval(-1 + eval(carray.length / 2)) || jj == eval(-2 + eval(carray.length / 2)) || jj == eval(-3 + eval(carray.length / 2)))) {
if (ii == 0) {
considered+='' + carray[ii] + ',' + carray[eval(1 + ii)];
minx=eval(carray[ii]);
maxx=eval(carray[ii]);
miny=eval(carray[eval(1 + ii)]);
maxy=eval(carray[eval(1 + ii)]);
} else {
considered+=',' + carray[ii] + ',' + carray[eval(1 + ii)];
if (eval(carray[ii]) < minx) minx=eval(carray[ii]);
if (eval(carray[ii]) > maxx) maxx=eval(carray[ii]);
if (eval(carray[eval(1 + ii)]) < miny) miny=eval(carray[eval(1 + ii)]);
if (eval(carray[eval(1 + ii)]) > maxy) maxy=eval(carray[eval(1 + ii)]);
}
}
}
if (minx < 75) {
maxx=75;
} else if (minx < 460) {
minx=460;
}
if (maxx > eval(0 + document.getElementById('ui').width)) maxx = eval(0 + document.getElementById('ui').width);
if (maxy > eval(0 + document.getElementById('ui').height)) maxy = eval(0 + document.getElementById('ui').height);
//if (carray.length > 4) {
// alert(carray + ' ... ' + minx + ',' + miny + ',' + ',' + maxx + ',' + maxy + considered);
//}
//if (oa.title.indexOf('rimmer') != -1) alert(oa.title + ' ... ' + "<div style=\"border:1px solid red;position:absolute;z-index:9;background-repeat:no-repeat;background:URL('floor_wall_roof_framing_members.jpg');background-position:-" + minx + "px -" + miny + "px;left:" + minx + "px;top:" + miny + "px;width:" + eval(maxx - minx) + "px;height:" + eval(maxy - miny) + "px;display:block;\"></div>");
var ans=prompt("What did you point at? One blank character is the answer to give up and reveal answer, while two will offer YouTube based research material regarding the answer as well, three also does a Song Lyrics search. Suffix your answer with a space to do this research, two spaces for song lyrics, anyway, as well.", "");
goes++;
var prevscore=score;
if (ans != null) {
if (ans.indexOf(' ') == 0 && ans.trim() == '') {
dolyricsmatch=true;
dorandd=true;
ans=' ';
} else if (ans.indexOf(' ') == 0 && ans.trim() == '') {
dorandd=true;
ans=' ';
} else if (('!' + ans + '~').replace(/\ \ \~$/g,'') != ('!' + ans + '~') && ans.trim() != '') {
dolyricsmatch=true;
dorandd=true;
ans=ans.trim();
} else if (('!' + ans + '~').replace(/\ \~$/g,'') != ('!' + ans + '~') && ans.trim() != '') {
dorandd=true;
ans=ans.trim();
}
var bwords=ans.replace(",","").replace("(","").replace(")","").toLowerCase().split(' ');
for (var kk=0; kk<bwords.length; kk++) {
if (bwords[kk] != "") {
for (var mm=0; mm<words.length; mm++) {
if (words[mm] == bwords[kk]) score++;
}
}
}
}
if (prevscore != score || ans == " ") {
document.getElementById('overlays').innerHTML+="<div style=\"position:absolute;z-index:9;background-repeat:no-repeat;background:URL('floor_wall_roof_framing_members.jpg');background-position:-" + minx + "px -" + miny + "px;left:" + eval(0 + minx) + "px;top:" + eval(6 + miny) + "px;width:" + eval(maxx - minx) + "px;height:" + eval(maxy - miny) + "px;display:block;\"></div>";
if (window.self != window.parent) {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + " ... <br>" + oa.getAttribute("data-title").replace(/_/g,' ');
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + " ... " + oa.getAttribute("data-title").replace(/_/g,' ');
}
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
}
if (dorandd) {
tost=fromst.replace('Djibouti%2C%20Djibouti', encodeURIComponent('carpentry ' + oa.getAttribute("data-title").replace(/_/g,' ')));
document.getElementById('ifkar').src=ifkar.replace(fromst, tost);
document.getElementById('ifkar').style.display='block';
}
if (dolyricsmatch) {
if (lwo) {
if (!lwo.closed) {
lwo.close();
lwo=null;
}
}
lwo=window.open('//www.lyrics.com/lyrics/' + encodeURIComponent(oa.getAttribute("data-title").replace(/_/g,' ').toLowerCase()), '_blank', 'top=0,left=' + eval(-490 + screen.width) + ',width=490,height=520');
}
}
HTML iframe interfacing … to …<iframe style=display:none;width:100%;height:1200px; id=ifkar src='//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++Djibouti%2C%20Djibouti'></iframe>
What do Carpentry and Octopus Anatomy have in common? Many hands make light fittings get a bevelled edge? No, for us, finding an arrowed diagram for Octopus Anatomy that functioned like the one we used for our Carpentry web application of Floor Wall and Roof Framing Members Primer Tutorial below.
So much so, we kept the same Javascript logic and bits of the HTML other than the …
img element image … doh! … and …
underlying (image) map element … created in that similar (great, stupendous) mobilefish (thanks) method as for the Carpentry web application
started with the Carpentry HTML and Javascript code as a basis …
surfing the net found interesting octopus image via this Google image search finding this applicable image (from “Methodologies for studying finfish and shellfish biology” (ISBN: 978-93-82263-03-6) by Dineshbabu Ap), thanks, that we scanned and copied (and which we later change) into an image file on this MacBook Pro that was uploaded to …
visited mobilefish to create the new image (img element) and associated map element …
replaced the old Carpentry img and map with the new Octopus ones, pointing the img element src property at the correct image … that image now …
opened octopus image in Gimp and Gaussian Blurred out the octopus labels via …
(unit) tested code, and realized we’d forgotten to …
within the new octopus img and map code replace all ” title=” for ” data-title=” (to hide answers from the user) and ” href=” for ” data-href=” to stop navigation resetting the score
… to arrive at where we are at with today’s live run. We hope you try it, and learn a bit about Octopus Anatomy should that be your thing!
Floor Wall and Roof Framing Members Primer Tutorial
We all learn differently, but personally, I find it easier to learn things of a certain ilk and things that are new to me, when the study material is augmented by pictures in the form of a diagram or photograph or video, perhaps. I know very little about carpentry, and get lost in conversations talking about “joists” and “bearers”, so, today, we’ve purloined the great mobilefish image map (of HTML area elements) creator website and this very useful webpage (the source of the great diagram … thanks) to piece together today’s “click and learn” web application.
We use some overlay techniques with today’s game where the user tries to identify diagram labels Gaussian Blurred out (via GIMP) while a non-Gaussian-Blurred-out image is used (in an overlayed way) as the background (via background-position definitions) for HTML divs …
data attributes (eg. data-title) hide answers from the user to avoid making it all too easy, and internalize navigation (eg. data-href)
… revealed as above when the user gives up (via a space answer) or answers some words correctly in the Javascript prompt window used to prompt the user for “carpentry” terminology word matches, the score incrementing for each correct word match.
Now hope you don’t go around “nogging” in public with your newfound knowledge trying out today’s live run test of your carpentry and building knowledge. It is based on HTML and CSS and Javascript you could call floor_wall_roof_framing_members.html and download, as you wish.
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.
HTML iframe interfacing … to …<iframe style=display:none;width:100%;height:1200px; id=ifkar src='//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++Djibouti%2C%20Djibouti'></iframe>
What do Carpentry and Octopus Anatomy have in common? Many hands make light fittings get a bevelled edge? No, for us, finding an arrowed diagram for Octopus Anatomy that functioned like the one we used for our Carpentry web application of Floor Wall and Roof Framing Members Primer Tutorial below.
So much so, we kept the same Javascript logic and bits of the HTML other than the …
img element image … doh! … and …
underlying (image) map element … created in that similar (great, stupendous) mobilefish (thanks) method as for the Carpentry web application
started with the Carpentry HTML and Javascript code as a basis …
surfing the net found interesting octopus image via this Google image search finding this applicable image (from “Methodologies for studying finfish and shellfish biology” (ISBN: 978-93-82263-03-6) by Dineshbabu Ap), thanks, that we scanned and copied (and which we later change) into an image file on this MacBook Pro that was uploaded to …
visited mobilefish to create the new image (img element) and associated map element …
replaced the old Carpentry img and map with the new Octopus ones, pointing the img element src property at the correct image … that image now …
opened octopus image in Gimp and Gaussian Blurred out the octopus labels via …
(unit) tested code, and realized we’d forgotten to …
within the new octopus img and map code replace all ” title=” for ” data-title=” (to hide answers from the user) and ” href=” for ” data-href=” to stop navigation resetting the score
… to arrive at where we are at with today’s live run. We hope you try it, and learn a bit about Octopus Anatomy should that be your thing!
Floor Wall and Roof Framing Members Primer Tutorial
We all learn differently, but personally, I find it easier to learn things of a certain ilk and things that are new to me, when the study material is augmented by pictures in the form of a diagram or photograph or video, perhaps. I know very little about carpentry, and get lost in conversations talking about “joists” and “bearers”, so, today, we’ve purloined the great mobilefish image map (of HTML area elements) creator website and this very useful webpage (the source of the great diagram … thanks) to piece together today’s “click and learn” web application.
We use some overlay techniques with today’s game where the user tries to identify diagram labels Gaussian Blurred out (via GIMP) while a non-Gaussian-Blurred-out image is used (in an overlayed way) as the background (via background-position definitions) for HTML divs …
data attributes (eg. data-title) hide answers from the user to avoid making it all too easy, and internalize navigation (eg. data-href)
… revealed as above when the user gives up (via a space answer) or answers some words correctly in the Javascript prompt window used to prompt the user for “carpentry” terminology word matches, the score incrementing for each correct word match.
Now hope you don’t go around “nogging” in public with your newfound knowledge trying out today’s live run test of your carpentry and building knowledge. It is based on HTML and CSS and Javascript you could call floor_wall_roof_framing_members.html and download, as you wish.
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.
To our mind, the invention of emojis has been a really positive part of the online world. Maybe we’re that extra bit fond of them because it can go somewhere on the way to …
covering up image media deficiencies (cough, cough) with this text/image hybrid alternative where the artistry has already been done, just asking for your coding intervention to use (where our favourite emoji coding access means, (using example of “dice” here) is to …
For the first time we can remember we needed to get ahead of the curve picking a suitable CSS font-family property for all text with this work because we found that some of the dice guise emojis were really new and not found in all the font families out there, so …
… solved some issues for us, here. And in researching totally CSS ways to style via content, again, we got a leave pass to not look again. CSS (style) and HTML (substance) have been separated by the W3C powers that be, for a reason, and we see that CSS selectors based on “content starts with” will never happen, though you can probably use jQuery library calls to achieve this.
Okay, with that in mind, we abandoned a CSS only “cute” way to display die values either side of a numerical dice roll total in the header table cell which updates dynamically, instead using this Javascript …
Around here, we’re often moving on in a project via …
the changing of hardcodings into “dropdown” select elements (especially within h1 header elements) … but today, to move on, we arrange for …
the nested insertion of a checkbox (initially checked) within an h1 header element
… which for the first time we can remember, we adjust “opacity aesthetics” to add a useful dynamic setting adjustment to the Knockout Dice Game created when we presented Knockout Dice Game Primer Tutorial some time ago now …
This “Winner Takes All” checkbox controlled mode of use defaults to being set (which is unusual for us, when we add a new form of methodology like this) because we discovered, revisiting this game, that “passivity” was, sort of, being rewarded and so we felt like we needed to add in the idea (and the concept of “No Winner” needed to be added), into the game, where it is really user participation encouraged here, to make the game interesting. Adding to that interest is that in a “Winner Takes All” mode of use, if a player can be the lone player to survive “Knockouts” they score a point for every roll of the two dice to get to this “lone winner” scenario.
The other issue we noticed were the right hand overflows of our tabulated dropdowns when a lot of players are asked for. We started rearranging content justifications (to now be left justified) so it did not matter if we reduced the (now a better Responsive Design friendly table cell percentage) widths of those dropdowns, so as to fit more fields into the webpage …
a dice game for 2 to 9 players … which you should establish, as necessary, straight up …
then rename any player names you don’t want to be the default Player1 up to Player9 values, again, making use of the contenteditable=”true” global HTML attribute and the HTML div element’s onchange event to achieve this
then in each round of competition the players choose a two dice roll value between 6 to 9 as the value they don’t want to see turn up, because if it does, they score nothing for that round of competition, else the players last not rejected when there is one or no players left, score a point in that round of competition … and …
the web application randomly throws the dice the necessary number of times to find winner(s) once the “Roll the Dice for Each Player” button is pressed
We’d like to thank the very useful webpage for ideas for how (for the most part) this Knockout Dice Game design, execution and rules should go.
And again, we’d welcome your try out of this new Knockout Dice Guessing Game, and please feel free to tell us what you think. Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the knockout_dice_game.html link.
In today’s new (up to two player) Dice Game, we use some of these to represent the numbers from 1 to 6 on the faces of the dice, similar to how you may have seen this happen with dice in various games you play, or hanging from your car’s front visor perhaps?
We’d welcome your try out of this Dice Guessing Game, and feel free to tell us what you think (or if its two of you “tell us what you think” … huh?!). Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the dice_game.html link. If you do, you’ll see the mildly interesting scoring system, that can be explained via the equation …
… allowing for the incorporation of this Javascript array initialization …
var probabilities=[0,0,1,2,3,4,5,6,5,4,3,2,1]; // score will be 7-guessValue
… that we were capable of working out ourselves but were reassured by the mathematics of this very useful link, thanks.
Another game thought unique to how we do things that has been introduced today, is that a user can change the default player names, those being Player1 and Player2 via an HTML div element utilizing the contenteditable=”true” global HTML attribute to make it look readable, but be also “quietly” editable.
Around here, we’re often moving on in a project via …
the changing of hardcodings into “dropdown” select elements (especially within h1 header elements) … but today, to move on, we arrange for …
the nested insertion of a checkbox (initially checked) within an h1 header element
… which for the first time we can remember, we adjust “opacity aesthetics” to add a useful dynamic setting adjustment to the Knockout Dice Game created when we presented Knockout Dice Game Primer Tutorial some time ago now …
This “Winner Takes All” checkbox controlled mode of use defaults to being set (which is unusual for us, when we add a new form of methodology like this) because we discovered, revisiting this game, that “passivity” was, sort of, being rewarded and so we felt like we needed to add in the idea (and the concept of “No Winner” needed to be added), into the game, where it is really user participation encouraged here, to make the game interesting. Adding to that interest is that in a “Winner Takes All” mode of use, if a player can be the lone player to survive “Knockouts” they score a point for every roll of the two dice to get to this “lone winner” scenario.
The other issue we noticed were the right hand overflows of our tabulated dropdowns when a lot of players are asked for. We started rearranging content justifications (to now be left justified) so it did not matter if we reduced the (now a better Responsive Design friendly table cell percentage) widths of those dropdowns, so as to fit more fields into the webpage …
a dice game for 2 to 9 players … which you should establish, as necessary, straight up …
then rename any player names you don’t want to be the default Player1 up to Player9 values, again, making use of the contenteditable=”true” global HTML attribute and the HTML div element’s onchange event to achieve this
then in each round of competition the players choose a two dice roll value between 6 to 9 as the value they don’t want to see turn up, because if it does, they score nothing for that round of competition, else the players last not rejected when there is one or no players left, score a point in that round of competition … and …
the web application randomly throws the dice the necessary number of times to find winner(s) once the “Roll the Dice for Each Player” button is pressed
We’d like to thank the very useful webpage for ideas for how (for the most part) this Knockout Dice Game design, execution and rules should go.
And again, we’d welcome your try out of this new Knockout Dice Guessing Game, and please feel free to tell us what you think. Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the knockout_dice_game.html link.
In today’s new (up to two player) Dice Game, we use some of these to represent the numbers from 1 to 6 on the faces of the dice, similar to how you may have seen this happen with dice in various games you play, or hanging from your car’s front visor perhaps?
We’d welcome your try out of this Dice Guessing Game, and feel free to tell us what you think (or if its two of you “tell us what you think” … huh?!). Its HTML and Javascript and CSS underpinning its functionality can be perused by downloading the dice_game.html link. If you do, you’ll see the mildly interesting scoring system, that can be explained via the equation …
… allowing for the incorporation of this Javascript array initialization …
var probabilities=[0,0,1,2,3,4,5,6,5,4,3,2,1]; // score will be 7-guessValue
… that we were capable of working out ourselves but were reassured by the mathematics of this very useful link, thanks.
Another game thought unique to how we do things that has been introduced today, is that a user can change the default player names, those being Player1 and Player2 via an HTML div element utilizing the contenteditable=”true” global HTML attribute to make it look readable, but be also “quietly” editable.
… which we first opened none the wiser to this desktop image creator/editor new to us. We got creating images we’d never have been able to create, content wise, before, in a matter of minutes, and then we asked Google Is macOS Image Playground using AI and it all became clear …
This is a taste of AI in the image creation workspace.
So then we wondered if there was a set of rules, yet, about How to Indicate Content is Partially/Wholly AI Generated and realized that there is a way to go, yet, in this space, so that we can inform the reader that image content here contains AI generated image content, so …
Image based content in this blog posting is AI generated.
So, what do we think about macOS Image Playground?
We’re amazed, no two ways about it … very clever software.
What else?
We’ll be avoiding it in favour of pre-AI approaches until the dust settles, we’re thinking, for now, until real creatives’ work can be protected, hopefully getting someway there via some standards.
What do you think? Is this wildly different to “Photoshopping” images/screenshots (which we are very fond of, here)? Where’s the line?
… which is more apt as far as software goes? Well, and sorry to our regulars who have heard our theories so often, it goes in order of prominence …
where
when
… then the rest … ie. the reverse order of order way above, we reckon.
And so, being reminded on an upgrade of our macOS version to Big Sur version 11.6 the other day, opening the macOS Calendar desktop application version 11.0 (2811.5.1) (as we did earlier, with a previous version, with Calendar iCal Integration Itinerary Time Tutorial), that locations were honoured with an Apple Maps integration (should you permit Location Services to help you) along with news about Siri integration improving Calendar’s AI credentials, we were pretty much tickled pink to be combining the “when” with the “where” in the one desktop application.
A while back we left off our software integration of Calendar iCal Events into Google Chart Timeline Chart functionality (last visited with Calendar iCal Integration Itinerary Post Tutorial as shown below) with the quote …
… closing the circle, for now, with our Calendar Event software integrated Timelines.
… but want to retreat from that “finality”, because it’s been burning away within us as an annoyance, regarding this software integration. We think we can do better (with the integration). And we now think that, doing the research and development on this, that it is technically fairly easy to make that improvement, which goes …
We want to have the Google Chart Timeline Chart date resolution to match the Calendar iCal Event resolution, which is to the nearest second, rather than to the nearest day, as it used to be for our Google Chart Timeline Charts
… but we are going to hang back from asking for time hh24:mi:ss entries in the Google Chart Timeline Chart web application itself (when executing as the “parent” web application), because we can accept time data coming in from, say, the Itinerary web application, specifying the date and times to the nearest second (optionally). The reason for this is that to ask for the time everywhere can be offputting when there are so many Timeline scenarios where it is not really the “go” … think, “dates in history” for example.
What is in the “innards” of the Google Chart Timeline Chart web application controlling this “date” (data) resolution? It is controlled by calls to create Javascript Date objects via Javascript Date object constructor (calls), and up to now, they have been exclusively of the form …
var date_object = new Date(year, month, date);
… and this set us to exploring other Javascript Date object constructors, and, as you’d expect … but is a little non-intuitive because of the “Date” object naming … well that’s my excuse, anyway … it allows for (the overload) …
var date_object = new Date(year, month, date, hour, minute, second);
But that is not to say that just to see that this (Javascript functionality) is so, doesn’t always make it so (for Google Chart usage). However, it just so happens, it does, in this case, because there are no problems changing these Date constructor calls as far as the software interface to the Google Charts Timeline Chart API is concerned (we unit tested to confirm) … yayyyy!!
It does mean, though, that the code should handle either type of constructor, and this constructor is significant to our Google Chart select (onclick) event coding, as we examine these constructors from document.head.innerHTML to glean this information.
We may, next, but not for now, extend the Google Chart Timeline Chart web application to ask for times optionally, perhaps, via the clicking of an HTML input type=checkbox element, but for now we’re happy, because a user can do any of …
Google Chart Timeline Chart web application execution where it is the parent web application … date resolution: day
Itinerary (web application) that displays into the Google Chart Timeline Chart web application … date resolution: second
Date and Time Timeline with Calendar iCal Events (web application) that displays into the Google Chart Timeline Chart web application … date resolution: second
… and the last two are available as links from the first, so, we figure, the user can end up with what they were after, with all these choices of execution modes.
And so, what timezones happen here?
Google Chart Timeline Chart web applications use your local date (and time)
Calendar iCal Event destination use your local date (and time) too … but …
iCal interfacing messages most easily use “Z” form, that uses GMT dates (and time)
Itinerary (or Date and Time Timeline with Calendar iCal Events) web application allows for times in any timezone you designate
… and we have to map any non-local timezone usage to local time, especially with the last option above, to avoid confusion, and to make Calendar iCal Event destination application data match the content, and now, resolution, of its Google Chart Timeline Chart counterpart. Annoyance over!
The results of this work consisted of …
no changes to external Javascript you could call gettopost.js … called defer=’defer’ by …
our PHP “Itinerary”, and now, also, “Generic Timeline with Dates and Times” code you could call itinerary.php which changed a lot, and has the “Itinerary” type of live run and has the “Generic Timeline with Dates and Times (and Calendar Events)” type of live run
our PHP above calls the original Google Chart Timeline Chart (with its “onclick” select event functionality) you could call timeline_chart.php which changed a little to recognize Timelines that can Involve Times (and Calendar Events) as well as the usual Dates (and if you want to try its live run … then there it went?!)
We’re improving software integration on a few fronts today, extending the existing Itinerary software from Calendar iCal Integration Itinerary Tutorial as shown below, namely …
realizing that the only difference between an “Itinerary” and any “Timeline Involving Dates and Times (and Calendar Events)” is the descriptive bits about airports and such things, so why not use the same code, and allow for a call a certain way, to turn that “Itinerary” code into the code for that generic “Timeline Involving Dates and Times (and Calendar Events)” … which affected …
the Google Chart Timeline Chart needs to allow for these new functionalities … and so it does with code in between <head> and </head> …
setTimeout(itintobitsatend, 900);
function itintobitsatend() {
<?php
if (file_exists("itinerary.php")) {
echo "
if (document.getElementById('bitsatend').innerHTML.indexOf('Itinerary') == -1) {
document.getElementById('bitsatend').innerHTML+=' <a target=_blank title=Itinerary href=http://www.rjmprogramming.com.au/PHP/TimelineChart/itinerary.php>Itinerary with Calendar Events</a> <a target=_blank title=Times href=http://www.rjmprogramming.com.au/PHP/TimelineChart/itinerary.php?justaddtime=y>Timeline with Dates and Times and Calendar Events</a>';
}
";
}
?>
}
… as well as …
our software integration improvement we did that “proof of concept” preparation about yesterday with HTML Div Overlay Jigsaw Talents Primer Tutorial that is actually the means by which we cater for large amounts of “Itinerary” or “Generic Timeline with Dates and Times” data by
establishing a new external Javascript using HTML script property defer=’defer’ loaded after the local Javascript (that contains a “stub” function maybegettopost(instg, showit) { return instg; }) with two major functions … namely …
a page load setTimeout started function lookforjigsaw() that looks for an HTML div “jigsaw” arrangement like talked about yesterday, and if not, create the scenario, and leave the user with a 3 member array of HTML div id list for original content, iframe perhaps later overlays content, form to fire off iframe data as required content respectively, usage … and …
an external Javascript overloading version of function maybegettopost(instg, showit) that checks the length of the proposed get $_GET[] type parameter call (ie. using ? and & on address bar with long URLs), and if too long, convert that $_GET[] type parameter call data into $_POST[] type parameter call (remembering … doh … that the PHP (sorrrryyyy) receiver code should cater for this)
change the “Itinerary” PHP web application code to, from now on, when calling another web application in a (default) $_GET[] type parameter call way, filter that call data through function maybegettopost(instg, showit) … the showit is a boolean that is true if we end up navigating to that call data “URL” (ie. we “show it”)
Maybe you need to see the software additions and changes to see this for yourself, which consisted of …
new external Javascript you could call gettopost.js … called defer=’defer’ by …
our PHP “Itinerary”, and now, also, “Generic Timeline with Dates and Times” code you could call itinerary.php which changed a little, and now has the “Itinerary” type of live run and has the “Generic Timeline with Dates and Times (and Calendar Events)” type of live run
our PHP above calls the original Google Chart Timeline Chart (with its “onclick” select event functionality) you could call timeline_chart.php which changed a little to recognize Timelines that can Involve Times (and Calendar Events) as well as the usual Dates (and if you want to try its live run … then there it was?!)
… closing the circle, for now, with our Calendar Event software integrated Timelines. With such software integration, break complex integrations into bits you can unit test, and don’t move on until that unit test works. On the next level of unit testing, make sure you prove that previous unit tests still work.
After the recent Calendar iCal Integration Timeline Tutorial you may have associated a Timeline with a Calendar event, even when the End Time of that event is not a defined concept, but what about a software integration, again with a Google Chart, but this time with …
Google Chart Timeline Chart
… “shaped” into a web application suitable to enter Itinerary information and then be able to associate these Timeline Start and End Events with iCal Calendar Starts and Ends to events, created …
interactively, using the user’s default iCal application … and/or (in the case of “mobile” we should say “but rather”) via …
? This “Itinerary” concept has a huge amount of synergy with Calendar events, especially as a reminder service to people going on the trip (of the Itinerary) and/or to those affected by their absence, and so we found it a concrete type of web application to “start” out on. Yes, and there’s more! Tomorrow’s blog posting, you’ll have trouble believing, will have a connection, as a “proof of concept”, of where we go next with this project. So, after tomorrow’s explanation, we’ll probably see you back hereabouts in two days.
But, in the meantime, for starters, try the PHP source code of itinerary.php and its live run to see what we are getting at here. If you try it, you’ll see that the Emoji Overlay sizing is determined on a integration “parent” subject by integration “parent” subject basis.
After the recent Calendar iCal Integration WordPress Tutorial we found another integration candidate for our Calendar Event (creating) (component) “tool” web application that could be used in a variety of ways by other web applications. The second cab off the rank for this we decided should be (this) …
Google Chart Annotated Timeline Chart
… which should come as no surprise of a candidate for Calendar integration.
So a few things have come together for this work, those being …
Calendar iCal Integration WordPress Tutorial got us into an integration with PHP and fitting in with existing Javascript DOM issues … but only for discrete Emoji concepts … whereas …
code to respond to click events with regard to Emoji Overlays … but it also had within the code, and we tested it behind the scenes, the way it could …
work off HTML primed with the special class “emojioverlay” and primed with a Javascript DOM property that would yield Emoji discrete “characters” but with the “#” missed out … believe me, this “kludgy feeling” idea saves a lot of bother because when you go back and retrieve the innerHTML property of Emoji data you do not easily arrive back at …
&#[codepoint];
… and we work via our homegrown Javascript docgetclass function to be able to overlay Emojis via the usual …
… and this Javascript function …
function checkforclass() {
var buildup="";
var cfcs=docgetclass('emojioverlay','*');
for (var ij=0; ij<cfcs.length; ij++) {
if (cfcs[ij].innerHTML.replace(/&/g,'&').indexOf(';&') != -1) {
var emjs=cfcs[ij].innerHTML.replace(/&/g,'&').split("&");
buildup='';
cfcs[ij].style.opacity=eval(cfcs[ij].style.opacity / eval(-1 + emjs.length));
for (var iemjs=1; iemjs<emjs.length; iemjs++) {
buildup+='<span style="position:absolute;top:' + cfcs[ij].style.top + ';left:' + cfcs[ij].style.left + ';font-size:' + cfcs[ij].style.fontSize + ';opacity:' + cfcs[ij].style.opacity + ';z-index:' + cfcs[ij].style.zIndex + ';">&#' + emjs[iemjs].split(';')[0] + ';</span>';
}
cfcs[ij].innerHTML=buildup;
cfcs[ij].style.visibility='visible';
}
}
}
… that is the method used today to display an Emoji Overlay “character” to reflect, for a mobile application WebView scenario, of PHP mail created email usage for the Calendar Event creation functionality
Why not try a Google ChartAnnotatedTimeline Chartlive run to see what we are getting at, and while you’re there, try turning on a Calendar Event linked to one of the Timeline Events?
After yesterday’s Calendar iCal Integration Email Tutorial we hoped we had a Calendar Event (creating) (component) “tool” web application that could be used in a variety of ways by other web applications. The first cab off the rank for this we decided should be (this) …
WordPress Blog
… that being our TwentyTen themed local effort. One of the reasons we plumped for this is that it involves Publishing Dates and we can even get access to a Publishing Time and even a Publishing Timezone (though this last one is a “hardcoded” (piece of) knowledge, rather than it being gleaned by WordPress (data) in any way). So we had the choice of means of display of this new functionality …
adding to logic of the already hyperlinked Publishing Date data string
adding the Publishing Time as a new HTML a (hyper)link placed after the Publishing Date and linking to the Calendar functionality
adding relevant Emojis as new HTML a (hyper)links after the Publishing Date and linking to the Calendar functionality
… and we plumped for the last of these thoughts with our work today, as we liked the look of 📅 ➕ 📧 (that we tried out with our proof of concept p_o_f.html) to point at …
Create iCal Calendar Entry
Create and Email iCal Calendar Entry
Email (only) iCal Calendar Entry
… respectively. The “go” with the email functionalities could be that you share a tutorial link with a friend whose email you know and correspond with.
And so it behoves us to show you (good ol’) TwentyTen header.php (the usual suspect) changes to make this happen below, for your perusal and/or interest …
function docgetclass(inc, intag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(inc);
} else {
var ijl;
var anarris=[];
var huhs=document.getElementsByTagName(intag);
for (ijl=0; ijl<huhs.length; ijl++) {
if (huh[ijl].className.indexOf(inc) != -1) {
anarris.push(huhs[ijl]);
}
}
return anarris;
}
}
With yesterday’s Calendar iCal Integration Timezone Tutorial‘s emphasis on timezones, we turn our attention now, thinking of our web application as a “tool” and an integrated software product, to two interrelated issues …
What does the future hold as far as using this Calendar “tool” (web application)? In other words, what software and/or operating system platforms will use it and in what way.
How do we respond with this Calendar “tool” web application, fitting in with the requirements implicit in what the whole gammut of software and/or operating system platforms needing its services will need.
The most “asking” of “software and/or operating system platforms” that we can think of here is to cater for a mobile application WebView (please read here regarding Android WebView (using Eclipse or Android Studio IDEs) and iOS UIWebView (using Xcode IDE)) using the Calendar “tool” web application. Mobile platform WebViews can be programmed with Back and Forward navigation buttons, but that is not the ideal thing to rely on to get you out of a pickle that your web application may cause a mobile application WebView, if it navigates out to a place where there is no navigable return. The Back and Forward mobile application WebView buttons may work to return from a Calendar Event population event … honestly don’t know … but we’d prefer to cater for a new means by which such an “offshoot” feeling of navigation can be avoided. So in our new incarnation of the Calendar (event) web application we allow any/all of the following three modes of rjmprogramming-event.ics creation …
Create iCal Calendar Entry
Email (only) iCal Calendar Entry
Create and Email iCal Calendar Entry
… where the second of those above would leave you, within the web application running within a mobile application’s WebView, not moving off the webpage you are on, and thus not falling foul of any “offshoot” navigation weaknesses (to the process).
This new emailing functionality, again only in serverside PHP (and not in clientside Javascript), is relatively easy to arrange by rearranging many of the PHP header statements and feeding that through to the PHP mail function to shoot off the email, given that the user, ahead of time, has supplied you with that filled in email address, which we also attend to today.
Our web application has, in two separate areas of the code, made use of an HTML select element’s child option elements’ title properties to contain useful information for the web application’s workings. We’ll show you below some code to access the information stored from such an arrangement …
<select onchange='document.getElementById("subb").value=this.options[this.selectedIndex].title;' id='emode' name='emode'><option title='Create iCal Calendar Entry' value='Address'>Address</option><option title='Email (only) iCal Calendar Entry' value='To'>Email To (only)</option><option title='Create and Email iCal Calendar Entry' value='AndTo'>Email To (as well)</option></select>
… and you might wonder about the destination for the HTML option title property storage here? We use it to rename our HTML form’s input type=submit button that fires off the callback message. The “guises” of our one HTML input type=submit thus have a one to one correspondence with the values on that HTML select (dropdown) element, and with that list of “modes of output” we showed above. This is our approach to this today, but there are other approaches to such requirements regarding HTML form element HTML input type=submit element arrangements, and you may prefer to use multiple forms and/or multiple input type=submit buttons as we talk about with the series of blog posts finishing, so far, with HTML Multiple Form Multiple Submit Buttons Primer Tutorial.
Actually yesterday we prepared for another eventuality down the road of usefulness for this web application, but before we tell you about that, what we’d encourage you to do yourself should you put such a Calendar (event) web application into production is, interface your data flow not with $_POST[] (nor $_GET[] … damn, gave away the secret) but we’d prefer you to have it be that data in and out, as required, is stored in a secure database of some sort, for security purposes. But back to our (not very well kept) secret, yesterday, we prepared the ground for the web application (callback functionality) to be accessible via PHP $_GET[] arguments.
So, sorry not to have moved off “tool” (web application) work today, but it is very important to try to think of most/all eventualities you can imagine, ahead of the time when you get to the integration tasks the other way around, that is, the integration from the viewpoint of the software acting as “parent” or “co-operative peer” to your Calendar (event) “tool” web application.
The reshaped PHP code now additionally catering for email “messaging” functionality you could call ics_attachment.php, which changed in this way, able to be run with this live run link. We hope you try out the new email functionality yourself.
… but time is quite a complex scenario on Earth, when it comes to timezones for at least two reasons, one being a functional improvement, and one being to fix a bug, that being …
things like WebEx or Skype or GoTo Meeting are not tied down by geography and you may want Calendar functionality to reflect this, or you may also want it to cater for airplane departure and arrival times in various timezones around the world, and it would be best if the HTML form user entry phase catered for a user specifying a date and time not necessarily in either of their local timezone nor the GMT timezone (of the iCal “Z” property special interest) … is the functional improvement, whereas …
we had a bug, leaving off from yesterday’s work with timezones whose GMT offset involved half hour differences … and yes, that happens quite often … and the bug will occur as of yesterday’s code when you come to use those PHP DateTime object add and/or sub methods where the PT[offset]H argument has an [offset] involving a decimal point, so it behoves us to update that relevant PHP code snippet for you, again, below, regarding that (and remind … forgot yesterday … that $ts variable is a user HTML form passed date and time) …
$di="PT" . str_replace("-","",("" . $start_end_offsets[$thisi])) . "H";
$parsed_date = DateTime::createFromFormat('Ymd:His', $ts);
if (strpos(("" . $start_end_offsets[$thisi]), "-") !== false) {
if (strpos($di, ".") !== false) {
$parsed_date->sub(new DateInterval(explode(".",$di)[0] . "H"));
$parsed_date->sub(new DateInterval("PT30M"));
} else {
$parsed_date->sub(new DateInterval($di));
}
} else {
if (strpos($di, ".") !== false) {
$parsed_date->add(new DateInterval(explode(".",$di)[0] . "H"));
$parsed_date->add(new DateInterval("PT30M"));
} else {
$parsed_date->add(new DateInterval($di));
}
}
$outts = $parsed_date->format('Ymd:His');
Now allowing for the first idea above is not as involved as you may think, but only if you think serverside PHP, rather than think it will be easy with clientside Javascript. And what makes it a doddle, generally, are all those Open Source contributors to knowledge out there, and those great computing program language documenters out there exemplified in their brilliance with this totally useful link to the PHP timezone_identifiers_list and PHP DateTimeZone object method getOffset method links. So we allow the user to enter any of …
Local
GMT
Any of the half hour timezone numerical offset (indicators) from -24 to 24
Any of the timezone names as per those PHP methods above, with valid continental prefix names
… to define the start and end date and time parameters to express for their Calendar iCal Event that they define. Along the way we also add in dropdowns and HTML input type=number (year) elements to help for those not so keen on keyboard entry.
Guess you’d say we are still on the “tool” feel of the web application, but aim to move more on the “integration” front into the future.
Here is the renewed PHP code you could call ics_attachment.php, that changed in this way, able to be run with this live run link. We hope you try it out for yourself, especially as we’ve added some Google Chart Map Chart linking of the “when” and “where” of defined timezone thinking, via the use of PHP’s DateTimeZone object method getLocation, as you can see happening with today’s tutorial picture.
Do you remember us talking about the ICS extension file when we presented WebEx Prerecording Primer Tutorial as shown below? It is an integration input to working with iCal Calendar software.
So here we are at a “when” of life tutorial, which is always an interesting exercise in our book. And “book” could be the go for an application to use this type of functionality. When you “book” something, you’d often want to remind yourself and/or others of such an event. But for now, we are concentrating on making a “tool” type of web application that will suit future purposes.
We’ve built a web application around the useful logic presented in this great Git repository today, writing our code in PHP, because you are dealing with header manipulation here centering around …
… where the PHP variable $ical contents has been pieced together in response to a callback from an earlier HTML form execution of the same ics_attachment.php code where the necessary details are collected off the user.
If you try the live run you’ll probably glean that most of our concern centered around the date and time, regarding timezone use so that we …
in the HTML form execution we use client Javascript to glean the local timezone and local date and time to default the form appropriately … so that …
in the HTML form execution the user fills out Calendar Event start and end times with respect to local time and this, along with an offset to get these times back to UTC or (Greenwich Mean Time) are passed to the callback web application (which is the same web application) … so that …
the second callback execution constructs the iCal (for an rjmprogramming-event.ics attachment) with these UTC (or GMT) date and times in mind, whereby the “Z” timezone parameter fits the bill nicely … and when …
the user saves this rjmprogramming-event.ics event into the iCal Calendar application, where the event will be shown back relative to the local date and time
The date and time functions used to make this happen are …
Javascript’s Date object …
var dd=new Date();
var qw=eval((eval(dd.toTimeString().replace('-',' ').replace('+',' ').split(' ')[2]) - eval(dd.toTimeString().replace('-',' ').replace('+',' ').split(' ')[2] % 100)) / 100) + eval((0.0 + eval(dd.toTimeString().replace('-',' ').replace('+',' ').split(' ')[2] % 100)) / 60.0);
if (dd.toTimeString().indexOf('+') != -1) qw=-qw;
document.getElementById('tz').value=qw;
Javascript’s Date object’s toTimeString method (as shown above) to glean the local timezone offset, and its opposite
PHP’s DateTime object’s createFromFormat constructor method (as above) to create a DateTime object from the passed through user details
PHP’s DateInterval object
PHP’s DateTime object’s add and/or sub methods (as above) to create a DateTime object with a DateInterval offset to UTC (or GMT) (expressed in hours)
PHP’s DateInterval object’s format method (as above) to end up with a UTC (or GMT) expression of date and time to be placed into the rjmprogramming-event.ics iCal message
We’ll probably be revisiting with improvements soon, but we hope you try it for yourself.
… 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.
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.
is, as explained in 
