Tag Archives: GIMP

Preview Image Map PDF to Image Basis Preparation Tutorial

Posted on by

Around here, using a MacBook Air under macOS, we have, as far as Image Editors going, predominantly … PaintBrush (for macOS) doing the bulk of the work … Gimp for specialized tasks … and … Preview (we last talked about with Preview Speech Bubble Overlay YouTube API Caller Making of Tutorial) generally taking over interfacing between PDF and image(s) … and it is “par for the course” today, here, describing a Preview talent turning a PDF containing a sequence of image and annotation data into a single zoomable (to reach everything) single image output, that can form the basis for an Image Map. This technique we’re describing for this was used to create … … as the example image we started with on our latest Image Map foray we started with Inhouse Image Map Creator Tutorial. Here are the steps we used to create this image, using macOS Preview … downloaded PDF to MacBook Air hard disk via email attachment functionalities … opened downloaded PDF via right click Open With -> Preview View -> Contact Sheet Click Scale Document Down (ie. Zoom Out) however many times as needed to see all the images fit within the screen view control-command-shift-3 open PaintBrush (for macOS) File -> New from Clipboard clip out any unnecessary bits (perhaps via a new rectangular selection and repeat the process) File -> Save As… upload to RJM Programming website Thanks to my sister’s great photography, enjoy! Did You Know? Are you facing the scenario where you have images of interest in a PDF but there are large parts of the content not images and not annotation (ie. not exactly like above)? Well, if you use an Apache/PHP local web server like MAMP you could read PDF to Images on AlmaLinux Primer Tutorial regarding getting some inhouse solutions going here. Previous relevant Preview Speech Bubble Overlay YouTube API Caller Making of Tutorial is shown below. Today we’re “making up” another angle to yesterday’s Making of YouTube API Caller Subsequent Post Winding Up For Now Tutorial. You’ll have noticed a lot of Speech Bubbles appearing in the image data of presentations lately. We make this happen via … do initial work without Speech Bubbles on macOS PaintBrush … ending with a PNG file … open that PNG file in macOS Preview … and … add in Speech Bubbles … with default gray background colour (we used macOS Digital Colour … Continue reading →

Posted in eLearning, GIMP, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Image Conversions via PHP GD Browsing Tutorial

Posted on by

As well as the recent Image Conversions via PHP GD URL Tutorial‘s input data modes of use … relative URLs (to the RJM Programming domain) … and we see why we may have left this like this … we wanted to allow for image file specifications … something quite involved (but might be contemplated in a reduced functionality sense into the future …) regarding the first of two new URL modus operandi additions to functionality, those being … absolute URL single image file … and … image data URI single image … and today we want to add … local image file browsing via the Javascript environment based File API … and as we got this new input mode functionality option going we widened the processing scope in the changed convert_wildcard.php‘s image conversion PHP web application to … offer video creation functionality when several browsed image files are selected … and/or … offer animated GIF creation functionality when several browsed image files are selected The allowance for multiple selection browsing helped out by the changed client_browsing.htm client side HTML and Javascript inhouse helper helped out here. Previous relevant Image Conversions via PHP GD URL Tutorial is shown below. The PHP inhouse Image Converter web application last talked about at Image Conversions via PHP GD Overlay Reveal Tutorial got a revisit today. It’s been more than two years, and that amount of separation sometimes gives you the chance to “go back to square one” and not be caught in amongst the “labyrinth of thought” as you get too far into complex optional logics you might apply to a web application project. And what stood out to us, on this revisit? It was the image input options that immediately stuck out to us, in that it used to be limited to … relative URLs (to the RJM Programming domain) … and we see why we may have left this like this … we wanted to allow for image file specifications … something quite involved (but might be contemplated in a reduced functionality sense into the future …) regarding the first of two new URL modus operandi additions to functionality, those being … absolute URL single image file … and … image data URI single image Of course, should the absolute URL web servers allow such access, this opens up whole new vistas of functionality possibility here. Both new URL modus operandi above … Continue reading →

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

Image Conversions via PHP GD URL Tutorial

Posted on by

The PHP inhouse Image Converter web application last talked about at Image Conversions via PHP GD Overlay Reveal Tutorial got a revisit today. It’s been more than two years, and that amount of separation sometimes gives you the chance to “go back to square one” and not be caught in amongst the “labyrinth of thought” as you get too far into complex optional logics you might apply to a web application project. And what stood out to us, on this revisit? It was the image input options that immediately stuck out to us, in that it used to be limited to … relative URLs (to the RJM Programming domain) … and we see why we may have left this like this … we wanted to allow for image file specifications … something quite involved (but might be contemplated in a reduced functionality sense into the future …) regarding the first of two new URL modus operandi additions to functionality, those being … absolute URL single image file … and … image data URI single image Of course, should the absolute URL web servers allow such access, this opens up whole new vistas of functionality possibility here. Both new URL modus operandi above used an HTML iframe (shown along with an HTML form referenced later, also) … <?php echo ” <iframe style=display:none; id=ifi name=ifi src=./convert_wildcard.php></iframe> <form method=POST action=’/convert_wildcard.php’ target=ifi style=display:none;> <input type=hidden name=absimg id=absimg value=”></input><input id=sabsi type=submit value=Submit style=display:none;></input></form> “; ?> … but in two interestingly different ways … well, you had to be there! absolute URL single image file <?php echo ” function lookforabsolute(ino) { if (ino.value.indexOf(‘data:’) == 0 && ino.value.indexOf(‘image/’) != -1) { document.getElementById(‘absimg’).value=ino.value; document.getElementById(‘sabsi’).click(); } else if (ino.value.indexOf(‘//’) != -1) { ino.title=ino.value; document.getElementById(‘ifi’).src=’./convert_wildcard.php?absimg=’ + encodeURIComponent(‘http://’ + ino.value.split(‘//’)[1]); } } “; ?> … meeting up with receiving PHP logic, skeletally … <?php $gabsimg=”; if (isset($_GET[‘absimg’])) { $gabsimg=$_GET[‘absimg’]; } if (isset($_POST[‘absimg’])) { // Perform necessary $_POST scenario populating of $gabsimg } if ($gabsimg != ”) { //isset($_GET[‘absimg’])) { // Perform necessary image URL processing here adjusting parent.document.getElementById(‘ispec’) in the process } ?> image data URI single image <?php echo ” function lookforabsolute(ino) { if (ino.value.indexOf(‘data:’) == 0 && ino.value.indexOf(‘image/’) != -1) { document.getElementById(‘absimg’).value=ino.value; document.getElementById(‘sabsi’).click(); } else if (ino.value.indexOf(‘//’) != -1) { ino.title=ino.value; document.getElementById(‘ifi’).src=’./convert_wildcard.php?absimg=’ + encodeURIComponent(‘http://’ + ino.value.split(‘//’)[1]); } } “; ?> … meeting up with receiving PHP logic, skeletally … <?php $gabsimg=”; if (isset($_GET[‘absimg’])) { // Perform necessary $_GET scenario … Continue reading →

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

Camera iOS App Delay Making Of Helper Tutorial

Posted on by

We try, here, to “mix it up” regarding “presentation ideas” (connected to the “Making Of” some WordPress Blog Postings around here) and recently, two tutorials, namely … Bluetooth iPad Keyboard and Case Document Editing Tutorial PDF to Images on AlmaLinux HTML and XML Tutorial … both using iOS Camera app “delayed photo” modes of use, got us realizing that two good uses of the iOS Camera app “delayed photo” mode of use could be regarding, respectively … Bluetooth iPad Keyboard and Case Document Editing Tutorial‘s animated GIF presentation showed how iOS Camera app “delayed photo” mode of use can help with iOS device based tutorials where the finger pointing contexts can help explain what is going on, better PDF to Images on AlmaLinux HTML and XML Tutorial‘s animated GIF presentation showed how iOS Camera app “delayed photo” mode of use can help with “arranged poses” for animal or pet photographs (where a couple of seconds before the photo is taken we might attract the attention of the animal) … further to Camera iOS App Delay Primer Tutorial‘s discussion of this “delayed photo” concept. You may also recall us using … bevelled edge (via Gimp) button displays, as discussed at Presenting a Procedural Button Click Tutorial speech bubbles (via macOS Preview) Preview PDF Annotation Bubbles Primer Tutorial … presentation helpers going along similar lines of thinking. Previous relevant Camera iOS App Delay Primer Tutorial is shown below. Maybe you are of the view that the taking of photos with a mobile device should not need a “posse” of people to achieve. We concur. Today, though, we were tempted to involve a small “posse” because … we had our hands (x2) full holding open a door lock outside its “casing” to show the drill hole and lock hole in the one photo using an iPhone 6’s Camera app … but wanted to show the screw I’d bought at the locksmith too big for the door drill hole at the top of the shot, and have everything in focus and close up … but I’d run out of hands! Call the mini “posse”? Organise a tripod or stand arrangement? Or use that partial clock face icon that represents a 3 second (and another represents a 10 second) delay, that the iOS Camera app provides to then have enough (of my own) hands to complete the task, ready to show to the locksmith for … Continue reading →

Posted in eLearning, GIMP, iOS, Photography, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Bookmark Exporting Filtering Sharing Tutorial

Posted on by

Yesterday’s Making of Ffmpeg Video Overall Effects Tutorial‘s “first draft” feel of our inhouse Bookmark Export Filtering web application showed just that. Yes, there was quite a lot to improve on, the way we saw it being … adding a (local system) file browsing means (called by our <iframe scrolling=no frameborder=0 id=cbi data-style=’border-top:1px solid black;border-bottom:1px solid black;border-left:2px solid yellow;border-right:1px solid yellow;’ style=’width:173px;height:228px;margin-top:-194px;’ src=’/HTMLCSS/client_browsing.htm?totype=html&d=189786754′></iframe> file browsing helper) … function yesthreethree(restis) { if (document.getElementById(‘bmkdata’)) { if (restis.indexOf(‘data:’) == 0) { if (restis.indexOf(‘;base64,’) != -1) { document.getElementById(‘bmkdata’).value=” + window.atob(restis.split(‘;base64,’)[1]); analyze(document.getElementById(‘bmkdata’)); //document.getElementById(‘bmkdata’).blur(); } else if (restis.indexOf(‘;utf8,’) != -1) { document.getElementById(‘bmkdata’).value=” + (restis.split(‘;utf8,’)[1]); analyze(document.getElementById(‘bmkdata’)); //document.getElementById(‘bmkdata’).blur(); } } else { document.getElementById(‘bmkdata’).value=restis; analyze(document.getElementById(‘bmkdata’)); //document.getElementById(‘bmkdata’).blur(); } } } … by which to add Web Browser Bookmark Exporting Data File Content into that lower HTML textarea element (and unlock the two UL/LI and Table button elements) … as well as … add a details/summary “reveal” means by which the user can show working actual HTML elements in addition to the HTML coding we’ve only be showing (with that “first draft”) add Sharing functionality via either Email or SMS conduits … and because the amounts of data can be large (and too big for a method=GET HTML form arrangement that clientside HTML/Javascript is capable of servicing) we were glad adding this Sharing functionality that yesterday we’d already started down the line of thinking that the … lower HTML textarea content … would always be associated with … hashtag … representation … because with these methodologies the web server restrictions on (address bar) URL lengths (ie. error 414) melt away, at least for data lengths we’ve encountered with our testing so far, and that applies also to … “mailto:” “a” URL links to Email a recipient … or … “sms:” “a” URL links to SMS a recipient … Sharing 📧 📟 … var mysubject=’My Bookmarked Links …’, xlocationhref=”; if ((” + location.hash).indexOf(‘bmkdata=’) != -1) { locationhash=location.hash; } function doemail() { if (document.getElementById(‘bmkdata’).value.trim() != ”) { locationhash=’#bmkdata=’ + window.btoa(encodeURIComponent(document.getElementById(‘bmkdata’).value)); mysubject=’My Bookmarked Links …’; if (document.getElementById(‘dtone’).value.trim() != ” && document.getElementById(‘dttwo’).value.trim() != ”) { mysubject=’My Bookmarked Links from ‘ + document.getElementById(‘dtone’).value.trim() + ‘ to ‘ + document.getElementById(‘dttwo’).value.trim() + ‘ … ‘; } else if (document.getElementById(‘dtone’).value.trim() != ”) { mysubject=’My Bookmarked Links from ‘ + document.getElementById(‘dtone’).value.trim() + ‘ … ‘; } else if (document.getElementById(‘dttwo’).value.trim() != ”) { mysubject=’My Bookmarked Links up until ‘ + document.getElementById(‘dttwo’).value.trim() + ‘ … ‘; } if (ulli && !utable) { … Continue reading →

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

Making of Ffmpeg Video Overall Effects Tutorial

Posted on by

At the end of yesterday’s Ffmpeg Video Overall Effects Tutorial there was an Unordered List … curves — ffmpeg examples Converts GIMP colour curve to something the FFmpeg can read in the curve filter · GitHub Top 20 best commands for FFmpeg Create video with 5 images with fadeIn/out effect in ffmpeg ffmpeg Color Correction: Gamma, Brightness and Saturation Accidentally applied an “incandescent light” video filter on a video I filmed on my Sony RX100. Is there any way to remove or reverse this effect on the video? More Cool FFmpeg Tricks Creating Retro Glow Effects with FFmpeg Is it possible to generate such effects purely with ffmpeg? Creating a retro glow effect with FFmpeg FFmpeg Filters Documentation … of links, am sure a lot of you would guess, were gleaned (within our Google Chrome web browser History (of that day)) Bookmarked (by us) webpages. We actually compiled via (the clunky and fairly slow) … left half (of screen) with (Google Chrome) History showing, and right half with BBEdit Text Editor open at a new (ostensibly empty) file with loads of empty records available, and dragged URL records (identifiable, for us, via an asterisk, indicating a webpage was Bookmarked) from the left into the right to bring over the URLs (only) above, the rest constructed in a more manual way … and another way could have been … use Google Chrome webpage showing Bookmark list and use its Export Bookmarks (no other choice but “All”) to a file that could be waded through to derive the list above … and then we thought of chance to code for … hybrid “inhouse” clientside (ie. HTML/Javascript/CSS) web application … … so far asking for the content of a web browser Export Bookmarks operation’s output file’s HTML (in the case of Google Chrome) content in an HTML textarea element (the user can fill in themselves), and filterable via two input type=datetime-local starting and ending datetime(s) of interest (the user can fill in, optionally) … and we wish we could have got that hour and a half back, from yesterday, via swapping yesterday for today?! Feel free to try our “first draft” proof of concept Dated Bookmark Export web application, yourself. Did you know? Not all web browser brands have any Export Bookmarks functionality, like Google Chrome offers here on macOS. We’re going to be examining others, over time, and try to make our … Continue reading →

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

Ffmpeg Video Overall Effects Tutorial

Posted on by

Today’s work (all on our macOS MAMP local Apache/PHP/MySQL web server environment) is only “toe dipping” in a “great big sea of possibilities” regarding the great ffmpeg‘s “filtering style abilities” further to yesterday’s Ffmpeg Video Subliminal Message Tutorial, but … as you try out things you discover others … can be a foot in the door researching this type of work yourself … … we’re hoping. And it’s not as if ffmpeg was on it’s own here with the second concept below … fade in and fade out video effect … inspired by Top 20 best commands for FFmpeg to try … ffmpeg -i brush__turkey.m4v -vf “fade=in:0:5,fade=out:73:5″ brushturkey_fadein_fadeout.m4v colour balancing improvements regarding an underexposed video … as the … Gimp image editor’s abilities (matching a lot of what you read Photoshop can help with too) with Curves helped out … along with … Python expertly designed to link Gimp and ffmpeg “whole of video” manipulations … enacting … selection of a video still image, ideally not containing the Brush Turkey … open image in Gimp “Aoife”‘esque Colours -> Curves… opens Adjust Colour Curves subwindow (initially a straight line) but dragging it to become a curve in a way that brightens the underexposed image to improve … we then … click + button to Save presets to a name … controlled by left pointing infilled triangle icon click that Manages Presets … and we ended up with … bush_-_turkey.presets … # GIMP ‘Curves’ settings (time 0) (linear no) (channel value) (curve (curve-type smooth) (points 6 0 0 0.29906542056074764 0.671875 1 1) (point-types 3 smooth smooth smooth) (n-samples 256) (samples 256 0 0.011253983826165687 0.022505445976972523 0.033751864777061671 0.044990718551074289 0.056219485623651519 0.067435644319434537 0.078636672963064466 0.089820049879182504 0.10098325339242978 0.11212376182744743 0.12323905350887664 0.1343266067613586 0.14538389990953438 0.15640841127804514 0.16739761919153215 0.17834900197463646 0.18926003795199928 0.20012820544826168 0.2109509827880649 0.22172584829605008 0.23245028029685835 0.24312175711513084 0.25373775707550877 0.26429575850263332 0.27479323972114555 0.28522767905568669 0.29559655483089792 0.3058973453714201 0.31612752900189489 0.32628458404696314 0.33636598883126595 0.34636922167944456 0.35629176091614018 0.36613108486599399 0.37588467185364693 0.38555000020374036 0.39512454824091547 0.40460579428981336 0.41399121667507488 0.42327829372134163 0.43246450375325451 0.44154732509545486 0.45052423607258363 0.45939271500928214 0.46815024023019147 0.47679429005995277 0.48532234282320724 0.49373187684459596 0.50202037044876013 0.51018530196034095 0.51822414970397945 0.52613439200431689 0.5339135071859944 0.54155897357365324 0.54906826949193444 0.55643887326547903 0.56366826321892849 0.57075391767692363 0.57769331496410592 0.58448393340511628 0.59112325132459598 0.59760874704718603 0.6039378988975278 0.61010818520026233 0.61611708428003087 0.62196207446147445 0.6276406340692342 0.6331502414279514 0.63848837486226717 0.64365251269682255 0.64864013325625902 0.65344871486521738 0.65807573584833889 0.66251867453026458 0.66677500923563593 0.671875 0.67577909704236094 0.67964838149075235 0.68348304920948966 0.68728329606288863 0.6910493179152648 0.69478131063093362 0.69847947007421129 0.70214399210941336 0.70577507260085492 0.70937290741285197 0.71293769240972005 0.71646962345577492 0.71996889641533213 0.72343570715270744 0.72687025153221607 0.73027272541817401 0.73364332467489723 0.73698224516670052 0.7402896827579003 0.74356583331281156 0.74681089269575052 0.75002505677103248 0.75320852140297312 0.75636148245588819 0.7594841357940928 0.76257667728190348 0.76563930278363512 0.76867220816360382 0.77167558928612512 0.77464964201551445 0.77759456221608758 0.78051054575216006 0.78339778848804753 0.78625648628806577 0.78908683501653032 0.79188903053775672 0.79466326871606108 0.7974097454157586 0.8001286565011646 0.80282019783659542 0.80548456528636625 0.80812195471479298 0.81073256198619115 0.81331658296487608 0.81587421351516398 0.81840564950137007 0.82091108678780988 0.82339072123879942 0.82584474871865443 0.82827336509169003 0.83067676622222231 0.83305514797456648 0.83540870621303842 0.8377376368019539 … Continue reading →

Posted in Animation, eLearning, GIMP, Photography, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Australian Geographical Quiz Scrolling Tutorial

Posted on by

We were a little gobsmacked revisiting the 2017 era Australian Geographical Quiz Context Tutorial quiz web application (and thanks to Australian Geographic website here) that looking through the code … arrrgggghhh … the string … .scroll … was missing. Why should it be there? Well, on a re-run through of how the Australian Geographical Quiz web application worked, we were asked to click on … Wilsons Promontory … which did not send us into a tizzy by itself. Oh no! We never panic?! Even without the apostrophe in Wilsons we handled that … no worries … we realize that could have been because two (or more) guys or gals or both called Wilson were standing together at just the right time and place (or sent there by Karen) when a “promontory” needed naming … no problems. No, what caused our “too fragile” web application diffs was the way we had to scroll down to that esteemed Victorian coastal location in our (temporarily, mind you) less esteemious web application. We got funny places mentioned as our nearest “place of click”, and it was then the “true horror” happened (ie. with our code scouring reveal) … no “false horror” around here … no … it was “true” all right … we’re here to tell you! Any obs! Okay?! The fix, you ask?! Glad you asked! Take a look at (where we also catered for mobile platforms better too) … function icheck(evt) { if (realclick) { var x,y; if (evt.touches) { if (evt.touches[0].pageX) { x = (eval(evt.touches[0].pageX + document.body.scrollLeft * 1) * 1); y = (eval(evt.touches[0].pageY + document.body.scrollTop * 1) * 1); } else { x = (eval(evt.touches[0].clientX + document.body.scrollLeft * 1) * 1); y = (eval(evt.touches[0].clientY + document.body.scrollTop * 1) * 1); } } else if (evt.clientX || evt.clientY) { x = (eval(evt.clientX + document.body.scrollLeft * 1) * 1); y = (eval(evt.clientY + document.body.scrollTop * 1) * 1); } else { x = (eval(evt.pageX + document.body.scrollLeft * 1) * 1); y = (eval(evt.pageY + document.body.scrollTop * 1) * 1); } var distco=((x – midcoords[placepick][0]) * (x – midcoords[placepick][0])) + ((y – midcoords[placepick][1]) * (y – midcoords[placepick][1])); var halfpoint=”; var davw=’ … you are very cold ‘; if (distco <= verywarm) { halfpoint=’0.5’; davw=” … you are very warm (and it’s possible there is an overlap, so you score the 0.5 choosing this with OK button) “; } else if (distco <= warm) … Continue reading →

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