Emoji Overlay Share Tutorial

Posted on by
Emoji Overlay Share Tutorial

Emoji Overlay Share Tutorial

Yesterday’s start with Emoji Overlay ideas (we presented via Emoji Overlay Primer Tutorial as shown below) was okay, but as of yesterday, had a dose of the “unaccountables” about it. And when you have a piece of software with the potential to be a “tool” or component in another software plan of some sort, a lack of accountability is a bit of a weakness. This “accountability”, to us, is the way a user can recall something about a software process that yielded something useful for them. If that “something useful” cannot be saved, and used by the user who created it, in their own personal way, then, in our books, it’s really “not that useful”.

If Emojis were images this saving process, or Share process, as you often see with modern software, would be a lot easier, but Emojis Overlaid are tied to the HTML that makes them work, and controls their opacity, and in this way, the Share options are more limited than you might think, so we proceed on the following two basis points … and if there are more than two shown below, we thought of others …

  • we’ll present the Emoji Overlay in a separate (popup) window.open via …

    var nw=window.open("","_blank","top=50,left=50,height=400,width=200");
    nw.document.write('<!doctype html><html><head><meta charset="UTF-8"><title>Your Emoji Overlay courtesy of RJM Programming http://www.rjmprogramming.com.au/HTMLCSS/emoji_overlay.htm</title></head><body>' + what + '</body></html>');
  • we’ll attempt to email the Emoji Overlay (as an HTML file attachment) via our serverside PHP email helper you could call emoji_overlay_emailer.php … but we think we need more work on this bit … and it is interesting to note that using a right click or two finger gesture on the window.open Emoji Overlay above and choosing an Email or Mail option will result in an attachment not containing any opacity considerations (hence our wish for this PHP mail technique to work)
  • yes … we thought of using an HTML(5) canvas element, and its brilliant toDataURL method to allow for a popup window.open from which an Emoji Overlay image can be copied and we access the user’s local email client ready for you to fill in a proper email address and perhaps copy into the body section your Emoji Overlay image copy … but more to work on with opacity here

Happy Emoji overlaying and sharing with our HTML and Javascript emoji_overlay.htm (which changed in this way to have some Share functionality) and its live run, supervising our HTML and Javascript emoji_slideshow.html changed this way and we talked about at
Emoji Random Slideshow Category Tutorial as shown way below.

Previous relevant Emoji Overlay Primer Tutorial is shown below.

Emoji Overlay Primer Tutorial

Emoji Overlay Primer Tutorial

Overlay, overlay, arriba! It’s time to look under the carpet to get to the heart of our continuing love affectionate affair with “overlay” concepts. What about the idea to overlay Emojis. After all, they look so friendly, we can see them (shag) piling on top of each other as soon as the humans turn away from watching the screen … just ask your pets, left behind looking at the “glowing thing” in our lives.

First, we need a proof of concept idea, and in doing today’s Emoji Overlay Proof of Concept we remind you of another set of parent/child (webpage-parent/iframe-child) that helps us, at least, with our modularization “dreams”, perchance …

Have the HTML iframe element child, doing most of the work, act differently depending on how they are supervised (by a parent to the HTML iframe element)

… pretty pithy, huh?! But seriously, this …


<script type='text/javascript'>
if (parent.[functionName]([argument])) { // iframe is supervised in a particular way and this parent function
// can do this bit of work
} else if (parent.document.getElementById([parentWebPageElementIdOfInterest])) { // iframe is supervised in a particular way and
// as a hard working child we'll do this and this and this and this and then bring in the dirty laundry and wash the dishes
} else {
// we'll order that pina colada and dream of Tahiti in the summertime ... oops, just got a call
}
</script>

… exemplified by …


document.getElementById('myh4').innerHTML = 'Codepoint: <a onclick=" if (parent.testcallcsv(\'\')) { parent.testcallcsv(-' + postfw + '); } " target=_blank title="Google search" href="https://www.google.com.au/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '">' + postfw + '</a>';

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

  • position:absolute property
  • opacity … and though it was optional for today’s work, we also included the third often used “overlay” CSS “player” … namely …
  • z-index

Happy Emoji overlaying with our HTML and Javascript emoji_overlay.html and its slideshow live run, supervising our HTML and Javascript emoji_slideshow.html changed this way and we talked about at
Emoji Random Slideshow Category Tutorial as shown below.

Previous relevant Emoji Random Slideshow Category Tutorial is shown below.

Emoji Random Slideshow Category Tutorial

Emoji Random Slideshow Category Tutorial

With the “Random Emoji Slideshow” project, we last talked about at Emoji Random Slideshow Cookie Tutorial, as shown below, we’ve decided to “categorize” the web application, as a means by which you may target the emoji of interest, perhaps.

So, following the lead of this useful Wikipedia webpage, thanks, as with WordPress 4.1.1’s Emoji Random Slideshow Category Tutorial, we worked out some Codepoint ranges for current and future emoji categories as below …

In doing this, we opened up the “Any” categorization to now include what is in the “Miscellaneous” and “Supplementary” and “Dingbats” categories above, to improve the “range of randomness” … sounds like a good name for a novel or film … for our web application.

Here’s a video (that we created using the “New Screen Recording” functionality of QuickTime Player using Mac OS X on a MacBook Pro laptop) we took of a couple of sessions of “Random Emoji Slideshow” for an “Emoticon” category for …

… and using this new functionality above and yesterday’s Web Application HTML Reporter Tool Genericization Tutorial new functionality, for you to peruse at your leisure …

So we hope you find the emoji of your dreams, and that we can say “HappyDeliriousEcstatic Emoji making” with our new HTML and Javascript emoji_slideshow.html changed this way, and its slideshow live run. Again we hope you try it out … and, when some of the deliriumecstacy subsides, share your experience!

Previous relevant Emoji Random Slideshow Cookie Tutorial is shown below.

Emoji Random Slideshow Cookie Tutorial

Emoji Random Slideshow Cookie Tutorial

HTTP Cookies can be a web browser “intersession” or “intrasession” tool … in that “internet” versus “intranet” feeling way … for web applications such as the one we are currently working on, the “Random Emoji Slideshow”, which we last talked about, yesterday, with Emoji Random Slideshow Sharing Tutorial as shown below.

In that tutorial yesterday we counted under the Accountability “banner” the idea of “remembering the random emojis on any given session” and suggested that …

Javascript DOM and/or HTTP Cookies can usually handle such jobs

… but, today, we’re here to tell you that bundling “HTTP Cookies” in with “Javascript DOM” above is selling “HTTP Cookies” short … mind you, it is confusing to think, that you work HTTP Cookies via Javascript DOM … but we digress … and the reason is that this “intrasession” talk is true for both of those, but the additional use of “HTTP Cookies”, as you will see today, we hope, adds that “intersession” extra functionality that impresses (or maybe annoys) internet users so much, who shop online, and get hounded back to products they might like on revisiting the online, usually e-commerce, website. This joy, or annoyance, can be put down to “HTTP Cookies”, those web browser information storage repositories.

The bottom line, for us, is that once you …

  • deliberately “snapshot” a “Random Emoji Slideshow” session via a new emoji “button” 💾🍪 … and/or …
  • finish a “Random Emoji Slideshow” session

… you have set up the means by which you can “recall” a previous session’s snapshot (in time … ie. in an “intersession” way) or, with that first one of above, even, a reset of the current session to the “saved” snapshot session (ie. in an “intrasession” way), by using HTTP Cookie functionality. This is assuming you allow “HTTP Cookie” usage on your web browser, of course. All this being the case our “Random Emoji Slideshow” web application reflects this capability by showing you a Javascript DOM dynamically added (at the document.body onload event) emoji “button” 🔂🍪

Here’s a video (that we created using the “New Screen Recording” functionality of QuickTime Player using Mac OS X on a MacBook Pro laptop) we took of a couple of sessions of “Random Emoji Slideshow” and using this new functionality, for you to peruse at your leisure …

So, what’s the go for trapping the second scenario above, given a user who never clicks the emoji “button” 💾🍪? The event of use here, for us, is the onunload event.

As you can surmise here, “HTTP Cookies” can do away with databases (or web server files) if …

  1. there is not much data to consider … the limit is like the limit of length to an address bar URL …
  2. the data is simple, generally … HTML, for instance, is not ideal …
  3. you can put up with nullifications outside your control that happen when relevant web browser HTTP Cookies are cleared by the user
  4. you can put up with nullifications inside the control of the writer of the Javascript DOM code, regarding the expiry date that is placed on the HTTP Cookies coded for

We get around point 2 above, for instance, by just saving into the HTTP Cookie a Codepoint integer value list, via …


var firstemojilist=true;
var emojisaved=false;
var startemojilist=null;
var ouval="";
var oudelim="";

function dothis() {
var postfw, fw=Math.floor((Math.random()*firstbytes.length)+0);
try {
postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + (firstbytes[fw] + srangebytes[fw]).codePointAt(0));
} catch(e) {
postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + fixedCharCodeAt((firstbytes[fw] + srangebytes[fw]), 0));
}
if (bcol != "YELLOW") {
document.getElementById('myh4').innerHTML = '';
document.getElementById('re').innerHTML = '&nbsp;';
} else {
document.getElementById('myh4').innerHTML = 'Codepoint: <a target=_blank title="Google search" href="https://www.google.com.au/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '">' + postfw + '</a>';
document.getElementById('re').innerHTML = '<a style=text-decoration:none; target=_blank title="Google search" href="https://www.google.com.au/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '">' + String.fromCodePoint(postfw) + '</a>';
cnt++;
if (eval(cnt) > 1200) {
cnt = 1;
document.getElementById('sessiontr').innerHTML = "";
ouval="";
oudelim="";
}
var carr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var ired = Math.floor(Math.random() * 127);
var igreen = Math.floor(Math.random() * 127);
var iblue = Math.floor(Math.random() * 127);
var colhuh = '#f' + carr[Math.floor(eval(ired) % 16)] + 'f' + carr[Math.floor(eval(igreen) % 16)] + 'f' + carr[Math.floor(eval(iblue) % 16)]; // + carr[Math.floor(derived_sentences[sentencepick].length / 16)] + carr[Math.floor(derived_sentences[sentencepick].length % 16)] + carr[Math.floor(derived_sentences[sentencepick].length / 16)] + carr[Math.floor(derived_sentences[sentencepick].length % 16)]
document.getElementById('sessiontr').innerHTML += '<td id=td' + cnt + ' style="font-size:18px;background-color:' + colhuh + ';">' + document.getElementById('myh4').outerHTML + '<br>' + document.getElementById('re').outerHTML + '</td>';
ouval+=oudelim + postfw;
oudelim=",";
}
}

function saveemoji() {
var expiredate = new Date();
expiredate.setYear(expiredate.getFullYear()+1);
if (!emojisaved) {
if (document.getElementById('sessiondiv').style.visibility == 'visible') ouval=(ouval + ' ').replace(',', ' ,');
document.cookie = "emojilist=" + ouval + ";expires=" + expiredate.toGMTString() + ';path=/';
startemojilist = cookievalue("emojilist");
}
emojisaved=true;
}

… rather than try to store the whole document.body.innerHTML … what kind of fool would do that?! I mean … really …oops … and then expand on that list to recreate that previous session’s look via the HTTP Cookie stored “hints”.

We reached the point where we can say “HappyDelirious Emoji making” with our new HTML and Javascript emoji_slideshow.html changed this way, and its slideshow live run. Again we hope you try it out … and, when some of the delirium subsides, share your experience!

Previous relevant Emoji Random Slideshow Sharing Tutorial is shown below.

Emoji Random Slideshow Sharing Tutorial

Emoji Random Slideshow Sharing Tutorial

Accountability and sharing are feature words for our functionality improvements on yesterday’s Random Emoji Slideshow we presented with Emoji Random Slideshow Primer Tutorial yesterday.

  1. Accountability is achieved by remembering the random emojis on any given session should the user be interested, and the means by which this is done in the web application, is by Javascript DOM … no databases nor server-side code. If your promise to do with accountability concerns only the session the user is on, then Javascript DOM and/or HTTP Cookies can usually handle such jobs. Our Javascript DOM functionality works via …
    • an HTML div element is appended to the HTML body element innerHTML property is the “parent” to “child” elements below, that has style properties …
      • overflow-x:scroll to allow for horizontal scrolling, and you’ll know if you’re a regular reader the overflow anything CSS property is a favourite of ours regarding that CSS topic “theme” of “reveal” we like at this blog
      • -webkit-overflow-scrolling:touch to allow for momentum scrolling on mobile devices (as we did with Image in Nine Game Hide and Seek Tutorial)
      • visibility:hidden to allow for user controllable visibility of this functionality that occurs by clicking the ➕➕ emoji “buttons”, which uses Javascript DOM to make the HTML div above “visible” (and you may want to read Karaoke via YouTube API in Iframe Primer Tutorial regarding the differences between this method versus the setting of the display property, alternative approach)
    • an HTML table element (and, like for Karaoke via YouTube API in Iframe Email Tutorial, channelled some of the thinking regarding HTML table element border attributes to be quite big numerical values … though we, again, tone that down a bit for today’s purposes … which we talked about with Holes Web Application Primer Tutorial) with one HTML tbody element with one HTML tr (row) element … encasing …
    • many HTML td cell elements created on the fly, the content coming from a snapshot of the current emoji (using outerHTML Javascript DOM properties), and the Javascript DOM achieving it by appending that content to the HTML tr (row) element above innerHTML property … as per …

      document.getElementById('sessiontr').innerHTML += '<td id=td' + cnt + ' style="font-size:18px;background-color:' + colhuh + ';">' + document.getElementById('myh4').outerHTML + '<br>' + document.getElementById('re').outerHTML + '</td>';
  2. Sharing functionality is approached by allowing for emailing snapshots of an Emoji Slideshow session … via …
    • taking the existing (email via PHP mail) functionality we had established after …

      child PHP legend_via_map.php changed in this way for email functionality

      … from Karaoke via YouTube API in Iframe Email Tutorial we tweak this PHP coding to be able to manage HTML email attachments via the new child PHP legend_via_map.php changed in this new way … where …

    • the email client “branch” of this functionality is unavailable to us with today’s work, because a mailto: HTML a link element cannot feed into a “text/html” email, but rather, only, the default “text/plain” (no attachment) mailto usage … invoked by …
    • the clicking of an 📧 emoji “button” to ask for an emailee email address, and then off to the PHP code above via an HTML form action via a target pointing at an HTML iframe element, all invisible to the user, very similar to how we did email functionality in the Karaoke via YouTube API in Iframe Email Tutorial

So, again, we say “Happy Emoji making” with our new HTML and Javascript emoji_slideshow.html changed this way, and its slideshow live run. We hope you try it out … and share your experience!

Stop Press

Yes, you were right, you who predicted the weakness with the prototype code design above. What if somebody leaves it running forever? Yes, the web browser suffers … event-u-ally, so we’ve changed (the main Javascript function of use) as below …


function dothis() {
var postfw, fw=Math.floor((Math.random()*firstbytes.length)+0);
try {
postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + (firstbytes[fw] + srangebytes[fw]).codePointAt(0)); //Math.floor((Math.random()*rsize[fw])+0));
} catch(e) {
postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + fixedCharCodeAt((firstbytes[fw] + srangebytes[fw]), 0)); //Math.floor((Math.random()*rsize[fw])+0));
}
if (bcol != "YELLOW") {
document.getElementById('myh4').innerHTML = '';
document.getElementById('re').innerHTML = '&nbsp;';
} else {
document.getElementById('myh4').innerHTML = 'Codepoint: <a target=_blank title="Google search" href="https://www.google.com.au/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '">' + postfw + '</a>';
document.getElementById('re').innerHTML = '<a style=text-decoration:none; target=_blank title="Google search" href="https://www.google.com.au/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '">' + String.fromCodePoint(postfw) + '</a>';
cnt++;
if (eval(cnt) > 1200) {
cnt = 1;
document.getElementById('sessiontr').innerHTML = "";
}
var carr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var ired = Math.floor(Math.random() * 127);
var igreen = Math.floor(Math.random() * 127);
var iblue = Math.floor(Math.random() * 127);
var colhuh = '#f' + carr[Math.floor(eval(ired) % 16)] + 'f' + carr[Math.floor(eval(igreen) % 16)] + 'f' + carr[Math.floor(eval(iblue) % 16)];
document.getElementById('sessiontr').innerHTML += '<td id=td' + cnt + ' style="font-size:18px;background-color:' + colhuh + ';">' + document.getElementById('myh4').outerHTML + '<br>' + document.getElementById('re').outerHTML + '</td>';
}
}

… which is called by the document.body onload event as per “setInterval(dothis,3000)”

Previous relevant Emoji Random Slideshow Primer Tutorial is shown below.

Emoji Random Slideshow Primer Tutorial

Emoji Random Slideshow Primer Tutorial

We’ve got a Random Emoji Slideshow for you today, a project long in the thinking, and helped out enormously by the great Open Source community on the net, two webpages from which we’d like to point you towards, regarding this topic …

You may recall from the recent Karaoke via YouTube API in Iframe Emoji Tutorial our old approach to finding technically useful information from the net when we said …

How do we find the emojis we want? Well, at the entry level and exit level we have, respectively …

  • searches for relevant words in Google search engine … eg. “video game emoji” Google search as per this link
  • and hope to arrive at the http://www.fileformat.info website for the technical details necessary … eg. Unicode Character ‘VIDEO GAME’ (U+1F3AE) HTML Entity (decimal) &#127918; is what is useful to us, in HTML coding as a value= value for HTML input elements or innerHTML property of HTML a elements, for instance

The steps in between the two above tends to be a bit variable. For the example above, we ended up at Google’s first suggestion, which we often end up at, at the domain emojipedia.org, specifically this link and its “Codepoints” section value U+1F3AE that when refed back into Google search engine (for us, by literally typing it into the address bar) you get a first result sending you to http://www.fileformat.info website’s Unicode Character ‘VIDEO GAME’ (U+1F3AE) as above. However, we did not always use emojipedia.org as our “middle guide” here. There are many references out there.

… but the word we didn’t hone in on then, that we’d like to hone in on now … better late than never … is Codepoint, regarding Character Encoding, quite a big, and at many times, confusing, subject matter in Information Technology. But you wouldn’t really expect it to be otherwise, as it is a matter with Internationalization getting us … all of us non-Martians … together on representing ourselves, with all our different language and symbology methods of communicating, out there on the “palette” that the internet is for so many of us … though, think we should invite any Martians in to Internet cafe sessions over nibbles, don’t you think?

For us, the useful technical thing to take away, is, for Emojis … and other symbology is even easier …


&#[Codepoint]

… is “lookable uppable” these days on the search engines, and so our Emoji Slideshow web application today, in which there is nothing for you to do regarding the slideshow, leaves you with spare time to click either …

  • the random emoji itself … or …
  • the “Codepoint” link

… to start up a Google search regarding that, that we’ve found, for most emojis, gets you quickly to some good technical information with the links up the top of the search engine results.

Happy Emoji making with our HTML and Javascript emoji_slideshow.html and its slideshow live run.

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

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

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

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

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

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

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *