We often find that the “second draft” of a web application that represents a game or quiz can be a rewarding experience. The “first draft” of such web applications is often a “scurrying to represent those initial ideas before they are forgotten exercise”.
But a “second draft” can be done under less pressure, where ideas to extend the initial premise of the game or quiz, come far easier on revisiting and retesting. In that way, we extended into a “second draft” quite a few tinkerings …
make number of table cells a selectable setting (within reason)
make number of components within each synergy set a selectable setting (within reason)
allow the user to add their own rememberable synergy set(s)
allow the user to share their own rememberable synergy set(s) with an email or SMS recipient
add emoji tick or cross to score to indicate answer correctness
add seconds elapsed for those competitive players
… that, though minor by nature, and “optional”, of course, yet, can make the project, we had as of the day before yesterday’s Pairings Game Tutorial, far more interesting, we feel.
In this programming world, it is comforting to think of the “pairings” that go on. But it’s everywhere, the comfort a “pairing” can represent for people.
With this in mind, we designed a simple game …
the player is presented with 5 ideas of a “pairing” … it’s subjective, but …
we believe only one of these will score you a point by clicking on
function prepopulate() { // called at document.body onload
for (var icell=0; icell<5; icell++) {
rectos.push(document.getElementById('td' + eval(1 + icell)).getBoundingClientRect());
}
}
function populate() { // called whenever question changes
var fivebuts=[], fiveoverlays=[];
var makecorrect=Math.floor(Math.random() * 5), recto=null;
var interestg=-1, tg=-1;
sofarb=',';
sofaro=',';
shape=poly … via an initial click and a series of right click (non-mobile) and double click (mobile) ending polygon with up to 2 separated clicks … today we also allow for …
shape=circle … in the two modes of use the user enters as C0 or C2 at the first prompt window respectively …
Image Map ends up just with shape=circle (rather than any shape=rect)
Image Map ends up with shape=circle then shape=rect combinations (allowing for both to play their part, as required)
… to round out what Image Maps allow.
Again, rubberbanding in amongst HTML div element innerHTML SVG innards is the go, but for shape=circle we use SVG circle element types rather than the SVG polyline used for rubberbanding the shape=poly Image Map area subelements.
a single user getting as far into the Image Map creation process themselves because there are advantages to “strike while the iron is hot” marrying up Image Map area element positioning with a description, that can help later with stitching together Javascript event logic that can be useful making the Image Map … useful … but …
that doesn’t mean sharing and collaboration are of no use … perhaps the originator is a better designer than coder, for example
Anyway, that made us turn our attention to sharing and collaboration, email or SMS based, communication functionality, and we saw the two intervention points being …
share the contents of the Image Map only HTML textarea element (with some default surrounding HTML and Javascript supplied) … and after a few double clicks, perhaps, the user might get to be able to …
share the contents of the Image Map (with user tailored surrounding HTML and Javascript) textarea element
So how does a user make this happen? On mobile, it’s ontouchmove over the textarea concerned, where with non-mobile (you’re not going to like this, but we’ve run out of viable event types to use, so plumped for) onmouseout out of that textarea, to use. But won’t this get triggered too often? Well, we’ve coded for a couple of ways this can annoy less but still be that ever useful collaboration tool, via …
var hniis=false, hniisv='';
function shareask(tao) { // share Image Map outerHTML
var anchor=null, laterdo=null;
var proposedurlis='https://' + document.URL.split('//')[1].split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#imagemapize=' + encodeURIComponent(tao.value);
if (!hniis) {
laterdo=hniisv;
if (1 == 1) {
console.log('message length is ' + proposedurlis.length);
} else {
document.title='' + proposedurlis.length + ' ' + document.title;
}
if (laterdo == '') {
laterdo=prompt('Please enter an email address or SMS number to send the Image Map to. To not ask again regarding Image Map progress email or SMS communications in this session click Cancel. If your answer you are happy with from here on append a space to it.', hniisv);
}
if (laterdo == null) { hniis=true; laterdo=''; }
if (laterdo.indexOf('@') > 0) {
if (laterdo != laterdo.trim()) { hniisv=laterdo.trim(); }
anchor = document.createElement('a');
if (tao.value.indexOf('<html') != -1) { // (includes tailored HTML and Javascript around it)
anchor.href = 'mailto:' + laterdo.trim() + '?subject=' + encodeURIComponent('Image Map (includes tailored HTML and Javascript around it) ...') + '&body=' + encodeURIComponent(proposedurlis);
} else {
anchor.href = 'mailto:' + laterdo.trim() + '?subject=' + encodeURIComponent('Image Map (includes default HTML and Javascript around it) ...') + '&body=' + encodeURIComponent(proposedurlis);
}
anchor.style.display='none';
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();
} else if (laterdo.trim() != '' && laterdo.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
if (laterdo != laterdo.trim()) { hniisv=laterdo.trim(); }
anchor = document.createElement('a');
anchor.href = 'sms:' + laterdo.trim() + '&body=' + encodeURIComponent(proposedurlis);
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}
}
… and we may improve the mechanism for this if Luna doesn’t snore tonight?!
Good ol’ hashtag data in emails or SMS comes into play here, and we found, even with Lorem Picsum images, we got viable results, though we found on mobile, the Gmail app “View Entire Message” hold finger down “Open Link” methodology was needed to get through. Gmail URL on macOS just needed the “View Entire Message” part of the workflow here.
mobile platform chance to have three finger gestures help with scrolling functionality … today we have it so that …
mobile platforms are better suited creating Image Maps via canvas and image based inhouse web application (looking out for 🗺️🖼️ emoji button means to create Image Map when ready, as a double click on the canvas can do as well)
… our changes being helped out by the discovery that our previous …
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// is identified around here as a mobile platform
}
… was a bit unreliable identifying mobile iOS platform Safari web browser usage, but this useful link got us to refine that thinking to …
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) > 0) {
// is better identified around here as a mobile platform
}
… with more success. Yayyyyy!
Along the way the HTML textarea elements used to identify Image Map subelement area rectangular limits have their disabled attribute set, which has the benefit …
that there is no need to allow any focus to these textarea elements when nothing any user can enter into them would make any difference anyway … and yet …
at least on non-mobile platforms the useful resizing talents of textarea elements are not stopped because of the disabled attribute being set
… had become a little obsolete (at least, regarding the emoji button workflow), in the sense that, like with the canvas ondblclick event (ie. double click) functionality, why not, when clicking that 🗺️🖼️ Image Map creator emoji button grab the contents of the canvas already displaying as the default content presented to the “potential” (ie. it depends, sometimes, whether you double click that canvas element the next time) Image Map creation session?
Relevant to Random Background Image Map Area Polygons Tutorial and the decision then regarding non-mobile platforms to use an initial click followed by right clicks to enable Image Map area element shape=poly components, today, thinking with respect to mobile platforms, we’ve decided Image Map area element shape=poly components can be created via an initial click followed by double click sequences and going back to the polygon start, with either platform type, ending the polygon with two separated clicks. Also relevant to that same tutorial and it’s pointer-events:none; discovery, today’s mobile work regarding the textarea elements plotted to show the rectangular limits of user defined areas already created we found “real world relevance” to applying this to mobile such textarea elements. That is because on some mobile platforms these textarea elements will never be able to be resized out of the way, but if we apply pointer-events:none; to these, it does not matter, as the user can, as required, click/touch through these overlayed elements that have a huge z-index and semi-transparency applied to them.
Again, perhaps on a mobile platform web browser, feel free to try …
There are known Safari mobile web browser textarea resizing limitations as we discovered trying a Google search of allow textarea resizing on mobile safari web browser, thanks, that we gleaned from the use of …
Solution 2: Standard JavaScript Auto-Grow
If you need to support older versions of iOS Safari that lack the newest CSS specs, you can dynamically update the box height using a tiny JavaScript event listener. This removes the scrollbar and expands the container vertically as they type:
HTML: html
<textarea id=”mobile-textarea” rows=”3″ oninput=”autoGrow(this)”></textarea>
Canvas Interfacer Three Finger Gesture Usage Tutorial
There’s more research needed around here regarding mobile platform usage to the HTML5canvas based ideas swirling around yesterday’s Random Background Image Map Area Polygons Tutorial‘s work, and one issue we came across was …
on mobile platforms you can get to gesture results whereby the canvas is all you see on the screen (eg. of an iPhone) …
but what if you are in “scribble mode” at that point? …
before today, we were having trouble using …
two finger “pinch” gesture to zoom out … or …
one finger “swipe” to reveal more to the right (where, if we could have reached it, that right hand menu of annotation options has none of these “scribble mode” oddities) … because …
before today, that last idea just drew a “scribble” “free drawing” line to the canvas
… to reach the menu or any other non-canvas element not in “scribble mode” (ie. scrolling could not be achieved, at least in a way we could immediately access)
If you are building this for a website or web app, you can use the touchstart and touchmove events to capture finger coordinates, check if exactly three fingers are on the screen, and then calculate the direction.
… to (start with global … var isthree=false; and) end up with …
… near the top of our function toptouchHandler(event) Javascript code in our changedsignature_signature.js external Javascript canvas interfacer helper.
Image Map only allowing for area subelements with shape=rect … today we also allow for …
Image Map now allowing for area subelements with shape=poly …
… via …
Right clicks after an initial click are the means by which you can define area shape=poly ( as distinct from the default shape=rect ) elements where to finish a polygon two click back close to the start point.
… as a modus operandi for the user to cater for more complex shape definitions in their Image Maps.
That doesn’t mean the rectangle around such a polygon is not also significant. Do you know why?
Yes, a hosting HTML div of a specific width and height and positioned absolutely at a precise left and top screen position allows SVG innerHTML like …
<svg xmlns="http://w3.org" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><polyline points="0,67,56,7,100,0,150,17,0,67"></polyline></svg> ... be showing a polygonal user clicked shape, scaled appropriately, yet responsively, and allowing for those % unit definitions above making all this methodology useful here. Notice the zero co-ordinates? That is no accident. We make the co-ordinates relative to the minimum x and minimum y "datum" to the co-ordinating.
To pass events down through a higher z-index element, add pointer-events: none; to the top element. This tells the browser to ignore the overlay for mouse events, allowing clicks and hovers to "fall through" to the element stacked beneath it.
... to learn a whole new technique we've been looking for for quite some time now ... now, where did we put that "Overlay Disappointments File"?! ... bye bye!
... and allowing users using our inhouse Random Background interfacer the chance to create some Image Maps using incarnations of these images as the visual basis to them.
We've chosen ...
the oncontextmenu (ie. right click) as an intervention point to facilitate this ... or ...
if using a macOS operating system a ...
control-command-shift-3
control-command-shift-5
...
document.addEventListener('keydown', (event) => { // thanks to https://www.google.com/search?q=javascript+detecting+control-command-shift-3&rlz=1C5OZZY_en&oq=javascript+detecting+control-command-shift-3&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRiPAjIHCAYQIRiPAjIHCAcQIRiPAtIBCTE3NzMyajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
// Check if Control, Command (metaKey), and Shift are all held down
// AND the key pressed is the number 3
if (
event.ctrlKey &&
event.metaKey &&
event.shiftKey &&
event.code === 'Digit5'
) {
// Prevent the default browser action if necessary
//event.preventDefault();
established a URL means by which a single URL call from the canvas residing Inhouse Image Map Creator and Canvas Annotation web application via a data URI hashtag conduit ... and today just ...
allowing for an absolute URL in that hashtag is the relatively simple change needed so that, using this, our WordPress "right click over an img image element" functionality can be tweaked ...
var huhifs=prompt('Optionally, please, any CSS for images ... append 3 spaces to be able to edit this ' + (gthing == 'image' ? gthing + ' (and answer of #imagemap will use this image as basis for creation of an image map in a new window)' : gthing) + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
if (huhifs == null) {
huhifs='';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (event.target.outerHTML.indexOf('<a ') == 0) {
console.log(6);
ggurl=event.target.href;
} else {
console.log(66);
ggurl=document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="')[eval(-1 + document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="').length)].split('"')[0];
}
if (6 == 6) {
console.log(ggurl);
window.open(ggurl,'_blank'); ggurl='';
// huhifs=window.prompt('Optionally, please, any CSS for images ... append three spaces to be able to edit this ' + gthing + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
} else {
setTimeout(function(){ window.open(ggurl,'_blank'); ggurl=''; }, 5000); //alert(event.currentTarget.outerHTML); //event.currentTarget.click();
}
}
}
if (huhifs.toLowerCase() == '#imagemap') {
event.preventDefault();
event.stopPropagation();
ggurl=event.target.src;
window.open('//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm?imagemap=url#' + (ggurl.indexOf('//') != -1 ? '//' + ggurl.split('//')[1] : (ggurl.replace(/^\.\//g,'/').indexOf('/') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(1).replace(/^\//g,'ITblog/') : (ggurl.indexOf('../') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(3) : ggurl))),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height));
ggurl='';
} else if (huhifs.indexOf('data:image/') == 0) {
if (document.getElementById('imgcopycheck') && usuff != '') { //if (document.URL.indexOf('/streetart/') != -1) {
uplitc(huhifs); //alert(document.URL);
}
return '';
}
... as an excerpt from the changedonrightclick.js external Javascript called by WordPress, and calling ...
... good, now, again ... an image is a canvas is an image ...
an image is a canvas is an image
... excellent, now, backwards ... egami na si savnac a si egami na ...
egami na si savnac a si egami na
... wow! ... Now, lastly … I want my mamma! Now! ...
I want my mamma! Now!
Mamma! Thank god you’re here! But it's true. Our thinking behind allowing browsed for image files become data URIs that can be the img element "image" part of the "image map", further to yesterday's Inhouse Image Map Creator Mobile Debug Tutorial, we can now create using our inhouse Image Map Creator capable web application uses the "an image via [canvasContext].drawImage() is a canvas via [canvas].toDataURL() is an image" concept that can save us heaps of time with this project. Instead of intervening at each dropdown option mentioning "Browse" to make this design change, we, instead, introduce to the HTML5canvas element a new ondblclick event ...
<canvas ondblclick="qwowo=window.open(document.URL.split('?')[0].split('#')[0] + '?imagemap=url#' + this.toDataURL('image/jpeg',0.4),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height) + '');" ondragstart="dragstart(event);" draggable="false" title="Ready for you to create your canvas 🎨 content above any signature 💳 panel ... keys U for Undo and R for Redo can work after a discrete click ending any scribble mode of use. Double click can facilitate turning this canvas content into an image map, and this canvas content can be populated by so many of the options in the menu to the right, which includes many local image file browsing choices." id="topcanvas" width=850 height=600 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas>
... allowing that "on double click" result in the web application turning into an Image Map Creator where now ...
Image Map ( ie. <img src="[image URL as entered by user or data URI browsed for by the user, or, come to think of it, from a couple of days back, entered in by the user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... is that very pithy redefinition of our web application's view of what an Image Map can be! Though?!
Apologies to any mobile users wanting to access this new inhouse Image Map creator web application last talked about with yesterday's Inhouse Image Map Creator Interactive Drill Down Tutorial before today, that is, but we were leaving the issue until a proper hardware ...
Mac Book Air
Apple white lead
iPhone
... that once the middle one plugs into the top and bottom allows for ...
iPhone Safari web browser call of the inhouse Image Map creator ... could tee up with (ie. attain a "connection" with) ...
Mac Book Air Safari web browser Develop -> (in our case) Robert's iPhone -> user_of_signature_signature.htm
... online debugging session, could be arranged and a block of time set aside to concentrate on, because "concentrate" is the name of the game here!
Luckily, the issue was straightforward, where many are not. In the overseeing code, we had ...
... ba bow ... because in the external Javascript we got pulled up by the debugging of the iPhone execution attempt at a codeline, where the user decides to take on an Image Map creation task ...
Inhouse Image Map Creator Interactive Drill Down Tutorial
It might be the case, often, with Image Map creations, as with our recent web application featuring in yesterday's Inhouse Image Map Creator Drill Down Tutorial that the user needs to ...
strike while the iron is hot
... regarding having the event logic be nuanced as the image map area subelements are created in terms of ...
area subelement inline event logic definitions (pointing at, perhaps, local Javascript functions) ... as well as ...
the content of those local Javascript functions
... in such a way that, if you come back to "flesh out" the image map HTML coding the next day, say, there are enough clues you've left that you do not have to go and match the "coords" attribute values to a screen position to get some context. That takes a lot longer we find.
And so, today, we now offer ...
Enter an Image URL (append space to create Image Maps where click/tap pairs can define rectangle corners ... cursor is a crosshair for lower left click/tap, first, then cursor is pointer top right ... append another one space to prompt for tailored event logic each time and two spaces to also review the default Javascript used for double click logic image map testing purposes ... we are going to discourage scrolling here, but you can still zoom out or in)
... Javascript prompt windows "on the fly" to allow for this to be a possibility for the Image Map creator using ...
Onto yesterday's Inhouse Image Map Creator Tutorial we've decided today's work should stay within non-mobile realms but flesh out more user available functionality to help with "stage two" thinking. With that in mind ...
the image map HTML containing textarea created (with yesterday's efforts using the Canvas and Image Map web application (now featuring a new emoji button 🗺️🖼️ to allow for a non-dropdown usage approach)) has an ondblclick event logic added so that when double clicking, at any stage of the image map creation processing, it ...
opens a new popup window where that HTML you have so far is surrounded by a default "rest of webpage" scenario as the HTML that goes into making up that popup window HTML content, and where you can test out it's workings ... as well as ...
that popup window image map, itself, is given an ondblclick event logic whereby a double click there can create below that image map within the same popup window a new textarea element containing all that HTML (default "rest of webpage" and all) which can be copied into a clipboard buffer as required ... and ...
if that textarea within the popup window is edited and the user double clicks that textarea element, a new popup window reflecting your changes is opened above that ... etcetera etcetera etcetera
All this can be used to either/both validate your image map and follow through further to incorporating the image map into a functional HTML webpage, using the changedsignature_signature.js external Javascript to make all this possible. Within that changed external Javascript we allow the user to cancel the proposed area subelement currently embarked upon between where the user has clicked/tapped the bottom left and before they shape to click/tap the top right rectangle definition, via a right click, so as to reset back to the click/tap using the crosshair cursor back at a bottom left area shape=rect subelement definition.
The "largely canvas" using web application last talked about with WordPress Blog Image Editing Media Tutorial, today, we're excited to announce, has been given an "on first draft just image URL" using new ...
Image Map ( ie. <img src="[image URL as entered by user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... arrangement inhouse means to construct image maps, so far, just via an image URL.
Why hook into the largely canvas savvy web application? Well, it is that basic positional mouse event logic that is needed to create image maps, and here, it is a dominant theme, and useful, even though the rearrangement of data needed is quite substantial, still, that is where we think this new functionality appears most at home, being a new suboption ("Image 🖼 Canvas Matches Actual URL or Image Map rectangle area creations") off a dropdown option means of deploying.
No tests on mobile, yet, but on non-mobile, we're happy, once the user chooses to create Image Maps, so long as ...
we stop user web page scrolling ... while still allowing ...
webpage zooming out or in
... in conjunction with ...
replacing the webpage table's left cell content, which used to contain a canvas element, with the user defined image, via it's URL ...
replacing the webpage table's right cell content, which used to contain an canvas annotation menu, with the image map URL HTML built up from user lower left and upper right rectangle defining click/taps
... we have the wherewithal to create image map HTML code the user can copy and use, with "stage two" fleshing out!
... to allow for this image map inhouse functionality. The talents of HTML textarea elements, with their resizing abilities, helps out here, allowing these overlayed textarea elements ...
containing image map HTML ... and/or ...
overlaying semi-transparentally to see what has been clicked already
... also be able to be resized "out of the way" should that be needed perhaps regarding overlapping scenarios, without having to resort to any other type of event logic to allow for. The other big and relevant talent of textarea elements is their ability to contain HTML code and be editable with that HTML code, perhaps user amended, and to be able to Select All then Copy into a clipboard buffer, via it's right click web browser menu, ready to paste somewhere else, that HTML content ready for any required "stage two" embellishment and usage.
... to add to our recent WordPress Blog Image Editing functionality, extending it's capabilities to be able to optionally create either/both ...
Video
Animated GIF
... media presentations off this should the user pick more than one image, to be edited, in any one web browser tab (via window.sessionStorage) session. So far, we're creating ...
window.open
background image
background-size: contain
... "Video" and "Animated GIF" presentations, and see this as a shareable commodity, into the future, especially as the image slide data ends up being an HTML canvas [canvas].toDataURL() data URI that represents ...
lots of data
but understood everywhere
... and content wise has included within it, any canvas manipulations and annotating and reworking the user has applied plus, at least for Google Chrome, any image filtering CSS the user has requested, into that canvas. We shape to involve the cowsayactual web server disk based media creating interfacing, but not for now. We'll see, because WordPress Visual Synopsis Media Tutorial methodologies also ended up presentation wise, with "inhouse" "Video" and "Animated GIF" presentations.
How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some "Mantissa MadnessMagic" takes place using ...
... to help create, within the blog posting webpage content, the HTML skeletal necessaries modelled on how WordPress Visual Synopsis Media Tutorial worked it for Visual Synopsis (Slideshows) functionality which included inhouse "Video" and/or "Animated GIF" media presentations.
WordPress Blog Posting Feature Image Editing Tutorial we're using a hosted HTML iframe window within the blog posting webpage of interest
And that should be a lot easier to handle, yes?! Well, yes, maybe, but not that much easier. A little bit "easier" because the logic is largely funnelled into code that is common to both modus operandi.
In amongst the commonalities, thankfully, the means to get to the "image editing and annotating" and/or "image styling" functionality remains ...
Non-mobile right click or spread/pinch mobile gesture on most blog posting images can lead to image editing and annotating functionality, where for animated GIFs first slide is chosen.
We learnt a bit making the mobile ontouchend spread/pinch detection more bulletproof ...
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
lastsp=eval(e.touches.length);
}
if (eval('' + e.touches.length) >= 1) {
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') == -1) {
onrightclickask();
} else if (e.touches[0].target.outerHTML.split('>')[0].indexOf('<img ') == 0 && e.touches[0].target.outerHTML.split('>')[0].indexOf(' tabindex=') != -1) {
onrightclickask(); //document.title=':' + e.touches[0].target.outerHTML.split('>')[0].substring(1);
}
}
};
}, 4000);
}
... but ahead of this, for the TwentyTen theme changes to codex webpage structure we predominantly do with a good ol' tailored header.php the most effective modified (which is new) codeline now goes ...
Running against us regarding One Image Website design ..
Running for us regarding One Image Website design ...
the programmatical scrolling means embedded iframe hosting will not work
way window.prompt freezes all Javascript at a snapshot of time ...
hashtag navigation can be the conduit to pass data onto inhouse Canvas Editor of Image Data
[canvasContext].drawImage has a variety of useful calls (in that OOP method feel) allowing for dynamic cropping
That "one against" stopped how we envisaged the work at the start of the day. We thought we'd use window.sessionStorage (or maybe window.localStorage) as the only data conduit needed, and we'll be continuing that idea with another approach into the future, but back to today, hashtagging provided that conduit means, even if we were using data URIs (though all we need today are image absolute URLs).
And then there was "the unknown factor" ...
Can [canvasContext].drawImage draw that image with CSS filter styling applied?
Well, we found using Javascript DOM ahead of the new Image() call ...
xcelem=document.getElementById('topcanvas');
xccontext = xcelem.getContext("2d");
xcimg=new Image;
xcimg.onload = function(){
var mysx=('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The x coordinate where to start clipping
var mysy=('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The y coordinate where to start clipping
var myswidth=('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the clipped image
var mysheight=('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the clipped image
var myx=('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The x coordinate where to place the image on the canvas
var myy=('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The y coordinate where to place the image on the canvas
var mywidth=('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the image to use (stretch or reduce the image)
var myheight=('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the image to use (stretch or reduce the image)
if (mywidth != '' && myheight != '') {
xcelem.width=eval('' + mywidth);
xcelem.height=eval('' + myheight);
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
if (myx != '' && myy != '' && myswidth == '' && mysheight == '') {
xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
} else {
xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_sx');
window.sessionStorage.removeItem('user_of_signature_signature_sy');
window.sessionStorage.removeItem('user_of_signature_signature_swidth');
window.sessionStorage.removeItem('user_of_signature_signature_sheight');
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
}
} else {
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
xccontext.drawImage(xcimg,0,0);
setTimeout(function(){ xccontext.drawImage(xcimg,0,0); }, 3000);
}
if (window.parent) {
if (parent.document.getElementById('if_image_canvas')) {
if (('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim() != '') {
if (eval('' + ('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim()) < eval(200 + eval('' + xcelem.height))) {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
} else {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
parent.document.getElementById('if_image_canvas').style.display='block';
if (parent.document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
parent.document.getElementById('if_image_canvas').scrollIntoView();
}
}
}
};
var incomings=('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The image filter CSS styling to apply
if ((incomings.indexOf('%20') != -1 || 7 == 7) && incomings.replace(':',')').indexOf(')') != -1 && incomings.indexOf('style=') != -1) {
incomings='style=' + encodeURIComponent((incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' '));
}
var relincomings=incomings.split('style=')[1] ? decodeURIComponent(incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' ') : '';
if (relincomings.indexOf('filter:') != -1) {
xcimg.style.filter=relincomings.split('filter:')[1].split(';')[0].split('}')[0];
}
xcimg.src=xcont;
... didn't help, and then we asked the online woooorrrrrllllddd to come across this very useful link, thanks to teach us ...
... with the user able to make this happen with those right click (non-mobile) or pinch or swipe gesture (mobile) actions (talked about with yesterday's One Image Website SessionStorage Image Filtering Tutorial) getting the user to a prompt window with the modified "blurb" ...
Optionally, please, any CSS for images ... append three spaces to be able to edit this screenshot in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. filter: grayscale(100%);
... talking about the three appended spaces needed.
clientside image filtering functionality to offer ...
almost exclusively using window.sessionStorage ideas (rather than our usual window.localStorage (ie. like Cookies) usage)
Why is that last point any big deal? Well, programmers will tell you, often the tidy up of a new arrangement involves as much, or more, coding to do than the instigation. And a lot of programmers, am sure, will agree that that is a pain in the neck, often. But the use of window.sessionStorage at the expense of window.localStorage allows the programmer to go ...
Aaaaaahhhhh
There is so much less to tidy up. Using window.sessionStorage it is only data on that web browser tab that comes into play, and as soon as that web browser tab no longer exists, nor does the window.sessionStorage data you stored. Yayyyyyyy!
We found we couldn't quite make it exclusively with window.sessionStorage because in the One Image Website paradigm of offering music playing we lost window.sessionStorage data for one of the two web browser tabs that become involved to start the music rolling. So sad. Nevertheless, we transferred some controllable temporary window.localStorage data storage over to window.sessionStorage data storage at the opportune time ...
... (we figured after a day of tinkering ... so sad).
How can the non-mobile user access these new aesthetic settings? Via a right click, as our new unfettered layer of functionality option, encapsulated by onrightclick.js external Javascript "proof of concept" effort, on the way to a Javascript prompt window, is the way we've gone about it. From there, the user can enter CSS non-selector actions such as the use of CSS filter property.
And as such, it's worth a revisit of one or all of our reworked One Image Website web applications ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
Today, we've bitten the bullet, and decided to shore up the webpage scrolling issues that could occur in yesterday's One Image Website VTT Tracks Tutorial, and before, with our set of One Image Websites. They represent, perhaps, a slightly unusual scenario whereby the image data is allowed to be itself, and being bigger than the dimensions of the webpage (straight from its digital source), in all probability. Hence, the randomized document.body scrolling that occurs.
But up until today our randomized range of scrollLeft and scrollTop positioning that could occur ranged over the entire width and height of the underlying image, while we think we should only be scrolling over the range ([imageWidth] - window.innerWidth (screen width)) x ([imageHeight] - window.innerHeight (screen height)). This could lead to white bands to the right and/or bottom of the webpage, in its presentation. And so we've fixed all the Javascript code to replace the old with the new in all the One Image Website codesets ...
... and, am sorry, but cannot award any points to those who chose the former, because ... well ... it's doubtful we'd mention the second unless we'd done it. And so the answer is ... the former ... down Nala ... the latter!
Today's blog posting is also a little story about the benefits of what we like to call client pre-emptive iframe logic, whereby we open an HTML iframe element, blazing away with its src attribute pointing at a URL that may or may not exist, and if it does, we do something about its content, usually, in the HTML iframe onload event logic. In our case the URL is a VTT file suiting the One Image Website of relevance given the upload and renaming of the VTTs created using yesterday's PHP ffmpeg log to VTT file creator web application.
As a programmer who would like to pursue true track cue Javascript coding, develop the function tracks in the One Image Website index-ssmhalf.html you could View -> Page Source from your favourite web browser, for any of ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
... where, now, where the user plays music, perhaps continuously (like a radio) with an HTML audio element play button press, the currently playing song, thanks to Royalty Free Music For Video, help you keep in touch with the song playing up at the web browser tab and the image title.
This amounted to Javascript changes, as per ...
index.htm ...
var foreground=null; // and get rid of var in var foreground below
var plusstuff='';
function ftchange(tob) {
plusstuff=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
if (document.getElementById('place').title.indexOf(' Playing ') == -1) {
document.getElementById('place').title+=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
} else {
document.getElementById('place').title=document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
}
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i) && document.URL.indexOf('?audio=') == -1) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=00" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
function FadeInImage()
{ var foreground=document.getElementById("place");
window.clearTimeout("FadeInImage('" + "place" + "')");
rotateImage("place");
}
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
//alert('yay2');
anotherNew();
var foreground=document.getElementById(place);
//alert(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//alert('yay2a');
var alink=document.getElementById("alink");
var xxxx=alink.href;
if (xxxx.indexOf("mp3") != -1)
{
//alink.href="index-ssm.html";
//alink.onclick="javascript:void(0);";
alink.href="filewrite.php?id=session&name="+bigrandnumber+"&ext=txt&rand="+bigrandnumber;
alink.onclick="javascript:void(0);";
foreground.onclick="javascript:hasBeenClicked();";
foreground.title="Click for Bamboozled provided by http://www.freesoundtrackmusic.com" + plusstuff;
ffmpeg ... with its great logging and media concatenation talents, thanks ...
macOS Terminal desktop app ... regarding its great GUI design feature allowing you to gather up actions of the past into a copy buffer via its Edit -> Find functionality, thanks
Don't know about you, but have always found the creation of track data VTT files (and their predecessor SRT files) one of the most tedious jobs in programming?
But the work of the day before yesterday's One Image Website iOS Radio Music Tutorial and its audio concatenation via ffmpeg themes had us looking back, wistfully, back up our (macOS) Terminal (desktop apps) logging of a few days past, hoping for an escape from VTT file manual text editing for our wish to enhance our One Image Website work of recent days. Wow, the ffmpeg logging was brilliant!
There was enough there to program the creation of VTT files from the ffmpeg, and our "cd"ing and "ls"ing and other stuff, in the (let's more accurately say, Terminal) logging. Yayyyyy!
If you click the light green form submit button, in the iframe way below, yourself, it will reveal, in details/summary (revealing) tags, both the input and output (VTT files) for you to see this more clearly, or to have it clicked for you in a new window, click this button clicker incarnation. In the works of the HTML form below, for the first time we can remember, and because the defaults are so arcane, we developed HTML form onsubmit logic as per ...
... as a way to deal with arcane defaults, where the encouragement is there for an interested programmer to download PHP code (perhaps to a MAMP local Apache/PHP/mySql web server environment) and tweak to their purposes. Note that you can paste your own logging into the textarea as a way this PHP application can be useful even up at the RJM Programming domain ...
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
... and so, it being tomorrow we're here starting our discussion starting with the "one less window" thought. Have a look at this table outlining some (off the top of the head) clientside navigation techniques in two categories ...
No new window created ...
New window created ...
window.open([URL],'_self')
window.open([URL],'_blank')
location.href=[URL]
window.open([URL],'_top')
window.location=[URL]
top.window.location=[URL]; // if in an iframe
Ajax (with or without new FormData()) whether 'GET' or 'POST'
form target=_blank action=[URL]
form target=_self action=[URL]
form target=_top action=[URL] // if in an iframe
iframe srcdoc=[webpageHTML]
form target=_parent action=[URL] // if in an iframe
iframe src=[URL]
parent.window.location=[URL]; // if in an iframe
... and it's that last left hand column iframe src=[URL] we like for the purposes of these changes today. That new HTML iframe in the "One Image Website" index.htm supervisories is now worked via ...
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
anotherNew();
var foreground=document.getElementById(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//
// more rotateImage code follows ...
//
}
//
// more rotateImage code follows ...
//
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=0" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
... up towards the top right of the index.htm webpage when using an iOS platform. It is optional whether the user ...
clicks Play button of that new top right audio element for continuous "looped audio track sets" mode of use with no new second window required (and so, no window focus changes and no second click required either)
clicks blue link for continuous "looped audio track sets" mode of use with a new second window's audio element that the user clicks the Play button of
clicks none of those modes of use above that are offered for a short time to then click appropriately to start up music, optionally, as required, at a later date as possible
So feel free to try a One Image Website in the list below ...
... where this new iOS music arrangement logic has been incorporated.
Stop Press
The Webpage Meta Refresh Primer Tutorial has reminded us of another left hand "No new window created" navigation methodology using the HTML meta "refresh" tag.
Did you read the recent Responsive Web Design Landing Page Image Map Tutorial? Its core takeaway was the linking of One Image Website functionalities. In these One Image Websites we've picked out a guinea pig ...
... to have a day's worth of experimenting trialling a solution to the "chestnut of a" problem getting iOS music to play continuously without supervision, like a radio program, albeit on a cycle of repeated content (set (such as the oneoffive.mp3 twooffive.mp3 threeoffive.mp3 fouroffive.mp3 fiveoffive.mp3 set of 5 tracks in example below)). Years ago Apple's iOS started requiring a user click to validate the playing of media, hence the interest in today's topic.
The ingredients for the solution, and testing thereof, are ...
optionally, (we're just suggesting this headphone idea if you want to keep the music to yourself) via Bluetooth, with a set up involving a connection to a set of AirPods (and connected to your ears) ... are chosen as ...
click the blue link up the top that appears for a short time ... then ...
in the resultant new music window click the Audio play button presented (the point of interest being that this could be the last click required for continuous music playing, in that audio loop) ... music should play continuously and ...
if more interesting visuals are also required focus back to calling window
And given that the iPhone and AirPods are charged, and you don't charge out of Bluetooth range with the iPhone, you could get that "radio feeling" out of an iOS user experience!
Code changes, all just clientside HTML and Javascript, went ...
calling window's index.htm changes around the document.body onload event area of interest 🎶 ...
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
We're just over time, aren't you?! And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out ... but not today?! Why not? We have a funny set of needs, they being ...
our Image Map's image will have a variable set of width x height dimensions ...
our Image Map's image will be transparent
our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working
... the last condition of which we realized, down the track, required us to create four Image Maps. But ... but ... Nala hears you say?!
Yes, we can reference the one image, in its data URL guise, as a smaller, or not, version of itself, by specifying CSS properties ...
position:absolute; (our usual for overlay scenarios)
z-index:56; (for both transparent image and its associated Image Map ... more on this later)
left (to appropriately position in X to be in the relevant section of dark green Image Map overlaying in the Landing Page)
top (to appropriately position in Y to be in the relevant section of dark green Image Map overlaying in the Landing Page)
width (which will be up to the transparent image width)
height (which will be up to the transparent image height)
... and no concern about opacity given the transparent image and z-index considerations, here.
So, how can we involve a transparent image here? Well, that is where the new Responsive Web Design Landing Page being PHP, though up to today it had contained no PHP, is in our favour. We can use PHP's GD to create one, grab its associated data URL and tidy up, and constructing the four image and associated Image Map HTML elements populated, in its "child iframe", and sending back up into the "parent webpage's" new ...
function ouralert(innum) {
var ans='';
switch ('' + innum) {
case '1':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '2':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '3':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '4':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/slideshow.html', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '5':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '6':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/plus/', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '7':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '8':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
case '9':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
default:
break;
}
if (!ans) { ans=''; }
if (ans != '') {
window.open(ans.trim(), '_blank');
if (ans != ans.trim()) {
window.localStorage.setItem('area' + innum + 'url', encodeURIComponent(ans.trim()));
}
}
}
function imbit() {
//if (document.getElementById('myimg')) {
// document.getElementById('myimg').style.border='5px dashed purple';
//}
if (('' + window.localStorage.getItem('area4url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[3]=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').title=decodeURIComponent('' + window.localStorage.getItem('area4url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area4').href=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').onclick=function(){ omoiset=-1; urls[3]=urls[3]; }
//document.getElementById('area4').ondblclick=function(){ ouralert(4); }
}
if (('' + window.localStorage.getItem('area6url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[5]=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').title=decodeURIComponent('' + window.localStorage.getItem('area6url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area6').href=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').onclick=function(){ omoiset=-1; urls[5]=urls[5]; }
//document.getElementById('area6').ondblclick=function(){ ouralert(6); }
}
}
separating out totally "uninvolved" Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials ... from ...
any other call of any complexity or having a query string etcetera, reverting to the "old way"
... new paradigm? So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]
honing in on our "Landing Page and friends" set of unresponsively designed webpages ...
honing in on iPhone sized devices (ie. not iPads nor laptops) ...
host web browser address bar calls of "Landing Page and friends" set of unresponsively designed webpages within a caller.htmlresponsively web designed shell supervisory webpage and start using some of that ...
In this programming world, it is comforting to think of the “pairings” that go on. But it’s everywhere, the comfort a “pairing” can represent for people.
With this in mind, we designed a simple game …
the player is presented with 5 ideas of a “pairing” … it’s subjective, but …
we believe only one of these will score you a point by clicking on
function prepopulate() { // called at document.body onload
for (var icell=0; icell<5; icell++) {
rectos.push(document.getElementById('td' + eval(1 + icell)).getBoundingClientRect());
}
}
function populate() { // called whenever question changes
var fivebuts=[], fiveoverlays=[];
var makecorrect=Math.floor(Math.random() * 5), recto=null;
var interestg=-1, tg=-1;
sofarb=',';
sofaro=',';
Is it wrong to feel for an inanimate object? We’ll leave that one to the experts!
But we’ve been guilty of naming many inanimate objects. For heaven’s sake, we slept with some Peck’s Paste we were given for Christmas when we were … perhaps … 63?! And then there was that polyarmoured bat at … perhaps … 66?! How time flies?!
Yesterday, though, we were moved, discovering a discarded parking ticket, perhaps, containing a QR Code … all crushed and forlorn and forgotten.
How many QR Codes is humanity going to subject to being crushed and forlorn and forgotten !?!#!?@
Will you please get back to me on this?!
Anyway, then we thought, pulling out the mobile with it’s Camera app …
Can this crushed and forlorn and forgotten QR Code be repurposed !?!#!?@
Will you please get back to me on this?! Oh yeah, that’s why we’re here today … that’s right … we wrote a web application for the honour of …
This crushed and forlorn and, now, not so forgotten QR Code.
We decided making this web application, we’d start using our recent Image Map creation logic “lead in” which got us to a first draft HTML and Javascript (and image map) web application, and then the more sophisticated … like … seconddraft, featuring this new overlay related Javascript function …
… of The Little QR Code That Could web application that we think is reasonably self evident in it’s use (but please don’t underestimate this woooorrrrlllldddd this golden orb‘s crushed and forlorn and, now, not so forgotten QR Code) …
If this was interesting you may be interested in this too.
a single user getting as far into the Image Map creation process themselves because there are advantages to “strike while the iron is hot” marrying up Image Map area element positioning with a description, that can help later with stitching together Javascript event logic that can be useful making the Image Map … useful … but …
that doesn’t mean sharing and collaboration are of no use … perhaps the originator is a better designer than coder, for example
Anyway, that made us turn our attention to sharing and collaboration, email or SMS based, communication functionality, and we saw the two intervention points being …
share the contents of the Image Map only HTML textarea element (with some default surrounding HTML and Javascript supplied) … and after a few double clicks, perhaps, the user might get to be able to …
share the contents of the Image Map (with user tailored surrounding HTML and Javascript) textarea element
So how does a user make this happen? On mobile, it’s ontouchmove over the textarea concerned, where with non-mobile (you’re not going to like this, but we’ve run out of viable event types to use, so plumped for) onmouseout out of that textarea, to use. But won’t this get triggered too often? Well, we’ve coded for a couple of ways this can annoy less but still be that ever useful collaboration tool, via …
var hniis=false, hniisv='';
function shareask(tao) { // share Image Map outerHTML
var anchor=null, laterdo=null;
var proposedurlis='https://' + document.URL.split('//')[1].split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#imagemapize=' + encodeURIComponent(tao.value);
if (!hniis) {
laterdo=hniisv;
if (1 == 1) {
console.log('message length is ' + proposedurlis.length);
} else {
document.title='' + proposedurlis.length + ' ' + document.title;
}
if (laterdo == '') {
laterdo=prompt('Please enter an email address or SMS number to send the Image Map to. To not ask again regarding Image Map progress email or SMS communications in this session click Cancel. If your answer you are happy with from here on append a space to it.', hniisv);
}
if (laterdo == null) { hniis=true; laterdo=''; }
if (laterdo.indexOf('@') > 0) {
if (laterdo != laterdo.trim()) { hniisv=laterdo.trim(); }
anchor = document.createElement('a');
if (tao.value.indexOf('<html') != -1) { // (includes tailored HTML and Javascript around it)
anchor.href = 'mailto:' + laterdo.trim() + '?subject=' + encodeURIComponent('Image Map (includes tailored HTML and Javascript around it) ...') + '&body=' + encodeURIComponent(proposedurlis);
} else {
anchor.href = 'mailto:' + laterdo.trim() + '?subject=' + encodeURIComponent('Image Map (includes default HTML and Javascript around it) ...') + '&body=' + encodeURIComponent(proposedurlis);
}
anchor.style.display='none';
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();
} else if (laterdo.trim() != '' && laterdo.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
if (laterdo != laterdo.trim()) { hniisv=laterdo.trim(); }
anchor = document.createElement('a');
anchor.href = 'sms:' + laterdo.trim() + '&body=' + encodeURIComponent(proposedurlis);
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}
}
… and we may improve the mechanism for this if Luna doesn’t snore tonight?!
Good ol’ hashtag data in emails or SMS comes into play here, and we found, even with Lorem Picsum images, we got viable results, though we found on mobile, the Gmail app “View Entire Message” hold finger down “Open Link” methodology was needed to get through. Gmail URL on macOS just needed the “View Entire Message” part of the workflow here.
mobile platform chance to have three finger gestures help with scrolling functionality … today we have it so that …
mobile platforms are better suited creating Image Maps via canvas and image based inhouse web application (looking out for 🗺️🖼️ emoji button means to create Image Map when ready, as a double click on the canvas can do as well)
… our changes being helped out by the discovery that our previous …
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// is identified around here as a mobile platform
}
… was a bit unreliable identifying mobile iOS platform Safari web browser usage, but this useful link got us to refine that thinking to …
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) > 0) {
// is better identified around here as a mobile platform
}
… with more success. Yayyyyy!
Along the way the HTML textarea elements used to identify Image Map subelement area rectangular limits have their disabled attribute set, which has the benefit …
that there is no need to allow any focus to these textarea elements when nothing any user can enter into them would make any difference anyway … and yet …
at least on non-mobile platforms the useful resizing talents of textarea elements are not stopped because of the disabled attribute being set
… had become a little obsolete (at least, regarding the emoji button workflow), in the sense that, like with the canvas ondblclick event (ie. double click) functionality, why not, when clicking that 🗺️🖼️ Image Map creator emoji button grab the contents of the canvas already displaying as the default content presented to the “potential” (ie. it depends, sometimes, whether you double click that canvas element the next time) Image Map creation session?
Relevant to Random Background Image Map Area Polygons Tutorial and the decision then regarding non-mobile platforms to use an initial click followed by right clicks to enable Image Map area element shape=poly components, today, thinking with respect to mobile platforms, we’ve decided Image Map area element shape=poly components can be created via an initial click followed by double click sequences and going back to the polygon start, with either platform type, ending the polygon with two separated clicks. Also relevant to that same tutorial and it’s pointer-events:none; discovery, today’s mobile work regarding the textarea elements plotted to show the rectangular limits of user defined areas already created we found “real world relevance” to applying this to mobile such textarea elements. That is because on some mobile platforms these textarea elements will never be able to be resized out of the way, but if we apply pointer-events:none; to these, it does not matter, as the user can, as required, click/touch through these overlayed elements that have a huge z-index and semi-transparency applied to them.
Again, perhaps on a mobile platform web browser, feel free to try …
There are known Safari mobile web browser textarea resizing limitations as we discovered trying a Google search of allow textarea resizing on mobile safari web browser, thanks, that we gleaned from the use of …
Solution 2: Standard JavaScript Auto-Grow
If you need to support older versions of iOS Safari that lack the newest CSS specs, you can dynamically update the box height using a tiny JavaScript event listener. This removes the scrollbar and expands the container vertically as they type:
HTML: html
<textarea id=”mobile-textarea” rows=”3″ oninput=”autoGrow(this)”></textarea>
Canvas Interfacer Three Finger Gesture Usage Tutorial
There’s more research needed around here regarding mobile platform usage to the HTML5canvas based ideas swirling around yesterday’s Random Background Image Map Area Polygons Tutorial‘s work, and one issue we came across was …
on mobile platforms you can get to gesture results whereby the canvas is all you see on the screen (eg. of an iPhone) …
but what if you are in “scribble mode” at that point? …
before today, we were having trouble using …
two finger “pinch” gesture to zoom out … or …
one finger “swipe” to reveal more to the right (where, if we could have reached it, that right hand menu of annotation options has none of these “scribble mode” oddities) … because …
before today, that last idea just drew a “scribble” “free drawing” line to the canvas
… to reach the menu or any other non-canvas element not in “scribble mode” (ie. scrolling could not be achieved, at least in a way we could immediately access)
If you are building this for a website or web app, you can use the touchstart and touchmove events to capture finger coordinates, check if exactly three fingers are on the screen, and then calculate the direction.
… to (start with global … var isthree=false; and) end up with …
… near the top of our function toptouchHandler(event) Javascript code in our changedsignature_signature.js external Javascript canvas interfacer helper.
Image Map only allowing for area subelements with shape=rect … today we also allow for …
Image Map now allowing for area subelements with shape=poly …
… via …
Right clicks after an initial click are the means by which you can define area shape=poly ( as distinct from the default shape=rect ) elements where to finish a polygon two click back close to the start point.
… as a modus operandi for the user to cater for more complex shape definitions in their Image Maps.
That doesn’t mean the rectangle around such a polygon is not also significant. Do you know why?
Yes, a hosting HTML div of a specific width and height and positioned absolutely at a precise left and top screen position allows SVG innerHTML like …
<svg xmlns="http://w3.org" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><polyline points="0,67,56,7,100,0,150,17,0,67"></polyline></svg> ... be showing a polygonal user clicked shape, scaled appropriately, yet responsively, and allowing for those % unit definitions above making all this methodology useful here. Notice the zero co-ordinates? That is no accident. We make the co-ordinates relative to the minimum x and minimum y "datum" to the co-ordinating.
To pass events down through a higher z-index element, add pointer-events: none; to the top element. This tells the browser to ignore the overlay for mouse events, allowing clicks and hovers to "fall through" to the element stacked beneath it.
... to learn a whole new technique we've been looking for for quite some time now ... now, where did we put that "Overlay Disappointments File"?! ... bye bye!
... and allowing users using our inhouse Random Background interfacer the chance to create some Image Maps using incarnations of these images as the visual basis to them.
We've chosen ...
the oncontextmenu (ie. right click) as an intervention point to facilitate this ... or ...
if using a macOS operating system a ...
control-command-shift-3
control-command-shift-5
...
document.addEventListener('keydown', (event) => { // thanks to https://www.google.com/search?q=javascript+detecting+control-command-shift-3&rlz=1C5OZZY_en&oq=javascript+detecting+control-command-shift-3&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRiPAjIHCAYQIRiPAjIHCAcQIRiPAtIBCTE3NzMyajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
// Check if Control, Command (metaKey), and Shift are all held down
// AND the key pressed is the number 3
if (
event.ctrlKey &&
event.metaKey &&
event.shiftKey &&
event.code === 'Digit5'
) {
// Prevent the default browser action if necessary
//event.preventDefault();
established a URL means by which a single URL call from the canvas residing Inhouse Image Map Creator and Canvas Annotation web application via a data URI hashtag conduit ... and today just ...
allowing for an absolute URL in that hashtag is the relatively simple change needed so that, using this, our WordPress "right click over an img image element" functionality can be tweaked ...
var huhifs=prompt('Optionally, please, any CSS for images ... append 3 spaces to be able to edit this ' + (gthing == 'image' ? gthing + ' (and answer of #imagemap will use this image as basis for creation of an image map in a new window)' : gthing) + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
if (huhifs == null) {
huhifs='';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (event.target.outerHTML.indexOf('<a ') == 0) {
console.log(6);
ggurl=event.target.href;
} else {
console.log(66);
ggurl=document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="')[eval(-1 + document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="').length)].split('"')[0];
}
if (6 == 6) {
console.log(ggurl);
window.open(ggurl,'_blank'); ggurl='';
// huhifs=window.prompt('Optionally, please, any CSS for images ... append three spaces to be able to edit this ' + gthing + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
} else {
setTimeout(function(){ window.open(ggurl,'_blank'); ggurl=''; }, 5000); //alert(event.currentTarget.outerHTML); //event.currentTarget.click();
}
}
}
if (huhifs.toLowerCase() == '#imagemap') {
event.preventDefault();
event.stopPropagation();
ggurl=event.target.src;
window.open('//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm?imagemap=url#' + (ggurl.indexOf('//') != -1 ? '//' + ggurl.split('//')[1] : (ggurl.replace(/^\.\//g,'/').indexOf('/') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(1).replace(/^\//g,'ITblog/') : (ggurl.indexOf('../') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(3) : ggurl))),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height));
ggurl='';
} else if (huhifs.indexOf('data:image/') == 0) {
if (document.getElementById('imgcopycheck') && usuff != '') { //if (document.URL.indexOf('/streetart/') != -1) {
uplitc(huhifs); //alert(document.URL);
}
return '';
}
... as an excerpt from the changedonrightclick.js external Javascript called by WordPress, and calling ...
... good, now, again ... an image is a canvas is an image ...
an image is a canvas is an image
... excellent, now, backwards ... egami na si savnac a si egami na ...
egami na si savnac a si egami na
... wow! ... Now, lastly … I want my mamma! Now! ...
I want my mamma! Now!
Mamma! Thank god you’re here! But it's true. Our thinking behind allowing browsed for image files become data URIs that can be the img element "image" part of the "image map", further to yesterday's Inhouse Image Map Creator Mobile Debug Tutorial, we can now create using our inhouse Image Map Creator capable web application uses the "an image via [canvasContext].drawImage() is a canvas via [canvas].toDataURL() is an image" concept that can save us heaps of time with this project. Instead of intervening at each dropdown option mentioning "Browse" to make this design change, we, instead, introduce to the HTML5canvas element a new ondblclick event ...
<canvas ondblclick="qwowo=window.open(document.URL.split('?')[0].split('#')[0] + '?imagemap=url#' + this.toDataURL('image/jpeg',0.4),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height) + '');" ondragstart="dragstart(event);" draggable="false" title="Ready for you to create your canvas 🎨 content above any signature 💳 panel ... keys U for Undo and R for Redo can work after a discrete click ending any scribble mode of use. Double click can facilitate turning this canvas content into an image map, and this canvas content can be populated by so many of the options in the menu to the right, which includes many local image file browsing choices." id="topcanvas" width=850 height=600 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas>
... allowing that "on double click" result in the web application turning into an Image Map Creator where now ...
Image Map ( ie. <img src="[image URL as entered by user or data URI browsed for by the user, or, come to think of it, from a couple of days back, entered in by the user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... is that very pithy redefinition of our web application's view of what an Image Map can be! Though?!
Apologies to any mobile users wanting to access this new inhouse Image Map creator web application last talked about with yesterday's Inhouse Image Map Creator Interactive Drill Down Tutorial before today, that is, but we were leaving the issue until a proper hardware ...
Mac Book Air
Apple white lead
iPhone
... that once the middle one plugs into the top and bottom allows for ...
iPhone Safari web browser call of the inhouse Image Map creator ... could tee up with (ie. attain a "connection" with) ...
Mac Book Air Safari web browser Develop -> (in our case) Robert's iPhone -> user_of_signature_signature.htm
... online debugging session, could be arranged and a block of time set aside to concentrate on, because "concentrate" is the name of the game here!
Luckily, the issue was straightforward, where many are not. In the overseeing code, we had ...
... ba bow ... because in the external Javascript we got pulled up by the debugging of the iPhone execution attempt at a codeline, where the user decides to take on an Image Map creation task ...
Inhouse Image Map Creator Interactive Drill Down Tutorial
It might be the case, often, with Image Map creations, as with our recent web application featuring in yesterday's Inhouse Image Map Creator Drill Down Tutorial that the user needs to ...
strike while the iron is hot
... regarding having the event logic be nuanced as the image map area subelements are created in terms of ...
area subelement inline event logic definitions (pointing at, perhaps, local Javascript functions) ... as well as ...
the content of those local Javascript functions
... in such a way that, if you come back to "flesh out" the image map HTML coding the next day, say, there are enough clues you've left that you do not have to go and match the "coords" attribute values to a screen position to get some context. That takes a lot longer we find.
And so, today, we now offer ...
Enter an Image URL (append space to create Image Maps where click/tap pairs can define rectangle corners ... cursor is a crosshair for lower left click/tap, first, then cursor is pointer top right ... append another one space to prompt for tailored event logic each time and two spaces to also review the default Javascript used for double click logic image map testing purposes ... we are going to discourage scrolling here, but you can still zoom out or in)
... Javascript prompt windows "on the fly" to allow for this to be a possibility for the Image Map creator using ...
Onto yesterday's Inhouse Image Map Creator Tutorial we've decided today's work should stay within non-mobile realms but flesh out more user available functionality to help with "stage two" thinking. With that in mind ...
the image map HTML containing textarea created (with yesterday's efforts using the Canvas and Image Map web application (now featuring a new emoji button 🗺️🖼️ to allow for a non-dropdown usage approach)) has an ondblclick event logic added so that when double clicking, at any stage of the image map creation processing, it ...
opens a new popup window where that HTML you have so far is surrounded by a default "rest of webpage" scenario as the HTML that goes into making up that popup window HTML content, and where you can test out it's workings ... as well as ...
that popup window image map, itself, is given an ondblclick event logic whereby a double click there can create below that image map within the same popup window a new textarea element containing all that HTML (default "rest of webpage" and all) which can be copied into a clipboard buffer as required ... and ...
if that textarea within the popup window is edited and the user double clicks that textarea element, a new popup window reflecting your changes is opened above that ... etcetera etcetera etcetera
All this can be used to either/both validate your image map and follow through further to incorporating the image map into a functional HTML webpage, using the changedsignature_signature.js external Javascript to make all this possible. Within that changed external Javascript we allow the user to cancel the proposed area subelement currently embarked upon between where the user has clicked/tapped the bottom left and before they shape to click/tap the top right rectangle definition, via a right click, so as to reset back to the click/tap using the crosshair cursor back at a bottom left area shape=rect subelement definition.
The "largely canvas" using web application last talked about with WordPress Blog Image Editing Media Tutorial, today, we're excited to announce, has been given an "on first draft just image URL" using new ...
Image Map ( ie. <img src="[image URL as entered by user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... arrangement inhouse means to construct image maps, so far, just via an image URL.
Why hook into the largely canvas savvy web application? Well, it is that basic positional mouse event logic that is needed to create image maps, and here, it is a dominant theme, and useful, even though the rearrangement of data needed is quite substantial, still, that is where we think this new functionality appears most at home, being a new suboption ("Image 🖼 Canvas Matches Actual URL or Image Map rectangle area creations") off a dropdown option means of deploying.
No tests on mobile, yet, but on non-mobile, we're happy, once the user chooses to create Image Maps, so long as ...
we stop user web page scrolling ... while still allowing ...
webpage zooming out or in
... in conjunction with ...
replacing the webpage table's left cell content, which used to contain a canvas element, with the user defined image, via it's URL ...
replacing the webpage table's right cell content, which used to contain an canvas annotation menu, with the image map URL HTML built up from user lower left and upper right rectangle defining click/taps
... we have the wherewithal to create image map HTML code the user can copy and use, with "stage two" fleshing out!
... to allow for this image map inhouse functionality. The talents of HTML textarea elements, with their resizing abilities, helps out here, allowing these overlayed textarea elements ...
containing image map HTML ... and/or ...
overlaying semi-transparentally to see what has been clicked already
... also be able to be resized "out of the way" should that be needed perhaps regarding overlapping scenarios, without having to resort to any other type of event logic to allow for. The other big and relevant talent of textarea elements is their ability to contain HTML code and be editable with that HTML code, perhaps user amended, and to be able to Select All then Copy into a clipboard buffer, via it's right click web browser menu, ready to paste somewhere else, that HTML content ready for any required "stage two" embellishment and usage.
... to add to our recent WordPress Blog Image Editing functionality, extending it's capabilities to be able to optionally create either/both ...
Video
Animated GIF
... media presentations off this should the user pick more than one image, to be edited, in any one web browser tab (via window.sessionStorage) session. So far, we're creating ...
window.open
background image
background-size: contain
... "Video" and "Animated GIF" presentations, and see this as a shareable commodity, into the future, especially as the image slide data ends up being an HTML canvas [canvas].toDataURL() data URI that represents ...
lots of data
but understood everywhere
... and content wise has included within it, any canvas manipulations and annotating and reworking the user has applied plus, at least for Google Chrome, any image filtering CSS the user has requested, into that canvas. We shape to involve the cowsayactual web server disk based media creating interfacing, but not for now. We'll see, because WordPress Visual Synopsis Media Tutorial methodologies also ended up presentation wise, with "inhouse" "Video" and "Animated GIF" presentations.
How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some "Mantissa MadnessMagic" takes place using ...
... to help create, within the blog posting webpage content, the HTML skeletal necessaries modelled on how WordPress Visual Synopsis Media Tutorial worked it for Visual Synopsis (Slideshows) functionality which included inhouse "Video" and/or "Animated GIF" media presentations.
WordPress Blog Posting Feature Image Editing Tutorial we're using a hosted HTML iframe window within the blog posting webpage of interest
And that should be a lot easier to handle, yes?! Well, yes, maybe, but not that much easier. A little bit "easier" because the logic is largely funnelled into code that is common to both modus operandi.
In amongst the commonalities, thankfully, the means to get to the "image editing and annotating" and/or "image styling" functionality remains ...
Non-mobile right click or spread/pinch mobile gesture on most blog posting images can lead to image editing and annotating functionality, where for animated GIFs first slide is chosen.
We learnt a bit making the mobile ontouchend spread/pinch detection more bulletproof ...
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
lastsp=eval(e.touches.length);
}
if (eval('' + e.touches.length) >= 1) {
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') == -1) {
onrightclickask();
} else if (e.touches[0].target.outerHTML.split('>')[0].indexOf('<img ') == 0 && e.touches[0].target.outerHTML.split('>')[0].indexOf(' tabindex=') != -1) {
onrightclickask(); //document.title=':' + e.touches[0].target.outerHTML.split('>')[0].substring(1);
}
}
};
}, 4000);
}
... but ahead of this, for the TwentyTen theme changes to codex webpage structure we predominantly do with a good ol' tailored header.php the most effective modified (which is new) codeline now goes ...
Running against us regarding One Image Website design ..
Running for us regarding One Image Website design ...
the programmatical scrolling means embedded iframe hosting will not work
way window.prompt freezes all Javascript at a snapshot of time ...
hashtag navigation can be the conduit to pass data onto inhouse Canvas Editor of Image Data
[canvasContext].drawImage has a variety of useful calls (in that OOP method feel) allowing for dynamic cropping
That "one against" stopped how we envisaged the work at the start of the day. We thought we'd use window.sessionStorage (or maybe window.localStorage) as the only data conduit needed, and we'll be continuing that idea with another approach into the future, but back to today, hashtagging provided that conduit means, even if we were using data URIs (though all we need today are image absolute URLs).
And then there was "the unknown factor" ...
Can [canvasContext].drawImage draw that image with CSS filter styling applied?
Well, we found using Javascript DOM ahead of the new Image() call ...
xcelem=document.getElementById('topcanvas');
xccontext = xcelem.getContext("2d");
xcimg=new Image;
xcimg.onload = function(){
var mysx=('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The x coordinate where to start clipping
var mysy=('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The y coordinate where to start clipping
var myswidth=('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the clipped image
var mysheight=('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the clipped image
var myx=('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The x coordinate where to place the image on the canvas
var myy=('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The y coordinate where to place the image on the canvas
var mywidth=('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the image to use (stretch or reduce the image)
var myheight=('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the image to use (stretch or reduce the image)
if (mywidth != '' && myheight != '') {
xcelem.width=eval('' + mywidth);
xcelem.height=eval('' + myheight);
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
if (myx != '' && myy != '' && myswidth == '' && mysheight == '') {
xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
} else {
xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_sx');
window.sessionStorage.removeItem('user_of_signature_signature_sy');
window.sessionStorage.removeItem('user_of_signature_signature_swidth');
window.sessionStorage.removeItem('user_of_signature_signature_sheight');
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
}
} else {
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
xccontext.drawImage(xcimg,0,0);
setTimeout(function(){ xccontext.drawImage(xcimg,0,0); }, 3000);
}
if (window.parent) {
if (parent.document.getElementById('if_image_canvas')) {
if (('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim() != '') {
if (eval('' + ('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim()) < eval(200 + eval('' + xcelem.height))) {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
} else {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
parent.document.getElementById('if_image_canvas').style.display='block';
if (parent.document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
parent.document.getElementById('if_image_canvas').scrollIntoView();
}
}
}
};
var incomings=('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The image filter CSS styling to apply
if ((incomings.indexOf('%20') != -1 || 7 == 7) && incomings.replace(':',')').indexOf(')') != -1 && incomings.indexOf('style=') != -1) {
incomings='style=' + encodeURIComponent((incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' '));
}
var relincomings=incomings.split('style=')[1] ? decodeURIComponent(incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' ') : '';
if (relincomings.indexOf('filter:') != -1) {
xcimg.style.filter=relincomings.split('filter:')[1].split(';')[0].split('}')[0];
}
xcimg.src=xcont;
... didn't help, and then we asked the online woooorrrrrllllddd to come across this very useful link, thanks to teach us ...
... with the user able to make this happen with those right click (non-mobile) or pinch or swipe gesture (mobile) actions (talked about with yesterday's One Image Website SessionStorage Image Filtering Tutorial) getting the user to a prompt window with the modified "blurb" ...
Optionally, please, any CSS for images ... append three spaces to be able to edit this screenshot in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. filter: grayscale(100%);
... talking about the three appended spaces needed.
clientside image filtering functionality to offer ...
almost exclusively using window.sessionStorage ideas (rather than our usual window.localStorage (ie. like Cookies) usage)
Why is that last point any big deal? Well, programmers will tell you, often the tidy up of a new arrangement involves as much, or more, coding to do than the instigation. And a lot of programmers, am sure, will agree that that is a pain in the neck, often. But the use of window.sessionStorage at the expense of window.localStorage allows the programmer to go ...
Aaaaaahhhhh
There is so much less to tidy up. Using window.sessionStorage it is only data on that web browser tab that comes into play, and as soon as that web browser tab no longer exists, nor does the window.sessionStorage data you stored. Yayyyyyyy!
We found we couldn't quite make it exclusively with window.sessionStorage because in the One Image Website paradigm of offering music playing we lost window.sessionStorage data for one of the two web browser tabs that become involved to start the music rolling. So sad. Nevertheless, we transferred some controllable temporary window.localStorage data storage over to window.sessionStorage data storage at the opportune time ...
... (we figured after a day of tinkering ... so sad).
How can the non-mobile user access these new aesthetic settings? Via a right click, as our new unfettered layer of functionality option, encapsulated by onrightclick.js external Javascript "proof of concept" effort, on the way to a Javascript prompt window, is the way we've gone about it. From there, the user can enter CSS non-selector actions such as the use of CSS filter property.
And as such, it's worth a revisit of one or all of our reworked One Image Website web applications ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
Today, we've bitten the bullet, and decided to shore up the webpage scrolling issues that could occur in yesterday's One Image Website VTT Tracks Tutorial, and before, with our set of One Image Websites. They represent, perhaps, a slightly unusual scenario whereby the image data is allowed to be itself, and being bigger than the dimensions of the webpage (straight from its digital source), in all probability. Hence, the randomized document.body scrolling that occurs.
But up until today our randomized range of scrollLeft and scrollTop positioning that could occur ranged over the entire width and height of the underlying image, while we think we should only be scrolling over the range ([imageWidth] - window.innerWidth (screen width)) x ([imageHeight] - window.innerHeight (screen height)). This could lead to white bands to the right and/or bottom of the webpage, in its presentation. And so we've fixed all the Javascript code to replace the old with the new in all the One Image Website codesets ...
... and, am sorry, but cannot award any points to those who chose the former, because ... well ... it's doubtful we'd mention the second unless we'd done it. And so the answer is ... the former ... down Nala ... the latter!
Today's blog posting is also a little story about the benefits of what we like to call client pre-emptive iframe logic, whereby we open an HTML iframe element, blazing away with its src attribute pointing at a URL that may or may not exist, and if it does, we do something about its content, usually, in the HTML iframe onload event logic. In our case the URL is a VTT file suiting the One Image Website of relevance given the upload and renaming of the VTTs created using yesterday's PHP ffmpeg log to VTT file creator web application.
As a programmer who would like to pursue true track cue Javascript coding, develop the function tracks in the One Image Website index-ssmhalf.html you could View -> Page Source from your favourite web browser, for any of ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
... where, now, where the user plays music, perhaps continuously (like a radio) with an HTML audio element play button press, the currently playing song, thanks to Royalty Free Music For Video, help you keep in touch with the song playing up at the web browser tab and the image title.
This amounted to Javascript changes, as per ...
index.htm ...
var foreground=null; // and get rid of var in var foreground below
var plusstuff='';
function ftchange(tob) {
plusstuff=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
if (document.getElementById('place').title.indexOf(' Playing ') == -1) {
document.getElementById('place').title+=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
} else {
document.getElementById('place').title=document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
}
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i) && document.URL.indexOf('?audio=') == -1) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=00" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
function FadeInImage()
{ var foreground=document.getElementById("place");
window.clearTimeout("FadeInImage('" + "place" + "')");
rotateImage("place");
}
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
//alert('yay2');
anotherNew();
var foreground=document.getElementById(place);
//alert(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//alert('yay2a');
var alink=document.getElementById("alink");
var xxxx=alink.href;
if (xxxx.indexOf("mp3") != -1)
{
//alink.href="index-ssm.html";
//alink.onclick="javascript:void(0);";
alink.href="filewrite.php?id=session&name="+bigrandnumber+"&ext=txt&rand="+bigrandnumber;
alink.onclick="javascript:void(0);";
foreground.onclick="javascript:hasBeenClicked();";
foreground.title="Click for Bamboozled provided by http://www.freesoundtrackmusic.com" + plusstuff;
ffmpeg ... with its great logging and media concatenation talents, thanks ...
macOS Terminal desktop app ... regarding its great GUI design feature allowing you to gather up actions of the past into a copy buffer via its Edit -> Find functionality, thanks
Don't know about you, but have always found the creation of track data VTT files (and their predecessor SRT files) one of the most tedious jobs in programming?
But the work of the day before yesterday's One Image Website iOS Radio Music Tutorial and its audio concatenation via ffmpeg themes had us looking back, wistfully, back up our (macOS) Terminal (desktop apps) logging of a few days past, hoping for an escape from VTT file manual text editing for our wish to enhance our One Image Website work of recent days. Wow, the ffmpeg logging was brilliant!
There was enough there to program the creation of VTT files from the ffmpeg, and our "cd"ing and "ls"ing and other stuff, in the (let's more accurately say, Terminal) logging. Yayyyyy!
If you click the light green form submit button, in the iframe way below, yourself, it will reveal, in details/summary (revealing) tags, both the input and output (VTT files) for you to see this more clearly, or to have it clicked for you in a new window, click this button clicker incarnation. In the works of the HTML form below, for the first time we can remember, and because the defaults are so arcane, we developed HTML form onsubmit logic as per ...
... as a way to deal with arcane defaults, where the encouragement is there for an interested programmer to download PHP code (perhaps to a MAMP local Apache/PHP/mySql web server environment) and tweak to their purposes. Note that you can paste your own logging into the textarea as a way this PHP application can be useful even up at the RJM Programming domain ...
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
... and so, it being tomorrow we're here starting our discussion starting with the "one less window" thought. Have a look at this table outlining some (off the top of the head) clientside navigation techniques in two categories ...
No new window created ...
New window created ...
window.open([URL],'_self')
window.open([URL],'_blank')
location.href=[URL]
window.open([URL],'_top')
window.location=[URL]
top.window.location=[URL]; // if in an iframe
Ajax (with or without new FormData()) whether 'GET' or 'POST'
form target=_blank action=[URL]
form target=_self action=[URL]
form target=_top action=[URL] // if in an iframe
iframe srcdoc=[webpageHTML]
form target=_parent action=[URL] // if in an iframe
iframe src=[URL]
parent.window.location=[URL]; // if in an iframe
... and it's that last left hand column iframe src=[URL] we like for the purposes of these changes today. That new HTML iframe in the "One Image Website" index.htm supervisories is now worked via ...
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
anotherNew();
var foreground=document.getElementById(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//
// more rotateImage code follows ...
//
}
//
// more rotateImage code follows ...
//
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=0" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
... up towards the top right of the index.htm webpage when using an iOS platform. It is optional whether the user ...
clicks Play button of that new top right audio element for continuous "looped audio track sets" mode of use with no new second window required (and so, no window focus changes and no second click required either)
clicks blue link for continuous "looped audio track sets" mode of use with a new second window's audio element that the user clicks the Play button of
clicks none of those modes of use above that are offered for a short time to then click appropriately to start up music, optionally, as required, at a later date as possible
So feel free to try a One Image Website in the list below ...
... where this new iOS music arrangement logic has been incorporated.
Stop Press
The Webpage Meta Refresh Primer Tutorial has reminded us of another left hand "No new window created" navigation methodology using the HTML meta "refresh" tag.
Did you read the recent Responsive Web Design Landing Page Image Map Tutorial? Its core takeaway was the linking of One Image Website functionalities. In these One Image Websites we've picked out a guinea pig ...
... to have a day's worth of experimenting trialling a solution to the "chestnut of a" problem getting iOS music to play continuously without supervision, like a radio program, albeit on a cycle of repeated content (set (such as the oneoffive.mp3 twooffive.mp3 threeoffive.mp3 fouroffive.mp3 fiveoffive.mp3 set of 5 tracks in example below)). Years ago Apple's iOS started requiring a user click to validate the playing of media, hence the interest in today's topic.
The ingredients for the solution, and testing thereof, are ...
optionally, (we're just suggesting this headphone idea if you want to keep the music to yourself) via Bluetooth, with a set up involving a connection to a set of AirPods (and connected to your ears) ... are chosen as ...
click the blue link up the top that appears for a short time ... then ...
in the resultant new music window click the Audio play button presented (the point of interest being that this could be the last click required for continuous music playing, in that audio loop) ... music should play continuously and ...
if more interesting visuals are also required focus back to calling window
And given that the iPhone and AirPods are charged, and you don't charge out of Bluetooth range with the iPhone, you could get that "radio feeling" out of an iOS user experience!
Code changes, all just clientside HTML and Javascript, went ...
calling window's index.htm changes around the document.body onload event area of interest 🎶 ...
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
We're just over time, aren't you?! And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out ... but not today?! Why not? We have a funny set of needs, they being ...
our Image Map's image will have a variable set of width x height dimensions ...
our Image Map's image will be transparent
our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working
... the last condition of which we realized, down the track, required us to create four Image Maps. But ... but ... Nala hears you say?!
Yes, we can reference the one image, in its data URL guise, as a smaller, or not, version of itself, by specifying CSS properties ...
position:absolute; (our usual for overlay scenarios)
z-index:56; (for both transparent image and its associated Image Map ... more on this later)
left (to appropriately position in X to be in the relevant section of dark green Image Map overlaying in the Landing Page)
top (to appropriately position in Y to be in the relevant section of dark green Image Map overlaying in the Landing Page)
width (which will be up to the transparent image width)
height (which will be up to the transparent image height)
... and no concern about opacity given the transparent image and z-index considerations, here.
So, how can we involve a transparent image here? Well, that is where the new Responsive Web Design Landing Page being PHP, though up to today it had contained no PHP, is in our favour. We can use PHP's GD to create one, grab its associated data URL and tidy up, and constructing the four image and associated Image Map HTML elements populated, in its "child iframe", and sending back up into the "parent webpage's" new ...
function ouralert(innum) {
var ans='';
switch ('' + innum) {
case '1':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '2':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '3':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '4':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/slideshow.html', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '5':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '6':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/plus/', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '7':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '8':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
case '9':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
default:
break;
}
if (!ans) { ans=''; }
if (ans != '') {
window.open(ans.trim(), '_blank');
if (ans != ans.trim()) {
window.localStorage.setItem('area' + innum + 'url', encodeURIComponent(ans.trim()));
}
}
}
function imbit() {
//if (document.getElementById('myimg')) {
// document.getElementById('myimg').style.border='5px dashed purple';
//}
if (('' + window.localStorage.getItem('area4url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[3]=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').title=decodeURIComponent('' + window.localStorage.getItem('area4url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area4').href=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').onclick=function(){ omoiset=-1; urls[3]=urls[3]; }
//document.getElementById('area4').ondblclick=function(){ ouralert(4); }
}
if (('' + window.localStorage.getItem('area6url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[5]=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').title=decodeURIComponent('' + window.localStorage.getItem('area6url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area6').href=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').onclick=function(){ omoiset=-1; urls[5]=urls[5]; }
//document.getElementById('area6').ondblclick=function(){ ouralert(6); }
}
}
separating out totally "uninvolved" Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials ... from ...
any other call of any complexity or having a query string etcetera, reverting to the "old way"
... new paradigm? So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]
honing in on our "Landing Page and friends" set of unresponsively designed webpages ...
honing in on iPhone sized devices (ie. not iPads nor laptops) ...
host web browser address bar calls of "Landing Page and friends" set of unresponsively designed webpages within a caller.htmlresponsively web designed shell supervisory webpage and start using some of that ...
mobile platform chance to have three finger gestures help with scrolling functionality … today we have it so that …
mobile platforms are better suited creating Image Maps via canvas and image based inhouse web application (looking out for 🗺️🖼️ emoji button means to create Image Map when ready, as a double click on the canvas can do as well)
… our changes being helped out by the discovery that our previous …
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// is identified around here as a mobile platform
}
… was a bit unreliable identifying mobile iOS platform Safari web browser usage, but this useful link got us to refine that thinking to …
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || eval(String.fromCharCode(32).trim() + navigator.maxTouchPoints) > 0) {
// is better identified around here as a mobile platform
}
… with more success. Yayyyyy!
Along the way the HTML textarea elements used to identify Image Map subelement area rectangular limits have their disabled attribute set, which has the benefit …
that there is no need to allow any focus to these textarea elements when nothing any user can enter into them would make any difference anyway … and yet …
at least on non-mobile platforms the useful resizing talents of textarea elements are not stopped because of the disabled attribute being set
… had become a little obsolete (at least, regarding the emoji button workflow), in the sense that, like with the canvas ondblclick event (ie. double click) functionality, why not, when clicking that 🗺️🖼️ Image Map creator emoji button grab the contents of the canvas already displaying as the default content presented to the “potential” (ie. it depends, sometimes, whether you double click that canvas element the next time) Image Map creation session?
Relevant to Random Background Image Map Area Polygons Tutorial and the decision then regarding non-mobile platforms to use an initial click followed by right clicks to enable Image Map area element shape=poly components, today, thinking with respect to mobile platforms, we’ve decided Image Map area element shape=poly components can be created via an initial click followed by double click sequences and going back to the polygon start, with either platform type, ending the polygon with two separated clicks. Also relevant to that same tutorial and it’s pointer-events:none; discovery, today’s mobile work regarding the textarea elements plotted to show the rectangular limits of user defined areas already created we found “real world relevance” to applying this to mobile such textarea elements. That is because on some mobile platforms these textarea elements will never be able to be resized out of the way, but if we apply pointer-events:none; to these, it does not matter, as the user can, as required, click/touch through these overlayed elements that have a huge z-index and semi-transparency applied to them.
Again, perhaps on a mobile platform web browser, feel free to try …
There are known Safari mobile web browser textarea resizing limitations as we discovered trying a Google search of allow textarea resizing on mobile safari web browser, thanks, that we gleaned from the use of …
Solution 2: Standard JavaScript Auto-Grow
If you need to support older versions of iOS Safari that lack the newest CSS specs, you can dynamically update the box height using a tiny JavaScript event listener. This removes the scrollbar and expands the container vertically as they type:
HTML: html
<textarea id=”mobile-textarea” rows=”3″ oninput=”autoGrow(this)”></textarea>
Canvas Interfacer Three Finger Gesture Usage Tutorial
There’s more research needed around here regarding mobile platform usage to the HTML5canvas based ideas swirling around yesterday’s Random Background Image Map Area Polygons Tutorial‘s work, and one issue we came across was …
on mobile platforms you can get to gesture results whereby the canvas is all you see on the screen (eg. of an iPhone) …
but what if you are in “scribble mode” at that point? …
before today, we were having trouble using …
two finger “pinch” gesture to zoom out … or …
one finger “swipe” to reveal more to the right (where, if we could have reached it, that right hand menu of annotation options has none of these “scribble mode” oddities) … because …
before today, that last idea just drew a “scribble” “free drawing” line to the canvas
… to reach the menu or any other non-canvas element not in “scribble mode” (ie. scrolling could not be achieved, at least in a way we could immediately access)
If you are building this for a website or web app, you can use the touchstart and touchmove events to capture finger coordinates, check if exactly three fingers are on the screen, and then calculate the direction.
… to (start with global … var isthree=false; and) end up with …
… near the top of our function toptouchHandler(event) Javascript code in our changedsignature_signature.js external Javascript canvas interfacer helper.
Image Map only allowing for area subelements with shape=rect … today we also allow for …
Image Map now allowing for area subelements with shape=poly …
… via …
Right clicks after an initial click are the means by which you can define area shape=poly ( as distinct from the default shape=rect ) elements where to finish a polygon two click back close to the start point.
… as a modus operandi for the user to cater for more complex shape definitions in their Image Maps.
That doesn’t mean the rectangle around such a polygon is not also significant. Do you know why?
Yes, a hosting HTML div of a specific width and height and positioned absolutely at a precise left and top screen position allows SVG innerHTML like …
<svg xmlns="http://w3.org" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><polyline points="0,67,56,7,100,0,150,17,0,67"></polyline></svg> ... be showing a polygonal user clicked shape, scaled appropriately, yet responsively, and allowing for those % unit definitions above making all this methodology useful here. Notice the zero co-ordinates? That is no accident. We make the co-ordinates relative to the minimum x and minimum y "datum" to the co-ordinating.
To pass events down through a higher z-index element, add pointer-events: none; to the top element. This tells the browser to ignore the overlay for mouse events, allowing clicks and hovers to "fall through" to the element stacked beneath it.
... to learn a whole new technique we've been looking for for quite some time now ... now, where did we put that "Overlay Disappointments File"?! ... bye bye!
... and allowing users using our inhouse Random Background interfacer the chance to create some Image Maps using incarnations of these images as the visual basis to them.
We've chosen ...
the oncontextmenu (ie. right click) as an intervention point to facilitate this ... or ...
if using a macOS operating system a ...
control-command-shift-3
control-command-shift-5
...
document.addEventListener('keydown', (event) => { // thanks to https://www.google.com/search?q=javascript+detecting+control-command-shift-3&rlz=1C5OZZY_en&oq=javascript+detecting+control-command-shift-3&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRiPAjIHCAYQIRiPAjIHCAcQIRiPAtIBCTE3NzMyajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
// Check if Control, Command (metaKey), and Shift are all held down
// AND the key pressed is the number 3
if (
event.ctrlKey &&
event.metaKey &&
event.shiftKey &&
event.code === 'Digit5'
) {
// Prevent the default browser action if necessary
//event.preventDefault();
established a URL means by which a single URL call from the canvas residing Inhouse Image Map Creator and Canvas Annotation web application via a data URI hashtag conduit ... and today just ...
allowing for an absolute URL in that hashtag is the relatively simple change needed so that, using this, our WordPress "right click over an img image element" functionality can be tweaked ...
var huhifs=prompt('Optionally, please, any CSS for images ... append 3 spaces to be able to edit this ' + (gthing == 'image' ? gthing + ' (and answer of #imagemap will use this image as basis for creation of an image map in a new window)' : gthing) + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
if (huhifs == null) {
huhifs='';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (event.target.outerHTML.indexOf('<a ') == 0) {
console.log(6);
ggurl=event.target.href;
} else {
console.log(66);
ggurl=document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="')[eval(-1 + document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="').length)].split('"')[0];
}
if (6 == 6) {
console.log(ggurl);
window.open(ggurl,'_blank'); ggurl='';
// huhifs=window.prompt('Optionally, please, any CSS for images ... append three spaces to be able to edit this ' + gthing + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
} else {
setTimeout(function(){ window.open(ggurl,'_blank'); ggurl=''; }, 5000); //alert(event.currentTarget.outerHTML); //event.currentTarget.click();
}
}
}
if (huhifs.toLowerCase() == '#imagemap') {
event.preventDefault();
event.stopPropagation();
ggurl=event.target.src;
window.open('//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm?imagemap=url#' + (ggurl.indexOf('//') != -1 ? '//' + ggurl.split('//')[1] : (ggurl.replace(/^\.\//g,'/').indexOf('/') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(1).replace(/^\//g,'ITblog/') : (ggurl.indexOf('../') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(3) : ggurl))),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height));
ggurl='';
} else if (huhifs.indexOf('data:image/') == 0) {
if (document.getElementById('imgcopycheck') && usuff != '') { //if (document.URL.indexOf('/streetart/') != -1) {
uplitc(huhifs); //alert(document.URL);
}
return '';
}
... as an excerpt from the changedonrightclick.js external Javascript called by WordPress, and calling ...
... good, now, again ... an image is a canvas is an image ...
an image is a canvas is an image
... excellent, now, backwards ... egami na si savnac a si egami na ...
egami na si savnac a si egami na
... wow! ... Now, lastly … I want my mamma! Now! ...
I want my mamma! Now!
Mamma! Thank god you’re here! But it's true. Our thinking behind allowing browsed for image files become data URIs that can be the img element "image" part of the "image map", further to yesterday's Inhouse Image Map Creator Mobile Debug Tutorial, we can now create using our inhouse Image Map Creator capable web application uses the "an image via [canvasContext].drawImage() is a canvas via [canvas].toDataURL() is an image" concept that can save us heaps of time with this project. Instead of intervening at each dropdown option mentioning "Browse" to make this design change, we, instead, introduce to the HTML5canvas element a new ondblclick event ...
<canvas ondblclick="qwowo=window.open(document.URL.split('?')[0].split('#')[0] + '?imagemap=url#' + this.toDataURL('image/jpeg',0.4),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height) + '');" ondragstart="dragstart(event);" draggable="false" title="Ready for you to create your canvas 🎨 content above any signature 💳 panel ... keys U for Undo and R for Redo can work after a discrete click ending any scribble mode of use. Double click can facilitate turning this canvas content into an image map, and this canvas content can be populated by so many of the options in the menu to the right, which includes many local image file browsing choices." id="topcanvas" width=850 height=600 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas>
... allowing that "on double click" result in the web application turning into an Image Map Creator where now ...
Image Map ( ie. <img src="[image URL as entered by user or data URI browsed for by the user, or, come to think of it, from a couple of days back, entered in by the user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... is that very pithy redefinition of our web application's view of what an Image Map can be! Though?!
Apologies to any mobile users wanting to access this new inhouse Image Map creator web application last talked about with yesterday's Inhouse Image Map Creator Interactive Drill Down Tutorial before today, that is, but we were leaving the issue until a proper hardware ...
Mac Book Air
Apple white lead
iPhone
... that once the middle one plugs into the top and bottom allows for ...
iPhone Safari web browser call of the inhouse Image Map creator ... could tee up with (ie. attain a "connection" with) ...
Mac Book Air Safari web browser Develop -> (in our case) Robert's iPhone -> user_of_signature_signature.htm
... online debugging session, could be arranged and a block of time set aside to concentrate on, because "concentrate" is the name of the game here!
Luckily, the issue was straightforward, where many are not. In the overseeing code, we had ...
... ba bow ... because in the external Javascript we got pulled up by the debugging of the iPhone execution attempt at a codeline, where the user decides to take on an Image Map creation task ...
Inhouse Image Map Creator Interactive Drill Down Tutorial
It might be the case, often, with Image Map creations, as with our recent web application featuring in yesterday's Inhouse Image Map Creator Drill Down Tutorial that the user needs to ...
strike while the iron is hot
... regarding having the event logic be nuanced as the image map area subelements are created in terms of ...
area subelement inline event logic definitions (pointing at, perhaps, local Javascript functions) ... as well as ...
the content of those local Javascript functions
... in such a way that, if you come back to "flesh out" the image map HTML coding the next day, say, there are enough clues you've left that you do not have to go and match the "coords" attribute values to a screen position to get some context. That takes a lot longer we find.
And so, today, we now offer ...
Enter an Image URL (append space to create Image Maps where click/tap pairs can define rectangle corners ... cursor is a crosshair for lower left click/tap, first, then cursor is pointer top right ... append another one space to prompt for tailored event logic each time and two spaces to also review the default Javascript used for double click logic image map testing purposes ... we are going to discourage scrolling here, but you can still zoom out or in)
... Javascript prompt windows "on the fly" to allow for this to be a possibility for the Image Map creator using ...
Onto yesterday's Inhouse Image Map Creator Tutorial we've decided today's work should stay within non-mobile realms but flesh out more user available functionality to help with "stage two" thinking. With that in mind ...
the image map HTML containing textarea created (with yesterday's efforts using the Canvas and Image Map web application (now featuring a new emoji button 🗺️🖼️ to allow for a non-dropdown usage approach)) has an ondblclick event logic added so that when double clicking, at any stage of the image map creation processing, it ...
opens a new popup window where that HTML you have so far is surrounded by a default "rest of webpage" scenario as the HTML that goes into making up that popup window HTML content, and where you can test out it's workings ... as well as ...
that popup window image map, itself, is given an ondblclick event logic whereby a double click there can create below that image map within the same popup window a new textarea element containing all that HTML (default "rest of webpage" and all) which can be copied into a clipboard buffer as required ... and ...
if that textarea within the popup window is edited and the user double clicks that textarea element, a new popup window reflecting your changes is opened above that ... etcetera etcetera etcetera
All this can be used to either/both validate your image map and follow through further to incorporating the image map into a functional HTML webpage, using the changedsignature_signature.js external Javascript to make all this possible. Within that changed external Javascript we allow the user to cancel the proposed area subelement currently embarked upon between where the user has clicked/tapped the bottom left and before they shape to click/tap the top right rectangle definition, via a right click, so as to reset back to the click/tap using the crosshair cursor back at a bottom left area shape=rect subelement definition.
The "largely canvas" using web application last talked about with WordPress Blog Image Editing Media Tutorial, today, we're excited to announce, has been given an "on first draft just image URL" using new ...
Image Map ( ie. <img src="[image URL as entered by user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... arrangement inhouse means to construct image maps, so far, just via an image URL.
Why hook into the largely canvas savvy web application? Well, it is that basic positional mouse event logic that is needed to create image maps, and here, it is a dominant theme, and useful, even though the rearrangement of data needed is quite substantial, still, that is where we think this new functionality appears most at home, being a new suboption ("Image 🖼 Canvas Matches Actual URL or Image Map rectangle area creations") off a dropdown option means of deploying.
No tests on mobile, yet, but on non-mobile, we're happy, once the user chooses to create Image Maps, so long as ...
we stop user web page scrolling ... while still allowing ...
webpage zooming out or in
... in conjunction with ...
replacing the webpage table's left cell content, which used to contain a canvas element, with the user defined image, via it's URL ...
replacing the webpage table's right cell content, which used to contain an canvas annotation menu, with the image map URL HTML built up from user lower left and upper right rectangle defining click/taps
... we have the wherewithal to create image map HTML code the user can copy and use, with "stage two" fleshing out!
... to allow for this image map inhouse functionality. The talents of HTML textarea elements, with their resizing abilities, helps out here, allowing these overlayed textarea elements ...
containing image map HTML ... and/or ...
overlaying semi-transparentally to see what has been clicked already
... also be able to be resized "out of the way" should that be needed perhaps regarding overlapping scenarios, without having to resort to any other type of event logic to allow for. The other big and relevant talent of textarea elements is their ability to contain HTML code and be editable with that HTML code, perhaps user amended, and to be able to Select All then Copy into a clipboard buffer, via it's right click web browser menu, ready to paste somewhere else, that HTML content ready for any required "stage two" embellishment and usage.
... to add to our recent WordPress Blog Image Editing functionality, extending it's capabilities to be able to optionally create either/both ...
Video
Animated GIF
... media presentations off this should the user pick more than one image, to be edited, in any one web browser tab (via window.sessionStorage) session. So far, we're creating ...
window.open
background image
background-size: contain
... "Video" and "Animated GIF" presentations, and see this as a shareable commodity, into the future, especially as the image slide data ends up being an HTML canvas [canvas].toDataURL() data URI that represents ...
lots of data
but understood everywhere
... and content wise has included within it, any canvas manipulations and annotating and reworking the user has applied plus, at least for Google Chrome, any image filtering CSS the user has requested, into that canvas. We shape to involve the cowsayactual web server disk based media creating interfacing, but not for now. We'll see, because WordPress Visual Synopsis Media Tutorial methodologies also ended up presentation wise, with "inhouse" "Video" and "Animated GIF" presentations.
How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some "Mantissa MadnessMagic" takes place using ...
... to help create, within the blog posting webpage content, the HTML skeletal necessaries modelled on how WordPress Visual Synopsis Media Tutorial worked it for Visual Synopsis (Slideshows) functionality which included inhouse "Video" and/or "Animated GIF" media presentations.
WordPress Blog Posting Feature Image Editing Tutorial we're using a hosted HTML iframe window within the blog posting webpage of interest
And that should be a lot easier to handle, yes?! Well, yes, maybe, but not that much easier. A little bit "easier" because the logic is largely funnelled into code that is common to both modus operandi.
In amongst the commonalities, thankfully, the means to get to the "image editing and annotating" and/or "image styling" functionality remains ...
Non-mobile right click or spread/pinch mobile gesture on most blog posting images can lead to image editing and annotating functionality, where for animated GIFs first slide is chosen.
We learnt a bit making the mobile ontouchend spread/pinch detection more bulletproof ...
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
lastsp=eval(e.touches.length);
}
if (eval('' + e.touches.length) >= 1) {
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') == -1) {
onrightclickask();
} else if (e.touches[0].target.outerHTML.split('>')[0].indexOf('<img ') == 0 && e.touches[0].target.outerHTML.split('>')[0].indexOf(' tabindex=') != -1) {
onrightclickask(); //document.title=':' + e.touches[0].target.outerHTML.split('>')[0].substring(1);
}
}
};
}, 4000);
}
... but ahead of this, for the TwentyTen theme changes to codex webpage structure we predominantly do with a good ol' tailored header.php the most effective modified (which is new) codeline now goes ...
Running against us regarding One Image Website design ..
Running for us regarding One Image Website design ...
the programmatical scrolling means embedded iframe hosting will not work
way window.prompt freezes all Javascript at a snapshot of time ...
hashtag navigation can be the conduit to pass data onto inhouse Canvas Editor of Image Data
[canvasContext].drawImage has a variety of useful calls (in that OOP method feel) allowing for dynamic cropping
That "one against" stopped how we envisaged the work at the start of the day. We thought we'd use window.sessionStorage (or maybe window.localStorage) as the only data conduit needed, and we'll be continuing that idea with another approach into the future, but back to today, hashtagging provided that conduit means, even if we were using data URIs (though all we need today are image absolute URLs).
And then there was "the unknown factor" ...
Can [canvasContext].drawImage draw that image with CSS filter styling applied?
Well, we found using Javascript DOM ahead of the new Image() call ...
xcelem=document.getElementById('topcanvas');
xccontext = xcelem.getContext("2d");
xcimg=new Image;
xcimg.onload = function(){
var mysx=('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The x coordinate where to start clipping
var mysy=('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The y coordinate where to start clipping
var myswidth=('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the clipped image
var mysheight=('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the clipped image
var myx=('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The x coordinate where to place the image on the canvas
var myy=('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The y coordinate where to place the image on the canvas
var mywidth=('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the image to use (stretch or reduce the image)
var myheight=('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the image to use (stretch or reduce the image)
if (mywidth != '' && myheight != '') {
xcelem.width=eval('' + mywidth);
xcelem.height=eval('' + myheight);
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
if (myx != '' && myy != '' && myswidth == '' && mysheight == '') {
xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
} else {
xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_sx');
window.sessionStorage.removeItem('user_of_signature_signature_sy');
window.sessionStorage.removeItem('user_of_signature_signature_swidth');
window.sessionStorage.removeItem('user_of_signature_signature_sheight');
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
}
} else {
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
xccontext.drawImage(xcimg,0,0);
setTimeout(function(){ xccontext.drawImage(xcimg,0,0); }, 3000);
}
if (window.parent) {
if (parent.document.getElementById('if_image_canvas')) {
if (('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim() != '') {
if (eval('' + ('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim()) < eval(200 + eval('' + xcelem.height))) {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
} else {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
parent.document.getElementById('if_image_canvas').style.display='block';
if (parent.document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
parent.document.getElementById('if_image_canvas').scrollIntoView();
}
}
}
};
var incomings=('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The image filter CSS styling to apply
if ((incomings.indexOf('%20') != -1 || 7 == 7) && incomings.replace(':',')').indexOf(')') != -1 && incomings.indexOf('style=') != -1) {
incomings='style=' + encodeURIComponent((incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' '));
}
var relincomings=incomings.split('style=')[1] ? decodeURIComponent(incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' ') : '';
if (relincomings.indexOf('filter:') != -1) {
xcimg.style.filter=relincomings.split('filter:')[1].split(';')[0].split('}')[0];
}
xcimg.src=xcont;
... didn't help, and then we asked the online woooorrrrrllllddd to come across this very useful link, thanks to teach us ...
... with the user able to make this happen with those right click (non-mobile) or pinch or swipe gesture (mobile) actions (talked about with yesterday's One Image Website SessionStorage Image Filtering Tutorial) getting the user to a prompt window with the modified "blurb" ...
Optionally, please, any CSS for images ... append three spaces to be able to edit this screenshot in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. filter: grayscale(100%);
... talking about the three appended spaces needed.
clientside image filtering functionality to offer ...
almost exclusively using window.sessionStorage ideas (rather than our usual window.localStorage (ie. like Cookies) usage)
Why is that last point any big deal? Well, programmers will tell you, often the tidy up of a new arrangement involves as much, or more, coding to do than the instigation. And a lot of programmers, am sure, will agree that that is a pain in the neck, often. But the use of window.sessionStorage at the expense of window.localStorage allows the programmer to go ...
Aaaaaahhhhh
There is so much less to tidy up. Using window.sessionStorage it is only data on that web browser tab that comes into play, and as soon as that web browser tab no longer exists, nor does the window.sessionStorage data you stored. Yayyyyyyy!
We found we couldn't quite make it exclusively with window.sessionStorage because in the One Image Website paradigm of offering music playing we lost window.sessionStorage data for one of the two web browser tabs that become involved to start the music rolling. So sad. Nevertheless, we transferred some controllable temporary window.localStorage data storage over to window.sessionStorage data storage at the opportune time ...
... (we figured after a day of tinkering ... so sad).
How can the non-mobile user access these new aesthetic settings? Via a right click, as our new unfettered layer of functionality option, encapsulated by onrightclick.js external Javascript "proof of concept" effort, on the way to a Javascript prompt window, is the way we've gone about it. From there, the user can enter CSS non-selector actions such as the use of CSS filter property.
And as such, it's worth a revisit of one or all of our reworked One Image Website web applications ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
Today, we've bitten the bullet, and decided to shore up the webpage scrolling issues that could occur in yesterday's One Image Website VTT Tracks Tutorial, and before, with our set of One Image Websites. They represent, perhaps, a slightly unusual scenario whereby the image data is allowed to be itself, and being bigger than the dimensions of the webpage (straight from its digital source), in all probability. Hence, the randomized document.body scrolling that occurs.
But up until today our randomized range of scrollLeft and scrollTop positioning that could occur ranged over the entire width and height of the underlying image, while we think we should only be scrolling over the range ([imageWidth] - window.innerWidth (screen width)) x ([imageHeight] - window.innerHeight (screen height)). This could lead to white bands to the right and/or bottom of the webpage, in its presentation. And so we've fixed all the Javascript code to replace the old with the new in all the One Image Website codesets ...
... and, am sorry, but cannot award any points to those who chose the former, because ... well ... it's doubtful we'd mention the second unless we'd done it. And so the answer is ... the former ... down Nala ... the latter!
Today's blog posting is also a little story about the benefits of what we like to call client pre-emptive iframe logic, whereby we open an HTML iframe element, blazing away with its src attribute pointing at a URL that may or may not exist, and if it does, we do something about its content, usually, in the HTML iframe onload event logic. In our case the URL is a VTT file suiting the One Image Website of relevance given the upload and renaming of the VTTs created using yesterday's PHP ffmpeg log to VTT file creator web application.
As a programmer who would like to pursue true track cue Javascript coding, develop the function tracks in the One Image Website index-ssmhalf.html you could View -> Page Source from your favourite web browser, for any of ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
... where, now, where the user plays music, perhaps continuously (like a radio) with an HTML audio element play button press, the currently playing song, thanks to Royalty Free Music For Video, help you keep in touch with the song playing up at the web browser tab and the image title.
This amounted to Javascript changes, as per ...
index.htm ...
var foreground=null; // and get rid of var in var foreground below
var plusstuff='';
function ftchange(tob) {
plusstuff=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
if (document.getElementById('place').title.indexOf(' Playing ') == -1) {
document.getElementById('place').title+=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
} else {
document.getElementById('place').title=document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
}
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i) && document.URL.indexOf('?audio=') == -1) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=00" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
function FadeInImage()
{ var foreground=document.getElementById("place");
window.clearTimeout("FadeInImage('" + "place" + "')");
rotateImage("place");
}
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
//alert('yay2');
anotherNew();
var foreground=document.getElementById(place);
//alert(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//alert('yay2a');
var alink=document.getElementById("alink");
var xxxx=alink.href;
if (xxxx.indexOf("mp3") != -1)
{
//alink.href="index-ssm.html";
//alink.onclick="javascript:void(0);";
alink.href="filewrite.php?id=session&name="+bigrandnumber+"&ext=txt&rand="+bigrandnumber;
alink.onclick="javascript:void(0);";
foreground.onclick="javascript:hasBeenClicked();";
foreground.title="Click for Bamboozled provided by http://www.freesoundtrackmusic.com" + plusstuff;
ffmpeg ... with its great logging and media concatenation talents, thanks ...
macOS Terminal desktop app ... regarding its great GUI design feature allowing you to gather up actions of the past into a copy buffer via its Edit -> Find functionality, thanks
Don't know about you, but have always found the creation of track data VTT files (and their predecessor SRT files) one of the most tedious jobs in programming?
But the work of the day before yesterday's One Image Website iOS Radio Music Tutorial and its audio concatenation via ffmpeg themes had us looking back, wistfully, back up our (macOS) Terminal (desktop apps) logging of a few days past, hoping for an escape from VTT file manual text editing for our wish to enhance our One Image Website work of recent days. Wow, the ffmpeg logging was brilliant!
There was enough there to program the creation of VTT files from the ffmpeg, and our "cd"ing and "ls"ing and other stuff, in the (let's more accurately say, Terminal) logging. Yayyyyy!
If you click the light green form submit button, in the iframe way below, yourself, it will reveal, in details/summary (revealing) tags, both the input and output (VTT files) for you to see this more clearly, or to have it clicked for you in a new window, click this button clicker incarnation. In the works of the HTML form below, for the first time we can remember, and because the defaults are so arcane, we developed HTML form onsubmit logic as per ...
... as a way to deal with arcane defaults, where the encouragement is there for an interested programmer to download PHP code (perhaps to a MAMP local Apache/PHP/mySql web server environment) and tweak to their purposes. Note that you can paste your own logging into the textarea as a way this PHP application can be useful even up at the RJM Programming domain ...
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
... and so, it being tomorrow we're here starting our discussion starting with the "one less window" thought. Have a look at this table outlining some (off the top of the head) clientside navigation techniques in two categories ...
No new window created ...
New window created ...
window.open([URL],'_self')
window.open([URL],'_blank')
location.href=[URL]
window.open([URL],'_top')
window.location=[URL]
top.window.location=[URL]; // if in an iframe
Ajax (with or without new FormData()) whether 'GET' or 'POST'
form target=_blank action=[URL]
form target=_self action=[URL]
form target=_top action=[URL] // if in an iframe
iframe srcdoc=[webpageHTML]
form target=_parent action=[URL] // if in an iframe
iframe src=[URL]
parent.window.location=[URL]; // if in an iframe
... and it's that last left hand column iframe src=[URL] we like for the purposes of these changes today. That new HTML iframe in the "One Image Website" index.htm supervisories is now worked via ...
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
anotherNew();
var foreground=document.getElementById(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//
// more rotateImage code follows ...
//
}
//
// more rotateImage code follows ...
//
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=0" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
... up towards the top right of the index.htm webpage when using an iOS platform. It is optional whether the user ...
clicks Play button of that new top right audio element for continuous "looped audio track sets" mode of use with no new second window required (and so, no window focus changes and no second click required either)
clicks blue link for continuous "looped audio track sets" mode of use with a new second window's audio element that the user clicks the Play button of
clicks none of those modes of use above that are offered for a short time to then click appropriately to start up music, optionally, as required, at a later date as possible
So feel free to try a One Image Website in the list below ...
... where this new iOS music arrangement logic has been incorporated.
Stop Press
The Webpage Meta Refresh Primer Tutorial has reminded us of another left hand "No new window created" navigation methodology using the HTML meta "refresh" tag.
Did you read the recent Responsive Web Design Landing Page Image Map Tutorial? Its core takeaway was the linking of One Image Website functionalities. In these One Image Websites we've picked out a guinea pig ...
... to have a day's worth of experimenting trialling a solution to the "chestnut of a" problem getting iOS music to play continuously without supervision, like a radio program, albeit on a cycle of repeated content (set (such as the oneoffive.mp3 twooffive.mp3 threeoffive.mp3 fouroffive.mp3 fiveoffive.mp3 set of 5 tracks in example below)). Years ago Apple's iOS started requiring a user click to validate the playing of media, hence the interest in today's topic.
The ingredients for the solution, and testing thereof, are ...
optionally, (we're just suggesting this headphone idea if you want to keep the music to yourself) via Bluetooth, with a set up involving a connection to a set of AirPods (and connected to your ears) ... are chosen as ...
click the blue link up the top that appears for a short time ... then ...
in the resultant new music window click the Audio play button presented (the point of interest being that this could be the last click required for continuous music playing, in that audio loop) ... music should play continuously and ...
if more interesting visuals are also required focus back to calling window
And given that the iPhone and AirPods are charged, and you don't charge out of Bluetooth range with the iPhone, you could get that "radio feeling" out of an iOS user experience!
Code changes, all just clientside HTML and Javascript, went ...
calling window's index.htm changes around the document.body onload event area of interest 🎶 ...
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
We're just over time, aren't you?! And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out ... but not today?! Why not? We have a funny set of needs, they being ...
our Image Map's image will have a variable set of width x height dimensions ...
our Image Map's image will be transparent
our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working
... the last condition of which we realized, down the track, required us to create four Image Maps. But ... but ... Nala hears you say?!
Yes, we can reference the one image, in its data URL guise, as a smaller, or not, version of itself, by specifying CSS properties ...
position:absolute; (our usual for overlay scenarios)
z-index:56; (for both transparent image and its associated Image Map ... more on this later)
left (to appropriately position in X to be in the relevant section of dark green Image Map overlaying in the Landing Page)
top (to appropriately position in Y to be in the relevant section of dark green Image Map overlaying in the Landing Page)
width (which will be up to the transparent image width)
height (which will be up to the transparent image height)
... and no concern about opacity given the transparent image and z-index considerations, here.
So, how can we involve a transparent image here? Well, that is where the new Responsive Web Design Landing Page being PHP, though up to today it had contained no PHP, is in our favour. We can use PHP's GD to create one, grab its associated data URL and tidy up, and constructing the four image and associated Image Map HTML elements populated, in its "child iframe", and sending back up into the "parent webpage's" new ...
function ouralert(innum) {
var ans='';
switch ('' + innum) {
case '1':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '2':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '3':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '4':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/slideshow.html', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '5':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '6':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/plus/', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '7':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '8':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
case '9':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
default:
break;
}
if (!ans) { ans=''; }
if (ans != '') {
window.open(ans.trim(), '_blank');
if (ans != ans.trim()) {
window.localStorage.setItem('area' + innum + 'url', encodeURIComponent(ans.trim()));
}
}
}
function imbit() {
//if (document.getElementById('myimg')) {
// document.getElementById('myimg').style.border='5px dashed purple';
//}
if (('' + window.localStorage.getItem('area4url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[3]=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').title=decodeURIComponent('' + window.localStorage.getItem('area4url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area4').href=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').onclick=function(){ omoiset=-1; urls[3]=urls[3]; }
//document.getElementById('area4').ondblclick=function(){ ouralert(4); }
}
if (('' + window.localStorage.getItem('area6url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[5]=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').title=decodeURIComponent('' + window.localStorage.getItem('area6url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area6').href=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').onclick=function(){ omoiset=-1; urls[5]=urls[5]; }
//document.getElementById('area6').ondblclick=function(){ ouralert(6); }
}
}
separating out totally "uninvolved" Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials ... from ...
any other call of any complexity or having a query string etcetera, reverting to the "old way"
... new paradigm? So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]
honing in on our "Landing Page and friends" set of unresponsively designed webpages ...
honing in on iPhone sized devices (ie. not iPads nor laptops) ...
host web browser address bar calls of "Landing Page and friends" set of unresponsively designed webpages within a caller.htmlresponsively web designed shell supervisory webpage and start using some of that ...
Canvas Interfacer Three Finger Gesture Usage Tutorial
There’s more research needed around here regarding mobile platform usage to the HTML5canvas based ideas swirling around yesterday’s Random Background Image Map Area Polygons Tutorial‘s work, and one issue we came across was …
on mobile platforms you can get to gesture results whereby the canvas is all you see on the screen (eg. of an iPhone) …
but what if you are in “scribble mode” at that point? …
before today, we were having trouble using …
two finger “pinch” gesture to zoom out … or …
one finger “swipe” to reveal more to the right (where, if we could have reached it, that right hand menu of annotation options has none of these “scribble mode” oddities) … because …
before today, that last idea just drew a “scribble” “free drawing” line to the canvas
… to reach the menu or any other non-canvas element not in “scribble mode” (ie. scrolling could not be achieved, at least in a way we could immediately access)
If you are building this for a website or web app, you can use the touchstart and touchmove events to capture finger coordinates, check if exactly three fingers are on the screen, and then calculate the direction.
… to (start with global … var isthree=false; and) end up with …
… near the top of our function toptouchHandler(event) Javascript code in our changedsignature_signature.js external Javascript canvas interfacer helper.
Image Map only allowing for area subelements with shape=rect … today we also allow for …
Image Map now allowing for area subelements with shape=poly …
… via …
Right clicks after an initial click are the means by which you can define area shape=poly ( as distinct from the default shape=rect ) elements where to finish a polygon two click back close to the start point.
… as a modus operandi for the user to cater for more complex shape definitions in their Image Maps.
That doesn’t mean the rectangle around such a polygon is not also significant. Do you know why?
Yes, a hosting HTML div of a specific width and height and positioned absolutely at a precise left and top screen position allows SVG innerHTML like …
<svg xmlns="http://w3.org" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><polyline points="0,67,56,7,100,0,150,17,0,67"></polyline></svg> ... be showing a polygonal user clicked shape, scaled appropriately, yet responsively, and allowing for those % unit definitions above making all this methodology useful here. Notice the zero co-ordinates? That is no accident. We make the co-ordinates relative to the minimum x and minimum y "datum" to the co-ordinating.
To pass events down through a higher z-index element, add pointer-events: none; to the top element. This tells the browser to ignore the overlay for mouse events, allowing clicks and hovers to "fall through" to the element stacked beneath it.
... to learn a whole new technique we've been looking for for quite some time now ... now, where did we put that "Overlay Disappointments File"?! ... bye bye!
... and allowing users using our inhouse Random Background interfacer the chance to create some Image Maps using incarnations of these images as the visual basis to them.
We've chosen ...
the oncontextmenu (ie. right click) as an intervention point to facilitate this ... or ...
if using a macOS operating system a ...
control-command-shift-3
control-command-shift-5
...
document.addEventListener('keydown', (event) => { // thanks to https://www.google.com/search?q=javascript+detecting+control-command-shift-3&rlz=1C5OZZY_en&oq=javascript+detecting+control-command-shift-3&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRiPAjIHCAYQIRiPAjIHCAcQIRiPAtIBCTE3NzMyajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
// Check if Control, Command (metaKey), and Shift are all held down
// AND the key pressed is the number 3
if (
event.ctrlKey &&
event.metaKey &&
event.shiftKey &&
event.code === 'Digit5'
) {
// Prevent the default browser action if necessary
//event.preventDefault();
established a URL means by which a single URL call from the canvas residing Inhouse Image Map Creator and Canvas Annotation web application via a data URI hashtag conduit ... and today just ...
allowing for an absolute URL in that hashtag is the relatively simple change needed so that, using this, our WordPress "right click over an img image element" functionality can be tweaked ...
var huhifs=prompt('Optionally, please, any CSS for images ... append 3 spaces to be able to edit this ' + (gthing == 'image' ? gthing + ' (and answer of #imagemap will use this image as basis for creation of an image map in a new window)' : gthing) + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
if (huhifs == null) {
huhifs='';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (event.target.outerHTML.indexOf('<a ') == 0) {
console.log(6);
ggurl=event.target.href;
} else {
console.log(66);
ggurl=document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="')[eval(-1 + document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="').length)].split('"')[0];
}
if (6 == 6) {
console.log(ggurl);
window.open(ggurl,'_blank'); ggurl='';
// huhifs=window.prompt('Optionally, please, any CSS for images ... append three spaces to be able to edit this ' + gthing + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
} else {
setTimeout(function(){ window.open(ggurl,'_blank'); ggurl=''; }, 5000); //alert(event.currentTarget.outerHTML); //event.currentTarget.click();
}
}
}
if (huhifs.toLowerCase() == '#imagemap') {
event.preventDefault();
event.stopPropagation();
ggurl=event.target.src;
window.open('//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm?imagemap=url#' + (ggurl.indexOf('//') != -1 ? '//' + ggurl.split('//')[1] : (ggurl.replace(/^\.\//g,'/').indexOf('/') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(1).replace(/^\//g,'ITblog/') : (ggurl.indexOf('../') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(3) : ggurl))),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height));
ggurl='';
} else if (huhifs.indexOf('data:image/') == 0) {
if (document.getElementById('imgcopycheck') && usuff != '') { //if (document.URL.indexOf('/streetart/') != -1) {
uplitc(huhifs); //alert(document.URL);
}
return '';
}
... as an excerpt from the changedonrightclick.js external Javascript called by WordPress, and calling ...
... good, now, again ... an image is a canvas is an image ...
an image is a canvas is an image
... excellent, now, backwards ... egami na si savnac a si egami na ...
egami na si savnac a si egami na
... wow! ... Now, lastly … I want my mamma! Now! ...
I want my mamma! Now!
Mamma! Thank god you’re here! But it's true. Our thinking behind allowing browsed for image files become data URIs that can be the img element "image" part of the "image map", further to yesterday's Inhouse Image Map Creator Mobile Debug Tutorial, we can now create using our inhouse Image Map Creator capable web application uses the "an image via [canvasContext].drawImage() is a canvas via [canvas].toDataURL() is an image" concept that can save us heaps of time with this project. Instead of intervening at each dropdown option mentioning "Browse" to make this design change, we, instead, introduce to the HTML5canvas element a new ondblclick event ...
<canvas ondblclick="qwowo=window.open(document.URL.split('?')[0].split('#')[0] + '?imagemap=url#' + this.toDataURL('image/jpeg',0.4),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height) + '');" ondragstart="dragstart(event);" draggable="false" title="Ready for you to create your canvas 🎨 content above any signature 💳 panel ... keys U for Undo and R for Redo can work after a discrete click ending any scribble mode of use. Double click can facilitate turning this canvas content into an image map, and this canvas content can be populated by so many of the options in the menu to the right, which includes many local image file browsing choices." id="topcanvas" width=850 height=600 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas>
... allowing that "on double click" result in the web application turning into an Image Map Creator where now ...
Image Map ( ie. <img src="[image URL as entered by user or data URI browsed for by the user, or, come to think of it, from a couple of days back, entered in by the user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... is that very pithy redefinition of our web application's view of what an Image Map can be! Though?!
Apologies to any mobile users wanting to access this new inhouse Image Map creator web application last talked about with yesterday's Inhouse Image Map Creator Interactive Drill Down Tutorial before today, that is, but we were leaving the issue until a proper hardware ...
Mac Book Air
Apple white lead
iPhone
... that once the middle one plugs into the top and bottom allows for ...
iPhone Safari web browser call of the inhouse Image Map creator ... could tee up with (ie. attain a "connection" with) ...
Mac Book Air Safari web browser Develop -> (in our case) Robert's iPhone -> user_of_signature_signature.htm
... online debugging session, could be arranged and a block of time set aside to concentrate on, because "concentrate" is the name of the game here!
Luckily, the issue was straightforward, where many are not. In the overseeing code, we had ...
... ba bow ... because in the external Javascript we got pulled up by the debugging of the iPhone execution attempt at a codeline, where the user decides to take on an Image Map creation task ...
Inhouse Image Map Creator Interactive Drill Down Tutorial
It might be the case, often, with Image Map creations, as with our recent web application featuring in yesterday's Inhouse Image Map Creator Drill Down Tutorial that the user needs to ...
strike while the iron is hot
... regarding having the event logic be nuanced as the image map area subelements are created in terms of ...
area subelement inline event logic definitions (pointing at, perhaps, local Javascript functions) ... as well as ...
the content of those local Javascript functions
... in such a way that, if you come back to "flesh out" the image map HTML coding the next day, say, there are enough clues you've left that you do not have to go and match the "coords" attribute values to a screen position to get some context. That takes a lot longer we find.
And so, today, we now offer ...
Enter an Image URL (append space to create Image Maps where click/tap pairs can define rectangle corners ... cursor is a crosshair for lower left click/tap, first, then cursor is pointer top right ... append another one space to prompt for tailored event logic each time and two spaces to also review the default Javascript used for double click logic image map testing purposes ... we are going to discourage scrolling here, but you can still zoom out or in)
... Javascript prompt windows "on the fly" to allow for this to be a possibility for the Image Map creator using ...
Onto yesterday's Inhouse Image Map Creator Tutorial we've decided today's work should stay within non-mobile realms but flesh out more user available functionality to help with "stage two" thinking. With that in mind ...
the image map HTML containing textarea created (with yesterday's efforts using the Canvas and Image Map web application (now featuring a new emoji button 🗺️🖼️ to allow for a non-dropdown usage approach)) has an ondblclick event logic added so that when double clicking, at any stage of the image map creation processing, it ...
opens a new popup window where that HTML you have so far is surrounded by a default "rest of webpage" scenario as the HTML that goes into making up that popup window HTML content, and where you can test out it's workings ... as well as ...
that popup window image map, itself, is given an ondblclick event logic whereby a double click there can create below that image map within the same popup window a new textarea element containing all that HTML (default "rest of webpage" and all) which can be copied into a clipboard buffer as required ... and ...
if that textarea within the popup window is edited and the user double clicks that textarea element, a new popup window reflecting your changes is opened above that ... etcetera etcetera etcetera
All this can be used to either/both validate your image map and follow through further to incorporating the image map into a functional HTML webpage, using the changedsignature_signature.js external Javascript to make all this possible. Within that changed external Javascript we allow the user to cancel the proposed area subelement currently embarked upon between where the user has clicked/tapped the bottom left and before they shape to click/tap the top right rectangle definition, via a right click, so as to reset back to the click/tap using the crosshair cursor back at a bottom left area shape=rect subelement definition.
The "largely canvas" using web application last talked about with WordPress Blog Image Editing Media Tutorial, today, we're excited to announce, has been given an "on first draft just image URL" using new ...
Image Map ( ie. <img src="[image URL as entered by user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... arrangement inhouse means to construct image maps, so far, just via an image URL.
Why hook into the largely canvas savvy web application? Well, it is that basic positional mouse event logic that is needed to create image maps, and here, it is a dominant theme, and useful, even though the rearrangement of data needed is quite substantial, still, that is where we think this new functionality appears most at home, being a new suboption ("Image 🖼 Canvas Matches Actual URL or Image Map rectangle area creations") off a dropdown option means of deploying.
No tests on mobile, yet, but on non-mobile, we're happy, once the user chooses to create Image Maps, so long as ...
we stop user web page scrolling ... while still allowing ...
webpage zooming out or in
... in conjunction with ...
replacing the webpage table's left cell content, which used to contain a canvas element, with the user defined image, via it's URL ...
replacing the webpage table's right cell content, which used to contain an canvas annotation menu, with the image map URL HTML built up from user lower left and upper right rectangle defining click/taps
... we have the wherewithal to create image map HTML code the user can copy and use, with "stage two" fleshing out!
... to allow for this image map inhouse functionality. The talents of HTML textarea elements, with their resizing abilities, helps out here, allowing these overlayed textarea elements ...
containing image map HTML ... and/or ...
overlaying semi-transparentally to see what has been clicked already
... also be able to be resized "out of the way" should that be needed perhaps regarding overlapping scenarios, without having to resort to any other type of event logic to allow for. The other big and relevant talent of textarea elements is their ability to contain HTML code and be editable with that HTML code, perhaps user amended, and to be able to Select All then Copy into a clipboard buffer, via it's right click web browser menu, ready to paste somewhere else, that HTML content ready for any required "stage two" embellishment and usage.
... to add to our recent WordPress Blog Image Editing functionality, extending it's capabilities to be able to optionally create either/both ...
Video
Animated GIF
... media presentations off this should the user pick more than one image, to be edited, in any one web browser tab (via window.sessionStorage) session. So far, we're creating ...
window.open
background image
background-size: contain
... "Video" and "Animated GIF" presentations, and see this as a shareable commodity, into the future, especially as the image slide data ends up being an HTML canvas [canvas].toDataURL() data URI that represents ...
lots of data
but understood everywhere
... and content wise has included within it, any canvas manipulations and annotating and reworking the user has applied plus, at least for Google Chrome, any image filtering CSS the user has requested, into that canvas. We shape to involve the cowsayactual web server disk based media creating interfacing, but not for now. We'll see, because WordPress Visual Synopsis Media Tutorial methodologies also ended up presentation wise, with "inhouse" "Video" and "Animated GIF" presentations.
How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some "Mantissa MadnessMagic" takes place using ...
... to help create, within the blog posting webpage content, the HTML skeletal necessaries modelled on how WordPress Visual Synopsis Media Tutorial worked it for Visual Synopsis (Slideshows) functionality which included inhouse "Video" and/or "Animated GIF" media presentations.
WordPress Blog Posting Feature Image Editing Tutorial we're using a hosted HTML iframe window within the blog posting webpage of interest
And that should be a lot easier to handle, yes?! Well, yes, maybe, but not that much easier. A little bit "easier" because the logic is largely funnelled into code that is common to both modus operandi.
In amongst the commonalities, thankfully, the means to get to the "image editing and annotating" and/or "image styling" functionality remains ...
Non-mobile right click or spread/pinch mobile gesture on most blog posting images can lead to image editing and annotating functionality, where for animated GIFs first slide is chosen.
We learnt a bit making the mobile ontouchend spread/pinch detection more bulletproof ...
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
lastsp=eval(e.touches.length);
}
if (eval('' + e.touches.length) >= 1) {
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') == -1) {
onrightclickask();
} else if (e.touches[0].target.outerHTML.split('>')[0].indexOf('<img ') == 0 && e.touches[0].target.outerHTML.split('>')[0].indexOf(' tabindex=') != -1) {
onrightclickask(); //document.title=':' + e.touches[0].target.outerHTML.split('>')[0].substring(1);
}
}
};
}, 4000);
}
... but ahead of this, for the TwentyTen theme changes to codex webpage structure we predominantly do with a good ol' tailored header.php the most effective modified (which is new) codeline now goes ...
Running against us regarding One Image Website design ..
Running for us regarding One Image Website design ...
the programmatical scrolling means embedded iframe hosting will not work
way window.prompt freezes all Javascript at a snapshot of time ...
hashtag navigation can be the conduit to pass data onto inhouse Canvas Editor of Image Data
[canvasContext].drawImage has a variety of useful calls (in that OOP method feel) allowing for dynamic cropping
That "one against" stopped how we envisaged the work at the start of the day. We thought we'd use window.sessionStorage (or maybe window.localStorage) as the only data conduit needed, and we'll be continuing that idea with another approach into the future, but back to today, hashtagging provided that conduit means, even if we were using data URIs (though all we need today are image absolute URLs).
And then there was "the unknown factor" ...
Can [canvasContext].drawImage draw that image with CSS filter styling applied?
Well, we found using Javascript DOM ahead of the new Image() call ...
xcelem=document.getElementById('topcanvas');
xccontext = xcelem.getContext("2d");
xcimg=new Image;
xcimg.onload = function(){
var mysx=('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The x coordinate where to start clipping
var mysy=('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The y coordinate where to start clipping
var myswidth=('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the clipped image
var mysheight=('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the clipped image
var myx=('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The x coordinate where to place the image on the canvas
var myy=('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The y coordinate where to place the image on the canvas
var mywidth=('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the image to use (stretch or reduce the image)
var myheight=('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the image to use (stretch or reduce the image)
if (mywidth != '' && myheight != '') {
xcelem.width=eval('' + mywidth);
xcelem.height=eval('' + myheight);
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
if (myx != '' && myy != '' && myswidth == '' && mysheight == '') {
xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
} else {
xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_sx');
window.sessionStorage.removeItem('user_of_signature_signature_sy');
window.sessionStorage.removeItem('user_of_signature_signature_swidth');
window.sessionStorage.removeItem('user_of_signature_signature_sheight');
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
}
} else {
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
xccontext.drawImage(xcimg,0,0);
setTimeout(function(){ xccontext.drawImage(xcimg,0,0); }, 3000);
}
if (window.parent) {
if (parent.document.getElementById('if_image_canvas')) {
if (('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim() != '') {
if (eval('' + ('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim()) < eval(200 + eval('' + xcelem.height))) {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
} else {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
parent.document.getElementById('if_image_canvas').style.display='block';
if (parent.document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
parent.document.getElementById('if_image_canvas').scrollIntoView();
}
}
}
};
var incomings=('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The image filter CSS styling to apply
if ((incomings.indexOf('%20') != -1 || 7 == 7) && incomings.replace(':',')').indexOf(')') != -1 && incomings.indexOf('style=') != -1) {
incomings='style=' + encodeURIComponent((incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' '));
}
var relincomings=incomings.split('style=')[1] ? decodeURIComponent(incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' ') : '';
if (relincomings.indexOf('filter:') != -1) {
xcimg.style.filter=relincomings.split('filter:')[1].split(';')[0].split('}')[0];
}
xcimg.src=xcont;
... didn't help, and then we asked the online woooorrrrrllllddd to come across this very useful link, thanks to teach us ...
... with the user able to make this happen with those right click (non-mobile) or pinch or swipe gesture (mobile) actions (talked about with yesterday's One Image Website SessionStorage Image Filtering Tutorial) getting the user to a prompt window with the modified "blurb" ...
Optionally, please, any CSS for images ... append three spaces to be able to edit this screenshot in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. filter: grayscale(100%);
... talking about the three appended spaces needed.
clientside image filtering functionality to offer ...
almost exclusively using window.sessionStorage ideas (rather than our usual window.localStorage (ie. like Cookies) usage)
Why is that last point any big deal? Well, programmers will tell you, often the tidy up of a new arrangement involves as much, or more, coding to do than the instigation. And a lot of programmers, am sure, will agree that that is a pain in the neck, often. But the use of window.sessionStorage at the expense of window.localStorage allows the programmer to go ...
Aaaaaahhhhh
There is so much less to tidy up. Using window.sessionStorage it is only data on that web browser tab that comes into play, and as soon as that web browser tab no longer exists, nor does the window.sessionStorage data you stored. Yayyyyyyy!
We found we couldn't quite make it exclusively with window.sessionStorage because in the One Image Website paradigm of offering music playing we lost window.sessionStorage data for one of the two web browser tabs that become involved to start the music rolling. So sad. Nevertheless, we transferred some controllable temporary window.localStorage data storage over to window.sessionStorage data storage at the opportune time ...
... (we figured after a day of tinkering ... so sad).
How can the non-mobile user access these new aesthetic settings? Via a right click, as our new unfettered layer of functionality option, encapsulated by onrightclick.js external Javascript "proof of concept" effort, on the way to a Javascript prompt window, is the way we've gone about it. From there, the user can enter CSS non-selector actions such as the use of CSS filter property.
And as such, it's worth a revisit of one or all of our reworked One Image Website web applications ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
Today, we've bitten the bullet, and decided to shore up the webpage scrolling issues that could occur in yesterday's One Image Website VTT Tracks Tutorial, and before, with our set of One Image Websites. They represent, perhaps, a slightly unusual scenario whereby the image data is allowed to be itself, and being bigger than the dimensions of the webpage (straight from its digital source), in all probability. Hence, the randomized document.body scrolling that occurs.
But up until today our randomized range of scrollLeft and scrollTop positioning that could occur ranged over the entire width and height of the underlying image, while we think we should only be scrolling over the range ([imageWidth] - window.innerWidth (screen width)) x ([imageHeight] - window.innerHeight (screen height)). This could lead to white bands to the right and/or bottom of the webpage, in its presentation. And so we've fixed all the Javascript code to replace the old with the new in all the One Image Website codesets ...
... and, am sorry, but cannot award any points to those who chose the former, because ... well ... it's doubtful we'd mention the second unless we'd done it. And so the answer is ... the former ... down Nala ... the latter!
Today's blog posting is also a little story about the benefits of what we like to call client pre-emptive iframe logic, whereby we open an HTML iframe element, blazing away with its src attribute pointing at a URL that may or may not exist, and if it does, we do something about its content, usually, in the HTML iframe onload event logic. In our case the URL is a VTT file suiting the One Image Website of relevance given the upload and renaming of the VTTs created using yesterday's PHP ffmpeg log to VTT file creator web application.
As a programmer who would like to pursue true track cue Javascript coding, develop the function tracks in the One Image Website index-ssmhalf.html you could View -> Page Source from your favourite web browser, for any of ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
... where, now, where the user plays music, perhaps continuously (like a radio) with an HTML audio element play button press, the currently playing song, thanks to Royalty Free Music For Video, help you keep in touch with the song playing up at the web browser tab and the image title.
This amounted to Javascript changes, as per ...
index.htm ...
var foreground=null; // and get rid of var in var foreground below
var plusstuff='';
function ftchange(tob) {
plusstuff=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
if (document.getElementById('place').title.indexOf(' Playing ') == -1) {
document.getElementById('place').title+=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
} else {
document.getElementById('place').title=document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
}
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i) && document.URL.indexOf('?audio=') == -1) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=00" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
function FadeInImage()
{ var foreground=document.getElementById("place");
window.clearTimeout("FadeInImage('" + "place" + "')");
rotateImage("place");
}
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
//alert('yay2');
anotherNew();
var foreground=document.getElementById(place);
//alert(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//alert('yay2a');
var alink=document.getElementById("alink");
var xxxx=alink.href;
if (xxxx.indexOf("mp3") != -1)
{
//alink.href="index-ssm.html";
//alink.onclick="javascript:void(0);";
alink.href="filewrite.php?id=session&name="+bigrandnumber+"&ext=txt&rand="+bigrandnumber;
alink.onclick="javascript:void(0);";
foreground.onclick="javascript:hasBeenClicked();";
foreground.title="Click for Bamboozled provided by http://www.freesoundtrackmusic.com" + plusstuff;
ffmpeg ... with its great logging and media concatenation talents, thanks ...
macOS Terminal desktop app ... regarding its great GUI design feature allowing you to gather up actions of the past into a copy buffer via its Edit -> Find functionality, thanks
Don't know about you, but have always found the creation of track data VTT files (and their predecessor SRT files) one of the most tedious jobs in programming?
But the work of the day before yesterday's One Image Website iOS Radio Music Tutorial and its audio concatenation via ffmpeg themes had us looking back, wistfully, back up our (macOS) Terminal (desktop apps) logging of a few days past, hoping for an escape from VTT file manual text editing for our wish to enhance our One Image Website work of recent days. Wow, the ffmpeg logging was brilliant!
There was enough there to program the creation of VTT files from the ffmpeg, and our "cd"ing and "ls"ing and other stuff, in the (let's more accurately say, Terminal) logging. Yayyyyy!
If you click the light green form submit button, in the iframe way below, yourself, it will reveal, in details/summary (revealing) tags, both the input and output (VTT files) for you to see this more clearly, or to have it clicked for you in a new window, click this button clicker incarnation. In the works of the HTML form below, for the first time we can remember, and because the defaults are so arcane, we developed HTML form onsubmit logic as per ...
... as a way to deal with arcane defaults, where the encouragement is there for an interested programmer to download PHP code (perhaps to a MAMP local Apache/PHP/mySql web server environment) and tweak to their purposes. Note that you can paste your own logging into the textarea as a way this PHP application can be useful even up at the RJM Programming domain ...
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
... and so, it being tomorrow we're here starting our discussion starting with the "one less window" thought. Have a look at this table outlining some (off the top of the head) clientside navigation techniques in two categories ...
No new window created ...
New window created ...
window.open([URL],'_self')
window.open([URL],'_blank')
location.href=[URL]
window.open([URL],'_top')
window.location=[URL]
top.window.location=[URL]; // if in an iframe
Ajax (with or without new FormData()) whether 'GET' or 'POST'
form target=_blank action=[URL]
form target=_self action=[URL]
form target=_top action=[URL] // if in an iframe
iframe srcdoc=[webpageHTML]
form target=_parent action=[URL] // if in an iframe
iframe src=[URL]
parent.window.location=[URL]; // if in an iframe
... and it's that last left hand column iframe src=[URL] we like for the purposes of these changes today. That new HTML iframe in the "One Image Website" index.htm supervisories is now worked via ...
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
anotherNew();
var foreground=document.getElementById(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//
// more rotateImage code follows ...
//
}
//
// more rotateImage code follows ...
//
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=0" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
... up towards the top right of the index.htm webpage when using an iOS platform. It is optional whether the user ...
clicks Play button of that new top right audio element for continuous "looped audio track sets" mode of use with no new second window required (and so, no window focus changes and no second click required either)
clicks blue link for continuous "looped audio track sets" mode of use with a new second window's audio element that the user clicks the Play button of
clicks none of those modes of use above that are offered for a short time to then click appropriately to start up music, optionally, as required, at a later date as possible
So feel free to try a One Image Website in the list below ...
... where this new iOS music arrangement logic has been incorporated.
Stop Press
The Webpage Meta Refresh Primer Tutorial has reminded us of another left hand "No new window created" navigation methodology using the HTML meta "refresh" tag.
Did you read the recent Responsive Web Design Landing Page Image Map Tutorial? Its core takeaway was the linking of One Image Website functionalities. In these One Image Websites we've picked out a guinea pig ...
... to have a day's worth of experimenting trialling a solution to the "chestnut of a" problem getting iOS music to play continuously without supervision, like a radio program, albeit on a cycle of repeated content (set (such as the oneoffive.mp3 twooffive.mp3 threeoffive.mp3 fouroffive.mp3 fiveoffive.mp3 set of 5 tracks in example below)). Years ago Apple's iOS started requiring a user click to validate the playing of media, hence the interest in today's topic.
The ingredients for the solution, and testing thereof, are ...
optionally, (we're just suggesting this headphone idea if you want to keep the music to yourself) via Bluetooth, with a set up involving a connection to a set of AirPods (and connected to your ears) ... are chosen as ...
click the blue link up the top that appears for a short time ... then ...
in the resultant new music window click the Audio play button presented (the point of interest being that this could be the last click required for continuous music playing, in that audio loop) ... music should play continuously and ...
if more interesting visuals are also required focus back to calling window
And given that the iPhone and AirPods are charged, and you don't charge out of Bluetooth range with the iPhone, you could get that "radio feeling" out of an iOS user experience!
Code changes, all just clientside HTML and Javascript, went ...
calling window's index.htm changes around the document.body onload event area of interest 🎶 ...
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
We're just over time, aren't you?! And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out ... but not today?! Why not? We have a funny set of needs, they being ...
our Image Map's image will have a variable set of width x height dimensions ...
our Image Map's image will be transparent
our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working
... the last condition of which we realized, down the track, required us to create four Image Maps. But ... but ... Nala hears you say?!
Yes, we can reference the one image, in its data URL guise, as a smaller, or not, version of itself, by specifying CSS properties ...
position:absolute; (our usual for overlay scenarios)
z-index:56; (for both transparent image and its associated Image Map ... more on this later)
left (to appropriately position in X to be in the relevant section of dark green Image Map overlaying in the Landing Page)
top (to appropriately position in Y to be in the relevant section of dark green Image Map overlaying in the Landing Page)
width (which will be up to the transparent image width)
height (which will be up to the transparent image height)
... and no concern about opacity given the transparent image and z-index considerations, here.
So, how can we involve a transparent image here? Well, that is where the new Responsive Web Design Landing Page being PHP, though up to today it had contained no PHP, is in our favour. We can use PHP's GD to create one, grab its associated data URL and tidy up, and constructing the four image and associated Image Map HTML elements populated, in its "child iframe", and sending back up into the "parent webpage's" new ...
function ouralert(innum) {
var ans='';
switch ('' + innum) {
case '1':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '2':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '3':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '4':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/slideshow.html', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '5':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '6':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/plus/', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '7':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '8':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
case '9':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
default:
break;
}
if (!ans) { ans=''; }
if (ans != '') {
window.open(ans.trim(), '_blank');
if (ans != ans.trim()) {
window.localStorage.setItem('area' + innum + 'url', encodeURIComponent(ans.trim()));
}
}
}
function imbit() {
//if (document.getElementById('myimg')) {
// document.getElementById('myimg').style.border='5px dashed purple';
//}
if (('' + window.localStorage.getItem('area4url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[3]=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').title=decodeURIComponent('' + window.localStorage.getItem('area4url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area4').href=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').onclick=function(){ omoiset=-1; urls[3]=urls[3]; }
//document.getElementById('area4').ondblclick=function(){ ouralert(4); }
}
if (('' + window.localStorage.getItem('area6url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[5]=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').title=decodeURIComponent('' + window.localStorage.getItem('area6url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area6').href=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').onclick=function(){ omoiset=-1; urls[5]=urls[5]; }
//document.getElementById('area6').ondblclick=function(){ ouralert(6); }
}
}
separating out totally "uninvolved" Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials ... from ...
any other call of any complexity or having a query string etcetera, reverting to the "old way"
... new paradigm? So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]
honing in on our "Landing Page and friends" set of unresponsively designed webpages ...
honing in on iPhone sized devices (ie. not iPads nor laptops) ...
host web browser address bar calls of "Landing Page and friends" set of unresponsively designed webpages within a caller.htmlresponsively web designed shell supervisory webpage and start using some of that ...
Image Map only allowing for area subelements with shape=rect … today we also allow for …
Image Map now allowing for area subelements with shape=poly …
… via …
Right clicks after an initial click are the means by which you can define area shape=poly ( as distinct from the default shape=rect ) elements where to finish a polygon two click back close to the start point.
… as a modus operandi for the user to cater for more complex shape definitions in their Image Maps.
That doesn’t mean the rectangle around such a polygon is not also significant. Do you know why?
Yes, a hosting HTML div of a specific width and height and positioned absolutely at a precise left and top screen position allows SVG innerHTML like …
<svg xmlns="http://w3.org" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"><polyline points="0,67,56,7,100,0,150,17,0,67"></polyline></svg> ... be showing a polygonal user clicked shape, scaled appropriately, yet responsively, and allowing for those % unit definitions above making all this methodology useful here. Notice the zero co-ordinates? That is no accident. We make the co-ordinates relative to the minimum x and minimum y "datum" to the co-ordinating.
To pass events down through a higher z-index element, add pointer-events: none; to the top element. This tells the browser to ignore the overlay for mouse events, allowing clicks and hovers to "fall through" to the element stacked beneath it.
... to learn a whole new technique we've been looking for for quite some time now ... now, where did we put that "Overlay Disappointments File"?! ... bye bye!
... and allowing users using our inhouse Random Background interfacer the chance to create some Image Maps using incarnations of these images as the visual basis to them.
We've chosen ...
the oncontextmenu (ie. right click) as an intervention point to facilitate this ... or ...
if using a macOS operating system a ...
control-command-shift-3
control-command-shift-5
...
document.addEventListener('keydown', (event) => { // thanks to https://www.google.com/search?q=javascript+detecting+control-command-shift-3&rlz=1C5OZZY_en&oq=javascript+detecting+control-command-shift-3&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRiPAjIHCAYQIRiPAjIHCAcQIRiPAtIBCTE3NzMyajBqN6gCALACAA&sourceid=chrome&ie=UTF-8
// Check if Control, Command (metaKey), and Shift are all held down
// AND the key pressed is the number 3
if (
event.ctrlKey &&
event.metaKey &&
event.shiftKey &&
event.code === 'Digit5'
) {
// Prevent the default browser action if necessary
//event.preventDefault();
established a URL means by which a single URL call from the canvas residing Inhouse Image Map Creator and Canvas Annotation web application via a data URI hashtag conduit ... and today just ...
allowing for an absolute URL in that hashtag is the relatively simple change needed so that, using this, our WordPress "right click over an img image element" functionality can be tweaked ...
var huhifs=prompt('Optionally, please, any CSS for images ... append 3 spaces to be able to edit this ' + (gthing == 'image' ? gthing + ' (and answer of #imagemap will use this image as basis for creation of an image map in a new window)' : gthing) + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
if (huhifs == null) {
huhifs='';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (event.target.outerHTML.indexOf('<a ') == 0) {
console.log(6);
ggurl=event.target.href;
} else {
console.log(66);
ggurl=document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="')[eval(-1 + document.body.innerHTML.split(event.target.outerHTML)[0].split(' href="').length)].split('"')[0];
}
if (6 == 6) {
console.log(ggurl);
window.open(ggurl,'_blank'); ggurl='';
// huhifs=window.prompt('Optionally, please, any CSS for images ... append three spaces to be able to edit this ' + gthing + ' in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. ' + egblurb + usuff + ' ', defblurb);
} else {
setTimeout(function(){ window.open(ggurl,'_blank'); ggurl=''; }, 5000); //alert(event.currentTarget.outerHTML); //event.currentTarget.click();
}
}
}
if (huhifs.toLowerCase() == '#imagemap') {
event.preventDefault();
event.stopPropagation();
ggurl=event.target.src;
window.open('//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.htm?imagemap=url#' + (ggurl.indexOf('//') != -1 ? '//' + ggurl.split('//')[1] : (ggurl.replace(/^\.\//g,'/').indexOf('/') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(1).replace(/^\//g,'ITblog/') : (ggurl.indexOf('../') == 0 ? '//www.rjmprogramming.com.au/' + ggurl.substring(3) : ggurl))),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height));
ggurl='';
} else if (huhifs.indexOf('data:image/') == 0) {
if (document.getElementById('imgcopycheck') && usuff != '') { //if (document.URL.indexOf('/streetart/') != -1) {
uplitc(huhifs); //alert(document.URL);
}
return '';
}
... as an excerpt from the changedonrightclick.js external Javascript called by WordPress, and calling ...
... good, now, again ... an image is a canvas is an image ...
an image is a canvas is an image
... excellent, now, backwards ... egami na si savnac a si egami na ...
egami na si savnac a si egami na
... wow! ... Now, lastly … I want my mamma! Now! ...
I want my mamma! Now!
Mamma! Thank god you’re here! But it's true. Our thinking behind allowing browsed for image files become data URIs that can be the img element "image" part of the "image map", further to yesterday's Inhouse Image Map Creator Mobile Debug Tutorial, we can now create using our inhouse Image Map Creator capable web application uses the "an image via [canvasContext].drawImage() is a canvas via [canvas].toDataURL() is an image" concept that can save us heaps of time with this project. Instead of intervening at each dropdown option mentioning "Browse" to make this design change, we, instead, introduce to the HTML5canvas element a new ondblclick event ...
<canvas ondblclick="qwowo=window.open(document.URL.split('?')[0].split('#')[0] + '?imagemap=url#' + this.toDataURL('image/jpeg',0.4),'_blank','top=40,left=40,width=' + eval(-80 + screen.width) + ',height=' + eval(-80 + screen.height) + '');" ondragstart="dragstart(event);" draggable="false" title="Ready for you to create your canvas 🎨 content above any signature 💳 panel ... keys U for Undo and R for Redo can work after a discrete click ending any scribble mode of use. Double click can facilitate turning this canvas content into an image map, and this canvas content can be populated by so many of the options in the menu to the right, which includes many local image file browsing choices." id="topcanvas" width=850 height=600 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas>
... allowing that "on double click" result in the web application turning into an Image Map Creator where now ...
Image Map ( ie. <img src="[image URL as entered by user or data URI browsed for by the user, or, come to think of it, from a couple of days back, entered in by the user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... is that very pithy redefinition of our web application's view of what an Image Map can be! Though?!
Apologies to any mobile users wanting to access this new inhouse Image Map creator web application last talked about with yesterday's Inhouse Image Map Creator Interactive Drill Down Tutorial before today, that is, but we were leaving the issue until a proper hardware ...
Mac Book Air
Apple white lead
iPhone
... that once the middle one plugs into the top and bottom allows for ...
iPhone Safari web browser call of the inhouse Image Map creator ... could tee up with (ie. attain a "connection" with) ...
Mac Book Air Safari web browser Develop -> (in our case) Robert's iPhone -> user_of_signature_signature.htm
... online debugging session, could be arranged and a block of time set aside to concentrate on, because "concentrate" is the name of the game here!
Luckily, the issue was straightforward, where many are not. In the overseeing code, we had ...
... ba bow ... because in the external Javascript we got pulled up by the debugging of the iPhone execution attempt at a codeline, where the user decides to take on an Image Map creation task ...
Inhouse Image Map Creator Interactive Drill Down Tutorial
It might be the case, often, with Image Map creations, as with our recent web application featuring in yesterday's Inhouse Image Map Creator Drill Down Tutorial that the user needs to ...
strike while the iron is hot
... regarding having the event logic be nuanced as the image map area subelements are created in terms of ...
area subelement inline event logic definitions (pointing at, perhaps, local Javascript functions) ... as well as ...
the content of those local Javascript functions
... in such a way that, if you come back to "flesh out" the image map HTML coding the next day, say, there are enough clues you've left that you do not have to go and match the "coords" attribute values to a screen position to get some context. That takes a lot longer we find.
And so, today, we now offer ...
Enter an Image URL (append space to create Image Maps where click/tap pairs can define rectangle corners ... cursor is a crosshair for lower left click/tap, first, then cursor is pointer top right ... append another one space to prompt for tailored event logic each time and two spaces to also review the default Javascript used for double click logic image map testing purposes ... we are going to discourage scrolling here, but you can still zoom out or in)
... Javascript prompt windows "on the fly" to allow for this to be a possibility for the Image Map creator using ...
Onto yesterday's Inhouse Image Map Creator Tutorial we've decided today's work should stay within non-mobile realms but flesh out more user available functionality to help with "stage two" thinking. With that in mind ...
the image map HTML containing textarea created (with yesterday's efforts using the Canvas and Image Map web application (now featuring a new emoji button 🗺️🖼️ to allow for a non-dropdown usage approach)) has an ondblclick event logic added so that when double clicking, at any stage of the image map creation processing, it ...
opens a new popup window where that HTML you have so far is surrounded by a default "rest of webpage" scenario as the HTML that goes into making up that popup window HTML content, and where you can test out it's workings ... as well as ...
that popup window image map, itself, is given an ondblclick event logic whereby a double click there can create below that image map within the same popup window a new textarea element containing all that HTML (default "rest of webpage" and all) which can be copied into a clipboard buffer as required ... and ...
if that textarea within the popup window is edited and the user double clicks that textarea element, a new popup window reflecting your changes is opened above that ... etcetera etcetera etcetera
All this can be used to either/both validate your image map and follow through further to incorporating the image map into a functional HTML webpage, using the changedsignature_signature.js external Javascript to make all this possible. Within that changed external Javascript we allow the user to cancel the proposed area subelement currently embarked upon between where the user has clicked/tapped the bottom left and before they shape to click/tap the top right rectangle definition, via a right click, so as to reset back to the click/tap using the crosshair cursor back at a bottom left area shape=rect subelement definition.
The "largely canvas" using web application last talked about with WordPress Blog Image Editing Media Tutorial, today, we're excited to announce, has been given an "on first draft just image URL" using new ...
Image Map ( ie. <img src="[image URL as entered by user]" usemap='#htblah' blah /><map name='htblah' id=htblah><area shape=rect coords='tlx,tly,brx,bry' blah /> ... more area elements blah ... blah ... blah ... <area shape=default nohref alt="" /></map> ) creator
... arrangement inhouse means to construct image maps, so far, just via an image URL.
Why hook into the largely canvas savvy web application? Well, it is that basic positional mouse event logic that is needed to create image maps, and here, it is a dominant theme, and useful, even though the rearrangement of data needed is quite substantial, still, that is where we think this new functionality appears most at home, being a new suboption ("Image 🖼 Canvas Matches Actual URL or Image Map rectangle area creations") off a dropdown option means of deploying.
No tests on mobile, yet, but on non-mobile, we're happy, once the user chooses to create Image Maps, so long as ...
we stop user web page scrolling ... while still allowing ...
webpage zooming out or in
... in conjunction with ...
replacing the webpage table's left cell content, which used to contain a canvas element, with the user defined image, via it's URL ...
replacing the webpage table's right cell content, which used to contain an canvas annotation menu, with the image map URL HTML built up from user lower left and upper right rectangle defining click/taps
... we have the wherewithal to create image map HTML code the user can copy and use, with "stage two" fleshing out!
... to allow for this image map inhouse functionality. The talents of HTML textarea elements, with their resizing abilities, helps out here, allowing these overlayed textarea elements ...
containing image map HTML ... and/or ...
overlaying semi-transparentally to see what has been clicked already
... also be able to be resized "out of the way" should that be needed perhaps regarding overlapping scenarios, without having to resort to any other type of event logic to allow for. The other big and relevant talent of textarea elements is their ability to contain HTML code and be editable with that HTML code, perhaps user amended, and to be able to Select All then Copy into a clipboard buffer, via it's right click web browser menu, ready to paste somewhere else, that HTML content ready for any required "stage two" embellishment and usage.
... to add to our recent WordPress Blog Image Editing functionality, extending it's capabilities to be able to optionally create either/both ...
Video
Animated GIF
... media presentations off this should the user pick more than one image, to be edited, in any one web browser tab (via window.sessionStorage) session. So far, we're creating ...
window.open
background image
background-size: contain
... "Video" and "Animated GIF" presentations, and see this as a shareable commodity, into the future, especially as the image slide data ends up being an HTML canvas [canvas].toDataURL() data URI that represents ...
lots of data
but understood everywhere
... and content wise has included within it, any canvas manipulations and annotating and reworking the user has applied plus, at least for Google Chrome, any image filtering CSS the user has requested, into that canvas. We shape to involve the cowsayactual web server disk based media creating interfacing, but not for now. We'll see, because WordPress Visual Synopsis Media Tutorial methodologies also ended up presentation wise, with "inhouse" "Video" and "Animated GIF" presentations.
How does the user make this happen? Well, at the opportune call of our Canvas Image Editor web application some "Mantissa MadnessMagic" takes place using ...
... to help create, within the blog posting webpage content, the HTML skeletal necessaries modelled on how WordPress Visual Synopsis Media Tutorial worked it for Visual Synopsis (Slideshows) functionality which included inhouse "Video" and/or "Animated GIF" media presentations.
WordPress Blog Posting Feature Image Editing Tutorial we're using a hosted HTML iframe window within the blog posting webpage of interest
And that should be a lot easier to handle, yes?! Well, yes, maybe, but not that much easier. A little bit "easier" because the logic is largely funnelled into code that is common to both modus operandi.
In amongst the commonalities, thankfully, the means to get to the "image editing and annotating" and/or "image styling" functionality remains ...
Non-mobile right click or spread/pinch mobile gesture on most blog posting images can lead to image editing and annotating functionality, where for animated GIFs first slide is chosen.
We learnt a bit making the mobile ontouchend spread/pinch detection more bulletproof ...
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
setTimeout(function(){
document.ontouchend=function(e){
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
lastsp=eval(e.touches.length);
}
if (eval('' + e.touches.length) >= 1) {
if (document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') == -1) {
onrightclickask();
} else if (e.touches[0].target.outerHTML.split('>')[0].indexOf('<img ') == 0 && e.touches[0].target.outerHTML.split('>')[0].indexOf(' tabindex=') != -1) {
onrightclickask(); //document.title=':' + e.touches[0].target.outerHTML.split('>')[0].substring(1);
}
}
};
}, 4000);
}
... but ahead of this, for the TwentyTen theme changes to codex webpage structure we predominantly do with a good ol' tailored header.php the most effective modified (which is new) codeline now goes ...
Running against us regarding One Image Website design ..
Running for us regarding One Image Website design ...
the programmatical scrolling means embedded iframe hosting will not work
way window.prompt freezes all Javascript at a snapshot of time ...
hashtag navigation can be the conduit to pass data onto inhouse Canvas Editor of Image Data
[canvasContext].drawImage has a variety of useful calls (in that OOP method feel) allowing for dynamic cropping
That "one against" stopped how we envisaged the work at the start of the day. We thought we'd use window.sessionStorage (or maybe window.localStorage) as the only data conduit needed, and we'll be continuing that idea with another approach into the future, but back to today, hashtagging provided that conduit means, even if we were using data URIs (though all we need today are image absolute URLs).
And then there was "the unknown factor" ...
Can [canvasContext].drawImage draw that image with CSS filter styling applied?
Well, we found using Javascript DOM ahead of the new Image() call ...
xcelem=document.getElementById('topcanvas');
xccontext = xcelem.getContext("2d");
xcimg=new Image;
xcimg.onload = function(){
var mysx=('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sx')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The x coordinate where to start clipping
var mysy=('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sy')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The y coordinate where to start clipping
var myswidth=('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_swidth')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the clipped image
var mysheight=('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_sheight')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the clipped image
var myx=('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_x')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The x coordinate where to place the image on the canvas
var myy=('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_y')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // The y coordinate where to place the image on the canvas
var mywidth=('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_width')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The width of the image to use (stretch or reduce the image)
var myheight=('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_height')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The height of the image to use (stretch or reduce the image)
if (mywidth != '' && myheight != '') {
xcelem.width=eval('' + mywidth);
xcelem.height=eval('' + myheight);
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
if (myx != '' && myy != '' && myswidth == '' && mysheight == '') {
xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
} else {
xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight));
setTimeout(function(){ xccontext.drawImage(xcimg,eval('' + mysx),eval('' + mysy),eval('' + myswidth),eval('' + mysheight),eval('' + myx),eval('' + myy),eval('' + mywidth),eval('' + myheight)); }, 3000);
window.sessionStorage.removeItem('user_of_signature_signature_sx');
window.sessionStorage.removeItem('user_of_signature_signature_sy');
window.sessionStorage.removeItem('user_of_signature_signature_swidth');
window.sessionStorage.removeItem('user_of_signature_signature_sheight');
window.sessionStorage.removeItem('user_of_signature_signature_x');
window.sessionStorage.removeItem('user_of_signature_signature_y');
window.sessionStorage.removeItem('user_of_signature_signature_width');
window.sessionStorage.removeItem('user_of_signature_signature_height');
}
} else {
xcelem.width=xcimg.width;
xcelem.height=xcimg.height;
if (('' + xcimg.style.filter).replace(/^undefined/g,'').replace(/^null/g,'').trim() != '') {
xccontext.filter=xcimg.style.filter;
}
xccontext.drawImage(xcimg,0,0);
setTimeout(function(){ xccontext.drawImage(xcimg,0,0); }, 3000);
}
if (window.parent) {
if (parent.document.getElementById('if_image_canvas')) {
if (('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim() != '') {
if (eval('' + ('' + parent.document.getElementById('if_image_canvas').style.height).replace('px','').trim()) < eval(200 + eval('' + xcelem.height))) {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
} else {
parent.document.getElementById('if_image_canvas').style.height='' + eval(200 + eval('' + xcelem.height)) + 'px';
}
parent.document.getElementById('if_image_canvas').style.display='block';
if (parent.document.URL.replace('/wordpress','/ITblog').indexOf('/ITblog') != -1) {
parent.document.getElementById('if_image_canvas').scrollIntoView();
}
}
}
};
var incomings=('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') != '' ? ('' + window.sessionStorage.getItem('user_of_signature_signature_filter')).replace(/^undefined/g,'').replace(/^null/g,'') : ''; // Optional. The image filter CSS styling to apply
if ((incomings.indexOf('%20') != -1 || 7 == 7) && incomings.replace(':',')').indexOf(')') != -1 && incomings.indexOf('style=') != -1) {
incomings='style=' + encodeURIComponent((incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' '));
}
var relincomings=incomings.split('style=')[1] ? decodeURIComponent(incomings.split('style=')[1].split('&')[0].split('#')[0]).replace(/\%20/g,' ').replace(/\+/g,' ') : '';
if (relincomings.indexOf('filter:') != -1) {
xcimg.style.filter=relincomings.split('filter:')[1].split(';')[0].split('}')[0];
}
xcimg.src=xcont;
... didn't help, and then we asked the online woooorrrrrllllddd to come across this very useful link, thanks to teach us ...
... with the user able to make this happen with those right click (non-mobile) or pinch or swipe gesture (mobile) actions (talked about with yesterday's One Image Website SessionStorage Image Filtering Tutorial) getting the user to a prompt window with the modified "blurb" ...
Optionally, please, any CSS for images ... append three spaces to be able to edit this screenshot in a canvas ... ref. https://www.w3schools.com/cssref/css3_pr_filter.php ... eg. filter: grayscale(100%);
... talking about the three appended spaces needed.
clientside image filtering functionality to offer ...
almost exclusively using window.sessionStorage ideas (rather than our usual window.localStorage (ie. like Cookies) usage)
Why is that last point any big deal? Well, programmers will tell you, often the tidy up of a new arrangement involves as much, or more, coding to do than the instigation. And a lot of programmers, am sure, will agree that that is a pain in the neck, often. But the use of window.sessionStorage at the expense of window.localStorage allows the programmer to go ...
Aaaaaahhhhh
There is so much less to tidy up. Using window.sessionStorage it is only data on that web browser tab that comes into play, and as soon as that web browser tab no longer exists, nor does the window.sessionStorage data you stored. Yayyyyyyy!
We found we couldn't quite make it exclusively with window.sessionStorage because in the One Image Website paradigm of offering music playing we lost window.sessionStorage data for one of the two web browser tabs that become involved to start the music rolling. So sad. Nevertheless, we transferred some controllable temporary window.localStorage data storage over to window.sessionStorage data storage at the opportune time ...
... (we figured after a day of tinkering ... so sad).
How can the non-mobile user access these new aesthetic settings? Via a right click, as our new unfettered layer of functionality option, encapsulated by onrightclick.js external Javascript "proof of concept" effort, on the way to a Javascript prompt window, is the way we've gone about it. From there, the user can enter CSS non-selector actions such as the use of CSS filter property.
And as such, it's worth a revisit of one or all of our reworked One Image Website web applications ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
Today, we've bitten the bullet, and decided to shore up the webpage scrolling issues that could occur in yesterday's One Image Website VTT Tracks Tutorial, and before, with our set of One Image Websites. They represent, perhaps, a slightly unusual scenario whereby the image data is allowed to be itself, and being bigger than the dimensions of the webpage (straight from its digital source), in all probability. Hence, the randomized document.body scrolling that occurs.
But up until today our randomized range of scrollLeft and scrollTop positioning that could occur ranged over the entire width and height of the underlying image, while we think we should only be scrolling over the range ([imageWidth] - window.innerWidth (screen width)) x ([imageHeight] - window.innerHeight (screen height)). This could lead to white bands to the right and/or bottom of the webpage, in its presentation. And so we've fixed all the Javascript code to replace the old with the new in all the One Image Website codesets ...
... and, am sorry, but cannot award any points to those who chose the former, because ... well ... it's doubtful we'd mention the second unless we'd done it. And so the answer is ... the former ... down Nala ... the latter!
Today's blog posting is also a little story about the benefits of what we like to call client pre-emptive iframe logic, whereby we open an HTML iframe element, blazing away with its src attribute pointing at a URL that may or may not exist, and if it does, we do something about its content, usually, in the HTML iframe onload event logic. In our case the URL is a VTT file suiting the One Image Website of relevance given the upload and renaming of the VTTs created using yesterday's PHP ffmpeg log to VTT file creator web application.
As a programmer who would like to pursue true track cue Javascript coding, develop the function tracks in the One Image Website index-ssmhalf.html you could View -> Page Source from your favourite web browser, for any of ...
Normal Run ...
Run for All Platforms that Presents an Audio Element You Can Play Immmediately
... where, now, where the user plays music, perhaps continuously (like a radio) with an HTML audio element play button press, the currently playing song, thanks to Royalty Free Music For Video, help you keep in touch with the song playing up at the web browser tab and the image title.
This amounted to Javascript changes, as per ...
index.htm ...
var foreground=null; // and get rid of var in var foreground below
var plusstuff='';
function ftchange(tob) {
plusstuff=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
if (document.getElementById('place').title.indexOf(' Playing ') == -1) {
document.getElementById('place').title+=' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
} else {
document.getElementById('place').title=document.getElementById('place').title.split(' Playing ')[0] + ' Playing ' + tob + ' thanks to http://www.freesoundtrackmusic.com ';
}
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i) && document.URL.indexOf('?audio=') == -1) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=00" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
function FadeInImage()
{ var foreground=document.getElementById("place");
window.clearTimeout("FadeInImage('" + "place" + "')");
rotateImage("place");
}
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
//alert('yay2');
anotherNew();
var foreground=document.getElementById(place);
//alert(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//alert('yay2a');
var alink=document.getElementById("alink");
var xxxx=alink.href;
if (xxxx.indexOf("mp3") != -1)
{
//alink.href="index-ssm.html";
//alink.onclick="javascript:void(0);";
alink.href="filewrite.php?id=session&name="+bigrandnumber+"&ext=txt&rand="+bigrandnumber;
alink.onclick="javascript:void(0);";
foreground.onclick="javascript:hasBeenClicked();";
foreground.title="Click for Bamboozled provided by http://www.freesoundtrackmusic.com" + plusstuff;
ffmpeg ... with its great logging and media concatenation talents, thanks ...
macOS Terminal desktop app ... regarding its great GUI design feature allowing you to gather up actions of the past into a copy buffer via its Edit -> Find functionality, thanks
Don't know about you, but have always found the creation of track data VTT files (and their predecessor SRT files) one of the most tedious jobs in programming?
But the work of the day before yesterday's One Image Website iOS Radio Music Tutorial and its audio concatenation via ffmpeg themes had us looking back, wistfully, back up our (macOS) Terminal (desktop apps) logging of a few days past, hoping for an escape from VTT file manual text editing for our wish to enhance our One Image Website work of recent days. Wow, the ffmpeg logging was brilliant!
There was enough there to program the creation of VTT files from the ffmpeg, and our "cd"ing and "ls"ing and other stuff, in the (let's more accurately say, Terminal) logging. Yayyyyy!
If you click the light green form submit button, in the iframe way below, yourself, it will reveal, in details/summary (revealing) tags, both the input and output (VTT files) for you to see this more clearly, or to have it clicked for you in a new window, click this button clicker incarnation. In the works of the HTML form below, for the first time we can remember, and because the defaults are so arcane, we developed HTML form onsubmit logic as per ...
... as a way to deal with arcane defaults, where the encouragement is there for an interested programmer to download PHP code (perhaps to a MAMP local Apache/PHP/mySql web server environment) and tweak to their purposes. Note that you can paste your own logging into the textarea as a way this PHP application can be useful even up at the RJM Programming domain ...
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
... and so, it being tomorrow we're here starting our discussion starting with the "one less window" thought. Have a look at this table outlining some (off the top of the head) clientside navigation techniques in two categories ...
No new window created ...
New window created ...
window.open([URL],'_self')
window.open([URL],'_blank')
location.href=[URL]
window.open([URL],'_top')
window.location=[URL]
top.window.location=[URL]; // if in an iframe
Ajax (with or without new FormData()) whether 'GET' or 'POST'
form target=_blank action=[URL]
form target=_self action=[URL]
form target=_top action=[URL] // if in an iframe
iframe srcdoc=[webpageHTML]
form target=_parent action=[URL] // if in an iframe
iframe src=[URL]
parent.window.location=[URL]; // if in an iframe
... and it's that last left hand column iframe src=[URL] we like for the purposes of these changes today. That new HTML iframe in the "One Image Website" index.htm supervisories is now worked via ...
function rotateImage(place) {
while (number_of_image == 0)
{
place = place;
}
xplace=place;
anotherNew();
var foreground=document.getElementById(place);
var thedivlink=document.getElementById("thedivlink");
var thediv=document.getElementById("thediv");
if (foreground.width > 0) {
thedivlink.style.display = "none";
thediv.style.display = "none";
if (document.getElementById('ifmusicone')) {
document.getElementById('ifmusicone').style.display='none';
}
//
// more rotateImage code follows ...
//
}
//
// more rotateImage code follows ...
//
}
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.body.innerHTML+='<iframe id=ifmusicone title="Play http://www.freesoundtrackmusic.com (thanks) Music Set on Loop Here" src="./index-ssmhalf.html?justmusic=0" style="opacity:0.5;z-index:345;position:absolute;width:140px;height:100px;left:' + eval(-140 + eval('' + window.innerWidth)) + 'px;top:0px;"></iframe>';
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
... up towards the top right of the index.htm webpage when using an iOS platform. It is optional whether the user ...
clicks Play button of that new top right audio element for continuous "looped audio track sets" mode of use with no new second window required (and so, no window focus changes and no second click required either)
clicks blue link for continuous "looped audio track sets" mode of use with a new second window's audio element that the user clicks the Play button of
clicks none of those modes of use above that are offered for a short time to then click appropriately to start up music, optionally, as required, at a later date as possible
So feel free to try a One Image Website in the list below ...
... where this new iOS music arrangement logic has been incorporated.
Stop Press
The Webpage Meta Refresh Primer Tutorial has reminded us of another left hand "No new window created" navigation methodology using the HTML meta "refresh" tag.
Did you read the recent Responsive Web Design Landing Page Image Map Tutorial? Its core takeaway was the linking of One Image Website functionalities. In these One Image Websites we've picked out a guinea pig ...
... to have a day's worth of experimenting trialling a solution to the "chestnut of a" problem getting iOS music to play continuously without supervision, like a radio program, albeit on a cycle of repeated content (set (such as the oneoffive.mp3 twooffive.mp3 threeoffive.mp3 fouroffive.mp3 fiveoffive.mp3 set of 5 tracks in example below)). Years ago Apple's iOS started requiring a user click to validate the playing of media, hence the interest in today's topic.
The ingredients for the solution, and testing thereof, are ...
optionally, (we're just suggesting this headphone idea if you want to keep the music to yourself) via Bluetooth, with a set up involving a connection to a set of AirPods (and connected to your ears) ... are chosen as ...
click the blue link up the top that appears for a short time ... then ...
in the resultant new music window click the Audio play button presented (the point of interest being that this could be the last click required for continuous music playing, in that audio loop) ... music should play continuously and ...
if more interesting visuals are also required focus back to calling window
And given that the iPhone and AirPods are charged, and you don't charge out of Bluetooth range with the iPhone, you could get that "radio feeling" out of an iOS user experience!
Code changes, all just clientside HTML and Javascript, went ...
calling window's index.htm changes around the document.body onload event area of interest 🎶 ...
function xonl() {
if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
document.getElementById('thedivlink').href=document.getElementById('thedivlink').getAttribute('data-href');
} else {
document.getElementById('thedivlink').href='index-ssmhalf.html?justmusic=';
document.getElementById('thedivlink').onclick=function() { document.getElementById('thedivlink').href=document.getElementById('thedivlink').href; };
document.getElementById('thedivlink').target='_blank';
}
}
For tomorrow, we offer an optional "one less click", "one less window" methodology improvement on the work above, as we transition the other "One Image Websites" over to the new iOS music paradigm.
So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
We're just over time, aren't you?! And so, we arrive at a long planned for tilt at Image Map functionality that we often turn to Mobilefish.Com and its excellent Image Map Creation to help us out ... but not today?! Why not? We have a funny set of needs, they being ...
our Image Map's image will have a variable set of width x height dimensions ...
our Image Map's image will be transparent
our Image Map needs to have a hole left aside inside it where the functionality that originally existed (and pointed to WordPress Blog content like you are reading), is still working
... the last condition of which we realized, down the track, required us to create four Image Maps. But ... but ... Nala hears you say?!
Yes, we can reference the one image, in its data URL guise, as a smaller, or not, version of itself, by specifying CSS properties ...
position:absolute; (our usual for overlay scenarios)
z-index:56; (for both transparent image and its associated Image Map ... more on this later)
left (to appropriately position in X to be in the relevant section of dark green Image Map overlaying in the Landing Page)
top (to appropriately position in Y to be in the relevant section of dark green Image Map overlaying in the Landing Page)
width (which will be up to the transparent image width)
height (which will be up to the transparent image height)
... and no concern about opacity given the transparent image and z-index considerations, here.
So, how can we involve a transparent image here? Well, that is where the new Responsive Web Design Landing Page being PHP, though up to today it had contained no PHP, is in our favour. We can use PHP's GD to create one, grab its associated data URL and tidy up, and constructing the four image and associated Image Map HTML elements populated, in its "child iframe", and sending back up into the "parent webpage's" new ...
function ouralert(innum) {
var ans='';
switch ('' + innum) {
case '1':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '2':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '3':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '4':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/slideshow.html', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '5':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '6':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.) Eg. https://www.rjmprogramming.com.au/plus/', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '7':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', urls[eval(-1 + eval('' + innum))].trim());
}
break;
case '8':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
case '9':
if (urls[eval(-1 + eval('' + innum))] != '') {
ans=prompt('Want to go anywhere? (To save for future append a blank.)', '');
}
break;
default:
break;
}
if (!ans) { ans=''; }
if (ans != '') {
window.open(ans.trim(), '_blank');
if (ans != ans.trim()) {
window.localStorage.setItem('area' + innum + 'url', encodeURIComponent(ans.trim()));
}
}
}
function imbit() {
//if (document.getElementById('myimg')) {
// document.getElementById('myimg').style.border='5px dashed purple';
//}
if (('' + window.localStorage.getItem('area4url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[3]=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').title=decodeURIComponent('' + window.localStorage.getItem('area4url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area4').href=decodeURIComponent('' + window.localStorage.getItem('area4url'));
document.getElementById('area4').onclick=function(){ omoiset=-1; urls[3]=urls[3]; }
//document.getElementById('area4').ondblclick=function(){ ouralert(4); }
}
if (('' + window.localStorage.getItem('area6url')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
urls[5]=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').title=decodeURIComponent('' + window.localStorage.getItem('area6url')) + '# ... long hover of at least 8 seconds for chance to change';
document.getElementById('area6').href=decodeURIComponent('' + window.localStorage.getItem('area6url'));
document.getElementById('area6').onclick=function(){ omoiset=-1; urls[5]=urls[5]; }
//document.getElementById('area6').ondblclick=function(){ ouralert(6); }
}
}
separating out totally "uninvolved" Landing Page calls hooked up with a new index.php (actually just HTML) Landing Page incarnation that has better Responsive Design credentials ... from ...
any other call of any complexity or having a query string etcetera, reverting to the "old way"
... new paradigm? So, why keep the old way? Well, we packed the "old way" with content rich functionality, and do not want to ditch that yet, but maybe over time?!
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.[1] Content, design and performance are necessary across all devices to ensure usability and satisfaction.[2][3][4][5]
honing in on our "Landing Page and friends" set of unresponsively designed webpages ...
honing in on iPhone sized devices (ie. not iPads nor laptops) ...
host web browser address bar calls of "Landing Page and friends" set of unresponsively designed webpages within a caller.htmlresponsively web designed shell supervisory webpage and start using some of that ...
