Walking Trip …

Posted on by
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 , , , , , , , , , | 335 Comments

Another Desktop Job and its GUI Event Analysis

Posted on by
A Job

Another Desktop Job and its GUI Event Analysis

When there is a big job to do I really really like Event Driven programming. All around programming work are events, whether that be for web work or desktop work. It has probably increased over time, because of the increased interactivity of the way work is done with computers and how it has to interface with people using it.

What interests me the most are:

  • the design of the relationship between data (ie. database needs) and software (ie. programs) and linkages (ie. networking) and environment (ie. platform) and people involved (ie. implementation) … usually the Stakeholders and Development Group and its Software Lead
  • software product analysis (ie. software platforms, database platforms) … usually the Software Lead and/or Analyst/Programmer
  • data design (ie. database structure) … usually the Software Lead and/or Analyst/Programmer
  • the design of the GUI (graphical user interface) as far as components of the interface is concerned … usually the Software Lead and/or Analyst/Programmer
  • what events are needed to make these components above useful … usually the Analyst/Programmer
  • redesigning as technical problems make different solutions a better fit … usually the Analyst/Programmer and often the Software Lead

The example here is Colour Matching Paint Colours. Pretty clearly the database design is crucial. The interface of the user to this data is also critical, and so a GUI design will be part of the process.

How do you approach this?

Well, nobody can really lay down the law here, because there will be requirements and opinions from many sources, but supposing you can arrive at a GUI component list from these discussions, then, how do you proceed forward?

Sometimes it is easy to forget the events, but the events equate to processes, and, it seems to me, this is what is interesting, and can be a good approach to take. If you are working in an OOP environment it would be useful to have objects in mind as you evaluate a proposed process (or event).

Below is an analysis of the events used for the GUI of the Colour Matching desktop program (Visual Studio 2010 VB.Net interfacing to MS-SQL and/or Advantage) of this presentation. Think it makes for interesting reading (zzzzzzzzzzz) … there’s always one, isn’t there?!

Event Usage Analysis for Colour Matching Program
Activated

BackColorChanged

CheckedChanged

Click

DoWork

DocumentCompleted

DoubleClick

DragDrop

DragEnter

DragLeave

DragOver

DropDownClosed

FormClosed

FormClosing

KeyDown

KeyPress

Leave

Load

MouseClick

MouseDown

MouseHover

MouseLeave

Navigated

Resize

SelectedIndexChanged

Shown

SizeChanged

TextChanged

VisibleChanged

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

Posted in Colour Matching, Event-Driven Programming, GUI, Software, SpectroPhotometer, Visual Studio | Tagged , , , , , , , , , | 54 Comments

Virtual Private Networks on macOS Primer Tutorial

Posted on by
Virtual Private Networks on macOS Primer Tutorial

Virtual Private Networks on macOS Primer Tutorial

There’s a good chance you’ve heard of the term “Virtual Private Network”? If not, how about VPN? Let’s hear what Wikipedia has to say about this networking topic …

A virtual private network (VPN) extends a private network across a public network, and enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network. Applications running across a VPN may therefore benefit from the functionality, security, and management of the private network.[1]

VPN technology was developed to allow remote users and branch offices to access corporate applications and resources. To ensure security, the private network connection is established using an encrypted layered tunneling protocol and VPN users use authentication methods, including passwords or certificates, to gain access to the VPN. In other applications, Internet users may secure their transactions with a VPN, to circumvent geo-restrictions and censorship, or to connect to proxy servers to protect personal identity and location to stay anonymous on the Internet. However, some Internet sites block access to known VPN technology to prevent the circumvention of their geo-restrictions, and many VPN providers have been developing strategies to get around these roadblocks.

In a past role, I can remember frequent use of these VPNs, and/or GoToMeeting (that we talked about with at GoTo Meeting Primer Tutorial), as two examples of means by which we could troubleshoot issues remotely for a client’s software, and had a need the other day to revisit how this is done at the mac OS (with a MacBook Pro laptop for example). We’ll detail some of the company specific requirements on another posting, but you may be wondering where all this happens on a macOS such as our macOS Mojave version 10.14 on our MacBook Pro.

  1. Click the Apple logo at the top left
  2. Click System Preferences…, and, as necessary “left arrow” back to the main screen of System Preferences (if you were doing something else there, that is)
  3. Click Network icon to arrive at a Network screen with existant Network connection possibilities listed at the left column … perhaps you already have the VPN of interest listed there, and if so, that is what you click to establish the relevant VPN connection, else to start a VPN connection configuration …
  4. Click the “+” button at bottom left to configure a new Network connection, and a window opens up offering “Interface” and “Service Name”
  5. For “Service Name” pick a name for the VPN connection that will ring bells for you about what VPN connection you will be attempting
  6. For “Interface” choose “VPN” from the dropdown list, and a window opens up offering “Interface” and “VPN Type” and “Service Name” (filled in okay because of last step)
  7. The company you are connecting with will supply the “VPN Type” out of …
    • L2TP over IPSec
      1. Click Create button to a “Configuration” (as distinct from the “Default” one) and “Service Name” and “Account Name” and “Authentication Settings” (made up of “User Authentication” via Password/RFSA SecurID/Certificate/Kerberos/CrypotoCard and “Machine Authentication” via SharedSecretCertificate and optional “Group Name”)
      2. Click “Connect” button to establish a VPN connection, as required (now)
    • Cisco IPSec
      1. Click Create button to a “Server Address” and “Account Name” and “Password” and “Authentication Settings” (made up of “Machine Authentication” via SharedSecretCertificate and optional “Group Name”)
      2. Click “Connect” button to establish a VPN connection, as required (now)
    • IKEv2
      1. Click Create button to a “Server Address” and “Remote ID” and “Local ID” and “Authentication Settings” (made up of “Username” (Username and Password) or Certificate (that is a file you browse for (as for mentions above too)) or “None”)
      2. Click “Connect” button to establish a VPN connection, as required (now)

That VPN connection becomes like a layer on top (so the local broadband or other connection speed needs to be up to it, which “SpeedTest” into a search engine can measure for you, and/or see it discussed at LAN Speed Testing Primer Tutorial, and should yield a “Download Speed” of 15Mbps (megabits per second) or faster), so don’t be surprised if some public URLs that used to work stop working while your VPN connection is active. If so, they are resurrected once any temporary VPN connection is later “Disconnected”.

Enough for now. We think so, but later we might follow up on this, and tell you some specifics of a real case, to be able to “Remote Desktop” on a MacBook Pro via a VPN connection enabling the logging on and working with a Windows Desktop PC (left on at an office). That Windows Desktop PC in turn has access to the relevant company’s File Servers and Intranet, so that work can be achieved remotely, the VPN offering similar company security arrangements as would be the case in the office.

You can also see this play out at WordPress 4.1.1′s Virtual Private Networks on macOS Primer Tutorial.

Did you know?

VPN and VNC or (Virtual Network Computing) that we discussed with Windows Remote Desktop Primer Tutorial are two different networking concepts. We used a VNC within our local networking environment of the house here (ie. not a “remote connection” as such) to share screens between a MacBook Pro (Mac OS X=macOS) and a Windows Desktop PC. What is common to all these networking activities is the word “connection”, as a general term to describe the means by which two computers or devices (or concepts like databases) can “communicate” (or be “linked”).

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

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

Simon Says Game Primer Tutorial

Posted on by
Simon Says Game Primer Tutorial

Simon Says Game Primer Tutorial

One of the great things about the “net” is learning things off other people. Here at this blog we’ve mentioned the stupendous HTML5 File API link we’ve used a lot for “shape to upload” local disk file browsing purposes in so many web applications we’ve talked about. So, thanks for that, but that File API brilliance is not all we learnt by putting that logic into play. We’ve not up until now, formalized it into a “proof of concept” web application, but we’ve now adapted its …

At HTML5 File API …
document.querySelector(‘.readBytesButtons’).addEventListener(‘click’, function(evt) {
if (evt.target.tagName.toLowerCase() == ‘button’) {
var startByte = evt.target.getAttribute(‘data-startbyte’);
var endByte = evt.target.getAttribute(‘data-endbyte’);
readBlob(startByte, endByte);
}
}, false);

Adapted for a Simon Says Game
document.querySelector(‘.classy’).addEventListener(‘click’, function(evt) {
if (evt.target.tagName.toLowerCase() == ‘button’) {
eval(evt.target.title);
}
}, false);

Let’s learn a bit more about the crucial document.querySelector method …

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

For me, and I grant you it might just be me, but it breaks the nexus in my mind that I should always be thinking …

  • HTML element ID attribute is associated with Javascript DOM (action) work … eg. clicking a button and looking after other event logics
  • HTML element class attribute is associated with CSS (styling) work

… and not quite “never the twain shall meet” because ID CSS is commonly used by us, but generally the above principles hold for us.

The use of the document.querySelector method above turns this on its head though, to the extent that with the underlying Simon Says game HTML and Javascript and CSS doc_qs.html code …

  • no HTML elements needed any ID attributes … and yet …
  • HTML button elements with a class are controlled by onclick logic instigated by that right hand Javascript code above … but it had to be (a little awkwardly, we grant you) arranged that …
  • only one HTML button class=’classy’ exists at any given time to allow that document.querySelector methodology to serve its purpose in the Simon Says game (which is just a bit of fun trying to succeed with what Simon Says to turn its underlying table all green)

We hope this is of interest to you too, and thanks to this useful link for some CSS ideas for button styling, and 30 Funniest Simon Says Ideas for Simon Says ideas.

You can also see this play out at WordPress 4.1.1′s Simon Says Game Primer Tutorial.

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

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

PHP Form Validation via Filter Regular Expression Tutorial

Posted on by
PHP Form Validation via Filter Regular Expression Tutorial

PHP Form Validation via Filter Regular Expression Tutorial

With the recent PHP Form Validation via Filter Extension Tutorial we avoided “the elephant in the room” that being the use of regular expressions. No, Nala, not 😀 or even 🤪 but the definition of a date data item (or can be a PHP object) via …

So what is it about dates that suit regular expressions? It’s that there are so many ways to express a Date (or DateTime) in user entry land (as a “timestamp format” entry) and a regular expression set aside for some of those timestamp formats that we can think that a user may think of, could be the go to start down this road of discovery. Behind the scenes we also arrange for an equivalent PHP “timestamp format” equivalent to be sent by the HTML form controlling all this so that we can have a two phase date validation process that …

  • first passes the user entry through a PHP Filter extension‘s FILTER_VALIDATE_REGEXP examination, but there being no “integer range” constraint mechanism here, you could enter a value such as “2019-02-29″ and it is fairly obvious what you mean with this Year-Month-Date entry, but it passes this first pass of validation (there being no “integer range” constraint mechanism) when it shouldn’t (curiously PHP date_create_from_format(string $format , “2019-02-29″) will return a date object that is dated “2019-03-01″ such is its desire to please but we do a sanity check for this “empathy overshoot” in our code), and so we need a ….
  • second pass creates a PHP date object using that equivalent PHP “timestamp format” equivalent (that we separately and additionally scrutinize for that “empathy overshoot” issue as explained above)

… and if successful with both passes above the user entered date information passes our validation processing to go on and win that elusive cigar?!

You can also see this play out at WordPress 4.1.1′s PHP Form Validation via Filter Regular Expression Tutorial.

Previous relevant PHP Form Validation via Filter Extension Tutorial is shown below.

PHP Form Validation via Filter Extension Tutorial

PHP Form Validation via Filter Extension Tutorial

Our recent Javascript and PHP Base64 Primer Tutorial with its Base64 thoughts, the …


echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";

… of which we adopt for today’s PHP code, set our minds towards HTML form thoughts and HTML form validation thoughts. The most immediate validation thought on an HTML form is probably …

  • onsubmit event Javascript client logic … but today we go exploring …
  • callback PHP serverside logic via the PHP Filter extension functionalities in the pattern …
    $var=filter_var($prevar,

    );

You will see on examination of our proof of concept PHP filter_ideas.php code how these PHP Filter Extensions can be used for validation purposes (with a more extensive list here), and you could try it out for yourself at this live run link.

If form validation interests you, perhaps a read of HTML5 Form API Validation Primer Tutorial below is in order.

Previous relevant HTML5 Form API Validation Primer Tutorial is shown below.

HTML5 Form API Validation Primer Tutorial

HTML5 Form API Validation Primer Tutorial

HTML5 is more than just the “5″ tagged on. Take a look at this list of API related parts to the HTML5 specification.

As you may have gleaned from our recent HTML Input Element Types Randomized History Tutorial a lot of new HTML input elements were added with the view to improving the capabilities of HTML form elements for collecting information from users interactively. Along with that, as you might expect, validation methodologies were improved, as any programmer would tell you, can be one of the most challenging “practical element” of web design to do well to not involve user error, or “user giving up”.

The HTML5 form API has great “Constraint Validation”, not all new to HTML, but vastly improved and extended, as you can read a lot about at this really great webpage, thanks.

The HTML input attribute we find of great practical benefit with all this is the pattern attribute to define a constraint, in the same sort of vein as a RegEx expressions helps you perform pattern-matching and “search and replace” functions on text. This would be great use for organizations that work with “codes” or “Part Numbers” or SKU (stock keeping units) that follow a consistent pattern.

You can try some simple Constraint Validation at today’s live run link with its underlying serverside PHP code you could call html5_form_constraint_validation.html as you wish.

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

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

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

Posted in Event-Driven Programming, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 1 Comment

Javascript and PHP Base64 Media Tutorial

Posted on by
Javascript and PHP Base64 Media Tutorial

Javascript and PHP Base64 Media Tutorial

It’s likely that if you use Base64 a lot with your web applications whether that involves Javascript client ….

… or some serverside language functions like PHP’s …

… you will have used it when accessing, or displaying or uploading media, via HTML clientside …

  • image via HTML img element or as a background image to other HTML elements, as we deploy functionality for today
  • audio via HTML audio element
  • video via HTML video element

… and along with Base64 you may have used data URI data to define this media content. With this media data we are lucky having written this web application in PHP where we can involve its file_get_contents function to be able to handle the user entering …

  • an absolute media URL … where we match up extensions to mime types as the mechanism to tell the HTML what type of data to expect with audio or video data … versus …
  • a browse button can have the user pick out a local disk media file to use, which involved “shape to upload” logic featuring the great HTML5 File API ideas

To see what we mean here, feel free to try the changed btoa_atob_base64.php‘s live run link.

You can also see this play out at WordPress 4.1.1′s Javascript and PHP Base64 Media Tutorial.

Previous relevant Javascript and PHP Base64 Primer Tutorial is shown below.

Javascript and PHP Base64 Primer Tutorial

Javascript and PHP Base64 Primer Tutorial

We’ve long been interested in all of the PHP functions…

… to facilitate the transfer of sizeable amounts of data within PHP or from HTML to PHP via a form (sometimes method=POST) element.

If there is no form involved and/or if there is a small amount of data (in a form method=GET) you could get by just with HTML to HTML and using Javascript …

… but just recently we had an occasion (and then another) to start getting interested in Javascript Base64 conversion usages, using …

… when we presented …

… and if memory serves me correctly, we first started using btoa and atob to help with …

  • creating a background image for an HTML element via a Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI (and think perhaps the reason to “go data URI” is that data URIs are great in emails where if an email attachment is downloaded a data URI (as distinct from an absolute or relative URL) is self contained and transportable) … but recently we’ve started looking at btoa and atob even more because …
  • to send base64 (converted ascii or graphic data) in an HTML form to a PHP destination avoids the need that we seem to often face (but please research enctype for other thoughts here) where we need to go (in PHP, something like) …

    $phpvar = str_replace('+', ' ', urldecode($_POST['fieldposted']));

    … a really kludgy and annoying thing for us because what if that $_POST['fieldposted'] has legitimate text like …

    1 + 1 = 2
    … not …
    1 + 1 = 11

    … to use syntax above is wrong … and so in today’s proof of concept (btoa_atob_base64.php‘s) live run we deliberately entered …

    The rain +
    in Spain +
    falls mainly +
    on the plain.

    … to show you that, indeed, the use of Javascript btoa at the form’s onsubmit (form) event can help accurately be interpreted by any destination PHP (here’s looking at you, kid) via …

    <?php
    // …

    echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";

    // …
    ?>
    … type of PHP code, and never interpret the data incorrectly

Clearly, if you are not asleep, you’re interested, and we hope this helps, or clarifies, a little!

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

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

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

PHP Form Validation via Filter Extension Tutorial

Posted on by
PHP Form Validation via Filter Extension Tutorial

PHP Form Validation via Filter Extension Tutorial

Our recent Javascript and PHP Base64 Primer Tutorial with its Base64 thoughts, the …


echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";

… of which we adopt for today’s PHP code, set our minds towards HTML form thoughts and HTML form validation thoughts. The most immediate validation thought on an HTML form is probably …

  • onsubmit event Javascript client logic … but today we go exploring …
  • callback PHP serverside logic via the PHP Filter extension functionalities in the pattern …
    $var=filter_var($prevar,

    );

You will see on examination of our proof of concept PHP filter_ideas.php code how these PHP Filter Extensions can be used for validation purposes (with a more extensive list here), and you could try it out for yourself at this live run link.

If form validation interests you, perhaps a read of HTML5 Form API Validation Primer Tutorial below is in order.

You can also see this play out at WordPress 4.1.1′s PHP Form Validation via Filter Extension Tutorial.

Previous relevant HTML5 Form API Validation Primer Tutorial is shown below.

HTML5 Form API Validation Primer Tutorial

HTML5 Form API Validation Primer Tutorial

HTML5 is more than just the “5″ tagged on. Take a look at this list of API related parts to the HTML5 specification.

As you may have gleaned from our recent HTML Input Element Types Randomized History Tutorial a lot of new HTML input elements were added with the view to improving the capabilities of HTML form elements for collecting information from users interactively. Along with that, as you might expect, validation methodologies were improved, as any programmer would tell you, can be one of the most challenging “practical element” of web design to do well to not involve user error, or “user giving up”.

The HTML5 form API has great “Constraint Validation”, not all new to HTML, but vastly improved and extended, as you can read a lot about at this really great webpage, thanks.

The HTML input attribute we find of great practical benefit with all this is the pattern attribute to define a constraint, in the same sort of vein as a RegEx expressions helps you perform pattern-matching and “search and replace” functions on text. This would be great use for organizations that work with “codes” or “Part Numbers” or SKU (stock keeping units) that follow a consistent pattern.

You can try some simple Constraint Validation at today’s live run link with its underlying serverside PHP code you could call html5_form_constraint_validation.html as you wish.

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

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

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

WordPress Highlight Lookups Plugin Cookies Tutorial

Posted on by
WordPress Highlight Lookups Plugin Cookies Tutorial

WordPress Highlight Lookups Plugin Cookies Tutorial

The recent WordPress Highlight Lookups Plugin Tutorial presented a static 8 option list of absolute URLs to navigate to, nuanced by the highlighted text of the user on a webpage of this blog. Our aim today is to loosen that “static” restrictiveness, and allow both …

  • within a session in a web browser … and between, that is for an …
  • intersession scenario with the same web browser

… remember and recall any user defined absolute URL arrangement. Being as this URL#Title represents a pretty small amount of data, we are going to use HTTP Cookies, and Javascript (client) HTTP Cookie …

  • creation of
  • recall of
  • removal of

… functionalities to allow the user to click a + button to add a new absolute URL of their choosing, or a - button to remove all such user defined absolute URLs (controlled by HTTP Cookies).

The changed PHP rjmprogramming-multi-lookup.php plugin code becomes …


<?php
/**
* @package Rjmprogramming_Multi_Lookup
* @version 1.6
*/
/*
Plugin Name: Rjmprogramming Multi Lookup
Description: Float various lookup button links to Wikipedia, Google, Free Dictionary for highlighted text of a blog webpage.
Author: Robert James Metcalfe
Version: 1.6
Author URI: //www.rjmprogramming.com.au/
*/

// We need some Javascript to respond to highlights
function rjmprogramming_multi_js() {

echo "<div id='phfloater'></div>


<script type='text/javascript'>
var phight=' ';
var cbackc='';
var cookcnt=0;
var cookblank=' ';
var zoharr=[];

function plfhlater() {
var aswq=document.getElementsByTagName(\"a\");
for (var iaswq=0; iaswq<aswq.length; iaswq++) {
if (aswq[iaswq].innerHTML == 'Long hover help available.') {
aswq[iaswq].innerHTML='Highlighting and long hover help.';
aswq[iaswq].title+=' ... also note that Highlighting Webpage Contents allows for Wikipedia, Google Translate, Free Dictionary and Google Search functionalities to appear';
}
}
}

function cookiePutHVal(indv) {
var expireDate = new Date();
var opis='';
expireDate.setMonth(expireDate.getMonth()+6);
expireDate.setDate(expireDate.getDate()-1);
if (indv == '') {
cookcnt=0;
cbackc='';
document.cookie = 'linktoothers' + '=' + cbackc + ';expires=' + expireDate.toGMTString();
} else {
var pvalis=prompt('Enter absolute URL prefix#Title ... where two blank Title prefix replaces value blanks for - and one blank Title prefix replaces value blanks for +', '');
if (pvalis == null) { pvalis=''; }
if (pvalis.indexOf('//') != -1) {
var otit='Other Link';
if (pvalis.indexOf('#') != -1) {
otit=pvalis.split('#')[1].trim();
}
if (pvalis.split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'-'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + pvalis.split('#')[0].trim() + '\" title=\"' + pvalis.split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(45));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(45));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else if (pvalis.split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'+'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + pvalis.split('#')[0].trim() + '\" title=\"' + pvalis.split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(43));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(43));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else {
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + pvalis.split('#')[0].trim() + '\" title=\"' + pvalis.split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
}
if (cbackc != '') {
document.cookie = 'linktoothers' + '=' + cbackc + '|' + encodeURIComponent(pvalis) + ';expires=' + expireDate.toGMTString();
} else {
cbackc=encodeURIComponent(pvalis);
document.cookie = 'linktoothers' + '=' + encodeURIComponent(pvalis) + ';expires=' + expireDate.toGMTString();
}
cookcnt++;
}
}
}

function cookieHVal(cName) {
if (document.cookie != '') {
var tCookie=document.cookie.split('; ');
for (var j=0; j<tCookie.length; j++) {
if (cName == tCookie[j].split('=')[0]) {
return decodeURIComponent(tCookie[j].split('=')[1]);
}
}
}
return '';
}

function hopis(inop) {
return hight.replace(/\ /g, inop);
}

function plookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (phight == ' ') {
setTimeout(plfhlater, 5000);
phight='';
cbackc=cookieHVal('linktoothers');
if (cbackc != '') {
zoharr=cbackc.split('|');
}
}
setTimeout(plookforhighlight, 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 != phight && 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+=120;
}
}
}
if (xsel != phight && xsel != '') {
phight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (document.getElementById('phfloater')) {
if (document.getElementById('phfloater').innerHTML == '') {
document.getElementById('phfloater').style.position='absolute';
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.zIndex='85';
document.getElementById('phfloater').style.backgroundColor='rgba(0,255,165,0.9)';
document.getElementById('phfloater').style.border='1px solid purple';
document.getElementById('phfloater').style.padding='2px 2px 2px 2px';
document.getElementById('phfloater').style.display='block';
document.getElementById('phfloater').innerHTML='<b>Wikipedia <a style=\"inline-block;\" href=\"//wikipedia.org/wiki/Main_Page\" title=\"//wikipedia.org/wiki/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" id=b_phfloater_wikipedia>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Translate <a 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(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_google_translate>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Free Dictionary <a style=\"inline-block;\" href=\"//www.thefreedictionary.com/\" title=\"//www.thefreedictionary.com/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_free_dictionary>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Search <a style=\"inline-block;\" href=\"//www.google.com/\" title=\"//www.google.com/search?q=\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_google_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_tag_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Category Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/category/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_category_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag First Word Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" id=b_phfloater_tag_first_word_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Posting Title Search <a 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(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_posting_title_search>' + phight + '</a></b><br>';
if (zoharr.length >= 1) {
for (var ioharr=0; ioharr<zoharr.length; ioharr++) {
otit='Other Link ' + eval(1 + ioharr);
if (zoharr[ioharr].indexOf('#') != -1) {
otit=zoharr[ioharr].split('#')[1].trim();
}
if (zoharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'-'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + zoharr[ioharr].split('#')[0].trim() + '\" title=\"' + zoharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(45));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(45));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else if (zoharr[ioharr].split('#')[1].indexOf(' ') == 0) {
opis=phight.replace(/\ /g,' + \"'+'\" + ');
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + zoharr[ioharr].split('#')[0].trim() + '\" title=\"' + zoharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + hopis(String.fromCharCode(43));\" ontouchstart=\"this.href=this.title + hopis(String.fromCharCode(45));\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
} else {
document.getElementById('phfloater').innerHTML+='<b>' + otit + ' <a style=\"inline-block;\" href=\"' + zoharr[ioharr].split('#')[0].trim() + '\" title=\"' + zoharr[ioharr].split('#')[0].trim() + '\" target=_blank onmouseover=\"this.href=this.title + encodeURIComponent(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_' + cookcnt + '>' + phight + '</a></b><br>';
}
cookcnt++;
}
}
document.getElementById('phfloater').innerHTML+='<b><input title=\"Add your own into HTTP Cookies\" type=button onclick=cookiePutHVal(cookblank); value=+></input> <input title=\"Remove all HTTP Cookie URLs\" type=button onclick=cookiePutHVal(cookblank.trim()); value=-></input></b><br>';
} else {
document.getElementById('b_phfloater_wikipedia').innerHTML=phight;
document.getElementById('b_phfloater_google_translate').innerHTML=phight;
document.getElementById('b_phfloater_free_dictionary').innerHTML=phight;
document.getElementById('b_phfloater_google_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_search').innerHTML=phight;
document.getElementById('b_phfloater_category_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_first_word_search').innerHTML=phight;
document.getElementById('b_phfloater_posting_title_search').innerHTML=phight;
if (cookcnt > 0) {
for (var icook=0; icook<cookcnt; icook++) {
document.getElementById('b_phfloater_' + icook).innerHTML=phight;
}
}
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('phfloater')) {
document.getElementById('phfloater').style.display='none';
}
phight='';
}
}

plookforhighlight();

</script>
";
}

add_action( 'wp_footer', 'rjmprogramming_multi_js' );

?>

You can also see this play out at WordPress 4.1.1′s WordPress Highlight Lookups Plugin Cookies Tutorial.

Previous relevant WordPress Highlight Lookups Plugin Tutorial is shown below.

WordPress Highlight Lookups Plugin Tutorial

WordPress Highlight Lookups Plugin Tutorial

Yesterday’s WordPress Highlight Lookups Tutorial showed us …

  • functionality to link highlighted text to Wikipedia, Google, Free Dictionary and other inhouse links via the TwentyTen theme’s wp-contents/themes/twentyten/header.php … and today, the lesson is that any functionality you do that way can also be attended to via …
  • functionality to link highlighted text to Wikipedia, Google, Free Dictionary and other inhouse links via an inhouse plugin called “Rjmprogramming Multi Lookup” (NB: it is good to “manufacture” a unique plugin name here)

… the significant issue being to pick a suitable Hook and associated unique PHP function name to use. What Hook works for us, here, with this functionality? Well, it is optional, and independent, so why not load it in to work at the wp_footer Hook as explained below …

do_action( ‘wp_footer’ )
Prints scripts or data before the closing body tag on the front end.

… just before the </body> where we can HTML and Javascript let it (within PHP rjmprogramming-multi-lookup.php) …


<?php
/**
* @package Rjmprogramming_Multi_Lookup
* @version 1.6
*/
/*
Plugin Name: Rjmprogramming Multi Lookup
Description: Float various lookup button links to Wikipedia, Google, Free Dictionary for highlighted text of a blog webpage.
Author: Robert James Metcalfe
Version: 1.6
Author URI: //www.rjmprogramming.com.au/
*/

// We need some Javascript to respond to highlights
function rjmprogramming_multi_js() {

echo "<div id='phfloater'></div>


<script type='text/javascript'>
var phight=' ';

function plfhlater() {
var aswq=document.getElementsByTagName(\"a\");
for (var iaswq=0; iaswq<aswq.length; iaswq++) {
if (aswq[iaswq].innerHTML == 'Long hover help available.') {
aswq[iaswq].innerHTML='Highlighting and long hover help.';
aswq[iaswq].title+=' ... also note that Highlighting Webpage Contents allows for Wikipedia, Google Translate, Free Dictionary and Google Search functionalities to appear';
}
}
}

function plookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (phight == ' ') {
setTimeout(plfhlater, 5000);
phight='';
}
setTimeout(plookforhighlight, 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 != phight && 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+=120;
}
}
}
if (xsel != phight && xsel != '') {
phight=xsel;
if (s_top == '0px') { s_top = ('' + eval(fourhundred + eval('' + isfx))) + 'px'; }
if (document.getElementById('phfloater')) {
if (document.getElementById('phfloater').innerHTML == '') {
document.getElementById('phfloater').style.position='absolute';
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.zIndex='85';
document.getElementById('phfloater').style.backgroundColor='rgba(0,255,165,0.9)';
document.getElementById('phfloater').style.border='1px solid purple';
document.getElementById('phfloater').style.padding='2px 2px 2px 2px';
document.getElementById('phfloater').style.display='block';
document.getElementById('phfloater').innerHTML='<b>Wikipedia <a style=\"inline-block;\" href=\"//wikipedia.org/wiki/Main_Page\" title=\"//wikipedia.org/wiki/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'_'\" + ');\" id=b_phfloater_wikipedia>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Translate <a 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(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_google_translate>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Free Dictionary <a style=\"inline-block;\" href=\"//www.thefreedictionary.com/\" title=\"//www.thefreedictionary.com/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_free_dictionary>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Google Search <a style=\"inline-block;\" href=\"//www.google.com/\" title=\"//www.google.com/search?q=\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'+'\" + ');\" id=b_phfloater_google_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_tag_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Category Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/category/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ');\" id=b_phfloater_category_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Tag First Word Search <a style=\"inline-block;\" href=\"//www.rjmprogramming.com.au/ITblog/\" title=\"//www.rjmprogramming.com.au/ITblog/tag/\" target=_blank onmouseover=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" ontouchstart=\"this.href=this.title + phight.replace(/\ /g,' + \"'-'\" + ').replace(' + \"'-','/?wopenall='\" + ');\" id=b_phfloater_tag_first_word_search>' + phight + '</a></b><br>';
document.getElementById('phfloater').innerHTML+='<b>Posting Title Search <a 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(phight);\" ontouchstart=\"this.href=this.title + encodeURIComponent(phight);\" id=b_phfloater_posting_title_search>' + phight + '</a></b><br>';
} else {
document.getElementById('b_phfloater_wikipedia').innerHTML=phight;
document.getElementById('b_phfloater_google_translate').innerHTML=phight;
document.getElementById('b_phfloater_free_dictionary').innerHTML=phight;
document.getElementById('b_phfloater_google_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_search').innerHTML=phight;
document.getElementById('b_phfloater_category_search').innerHTML=phight;
document.getElementById('b_phfloater_tag_first_word_search').innerHTML=phight;
document.getElementById('b_phfloater_posting_title_search').innerHTML=phight;
document.getElementById('phfloater').style.top=s_top;
document.getElementById('phfloater').style.left=s_left;
document.getElementById('phfloater').style.display='block';
}
}
} else if (xsel == '') {
if (document.getElementById('phfloater')) {
document.getElementById('phfloater').style.display='none';
}
phight='';
}
}

plookforhighlight();

</script>
";
}

add_action( 'wp_footer', 'rjmprogramming_multi_js' );

?>

… and be placed into the wp-contents/plugins folder for our blog.

It’s green! What happened to the orange of yesterday? Well, we don’t want both methods to run, but along the way proved they could. So what we did with that header.php code was to change …


function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
}
setTimeout(lookforhighlight, usualdelay);
// ... blah blah
}
}

… to …


function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
}
if (!document.getElementById('phfloater')) {
setTimeout(lookforhighlight, usualdelay);
// ... blah blah
}
}
}

Previous relevant WordPress Highlight Lookups Tutorial is shown below.

WordPress Highlight Lookups Tutorial

WordPress Highlight Lookups Tutorial

We’re back at WordPress TwentyTen theme header.php change methodologies to implement some new WordPress functionality like yesterday’s WordPress Plugin Primer Tutorial in that highlighted text of a webpage is used (except that we’ve now opened it up to the non-admin WordPress blog webpages), but this time presenting an overlayed floating set of hyperlink options linking to …

  • Wikipedia
  • Google Translate
  • Free Dictionary
  • Google Search
  • Tag Search
  • Category Search
  • Tag First Word Search
  • Posting Title Search

As far as header.php code goes we add this Javascript …

<script type=’text/javascript’>

var hight=' ';

function lfhlater() {
var aswq=document.getElementsByTagName("a");
for (var iaswq=0; iaswq<aswq.length; iaswq++) {
if (aswq[iaswq].innerHTML == 'Long hover help available.') {
aswq[iaswq].innerHTML='Highlighting and long hover help.';
aswq[iaswq].title+=' ... also note that Highlighting Webpage Contents allows for Wikipedia, Google Translate, Free Dictionary and Google Search functionalities to appear';
}
}
}

function lookforhighlight() {
var usualdelay=2000, oRange=null, oRect=null, s_top='0px', s_left='5px', fourhundred=300, isfx='0';
if (hight == ' ') {
setTimeout(lfhlater, 5000);
hight='';
}
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 (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 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 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 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 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 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 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 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 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>';
} 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('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='';
}
}

</script>

… called by the changed HTML snippet as below …


<body onload='lookforhighlight(); postcalendar(); changeasfordownload(); if (cafd == cafd) { cafd=0; } else { cafd=true; } checkonl(); setTimeout(initpostedoncc, 3000); widgetcon(); precc(); courseCookies(); cookie_fonts(); is_mentioned_by(); calendar_pass(); prejustshow(); details_summary(0); '>
<div id="hfloater"></div>

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: //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.

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

Australian Indigenous Language SVG Overlay Tutorial

Posted on by
Australian Indigenous Language SVG Overlay Tutorial

Australian Indigenous Language SVG Overlay Tutorial

Meanwhile, back at “Absolute SVG Positioning (ideally with water views, and ‘Tahiti sounds nice’) Symposium” and “Image Map Admiration Society Cocktail and Drinks Don’t” we wanted to take advantage of the hours spent at the wonderful and stupendous mobilefish Image Map creator helper helping us out (along with TreatyRepublic.net‘s original map, thanks) when we created Australian Indigenous Language HTML Map Audio and YouTube Tutorial, and add some SVG overlaying into the mix, like we did with the map of India (with its image map whose co-ordinates we think we may have derived from some SVG polygons … we can’t recall, but if true we travel the whole circle back) presented with the recent HTML Map Element SVG Context Tutorial. You may recall, there we got some context going by involving the Google Chart “where of life” …

… into the re-mix, the former a wooooooorrrrrllld view and the latter a regional view. So to today, and we wanted to find a small way to link “place” and “language” regarding this “Language Map” of Australia’a first people, who have lived in Australia for many tens of thousands of years …

ABORIGINAL AUSTRALIANS ARE descendents of the first people to leave Africa up to 75,000 years ago, a genetic study has found, confirming they may have the oldest continuous culture on the planet.

We found a good List of Australian Aboriginal languages webpage, thanks, that we link to within this new SVG overlaying functionality via a W addition to the research potential and navigational aspects to this project.

Perhaps you want to use this changed HTML and Javascript and CSS aboriginal_language_regions.html image map live run link to see how this plays out in actuality?

You can also see this play out at WordPress 4.1.1′s Australian Indigenous Language SVG Overlay Tutorial.

Previous relevant HTML Map Element SVG Context Tutorial is shown below.

HTML Map Element SVG Context Tutorial

HTML Map Element SVG Context Tutorial

An improvement to yesterday’s HTML Map Element SVG Tutorial “where” type HTML map onclick type web application is to interface to some contextual Google Chart “friends” …

… the Geo Chart contextualizing at the world view and the Map Chart zooming in to a regional view. These emoji button contextualizations can happen in HTML iframe child elements via changes to the changed external Javascript mapsvg.js called by our changed HTML india_map.htm map of India web application. We hope you try this out yourself, and we’ll leave you with the External Javascript code.


// mapsvg.js
// RJM Programming
// February, 2019
// Help out web applications with map elements with area polygon subelements
// //www.rjmprogramming.com.au/PHP/Map/map.php?title=Warlpiri&onclick=y&label=[%27Lat%27,&value=%27Lon%27,%27Name%27]&data=,[-20.93221223300971,134.25275622895623,~MinxMiny~],[-20.93221223300971,141.93852996632998,~MaxxMiny~],[-27.14060932038835,141.93852996632998,~MaxxMaxy~],[-27.14060932038835,134.25275622895623,~MinxMaxy~]
// //www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?width=556&height=347&country=Places&popularity=&aregeographicals=y&title=Warlpiri&onclick=y&label=[%27Lat%27,&value=%27Lon%27|%27Name%27]&data=[-20.93221223300971|134.25275622895623|~MinxMiny~,1],[-20.93221223300971|141.93852996632998|~MaxxMiny~,1],[-27.14060932038835|141.93852996632998|~MaxxMaxy~,1],[-27.14060932038835|134.25275622895623|~MinxMaxy~,1]%20|%20[-90.0|0.0|~%20~,999999999]

function lookformap() {
var simgs=document.getElementsByTagName("img"), ioff=0; ioffy=0;
var sareas=document.getElementsByTagName("area");
var ij, iareas, what, eleadd='', pcoords, minx=0, maxx=0, miny=0, maxy=0, svgpl='', svgpld='';
var premurl='', midmurl='', postmurl='', murl='', turl='_blank';
var pregurl='', midgurl='', postgurl='', gurl='';
var preiframe='', showpreiframe=' location.href=' + "'#rjmmap'" + ';" ';
var appendto=document.body;
if (document.head.innerHTML.indexOf('mapsvg.js?eleid=') != -1) {
appendto=document.getElementById(document.head.innerHTML.split('mapsvg.js?eleid=')[1].split('&')[0].split("'")[0].split('"')[0].split('>')[0]);
if (document.body.innerHTML.indexOf(appendto.outerHTML + '</td>') == -1) {
showpreiframe=' document.getElementById(' + "'arjmmap'" + ').style.display=' + "'block'" + '; location.href=' + "'#arjmmap'" + '; ';
preiframe='<a style=text-decoration:underline;cursor:pointer; onclick="window.scrollTo(0,0);" id="arjmmap">Back to top</a><br>';
}
}
if (simgs.length > 0) {
var irect=simgs[0].getBoundingClientRect();
ioffx=Math.floor(eval(('' + irect.left).replace('px','')));
ioffy=Math.floor(eval(('' + irect.top).replace('px','')));
if (('' + simgs[0].id) != '' && preiframe != '') {
preiframe=preiframe.replace("window.scrollTo(0,0)", "location.href='#" + ('' + simgs[0].id));
}
}
for (iareas=0; iareas<sareas.length; iareas++) {
svgpl='';
svgpld='';
pcoords=sareas[iareas].coords.replace(/\ /g,',').split(',');
if (pcoords.length > 1) {
minx=eval('' + pcoords[0]);
miny=eval('' + pcoords[1]);
maxx=eval('' + pcoords[0]);
maxy=eval('' + pcoords[1]);
for (ij=2; ij<pcoords.length; ij+=2) {
if (eval('' + pcoords[ij]) < minx) { minx=eval('' + pcoords[ij]); }
if (eval('' + pcoords[eval(1 + ij)]) < miny) { miny=eval('' + pcoords[eval(1 + ij)]); }
if (eval('' + pcoords[ij]) > maxx) { maxx=eval('' + pcoords[ij]); }
if (eval('' + pcoords[eval(1 + ij)]) > maxy) { maxy=eval('' + pcoords[eval(1 + ij)]); }
}
if (retll) {
if (murl == '' && premurl == '') {
if (appendto) {
turl='rjmmap';
premurl='<br><a onclick="document.getElementById(' + "'rjmmap'" + ').style.display=' + "'block'" + '; ' + showpreiframe + ' " target="' + turl + '" title="Google Map Chart" href="//www.rjmprogramming.com.au/PHP/Map/map.php?title=';
pregurl=' <a onclick="document.getElementById(' + "'rjmmap'" + ').style.display=' + "'block'" + '; ' + showpreiframe + ' " target="' + turl + '" title="Google Geo Chart" href="//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php?width=556&height=347&country=Places&popularity=&aregeographicals=y&title=';
} else {
premurl='<br><a target="' + turl + '" title="Google Map Chart" href="//www.rjmprogramming.com.au/PHP/Map/map.php?title=';
pregurl=' <a target="' + turl + '" title="Google Geo Chart" href="//www.rjmprogramming.com.au/GeoChart/geo_chart.php?width=556&height=347&country=Places&popularity=&aregeographicals=y&title=';
}
midmurl='&onclick=y&label=' + "['Lat',&value='Lon','Name']" + '&data=';
midgurl='&onclick=y&label=[%27Lat%27,&value=%27Lon%27|%27Name%27]&data=';
postmurl='">&#128205;</a>';
postgurl='%20|%20[-90.0|0.0|~%20~,999999999]">&#128506;</a>';
if (('' + sareas[iareas].title) == '') {
murl=premurl + encodeURIComponent('Place') + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]' + postmurl;
gurl=pregurl + encodeURIComponent('Place') + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;
} else {
murl=premurl + encodeURIComponent('' + sareas[iareas].title) + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]' + postmurl;
gurl=pregurl + encodeURIComponent('' + sareas[iareas].title) + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;
}
if (appendto) {
appendto.innerHTML+=preiframe + '<iframe id=rjmmap name=rjmmap style="display:none;width:100%;height:600px;" src="//www.rjmprogramming.com.au/"></iframe>';
}
} else if (murl == '') {
if (('' + sareas[iareas].title) == '') {
murl=premurl + encodeURIComponent('Place') + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]"' + postmurl;
gurl=pregurl + encodeURIComponent('Place') + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;
} else {
murl=premurl + encodeURIComponent('' + sareas[iareas].title) + midmurl + ',[' + retll(minx,miny) + ',~MinxMiny~],[' + retll(maxx,miny) + ',~MaxxMiny~],[' + retll(maxx,maxy) + ',~MaxxMaxy~],[' + retll(minx,maxy) + ',~MinxMaxy~]"' + postmurl;
gurl=pregurl + encodeURIComponent('' + sareas[iareas].title) + midmurl + '[' + retll(minx,miny).replace(',','|') + '|~MinxMiny~,1],[' + retll(maxx,miny).replace(',','|') + '|~MaxxMiny~,1],[' + retll(maxx,maxy).replace(',','|') + '|~MaxxMaxy~,1],[' + retll(minx,maxy).replace(',','|') + '|~MinxMaxy~,1]' + postgurl;
}
}
}
for (ij=0; ij<pcoords.length; ij+=2) {
svgpl+=svgpld + eval(-minx + eval('' + pcoords[ij])) + ',' + eval(-miny + eval('' + pcoords[eval(1 + ij)]));
svgpld=' ';
}
if (appendto) {
appendto.innerHTML+='<div title="' + sareas[iareas].coords + '" id=dsa' + iareas + ' style="position:absolute;left:' + eval(minx + ioffx) + 'px;top:' + eval(miny + ioffy) + 'px;width:' + eval(maxx - minx) + 'px;height:' + eval(maxy - miny) + 'px;display:none;"><svg height="100%" width="100%"><polygon points="' + svgpl + '" style="fill:lime;stroke:purple;stroke-width:1" /></svg></div>';
if (('' + sareas[iareas].title) != '' || murl != '') {
appendto.innerHTML+='<div title="' + sareas[iareas].coords + '" id=dtsa' + iareas + ' style="position:absolute;left:' + eval(eval(minx + ioffx) + eval(eval(maxx - minx) / 4)) + 'px;top:' + eval(eval(miny + ioffy) + eval(eval(maxy - miny) / 4)) + 'px;font-size:8px;display:none;">' + ('' + sareas[iareas].title) + murl + gurl + '</div>';
}
}
murl='';
gurl='';
}
}
}

setTimeout(lookformap, 3000);

Previous relevant HTML Map Element SVG Tutorial is shown below.

HTML Map Element SVG Tutorial

HTML Map Element SVG Tutorial

Hang around reading at this blog long enough, or just read Legend for and from HTML Map Element CSS Tutorial below, and we think you’ll get the gist of what high regard we have for the HTML map element in these here parts. On many an occasion we’ve recommended the use of the brilliant Mobilefish “create your own image map” functionality to create these. We do not resile from this advice today. What we are “joining up” today is the phase after all that hard work creating the HTML map element, and doing more advanced “presentation feeling” functionalities when using that HTML map element, all possible due to that …

Area Graph challenge primarily revolved around how to create polygonal backgrounds, and here we got great help from both encasing SVG within an absolutely positioned HTML div in order to control SVG positioning (thanks heaps) and regarding Area Chart looks to end up with some Area Graph only Javascript …

if (document.getElementById('h1column').innerHTML == 'Area') { // thanks to https://stackoverflow.com/questions/41988955/absolute-positioning-of-svg-element-not-working and https://datavizcatalogue.com/methods/area_graph.html
var mintop=Math.min(eval('' + document.getElementById('hrlg' + lasthr).style.top.replace('px','')), eval('' + document.getElementById('hrlg' + hrlgcnt).style.top.replace('px','')));
var minleft=Math.min(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')), eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')));
var thisheight=Math.abs(zerozeroy - mintop);
var thiswidth=Math.abs(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')));
var az='<div class="svg-container" style="opacity:0.5;position:absolute;top:' + Math.floor(eval(14 + mintop)) + 'px;left:' + Math.floor(minleft) + 'px;width:' + Math.floor(thiswidth) + 'px;height:' + Math.floor(thisheight) + 'px;"><svg height="100%" width="100%"><polygon points="'; //0,0 ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) / 2)) + ',0 ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) / 2)) + ',' + Math.floor(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset)))) + ' ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) / 2)) + ',' + Math.floor(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset)))) + '" style="fill:lime;stroke:purple;stroke-width:1" /></svg></div>';
az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - minleft) + ',';
az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.top.replace('px','')) - mintop) + ' ';
az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')) - minleft) + ',';
az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.top.replace('px','')) - mintop) + ' ';
az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')) - minleft) + ',';
az+='' + Math.floor(eval(eval(eval('' + zerozeroy)) - mintop)) + ' ';
az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - minleft) + ',';
az+='' + Math.floor(eval(eval(eval('' + zerozeroy)) - mintop)) + ' ';
az+='" style="fill:' + acol + ';stroke:purple;stroke-width:1" /></svg></div>';
document.getElementById('daxes').innerHTML+=az;
}

… half the day gone

… idea from HTML Square Horizontal Rule Four Graphs Tutorial the other day.

Do you remember our map of India web application that allows you to click on a state of India, the boundaries for which were derived via mobilefish work (or another approach you can think of yourself, perhaps)? See below, how with the “After” version, you can click on an Indian state and be shown the ancilliary information, as ever, but also now, via a new HTML area tag new onclick event Javascript function …


function checkdsa(ath) {
var zr=0, zf=false;
if (document.getElementById('dsa0')) {
while (!zf) {
if (document.getElementById('dsa' + zr)) {
if (document.getElementById('dsa' + zr).title == ath.coords) {
zf=true;
} else {
zr++;
}
} else {
zf=true;
zr=-1;
}
}
} else {
zr=-2;
}
if (zr >= 0) {
document.getElementById('dsa' + zr).style.display='block';
if (document.getElementById('dtsa' + zr)) {
document.getElementById('dtsa' + zr).style.display='block';
}
}
}

… that you may be intrigued about regarding the uncertainty of the code snippet if (document.getElementById(‘dsa0′)) ? Well, that ‘dsa0′ (and others of its ilk) are HTML div elements, created or not, depending on …

  • existence of new external Javascript (via the new parent HTML call) …

    <script src='mapsvg.js?eleid=svgd' type='text/javascript'></script>
  • existence of HTML area elements (as subelements of an HTML map element)
  • existence of an HTML img element (we assume first such element is one underpinning the map element above)

… and all being so that new external Javascript below happens, to create those ‘dsa0′ type HTML div elements that overlay green SVG elements on top once the user has visited (like CSS :visit) (as well as overlaying further any HTML area tag title property (should that exist, and for the edification of the user)) …


// mapsvg.js
// RJM Programming
// February, 2019
// Help out web applications with map elements with area polygon subelements

function lookformap() {
var simgs=document.getElementsByTagName("img"), ioff=0; ioffy=0;
var sareas=document.getElementsByTagName("area");
var ij, iareas, what, eleadd='', pcoords, minx=0, maxx=0, miny=0, maxy=0, svgpl='', svgpld='';
var appendto=document.body;
if (document.head.innerHTML.indexOf('mapsvg.js?eleid=') != -1) {
appendto=document.getElementById(document.head.innerHTML.split('mapsvg.js?eleid=')[1].split('&')[0].split("'")[0].split('"')[0].split('>')[0]);
}
if (simgs.length > 0) {
var irect=simgs[0].getBoundingClientRect();
ioffx=eval(('' + irect.left).replace('px',''));
ioffy=eval(('' + irect.top).replace('px',''));
}
for (iareas=0; iareas<sareas.length; iareas++) {
svgpl='';
svgpld='';
pcoords=sareas[iareas].coords.replace(/\ /g,',').split(',');
if (pcoords.length > 1) {
minx=eval('' + pcoords[0]);
miny=eval('' + pcoords[1]);
maxx=eval('' + pcoords[0]);
maxy=eval('' + pcoords[1]);
for (ij=2; ij<pcoords.length; ij+=2) {
if (eval('' + pcoords[ij]) < minx) { minx=eval('' + pcoords[ij]); }
if (eval('' + pcoords[eval(1 + ij)]) < miny) { miny=eval('' + pcoords[eval(1 + ij)]); }
if (eval('' + pcoords[ij]) > maxx) { maxx=eval('' + pcoords[ij]); }
if (eval('' + pcoords[eval(1 + ij)]) > maxy) { maxy=eval('' + pcoords[eval(1 + ij)]); }
}
for (ij=0; ij<pcoords.length; ij+=2) {
svgpl+=svgpld + eval(-minx + eval('' + pcoords[ij])) + ',' + eval(-miny + eval('' + pcoords[eval(1 + ij)]));
svgpld=' ';
}
if (appendto) {
appendto.innerHTML+='<div title="' + sareas[iareas].coords + '" id=dsa' + iareas + ' style="position:absolute;left:' + eval(minx + ioffx) + 'px;top:' + eval(miny + ioffy) + 'px;width:' + eval(maxx - minx) + 'px;height:' + eval(maxy - miny) + 'px;display:none;"><svg height="100%" width="100%"><polygon points="' + svgpl + '" style="fill:lime;stroke:purple;stroke-width:1" /></svg></div>';
if (('' + sareas[iareas].title) != '') {
appendto.innerHTML+='<div title="' + sareas[iareas].coords + '" id=dtsa' + iareas + ' style="position:absolute;left:' + eval(eval(minx + ioffx) + eval(eval(maxx - minx) / 4)) + 'px;top:' + eval(eval(miny + ioffy) + eval(eval(maxy - miny) / 2)) + 'px;font-size:8px;display:none;">' + ('' + sareas[iareas].title) + '</div>';
}
}
}
}
}

setTimeout(lookformap, 3000);

After Before

Previous relevant Legend for and from HTML Map Element CSS Tutorial is shown below.

Legend for and from HTML Map Element CSS Tutorial

Legend for and from HTML Map Element CSS Tutorial

Our “Legend for and from HTML Map Element” blog posting thread continues today wrapping up a few issues and fixing some bugs, discovering for the first time for us, a true use for multiple background images, so please read on for more information, from our list of today’s major changes below …

  • CSS for Legend links to be brighter and the SVG overlay be brighter and wider and less opaque … ideas from this link … thanks
  • Feed more category four “HTML Url” candidates through PHP file_get_contents code
  • Default becomes to sort any shown labels, but allow for the original order of shown labels to be chosen to be shown by the user, as required
  • Fix background-repeat: no-repeat; desire (we had days ago) by adding a second white background image into the mix … ideas from this link … thanks
  • Fix relative image Urls, that start with “/”, and not containing “:”, logic to be prefixed by parent’s Url home directory, to effectively turn all relative Urls to absolute ones when attempting to use this image as a background image for a Legend component
  • Allow for shape=”rect” and shape=”circle” HTML Map Area tag scenarios
  • Allow for long “HTML Itself” entries by immediately running its underlying logic via the HTML textarea’s onchange event, rather than relying on a GET parameter that may cause a request-uri too long web server length overflow 441 error

… so here are some newly possible, or newly okay to look at, executions of this web application …

  • Solar System … which uses shape=”rect”
  • NYS Compost Clearinghouse … which uses shape=”circle” and is from a totally unrelated domain … so, thanks … and the other thing here is that you could take the HTML text off the popup window and feed it into the “HTML Itself” textarea (prefixing the Image src= with “//compost.css.cornell.edu/maps/”) to see what happens as you tab out of the textarea

… and remember our ill-prepared window.postMessage scenario at the associated but different domain …

… and our window.postMessage scenarios at the associated but different domain …

… and our same-domain scenarios …

Today’s HTML and Javascript web application legend_via_map.htm (still helped out by “sometimes called” PHP child iframe coding logic in legend_via_map.php) changed in this way for the issue list at the top of the blog posting, and you can try it out with this live run link.

And so we think today that we can give this blog posting thread a rest for a while to turn towards other matters tomorrow. Hope to see you then, or perhaps that you drill down further into today’s concepts by a revisit, perhaps, to yesterday’s Legend for and from HTML Map Element Ajax Tutorial as shown below.

Previous relevant Legend for and from HTML Map Element Ajax Tutorial is shown below.

Legend for and from HTML Map Element Ajax Tutorial

Legend for and from HTML Map Element Ajax Tutorial

Okay, so we find ourselves at the “HTML Url” last category section for Urls that you do not have the wherewithall to control anything about, unlike yesterday’s controllable and co-operative arrangements using window.postMessage techniques that we outlined with Legend for and from HTML Map Element Cross-Domain Tutorial as shown below.

Let’s just show this “HTML Url” inhouse categorization we explained last time, again …

  • Urls of domain “//www.rjmprogramming.com.au” … which function in all aspects sending and reading the details of the HTML map element via an HTML iframe element … and …
  • Urls of local web server, in our case a MAMP one via “HTTP://localhost:8888″ ones … which function in all aspects sending and reading the details of the HTML map element via an HTML iframe element … and …
  • Urls of domain “//members.ozemail.com.au” (with Url containing “/~mkuulma/”) … which (used not to, but now) function, via the individualized code changes we talk about below, in all aspects sending and reading the details of the HTML map element via an HTML iframe element, and making use of “windows.postMessage” logic … and …
  • Other Urls … that the best we can do, so far, with our blog post threads, is to open via “window.open” popup window, but not be able to extract the HTML map element, in order to be able to create a Legend on the right hand side … more on this one into the future

… and so it is that fourth category we are addressing today, and we address it, or attempt to, in the order …

… all of which, as far as hooking up with an HTML iframe “presentation” go are dubious, so the raw HTML map containing webpage will more than likely get presented in a “window.open” popup window that will be a separate tab or window on mobile devices, but may sit over the place at the left where, up until now, we’ve happily been “iframing” away.

You may recall yesterday’s window.postMessage web application missing the necessary window.postMessage logic?

You’ll probably find the left hand link above does work now, and in an HTML iframe “presentation” because of today’s new considerations.

Today’s HTML and Javascript web application legend_via_map.htm (now helped out by “sometimes called” PHP child iframe coding logic in legend_via_map.php) changed in this way and you can try it out with this live run link. We hope you find this Ajax request and JSONP and PHP file_get_contents method ideas food for thought for your own endeavours.

Previous relevant Legend for and from HTML Map Element Cross-Domain Tutorial is shown below.

Legend for and from HTML Map Element Cross-Domain Tutorial

Legend for and from HTML Map Element Cross-Domain Tutorial

We’re talking about cross-domain issues today, and the wonderful window.postMessage messaging method to talk between parent HTML windows and child HTML iframe windows that aren’t on the same domain. But before you get too excited, it takes co-operation on both sides to make this happen … perhaps, Curb Your Enthusiasm … finished … good … because this is pretty suave.

So within the “HTML Url” input section workings of our latest “Legend of HTML Map Element” thread of blog posting web applications, after that last Legend for and from HTML Map Element Overlay Tutorial one, we now have the scenarios …

  • Urls of domain “//www.rjmprogramming.com.au” … which function in all aspects sending and reading the details of the HTML map element via an HTML iframe element … and …
  • Urls of local web server, in our case a MAMP one via “HTTP://localhost:8888″ ones … which function in all aspects sending and reading the details of the HTML map element via an HTML iframe element … and …
  • Urls of domain “//members.ozemail.com.au” (with Url containing “/~mkuulma/”) … which (used not to, but now) function, via the individualized code changes we talk about below, in all aspects sending and reading the details of the HTML map element via an HTML iframe element, and making use of “windows.postMessage” logic … and …
  • Other Urls … that the best we can do, so far, with our blog post threads, is to open via “window.open” popup window, but not be able to extract the HTML map element, in order to be able to create a Legend on the right hand side … more on this one into the future

Today we’re concentrating on that third one and have had great help from that previous link and this other link … thanks … to construct working cross-domain child iframe examples of …

… as distinct from another web application without the cross-domain iframe to use window.postMessage logic, as for …

Stop Press

As of recently the left link above will probably work, but it remains the case that its coding has not had any window.postMessage logic added to it. We’ll be explaining this with tomorrow’s tutorial.

… luckily for internet users worried about security breaches that can happen if care is not applied with this functionality.

So, below, is the Javascript code applied, the same, for each of the child HTML iframe web applications as above …


<script type='text/javascript'>
// Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage with code below ...

// Called sometime after postMessage is called
function receiveMessage(event) {
// Do we trust the sender of this message?
if (event.origin !== "//www.rjmprogramming.com.au") {
return;
}

if (document.URL.indexOf("/~mkuulma/") != -1) {
if (event.source == window.opener) {
if (event.data == "hello there!") {

// Assuming you've verified the origin of the received message (which
// you must do in any case), a convenient idiom for replying to a
// message is to call postMessage on event.source and provide
// event.origin as the targetOrigin.
event.source.postMessage(document.body.innerHTML + " Hello RJM Programming! the secret response " +
"is: av-a" + "-car-do!",
event.origin);
}
}
}
}

if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage);
}
</script>

… and in the parent HTML Javascript code …


<script type='text/javascript'>
var popup=null, rawurl;
function receiveMessage(event) {
// Do we trust the sender of this message? (might be
// different from what we originally opened, for example).
if (event.origin !== "//members.ozemail.com.au") {
return;
}

// event.source is popup
// event.data is document.body.innerHTML + " Hello RJM Programming! the secret response is: av" + "-a-car-do!"
if (event.source == popup) {
if (event.data.indexOf('av-a-' + 'car-do!') != -1) {
rawhtml=event.data.split('</html>')[0] + '</html>';
checkins();
}
}
}

function crossdomainiframe() {

var thisurl=xrawurl;
if (popup) {
// When the popup has fully loaded, if not blocked by a popup blocker:
// This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'admin' and the password is 'av-a-c" + "ar-do!'",
"//members.ozemail.com.au");

// This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
popup.postMessage("hello there!", "//members.ozemail.com.au");

if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage);
}
} else {
setTimeout(crossdomainiframe, 2000);
}
}
function check_if(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (rawurl.indexOf('rjmprogramming.com.au') == -1) {
popup=aconto;
crossdomainiframe();
} else {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
rawhtml=aconto.body.innerHTML;
checkins();
}
}
}
}
}
</script>

… and so we come to today’s HTML and Javascript web application legend_via_map.htm that changed in this way and you can try it out with this live run link. We hope you find this cross-domain information interesting.

Previous relevant Legend for and from HTML Map Element Overlay Tutorial is shown below.

Legend for and from HTML Map Element Overlay Tutorial

Legend for and from HTML Map Element Overlay Tutorial

We’re continuing on from Legend for and from HTML Map Element Primer Tutorial as shown below, today, putting our Legend into context with respect to the underlying HTML map element’s contents, honing in on the “for” of today’s blog posting title, as distinct from that previous tutorial’s concentration on the “from”. This is our second draft, but I’d be surprised if it’s our last, as it needs more work and functionality, perhaps.

These changes to the HTML and Javascript code today involved “overlay” principles and the use of background images and their positioning with Javascript DOM dynamic CSS “background-position” settings being made to the upcoming Legend elements, on the fly.

Two of the usual “overlay” CSS suspects coming into play were …

We’ve called today’s HTML and Javascript web application legend_via_map.htm that changed in this way and you can try it out with this live run link.

We’ve collected second draft “cakes” of just clientside HTML and Javascript usage, and channeling that great HTML5 Rocks information from this great link, below …

Previous relevant Legend for and from HTML Map Element Primer Tutorial is shown below.

Legend for and from HTML Map Element Primer Tutorial

Legend for and from HTML Map Element Primer Tutorial

Have you ever noticed the synergies between the HTML map element and the HTML table element? What would happen if we, in broad brush terms …

  • change “map” to “table” … and …
  • change “area” to “tr-td-a-svg-polygon” (“/area” to “/polygon-/svg-/a-/td-/tr”)

? Well, we think we’d be close to getting a “legend” of a map or some other type of data, perhaps.

So we have started down the road towards this idea with our first draft of just clientside HTML and Javascript, and channeling that great HTML5 Rocks information from this great link, thanks, to allow you to “Browse” (button) for local HTML files, as well as the ability to browse an HTML url or just feed in the raw HTML into an HTML textarea element we provide within an HTML form (method=GET and sending data back to this same web application). And what is that web application? We’ve called it legend_via_map.html and you can try it out with this live run link. Ahead of time we “baked a cake” with some examples of usage below …

If you’re looking to create your own HTML map web application we highly recommend the use of the great Mobilefish “create your own image map” functionality.

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

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

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

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

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

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

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

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

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

Javascript and PHP Base64 Primer Tutorial

Posted on by
Javascript and PHP Base64 Primer Tutorial

Javascript and PHP Base64 Primer Tutorial

We’ve long been interested in all of the PHP functions…

… to facilitate the transfer of sizeable amounts of data within PHP or from HTML to PHP via a form (sometimes method=POST) element.

If there is no form involved and/or if there is a small amount of data (in a form method=GET) you could get by just with HTML to HTML and using Javascript …

… but just recently we had an occasion (and then another) to start getting interested in Javascript Base64 conversion usages, using …

… when we presented …

… and if memory serves me correctly, we first started using btoa and atob to help with …

  • creating a background image for an HTML element via a Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI (and think perhaps the reason to “go data URI” is that data URIs are great in emails where if an email attachment is downloaded a data URI (as distinct from an absolute or relative URL) is self contained and transportable) … but recently we’ve started looking at btoa and atob even more because …
  • to send base64 (converted ascii or graphic data) in an HTML form to a PHP destination avoids the need that we seem to often face (but please research enctype for other thoughts here) where we need to go (in PHP, something like) …

    $phpvar = str_replace('+', ' ', urldecode($_POST['fieldposted']));

    … a really kludgy and annoying thing for us because what if that $_POST['fieldposted'] has legitimate text like …

    1 + 1 = 2
    … not …
    1 + 1 = 11

    … to use syntax above is wrong … and so in today’s proof of concept (btoa_atob_base64.php‘s) live run we deliberately entered …

    The rain +
    in Spain +
    falls mainly +
    on the plain.

    … to show you that, indeed, the use of Javascript btoa at the form’s onsubmit (form) event can help accurately be interpreted by any destination PHP (here’s looking at you, kid) via …

    <?php
    // …

    echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";

    // …
    ?>
    … type of PHP code, and never interpret the data incorrectly

Clearly, if you are not asleep, you’re interested, and we hope this helps, or clarifies, a little!

You can also see this play out at WordPress 4.1.1′s Javascript and PHP Base64 Primer Tutorial.

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

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