Robert James Metcalfe Blog

Walking Trip …

Posted on February 23, 2013 by admin

Walking Trip

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

Posted in Photography, Trips | Tagged one image website, photography, trips | 34 Comments

Standing Order Hardcopy without Printer Scanning Tutorial

Posted on August 14, 2020 by admin

Standing Order Hardcopy without Printer Scanning Tutorial

Here’s our aim today …

We fill out a timesheet in its hardcopy form, for which our supply has reached one. Our recipient does not have to have “Original Document” resolution, but the timesheet, in digital form, must be readable, and of suitable printout resolution.
Our printer has no scanner.
But we have …
1) iPhone (with its Camera app and Mail app and, optionally, its Photos app)
2) MacBook Pro (with its Mail app and Preview app)
3) Brother HL-L2375DW (laser printer with no scanner, but can be set up (as) Wireless(ly connected) and can work with AirPrint (please refer to Mac AirPrint Wireless Printing Tutorial))

… and before we start, we want to point out that an iOS mobile app such as the “Genius Scan” one tried out at Genius Scan App PDF Email Tutorial could be an alternative to the solution we ended up with. But we are keen to explain a method “out of the (3) box(es)” of the three pieces lof equipment above.

And before we (try to re-)start we must explain that the discovery, at least for us, that AirPrint printouts were too dark could be catered with, by having an iOS image editor that can adjust Brightness and Contrast for images, could be another alternative as well. This alternative would not need the MacBook Pro piece of equipment, above, at all.

So, what did we do, where “up the garden path” bits will be over to the right …

Step Description	Optional “up the garden path” Bits That Happened For Us
Take the last hardcopy timesheet form and lie it down on evenly well lit spot on floor below and comfortable to photograph from above (could use a tripod system)
With iPhone Camera app position photo framing form close to completely within view
Still within iPhone Camera app touch photo just taken to reach Share functionality	Bit of a waste of time is to open the Photos app to get to Share functionality
Choose Mail option and email to myself	Choose Print option and select Brother HL-L2375DW (turned on, and set up for Wireless, and iPhone talks to it via AirPrint) buit we discovered the printouts to be too dark
On MacBook Pro in its Mail app we open the email with attachment that is the timesheet form photo and choose to Download this
Open the Downloaded image in Preview and choose Tools -> Adjust Colours… Brightness and Contrast and Sharpness to look clear as a hardcopy form to fill in with pen then use File -> Print… to print to the same Brother HL-L2375DW printer as hardcopy and then with the iPhone Camera app “photograph it” and email off to the recipient

… which you can view with today’s PDF presentation.

Previous relevant Genius Scan App PDF Email Tutorial is shown below.

Genius Scan App PDF Email Tutorial

The raw camera functionality on an iPad is amazing, but short of using stands or rigging up a tripod, its capabilities resolution wise for the scanning of filled out forms can be questionable. We’ve been wanting to do a bit of this recently, and found that the iPad’s Genius Scan (mobile) app we introduced at this blog with Genius Scan App Primer Tutorial (when using it to organize some recipes) could succeed (where raw iPad camera functionality couldn’t (at least for us)) …

get the qualities of photograph resolutions required to see “clearly enough” (the emailee complained about the resolution using native iPad Camera work only) filled out form data
could assemble into the one PDF several scans (meant to be together) in the one document … and then …
share that PDF document by, in our case, emailing it off, to an emailee (ie. recipient)

Cute, huh?!

Today’s PDF slideshow created back on a MacBook Pro’s Preview desktop application illustrates these basic steps (for a two page PDF email attachment) …

If not installed already install the iOS Genius Scan app onto an iPad (in our case, but should work on an iPhone too) via a search of the App Store app for “Genius” … then touch that icon on the iPad desktop to open “Genius Scan” (mobile) app
Touch Camera icon
When form (or other “subject” 1) lined up click the “Shutter” icon
Save to a New Document
Touch Camera icon
When form (or other “subject” 2) lined up click the “Shutter” icon
Save to a Existing Document
Touch that newest Existing Document to open it … so that we can …
Touch the Share icon down at the bottom right
In the Export window that opens up touch the Email icon … which opens a …
Email window with the usual To: CC:/BCC: Subject: Body: filled with the Genius Scan PDF as an email attachment … so we …
Fill out the relevant fields as above and touch the Send “button” up the top left … at which point we can …
Use the iPad’s Home button to bid farewell to the Genius Scan (mobile) app … and in our case open our iPad’s Mail app to view the email ourselves (because we sent it to ourselves)

Pretty efficient really?!

Previous relevant Genius Scan App Primer Tutorial is shown below.

Genius Scan App Primer Tutorial

When you come across a great mobile application it can be a great boon to your relationship with computer equipment. And if it links hardcoded material to the online world all the better. Do you remember when we talked about QR Codes with QR Codes Writer Primer Tutorial? Well, today, with our tutorial about the great iOS mobile application called Genius Scan (and you can just type “Genius” at the App Store application to find it) it feels a bit like the QR Code creation way a mobile device takes a photo of something that is then used to do something else. That “something else” today is that that photo, perhaps of some hardcoded material, can be turned into a PDF by the Genius Scan app and shared, in our case today, by email.

Around our house we used the Genius Scan app to photograph a loose collection of recipes, in poor condition, and centralise (via reprinting) them via …

If not installed already install the iOS Genius Scan app onto an iPad (in our case, but should work on an iPhone too) via a search of the App Store app for “Genius” …
Take photos of the loose collection of recipes and store them as PDFs on the iPad
Another user, meanwhile, has a USB memory stick ready using a MacBook Pro (and in our case we used the Finder application to two finger gesture in the root folder arrived at by clicking the USB Disk and two finger gesturing a New Folder called Recipes)
In batches, email (up to about 11, in our case, of) these off to an email address accessed by a user using a MacBook Pro, and we used a web browser session of Gmail for this
Click Download all Attachments to a zip file in the Downloads folder (of MacBook Pro)
Click the zip file creating a new folder within the Downloads folder
Click that new folder to open its contents
Click (ie. tap) top file
Two finger gesture to Copy all these as you click/tap last file
Click USB folder (and in our case we also click Recipes sub folder)
Two finger gesture Paste files to USB
Repeat from “In batches …” above until all done
Take the USB to Officeworks serve yourself document printing machine, in a similar way, but with photos that last time, that we visited good ol’ Officeworks when we presented Holiday Snaps Printing Primer Tutorial as shown below (and the other thing we’ve learnt since then is that they can recycle some of your old printers if you drop it off at their store)
We found it was too much trouble to do one printout per click for $1.00 Australian per sheet and instead got help from an Officeworks employee to put all the 121 files into a batch job at $0.80 cents per printout … voila …

A good result all round!

Previous relevant Holiday Snaps Printing Primer Tutorial is shown below

Holiday Snaps Printing Primer Tutorial

We had occasion to think about USB Memory Sticks the other day, perhaps a hardware device on the list of ones in danger of slipping away from relevance if we keep moving on in the mobile device and cloud storage direction.

The history of removable media started a long time ago even before the first Windows, back at DOS, and can remember some Wang 8 inch floppies. Back then it was a lot to do with a very finite amount of disk space reflecting when I.T. was more about “real word” processing, rather than, so much, graphical processing. Nowadays, with removable media, and the relatively modern … but for how long? … memory stick holding several gigabytes of media storage, usually, there are media formatting requirements now that have moved on from the default Windows media formatting supporting a File Allocation Table (FAT) file system.

We’ll get to what’s better to use regarding a USB memory stick media formatting arrangement later, but for now, what happens if you …

in Windows or DOS get to a formatting Window and choose to format a USB memory stick of 2gB capacity, for example in “MS-DOS (FAT)” format … or …
in Mac OS X Applications -> Utilities -> Disk Utility -> Selected USB memory stick of 2gB capacity -> Erase tab -> Format -> MS-DOS (FAT)

… well, respectively …

it will have been formatted to have the disk space of a 3 1/4 inch floppy, it looks like, and work on Windows and DOS and Mac OS X
it will have been formatted to have the disk space of a 3 1/4 inch floppy, it looks like, and work on Mac OS X and Windows and DOS

… which is okay but kind of wasteful, in the context of a removable USB 2gB memory stick we wanted to use to store about 320 holiday “snaps” and get printed out. We have these scenarios possible in a house half Mac OS X and half Windows.

So here’s the bit of the tutorial where we can’t help but advertise. Officeworks, with various branches here in Sydney, print 4″ x 6″ photo prints, satin or glossy, at 10 cents per photo. Pretty good, huh? And this can even be done Dragging and Dropping photos online, but up to 20mB, that is. Our 320 holiday “snaps” represented considerably more, and more than for any “MS-DOS (FAT)” file system arrangement, that would get taken for a Same Day do it yourself at a Windows personal computer, with your own USB memory stick arrangement.

So, what is the go to …

use the full capacity of the USB memory stick
be able to fit 320 photos onto the USB memory stick
for normal day to day use, be able to use it on any Mac OS X or Windows computer around the house
have a workable and readable USB memory stick to use at the Officeworks photo printing Do It Yourself Windows personal computers

… having seen unreadable USB memory sticks, at Officeworks Windows personal computers using “in Mac OS X Applications -> Utilities -> Disk Utility -> Selected USB memory stick of 2gB capacity -> Erase tab -> Format -> Mac OS Extended (Journaled)” formatting?

Well, I asked the Fat Controller … of course … what do you take me for? … and they said …

“ExFat” DotDotDot ~~man~~ person

… and, lo and behold … not having registered its existence before … there it was as an option achieving both as per …

in Windows or DOS get to a formatting Window and choose to format a USB memory stick of 2gB capacity, for example in “exFAT” format … or …
in Mac OS X Applications -> Utilities -> Disk Utility -> Selected USB memory stick of 2gB capacity -> Erase tab -> Format -> ExFAT

… resulting in, respectively …

it will have been formatted to have the disk space of its 2gB full capacity, it looks like, and work on Windows and DOS and Mac OS X
it will have been formatted to have the disk space of its 2gB full capacity, it looks like, and work on Mac OS X and Windows and DOS

So, a happy solution for some holiday “snap” printing, and the ongoing less wasteful use of a USB 2gB memory stick on Windows or Mac OS X, on computers around the house. We show some of these ideas with our tutorial picture today.

To read more about getting the photos to the MacBook Pro laptop from the Android phone, please read, below, the techniques from Android Disk to MacBook Pro Disk Tutorial.

Previous relevant Android Disk to MacBook Pro Disk Tutorial is shown below.

Android Disk to MacBook Pro Disk Tutorial

We love it here when we can tell you of something that works across the “big brands”, and what we mean by the two “big brands” today is Google (regarding their Android mobile phone operating system) and Apple (regarding their Mac OS X MacBook Pro laptop operating system). Today we transfer files from the Android mobile phone to our MacBook Pro laptop disk via …

(ubiquitous) white lead … called a Micro USB Connector … the same one we used for Android Studio Real Physical Device Tutorial as shown below
some great Mac OS X software we discovered at Android File Transfer

For Share ideas that involve your Android mobile phone and storing media on a local hard disk this could be a great alternative to other Share options for the MacBook Pro and some of the ideas we presented with Android Camera to Mac iPhoto Primer Tutorial.

Today’s tutorial picture shows you the setup for this functionality, and you’ll see the online advice for how you work the Mac OS X application for the Android File Transfer application.

Previous relevant Android Studio Real Physical Device Tutorial is shown below.

Android Studio Real Physical Device Tutorial

When creating Android apps with Android Studio IDE (or any other IDE, for that matter) it’s great to test the working of the app with various mobile phone and tablet emulators with AVD, and it’s even “greater” to extend that to testing on a real physical device.

Today, we’re going to work with …

MacBook Pro testing that latest Android app using an Android Studio IDE project which we talked about with Android Studio on Mac OS X Primer Tutorial regarding “ESL Ideas”
another (ubiquitous) white lead … called a Micro USB Connector … but not Muc, pleeeeease … decided against the puce one because it just didn’t go with the cushions … but we digress
Samsung GT-S5310B Android 4.1.2 mobile phone … and, today of all days the “4.1.2” is a bit significant … because we want to talk about ant builds … but we digress

The (ubiquitous) white lead goes from the MacBook Pro’s USB port to the “underbelly” of the Samsung GT-S5310B.

One thing to do at the “computer” Android Studio end of the lead is to adjust AndroidManifest.xml to show android:debuggable="true" now.

Now if you’re on Windows I’d have more to say about the “computer” end of the lead, and if that is you, and you’ve never tested on a real device, you’ll want to read this great Google Android Studio page.

Come to think of it, everybody who’s never tested on a real device should read Google Android Studio page. See the advice about Android 4.2 … note that … ie. if the Settings menu’s submenu Developer Options is all grayed out tap on Build number (via Settings->About device) seven times … and “twice on the pipe, if the answer is noooooooooo” … but we digress.

However, we have a mobile phone with Android 4.1.2 … and so … this search got me to this great advice … and the consequent turning on of the Settings->Developer Options “switch” to on meant … Bob’s your uncle, Fanny’s your aunt … Android Studio responded like a … like a … well … a very hot studio.

A “Run App” will default to hooking up to this connected physical device (the Samsung GT-S5310B) and run the resultant mobile app on that device.

Previous relevant Android Studio on Mac OS X Primer Tutorial is shown below.

Android Studio on Mac OS X Primer Tutorial

There are a lot of choices of IDE for creating mobile applications, and if you are a developer wanting to develop mobile apps for both Android and iOS platforms, you may be looking to try to set up an environment where all this can be achieved on the one piece of computer equipment.

We prefer to think in terms of two IDEs handling the two mobile app types of iOS, with Swift and/or Objective-C as the source language, and Android, with Java as the source language. We don’t mind there being two separate IDEs involved, but we find it amazing enough that they can both sit on the one MacBook Pro laptop without resorting to any Operating System disk partitions. With the Android app, using Mac OS X (MacBook Pro) we asked Google if it could be done, and came up with the marvellous Android Studio IDE as a possibility … yay!

iOS mobile apps get created via the Xcode IDE using Swift and/or Objective-C on a Mac OS X (MacBook Pro)
Android apps get created via the Android Studio IDE using Java on a Mac OS X (MacBook Pro)

Today’s tutorial, as with the WordPress 4.1.1’s Android Studio on Mac OS X Primer Tutorial, hones in on that second idea from the install of Android Studio (to a MacBook Pro) through to the “middle game” emulation of an Android app via Android Studio and AVD onto an HTC Nexus One.

Please don’t think this is the only approach … and please research PhoneGap (PhoneGap iOS Mobile Xcode Primer Tutorial) and jQuery Mobile (jQuery Mobile Primer Tutorial) and Embarcadero (Delphi Pascal++ Embarcadero XE6 Primer Tutorial) also, perhaps for an approach that uses other ways of looking at the issue.

In the context of all this, we see the Android app “end game” as involving the creation of an .apk file that can be uploaded to Google Play for public access.

Similarly to our associated Android Studio Google Play Ready Primer Tutorial as shown below, today, the concepts in the Android Studio project regarding the “middle game”, comparing it to the Eclipse IDE (Eclipse Android App Google Play Ready Primer Tutorial), for which huge help came from this great link … thanks … are, again, for our “ESL Ideas” Android mobile app (which “channels” our project, recently, started with HTML/Javascript Themed Supervision Primer Tutorial) of today …

Fragments – components of the Android UI … and setting of startup fragment of interest … fragment_weblayout.xml … fragments go some way to addressing that common issue for mobile developers that all the UI elements of a mobile application fit and would ideally be displayed with a tablet but it would be best to only conditionally display some when it comes to using a smaller format mobile device such as an Android mobile phone device
Main Java in MainActivity.java … similar to Eclipse
Layout in activity_main.xml … similar to Eclipse
WebView … similar to Eclipse … allows an Internet web component in your Android mobile app
Use of myWebView.getSettings().setJavaScriptEnabled(true); to allow Javascript functionality for the WebView
AndroidManifest.xml … INTERNET permission … similar to Eclipse … to Build->”Generate Signed APK…” for Google Play publishing you need the extra … android:debuggable="false" clause
Tools->Android->AVD Manager … emulator organization and emulator deployment help … remains the case that it is best to start the emulator all the way to the home page at the simulated device (right swipe unlocking any locks you get) … then run and attach your mobile app to this pre-established connection

You will be pleased to know that after the Android Studio install today, all is (still) well with Xcode on this Mac OS X (MacBook Pro) setup … we mostly like a happy ending … aaaaaaahhhhhhh!

Previous relevant Android Studio Google Play Ready Primer Tutorial is shown below.

Android Studio Google Play Ready Primer Tutorial

Yesterday, with Android Studio Tic Tac Toe Game Tutorial as shown below, we reacquainted ourselves with Android Studio as an alternative IDE to Eclipse (and there are others too) to use the Android SDK and Java to develop mobile apps for an Android mobile device and in our aforesaid mentioned “start game”, “middle game” and “end game” view of mobile development we focussed on the “middle game”.

Today, we extend the “middle game” discussion of yesterday, with tutorial functionality touching on the “end game” with respect to Android Studio creating an Android mobile app on Google Play.

Wonder if you were around when we created the Morse Code emailer … HTML Morse Code Primer Tutorial? Well, today, we turn that into an Android mobile application using Android Studio, and publish it to Google Play for general “consumption” by the public.

So what are some of the concepts in the Android Studio project regarding the “middle game”, for which huge help came from this great link … thanks …

Fragments – components of the Android UI … and setting of startup fragment of interest … fragments go some way to addressing that common issue for mobile developers that all the UI elements of a mobile application fit and would ideally be displayed with a tablet but it would be best to only conditionally display some when it comes to using a smaller format mobile device such as an Android mobile phone device
Layout in activity_main.xml … similar to Eclipse
WebView … similar to Eclipse … allows an Internet web component in your Android mobile app
Use of myWebView.getSettings().setJavaScriptEnabled(true); to allow Javascript functionality for the WebView
AndroidManifest.xml … INTERNET permission … similar to Eclipse … to Build->”Generate Signed APK…” for Google Play publishing you need the extra … android:debuggable="false" clause
Tools->Android->AVD Manager … emulator organization and emulator deployment help … remains the case that it is best to start the emulator all the way to the home page at the simulated device (right swipe unlocking any locks you get) … then run and attach your mobile app to this pre-established connection

Source code wise, of interest to the “middle game”, is …

Before leaving the “middle game” thoughts, sometimes you need to adjust the code of a WebView’s innards (especially) if you want to do away with any “Back” or “Forward” button mobile application functionality, because any escape from the WebView’s control is that mobile application being effectively lost for that session. As such, the Morse Code programming HTML source code became morsecode.html (… and how we got there morsecode.html …) and the method of creating the email was made to use a PHP piece of supervised code as per morsecode.php (with a live run non-mobile web page link) to cater for Android mobile WebView compatibility … and thanks to this useful link.

And what of the “end game”? … Would direct you to the imagery of today’s tutorial … a lot of it covers the same ground as the “Eclipse” corresponding scenario tutorial called Eclipse Android App Google Play Ready Primer Tutorial.

Just to challenge you with a “middle, end, start order” … have a look at some information regarding Android Studio mobile development and the “start game” … Android Studio Primer Tutorial.

Hope this is food for thought for your Android mobile development plans! See the results of the work today at Google Play.

Previous relevant Android Studio Tic Tac Toe Game Tutorial is shown below.

Android Studio Tic Tac Toe Game Tutorial

Wonder if you were around when we created Tic Tac Toe (or more like Noughts and Crosses, in Australia) using the HTML5 Canvas element and drag and drop methods (if you liked, or just plain box clicking, otherwise, which will be okay for mobile usage) … HTML/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial as shown below? Well, today, we turn that into an Android mobile application using Android Studio.

Android Studio is an alternative IDE to Eclipse (and there are others too) to use the Android SDK and Java to develop mobile apps for an Android mobile device and in our aforesaid mentioned “start game”, “middle game” and “end game” view of mobile development we are just showing you the “middle game” today, but if you were to follow through … fore!!!!!!!! … and not shank … and not hook (ie. narrrrrrr … chortle, chortle) … then we may end up at Google Play with a mobile app … by the way, we talk about the “end game” at Eclipse Android App Google Play Ready Primer Tutorial (Android Studio has all this functionality and capability too).

So what are some of the concepts in the Android Studio project, for which huge help came from this great link … thanks …

Fragments – components of the Android UI … and setting of startup fragment of interest … fragments go some way to addressing that common issue for mobile developers that all the UI elements of a mobile application fit and would ideally be displayed with a tablet but it would be best to only conditionally display some when it comes to using a smaller format mobile device such as an Android mobile phone device
Layout in activity_main.xml … similar to Eclipse
WebView … similar to Eclipse … allows an Internet web component in your Android mobile app
Use of myWebView.getSettings().setJavaScriptEnabled(true); to allow Javascript functionality for the WebView
AndroidManifest.xml … INTERNET permission … similar to Eclipse
Tools->Android->AVD Manager … emulator organization and emulator deployment help … remains the case that it is best to start the emulator all the way to the home page at the simulated device (right swipe unlocking any locks you get) … then run and attach your mobile app to this pre-established connection

Source code wise, of interest, is …

So that’s a bit about the mobile world, and so concerning the innards of that WebView …

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

In today’s tutorial we show some image Drag and Drop functionality that you can use with the Canvas HTML5 element where we create a Tic Tac Toe game webpage. We thank w3schools for the great advice at this link.

The Drag and Drop does not work well on tablets, but for own Tic Tac Toe game today we allow either a drag and drop approach, or a touch/click approach.

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Link to some downloadable HTML programming code … rename to tictactoe_chalkboard.html

You’ll notice heavy use of the Javascript Math.random() function.

We hope you enjoy this tutorial as a live run.

Should you find Tac Tac Toe (or even Noughts and Crosses) addictive you should see this … amazing!

Yes … you’ve reached the end … go first in each game and see if you can beat the computer!

Previous relevant HTML/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial is shown below.

HTML/Javascript Canvas Tic Tac Toe Game Drag and Drop Tutorial

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

The Drag and Drop does not work well on tablets, but for own Tic Tac Toe game today we allow either a drag and drop approach, or a touch/click approach.

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Link to some downloadable HTML programming code … rename to tictactoe_chalkboard.html

You’ll notice heavy use of the Javascript Math.random() function.

We hope you enjoy this tutorial as a live run.

Should you find Tac Tac Toe (or even Noughts and Crosses) addictive you should see this … amazing!

Yes … you’ve reached the end … go first in each game and see if you can beat the computer!

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

Posted in eLearning, Hardware, Not Categorised, Operating System, Tutorials | Tagged airprint, camera, hardcopy, iPhone, laser printer, Macbook Pro, photos, printer, standing order, tutorial | Leave a comment

Australian Medicare Rebates Banking Primer Tutorial

Posted on August 13, 2020 by admin

Australian Medicare Rebates Banking Primer Tutorial

Is Covid-19 a time for organizational matters? May…be? Is Covid-19 a time to better read “snail mail”? May…be?

In amongst our “snail mail” (ie. in the letter box) recently was a piece of mail addressed to me from the Australian Government. Perhaps I should read it? May…be?

… helpfully explaining that to start receiving Medicare rebates into a bank account, online, you need a link between …

a (here in Australia only) my.gov.au profile … and a …
Medicare service … via a …
link (and if one does not already exist, shape to create one) … and onto …
a completed Medicare service Bank(ing) Details section

So, what is my.gov.au? Or as we colloquially say in Australia, what is myGov? Let’s get it straight from ~~Phar Lap‘s~~horse’s mouth …

What is myGov?
A simple and secure way to access government online services.

That rings a bell! We’d done something similar for, here in Australia only, a link to the ATO (Australian Taxation Office) in a previous life (it feels like)!

my.gov.au sign in …
my.gov.au Medicare link setup …
my.gov.au Medicare link click …
my.gov.au Medicare link Bank(ing) Details update …
my.gov.au Medicare link there on any relogging in …

We publish this (PDF presentation) hoping it may help some readers.

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

Posted in Not Categorised | Tagged Australia, bank, banking details, covid-19, form, link, Mail, medicare, myGov, rebate, service, tutorial, website | Leave a comment

CSS Gradient Creations Popup Integration Tutorial

Posted on August 12, 2020 by admin

CSS Gradient Creations Popup Integration Tutorial

The work of yesterday’s CSS Gradient Creations Sharing Tutorial might cause you to query …

What can these gradient backgrounds be applied to?

So far, we’ve been thinking …

a sizeable webpage element … but it could also be …
body element (ie. document.body) of a webpage … or it could be a …
canvas element

… that last one being the focus of our integration … not the usual …

iframe integration of a child webpage with a parent webpage … but, rather, today …
popup integration of a child popup window webpage with a parent (window.opener) webpage

… where we put our recent “Gradient Creations” web application into that child popup window webpage role above and our Feedback web application (last talked about at Feedback Canvas Curve Annotations Tutorial) fills the parent (window.opener) webpage role above, with our integrations.

And the integration is two way …

the child popup window webpage can change the canvas background of the parent (window.opener) webpage … and also …
some textbox settings of the parent (window.opener) webpage are understood by (and thereby hence the functionality of) the child popup window webpage

… so it’s “win, win” today!

Quite a bit needed to change for all this to happen, as per …

child popup integrating and changed gradient_creations.htm (can be an independent live run link)
parent integrated with and changed feedback.htm live run link
helped out by changed external Javascript …
<img src='//www.rjmprogramming.com.au/MarkItUp/gradient.png' onclick=' dogradient(true); ' alt='Gradient Background' title='Gradient Background'></img>
… new HTML above helped out by new Javascript event function …
function dogradient(huht) { if (gradientwo) { if (!gradientwo.closed) { gradientwo.close(); } } gradientwo=window.open('./gradient_creations.htm','_blank','top=100,left=100,width=600,height=600'); }
… world.js

We’ll leave you with another tutorial image to show some integration possibilities, below …

Previous relevant CSS Gradient Creations Sharing Tutorial is shown below.

CSS Gradient Creations Sharing Tutorial

Turning a web application like yesterday’s CSS Gradient Creations Tutorial “Gradient Creations” one into a web application where you can share your discoveries is an exercise in both …

sharing and collaboration … as well as …
accountability

… opening up something that used to be just for private use only, to being one that is open to the rest of the online wooooorrrrllllddd.

As well as this new email and SMS sharing capability we add another contenteditable=true incursion into the mix as another selling product for our web application. Just quietly, perhaps you can use it as a “digital card” creator, as we offer to augment …

the table cell with a gradient background … with the idea that the user …
can write their wording (of say, a card) in the foreground of that same table cell

… and then allow the user to append a space to their Javascript prompt window answering of the emailee address to indicate to the web application that the email should just be that table cell content. On the way a collaboration phase is possible by tweaking the HTML …

xform.append('body',(document.body.outerHTML.split('</form>')[0] + '</form></body>').replace(/NONE\;/g, 'inline-block;').replace('<div ','<input type=text style=width:50%; ').replace('>background:', ' value="').replace('</div>', '"></input>').replace('"></textarea>', '">' + document.getElementById('tdlook').innerHTML.replace(/\<br\>/g,String.fromCharCode(10)) + '</textarea>'));

… to work with a form method=GET way for the emailee to adjust the gradient CSS to send off a return email (or one to a third party) in response to that first email. No collaboration here, but we also allow for SMS communications too.

Also, along the way, we allow for a colour to be defined by its name, if it makes the web application’s colour array list.

You can try our our changed gradient_creations.htm live run link, to see what we mean.

Previous relevant CSS Gradient Creations Tutorial is shown below.

CSS Gradient Creations Tutorial

The great CSS background “gradient” functionalities can come in four forms, those being …

linear gradient (and repeating linear gradient)
radial gradient (and repeating radial gradient)

… as a means to add background interest, even to the point where the background can have some (different) transparency (level) compared to the foreground, as per example CSS like …

<style> html::before { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('//www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg') repeat; } </style>

With tutorials like CSS Repeating Radial Gradients Primer Tutorial we allowed you to create some gradients, but we wanted a more detailed approach that was generic in its approach and left you with some CSS of use, which is often not the go with many other (albeit useful and inspiring) websites on the net.

There are a whole range of what you might call “directional” nuances you can apply to your gradients. There is opacity to allow for. There are “hard colour stops” you can apply. For linear gradients you can apply a variable angle. For radial gradients there are positional nuances that can be applied.

And then there are the colours. We are not sure of the limits, but we allow for up to eight colours. Enough to simulate the seven colours of the rainbow we go for with today’s tutorial picture arrangement whereby it tweaked with us that the HTML input type=color elements are all well and good but we needed to allow our CSS be editable by nesting into an HTML div contenteditable=true elements that can be tweaked for exact rgb or rgba colour definitions (thanks, Wikipedia), as we could look up for the purposes of displaying a rainbow coloured gradient background (we hope you like)!

Or see a repeating radial gradient example below …

So feel free to try our gradient_creations.html live run link, to see what we mean.

Previous relevant “CSS Gradient Creations Tutorial is shown below.

CSS Repeating Radial Gradients Primer Tutorial

Way back when with HTML/Javascript Canvas Rainbow Primer Tutorial we talked about CSS linear gradients and radial gradients in the one blog posting, but ever since then, it has so much more that linear gradients have been useful to us here at this blog.

Today, though, we turn a bit of attention to radial gradients, specifically repeated radial gradients.

We’ve got a simple web application to play around with them in terms of …

ellipse versus circle
coloured versus black and white
extent keyword (closest-corner, closest-side, farthest-corner, farthest-side)

Below is one example of the CSS …

.circlefarthest-corner { background: repeating-radial-gradient(circle farthest-corner, red, black 5%, blue 5%, green 10%); }

Feel free to play away at this live run that has this radial_gradients.html downloadable underlying HTML and CSS (and event logic Javascript that changes the HTML div element className property, to suit).

Previous relevant HTML/Javascript Canvas Rainbow Primer Tutorial is shown below.

HTML/Javascript Canvas Rainbow Primer Tutorial

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

In today’s tutorial we touch on a couple of the two dimensional Javascript functions to draw a rectangle or arc, but in the two dimensional context, canvas HTML elements can be used to draw text, lines, boxes and circles as well. We also touch on two functions to create a linear or radial gradient to the fillStyle and/or strokeStyle of your HTML element placed onto the canvas.

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Link to some downloadable HTML programming code … rename to canvasrainbow.html

Here is a new link to some downloadable HTML programming source code explaining changes made (from HTML/Javascript Canvas Primer Tutorial) here.

You’ll notice heavy use of the Javascript Math.random() function.

We hope you enjoy this tutorial as a rainbow coloured live run.

Yes … you’ve reached the end … have a top supportive rainbow coloured day!

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

Posted in Not Categorised | Tagged accountability, background, canvas, child, collaboration, contenteditable, CSS, email, gradient, HTML, integration, linear gradient, parent, popup, programming, radial gradient, repeated radial gradient, share, sharing, SMS, software integration, style, tutorial, window.open, window.opener | Leave a comment

CSS Gradient Creations Sharing Tutorial

Posted on August 11, 2020 by admin

CSS Gradient Creations Sharing Tutorial

Turning a web application like yesterday’s CSS Gradient Creations Tutorial “Gradient Creations” one into a web application where you can share your discoveries is an exercise in both …

sharing and collaboration … as well as …
accountability

… opening up something that used to be just for private use only, to being one that is open to the rest of the online wooooorrrrllllddd.

the table cell with a gradient background … with the idea that the user …
can write their wording (of say, a card) in the foreground of that same table cell

Also, along the way, we allow for a colour to be defined by its name, if it makes the web application’s colour array list.

You can try our our changed gradient_creations.htm live run link, to see what we mean.

Previous relevant CSS Gradient Creations Tutorial is shown below.

CSS Gradient Creations Tutorial

The great CSS background “gradient” functionalities can come in four forms, those being …

linear gradient (and repeating linear gradient)
radial gradient (and repeating radial gradient)

… as a means to add background interest, even to the point where the background can have some (different) transparency (level) compared to the foreground, as per example CSS like …

<style> html::before { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('//www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg') repeat; } </style>

Or see a repeating radial gradient example below …

So feel free to try our gradient_creations.html live run link, to see what we mean.

Previous relevant “CSS Gradient Creations Tutorial is shown below.

CSS Repeating Radial Gradients Primer Tutorial

Today, though, we turn a bit of attention to radial gradients, specifically repeated radial gradients.

We’ve got a simple web application to play around with them in terms of …

ellipse versus circle
coloured versus black and white
extent keyword (closest-corner, closest-side, farthest-corner, farthest-side)

Below is one example of the CSS …

.circlefarthest-corner { background: repeating-radial-gradient(circle farthest-corner, red, black 5%, blue 5%, green 10%); }

Previous relevant HTML/Javascript Canvas Rainbow Primer Tutorial is shown below.

HTML/Javascript Canvas Rainbow Primer Tutorial

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Link to some downloadable HTML programming code … rename to canvasrainbow.html

Here is a new link to some downloadable HTML programming source code explaining changes made (from HTML/Javascript Canvas Primer Tutorial) here.

You’ll notice heavy use of the Javascript Math.random() function.

We hope you enjoy this tutorial as a rainbow coloured live run.

Yes … you’ve reached the end … have a top supportive rainbow coloured day!

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

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged accountability, background, collaboration, contenteditable, CSS, email, gradient, HTML, linear gradient, programming, radial gradient, repeated radial gradient, share, sharing, SMS, style, tutorial | Leave a comment

CSS Gradient Creations Tutorial

Posted on August 10, 2020 by admin

CSS Gradient Creations Tutorial

The great CSS background “gradient” functionalities can come in four forms, those being …

linear gradient (and repeating linear gradient)
radial gradient (and repeating radial gradient)

… as a means to add background interest, even to the point where the background can have some (different) transparency (level) compared to the foreground, as per example CSS like …

<style> html::before { background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('//www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg') repeat; } </style>

Or see a repeating radial gradient example below …

repeating radial gradient

So feel free to try our gradient_creations.html live run link, to see what we mean.

Previous relevant “CSS Gradient Creations Tutorial is shown below.

CSS Repeating Radial Gradients Primer Tutorial

Today, though, we turn a bit of attention to radial gradients, specifically repeated radial gradients.

We’ve got a simple web application to play around with them in terms of …

ellipse versus circle
coloured versus black and white
extent keyword (closest-corner, closest-side, farthest-corner, farthest-side)

Below is one example of the CSS …

.circlefarthest-corner { background: repeating-radial-gradient(circle farthest-corner, red, black 5%, blue 5%, green 10%); }

Previous relevant HTML/Javascript Canvas Rainbow Primer Tutorial is shown below.

HTML/Javascript Canvas Rainbow Primer Tutorial

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.

You may want to read more at HTML Canvas Reference as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow.

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.

Link to some downloadable HTML programming code … rename to canvasrainbow.html

Here is a new link to some downloadable HTML programming source code explaining changes made (from HTML/Javascript Canvas Primer Tutorial) here.

You’ll notice heavy use of the Javascript Math.random() function.

We hope you enjoy this tutorial as a rainbow coloured live run.

Yes … you’ve reached the end … have a top supportive rainbow coloured day!

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

Posted in eLearning, Tutorials | Tagged background, contenteditable, CSS, gradient, HTML, linear gradient, programming, radial gradient, repeated radial gradient, style, tutorial | Leave a comment

Code Download Table Difference Functional Hover Tutorial

Posted on August 9, 2020 by admin

Code Download Table Multiple Row Email Hover Tutorial

Code Download Table Difference Functional Hover Tutorial

Is it worth adding “onmouseover” event logic onto yesterday’s Code Download Table Difference Functional Linking Tutorial? You bet it is! Just because “onmouseover” has no relevance to mobile platforms, so, obversely, developing software with version control systems is irrelevant to mobile platforms.

… a place for everything and everything in its place …

… we figure. But this is of relevance to the programmer. Sometimes, rather than cater for all the platforms, settling on a subset (of those platforms) can be apt because …

one of mobile or non-mobile subsets of platforms is irrelevant to the scenario … as for today … or …
you try to reinvent the wheel on the pretext that you are waiting for a particular web browser or platform to allow the functionality in, into the future … you could be waiting a while, with the complexity of app arrangements going on around the net these days

Anyway, back to the “onmouseover” event on non-mobile platforms … it was the case that this event was a favourite for the conduit towards Ajax (client) functionality. And thinking on what we do today to nuance our Code Differences PHP web application, we were thinking …

What would Ajax (like to) do?

… and we decided Ajax would really like to …

populate a “div” style=display:inline-block; element adjacent to the functional detail to inform about … but this was not possible … so, instead, we …
populate a popup window near to the functional detail to inform about

… for a non-mobile “hover” (ie. “onmouseover”) event.

Along the way we add some more hashtag navigations and set up more colour coding to the output of (the optional) “functional links” Code Difference reporting.

So take a look at our changed diff.php Code Differences helper applied to itself below …

Previous relevant Code Download Table Multiple Row Email Report Tutorial is shown below.

Code Download Table Multiple Row Email Report Tutorial

Before leaving yesterday’s Download and Copy or Move Code Download Table Tutorial extensions to our Code Download Table functionality …

add copy onto a download functionality to the Code Download Table … today, we …
add a Multiple Row selection basis for a personalized Email Report for the user

… as we saw that there was scope for this as a sharing mechanism for project discussions and ideas, we hope.

Today’s tutorial picture tries to show the steps to emailing off a report of interest to a user …

User clicks the “Allow Multiple Row Clicks” checkbox …
prefixask=prefixask.replace('</div>', '<div id=divawrc style=display:inline-block;> Allow Multiple Row Clicks <input onchange="domrows();" id=awrc style=inline-block; type=checkbox></input> <div id=dawrc style=display:inline-block;></div></div></div>');
… which causes …
“Report” button shows to its right …
function domrows() { document.getElementById('dawrc').innerHTML='<input style=inline-block; type=button onclick=treportdo(); value=Report></input>'; var trsis=document.getElementsByTagName('tr'); for (var itrsis=0; itrsis<trsis.length; itrsis++) { trsis[itrsis].onclick = function(e) { if (e.target.innerHTML != '') { var trs=document.getElementsByTagName('tr'); for (var itrs=0; itrs<trs.length; itrs++) { if (trs[itrs].outerHTML.indexOf(e.target.innerHTML) != -1) { trs[itrs].style.border='2px dotted red'; } } } }; } }
… and table row onclick logic is dynamically applied to those “tr” elements
User clicks somewhere within rows they are interested in seeing be included in a report (which is a snippet of the whole Code Download Table, perhaps to do with a project of interest, or a learning topic of interest)
User optionally clicks the “Report” button …
function treportdo() { var trsis=document.getElementsByTagName('tr'); webc='<html><head><script type="text/javascript"> function emailto(eto) { window.opener.parentemailto(eto); } function xemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","Code Download Table part"); zform.append("body",document.getElementById("mytable").outerHTML); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } } </script></head><body><table id=mytable></table><br><br><br><input onblur=emailto(this.value); placeholder="Email to" type=email></input></body></html>'; for (var itrsis=0; itrsis<trsis.length; itrsis++) { if (itrsis == 0) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } if (trsis[itrsis].outerHTML.indexOf('>') > trsis[itrsis].outerHTML.indexOf('border:')) { if (trsis[itrsis].outerHTML.indexOf('dotted') > trsis[itrsis].outerHTML.indexOf('border:')) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } } } var woois=window.open('','_blank','top=20,left=20,width=600,height=600'); woois.document.write(webc); }
… which causes a …
New popup window opens showing the relevant snippet of Code Download Table of interest to the user … including …
Textbox for an optional emailee entry that can be filled in … to …
Set off Ajax/FormData methodology means …
function parentemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","RJM Programming Code Download Table part"); zform.append("body", reltoabs('<table' + webc.split('</table>')[0].split('<table')[1] + '</table>')); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } }
… to send off an Inline HTML Email report to the emailee … including …
Links of email can be clicked to get back to source code and other links back at the RJM Programming domain web server

… in our changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link).

Previous relevant Download and Copy or Move Code Download Table Tutorial is shown below.

Download and Copy or Move Code Download Table Tutorial

After the “goings on” with the relatively recent PHP Blog Summary Fixed Title Events Tutorial we thought we were finished with “Code Download Table” functionality … but then …

… along came ~~Jones~~ yesterday’s Download and Copy or Move Server Tutorial …

… and … lo and behold … we saw a good use for the idea of …

download from “the net” to a Downloads folder on your computer or device … and more often than not …

you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

… and allowing for that second step above be programmatical with the most apt functionality that had ever passed our cotton pickin’ mind … our Code Download Table … wi’ all tho’ GETME’s!

But we don’t want to interfere too much with the Code Download Table “flow” here, so create up the top left 20 seconds worth of time (extendable by their actions) available to the user to create “download” attributes on all …

“a” links … with …

“href” attribute containing “GETME” …

but not “diff.php” … and …

“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

… plus no href attribute containing “?s=” either, for today’s purposes with a changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link) … via its new …

Previous relevant Download and Copy or Move Server Tutorial is shown below.

Download and Copy or Move Server Tutorial

Yesterday’s Download and Copy or Move Primer Tutorial was all about the “client side” of …

the “server” side web applications/pages … and …

a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

… and we’ve just “tweaked” (albeit, very importantly, in our books (… but the pamphlettes are still not playing ball)) to ensure no “file clobbering” takes place so that the Korn Shell now does …

suf="" isuf=-1 while [ -f "${dpath}/${brest}${suf}" ]; do ((isuf=isuf+1)) suf="_${isuf}" done if [ ! -z "$suf" ]; then echo "mv ${dpath}/${brest} ${dpath}/${brest}${suf} # `date`" >> download_to_place.out mv ${dpath}/${brest} ${dpath}/${brest}${suf} >> download_to_place.out 2>> download_to_place.err fi

… in download_copier.ksh download_copier.ksh Korn Shell scripting on our macOS operating system “client”.

But today is mainly about filling in the missing bits on the “server” side. This (need for a) “conduit” we referred to yesterday is because we accept no folder paths can be mentioned at the “server” end. Suppose, though, that the “non-pathed” filename we supply to an “a” link’s “download” attribute can be prefixed by a mildly mashed up version of that path we copy to from the Downloads folder of your “client” computer or device, as you perform a “download” via the clicking of an “a” link.

Well, at this blog we’d already started functionality to toggle the use or not of …

“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

Were you here, then, when we published WordPress Blog Download Mode Toggler Primer Tutorial (or were you indisposed again?!) There we established an “All Posts” menu “Toggle Download Mode from GETME” option piece of functionality to toggle between …

displaying of source code in a new webpage for GETME “a” links … versus …
use the changed PHP toggle_download.php in conjunction with a changed good ‘ol TwentyTen Theme header.php as below …
<?php
if (outs == null) { var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')).replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_'); for (idmjk=0; idmjk<admjk.length; idmjk++) { if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) { if (origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚫</span>"); if (aorig == admjk[idmjk].innerHTML) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚪</span>"); cafd++; } else { prestuffs = admjk[idmjk].href.split('/'); newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, ''); while (big.indexOf('-') != -1) { big = big.replace('-', ''); newaspare = newaspare.replace(big, ''); } big = '----------------------GETME'; stuffs = newaspare.split('/'); if (dnprefix != '') { admjk[idmjk].download = dnprefix + prestuffs[stuffs.length - 1]; } else { admjk[idmjk].download = dnprefix + stuffs[stuffs.length - 1]; } admjk[idmjk].title = "(Really download) " + admjk[idmjk].title + ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled'; admjk[idmjk].onmouseover = " getDownloadMode(); "; admjk[idmjk].onmouseout = " yehBut(); "; admjk[idmjk].ontouchstart = " getDownloadMode(); "; admjk[idmjk].ontouchend = " yehBut(); "; } } else if (admjk[idmjk].href.indexOf('GETME') != -1 && origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&')[0]); admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚫</option>" + selbitis + "</select></span>"); if (aorig == admjk[idmjk].innerHTML) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚪</option>" + selbitis + "</select></span>"); cafd++; } else if ((admjk[idmjk].innerHTML.indexOf('live run') != -1 || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1) && origcafd < 0) { //!cafd) { outs="//www.rjmprogramming.com.au/slideshow.html#tuts"; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=650,height=100'); } return false; \">✂</span>"); cafd++; } } }
?>
… to, depending on whether the user specifies in the “All Posts” toggling’s Javascript prompt window presented, specifies a new comma separated “client folder of interest to copy to” place (stored in window.localStorage), will …
1. download with the GETME to the Downloads folder and copy off to the specified folder of interest (backing up as necessary) … versus …
2. the default download mode downloads to the Downloads folder without the GETME parts

See these changes in action below, contextualizing “server” and “client” codes in the full picture of assisted Downloads (copied on to a folder of the user’s interest) …

Previous relevant Download and Copy or Move Primer Tutorial is shown below.

Download and Copy or Move Primer Tutorial

Downloading from “the net” (“server land”) to your computer or device (“client land”) is a big part of the online experience and the sharing of data over the world wide web. But have you ever wondered about the two step design of …

download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

… ? Why not allow the “server” side define where it can download to on the “client”? Well, that would be a security nightmare, allowing a highjacking of mission critical files on your computer or device. So, I get it, that is a “no no”. But could we have a controlled “arrangement” between …

the “server” side web applications/pages … and …
a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

… ? We think that sounds reasonable and so, today, we start our (two parts or more) mini-project (making step 2 above be considered to be programmatically handled, sometimes) designing a Korn Shell (“client” side) listener to suit our macOS “client” computer, executed as a background process via …

ksh download_copier.ksh &

But what is the conduit, if the “server” web applications/pages cannot define a destination folder other than the macOS Downloads folder for the user involved? Well, that is where we need either …

Korn Shell interactive input (via read command) … or …
additional argument … as per example …
ksh download_copier.ksh /Applications/MAMP/htdocs/ &
… if the folder to copy to is known ahead of time

… to define a “client land” folder to copy to (from the user’s Download folder (receiving the downloaded data).

That first Korn Shell read command interactive input was interesting to us for a command backgrounded via the “&” command suffix. But if stdin and stdout are not mentioned in the command you can answer this interactive input and then the processing the Korn Shell performs proceeds in the background. Exactly what we were hoping for, but weren’t sure that this was the case!

The picture is filled in better tomorrow as we discuss the conduit in more detail tomorrow.

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

Posted in Ajax, eLearning, Event-Driven Programming, Software, Tutorials | Tagged Ajax, attribute, background, blog, border, button, click, client, code, colour coding, command, command line, computer, copy, device, diff, difference, Document Root, double click, download, email, emoji, event, FormData, header.php, hover, inline html email, internet, Javascript, korn shell, localStorage, logic, Macbook Pro, macOS, MAMP, menu, onclick, onmouseover, page, PHP, prefix, programming, read, rename, report, row, server, table, tutorial, TwentyTen, TwentyTen theme, webpage, Wordpress | Leave a comment

Code Download Table Difference Functional Linking Tutorial

Posted on August 8, 2020 by admin

Code Download Table Difference Functional Linking Tutorial

Welcome to our “Code Differences Functionality Ball” (… or lack of interest, thereof)! We are gathered to congratulate the Code Difference functionality for a small nip and tuck in the powder room! In the green corner we have …

yesterday’s Code Download Table Multiple Row Email Report Tutorial new “double click” trick … in our changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link) … and in the puce corner we have …
the ever so studious 📖 (📖) new top header emoji button dancing pages for the blog you are viewing now

… both trying to help you out with PHP or Javascript (in particular) code function references, where able, linking these references to local hashtag places or external webpage references. Get function references and you are getting into programming, we figure, but in the early days of learning to program you look at other sources of code and wonder what is going on with a functional (or object oriented method) call. Well, we want to help.

You might want to “compare the pair” …

Includes functional links …

Does not include functional links …

… for our diff.php Code Difference functionality helper (of the “tuck and nip” variety) with the “star” new function …

As far as this WordPress blog’s TwentyTen theme’s good ol’ header.php goes a new HTML snippet …

<a style="cursor:pointer;text-decoration:none;font-size:36px;" onclick="diffphpfix(this);" title="Code Difference Functional Links">📖</a>

… is helped out by a new (PHP writes) Javascript function …

function diffphpfix(oais) { var adiffs=document.getElementsByTagName("a"); for (var iuyt=0; iuyt<adiffs.length; iuyt++) { if (('' + adiffs[iuyt].href).indexOf('diff.php?one=') != -1) { adiffs[iuyt].href=adiffs[iuyt].href.replace('?', '?linkit=y&'); } } oais.style.backgroundColor=lightgreen'; }

Previous relevant Code Download Table Multiple Row Email Report Tutorial is shown below.

Code Download Table Multiple Row Email Report Tutorial

Before leaving yesterday’s Download and Copy or Move Code Download Table Tutorial extensions to our Code Download Table functionality …

add copy onto a download functionality to the Code Download Table … today, we …
add a Multiple Row selection basis for a personalized Email Report for the user

… as we saw that there was scope for this as a sharing mechanism for project discussions and ideas, we hope.

Today’s tutorial picture tries to show the steps to emailing off a report of interest to a user …

User clicks the “Allow Multiple Row Clicks” checkbox …
prefixask=prefixask.replace('</div>', '<div id=divawrc style=display:inline-block;> Allow Multiple Row Clicks <input onchange="domrows();" id=awrc style=inline-block; type=checkbox></input> <div id=dawrc style=display:inline-block;></div></div></div>');
… which causes …
“Report” button shows to its right …
function domrows() { document.getElementById('dawrc').innerHTML='<input style=inline-block; type=button onclick=treportdo(); value=Report></input>'; var trsis=document.getElementsByTagName('tr'); for (var itrsis=0; itrsis<trsis.length; itrsis++) { trsis[itrsis].onclick = function(e) { if (e.target.innerHTML != '') { var trs=document.getElementsByTagName('tr'); for (var itrs=0; itrs<trs.length; itrs++) { if (trs[itrs].outerHTML.indexOf(e.target.innerHTML) != -1) { trs[itrs].style.border='2px dotted red'; } } } }; } }
… and table row onclick logic is dynamically applied to those “tr” elements
User clicks somewhere within rows they are interested in seeing be included in a report (which is a snippet of the whole Code Download Table, perhaps to do with a project of interest, or a learning topic of interest)
User optionally clicks the “Report” button …
function treportdo() { var trsis=document.getElementsByTagName('tr'); webc='<html><head><script type="text/javascript"> function emailto(eto) { window.opener.parentemailto(eto); } function xemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","Code Download Table part"); zform.append("body",document.getElementById("mytable").outerHTML); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } } </script></head><body><table id=mytable></table><br><br><br><input onblur=emailto(this.value); placeholder="Email to" type=email></input></body></html>'; for (var itrsis=0; itrsis<trsis.length; itrsis++) { if (itrsis == 0) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } if (trsis[itrsis].outerHTML.indexOf('>') > trsis[itrsis].outerHTML.indexOf('border:')) { if (trsis[itrsis].outerHTML.indexOf('dotted') > trsis[itrsis].outerHTML.indexOf('border:')) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } } } var woois=window.open('','_blank','top=20,left=20,width=600,height=600'); woois.document.write(webc); }
… which causes a …
New popup window opens showing the relevant snippet of Code Download Table of interest to the user … including …
Textbox for an optional emailee entry that can be filled in … to …
Set off Ajax/FormData methodology means …
function parentemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","RJM Programming Code Download Table part"); zform.append("body", reltoabs('<table' + webc.split('</table>')[0].split('<table')[1] + '</table>')); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } }
… to send off an Inline HTML Email report to the emailee … including …
Links of email can be clicked to get back to source code and other links back at the RJM Programming domain web server

… in our changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link).

Previous relevant Download and Copy or Move Code Download Table Tutorial is shown below.

Download and Copy or Move Code Download Table Tutorial

After the “goings on” with the relatively recent PHP Blog Summary Fixed Title Events Tutorial we thought we were finished with “Code Download Table” functionality … but then …

… along came ~~Jones~~ yesterday’s Download and Copy or Move Server Tutorial …

… and … lo and behold … we saw a good use for the idea of …

download from “the net” to a Downloads folder on your computer or device … and more often than not …

you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

“a” links … with …

“href” attribute containing “GETME” …

but not “diff.php” … and …

“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

Previous relevant Download and Copy or Move Server Tutorial is shown below.

Download and Copy or Move Server Tutorial

Yesterday’s Download and Copy or Move Primer Tutorial was all about the “client side” of …

the “server” side web applications/pages … and …

a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

… in download_copier.ksh download_copier.ksh Korn Shell scripting on our macOS operating system “client”.

Well, at this blog we’d already started functionality to toggle the use or not of …

“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

displaying of source code in a new webpage for GETME “a” links … versus …
use the changed PHP toggle_download.php in conjunction with a changed good ‘ol TwentyTen Theme header.php as below …
<?php
if (outs == null) { var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')).replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_'); for (idmjk=0; idmjk<admjk.length; idmjk++) { if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) { if (origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚫</span>"); if (aorig == admjk[idmjk].innerHTML) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚪</span>"); cafd++; } else { prestuffs = admjk[idmjk].href.split('/'); newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, ''); while (big.indexOf('-') != -1) { big = big.replace('-', ''); newaspare = newaspare.replace(big, ''); } big = '----------------------GETME'; stuffs = newaspare.split('/'); if (dnprefix != '') { admjk[idmjk].download = dnprefix + prestuffs[stuffs.length - 1]; } else { admjk[idmjk].download = dnprefix + stuffs[stuffs.length - 1]; } admjk[idmjk].title = "(Really download) " + admjk[idmjk].title + ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled'; admjk[idmjk].onmouseover = " getDownloadMode(); "; admjk[idmjk].onmouseout = " yehBut(); "; admjk[idmjk].ontouchstart = " getDownloadMode(); "; admjk[idmjk].ontouchend = " yehBut(); "; } } else if (admjk[idmjk].href.indexOf('GETME') != -1 && origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&')[0]); admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚫</option>" + selbitis + "</select></span>"); if (aorig == admjk[idmjk].innerHTML) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚪</option>" + selbitis + "</select></span>"); cafd++; } else if ((admjk[idmjk].innerHTML.indexOf('live run') != -1 || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1) && origcafd < 0) { //!cafd) { outs="//www.rjmprogramming.com.au/slideshow.html#tuts"; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=650,height=100'); } return false; \">✂</span>"); cafd++; } } }
?>
… to, depending on whether the user specifies in the “All Posts” toggling’s Javascript prompt window presented, specifies a new comma separated “client folder of interest to copy to” place (stored in window.localStorage), will …
1. download with the GETME to the Downloads folder and copy off to the specified folder of interest (backing up as necessary) … versus …
2. the default download mode downloads to the Downloads folder without the GETME parts

See these changes in action below, contextualizing “server” and “client” codes in the full picture of assisted Downloads (copied on to a folder of the user’s interest) …

Previous relevant Download and Copy or Move Primer Tutorial is shown below.

Download and Copy or Move Primer Tutorial

download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

the “server” side web applications/pages … and …
a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

ksh download_copier.ksh &

Korn Shell interactive input (via read command) … or …
additional argument … as per example …
ksh download_copier.ksh /Applications/MAMP/htdocs/ &
… if the folder to copy to is known ahead of time

… to define a “client land” folder to copy to (from the user’s Download folder (receiving the downloaded data).

The picture is filled in better tomorrow as we discuss the conduit in more detail tomorrow.

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

Posted in eLearning, Event-Driven Programming, Software, Tutorials | Tagged Ajax, attribute, background, blog, border, button, click, client, code, command, command line, computer, copy, device, diff, difference, Document Root, double click, download, email, emoji, event, FormData, header.php, inline html email, internet, Javascript, korn shell, localStorage, logic, Macbook Pro, macOS, MAMP, menu, onclick, page, PHP, prefix, programming, read, rename, report, row, server, table, tutorial, TwentyTen, TwentyTen theme, webpage, Wordpress | Leave a comment

Code Download Table Multiple Row Email Report Tutorial

Posted on August 7, 2020 by admin

Code Download Table Multiple Row Email Report Tutorial

Before leaving yesterday’s Download and Copy or Move Code Download Table Tutorial extensions to our Code Download Table functionality …

add copy onto a download functionality to the Code Download Table … today, we …
add a Multiple Row selection basis for a personalized Email Report for the user

… as we saw that there was scope for this as a sharing mechanism for project discussions and ideas, we hope.

Today’s tutorial picture tries to show the steps to emailing off a report of interest to a user …

User clicks the “Allow Multiple Row Clicks” checkbox …
prefixask=prefixask.replace('</div>', '<div id=divawrc style=display:inline-block;> Allow Multiple Row Clicks <input onchange="domrows();" id=awrc style=inline-block; type=checkbox></input> <div id=dawrc style=display:inline-block;></div></div></div>');
… which causes …
“Report” button shows to its right …
function domrows() { document.getElementById('dawrc').innerHTML='<input style=inline-block; type=button onclick=treportdo(); value=Report></input>'; var trsis=document.getElementsByTagName('tr'); for (var itrsis=0; itrsis<trsis.length; itrsis++) { trsis[itrsis].onclick = function(e) { if (e.target.innerHTML != '') { var trs=document.getElementsByTagName('tr'); for (var itrs=0; itrs<trs.length; itrs++) { if (trs[itrs].outerHTML.indexOf(e.target.innerHTML) != -1) { trs[itrs].style.border='2px dotted red'; } } } }; } }
… and table row onclick logic is dynamically applied to those “tr” elements
User clicks somewhere within rows they are interested in seeing be included in a report (which is a snippet of the whole Code Download Table, perhaps to do with a project of interest, or a learning topic of interest)
User optionally clicks the “Report” button …
function treportdo() { var trsis=document.getElementsByTagName('tr'); webc='<html><head><script type="text/javascript"> function emailto(eto) { window.opener.parentemailto(eto); } function xemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","Code Download Table part"); zform.append("body",document.getElementById("mytable").outerHTML); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } } </script></head><body><table id=mytable></table><br><br><br><input onblur=emailto(this.value); placeholder="Email to" type=email></input></body></html>'; for (var itrsis=0; itrsis<trsis.length; itrsis++) { if (itrsis == 0) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } if (trsis[itrsis].outerHTML.indexOf('>') > trsis[itrsis].outerHTML.indexOf('border:')) { if (trsis[itrsis].outerHTML.indexOf('dotted') > trsis[itrsis].outerHTML.indexOf('border:')) { webc=webc.replace('</table>', trsis[itrsis].outerHTML + '</table>'); } } } var woois=window.open('','_blank','top=20,left=20,width=600,height=600'); woois.document.write(webc); }
… which causes a …
New popup window opens showing the relevant snippet of Code Download Table of interest to the user … including …
Textbox for an optional emailee entry that can be filled in … to …
Set off Ajax/FormData methodology means …
function parentemailto(eto) { if (eto.indexOf("@") != -1) { var zhr=new XMLHttpRequest(); var zform=new FormData(); zform.append("inline",""); zform.append("to",eto); zform.append("subj","RJM Programming Code Download Table part"); zform.append("body", reltoabs('<table' + webc.split('</table>')[0].split('<table')[1] + '</table>')); zhr.open("post", "//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php", true); zhr.send(zform); alert("Email sent to " + eto); } }
… to send off an Inline HTML Email report to the emailee … including …
Links of email can be clicked to get back to source code and other links back at the RJM Programming domain web server

… in our changed getmelist.js external Javascript code file (that you can try out for yourself at this live run link).

Previous relevant Download and Copy or Move Code Download Table Tutorial is shown below.

Download and Copy or Move Code Download Table Tutorial

After the “goings on” with the relatively recent PHP Blog Summary Fixed Title Events Tutorial we thought we were finished with “Code Download Table” functionality … but then …

… along came ~~Jones~~ yesterday’s Download and Copy or Move Server Tutorial …

… and … lo and behold … we saw a good use for the idea of …

download from “the net” to a Downloads folder on your computer or device … and more often than not …

you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

“a” links … with …

“href” attribute containing “GETME” …

but not “diff.php” … and …

“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

Previous relevant Download and Copy or Move Server Tutorial is shown below.

Download and Copy or Move Server Tutorial

Yesterday’s Download and Copy or Move Primer Tutorial was all about the “client side” of …

the “server” side web applications/pages … and …

a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

… in download_copier.ksh download_copier.ksh Korn Shell scripting on our macOS operating system “client”.

Well, at this blog we’d already started functionality to toggle the use or not of …

“a” links … with …
“href” attribute containing “GETME” …
but not “diff.php” … and …
“download” attribute (the attribute necessary to “download” rather than our default displaying of source code in a new webpage)

displaying of source code in a new webpage for GETME “a” links … versus …
use the changed PHP toggle_download.php in conjunction with a changed good ‘ol TwentyTen Theme header.php as below …
<?php
if (outs == null) { var dnprefix=decodeURIComponent(('' + localStorage.getItem('download_copy_to_folder')).replace(/^null$/g,'')).replace(/\+/g,' ').replace(/\\\\/g, '_').replace(/\//g, '_').replace(/\:/g, '_'); for (idmjk=0; idmjk<admjk.length; idmjk++) { if (admjk[idmjk].href.indexOf('GETME') != -1 && admjk[idmjk].href.indexOf('diff.php') == -1) { if (origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚫</span>"); if (aorig == admjk[idmjk].innerHTML) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \">⚪</span>"); cafd++; } else { prestuffs = admjk[idmjk].href.split('/'); newaspare = admjk[idmjk].href.replace('_-GETME', '').replace('__GETME', '').replace('_GETME', '').replace(big, ''); while (big.indexOf('-') != -1) { big = big.replace('-', ''); newaspare = newaspare.replace(big, ''); } big = '----------------------GETME'; stuffs = newaspare.split('/'); if (dnprefix != '') { admjk[idmjk].download = dnprefix + prestuffs[stuffs.length - 1]; } else { admjk[idmjk].download = dnprefix + stuffs[stuffs.length - 1]; } admjk[idmjk].title = "(Really download) " + admjk[idmjk].title + ' ... welcome to the long hover functionality that shows allows for a Download Mode for the blog that can be toggled'; admjk[idmjk].onmouseover = " getDownloadMode(); "; admjk[idmjk].onmouseout = " yehBut(); "; admjk[idmjk].ontouchstart = " getDownloadMode(); "; admjk[idmjk].ontouchend = " yehBut(); "; } } else if (admjk[idmjk].href.indexOf('GETME') != -1 && origcafd < 0) { //!cafd) { xp=admjk[idmjk].href.split("GETME"); prexp=xp[0].split("/"); postprexp=prexp[-1 + prexp.length].split("."); extis = postprexp[-1 + postprexp.length].replace(/_/g,"").replace(/-/g,"").replace(/GETME/g,""); outs="//www.rjmprogramming.com.au/getmelist.htm?topoff=150&tsp=" + (Math.floor(Math.random() * 1999900) + 100) + "#" + postprexp[0] + "." + postprexp[-1 + postprexp.length].replace(extis,"").replace(extis,"").replace(extis,"") + "GETME" + extis; aorig=admjk[idmjk].innerHTML; selbitis=allthecombos((admjk[idmjk].href + '=').split('=')[1].split('&')[0]); admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(".","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚫</option>" + selbitis + "</select></span>"); if (aorig == admjk[idmjk].innerHTML) admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Code Download Table\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=500,height=500'); } return false; \"><select onchange=\" if (this.value.length > 0) { window.open(this.value,'_blank'); } return false; \" style='margin-bottom:0px;width:40px;' id='sel" + cafd + "'><option value=>⚪</option>" + selbitis + "</select></span>"); cafd++; } else if ((admjk[idmjk].innerHTML.indexOf('live run') != -1 || admjk[idmjk].title.toLowerCase().indexOf('click picture') != -1) && origcafd < 0) { //!cafd) { outs="//www.rjmprogramming.com.au/slideshow.html#tuts"; admjk[idmjk].innerHTML=admjk[idmjk].innerHTML.replace(" ","<span data-alt='" + outs + "' id='spn" + cafd + "' title=\" + Cut to the Chase ... see the blog post list related to live runs and slideshows ... ie. the main point of the blog posting\" onclick=\"if (cafd == cafd) { cafd=" + cafd + "; changeasfordownload(); } else { window.open('" + outs + "','_blank','top=100,left=100,width=650,height=100'); } return false; \">✂</span>"); cafd++; } } }
?>
… to, depending on whether the user specifies in the “All Posts” toggling’s Javascript prompt window presented, specifies a new comma separated “client folder of interest to copy to” place (stored in window.localStorage), will …
1. download with the GETME to the Downloads folder and copy off to the specified folder of interest (backing up as necessary) … versus …
2. the default download mode downloads to the Downloads folder without the GETME parts

See these changes in action below, contextualizing “server” and “client” codes in the full picture of assisted Downloads (copied on to a folder of the user’s interest) …

Previous relevant Download and Copy or Move Primer Tutorial is shown below.

Download and Copy or Move Primer Tutorial

download from “the net” to a Downloads folder on your computer or device … and more often than not …
you, the user, copies or renames this data to another location on your computer or device with command line or with operating system GUI

the “server” side web applications/pages … and …
a “client” side listener (like we talked about with Korn Shell listeners with Pandoc Document Conversion Email Tutorial)

ksh download_copier.ksh &

Korn Shell interactive input (via read command) … or …
additional argument … as per example …
ksh download_copier.ksh /Applications/MAMP/htdocs/ &
… if the folder to copy to is known ahead of time

… to define a “client land” folder to copy to (from the user’s Download folder (receiving the downloaded data).

The picture is filled in better tomorrow as we discuss the conduit in more detail tomorrow.

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

Posted in Ajax, eLearning, Event-Driven Programming, Software, Tutorials | Tagged Ajax, attribute, background, blog, border, click, client, code, command, command line, computer, copy, device, Document Root, download, email, event, FormData, header.php, inline html email, internet, Javascript, korn shell, localStorage, logic, Macbook Pro, macOS, MAMP, menu, onclick, page, PHP, prefix, programming, read, rename, report, row, server, table, tutorial, TwentyTen, TwentyTen theme, webpage, Wordpress | 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
August 2020

S M T W T F S

« Jul

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
Meta
Tags
Ajax animation array blog canvas command line CSS div DOM dropdown email emoji event form game games geographicals Google Google chart HTML HTML5 IFRAME image iOS iPad Javascript Linux Mac OS X MAMP map mathematics mobile onclick overlay PHP programming share sharing table tutorial url video web server Windows Wordpress
Your Background Image
OnTopList

Walking Trip …

Standing Order Hardcopy without Printer Scanning Tutorial

Australian Medicare Rebates Banking Primer Tutorial

CSS Gradient Creations Tutorial

Code Download Table Difference Functional Hover Tutorial

Code Download Table Difference Functional Linking Tutorial

Code Download Table Multiple Row Email Report Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Recent Comments

August 2020
S	M	T	W	T	F	S
« Jul
						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

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList