Tag Archives: ontouchmove

Canvas Interfacer Image Map Circle Tutorial

Posted on July 5, 2026 by admin

Further to the recent Canvas Interfacer Image Map Collaboration Tutorial‘s Image Map creation modes … shape=rect … via 2 pointings … and … 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. We hope you try … Random Background via Lorem Picsum Image Map savvy web application … uses … the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by … the changed signature_signature.js external Javascript … to see this in action. Previous relevant Canvas Interfacer Image Map Collaboration Tutorial is shown below. So far, with our currently running Image Map creating project yesterday’s Canvas Interfacer Mobile Image Map Tutorial continued on at, we’ve had a bit of focus on … 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://’ + … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged Apple, apple white lead, area, attribute, background, background image, browse, browsing, button, canvas, circle, co-ordinates, collaboration, connection, creator, data uri, data url, debug, debugging, developer, developer menu, disabled, double click, drawImage, email, emoji, emoji button, event, free draw, gesture, Gmail, hashtag, hashtagging, HTML, HTML5, image, image file, image map, image map creator, images, img, integration, iOS, iPad, iPhone, Javascript, lead, local web server, Lorem Picsum, MAMP, map, media, media file, mobile, mouse, mouse position, navigator, navigator.maxTouchPoints, navigator.userAgent, non-mobile, onclick, oncontextmenu, ondblclick, onmouseout, ontouchmove, overlay, pinch, pointer-events, polygon, popup, position, programming, prompt, random, rectangle, repository, resize, right click, rubber band, rubberbanding, Safari, screen, scribble, shape, share, sharing, SMS, source, SVG, swipe, textarea, three finger gesture, three fingers, toDataURL, tool, touch, tutorial, url, web browser, webpage, window.open, Wordpress, z-index | Leave a comment

Canvas Interfacer Image Map Collaboration Tutorial

Posted on July 2, 2026 by admin

So far, with our currently running Image Map creating project yesterday’s Canvas Interfacer Mobile Image Map Tutorial continued on at, we’ve had a bit of focus on … 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:’ + … Continue reading →

Posted in Not Categorised | Tagged Apple, apple white lead, area, attribute, background, background image, browse, browsing, button, canvas, co-ordinates, collaboration, connection, creator, data uri, data url, debug, debugging, developer, developer menu, disabled, double click, drawImage, email, emoji, emoji button, event, free draw, gesture, Gmail, hashtag, hashtagging, HTML, HTML5, image, image file, image map, image map creator, images, img, integration, iOS, iPad, iPhone, Javascript, lead, local web server, Lorem Picsum, MAMP, map, media, media file, mobile, mouse, mouse position, navigator, navigator.maxTouchPoints, navigator.userAgent, non-mobile, onclick, oncontextmenu, ondblclick, onmouseout, ontouchmove, overlay, pinch, pointer-events, polygon, popup, position, programming, prompt, random, rectangle, repository, resize, right click, rubber band, rubberbanding, Safari, screen, scribble, shape, share, sharing, SMS, source, swipe, textarea, three finger gesture, three fingers, toDataURL, tool, touch, tutorial, url, web browser, webpage, window.open, Wordpress, z-index | Leave a comment

PHP Wikipedia Geo Map Google Chart Fast Text Only Revisit Tutorial

Posted on June 28, 2026 by admin

Today we’re revisiting the work of PHP Wikipedia Geo Map Google Chart Region Makeover Tutorial where we interface … Google Chart Geo Chart … to … Wikipedia … and onto … Google Maps … especially regarding … our inhouse interfacer‘s “Fast Text Only” functionality ideas If at this stage of reading your reaction is … Huh?! … this was a “bit rich”, so we tried this one … Yes, “huh?!” is widely considered one of the most common and universally understood responses on the planet. A landmark linguistic study found that a word sounding like “huh” (used to ask for clarification when a speaker didn’t hear or understand something) exists in roughly the same form and function in almost every spoken language on Earth. … to hit the mark better, and proves it … You Are Not Alone. Anyway?! The idea of this work is to channel how a list is such a natural way for lots of us to organize our thoughts, and we reckon around here, Wikipedia is supreme at these list endeavours, as well as commonly augmenting that with great geodata smarts … so, thanks, Wikipedia! Maybe you remember how … the changed craters.php live run offered the user the chance to enter in their own Wikipedia list lookup thoughts of their own, and classify that idea as a Fast Text Only option, in which case … the changed PHP code geo_chart.php (that you can try in isolation for yourself, if you like, at this live run) can, in that scenario … be called programmatically, earlier … can offer text click Wikipedia lookup popup window functionality can offer right click or touch move Google Maps lookup popup window functionality … as usage improvements to this project. Previous relevant PHP Wikipedia Geo Map Google Chart Region Makeover Tutorial is shown below. You’d hope if you are doing something regularly, you could improve on something you did in 2018, here in 2025?! Well, that’s the story of today, revisiting that Wikipedia basis of Google Chart Geo Chart and Map Chart web application talked about with PHP Wikipedia Geo Map Google Chart Region Tutorial. Back in 2018, it seems, we were keen on hashtag navigation like … <?php location.href=’#tdmiddle’; ?> … whereas these days, unless a deliberate hashtag analysis is planned for in the code, we’re more likely to plump for … <?php document.getElementById(‘tdmiddle’).scrollIntoView(); ?> … and so it came to pass, as one example of today’s web application rework. This second idea can have the advantage that if element “tdmiddle” is already “above the fold”, probably no programmatical scrolling will happen, and often that is good news, whereas the first approach tries to make sure element “tdmiddle” finishes up the top of the device’s webpage’s screen, often “a sledgehammer to crack a nut” approach. And here’s why revisits are good practice? Would you believe we spent ten minutes on … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged chart, click, dropdown, Earth, functionality, geo chart, geodata, geographicals, Google, Google Charts, Google Maps, HTML, interface, interfacing, Javascript, latitude, list, longitude, map, map chart, onclick, oncontextmeny, ontouchmove, PHP, place, popup, right click, text, Web Application, Wikipedia, world | Leave a comment

Document Root Relative Folder Listing Assembly Complexity Tutorial

Posted on March 6, 2026 by admin

Further to yesterday’s Document Root Relative Folder Listing Assembly Sharing Tutorial‘s “sidestep for genericity” we’re back to nuances regarding assemblies and the media combinations users may select from that “:” dropdown. When it comes to designing an HTML widget, or assembly, to suit, we start thinking about “overlay” concepts, such as … position:absolute; top:0px; left:0px; z-index:9; opacity:0.6; // for any video or audio media selected, along with some image img background imagery … and which if text is involved as well … background-color:transparent; // for that textarea element … and sometimes, to get some opacity on image background imagery … background:linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url([imageURL]); … in amongst the “sixteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Assembly Sharing Tutorial is shown below. This “assembly” work of recent times involves “personalization”, in that what the user selects, and the order they select it in off that “:” dropdown determines the content. To us, that is the recipe for offering some email or SMS sharing capability so that … an originator (of contents) … can share to an email or SMS recipient a link reflecting the scenario whereby … if the recipient clicks that email or SMS link … the recipient sees what the originator sees … and that last point has us involving hashtagged arguments in order to not rock the existing PHP boat regarding it’s (existing functional) arrangements with $_GET[] and $_POST[] arguments, further to yesterday’s Document Root Relative Folder Listing Media Grouping Concatenation Tutorial in the “fifteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Grouping Concatenation Tutorial is shown below. Yesterday’s Document Root Relative Folder Listing Media Pairing Concatenation Tutorial honed in on … pairs of media and types that at most one of is an image … but today, nuancing that we allow for … some image(s) and pairs, or more, of another media type out of video or audio or text … where that image forms as a background image for your creations in the “fourteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Pairing Concatenation Tutorial is shown below. Onto yesterday’s Document Root Relative Folder Listing Media Pairings Tutorial … audio and video … ffmpeg helps add an audio soundtrack onto a video text and image … textarea element with image background audio and image … audio element with image background video and image … video element with image background … media pairings start, today, to get more sophistication with this, we start down the road towards video and audio ffmpeg inspired … concatenation … that you can see “starting to happen” in the “thirteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged abstraction, Ajax, animated gif, animation, Apache, assemblies, assembly, asynchronous, background, background image, caption, captions, cell, command, command line, commentary, concatenate, concatenation, convert, CSS, directory, div, Document Root, DOM, dropdown, email, emoji, event, exec, extensio, file, filename, find, folder, FormData, hashtag, hashtagging, image, ImageMagick, images, inline, inline-block, line feed, link, Linux, listing, ls, media, mimetype, multiple, onclick, one row, onmouseover, ontouchmove, operating system, overlay, pair, pairings, pandoc, PATH, PDF, PHP, popup, popup window, Powerpoint, presentation, programming, relative, relative URL, report, resize, row, select, share, sharing, shell_exec, slide, slides, slideshow, SMS, table, table cell, talent, text, tool, tutorial, url, video, voiceover, web server, word.document | Leave a comment

Document Root Relative Folder Listing Assembly Sharing Tutorial

Posted on March 5, 2026 by admin

This “assembly” work of recent times involves “personalization”, in that what the user selects, and the order they select it in off that “:” dropdown determines the content. To us, that is the recipe for offering some email or SMS sharing capability so that … an originator (of contents) … can share to an email or SMS recipient a link reflecting the scenario whereby … if the recipient clicks that email or SMS link … the recipient sees what the originator sees … and that last point has us involving hashtagged arguments in order to not rock the existing PHP boat regarding it’s (existing functional) arrangements with $_GET[] and $_POST[] arguments, further to yesterday’s Document Root Relative Folder Listing Media Grouping Concatenation Tutorial in the “fifteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Grouping Concatenation Tutorial is shown below. Yesterday’s Document Root Relative Folder Listing Media Pairing Concatenation Tutorial honed in on … pairs of media and types that at most one of is an image … but today, nuancing that we allow for … some image(s) and pairs, or more, of another media type out of video or audio or text … where that image forms as a background image for your creations in the “fourteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Pairing Concatenation Tutorial is shown below. Onto yesterday’s Document Root Relative Folder Listing Media Pairings Tutorial … audio and video … ffmpeg helps add an audio soundtrack onto a video text and image … textarea element with image background audio and image … audio element with image background video and image … video element with image background … media pairings start, today, to get more sophistication with this, we start down the road towards video and audio ffmpeg inspired … concatenation … that you can see “starting to happen” in the “thirteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Pairings Tutorial is shown below. Onto the day before yesterday’s Document Root Relative Folder Listing Links Video Tutorial, and it’s work with … “assemblies” … as an image media multiple selection (set of “widget”) ideas … as per list below … it’s time, today, to remember Document Root Relative Folder Listing Links Assemblies Tutorial‘s … To us, these are user driven (is it widgets) they create by selecting multiple media (today images, but down the line, other combinations) from the left hand table cell’s listing links. … and it’s invitation to broaden the scope … so that today we start down the road towards the concept of what we’ll call … “assembly media pairings” … where, so far, two, media selections get … Continue reading →

Posted in Not Categorised | Tagged abstraction, Ajax, animated gif, animation, Apache, assemblies, assembly, asynchronous, background, background image, caption, captions, cell, command, command line, commentary, concatenate, concatenation, convert, CSS, directory, div, Document Root, dropdown, email, emoji, event, exec, extensio, file, filename, find, folder, FormData, hashtag, hashtagging, image, ImageMagick, images, inline, inline-block, line feed, link, Linux, listing, ls, media, mimetype, multiple, onclick, one row, onmouseover, ontouchmove, operating system, overlay, pair, pairings, pandoc, PATH, PDF, PHP, popup, popup window, Powerpoint, presentation, programming, relative, relative URL, report, resize, row, select, share, sharing, shell_exec, slide, slides, slideshow, SMS, table, table cell, talent, text, tool, tutorial, url, video, voiceover, web server, word.document | Leave a comment

Document Root Relative Folder Listing Media Grouping Concatenation Tutorial

Posted on March 4, 2026 by admin

Yesterday’s Document Root Relative Folder Listing Media Pairing Concatenation Tutorial honed in on … pairs of media and types that at most one of is an image … but today, nuancing that we allow for … some image(s) and pairs, or more, of another media type out of video or audio or text … where that image forms as a background image for your creations in the “fourteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Pairing Concatenation Tutorial is shown below. Onto yesterday’s Document Root Relative Folder Listing Media Pairings Tutorial … audio and video … ffmpeg helps add an audio soundtrack onto a video text and image … textarea element with image background audio and image … audio element with image background video and image … video element with image background … media pairings start, today, to get more sophistication with this, we start down the road towards video and audio ffmpeg inspired … concatenation … that you can see “starting to happen” in the “thirteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Pairings Tutorial is shown below. Onto the day before yesterday’s Document Root Relative Folder Listing Links Video Tutorial, and it’s work with … “assemblies” … as an image media multiple selection (set of “widget”) ideas … as per list below … it’s time, today, to remember Document Root Relative Folder Listing Links Assemblies Tutorial‘s … To us, these are user driven (is it widgets) they create by selecting multiple media (today images, but down the line, other combinations) from the left hand table cell’s listing links. … and it’s invitation to broaden the scope … so that today we start down the road towards the concept of what we’ll call … “assembly media pairings” … where, so far, two, media selections get used to create another “widget” creation … so far … … trying … audio and video … ffmpeg helps add an audio soundtrack onto a video text and image … textarea element with image background audio and image … audio element with image background video and image … video element with image background … using the PHP … <?php if (isset($_GET[‘nonims’]) && isset($_GET[‘nonimsname’])) { $htmlassembly=”; $vis=”; $tis=”; $mis=”; $sis=”; $zis=”; $iis=”; $listis=str_replace(‘+’,’ ‘,urldecode($_GET[‘nonims’])); $hashis=”; if (strpos($listis, ‘#’) !== false) { if (strpos(str_replace(‘#audio/’,”,str_replace(‘#video/’,”,$listis)), ‘#’) === false) { // ffmpeg -i video.mp4 -i audio.aac -c:v copy -c:a copy output.mp4 $vis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#video/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#video/’, $listis)[0]))]; $ais=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#audio/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#audio/’, $listis)[0]))]; //file_put_contents(‘xx.xx’,$fconvprefix . ‘ffmpeg -i ‘ . $vis . ‘ -i ‘ . $ais . ‘ -c:v copy -c:a copy ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘.cba’,’.mp4′,basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’]))))); //exec($fconvprefix . ‘ffmpeg -i ‘ . … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged abstraction, Ajax, animated gif, animation, Apache, assemblies, assembly, asynchronous, background, background image, caption, captions, cell, command, command line, commentary, concatenate, concatenation, convert, CSS, directory, div, Document Root, dropdown, emoji, event, exec, extensio, file, filename, find, folder, FormData, image, ImageMagick, images, inline, inline-block, line feed, link, Linux, listing, ls, media, mimetype, multiple, onclick, one row, onmouseover, ontouchmove, operating system, overlay, pair, pairings, pandoc, PATH, PDF, PHP, popup, popup window, Powerpoint, presentation, programming, relative, relative URL, report, resize, row, select, shell_exec, slide, slides, slideshow, table, table cell, talent, text, tool, tutorial, url, video, voiceover, web server, word.document | Leave a comment

Document Root Relative Folder Listing Media Pairing Concatenation Tutorial

Posted on March 3, 2026 by admin

Onto yesterday’s Document Root Relative Folder Listing Media Pairings Tutorial … audio and video … ffmpeg helps add an audio soundtrack onto a video text and image … textarea element with image background audio and image … audio element with image background video and image … video element with image background … media pairings start, today, to get more sophistication with this, we start down the road towards video and audio ffmpeg inspired … concatenation … that you can see “starting to happen” in the “thirteenth draft” one_line_find.php Document Root Relative Folder Listing web application you can “crank up” below. Previous relevant Document Root Relative Folder Listing Media Pairings Tutorial is shown below. Onto the day before yesterday’s Document Root Relative Folder Listing Links Video Tutorial, and it’s work with … “assemblies” … as an image media multiple selection (set of “widget”) ideas … as per list below … it’s time, today, to remember Document Root Relative Folder Listing Links Assemblies Tutorial‘s … To us, these are user driven (is it widgets) they create by selecting multiple media (today images, but down the line, other combinations) from the left hand table cell’s listing links. … and it’s invitation to broaden the scope … so that today we start down the road towards the concept of what we’ll call … “assembly media pairings” … where, so far, two, media selections get used to create another “widget” creation … so far … … trying … audio and video … ffmpeg helps add an audio soundtrack onto a video text and image … textarea element with image background audio and image … audio element with image background video and image … video element with image background … using the PHP … <?php if (isset($_GET[‘nonims’]) && isset($_GET[‘nonimsname’])) { $htmlassembly=”; $vis=”; $tis=”; $mis=”; $sis=”; $zis=”; $iis=”; $listis=str_replace(‘+’,’ ‘,urldecode($_GET[‘nonims’])); $hashis=”; if (strpos($listis, ‘#’) !== false) { if (strpos(str_replace(‘#audio/’,”,str_replace(‘#video/’,”,$listis)), ‘#’) === false) { // ffmpeg -i video.mp4 -i audio.aac -c:v copy -c:a copy output.mp4 $vis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#video/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#video/’, $listis)[0]))]; $ais=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#audio/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#audio/’, $listis)[0]))]; //file_put_contents(‘xx.xx’,$fconvprefix . ‘ffmpeg -i ‘ . $vis . ‘ -i ‘ . $ais . ‘ -c:v copy -c:a copy ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘.cba’,’.mp4′,basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’]))))); //exec($fconvprefix . ‘ffmpeg -i ‘ . $vis . ‘ -i ‘ . $ais . ‘ -c:v copy -c:a copy ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘.cba’,’.mp4′,basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’])))) . ‘ 2> ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . “x.err” . ‘ > ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . “x.ok”); exec($fconvprefix . ‘ffmpeg -i ‘ . $vis . ‘ -i ‘ . $ais . ‘ -c:v copy -c:a copy ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘.cba’,’.mp4′,basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’]))))); } else if (strpos(str_replace(‘#text/’,”,str_replace(‘#image/’,”,$listis)), ‘#’) === false) { $mis=str_replace(‘jpg’,’jpeg’,explode(‘,’,explode(‘#image/’, $listis)[1])[0]); $tis=$_SERVER[‘DOCUMENT_ROOT’] . … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged abstraction, Ajax, animated gif, animation, Apache, assemblies, assembly, asynchronous, caption, captions, cell, command, command line, commentary, concatenate, concatenation, convert, CSS, directory, div, Document Root, dropdown, emoji, event, exec, extensio, file, filename, find, folder, FormData, image, ImageMagick, images, inline, inline-block, line feed, link, Linux, listing, ls, media, mimetype, multiple, onclick, one row, onmouseover, ontouchmove, operating system, overlay, pair, pairings, pandoc, PATH, PDF, PHP, popup, popup window, Powerpoint, presentation, programming, relative, relative URL, report, resize, row, select, shell_exec, slide, slides, slideshow, table, table cell, talent, text, tool, tutorial, url, video, voiceover, web server, word.document | Leave a comment

Document Root Relative Folder Listing Media Pairings Tutorial

Posted on March 2, 2026 by admin

Onto the day before yesterday’s Document Root Relative Folder Listing Links Video Tutorial, and it’s work with … “assemblies” … as an image media multiple selection (set of “widget”) ideas … as per list below … it’s time, today, to remember Document Root Relative Folder Listing Links Assemblies Tutorial‘s … To us, these are user driven (is it widgets) they create by selecting multiple media (today images, but down the line, other combinations) from the left hand table cell’s listing links. … and it’s invitation to broaden the scope … so that today we start down the road towards the concept of what we’ll call … “assembly media pairings” … where, so far, two, media selections get used to create another “widget” creation … so far … … trying … audio and video … ffmpeg helps add an audio soundtrack onto a video text and image … textarea element with image background audio and image … audio element with image background video and image … video element with image background … using the PHP … <?php if (isset($_GET[‘nonims’]) && isset($_GET[‘nonimsname’])) { $htmlassembly=”; $vis=”; $tis=”; $mis=”; $sis=”; $zis=”; $iis=”; $listis=str_replace(‘+’,’ ‘,urldecode($_GET[‘nonims’])); $hashis=”; if (strpos($listis, ‘#’) !== false) { if (strpos(str_replace(‘#audio/’,”,str_replace(‘#video/’,”,$listis)), ‘#’) === false) { // ffmpeg -i video.mp4 -i audio.aac -c:v copy -c:a copy output.mp4 $vis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#video/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#video/’, $listis)[0]))]; $ais=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#audio/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#audio/’, $listis)[0]))]; //file_put_contents(‘xx.xx’,$fconvprefix . ‘ffmpeg -i ‘ . $vis . ‘ -i ‘ . $ais . ‘ -c:v copy -c:a copy ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘.cba’,’.mp4′,basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’]))))); //exec($fconvprefix . ‘ffmpeg -i ‘ . $vis . ‘ -i ‘ . $ais . ‘ -c:v copy -c:a copy ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘.cba’,’.mp4′,basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’])))) . ‘ 2> ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . “x.err” . ‘ > ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . “x.ok”); exec($fconvprefix . ‘ffmpeg -i ‘ . $vis . ‘ -i ‘ . $ais . ‘ -c:v copy -c:a copy ‘ . $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘.cba’,’.mp4′,basename(str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’]))))); } else if (strpos(str_replace(‘#text/’,”,str_replace(‘#image/’,”,$listis)), ‘#’) === false) { $mis=str_replace(‘jpg’,’jpeg’,explode(‘,’,explode(‘#image/’, $listis)[1])[0]); $tis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#text/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#text/’, $listis)[0]))]; $iis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#image/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#image/’, $listis)[0]))]; } else if (strpos(str_replace(‘#audio/’,”,str_replace(‘#image/’,”,$listis)), ‘#’) === false) { $mis=str_replace(‘jpg’,’jpeg’,explode(‘,’,explode(‘#image/’, $listis)[1])[0]); $ais=str_replace(‘jpg’,’jpeg’,explode(‘,’,explode(‘#audio/’, $listis)[1])[0]); $sis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#audio/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#audio/’, $listis)[0]))]; $iis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#image/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#image/’, $listis)[0]))]; } else if (strpos(str_replace(‘#video/’,”,str_replace(‘#image/’,”,$listis)), ‘#’) === false) { $mis=str_replace(‘jpg’,’jpeg’,explode(‘,’,explode(‘#image/’, $listis)[1])[0]); $ais=str_replace(‘jpg’,’jpeg’,explode(‘,’,explode(‘#video/’, $listis)[1])[0]); $zis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#video/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#video/’, $listis)[0]))]; $iis=$_SERVER[‘DOCUMENT_ROOT’] . explode(‘,’, explode(‘#image/’, $listis)[0])[-1 + sizeof( explode(‘,’, explode(‘#image/’, $listis)[0]))]; } } $origname=$_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’])); //file_put_contents($_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . “tmp” . DIRECTORY_SEPARATOR . str_replace(‘+’,’ ‘,urldecode($_GET[‘nonimsname’])), $htmlassembly); //if (strpos((” . $origname . ‘~’), ‘.cba~’) !== … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged abstraction, Ajax, animated gif, animation, Apache, assemblies, assembly, asynchronous, caption, captions, cell, command, command line, commentary, convert, CSS, directory, div, Document Root, dropdown, emoji, event, exec, extensio, file, filename, find, folder, FormData, image, ImageMagick, images, inline, inline-block, line feed, link, Linux, listing, ls, media, mimetype, multiple, onclick, one row, onmouseover, ontouchmove, operating system, overlay, pair, pairings, pandoc, PATH, PDF, PHP, popup, popup window, Powerpoint, presentation, programming, relative, relative URL, report, resize, row, select, shell_exec, slide, slides, slideshow, table, table cell, talent, text, tool, tutorial, url, video, voiceover, web server, word.document | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
October 2026

S M T W T F S

1 2 3

4 5 6 7 8 9 10

11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

« Sep
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game Google Google chart hashtag HTML IFRAME image iOS Javascript MAMP media mobile navigation onclick overlay PHP popup programming select share sharing SMS SVG table text textarea tutorial url video web browser webpage
Your Background Image
OnTopList

October 2026
S	M	T	W	T	F	S
	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Thanks. Since then, a Shower Songs project at https://www.rjmprogramming.com.au/HTMLCSS/shower_songs.html is an improvement regarding "Radio Play" on mobile platforms.

This is a thoughtful example of using a single-row layout and scroll behavior to reveal media progressively. I especially liked the way the tutorial ties the gallery to real interaction details rather than treating the UI as a static mockup. For readers experimenting with the next stage of visual prototyping, LTX 2.3 Free collects prompt examples and workflow guidance for planning AI video scenes; the same attention to camera movement and timing is useful when turning a storyboard into motion.

The focus juggling with click() and blur() sounds painful. I ran into the same thing chaining YouTube iframes, the browser keeps handing focus back to whichever player was touched last. Keeping the window small and off to the side is a neat workaround. Any plan to bring Radio Play to mobile?

Word search is such a good project size — enough logic (grid generation, word placement, collision checking) to stay interesting, but still shippable in an afternoon. I came to these kinds of puzzles from the canvas-game side, where the bottleneck turned out to be art assets rather than code; drawing the same character walking in four directions by hand was the worst part, which is why I ended up building a tool that generates walk-cycle sprite sheet candidates from a…

Seeing grammatical terms such as Adjective and Adverb alongside abbreviations such as API highlights how different kinds of words need different explanations. For learners, a one-sentence definition and a short usage example would help distinguish a word's meaning from merely recognizing its spelling. It would also be useful to distinguish an abbreviation's expansion from what it means in context.

Tag Archives: ontouchmove

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Latest Comments

Tag Archives: ontouchmove

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList