Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

 📅  

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

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

Pandoc on AlmaLinux Conversion Guises Tutorial

Pandoc on AlmaLinux Conversion Guises Tutorial

Pandoc on AlmaLinux Conversion Guises Tutorial

It pans out yesterday’s Pandoc on AlmaLinux Conversions Primer Tutorial revisit start to our …


Pandoc documemt conversion

… interfacing PHP web application involves more than a two day job. Today, before any PDF input or any new format thinking, we took an interest in the way a user may want to use the output formats …

  • html
  • txt … which Pandoc knows as plain

… as we found “talents” for each, those being …

  • html … is better when there are UTF-8 characters involved in the converted data
  • txt … which Pandoc knows as plain … is useful in a pair of guises
    1. with line feeds
    2. without line feeds

… depending on what use the user sees with this data, and because we want to restrict the user to internal use only data displays, we wanted to have a means by which these three “guises” were available to the user in an HTML div element (which is more flexible than a textarea element) to serve these purposes, as well as popup window HTML presentations where those UTF-8 characters can be more easily controlled.

The day gets quickly used up with issues like this, we find, regarding the changed macos_textutil_convert.php PHP web application you can also try below.


Previous relevant Pandoc on AlmaLinux Conversions Primer Tutorial is shown below.

Pandoc on AlmaLinux Conversions Primer Tutorial

Pandoc on AlmaLinux Conversions Primer Tutorial

Yesterday’s Word to HTML to CSV Delimitation Primer Tutorial offered a timely reminder that not only …

  • LibreOffice and Microsoft Office software applications offer exports of document formats to HTML … but, also, open source gives us …
  • (what is now possible to offer in a public sense because of the recent AlmaLinux installation (you can read more about at Pandoc Install and Public Face Tutorial) of) Pandoc command line application we can use to convert input document formats such as *.doc* and *.html and *.txt to others … and down the track …
  • tomorrow’s job can involve the interfacing of another inhouse “open source using” web application so that input *.pdf is possible here too

For security purposes we restrict where output files end up to …


/tmp/

… as you might surmise would be a wise move. The user ends up relying on the changed macos_textutil_convert.php PHP web application itself, that way, to display the outputted data (created via command line Pandoc commands performed on the RJM Programming AlmaLinux web server via PHP exec calls) for them.

In making this happen, exporting to PDF, we found that we additionally had to install to the AlmaLinux web server …


dnf install texlive

… the best “heads up” for this after reading the Pandoc error message being this useful webpage, thanks.


Previous relevant Word to HTML to CSV Delimitation Primer Tutorial is shown below.

Word to HTML to CSV Delimitation Primer Tutorial

Word to HTML to CSV Delimitation Primer Tutorial

The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …

  • Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
  • (any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
  • PHP … is very good at the delimiter processing bits that allow the programmer be useful …
  • converting … the data into other guises, the one that interested us being …
  • CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts

… and to do useful delimiter work in PHP you need to know, or suss out, “what happens”, or evidence of that … think hex dumps (where $dr is a PHP variable containing an HTML file record) …

<?php

echo bin2hex($dr) . "\n";
// ... gave, in our case, output such as ...
// c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020546f74616c207c20c2a020c2a02036302c30333220c2a020c2a020c2a03130302e3030

?>

And so we line up all the useful contributors …

  1. CP3O
  2. C2A0
  3. R2D2
  4. … … …

Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!

Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …


Non-breaking space

… scenario programmers of HTML will know can be those …


&nbsp;

… HTML entities in your webpage content. Well, now, at least to us, that all makes sense. But, for our job, that could be the tip of the “UTF-8 headache” situation! We know we’re only interested in ascii data characters for the conversion job we are trying to do. Is there a way to simplify this “middleperson” HTML data content? Well, this other useful link … got us to use …

<?php

$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);

?>

… helped us with …

  1. sanity
  2. simplification

… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …

  • input Word report … we are calling from_word_to_html.html … say …
  • containing spreadsheetable data …
  • we wanted to extract into …
  • individual CSV files … ready to …
  • open as useful spreadsheets … and perhaps onto some chart production …
  • processing via command line command …

    php dostuff.php

    … where that PHP is (very informally) …
  • dostuff.php

… in case these ideas interest you?!

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


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


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

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

Pandoc on AlmaLinux Conversions Primer Tutorial

Pandoc on AlmaLinux Conversions Primer Tutorial

Pandoc on AlmaLinux Conversions Primer Tutorial

Yesterday’s Word to HTML to CSV Delimitation Primer Tutorial offered a timely reminder that not only …

  • LibreOffice and Microsoft Office software applications offer exports of document formats to HTML … but, also, open source gives us …
  • (what is now possible to offer in a public sense because of the recent AlmaLinux installation (you can read more about at Pandoc Install and Public Face Tutorial) of) Pandoc command line application we can use to convert input document formats such as *.doc* and *.html and *.txt to others … and down the track …
  • tomorrow’s job can involve the interfacing of another inhouse “open source using” web application so that input *.pdf is possible here too

For security purposes we restrict where output files end up to …


/tmp/

… as you might surmise would be a wise move. The user ends up relying on the changed macos_textutil_convert.php PHP web application itself, that way, to display the outputted data (created via command line Pandoc commands performed on the RJM Programming AlmaLinux web server via PHP exec calls) for them.

In making this happen, exporting to PDF, we found that we additionally had to install to the AlmaLinux web server …


dnf install texlive

… the best “heads up” for this after reading the Pandoc error message being this useful webpage, thanks.


Previous relevant Word to HTML to CSV Delimitation Primer Tutorial is shown below.

Word to HTML to CSV Delimitation Primer Tutorial

Word to HTML to CSV Delimitation Primer Tutorial

The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …

  • Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
  • (any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
  • PHP … is very good at the delimiter processing bits that allow the programmer be useful …
  • converting … the data into other guises, the one that interested us being …
  • CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts

… and to do useful delimiter work in PHP you need to know, or suss out, “what happens”, or evidence of that … think hex dumps (where $dr is a PHP variable containing an HTML file record) …

<?php

echo bin2hex($dr) . "\n";
// ... gave, in our case, output such as ...
// c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020546f74616c207c20c2a020c2a02036302c30333220c2a020c2a020c2a03130302e3030

?>

And so we line up all the useful contributors …

  1. CP3O
  2. C2A0
  3. R2D2
  4. … … …

Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!

Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …


Non-breaking space

… scenario programmers of HTML will know can be those …


&nbsp;

… HTML entities in your webpage content. Well, now, at least to us, that all makes sense. But, for our job, that could be the tip of the “UTF-8 headache” situation! We know we’re only interested in ascii data characters for the conversion job we are trying to do. Is there a way to simplify this “middleperson” HTML data content? Well, this other useful link … got us to use …

<?php

$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);

?>

… helped us with …

  1. sanity
  2. simplification

… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …

  • input Word report … we are calling from_word_to_html.html … say …
  • containing spreadsheetable data …
  • we wanted to extract into …
  • individual CSV files … ready to …
  • open as useful spreadsheets … and perhaps onto some chart production …
  • processing via command line command …

    php dostuff.php

    … where that PHP is (very informally) …
  • dostuff.php

… in case these ideas interest you?!

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


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

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

Word to HTML to CSV Delimitation Primer Tutorial

Word to HTML to CSV Delimitation Primer Tutorial

Word to HTML to CSV Delimitation Primer Tutorial

The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …

  • Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
  • (any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
  • PHP … is very good at the delimiter processing bits that allow the programmer be useful …
  • converting … the data into other guises, the one that interested us being …
  • CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts

… and to do useful delimiter work in PHP you need to know, or suss out, “what happens”, or evidence of that … think hex dumps (where $dr is a PHP variable containing an HTML file record) …

<?php

echo bin2hex($dr) . "\n";
// ... gave, in our case, output such as ...
// c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020546f74616c207c20c2a020c2a02036302c30333220c2a020c2a020c2a03130302e3030

?>

And so we line up all the useful contributors …

  1. CP3O
  2. C2A0
  3. R2D2
  4. … … …

Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!

Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …


Non-breaking space

… scenario programmers of HTML will know can be those …


&nbsp;

… HTML entities in your webpage content. Well, now, at least to us, that all makes sense. But, for our job, that could be the tip of the “UTF-8 headache” situation! We know we’re only interested in ascii data characters for the conversion job we are trying to do. Is there a way to simplify this “middleperson” HTML data content? Well, this other useful link … got us to use …

<?php

$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);

?>

… helped us with …

  1. sanity
  2. simplification

… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …

  • input Word report … we are calling from_word_to_html.html … say …
  • containing spreadsheetable data …
  • we wanted to extract into …
  • individual CSV files … ready to …
  • open as useful spreadsheets … and perhaps onto some chart production …
  • processing via command line command …

    php dostuff.php

    … where that PHP is (very informally) …
  • dostuff.php

… in case these ideas interest you?!

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

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

WordPress Blog Comments URL Right Click Popup Check Tutorial

WordPress Blog Data URI in Post Plugin Tutorial

WordPress Blog Comments URL Right Click Popup Check Tutorial

In the past we have only mildly changed the administration section of our TwentyTen themed WordPress.org blog (you are currently reading) here at RJM Programming, and some of that involved new WordPress plugins, as you can read a bit about with WordPress Blog Data URI in Post Plugin Tutorial.

We maintain that blog within an “admin” part of the WordPress blog, and any changes we’d put in a “dessert island wish list” usually just absorb and move on, but we thought we’d improve on …


WordPress comment moderation

… by allowing myself (well, thanks awfully, I don’t really know what to say) the chance to …

  • on any comments webpage …
  • right click on “a” links whose domain is neither wordpress.org nor rjmprogramming.com.au and … in so doing …
  • be able to see a small popup window to the top right of the screen

… because, even if we wanted to argue with the great Akismet (we use and are very happy with around here) calling it spam, one of the steps we’d want to investigate would be to rule out a potential “broken link”, and this is a way to check for that.

Now, what we discovered marrying “a wish” with “an action plan” was that …

  • in parallel to the TwentyTen non-admin parts being manageable largely via changes to good ol’ header.php … we found …
  • the easy approach to changes in the admin parts could be achieved by changes to good new admin-header.php

… with our action plan moving to “deployment” via PHP (writes Javascript) admin-header.php modified code …

<?php

<script type="text/javascript">
document.body.className = document.body.className.replace('no-js','js');

setTimeout(function(){
if (document.body.innerHTML.indexOf('Comments</h1>') != -1) {
var als=document.getElementsByTagName('a');
for (var ials=0; ials<als.length; ials++) {
if (('' + als[ials].href).indexOf('http') == 0 && ('' + als[ials].href).replace('wordpress.org','rjmprogramming.com.au').indexOf('rjmprogramming.com.au') == -1) {
als[ials].oncontextmenu=function(evt){ window.open(evt.target.href, '_blank', 'left=' + eval(-500 + eval('' + screen.width)) + ',top=0,width=500,height=200'); };
}
}
}
}, 6000);

</script>

?>

Pretty straightforward really, and perhaps of interest to some WordPress.org comment moderators out there!


Previous relevant WordPress Blog Data URI in Post Plugin Tutorial is shown below.

WordPress Blog Data URI in Post Plugin Tutorial

WordPress Blog Data URI in Post Plugin Tutorial

Today, we’ve got another WordPress plugin to suit the TwentyTen themed blog you are reading, adding onto those described at WordPress Blog Collaborative Annotated Email FormData Post Tutorial.

This plugin suits the Content Editor creating the posts in the administration end of the WordPress TwentyTen themed blog, when they desire to add a data URI, rather than an absolute URL or relative URL (which would probably involve an upload). To use data URIs will make your blog posts independent of web server file arrangements, but if you are looking for this to save (web server) diskspace, this might be a mute point. The diskspace could still be used up by the MySql database storing the data URI in its base64 encoding.

What does our PHP plugin call on to do its thangthing?

  • plugin actions (similar to other plugins talked about in postings below) …
    1. add_action( ‘admin_notices’, ‘rjmprogramming_Data_URI_Helper’ ); // for Javascript adding HTML to webpage dynamically
    2. add_action( ‘admin_footer’, ‘rjmprogramming_data_uri_helper_css’ ); // for CSS
  • File API and its FileReader.readAsDataURL() method to browse for local device files
  • highlighted text (within the blog posting, where we rely on TwentyTen “id”s and “className”s to identify user intent) that gets substituted by the data URI if successful … when the user clicks/touches the newly introduced …
  • “Data URI Highlighted Text Replacer” a link

And so we have for you today rjmprogramming-data-uri-helper.php PHP source code that goes into this plugin should you want to write your own version for a theme that isn’t the WordPress TwentyTen theme (looking for those TwentyTen “id”s and “className”s as changepoints), and/or view us using it with today’s animated GIF presentation.


Previous relevant WordPress Blog Collaborative Annotated Email FormData Post Tutorial is shown below.

WordPress Blog Collaborative Annotated Email FormData Post Tutorial

WordPress Blog Collaborative Annotated Email FormData Post Tutorial

Yesterday’s WordPress Blog Collaborative Annotated Email User Experience Tutorial helped with practicalities regarding user experience with this WordPress Blog highlighting of text accumulated into the body (as HTML attachment) and subject (as text) of an Annotated Email form of collaborative communication.

The “subject” extension here makes it all the more important to try to look out for long email URLs that will exceed the web server limit here. When too long, that …

  • previous GET method of navigation … needs to be converted to a …
  • POST method of navigation

… and today we do not write out any discrete HTML form element to do this (when required), but instead resort to the wonderfully powerful combination of …

… to be used by the new dynamic thinking Javascript function as below …


function iftoolongpost(prefixu, restsub, restu) {
var prefixrest=prefixu.replace('&body=', encodeURIComponent(restsub) + '&body=') + restu;
if ((prefixrest).length > 900) {
// dynamic form
var xhr = new XMLHttpRequest();
var form=new FormData();
form.append('to', decodeURIComponent(prefixrest.split('to=')[1].split('&')[0]));
form.append('subject', decodeURIComponent(prefixrest.split('subject=')[1].split('&')[0]));
form.append('body', decodeURIComponent(prefixrest.split('body=')[1].split('&')[0]));
xhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true);
xhr.send(form);
// end of dynamic form
location.href='#hfloater';
} else {
document.getElementById('aeciframe').src=prefixrest;
}
}

… called in that different calling arrangement as per …


document.getElementById('hfloater').innerHTML+='<b>Annotated Email <a class="hlclass" style="inline-block;cursor:pointer;text-decoration:none;" onclick="iftoolongpost(this.title, encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)), encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60)))));" data-href="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28' + encodeURIComponent(document.URL) + '%29%0a&body=" title="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29%0a&body=" target=aeciframe onmouseover="this.title=emaileeis(this.title);" ontouchstart="this.title=emaileeis(this.title);" id=b_hfloater_annotated_email>' + aec + '</a></b><iframe id=aeciframe name=aeciframe style=display:none; src=#></iframe><br>';

… featuring in changed PHP rjmprogramming-multi-lookup.php plugin and/or changed TwentyTen theme header.php file.


Previous relevant WordPress Blog Collaborative Annotated Email User Experience Tutorial is shown below.

WordPress Blog Collaborative Annotated Email User Experience Tutorial

WordPress Blog Collaborative Annotated Email User Experience Tutorial

Did you try yesterday’s WordPress Blog Collaborative Annotated Email Tutorial highlighting of text Annotated Email functionality? If you did, you might have found a “hair trigger” timed user experience. You had a very small amount of time to decide on any amendments “by hand” to your email.

On this, did you notice how we relied on a Javascript prompt window to garner an email address off the user? There is method in this “kludginess”. We wanted the highlighting not to be destroyed by a change of focus. The downside though, is that the whole time you spend answering contributes to any setTimeout based timing we have going before we automatically make the highlighting functionality menu disappear. Today, we control that, waiting an extra 10 seconds or so after that for the user to start entering their own Annotated Email content, should they wish, and the HTML div contenteditable=true is reminded by a new onchange replenishment of the delay that the user is still writing … a bit like with SMSes and those blinking dots telling you the other SMSer is writing something (but not as cute here, looks wise, alas).

Again, into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …


var mpn='', eod='', aec='', withindiv=0;

function emaileeis(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
postsm=inideais.replace(presm,'');
} else if (inideais.indexOf('?to=') != -1) {
presm=inideais.split('?to=')[0] + '?to=';
if (inideais.indexOf('&') != -1) {
postsm=inideais.replace(presm,'').replace(inideais.split('?to=')[1].split('&')[0],'');
}
} else if (inideais.indexOf('&') != -1) {
presm=inideais.split('&')[0] + '&';
postsm=inideais.replace(presm,'');
} else {
presm=inideais.split('?')[0];
postsm=inideais.replace(presm,'');
}
if (eod == '') {
if (inideais.indexOf('?to=') != -1) {
eod=inideais.split('?to=')[1].split('&')[0];
}
var pwithindiv=withindiv;
withindiv=9000;

eod=prompt('Enter email address', eod);
if (pwithindiv == 0) {
withindiv=0.9999;
} else {
withindiv=pwithindiv;
}

if (eod == null) {
eod='';
}
}
return presm + encodeURIComponent(eod) + postsm;
}

function smsee(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
}
if (inideais.indexOf('&') != -1) {
postsm='&' + inideais.split('&')[1];
}
if (mpn == '') {
if (inideais.indexOf(':') != -1) {
mpn=inideais.split(':')[1].split('&')[0];
}
var pwithindiv=withindiv;
withindiv=9000;

mpn=prompt('Enter phone number for SMS (or Cancel to do it at the Messager app', mpn);
if (pwithindiv == 0) {
withindiv=0.9999;
} else {
withindiv=pwithindiv;
}

if (mpn == null) {
mpn='';
}
}
return presm + mpn + postsm;
}

function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', opis='', fourhundred=300, isfx='0', otit='';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
xcbackc=cookieHHVal('linktoothers');
if (xcbackc != '') {
oharr=xcbackc.split('|');
}
}
if (('' + withindiv).indexOf('.') != -1) {
setTimeout(lookforhighlight, eval(('' + withindiv).split('.')[1]));
withindiv=eval(('' + withindiv).split('.')[0]);
return;
} else if (withindiv != 0) {
setTimeout(lookforhighlight, withindiv);
return;
} else {
setTimeout(lookforhighlight, usualdelay);
}

var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
if (xsel != hight && xsel != '') {
oRange = window.getSelection().getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s_top = ('' + oRect.top).replace('px','') + 'px';
s_left = ('' + oRect.left).replace('px','') + 'px';
if (s_top != '0px') {
fourhundred=eval('' + s_top.replace('px',''));
s_top='0px';
var dse='', dde='';
if (document.scrollingElement) {
if (document.scrollingElement.scrollTop) {
dse=('' + document.scrollingElement.scrollTop);
}
}
if (document.documentElement) {
if (document.documentElement.scrollTop) {
dde=('' + document.documentElement.scrollTop);
}
}
if (dse != '') {
fourhundred+=eval('' + dse.replace('px',''));
isfx='0';
} else if (dde != '') {
fourhundred+=eval('' + dde.replace('px',''));
isfx='0';
} else if (('' + window.scrollY) != '') {
fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
isfx='0';
} else if (('' + window.pageYOffset) != '') {
fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
isfx='0';
} else {
isfx=('' + document.body.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + document.scrollingElement.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.scrollY).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.pageYOffset).replace('px','');
}
}
}
}
fourhundred+=100;
}
}
}
if (xsel != hight && xsel != '') {
hight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (aec == '') {
aec=' 📧 <div id=daec contenteditable=true onblur="withindiv=0;" onchange="withindiv=9000;" onclick="withindiv=9000; event.stopPropagation();">  </div>';
} else if (document.getElementById('daec') && document.getElementById('b_hfloater_annotated_email')) {
aec=document.getElementById('b_hfloater_annotated_email').innerHTML;
}
if (aec.indexOf('<mark>' + hight + '</mark>') == -1) {
if ((' ' + aec).slice(-14).substring(0,1).replace('?','.').replace('!','.') == '.') {
aec=aec.replace('</div>', '   <mark>' + hight + '</mark></div>');
} else {
aec=aec.replace('</div>', ' <mark>' + hight + '</mark></div>');
}
}
if (document.getElementById('hfloater')) {
if (document.getElementById('hfloater').innerHTML == '') {
document.getElementById('hfloater').style.position='absolute';
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.zIndex='87';
document.getElementById('hfloater').style.backgroundColor='rgba(255,165,0,0.9)';
document.getElementById('hfloater').style.border='1px solid purple';
document.getElementById('hfloater').style.padding='2px 2px 2px 2px';
document.getElementById('hfloater').style.display='block';
document.getElementById('hfloater').innerHTML='<b>Wikipedia <a class="hlclass" style="inline-block;" href="//wikipedia.org/wiki/Main_Page" title="//wikipedia.org/wiki/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'_'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'_'" + ');" id=b_hfloater_wikipedia>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Google Translate <a class="hlclass" style="inline-block;" href="//translate.google.com" title="//translate.google.com/#view=home&op=translate&sl=auto&tl=en&text=" target=_blank onmouseover="this.href=this.title + encodeURIComponent(hight);" ontouchstart="this.href=this.title + encodeURIComponent(hight);" id=b_hfloater_google_translate>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Free Dictionary <a class="hlclass" style="inline-block;" href="//www.thefreedictionary.com/" title="//www.thefreedictionary.com/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" id=b_hfloater_free_dictionary>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Google Search <a class="hlclass" style="inline-block;" href="//www.google.com/" title="//www.google.com/search?q=" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" id=b_hfloater_google_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Tag Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/tag/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" id=b_hfloater_tag_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Category Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/category/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" id=b_hfloater_category_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Tag First Word Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/tag/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ').replace(' + "'-','/?wopenall='" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ').replace(' + "'-','/?wopenall='" + ');" id=b_hfloater_tag_first_word_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Posting Title Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/itblog/match/mapper.php" title="//www.rjmprogramming.com.au/itblog/match/mapper.php?pm=" target=_blank onmouseover="this.href=this.title + encodeURIComponent(hight);" ontouchstart="this.href=this.title + encodeURIComponent(hight);" id=b_hfloater_posting_title_search>' + hight + '</a></b><br>';

document.getElementById('hfloater').innerHTML+='<b>Email <a class="hlclass" style="inline-block;" href="mailto:?subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28' + encodeURIComponent(document.URL) + '%29&body=" title="mailto:?subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29&body=" target=_blank onmouseover="this.href=emaileeis(this.title) + encodeURIComponent(hight);" ontouchstart="this.href=emaileeis(this.title) + encodeURIComponent(hight);" id=b_hfloater_email>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Annotated Email <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28' + encodeURIComponent(document.URL) + '%29%0a&body=" title="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29%0a&body=" target=aeciframe onmouseover="this.href=emaileeis(this.title).replace(this.title.slice(-6), encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)) + this.title.slice(-6)) + encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60))));" ontouchstart="this.href=emaileeis(this.title).replace(this.title.slice(-6), encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)) + this.title.slice(-6)) + encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60))));" id=b_hfloater_annotated_email>' + aec + '</a></b><iframe name=aeciframe style=display:none; src=#></iframe><br>';
document.getElementById('hfloater').innerHTML+='<b>SMS <a class="hlclass" style="inline-block;" href="sms:&body=" title="sms:&body=" target=_blank onmouseover="this.href=smsee(this.title) + encodeURIComponent(hight);" ontouchstart="this.href=smsee(this.title) + encodeURIComponent(hight);" id=b_hfloater_sms>' + hight + '</a></b><br>';

document.getElementById('hfloater').innerHTML+='<b>Navigate to Link About <a class="hlclass" style="inline-block;text-decoration:underline;cursor:pointer;" title=" " onclick="thisasearch(this.innerHTML,this);" onmouseover="thisasearch(this.innerHTML,this);" ontouchstart="thisasearch(this.innerHTML,this);" id=b_hfloater_posting_a_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Display/Copy Link About <a class="hlclass" style="inline-block;text-decoration:underline;cursor:pointer;" title=" " onclick="thisacopysearch(this.innerHTML,this);" onmouseover="thisacopysearch(this.innerHTML,this);" ontouchstart="thisacopysearch(this.innerHTML,this);" id=b_hfloater_posting_a_copy_search>' + hight + '</a></b><br>';
if (oharr.length >= 1) {
for (var ioharr=0; ioharr<oharr.length; ioharr++) {
otit='Other Link ' + eval(1 + ioharr);
if (oharr[ioharr].indexOf('#') != -1) {
otit=oharr[ioharr].split('#')[1].trim();
}
if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'-'\" + ');
document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + oharr[ioharr].split('#')[0].trim() + '\" title=\"' + oharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hhopis(String.fromCharCode(45));\" ontouchstart=\"this.href=this.title + hhopis(String.fromCharCode(45));\" id=b_hfloater_' + xcookcnt + '>' + hight + '</a></b><br>';
} else if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'+'\" + ');
document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + oharr[ioharr].split('#')[0].trim() + '\" title=\"' + oharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hhopis(String.fromCharCode(43));\" ontouchstart=\"this.href=this.title + hhopis(String.fromCharCode(43));\" id=b_hfloater_' + xcookcnt + '>' + hight + '</a></b><br>';
} else {
document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + oharr[ioharr].split('#')[0].trim() + '\" title=\"' + oharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(hight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(hight);\" id=b_hfloater_' + xcookcnt + '>' + hight + '</a></b><br>';
}
xcookcnt++;
}
}
document.getElementById('hfloater').innerHTML+='<b><input title=\"Add your own into HTTP Cookies\" type=button onclick=cookiePutHHVal(xcookblank); value=+></input> <input title=\"Remove all HTTP Cookie URLs\" type=button onclick=cookiePutHHVal(xcookblank.trim()); value=-></input></b><br>';
} else {
document.getElementById('b_hfloater_wikipedia').innerHTML=hight;
document.getElementById('b_hfloater_google_translate').innerHTML=hight;
document.getElementById('b_hfloater_free_dictionary').innerHTML=hight;
document.getElementById('b_hfloater_google_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_search').innerHTML=hight;
document.getElementById('b_hfloater_category_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_first_word_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_title_search').innerHTML=hight;

document.getElementById('b_hfloater_email').innerHTML=hight;
document.getElementById('b_hfloater_annotated_email').innerHTML=aec;
document.getElementById('b_hfloater_sms').innerHTML=hight;

document.getElementById('b_hfloater_posting_a_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_a_copy_search').innerHTML=hight;

if (xcookcnt > 0) {
for (var icook=0; icook<xcookcnt; icook++) {
document.getElementById('b_hfloater_' + icook).innerHTML=hight;
}
}
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('hfloater')) {
document.getElementById('hfloater').style.display='none';
}
hight='';
}
}

Some email clients baulk at downloading HTML attachments, so the other change today is to append the wording of the email’s inherent HTML to the email subject, so if an emailee is unlucky in this way, they can still get “second prize” … but no cigar!


Previous relevant WordPress Blog Collaborative Annotated Email Tutorial is shown below.

WordPress Blog Collaborative Annotated Email Tutorial

WordPress Blog Collaborative Annotated Email Tutorial

Further to WordPress Plugin Primer Tutorial of recent times, we’re adding to that “highlighting of blog text” (dynamic menu) the options …

  • Email (that highlighted text) via the email client application via a “mailto:” “a” link
  • SMS (that highlighted text) via the email client application via a “sms:” “a” link
  • Annotated Email of the highlighted text converted to mark (marked up) text, accumulated onto for the whole WordPress blog session,and emailed off via PHP’s mail function, as an HTML email attachment (downloaded at the emailee end)

… and we think the last of these has good scope for collaborative thoughts and usages. Want to try it out? You’re here, ready. Just highlight some text to get started.

Into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …


var mpn='', eod='', aec='', withindiv=false;

function emaileeis(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
postsm=inideais.replace(presm,'');
} else if (inideais.indexOf('?to=') != -1) {
presm=inideais.split('?to=')[0] + '?to=';
if (inideais.indexOf('&') != -1) {
postsm=inideais.replace(presm,'').replace(inideais.split('?to=')[1].split('&')[0],'');
}
} else if (inideais.indexOf('&') != -1) {
presm=inideais.split('&')[0] + '&';
postsm=inideais.replace(presm,'');
} else {
presm=inideais.split('?')[0];
postsm=inideais.replace(presm,'');
}
if (eod == '') {
if (inideais.indexOf('?to=') != -1) {
eod=inideais.split('?to=')[1].split('&')[0];
}
eod=prompt('Enter email address', eod);
if (eod == null) {
eod='';
}
}
return presm + encodeURIComponent(eod) + postsm;
}


function smsee(inideais) {
var presm='', postsm='';
if (inideais.indexOf(':') != -1) {
presm=inideais.split(':')[0] + ':';
}
if (inideais.indexOf('&') != -1) {
postsm='&' + inideais.split('&')[1];
}
if (mpn == '') {
if (inideais.indexOf(':') != -1) {
mpn=inideais.split(':')[1].split('&')[0];
}
mpn=prompt('Enter phone number for SMS (or Cancel to do it at the Messager app', mpn);
if (mpn == null) {
mpn='';
}
}
return presm + mpn + postsm;
}


function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', opis='', fourhundred=300, isfx='0', otit='';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
xcbackc=cookieHHVal('linktoothers');
if (xcbackc != '') {
oharr=xcbackc.split('|');
}
}
setTimeout(lookforhighlight, usualdelay);
if (withindiv) { return; }
var xsel=window.getSelection().toString();
if (xsel.length == 0) {
try {
xsel=document.selection.createRange().htmlText;
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
} catch(ertw) {
xsel='';
}
} else {
xsel=xsel.replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ').replace(String.fromCharCode(10),' ');
xsel=xsel.replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ').replace(String.fromCharCode(13),' ');
if (xsel != hight && xsel != '') {
oRange = window.getSelection().getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s_top = ('' + oRect.top).replace('px','') + 'px';
s_left = ('' + oRect.left).replace('px','') + 'px';
if (s_top != '0px') {
fourhundred=eval('' + s_top.replace('px',''));
s_top='0px';
var dse='', dde='';
if (document.scrollingElement) {
if (document.scrollingElement.scrollTop) {
dse=('' + document.scrollingElement.scrollTop);
}
}
if (document.documentElement) {
if (document.documentElement.scrollTop) {
dde=('' + document.documentElement.scrollTop);
}
}
if (dse != '') {
fourhundred+=eval('' + dse.replace('px',''));
isfx='0';
} else if (dde != '') {
fourhundred+=eval('' + dde.replace('px',''));
isfx='0';
} else if (('' + window.scrollY) != '') {
fourhundred+=eval('' + ('' + window.scrollY).replace('px',''));
isfx='0';
} else if (('' + window.pageYOffset) != '') {
fourhundred+=eval('' + ('' + window.pageYOffset).replace('px',''));
isfx='0';
} else {
isfx=('' + document.body.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + document.scrollingElement.scrollTop).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.scrollY).replace('px','');
if (isfx.replace('0','') == '') {
isfx=('' + window.pageYOffset).replace('px','');
}
}
}
}
fourhundred+=100;
}
}
}
if (xsel != hight && xsel != '') {
hight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (aec == '') {
aec=' 📧 <div id=daec contenteditable=true onblur="withindiv=false;" onclick="withindiv=true; event.stopPropagation();">  </div>';
} else if (document.getElementById('daec') && document.getElementById('b_hfloater_annotated_email')) {
aec=document.getElementById('b_hfloater_annotated_email').innerHTML;
}
if (aec.indexOf('<mark>' + hight + '</mark>') == -1) {
if ((' ' + aec).slice(-14).substring(0,1).replace('?','.').replace('!','.') == '.') {
aec=aec.replace('</div>', '   <mark>' + hight + '</mark></div>');
} else {
aec=aec.replace('</div>', ' <mark>' + hight + '</mark></div>');
}
}

if (document.getElementById('hfloater')) {
if (document.getElementById('hfloater').innerHTML == '') {
document.getElementById('hfloater').style.position='absolute';
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.zIndex='87';
document.getElementById('hfloater').style.backgroundColor='rgba(255,165,0,0.9)';
document.getElementById('hfloater').style.border='1px solid purple';
document.getElementById('hfloater').style.padding='2px 2px 2px 2px';
document.getElementById('hfloater').style.display='block';
document.getElementById('hfloater').innerHTML='<b>Wikipedia <a class="hlclass" style="inline-block;" href="//wikipedia.org/wiki/Main_Page" title="//wikipedia.org/wiki/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'_'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'_'" + ');" id=b_hfloater_wikipedia>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Google Translate <a class="hlclass" style="inline-block;" href="//translate.google.com" title="//translate.google.com/#view=home&op=translate&sl=auto&tl=en&text=" target=_blank onmouseover="this.href=this.title + encodeURIComponent(hight);" ontouchstart="this.href=this.title + encodeURIComponent(hight);" id=b_hfloater_google_translate>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Free Dictionary <a class="hlclass" style="inline-block;" href="//www.thefreedictionary.com/" title="//www.thefreedictionary.com/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" id=b_hfloater_free_dictionary>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Google Search <a class="hlclass" style="inline-block;" href="//www.google.com/" title="//www.google.com/search?q=" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'+'" + ');" id=b_hfloater_google_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Tag Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/tag/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" id=b_hfloater_tag_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Category Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/category/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ');" id=b_hfloater_category_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Tag First Word Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/ITblog/" title="//www.rjmprogramming.com.au/ITblog/tag/" target=_blank onmouseover="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ').replace(' + "'-','/?wopenall='" + ');" ontouchstart="this.href=this.title + hight.replace(/\ /g,' + "'-'" + ').replace(' + "'-','/?wopenall='" + ');" id=b_hfloater_tag_first_word_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Posting Title Search <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/itblog/match/mapper.php" title="//www.rjmprogramming.com.au/itblog/match/mapper.php?pm=" target=_blank onmouseover="this.href=this.title + encodeURIComponent(hight);" ontouchstart="this.href=this.title + encodeURIComponent(hight);" id=b_hfloater_posting_title_search>' + hight + '</a></b><br>';

document.getElementById('hfloater').innerHTML+='<b>Email <a class="hlclass" style="inline-block;" href="mailto:?subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28' + encodeURIComponent(document.URL) + '%29&body=" title="mailto:?subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29&body=" target=_blank onmouseover="this.href=emaileeis(this.title) + encodeURIComponent(hight);" ontouchstart="this.href=emaileeis(this.title) + encodeURIComponent(hight);" id=b_hfloater_email>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Annotated Email <a class="hlclass" style="inline-block;" href="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28' + encodeURIComponent(document.URL) + '%29&body=" title="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(thetwords) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29&body=" target=aeciframe onmouseover="this.href=emaileeis(this.title) + encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60))));" ontouchstart="this.href=emaileeis(this.title) + encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60))));" id=b_hfloater_annotated_email>' + aec + '</a></b><iframe name=aeciframe style=display:none; src=#></iframe><br>'; document.getElementById('hfloater').innerHTML+='<b>SMS <a class="hlclass" style="inline-block;" href="sms:&body=" title="sms:&body=" target=_blank onmouseover="this.href=smsee(this.title) + encodeURIComponent(hight);" ontouchstart="this.href=smsee(this.title) + encodeURIComponent(hight);" id=b_hfloater_sms>' + hight + '</a></b><br>';

document.getElementById('hfloater').innerHTML+='<b>Navigate to Link About <a class="hlclass" style="inline-block;text-decoration:underline;cursor:pointer;" title=" " onclick="thisasearch(this.innerHTML,this);" onmouseover="thisasearch(this.innerHTML,this);" ontouchstart="thisasearch(this.innerHTML,this);" id=b_hfloater_posting_a_search>' + hight + '</a></b><br>';
document.getElementById('hfloater').innerHTML+='<b>Display/Copy Link About <a class="hlclass" style="inline-block;text-decoration:underline;cursor:pointer;" title=" " onclick="thisacopysearch(this.innerHTML,this);" onmouseover="thisacopysearch(this.innerHTML,this);" ontouchstart="thisacopysearch(this.innerHTML,this);" id=b_hfloater_posting_a_copy_search>' + hight + '</a></b><br>';
if (oharr.length >= 1) {
for (var ioharr=0; ioharr<oharr.length; ioharr++) {
otit='Other Link ' + eval(1 + ioharr);
if (oharr[ioharr].indexOf('#') != -1) {
otit=oharr[ioharr].split('#')[1].trim();
}
if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'-'\" + ');
document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + oharr[ioharr].split('#')[0].trim() + '\" title=\"' + oharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hhopis(String.fromCharCode(45));\" ontouchstart=\"this.href=this.title + hhopis(String.fromCharCode(45));\" id=b_hfloater_' + xcookcnt + '>' + hight + '</a></b><br>';
} else if (oharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=hight.replace(/\ /g,' + \"'+'\" + ');
document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + oharr[ioharr].split('#')[0].trim() + '\" title=\"' + oharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hhopis(String.fromCharCode(43));\" ontouchstart=\"this.href=this.title + hhopis(String.fromCharCode(43));\" id=b_hfloater_' + xcookcnt + '>' + hight + '</a></b><br>';
} else {
document.getElementById('hfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + oharr[ioharr].split('#')[0].trim() + '\" title=\"' + oharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(hight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(hight);\" id=b_hfloater_' + xcookcnt + '>' + hight + '</a></b><br>';
}
xcookcnt++;
}
}
document.getElementById('hfloater').innerHTML+='<b><input title=\"Add your own into HTTP Cookies\" type=button onclick=cookiePutHHVal(xcookblank); value=+></input> <input title=\"Remove all HTTP Cookie URLs\" type=button onclick=cookiePutHHVal(xcookblank.trim()); value=-></input></b><br>';
} else {
document.getElementById('b_hfloater_wikipedia').innerHTML=hight;
document.getElementById('b_hfloater_google_translate').innerHTML=hight;
document.getElementById('b_hfloater_free_dictionary').innerHTML=hight;
document.getElementById('b_hfloater_google_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_search').innerHTML=hight;
document.getElementById('b_hfloater_category_search').innerHTML=hight;
document.getElementById('b_hfloater_tag_first_word_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_title_search').innerHTML=hight;


document.getElementById('b_hfloater_email').innerHTML=hight;
document.getElementById('b_hfloater_annotated_email').innerHTML=aec;
document.getElementById('b_hfloater_sms').innerHTML=hight;

document.getElementById('b_hfloater_posting_a_search').innerHTML=hight;
document.getElementById('b_hfloater_posting_a_copy_search').innerHTML=hight;

if (xcookcnt > 0) {
for (var icook=0; icook<xcookcnt; icook++) {
document.getElementById('b_hfloater_' + icook).innerHTML=hight;
}
}
document.getElementById('hfloater').style.top=s_top;
document.getElementById('hfloater').style.left=s_left;
document.getElementById('hfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('hfloater')) {
document.getElementById('hfloater').style.display='none';
}
hight='';
}
}


Previous relevant WordPress Plugin Primer Tutorial is shown below.

WordPress Plugin Primer Tutorial

WordPress Plugin Primer Tutorial

Normally we make changes to this TwentyTen themed WordPress blog by changing that theme’s wp-content/themes/twentyten/header.php file. But today we show you how to write the PHP code needed to write a WordPress.org admin login plugin to create a hyperlink to a Wikipedia page regarding any text you have highlighted on your WordPress admin area webpage.

We thank …

… and we think you should read …

For us, with our very simple rjmprogramming-wikipedia-lookup.php plugin, we only needed the one piece of PHP to sit in the current WordPress wp-content/plugins directory, and then immediately be accessible to the WordPress blog admin area’s Plugins -> Activate option …


<?php
/**
* @package Rjmprogramming_Wikipedia_Lookup
* @version 1.6
*/
/*
Plugin Name: Rjmprogramming Wikipedia Lookup
Description: Float a Wikipedia lookup link for highlighted text of an admin webpage.
Author: Robert James Metcalfe
Version: 1.6
Author URI: http://www.rjmprogramming.com.au/
*/

// This creates the Wikipedia lookup hyperlink
function rjmprogramming_wikipedia_lookup() {
$wikipedia_page = "Wikipedia Main Page";
echo '<a target="_blank" title="Wikipedia lookup of ..." onmouseover="var xsel=' .
"''" . '; xsel=window.getSelection().toString(); if (xsel.length == 0) {' .
' xsel=document.selection.createRange().htmlText;' .
' } if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' .
"'" . ' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " ontouchstart="var xsel=' .
'; xsel=window.getSelection().toString(); if (xsel.length == 0) {' .
' xsel=document.selection.createRange().htmlText; }' .
' if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' . "'" .
' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " id="rjmprogramming_wikipedia_lookup"' .
' href="//wikipedia.org/wiki/Main_Page">' . $wikipedia_page . '</a>';
}

// Now we set that function up to execute when the admin_notices action is called
add_action( 'admin_notices', 'rjmprogramming_wikipedia_lookup' );

// We need some CSS to position the hyperlink
function rjmprogramming_wikipedia_css() {
// This makes sure that the positioning is also good for right-to-left languages
$x = is_rtl() ? 'left' : 'right';

echo "
<style type='text/css'>
#rjmprogramming_wikipedia_lookup {
float: $x;
padding-$x: 15px;
padding-top: 5px;
margin: 0;
font-size: 11px;
}
</style>
";
}

add_action( 'admin_footer', 'rjmprogramming_wikipedia_css' );

?>

We hope this is of interest to you.

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


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


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


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


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


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

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

USB Based Tethering of MacBook Air to iPhone Tutorial

USB Based Tethering of MacBook to iPhone Tutorial

USB Based Tethering of MacBook Air to iPhone Tutorial

Another day, another 24 hours with no WiFi here. The (different broadband) service provider (ie. ISP) communication tower got damaged in the storm the other day. Small bikkies on the world stage of problems.

What it did do for us was twofold by nature in noting …

  • How good and convenient is WiFi working with a broadband network? … versus …
  • How, let’s say, “interesting” is “online” life via Personal HotSpots for more than a day?

If you paid really close attention to yesterday’s Bluetooth Based Tethering of iPad to iPhone Tutorial

  • shunning, not working, WiFi Personal HotSpot “conduit” usage … in favour of …
  • Bluetooth Personal HotSpot “conduit” usage for an iPad connecting to the Personal HotSpot iPhone … and today we try …
  • USB Personal HotSpot “conduit” usage for a MacBook Air via Apple white lightning lead connection to the Personal HotSpot iPhone

… and yes, there are, albeit mild, improvements involving a real hardware means of connection here. That improvement relates to the procedure to reconnect the Personal HotSpot after inadvertently losing it … alas, dead easy to “achieve”?!

With that Bluetooth “conduit”, you will not see the, in our case, “Robert’s iPhone” Personal HotSpot connection in the WiFi list for the “helped out” device should the iPhone not be awake at the Personal HotSpot screen. What are the chances of that?! But with the Apple Lead USB connection “conduit” methodology, no such restriction happens. Mind you, as far as the MacBook Air and iPhone Personal Hotspot connection relationship maintainence goes, you have the length of the Apple White Lead length “freedom”, while with Bluetooth you have several meters “freedom”.

Can Bluetooth and USB Personal HotSpot connections for, say …
iPhone … Personal Hotspot host … with Bluetooth arranged and the Apple White Lightning Connector Lead heading off to the …
MacBook Air … USB port … and …
iPad … using Bluetooth arrangement above …
… all be happy and connected at the same time with no functional WiFi?

Yes! Yay!! But Mobile Data quotas suffer?!


Previous relevant Bluetooth Based Tethering of iPad to iPhone Tutorial is shown below.

Bluetooth Based Tethering of iPad to iPhone Tutorial

Bluetooth Based Tethering of iPad to iPhone Tutorial

Today we have an outage regarding the WiFi to our office, and wanted to …

  • do some online work on an iPad with no SIM card … and …
  • we do have access to an iPhone with Mobile Data on and a connection to a Service Provider

What can be achieved with Bluetooth only (other than Spotify, which worked fine with our Bluetooth only Sonos speaker and the Spotify app)?

  • how about tethering iPad to iPhone …
  • via an iPhone HotSpot (like talked about with Making of Automated Tethering of iPhone to iPad Tutorial) …
  • Bluetooth based …
  • connection
  • ? Other than eating more into your Mobile Data quota, it sounds good to us … and was!


    Previous relevant Making of Automated Tethering of iPhone to iPad Tutorial is shown below.

    Making of Automated Tethering of iPhone to iPad Tutorial

    Making of Automated Tethering of iPhone to iPad Tutorial

    The animated GIF presentation featuring in yesterday’s Automated Tethering of iPhone to iPad Tutorial featured …

    • iPad control-command-shift-3 generated screenshot images making their way to Photos app … and …
    • iPhone control-command-shift-3 generated screenshot images making their way to Photos app … and …
    • coalescing back at Photos app so as to be able to Mail share in a zip file download (iPad ones getting named in the range IMG_1631.PNG to IMG_1639.PNG and iPhone ones in the range IMG_2777.PNG to IMG_2781.PNG) …
    • at this MacBook Air … so as to …
    • browse for these images as the source for that animated GIF’s contents …

    … but in order to tell the story of that blog posting well, what order (because we captured the “story’s images” involving interplay that had us jumping from one device to the other and back)?

    Well, at macOS operating systems you get (downloaded) image file …

    • datetime created
    • datetime added
    • datetime modified

    … but after downloading, these all end up indistinguishable. What we need is …


    datetime image captured

    … to make the job easier (albeit, and we did as well, you could load them all into a PDF and use application like macOS Preview to reorder them appropriately (hopefully soon after) from memory)? Oops! Or, is the image metadata going to help us here? These are PNG images and Exif is best with JPEG images, but still, we remember looking into this when we presented the PHP Exif Image Information Revisit Tutorial blog posting that resulted in the PHP (“first draft”) “Exif Information” web application (as the basis for better “Exif Information” web application later on).

    We ran this on our local MAMP Apache/PHP/MySql web server …

    … and there was enough there to go on to help out getting the order better (where you’ll see us using …

    • iPhone Notes app …

      … to write down image identifier and capture datetimes … marrying that up when …
    • choosing order of images when constructing animated GIF … and sanity checking via …
    • macOS Preview application approach that is so good at shaping to (or really) rearranging slide image orders

    ). Phew!


    Previous relevant Automated Tethering of iPhone to iPad Tutorial is shown below.

    Automated Tethering of iPhone to iPad Tutorial

    Automated Tethering of iPhone to iPad Tutorial

    Thinking on yesterday’s Automated Tethering of iPhone to Mac Tutorial, the next day …

    Was in the car doing a bit of work on the iPad (iOS (8th generation) Version 16.3.1), unconnected at the time, the other day, when we didn’t got get a surprise. Lo and behold, a To infinity and beyond, we looked, but no notification style dialog box came up.

    But we went looking in …


    Settings -> Wi-Fi -> Auto Join Hotspot

    … and discovered the setting was set to “Ask to Join” while we think a better setting to get the ball rolling, here, would be “Automatic” (rather than “Never”). And so it came to pass.

    And though we had to adjust Personal Hotspot settings on the iPhone to allow others to connect (automatically, now), Wi-Fi connections on the iPad became automated, and we did get connected to the big wide online connected wooooorrrrrllllldddd on the iPad via the iPhone’s Personal Hotspot this way! Yayyyyyy!


    Previous relevant Automated Tethering of iPhone to Mac Tutorial is shown below.

    Automated Tethering of iPhone to Mac Tutorial

    Automated Tethering of iPhone to Mac Tutorial

    Was in the car doing a bit of work on the MacBook Air (macOS Sonoma Version 14.5), unconnected at the time, the other day, when we got a surprise. Lo and behold, a notification style dialog box came up …

    Personal Hotspot Available
    Do you want to join “Robert’s iPhone”?

    … presumably because we had our iPhone in the car (and had invoked its Personal Hotspot functionality in the past, as you can read about with Troubleshooting Retethering Windows 10 to iPhone Tutorial) and then, on hovering over it (it took me a day to tweak to) came up with …

    Personal Hotspot Available
    Do you want to join “Robert’s iPhone”?     

    … that on clicking the Join button had us connected to the big wide online connected wooooorrrrrllllldddd without needing to do anything on the iPhone! Great integration!

    We looked up with Google’s Image search via …


    Personal Hotspot Available

    … in “full FOMO horror”, getting us to read this webpage, thanks, to see that some people even expect more?! Impressive enough, and stop there, we’d say.


    Previous relevant Troubleshooting Retethering Windows 10 to iPhone Tutorial is shown below.

    Troubleshooting Retethering Windows 10 to iPhone Tutorial

    Troubleshooting Retethering Windows 10 to iPhone Tutorial

    You might say today’s “Troubleshooting Retethering Windows 10 to iPhone Tutorial” is missing a “Tethering Windows 10 to iPhone Primer Tutorial” on top of the Tethering MacBook Pro to iPhone Primer Tutorial involving the macOS wooooooorrrrrrllllllddd, but sometimes we can intimate the positives during an explanation of the negatives (… and after all that’s what it’s all about).

    And yes, things go wrong in I.T.? Who’d believe it? And so, today, we had just such a disconnect re-rehearsing a way to have a Windows 10 laptop be connected to the Internet away from a WiFi router scenario offsite, but taking along the “lassooable” iPhone 6 (you guessed it … as had been done successfully in the past). Well, another whole consideration is “why would the iPhone 6 Personal Hotspot (turned on) not appear in the Windows 10 WiFi connection list” but today’s troubleshooting theme goes past that onto the practicalities of Forgetting the whY and adding the MCAand concentrating on the “how” of “how to fix this”, which via good ol’ Google


    windows 10 will not connect to iphone 6 personal hotspot

    … leading us to today’s star turn link (thanks) …

    1 Press Windows Key + I shortcut to quickly open the Settings app.
    2 When Settings app opens, navigate to Network & Internet section
    3 From the menu on the left select Wi-Fi. Now click on Manage known networks.
    4 List of memorized Wi-Fi networks will appear. Select your Wi-Fi network and click the Forget button.
    5 Then connect to your hotspot network again.

    … curiously precursored by a presumption we do not believe to have been true surmising that the hotspot password had changed. No worries, though, because the advice helped, that being to first …

    1. Forget the network (on Windows 10 laptop)
    2. Retry the reopened Personal Hotspot network (on iPhone 6)
    3. Back at same place you “Forgot”, suddenly “remember” via Properties set “Connect Automatically When in Range” on (on Windows 10 laptop) … perhaps needing the iPhone 6 Personal Hotspot password

    … that last step above an “addendum” to the great advice quoted above, and summarized via today’s animated GIF presentation.

    Voila! Connection for Windows 10 in a scenario where there is no WiFi router but an iPhone 6 Personal Hotspot is available. We have to say, though, two things …

    • the iPhone needs Mobile Data to be on, and to get a signal to its ISP here … and that …
    • this is likely to cost you more in cold hard cash than your home WiFi arrangements would, in all probability, for the time it takes to get the work done, in this Personal Hotspot way (and for people called “Personal Hotspot”My way)

    We hope you never have this issue, and thank the contributors to troubleshooting advice, who have, and by sharing online, thereby getting answers out of people we’d like to thank, too … Dzięki.


    Previous relevant Tethering MacBook Pro to iPhone Primer Tutorial is shown below.

    Tethering MacBook Pro to iPhone Primer Tutorial

    Tethering MacBook Pro to iPhone Primer Tutorial

    Today we talk about a networking topic, regarding the idea if you are out and about, out of reach of WiFi connections, with your laptop, notebook or MacBook Pro, but you have available to you a device such as an Android or iPhone or iPad or tablet with inbuilt SIM card network connector, that networks via a mobile network (eg. here in Australia a 4G (soon to go to 5G) network) you (and we) can, perhaps …

    • “tether” your laptop, notebook or MacBook Pro (Robert’s MacBook Pro) … to that …
    • Android or iPhone (Robert’s iPhone) or iPad or tablet with inbuilt SIM card network connector accessing its mobile network (such as, here in Australia, 4G (soon to become 5G))

    No, our MacBook Pro is not Mister Ed, but we do form a “stable” connection … chortle, chortle.

    The clue to all this is, for us, in the iPhone’s …


    Settings -> Personal Hotspot -> switch on

    … and there you will see three modes of “hotspotting” …

    1. WiFi
    2. Bluetooth … enable on both and “Pair” on both
    3. USB … we use in Xcode running and testing mobile applications on iPhone (or iPad)

    … the first of which is great with that scenario we talked about at the top of the article.

    1. be on iPhone and touch Settings icon
    2. touch Personal Hotspot
    3. touch to be On
    4. over at MacBook Pro and click Settings icon
    5. click WiFi
    6. pick Robert’s iPhone (or equivalent) in the list and it will have that “tethering” icon (two linked ellipses)
    7. voila! … you can surf the net, read your emails and do any of those other “online” activities … but be aware that this arrangement usually costs more in service charges

    You can take a look at our PDF slideshow presentation of some of these concepts.

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


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


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


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


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


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


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

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

Bluetooth Based Tethering of iPad to iPhone Tutorial

Bluetooth Based Tethering of iPad to iPhone Tutorial

Bluetooth Based Tethering of iPad to iPhone Tutorial

Today we have an outage regarding the WiFi to our office, and wanted to …

  • do some online work on an iPad with no SIM card … and …
  • we do have access to an iPhone with Mobile Data on and a connection to a Service Provider

What can be achieved with Bluetooth only (other than Spotify, which worked fine with our Bluetooth only Sonos speaker and the Spotify app)?

  • how about tethering iPad to iPhone …
  • via an iPhone HotSpot (like talked about with Making of Automated Tethering of iPhone to iPad Tutorial) …
  • Bluetooth based …
  • connection
  • ? Other than eating more into your Mobile Data quota, it sounds good to us … and was!


    Previous relevant Making of Automated Tethering of iPhone to iPad Tutorial is shown below.

    Making of Automated Tethering of iPhone to iPad Tutorial

    Making of Automated Tethering of iPhone to iPad Tutorial

    The animated GIF presentation featuring in yesterday’s Automated Tethering of iPhone to iPad Tutorial featured …

    • iPad control-command-shift-3 generated screenshot images making their way to Photos app … and …
    • iPhone control-command-shift-3 generated screenshot images making their way to Photos app … and …
    • coalescing back at Photos app so as to be able to Mail share in a zip file download (iPad ones getting named in the range IMG_1631.PNG to IMG_1639.PNG and iPhone ones in the range IMG_2777.PNG to IMG_2781.PNG) …
    • at this MacBook Air … so as to …
    • browse for these images as the source for that animated GIF’s contents …

    … but in order to tell the story of that blog posting well, what order (because we captured the “story’s images” involving interplay that had us jumping from one device to the other and back)?

    Well, at macOS operating systems you get (downloaded) image file …

    • datetime created
    • datetime added
    • datetime modified

    … but after downloading, these all end up indistinguishable. What we need is …


    datetime image captured

    … to make the job easier (albeit, and we did as well, you could load them all into a PDF and use application like macOS Preview to reorder them appropriately (hopefully soon after) from memory)? Oops! Or, is the image metadata going to help us here? These are PNG images and Exif is best with JPEG images, but still, we remember looking into this when we presented the PHP Exif Image Information Revisit Tutorial blog posting that resulted in the PHP (“first draft”) “Exif Information” web application (as the basis for better “Exif Information” web application later on).

    We ran this on our local MAMP Apache/PHP/MySql web server …

    … and there was enough there to go on to help out getting the order better (where you’ll see us using …

    • iPhone Notes app …

      … to write down image identifier and capture datetimes … marrying that up when …
    • choosing order of images when constructing animated GIF … and sanity checking via …
    • macOS Preview application approach that is so good at shaping to (or really) rearranging slide image orders

    ). Phew!


    Previous relevant Automated Tethering of iPhone to iPad Tutorial is shown below.

    Automated Tethering of iPhone to iPad Tutorial

    Automated Tethering of iPhone to iPad Tutorial

    Thinking on yesterday’s Automated Tethering of iPhone to Mac Tutorial, the next day …

    Was in the car doing a bit of work on the iPad (iOS (8th generation) Version 16.3.1), unconnected at the time, the other day, when we didn’t got get a surprise. Lo and behold, a To infinity and beyond, we looked, but no notification style dialog box came up.

    But we went looking in …


    Settings -> Wi-Fi -> Auto Join Hotspot

    … and discovered the setting was set to “Ask to Join” while we think a better setting to get the ball rolling, here, would be “Automatic” (rather than “Never”). And so it came to pass.

    And though we had to adjust Personal Hotspot settings on the iPhone to allow others to connect (automatically, now), Wi-Fi connections on the iPad became automated, and we did get connected to the big wide online connected wooooorrrrrllllldddd on the iPad via the iPhone’s Personal Hotspot this way! Yayyyyyy!


    Previous relevant Automated Tethering of iPhone to Mac Tutorial is shown below.

    Automated Tethering of iPhone to Mac Tutorial

    Automated Tethering of iPhone to Mac Tutorial

    Was in the car doing a bit of work on the MacBook Air (macOS Sonoma Version 14.5), unconnected at the time, the other day, when we got a surprise. Lo and behold, a notification style dialog box came up …

    Personal Hotspot Available
    Do you want to join “Robert’s iPhone”?

    … presumably because we had our iPhone in the car (and had invoked its Personal Hotspot functionality in the past, as you can read about with Troubleshooting Retethering Windows 10 to iPhone Tutorial) and then, on hovering over it (it took me a day to tweak to) came up with …

    Personal Hotspot Available
    Do you want to join “Robert’s iPhone”?     

    … that on clicking the Join button had us connected to the big wide online connected wooooorrrrrllllldddd without needing to do anything on the iPhone! Great integration!

    We looked up with Google’s Image search via …


    Personal Hotspot Available

    … in “full FOMO horror”, getting us to read this webpage, thanks, to see that some people even expect more?! Impressive enough, and stop there, we’d say.


    Previous relevant Troubleshooting Retethering Windows 10 to iPhone Tutorial is shown below.

    Troubleshooting Retethering Windows 10 to iPhone Tutorial

    Troubleshooting Retethering Windows 10 to iPhone Tutorial

    You might say today’s “Troubleshooting Retethering Windows 10 to iPhone Tutorial” is missing a “Tethering Windows 10 to iPhone Primer Tutorial” on top of the Tethering MacBook Pro to iPhone Primer Tutorial involving the macOS wooooooorrrrrrllllllddd, but sometimes we can intimate the positives during an explanation of the negatives (… and after all that’s what it’s all about).

    And yes, things go wrong in I.T.? Who’d believe it? And so, today, we had just such a disconnect re-rehearsing a way to have a Windows 10 laptop be connected to the Internet away from a WiFi router scenario offsite, but taking along the “lassooable” iPhone 6 (you guessed it … as had been done successfully in the past). Well, another whole consideration is “why would the iPhone 6 Personal Hotspot (turned on) not appear in the Windows 10 WiFi connection list” but today’s troubleshooting theme goes past that onto the practicalities of Forgetting the whY and adding the MCAand concentrating on the “how” of “how to fix this”, which via good ol’ Google


    windows 10 will not connect to iphone 6 personal hotspot

    … leading us to today’s star turn link (thanks) …

    1 Press Windows Key + I shortcut to quickly open the Settings app.
    2 When Settings app opens, navigate to Network & Internet section
    3 From the menu on the left select Wi-Fi. Now click on Manage known networks.
    4 List of memorized Wi-Fi networks will appear. Select your Wi-Fi network and click the Forget button.
    5 Then connect to your hotspot network again.

    … curiously precursored by a presumption we do not believe to have been true surmising that the hotspot password had changed. No worries, though, because the advice helped, that being to first …

    1. Forget the network (on Windows 10 laptop)
    2. Retry the reopened Personal Hotspot network (on iPhone 6)
    3. Back at same place you “Forgot”, suddenly “remember” via Properties set “Connect Automatically When in Range” on (on Windows 10 laptop) … perhaps needing the iPhone 6 Personal Hotspot password

    … that last step above an “addendum” to the great advice quoted above, and summarized via today’s animated GIF presentation.

    Voila! Connection for Windows 10 in a scenario where there is no WiFi router but an iPhone 6 Personal Hotspot is available. We have to say, though, two things …

    • the iPhone needs Mobile Data to be on, and to get a signal to its ISP here … and that …
    • this is likely to cost you more in cold hard cash than your home WiFi arrangements would, in all probability, for the time it takes to get the work done, in this Personal Hotspot way (and for people called “Personal Hotspot”My way)

    We hope you never have this issue, and thank the contributors to troubleshooting advice, who have, and by sharing online, thereby getting answers out of people we’d like to thank, too … Dzięki.


    Previous relevant Tethering MacBook Pro to iPhone Primer Tutorial is shown below.

    Tethering MacBook Pro to iPhone Primer Tutorial

    Tethering MacBook Pro to iPhone Primer Tutorial

    Today we talk about a networking topic, regarding the idea if you are out and about, out of reach of WiFi connections, with your laptop, notebook or MacBook Pro, but you have available to you a device such as an Android or iPhone or iPad or tablet with inbuilt SIM card network connector, that networks via a mobile network (eg. here in Australia a 4G (soon to go to 5G) network) you (and we) can, perhaps …

    • “tether” your laptop, notebook or MacBook Pro (Robert’s MacBook Pro) … to that …
    • Android or iPhone (Robert’s iPhone) or iPad or tablet with inbuilt SIM card network connector accessing its mobile network (such as, here in Australia, 4G (soon to become 5G))

    No, our MacBook Pro is not Mister Ed, but we do form a “stable” connection … chortle, chortle.

    The clue to all this is, for us, in the iPhone’s …


    Settings -> Personal Hotspot -> switch on

    … and there you will see three modes of “hotspotting” …

    1. WiFi
    2. Bluetooth … enable on both and “Pair” on both
    3. USB … we use in Xcode running and testing mobile applications on iPhone (or iPad)

    … the first of which is great with that scenario we talked about at the top of the article.

    1. be on iPhone and touch Settings icon
    2. touch Personal Hotspot
    3. touch to be On
    4. over at MacBook Pro and click Settings icon
    5. click WiFi
    6. pick Robert’s iPhone (or equivalent) in the list and it will have that “tethering” icon (two linked ellipses)
    7. voila! … you can surf the net, read your emails and do any of those other “online” activities … but be aware that this arrangement usually costs more in service charges

    You can take a look at our PDF slideshow presentation of some of these concepts.

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


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


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


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


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


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

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

YouTube Video API Event Playlist Generations Tutorial

YouTube Video API Event Playlist Generations Tutorial

YouTube Video API Event Playlist Generations Tutorial

Recently, on this current YouTube API interfacing Song Playing web application, further to the recent YouTube Video API Event Playlist User Settings Tutorial, we’ve been referring a lot to …


top.document.title

… as a place to store settings in which all three generational layers we’ve got going, can share information, and function calls like …


var a_js_var = top.getlasttitleclicked();

This has all worked okay until you consider, “iframe hereditary wise” …

What happens? Well …


top.document.title

… refers to this WordPress blog webpage, whereas we originally coded it with the intention that it would refer to the “grandparent” level webpage in the list above. For the “title” scenario this can be remedied by code at the grandparent level checking for this scenario and being agile (as per some example code below) …


function clit(lno, twhat) {
if (top.document.title.indexOf(twhat.split(' ...')[0]) > 0) {
document.title=top.document.title;
return top.document.title;
} else {
console.log('!' + origtitle + '! ... ' + lno + ': ' + ('' + (new Date())) + ' top.document.title=' + twhat);
return twhat;
}
}

if (window.top) { if (window.top != window.self) {
if (top.document.getElementById('phfloater') && !top.document.getElementById('listeleven')) {
top.document.getElementById('phfloater').innerHTML+="<div id=listeleven style='display:none;'></div>";
}
if (top.document.title.indexOf(' ...') == -1) {
tdtis=top.document.title;
dtis=document.title;
document.title=tdtis + ' ' + dtis;
origtitle='' + document.title.split(' ...')[0] + ' ...';
top.document.title=clit(401,document.title);
}
} }

But ideas like …


var a_js_var = top.getlasttitleclicked();

… are another matter entirely. We’re not going around shoving irrelevant Javascript functions into the makeup of our WordPress Blog webpages! And that is the situation that made us try, for the first time we can remember …


var a_js_var = parent.parent.getlasttitleclicked();

… huh?! Yes, you can go back through the generations to an exact generation of interest, that way, and the Javascript function called exists, and according to the codeline above, if the code is in the grandchild level the called Javascript function is in a grandparent level. Cute, huh?!


Previous relevant YouTube Video API Event Playlist User Settings Tutorial is shown below.

YouTube Video API Event Playlist User Settings Tutorial

YouTube Video API Event Playlist User Settings Tutorial

We’re happy to be talking about three new pieces of functionality to add to our recent YouTube API interfacing Song Playing web application last talked about with the recent YouTube Video API Event Playlist Background Image Tutorial, those being …

  1. 📹 ( &#128249; ) means by which a user can choose to suppress the video aspects (but not the controls) to the YouTube video “parent” level webpage(s) we display
  2. 📜 ( &#128220; ) scroll emoji allowing the Radio playing web application aspects push the relevant video playing parts to the top of the screen
  3. colour picker can allow user tailoring of the background colour to the “parent” level webpages supervising the “grandchild” players of the YouTube videos

These all rely on document.title settings …


function fixtitlecolour(inic) {
if (document.title.indexOf(origtitle) == -1) {
if (document.title.indexOf('Playlist playing ...') != -1) {
origtitle='Playlist playing ...';
}
}
if (('' + inic).toLowerCase().indexOf('ffff00') != -1) {
if (document.title.indexOf(' background:') != -1) {
document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');
document.getElementById('karit').src=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 23));
}
} else {
if (document.title.indexOf(' background:') != -1) {
document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');
}
document.title=document.title.replace(origtitle, origtitle + ' background:linear-gradient(180deg,#' + inic.value.replace('#','') + ',#' + inic.value.replace('#','') + ') !important; background-color:#' + inic.value.replace('#','') + ' !important; ');
document.getElementById('karit').src=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 23));
}
return true;
}

function togglesiv(aiois) {
var aih=aiois.innerHTML, bih='';
if (aih.indexOf('</strike>') == -1) {
aiois.innerHTML='<strike>' + aih + '</strike>';
} else {
aiois.innerHTML=aih.replace('<strike>','').replace('</strike>','');
}
}

function togglejustaudio(aiois) {
var aih=aiois.innerHTML, bih='';
if (aih.indexOf('</strike>') == -1) {
if (document.title.indexOf(' justaudio ') == -1) {
if (document.title.indexOf(origtitle) == -1) {
if (document.title.indexOf('Playlist playing ...') != -1) {
origtitle='Playlist playing ...';
}
}
if (document.title.indexOf(' background:') != -1) {
document.title=document.title.replace(' ' + document.title.split(' background:')[1].replace(' !important; background','~ background').split(';')[0].replace('~',' !important;') + ';', ' ');
}
document.title=document.title.replace(origtitle, origtitle + ' justaudio background:linear-gradient(180deg,transparent,transparent) !important; background-color:transparent !important; ');
document.getElementById('karit').src=backiurl.replace('rand=', 'rand=' + Math.floor(Math.random() * 23));
}
aiois.innerHTML='<strike>' + aih + '</strike>';
if (document.getElementById('bplay')) {
if (document.getElementById('bplay').innerHTML.indexOf('  ') != -1 && document.getElementById('bplay').innerHTML.indexOf('audio') == -1) {
bih=document.getElementById('bplay').innerHTML.split('  ')[1];
document.getElementById('bplay').innerHTML=document.getElementById('bplay').innerHTML.split('  ')[0] + '  just audio ' + bih;
}
}
} else {
document.title=document.title.replace(/\ justaudio\ /g,' ');
aiois.innerHTML=aih.replace('<strike>','').replace('</strike>','');
if (document.getElementById('bplay').innerHTML.indexOf('  ') != -1 && document.getElementById('bplay').innerHTML.indexOf('audio') != -1) {
bih=document.getElementById('bplay').innerHTML.indexOf('  ')[1];
document.getElementById('bplay').innerHTML=document.getElementById('bplay').innerHTML.replace('  just audio ','  ');
}
}
}

Codewise, it was all of the “the three amigos”, at it again …

… that got involved.


Previous relevant YouTube Video API Event Playlist Background Image Tutorial is shown below.

YouTube Video API Event Playlist Background Image Tutorial

YouTube Video API Event Playlist Background Image Tutorial

Our current project last talked about with YouTube Video API Event Playlist Shuffle and Loop Tutorial started as a …

  • “proof of concept” one to allow for user testing of event.stopPropagation() Javascript event bubbling control usage … and yet, is also a …
  • player of YouTube videos using the YouTube API inhouse interfacing here

… and it is the second functionality we want to emphasize. In such scenarios, we sometimes apply an apt Background Image (we’re applying to all document.body) via


<style>
td { vertical-align: top; }
select { background-color: lightblue; }
option:not(:checked) { background-color: yellow; opacity: 0.5; }
textarea { background-color: #f0f0f0; }
body {
background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('/retro-music-concept-with-headphones-space.jpg');
background-size:cover;
background-repeat:no-repeat;
}

* { border-radius:10px; border-color:magenta; }
</style>

… and regarding /retro-music-concept-with-headphones-space.jpg we have Freepik to thank for the free headphones background image we found there and downloaded then uploaded into place.

While we’re talking styling another CSS measure we often use to change the aesthetics of a webpage look is to soften some squared off borders via the application of a border-radius.

The meta viewport tag came in handy for this project, as another layer, for mobile platforms, of allowing mobile gestures to genuinely improve the video viewing, for the user …


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

Another matter with mobile usage and a personalized playlist play scenario was that the use of the Mute and Unmute checkboxes at the “grandparent” level did not amount to a real click at the “grandchild” level, and so we started involving Javascript confirm box querying of users here, and this satisfied as a real user click for mobile platform media play purposes.

Codewise, all of the “the three amigos”, at it again …

… got involved.


Previous relevant YouTube Video API Event Playlist Shuffle and Loop Tutorial is shown below.

YouTube Video API Event Playlist Shuffle and Loop Tutorial

YouTube Video API Event Playlist Shuffle and Loop Tutorial

We left our Song Playing web application in YouTube Video API Event Playlist Save and Recall Tutorial

  • on mobile, needing a lot of “user tap maintenance” to keep the “personalized playlist” (consisting of YouTube ID video) music rolling … hence our …

    And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!

    … from a preceeding tutorial … well … we still allow that mode of use, but add to that, the possibility of …

  • on mobile or non-mobile, we now offer the referencing of …
    1. YouTube Playlist IDs (34 characters) … or …
    2. Spotify Playlist IDs (22 characters)

    … so that shuffling and, in the case of YouTube Playlists using the YouTube App (if on mobile), looping can be part of the mix in your Song Plays (now appearing in the web application title … doh!! … yay!!!!)

The way to access this new functionality, above, is via the “now always appearing” 🍪 ( &#127850; Cookie button ) new prompt window arrangement


var xname='';
if (('' + location.hash).replace(/^\#/g,'') != '') {
xname=prompt('Recall name for this playlist. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Spaces at front results in a request to us at RJM Programming to host your proposed playlist on our YouTube channel and we will return a 34 character ID you can use yourself in the textbox presented. Add spaces at end also to just attend to that email off to RJM Programming.', '');
} else {
xname=prompt('Please optionally enter a recallable YouTube (34) or Spotify (22) playlist ID we will save for you from here on in optionally suffixed by # hashtag separated playlist title. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Our supplied YouTube playlist ID example is Nala and Luna (mainly) but please use Cancel to avoid remembering this playlist into the future.', 'PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE#Nala and Luna');
if (xname != null) { if (eval('' + xname.indexOf('#')) > 0) { btoaname=encodeURIComponent(xname.split('#')[1].replace(/\ /g,'_')); xname=xname.split('#')[0]; } usethisnotlh=xname; }
}

… that is possible when no personalized playlist hashtag data is in the mix. If it is, well, that opens another whole story all the way through to allowing the user to (email) request the creation of their personalized list of YouTube video IDs becoming a public facing YouTube Playlist hosted on the RJM Programming YouTube Channel, whereby we moderate, here, and if all passes muster, we return a 34 character YouTube Playlist ID the user can save from then on as a playlist on mobile or non-mobile capable of shuffling and looping (if the YouTube App is invoked, on mobile).

We’ve allowed those YouTube search results to “linger longer” too, by replicating them at the “grandparent level” at the point of time we wipe them from the “parent level”, the latest set appearing just below those top three options we now have going for both non-mobile and mobile platforms.

Codewise, two of the “the three amigos” were at it again …


Previous relevant YouTube Video API Event Playlist Save and Recall Tutorial is shown below.

YouTube Video API Event Playlist Save and Recall Tutorial

YouTube Video API Event Playlist Save and Recall Tutorial

Meanwhile, back at the wishlist, with our recent YouTube API interfacing web application project …

st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link

Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)

… it is the olive ideas we’ve made a start on today. We say “we’ve made a start on” only because, when it comes to programming, it doesn’t pay to close off alternate ideas as you go about looking for solutions. Take “Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)(for some reason we’re nicknaming “innerHTML” … who wrote this script)

… well, yes, that would be nice, but, more to the point, we started involving top.document.title in solution making but then, along the way, started incorporating just plain and simple Javascript get/set functionality


var ajaxs_ih='';


function get_ajaxs_ih() {
return ajaxs_ih;
}


function set_ajaxs_ih(wht) {
ajaxs_ih=wht;
}

parent.get_ajaxs_ih() and parent.set_ajaxs_ih(strIn) references from the “parent” level referencing the “grandparent” level (of code above) and being able to populate those YouTube search dropdowns more efficiently. This get/set paradigm is “a classic” methodology in a lot of OOP work, further to the recent YouTube Video API Event Radio Play Sharing Tutorial.

Codewise, again, “the three amigos” were at it again …


Previous relevant YouTube Video API Event Radio Play Sharing Tutorial is shown below.

YouTube Video API Event Radio Play Sharing Tutorial

YouTube Video API Event Radio Play Sharing Tutorial

Wishful thinking with today’s tasklist regarding our current YouTube Video API Event Radio Play Idea Tutorial YouTube API interfacing web application project, where the blue ideas were started …

st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link

Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)

… further to yesterday’s YouTube Video API Event Radio Play Idea Tutorial

And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!

Of interest, here, might be the “emoji means” and top.document.title means by which we tackle the Mute and unmute dynamically issue. Why use top.document.title here? Well, a grandchild of the grandparent is best placed to …

  • tell the grandparent the non-muted volume (which seems to always be 100, as you control what 100 means with the actual volume you have for your speakers) … as well as …
  • obey a grandparent edict to either …
    1. mute
    2. unmute

    … the volume as our way to say “keep playing the radio but shush while I take this phone call” in certain scenarios that might happen

… meaning that all the grandparent has to do, effectively “broadcasting” to any “grandchildren YouTube video players”, is “the emoji flagging work” and adjusting (what it knows as) document.title to perform this functionality for the two new input type=checkboxes (appended by an empty span element and nested in a span id=smute element) we add into the HTML design mix via onchange event function Javascript …


function domute(thiscbo) {
if (thiscbo.checked) {
thiscbo.style.backgroundColor='yellow';
document.getElementById('cbunmute').style.backgroundColor='white';
document.getElementById('smute').innerHTML=document.getElementById('smute').innerHTML.replace('>Mute' + document.getElementById('smute').innerHTML.split('>Mute')[1].split('<')[0] + '<', '>Mute ' + '&#10004;<').replace('>Unmute' + document.getElementById('smute').innerHTML.split('>Unmute')[1].split('<')[0] + '<', '>Unmute<');
if (document.title.indexOf('volume:') != -1) {
var rest='volume:' + document.title.split('volume:')[1];
document.title=document.title.replace(rest, rest.replace(document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'mute'));
} else {
thiscbo.style.backgroundColor='white';
document.title+=' volume:mute';
}
thiscbo.checked=false;
}
}

function dounmute(thiscbo) {
if (thiscbo.checked) {
thiscbo.style.backgroundColor='yellow';
document.getElementById('cbmute').style.backgroundColor='white';
document.getElementById('smute').innerHTML=document.getElementById('smute').innerHTML.replace('>Unmute' + document.getElementById('smute').innerHTML.split('>Unmute')[1].split('<')[0] + '<', '>Unmute ' + '&#10004;<').replace('>Mute' + document.getElementById('smute').innerHTML.split('>Mute')[1].split('<')[0] + '<', '>Mute<');
if (document.title.indexOf('volume:') != -1) {
var rest='volume:' + document.title.split('volume:')[1];
document.title=document.title.replace(rest, rest.replace(document.title.split('volume:')[1].toLowerCase().replace(/^\ /g,'').replace(/^\ /g,'').replace(/^\ /g,'').split(' ')[0].split(',')[0].split(';')[0].split('|')[0], 'unmute'));
} else {
thiscbo.style.backgroundColor='white';
document.title+=' volume:unmute';
}
thiscbo.checked=false;
}
}

It is this complex because (we found out) input type=checkbox CSS styling, as a subject, is a “bit of a closed book” matter!

Codewise, also regarding email and SMS (radio) playlist sharing functionality, amongst other changes, involved …


Previous relevant YouTube Video API Event Stop Propagation Idea Tutorial is shown below.

YouTube Video API Event Stop Propagation Idea Tutorial

YouTube Video API Event Stop Propagation Idea Tutorial

We’re back using the YouTube API video playing themes of YouTube Video API Interfacer Audio Play Tutorial as a means to setting up a web application that may help explain …


event.stopPropagation();

… Javascript event control of it’s “bubbling” (up through an element hierarchy), in other words, depending where you place this, stopping it’s “bubbling up” at that element concerned …

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().

We find, around here, we don’t know we’ve created a need for event.stopPropagation() usage until we’ve stumbled onto it, most of the time, so trying to get in ahead of it with today’s proof of concept to event.stopPropagation() or not to event.stopPropagation() web application feels a bit novel to us, in a good way.

This means by which to toggle that mode of use was more straightforward than “data control” with our musical YouTube API video functionality allowing a user to choose and slot in their own video ideas via either …

  • YouTube video ID … 11 characters long … or …
  • search string to try to select a video, via a programmatically populated dropdown, with an 11 character long YouTube video ID

… asking us to do a fair bit of tweaking to our inhouse interfacing …

… you might want to try out, yourself, to see what we’re getting at here, below …


Previous relevant YouTube Video API Interfacer Audio Play Tutorial is shown below.

YouTube Video API Interfacer Audio Play Tutorial

YouTube Video API Interfacer Audio Play Tutorial

The recent Making Of Earth Scanner Legs Tutorial set us to thinking about how to offer a toggling arrangement between our inhouse YouTube Embedded Iframe API playing of …

  • video … with an incarnation of this that plays …
  • audio … “sort of” only (but able to be toggled back to video playing)

… and it got us wondering how to “dull out” a video. We chose the CSS …

<style>

iframe { filter: invert(45%); }

</style>

If you want a “complete dull out” try filter: invert(50%); … but we wanted to see controls down the bottom, still useful for audio only playing.

You can try this all out in the changed karaoke_youtube_api.htm inhouse YouTube video interfacer.

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


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


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


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


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


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


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


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


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

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

WebGL Google Chrome Configuration Issue Tutorial

WebGL Google Chrome Configuration Issue Tutorial

WebGL Google Chrome Configuration Issue Tutorial

On our macOS 14.5 (23F79) Google Chrome web browser Version 130.0.6723.70 (Official Build) (arm64) we had an issue revisiting the WebGL API using inhouse web application we last talked about with WebGL Prism Canvas Email Tutorial. Other web browsers such as Safari or Firefox or Opera do not have the issue for us.

Perhaps, on your Google Chrome web browser, clicking that “inhouse web application” link above, you too, get the error message …

It doesn’t appear your computer can support WebGL.

? Well, we were able to turn that around for our AlmaLinux adjusted webgl_test.html WebGL using inhouse web application via …

  1. stumbled upon great advice from this useful link, thanks … to … type into Google Chrome address bar …

  2. chrome:gpu

    … where …
  3. the ensuing report showed …

    * OpenGL: Disabled

    … so we …

  4. got to …

    chrome://settings/system

    … in our case, via Chrome -> Settings… -> System
  5. to find … Use graphics acceleration when available … set to Off (as the default) … so …
  6. we set … Use graphics acceleration when available … to On
  7. and clicked Relaunch button

… to make this web application “start talking” on Google Chrome.


Previous relevant WebGL Prism Canvas Email Tutorial is shown below.

WebGL Prism Canvas Email Tutorial

WebGL Prism Canvas Email Tutorial

Today we’re revisiting our “Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the WebGL API scenario”, we last talked about with PHP and Javascript and CSS WebGL Prism Tutorial as shown below. We revisit with a view to …

  • make it more aesthetically pleasing, we hope
  • centre the main graphical elements of the web application when unsupervised and avoid our old “sinful” align=’center’ “habit” usage we talked about at W3C XHTML Nu Checker Validation Primer Tutorial going on, which we diligently changed to style=” width:100%;text-align:center; “ here today … when unsupervised, but …
  • left justify the main graphical elements of the web application when supervised, so this involved detecting “supervision” and Javascript DOM changes at …

    window.onload = function init() {
    if (document.URL.indexOf('huh=') != -1 || parent.document.getElementById('glcanvas') != null || (document.referrer.indexOf('/HTMLCSS/ShapeDraw') != -1 && document.referrer.indexOf('.htm') == -1)) {
    document.getElementById('myform').innerHTML+='<input type=hidden name=huh value=></input>';
    document.getElementById('mydiv').style.position='absolute';
    document.getElementById('mydiv').style.top='0px';
    document.getElementById('mydiv').style.left='0px';
    document.getElementById('mydiv').style.width='300px';
    document.getElementById('mydiv').style.textAlign='left';
    document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="300" height="300"></canvas>';
    document.getElementById('mydiv2').style.position='absolute';
    document.getElementById('mydiv2').style.top='310px';
    document.getElementById('mydiv2').style.left='0px';
    document.getElementById('mydiv2').style.textAlign='left';
    document.getElementById('mydiv3').style.position='absolute';
    document.getElementById('mydiv3').style.top='330px';
    document.getElementById('mydiv3').style.left='0px';
    document.getElementById('mydiv3').style.textAlign='left';
    } else {
    document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="400" height="400"></canvas>';
    }

    canvas = document.getElementById( "gl-canvas" );
    // more follows ...
  • adding new Email functionality via mailto: tags linking to the user’s default Email client program, featuring the ability to …
  • have the body section of that email be able to have a clipboard image pasted into it, for which we can utilize HTML5 canvas element’s toDataURL() method, teamed up with a window.open popup window of the toDataURL image data, which can be selected and copied, optionally, by the user themselves, should they wish this to make their email more self explanatory … and that canvas element’s “meeting of minds” with WebGL changing as per …

  • gl = WebGLUtils.setupWebGL( canvas, {preserveDrawingBuffer:true} );

    … the help for which we got great ideas from this useful link, thanks, and which allows the canvas element content to be retained long enough to be available for the toDataURL() call of it

As we’ve said before about email, as a communication tool, its use can add a lot of accountability to your web applications, as well as being a great “sharing” method.

So please feel free to try …

When will we see you … again … da, da da, da da?


Previous relevant PHP and Javascript and CSS WebGL Prism Tutorial is shown below.

PHP and Javascript and CSS WebGL Prism Tutorial

PHP and Javascript and CSS WebGL Prism Tutorial

To infinity and beyond!! … well, at least to the 3rd dimension … yes, we’re rejoining our Geometry and Land Surveying theme today, rejoining the discussion of PHP and Javascript and CSS Shape Rotation Tutorial as shown below, but giving some additional functionality to show the Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the WebGL API, modelling the additional code via the public generosity and wonderful resources from the University of New Mexico … our heartfelt thanks.

If you have been a recent reader you’ll have seen that we have been discussing OpenGL. OpenGL has a OpenGL.org landing page which will talk about all the platforms supported, and let’s just remind you about the purpose, with a quote from the webpage …

The Industry’s Foundation for High Performance Graphics
from games to virtual reality, mobile phones to supercomputers

… well, today, we use some of that knowledge … some being the operative word, and we’ll talk more on this tomorrow, but … with the sequence of blog posts culminating in C++ OpenGL in Xcode Generic Regular Prism Drawing Tutorial we learnt some things about graphics software and the concepts of …

  • object vertices definition
  • object colour
  • lighting … direction, type, angle, numbers of sources etcetera
  • perspective … field of view, aspect ratio, Z position

… and the Land Surveying use of thinking about Survey Traverses as an idea to genericize the vertex definition phase, as this is the major difference between drawing a “cube” or a “hexagonal prism” or a “butterfly in Brazil” (just kidding … that’s for tomorrow (in Klingon time)).

So the wonderful code from the University of New Mexico (via StackOverflow) was to show a cube, and the use of buttons to display animation and rendering “smarts” … so am really really really keen for you to examine this additional HTML code of today you could call webgl_test.html … we change it to add some Land Surveying feeling to the creation of vertices for our Convex Polygon extended into a Prism arrangement as per the Javascript code …


var numsides = location.search.split('numsides=')[1] ? location.search.split('numsides=')[1].split('&')[0] : 4;
var NumVertices = eval((numsides * 2) * 3);
var evalc="", evalcol="";
var delim="[";
var sidelen=eval((1.0 * 3.0) / numsides);
var x=eval(0.0 - (sidelen / 2.0) * (numsides / 3)), y=eval(0.0 - (sidelen / 2.0) * (numsides / 3)), z=1.5, otherz=0.5, thisis=1;
var bearing=0.0;
var prevbearing;
var nextx, nexty, nextis=2;
var prevx, prevy, previs=numsides, downis=eval(numsides);
downis++;
evalc="";
for (ij=0; ij<eval(numsides * 2); ij++) {
if (ij == numsides) {
z=0.5;
otherz=1.5;
}
nextx=eval(x + sidelen * Math.sin(bearing / 57.2957795));
if (Math.abs(nextx) < 0.00001) nextx = 0.0;
nexty=eval(y + sidelen * Math.cos(bearing / 57.2957795));
if (Math.abs(nexty) < 0.00001) nexty = 0.0;
prevbearing = ((bearing + 540 - (360.0 / numsides)) % 360.0);
prevx=eval(x + sidelen * Math.sin(prevbearing / 57.2957795));
if (Math.abs(prevx) < 0.00001) prevx = 0.0;
prevy=eval(y + sidelen * Math.cos(prevbearing / 57.2957795));
if (Math.abs(prevy) < 0.00001) prevy = 0.0;
if (eval((ij + 1) % numsides) != 0) {
evalc += (delim + "vec4(" + x + "," + y + "," + z + ",1.0) /" + "/" + thisis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
delim=",";
evalc += (delim + "vec4(" + nextx + "," + nexty + "," + z + ",1.0) /" + "/" + nextis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
}
if ((ij % numsides) == 0) {
evalc += (delim + "vec4(" + x + "," + y + "," + z + ",1.0) /" + "/" + thisis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
evalc += (delim + "vec4(" + prevx + "," + prevy + "," + z + ",1.0) /" + "/" + previs + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
previs = eval(previs * 2);
}
if (ij < numsides) {
evalc += (delim + "vec4(" + x + "," + y + "," + z + ",1.0) /" + "/" + thisis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
evalc += (delim + "vec4(" + x + "," + y + "," + otherz + ",1.0) /" + "/" + downis + "\n");
evalcol += (delim + "vec4( 1.0, 0.0, 0.0, 1.0 ) /" + "/red \n");
}
x = nextx;
y = nexty;
thisis++;
nextis++;
downis++;
bearing += (360.0 / numsides);
}
evalc += "];";
evalcol += "];";
var vertices;
vertices = eval(evalc);

WebGL API performs its graphics via the use of the HTML5 canvas element. We’ll be discussing more on this topic, no doubt, as time goes on.

Here is a link to Shape Draw live run (with Google Line Chart and HTML svg and WebGL 3D Prism drawing and University of New Mexico inspired animation functionality) here.
Here is a link to Shape Draw PHP source code ShapeDraw.php with changes from previous code as per this link.

Try it out, and get into web based 3D graphics via the WebGL API … you’ll be drawing prism animals before the sun goes down!


Previous relevant PHP and Javascript and CSS Shape Rotation Tutorial is shown below.

PHP and Javascript and CSS Shape Rotation Tutorial

PHP and Javascript and CSS Shape Rotation Tutorial

We’re continuing on with our Geometry and Land Surveying theme today, following on from yesterday’s PHP and Javascript and CSS Shape Drawing Tutorial as shown below. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements.

If you read yesterday’s posting you’ll see that we added some popup window functionality to display the Convex Polygon created by the web application in a relative sense, and to do this we called on (where variable “opop” is global in scope) …


  • opop = window.open("", "Polygon " + numlegs, "left=400,top=250,height=" + parseFloat(50 + maxy) + ",width=" + parseFloat(50 + maxx));

  • opop.document.write([someDerivedHTML]);

We’re here, today, to remind you, that that popup doesn’t have to be like a dead fish, just displaying information. It can be interactive itself, and is known to the “parent” window, so can have its own “hidden input” HTML element (for example) as per …


<input id="myunload" type="hidden" value=""></input>

… that is updated when a button as per (this function, that is used to create this button and a related dropdown) …


function buttonideas() {
var crotate1 = "<input type='button' onclick=' if (document.getElementById(\"myunload\") != null) { document.getElementById(\"myunload\").value=\"" + initiallength + "," + numlegs + "," + "\" + document.getElementById(\"myselect\").value; }' value='Rotate Clockwise'></input> <select id='myselect'><option value='" + eval(180.0 / numlegs) + "'>By " + eval(180.0 / numlegs) + "° ... vs ...</option></select>";
for (var steps=0; steps<=360; steps++) {
crotate1=crotate1.replace("</option></select>", "</option><option value='" + steps + "'>By " + steps + "°</option></select>");
}
return crotate1;
}

… then our “parent” window can swing into action via a setInterval() scenario (where variable sipos is global) …


sipos = setInterval(takealook, 5000);

… with code like …


function takealook() {
var things;
if (opop != null) {
if (opop.document.getElementById('myunload').value.indexOf(",") != -1) {
things = opop.document.getElementById('myunload').value.split(",");
opop.close();
opop = null;
if (things.length >= 3) {
if (sipos != null) { clearInterval(sipos); sipos = null; }
var bis = 0.0;
bis += parseFloat(initialbearing);
bis += parseFloat(things[2]);
window.location = "./ShapeDraw.php?sides=" + things[1] + ",0&length=" + things[0] + "&bearing=" + posval(bis);
}
}
}
}

… to allow for some HTML “svg” element rotation functionality, if the button is pressed, that is. One last nicety is to use the Window Event “onunload” to clear the setInterval handler with a web browser close or a user closing the parent webpage as per …


<body onunload=" if (sipos != null) { clearInterval(sipos); sipos = null; }" style="background-color: #fffff0;">

Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here.
Link to Shape Draw PHP source code ShapeDraw.php with changes from code yesterday as per this link.

You may be interested in CSS3 ways to rotate HTML elements as well, so we’ll leave you with this link to point you in the direction of where we have discussed this previously.


Previous relevant PHP and Javascript and CSS Shape Drawing Tutorial is shown below.

PHP and Javascript and CSS Shape Drawing Tutorial

PHP and Javascript and CSS Shape Drawing Tutorial

It is no coincidence that Geometry and Land Surveying have a lot in common. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements.

So today, with our Plane Geometry web application, we start with our previous Survey Traverse web application, and add to its functionality with ability for it to fill out more for the user to describe a regular polygon of their choosing, defined by …

  1. number of polygon sides
  2. length of each polygon side

We also add to the Google Charts Line Graph of the Drawn Shape a popup window showing the polygon as an HTML svg element. Part of the reason for this is that the Google Chart Line Graph can exaggerate the x or y co-ordinate of its plots, but with the HTML svg element, you avoid this issue, as we are just showing you a “relative” view of the shape (ie. as distinct from an “absolute” view with distinct co-ordinates).

The thinking here started with a look at New Century Maths stages 5.2/5.3 “Exterior angle sum of a convex polygon”. Did you know?

The sum of the exterior angles of a convex polygon is 360°.

What we found to be the case, practically speaking, to imagine the drawing of a regular even-sided convex polygon (with “numsides” sides) was …

  • look north …
  • turn clockwise (360° / numsides) for first line to draw (NB. there is more symmetry if this number is then divided by 2) … then from then on …
  • off this previous line, turn clockwise (180° + (360° / numsides)) for subsequent lines

Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here.
Link to Shape Draw PHP source code ShapeDraw.php with changes from code below as per this link.

Hope you enjoy the geometry ideas, and will leave you with a very useful link that helped with the Convex Polygon method to calculate the Surface Area here.


Previous relevant HTML and Javascript and CSS Survey Traverse Tutorial is shown below.

HTML and Javascript and CSS Survey Traverse Tutorial

HTML and Javascript and CSS Survey Traverse Tutorial

Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts. The tutorial subject matter is a webpage to perform Survey Traverse calculations. A Survey Traverse is:

Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:

Less reconnaissance and organization needed;
While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;
Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;
Traverse networks are free of the strength of figure considerations that happen in triangular systems;
Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.

The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]

Let’s see some simple HTML in action in a tutorial …

Link to HTML “spiritual home” … at W3Schools has many tutorials.
Link to Survey Traverse live run … here.
Link to Survey Traverse live run (additional Google Line Chart functionality) here.
Link to Survey Traverse information … from Wikipedia from which quote above comes.
Link to some downloadable HTML code … rename to SurveyTraverse.html which packages up a lot of Javascript and a little bit of CSS … or JaCvasScriptS … not sure whether this would ever catch on.
Link to some downloadable PHP programming code (additional Google Line Chart functionality) … rename to SurveyTraverse.php

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


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


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


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


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


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

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