The onpaste event referencing work of the recent Using Document Writeln Onpaste Tutorial set us to thinking about the unwieldy nature of our “One Image Website” series of photographic projects ability to, on the fly, these days …
take a new relevant photograph (on an iPhone, for instance) … and then easily …
get some functionality on the “One Image Websites” (our Guinea Pig, here, being our Street Art project) to accept either …
graphical image Copy into buffer via some Edit->Select All, Edit->Copy (eg. within an Image Editor desktop application) (combination) option Edit->Pasted into a new HTML span contenteditable=true onpaste and onblur savvy events “uploading” helper … or …
right click at first webpage (of one of these “One Image Website” projects) to get to a prompt window that can accept a data URI the likes of which Google Image Search (say, of “clipart”)->right click->Copy Image Address could glean for you as a representation of an image
Where’s the security and moderation here? Any upload operation needs to worry about that, huh?! Well, we limit it via IP address at this stage, in our Guinea Pig start to proceedings, and will monitor over time.
Let’s start, codewise with the pretty well self contained PHP block of code that is new for this work …
<?php
$oklist=['0::1', '1.156.90.221'];
function server_remote_addr() {
global $ris;
$rma = $_SERVER['REMOTE_ADDR'];
if ($rma != "") {
$qris = $rma;
} else if ($rma == "") {
$rma = $qris;
}
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
// you can add different browsers with the same way ..
if(preg_match('/(chromium)[ \/]([\w.]+)/', $ua))
$rma = '000000'.$rma;
elseif(preg_match('/(chrome)[ \/]([\w.]+)/', $ua))
$rma = '00000'.$rma;
elseif(preg_match('/(safari)[ \/]([\w.]+)/', $ua))
$rma = '0000'.$rma;
elseif(preg_match('/(opera)[ \/]([\w.]+)/', $ua))
$rma = '000'.$rma;
elseif(preg_match('/(msie)[ \/]([\w.]+)/', $ua))
$rma = '00'.$rma;
elseif(preg_match('/(mozilla)[ \/]([\w.]+)/', $ua))
$rma = '0'.$rma;
//echo "<p>".$ua.$rma."</p>";
return $rma;
}
Why involve either/both textarea and div (contenteditable=true) elements as “containers” of content?
Well, with yesterday’s starting onblur (just) event gambit, it’s a very pertinent question, but, today, we introduce onpaste event work, and involving this event with the div element can have it distinguishing itself, able to accept graphical (eg. image) content. For example, the user can have their cursor placed into the div element and have been in an image editor having Edit->Select Alled and Edit->Copyed graphical content, then that can be Edit->Pasted into the div as graphical content.
As you might imagine, this opens a Pandora’s Box of possibilities regarding image sizing, but we apply inline CSS styling …
… to the img data URIed element within the div element that happens when graphical content is pasted into it, so that the graphical data is unlikely to spill too far outside the div bounds, assuming only one image is pasted, that is.
… macOS command line tool for Text to Speech functionality.
Well, yesterday’s Live Captions work with Web Browser Live Captions Primer Tutorial got us to wondering whether Live Captions can be called into play with any of this “Intranet feeling” (ie. say only works on macOS) work.
Our research has us, so far, only working it for …
macOS Language and Region … English (US) or English (Canada) … allowing
… means. Ouch?! Today’s consolation prize, anyone? Or perhaps this one? But, nevertheless, we proceed, and yes, Live Captions can get involved with this scenario, and Google Translate can get involved too, which makes it all kind of interesting. Please don’t expect perfection getting the same Text->Speech coming out of the Speech->Text but, as this functionality is coming from a big player, it could well speed up and become more precise over time, but for the meantime we offered a new
does not loop the audio “say” based audio
plays it at half speed (which we saw gave a better chance for the Live Captions to keep up) …
function livecaptionit(ta) {
if (ta.innerHTML.indexOf('data:audio/') != -1) {
if (1 == 1) {
voiceoverit();
setTimeout(function(){
var auds=document.getElementsByTagName('audio');
if (eval('' + auds.length) > 0) {
auds[eval(-1 + auds.length)].playbackRate = 0.5;
auds[eval(-1 + auds.length)].loop=false;
auds[eval(-1 + auds.length)].play();
}
}, 5000);
setTimeout(function(){
var xauds=document.getElementsByTagName('audio');
if (eval('' + xauds.length) > 0) {
xauds[eval(-1 + xauds.length)].playbackRate = 1.0;
xauds[eval(-1 + xauds.length)].loop=true;
}
}, 35000);
} else {
document.getElementById('myaudio').style.display='inline-block';
document.getElementById('myaudiosrc').type='audio/' + ta.innerHTML.split('data:audio/')[1].split(',')[0].split(';')[0];
if (document.getElementById('audioname').value != '') {
document.getElementById('myaudiosrc').src='/' + document.getElementById('audioname').value;
} else {
document.getElementById('myaudiosrc').src=ta.innerHTML;
}
document.getElementById('myaudio').play();
}
}
}
function waitforavideo() {
if (document.getElementById('avideo')) {
if (eval('' + document.getElementById('avideo').innerHTML.split('</spa').length) > 2) {
document.getElementById('result').title='Double click for Live Captions play';
document.getElementById('butresult').style.display='inline-block';
return '';
}
}
setTimeout(waitforavideo, 1000);
}
function checkres() {
if (document.getElementById('result')) {
if (document.getElementById('result').innerHTML.indexOf('data:') == 0) {
document.getElementById('saysub').style.cursor='pointer';
if (!qresfound) {
if (qresdu != document.getElementById('result').innerHTML) {
if (eval('' + document.getElementById('audioname').value.length) > 6) {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (isChrome) {
setTimeout(waitforavideo, 1000);
}
qresdu=document.getElementById('result').innerHTML;
residues.push(qresdu);
tempidues.push('/tmp/' + document.getElementById('audioname').value.substring(0,eval(-6 + eval('' + document.getElementById('audioname').value.length))) + document.getElementById('audioname').value.slice(-6).replace(/\./g, '_macoshelp_' + Math.floor(Math.random() * 10897654) + '.'));
}
qresfound=false;
}
}
}
}
}
… regarding the changed downloadable PHP localhost URL http://localhost:8888/macos_say_record.php you should plonk into the MAMP document root folder.
what we’ve done in the past overlaying the textarea element with a div one … but there is too little room in this project’s scenarios, so …
we open a new popup with just the div linking content as above via a textarea onclick event modus operandi
… the content “mediarized” as user controlled, via a hashtag system that expands media within that popup div element via more Journal project thinking …
… where hashtags #qrcode and #play and #display and #listen and #embed and #show and #background are hashtag media effect options …
underlying macOS and MAMP local Apache/PHP/MySql web server environment command say
means to turn Text to Speech
… users can be offered a continuous Text to Speech execution modus operandi …
allow for image, video, audio media (just, so far) relative URL, such as …
/responsive_more.jpg
… hence the “Relative Media” words in the blog posting title … that, if exist, add to the “hardcoding to textarea onclick to left savvy” link logic covering now …
The onhover smarts of the Google ChartGeo Chart suffer when the AppleScript integrations are loaded
Culprit …
We tracked it down to what we used to have …
function ggmuchlater() { // thanks to https://dev-answers.com/solutions/3287e028/how-do-i-include-a-javascript-file-in-another-javascript-file
if (!document.getElementById('apscr') && !document.getElementById('asue')) {
var scriptz = document.createElement("script"); // create a script DOM node
scriptz.src = '/apple_script_url.js?left=calc(100% - 60px)&top=2px&emojXi=128220&css=font-size:30px;opacity:0.8;&mustcontain=&'; // set its src to the provided URL
document.head.appendChild(scriptz); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
}
function gggmuchlater(evt) { // thanks to https://dev-answers.com/solutions/3287e028/how-do-i-include-a-javascript-file-in-another-javascript-file
var scriptz = document.createElement("script"); // create a script DOM node
scriptz.src = '/apple_script_url.js?left=calc(100% - 60px)&top=2px&emojXi=128220&css=font-size:30px;opacity:0.8;&mustcontain=&'; // set its src to the provided URL
document.getElementById('bitsatend').appendChild(scriptz); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
globevt=evt;
setTimeout(function(){ justplayme(globevt); setTimeout(function(){ if (('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'') != '') { window.location.reload(true); } else { location.href=document.URL; } }, 15000); }, 5000);
}
… working with, just …
<a style="position:fixed;left:calc(100% - 60px);top:2px;cursor: pointer; text-decoration: none;font-size:30px; display: inline-block; background-color: green; border-bottom-right-radius: 85px; opacity: 1;" onclick="gggmuchlater(event);" title="Apple Script snapshot re-execution via macOS Desktop with double click emailing at left and top and double click SMS at bottom right corner only" id="asue">📝</a>
… and the avoidance of use of document.head.appendChild(scriptz); (at least with a delayed window reload) did the trick to make the Geo Chart onhover functionality start working again, more consistently with …
web browser address bar “hashtag add” modus operandi for potential Google ChartGeo Chart Integration Speech Bubbles via our integration with the cowsay Python API / Command-line tool … today we add the less kludgy …
non-mobile, ? and & argumented URL, hidden typing option to create Google Chart Geo Chart Integration Speech Bubbles
… via the changedgchartgen.js external Javascript helper onkeydown keyboard event Javascript code …
our inhouse integrated cowsay Python API / Command-line tool interfacing … could …
be used as hashtag based commentary or Speech Bubbles for our inhouse integrations with Google Charts, our “first cab off the rank” trying this idea being the Geo Chart
We honed in on the external Javascript called by many Google Chart integrators with the changedgchartgen.js external Javascript helper’s …
var washerelhis=(('' + document.URL + '#').split('#')[1]) + ' ';
if (decodeURIComponent(washerelhis).indexOf('commentary=') == 0) {
if (decodeURIComponent(washerelhis).indexOf(',') != -1) {
location.hash=location.hash.replace(/\,/g,' ').replace(/\%44/g,'%20');
washerelhis=washerelhis.replace(/\,/g,' ').replace(/\%44/g,'%20');
}
}
And so, today, we’ve decided maybe some Speech Bubbles unique to each frog can be an additional memory aid. This was the opportunity to involve the great cowsay Python API / Command-line tool which we have written some PHP to integrate with here at RJM Programming. Add to that some Kermit sayings …
var rectc=null;
var cfttoggle=0;
var kermitisms=["It's not easy " + String.fromCharCode(10) + " being green.","Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","Life's like a movie, write your own ending. Keep believing, keep pretending.","Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","Just because you haven't found your talent yet, doesn't mean you don't have one.","If you have to eat two frogs, eat the ugliest one first.","Here's one other thing that I think every person or frog needs to be creative: friends.","I promised " + String.fromCharCode(10) + " me.","Time's fun when you're having " + String.fromCharCode(10) + " flies!","May success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"It's not easy " + String.fromCharCode(10) + " being green","Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here","Life's like a movie, write your own ending. Keep believing, keep pretending","Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me","Just because you haven't found your talent yet, doesn't mean you don't have one","If you have to eat two frogs, eat the ugliest one first","Here's one other thing that I think every person or frog needs to be creative: friends","I promised " + String.fromCharCode(10) + " me","Time's fun when you're having " + String.fromCharCode(10) + " flies","May success and a smile always be yours … even when you're knee-deep in the sticky muck of life",
"it's not easy " + String.fromCharCode(10) + " being green","hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here","life's like a movie, write your own ending. Keep believing, keep pretending","someday we'll find it, the rainbow connection. The lovers, the dreamers, and me","just because you haven't found your talent yet, doesn't mean you don't have one","if you have to eat two frogs, eat the ugliest one first","here's one other thing that I think every person or frog needs to be creative: friends","i promised " + String.fromCharCode(10) + " me","time's fun when you're having " + String.fromCharCode(10) + " flies","may success and a smile always be yours … even when you're knee-deep in the sticky muck of life",
"it's not easy " + String.fromCharCode(10) + " being green.","hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","life's like a movie, write your own ending. Keep believing, keep pretending.","someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","just because you haven't found your talent yet, doesn't mean you don't have one.","if you have to eat two frogs, eat the ugliest one first.","here's one other thing that I think every person or frog needs to be creative: friends.","i promised " + String.fromCharCode(10) + " me.","time's fun when you're having " + String.fromCharCode(10) + " flies!","may success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"- It's not easy " + String.fromCharCode(10) + " being green.","- Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here!","- Life's like a movie, write your own ending. Keep believing, keep pretending.","- Someday we'll find it, the rainbow connection. The lovers, the dreamers, and me.","- Just because you haven't found your talent yet, doesn't mean you don't have one.","- If you have to eat two frogs, eat the ugliest one first.","- Here's one other thing that I think every person or frog needs to be creative: friends.","- I promised " + String.fromCharCode(10) + " me.","- Time's fun when you're having " + String.fromCharCode(10) + " flies!","- May success and a smile always be yours … even when you're knee-deep in the sticky muck of life.",
"- It's not easy " + String.fromCharCode(10) + " being green. -","- Hi-ho, " + String.fromCharCode(10) + " Kermit the Frog here! -"
];
var kermitismowners=[];
var kermitismidxs=[];
An HTML5 canvas element can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.
Today, with this topic, we’ve focussed on non-mobile platforms with the new drag and drop possibilities, but the old methods, with touch/click, will still work for mobile platforms, and at a later date we may find room for “drag and drop” improvement with the mobile platforms as well … in the fullness of time … given the constraints of economic belt tightening … over the course of the current forward estimates.
So what events, applied directly to the canvas element this time (incidentally, yesterday, this was not the case), were additionally of interest for non-mobile drag and drop functionality (in decreasing order of importance (where the already existant canvas “onclick” event remains the most important))?
ondragstart=”drag(event)” … where we can differentiate a drag and drop (of the first card chosen) from a click/touch
onmouseup=”omu(event)” … where we can get the (x,y) of the second card chosen
onmousemove=”omo(event)” … not really important, but we can show it is a drag and drop up in the HTML h1 wording
ondragover=”allowDrop(event)” … not called upon for non-mobile
The end result on a non-mobile platform is that two cards separately clicked act very much like a drag and drop. Our drag and drop does not draw the card flopping onto the other, but shows a change in the HTML h1 wording.
Here is a link to some downloadable HTML programming code … rename to memories.html and how it changed for the tutorial below is described at this link.
And you may want to try a memories.htmllive run of this card game that tests your memory, and perseverance, at the very least.
HTML/Javascript Canvas Memories Card Game Primer Tutorial
The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.
In today’s tutorial we mainly use the drawImage function to create a webpage where you can play the card game called Memories.
As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.
Link to some downloadable HTML programming code … rename to memories.html
You’ll notice heavy use of the Javascript Math.random() function.
We hope you enjoy this Memories Card Game tutorial live run.
Yes … you’ve reached the end … have a top supportive day full of happy memories!
Stop Press
As of the 5th June 2015 you may notice this game changed to add functionality, and that the live run above might support some drag and drop functionality on non-mobile platforms so you may want to compare this to an old live run for how it worked before this date.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
Google Chrome tests on this macOS Sequoia 15.3.1 MacBook Air involving these class=audioytplay since it seemed to be the case that Live Captions on were the default setting for when Google Chrome detects audio being played and it can feasibly determine the Audio to Text in order to be able to create ticker-tape style Live Captions (and can be configured to not show them too, so we’ve “parked” Chrome as “great, all good and fully controllable as far as the user experience goes”) … but, where we wondered about other web browsers and found that …
Safari web browser, within the same operating system, relies on …
… and on the subsequent reboot of our MacBook Air, that at some stage the actual Accessibility menu Live Captions submenu started appearing …
… and then, for us, Safari could be categorised to that same “great, all good and fully controllable as far as the user experience goes” as far as Live Captions goes that we’d categorised Google Chrome earlier on. Mind you, the Google Chrome version offers live Google Translate functionality as the Live Captions are presented, which the Safari version does not offer. Anyway, both versions very good!
YouTube iPhone Screen Recording via QuickTime Player Primer Tutorial
We’ve spoken before about the wonderful Mac OS X QuickTime Player application, and its use on a MacBook Pro, and its capabilities to upload videos to YouTube.
That’s all fine and good for Movie and Audio Recordings or Screen Capture Recordings related to the MacBook Pro, but did you know you can Screen Capture an iPhone (or iPad) by using a Mac USB white lead hooked up from the MacBook Pro to that other device, in our case an iPhone 6. So we record a session playing the Target Word Game you can read more about at PHP Target Word Game Mobile Friendly Tutorial.
We wanted to thank this great link, thanks, for the idea to use QuickTime Player for this job, never having used that arrow next to the red recording “blob” before. Makes me want to re-view The Blob in case I missed some useful subliminally embedded arrow.
We hope this is food for thought for 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.
you stumble onto a feature, software or hardware …
startling …
initially unexpected and annoying … but …
in another scenario … yes … very useful, and even time saving … but …
How did I just do that?
Have no idea what I just did.
Currently in terms of work on this macOS MacBook Air here we’re using two bluetooth components (as well as Bluetooth speakers for music) …
Logitech Keyboard K480
Logitech Mouse M720 Triathlon
… and with that mouse we’ve often stumbled onto, accidentally, as mentioned above, a position where the mouse action has gotten us back to a view of the desktop overlayed with icons representing the apps open (or being used). Offputting at the time, but we’d love to know what we do to make this happen, deliberately, on occasions. So, today, we’re going to research it.
To trigger the desktop view (Task View/Mission Control) on a Logitech M720 Triathlon, hold down the small button located on the rubber thumb grip while moving the mouse up, down, left, or right. This requires installing the Logi Options+ software to customize and enable these specific gesture actions.
There’s this tiny button on the Logitech Mouse M720 Triathlon we’d never noticed, but the right thumb of ours had accidentally been triggering that toggles between …
a view of the desktop overlayed with icons representing the apps open … and …
back to what was going on before “a view of the desktop overlayed with icons representing the apps open”
… but, option wise, you can program other (bigger) buttons to configure many more gestures than just this! We’ll see?! Because, we think, when it comes to learning (and “Doh!” moments like this) …
Ignorance is not bliss.
If this was interesting you may be interested in this too.
YouTube iPhone Screen Recording via QuickTime Player Primer Tutorial
We’ve spoken before about the wonderful Mac OS X QuickTime Player application, and its use on a MacBook Pro, and its capabilities to upload videos to YouTube.
That’s all fine and good for Movie and Audio Recordings or Screen Capture Recordings related to the MacBook Pro, but did you know you can Screen Capture an iPhone (or iPad) by using a Mac USB white lead hooked up from the MacBook Pro to that other device, in our case an iPhone 6. So we record a session playing the Target Word Game you can read more about at PHP Target Word Game Mobile Friendly Tutorial.
We wanted to thank this great link, thanks, for the idea to use QuickTime Player for this job, never having used that arrow next to the red recording “blob” before. Makes me want to re-view The Blob in case I missed some useful subliminally embedded arrow.
We hope this is food for thought for you.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
For those of us Apple iOS users not so keen on iCloud to store data, when it comes to iOS upgrades on your iPhone or iPad, it could be that you run into the issue (like us, twice now, on two different iOS devices), that no matter how many files you cull you cannot come in over the requirement for free disk space that the default iOS Upgrade workflow asks for.
End of story …
So sad
… unless …
If you have access to an Apple MacBook Air or MacBook Pro with some diskspace on it, and you have the necessary Apple white leadages, and you have a good power supply, and you are allowed to wrestle the Apple MacBook Air or MacBook Pro away from it’s gatekeeper/user/lord/lady/mná/fir (and please, if you are a male foreigner at a hurling match needing the loo, do not head for the ablution block labelled “mná” … that being said … if you are a female foreigner at a hurling match needing the loo, do not head for the ablution block labelled “fir”).
Why involve either/both textarea and div (contenteditable=true) elements as “containers” of content?
Well, with yesterday’s starting onblur (just) event gambit, it’s a very pertinent question, but, today, we introduce onpaste event work, and involving this event with the div element can have it distinguishing itself, able to accept graphical (eg. image) content. For example, the user can have their cursor placed into the div element and have been in an image editor having Edit->Select Alled and Edit->Copyed graphical content, then that can be Edit->Pasted into the div as graphical content.
As you might imagine, this opens a Pandora’s Box of possibilities regarding image sizing, but we apply inline CSS styling …
… to the img data URIed element within the div element that happens when graphical content is pasted into it, so that the graphical data is unlikely to spill too far outside the div bounds, assuming only one image is pasted, that is.
