Following up on yesterdayโs Signature Signature Supervisor Timesheet Cross Domain Tutorial as shown below, weโve made progress on two big ideas today, those being โฆ
- better integration to the User of Signature Signature grandparent level by the overlaid Signature Signature โnuclear familyโ level
- Standing Orders
โฆ and believe it or not the main improver of integration with the first of those above was to introduce some transparency to the overlaid iframe containing the Signature Signature โnuclear familyโ level web application, so that we can see through to the grandparent level supervisor to position the signature. Other than that, reposition the button to Save the signature with our PHP, and that integrates into the User of Signature Signature much better now.
The latter, weโve decided, needed to access the PHP ability to store data within PHP code, extending what is stored there from โฆ
- a signatureโs signature (set of co-ordinates) โฆ to, plus now โฆ
- a Standing Order and its associated Background Image URL โฆ with one or more sets of โฆ
- Sequential Text
- Font size and colour and rotation in degrees
- Centre Left (x,y) co-ordinate set for start of sequence and Centre Left (x,y) co-ordinate set for end of sequence
The way into associating a Background Canvas Image URL or a Background Image Canvas URL with future Standing Order usage is as simple as, when entering in that URL you append it with a space character, and then the grandparent supervising web application, via its โnuclear familyโ external Javascript logic, will collect Sequential Text definitions on that first occasion to set up Standing Orders for the next time you use that same Background Canvas Image URL or a Background Image Canvas URL in the future. This Standing Order idea can increase your form filling consistency and speed of filling out.
Weโll keep you posted about further work in that area but for now, we continue on with the recent pattern of not needing to change the grandparent supervisor but changing the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs which changed quite a lot regarding Signature Integration and Standing Orders today as per thislink and this liverun link. The additional Standing Order data storage PHP arrangements for signature_signaturephp changed in thisway today.
Previous relevant Signature Signature Supervisor Timesheet Cross Domain Tutorial is shown below.
Following up on yesterdayโs Signature Signature Supervisor Timesheet RegExp Tutorial weโve come to the point where we need to talk about HTML(5) canvas (associated with image) content sharing and cross domain issues (the symptom being, within a Web Inspector, seeing the error messages containing โฆ
Tainted canvases may not be exported
โฆ because we are heading towards some โStanding Orderโ thoughts regarding filling in Timesheets with the User of Signature Signature web application we are currently undertaking.
What do we mean by โStanding Orderโ here? We see it as simplifying and speeding up repetitive (but few things different) user input interaction tasks, that are repeated, but the procedure results are similar โฆ think, Timesheets. We donโt get all the way there, today, with our tutorial today, because โCross-domainโ needs to be thought about first โฆ so โฆ
What is the โCross-domainโ issue using HTML(5) canvas (associated with image) content sharing? The web browsers, wisely, cut off the canvas.toDataUrl() function workings when content came into the User of Signature Signature (Timesheet) web application from a different domain.
We came across this issue with a User of Signature Signature (Timesheet) procedural usage thought we had. We have a two-way recommendation for its โStanding Orderโ Timesheet usage, both involving the use of a new web address URL ($_GET[]) argument approach for ?url=[imageURLforTimesheetImage] (new) usage. Either โฆ
- install a local web server like MAMP (as required) and point ?url=[imageURLforTimesheetImage] at, for example, a MAMP image URL like ?url=//localhost:8888/OurMAMPTimesheet.jpg (for which there will be cross-domain issues) โฆ or โฆ
- install a local web server like MAMP (as required) and run your Signature Signature (Timesheet) web application at a MAMP web address URL like //localhost:8888/user_of_signature_signature.html?url=[imageURLforTimesheetImage] (for which there will be no cross-domain issues)
We concentrate with what follows today on the former of those, because we do not see it as the end of the world if our canvas.toDataURL()โs fail because of cross-domain issues, but it is a little sad โฆ boo hoo. Here are some topics you might want to study to circumvent what we are going to suggest below regarding usage, should you see its recommendations as too awkward. They are for you to study โฆ
- HTTP access control (CORS)
- Ajax XMLHttpRequest and PHP may be a solution you can think about
- window.postMessage is interesting and weโve talked about it at this blog too
All that being as it is though, what can we do if suddenly canvas.toDataURL() becomes unavailable as a piece of sharing functionality when dealing with HTML(5) canvas elements? Look no further than way back at the Primer tutorial of this blog posting thread, called Signature Signature Primer Tutorial with the YouTube video (back before the โUser of โ prefix thoughts) โฆ
โฆ showing us using native web browser right-click or two finger gesture over the canvas methodologies. They are still available to us, and where when we come across cross-browser issues โฆ
- sadly, the Undo and Redo functionalities become unavailable โฆ no way around that โฆ but their loss can help us know when to โฆ
- with the Download button, when there is a cross-domain issue, we stop the user and suggest using the web browser right-click or two finger gesture Copy as an alternative .. and โฆ
- with Email and Postcard button functionalities we need to stop the user and suggest using the web browser right-click or two finger gesture Copy as an alternative to being able to Paste this copied canvas element data into the client email application creation of an email โฆ the upside here being that the email will be sent by you with these new arrangements regarding cross-domain issues
Oh, and before we forget, the advice from here was interesting regarding the โฆ
var img = new Image();
img.setAttribute(โcrossOriginโ, โanonymousโ);
img.src = url;
โฆ thanks โฆ but for our case we didnโt go down this route because we were stopped loading anything into the HTML(5) canvas using this technique even before having canvas.toDataURL() being kapput.
In the past, weโve also used Javascript window.open ideas awaiting user Copy interventions via web browser functionalities, and that is another idea here.
So there you go for cross-domain issue discussion, and back to preparation for โStanding Orderโ help โUser of Signature Signatureโ Timesheet web application usage, and where all this fits in. We think we can help out the user with shortcuts regarding almost repeatable procedures, but we need to automate off either/both of โฆ
- web browser address bar ($_GET[]) arguments โฆ and/or โฆ
- HTTP cookie usage
โฆ the โautomationโ back to the user of a previous Timesheet procedural sequence of โSequential Textsโ where that ?url=[imageURLforTimesheetImage] basis for a canvas Background Image will be the identifier to determine a โStanding Orderโ scenario that might be of interest to the user, to follow up on that and save lots of time and angst, perhaps. Weโll get back to you with more โStanding Orderโ thoughts after todayโs ?url=[imageURLforTimesheetImage] cross-domain issue โheads upโ. Of course, there is no โheads upโ required if you can keep Timesheet background images on the same domain as your User of Signature Signature web application location.
What needed to change with our User of Signature Signature project to achieve this Form Filling โStanding Orderโ Background Image at load helping functionality? Only the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs changed a bit as per thisway toady, as for WordPress 4.1.1โs Signature Signature Supervisor Timesheet Cross Domain Tutorial.
Previous relevant Signature Signature Supervisor Timesheet RegExp Tutorial is shown below.
You know Thomas Edisonโs adage โฆ
Genius is one percent inspiration, ninety nine percent perspiration.
? The same sort of thinking often applies to programming. You get a one percent code content of great satisfaction and achievement, but to get to use it takes ninety nine percent of the slog work to โget to use itโ shall we say.
Sometimes that โone percent code content of great satisfactionโ comes from your own thought patterns and often it is good to โฆ Goooooooggggggggllllllllleeeee โฆ and today is an example of the latter, with our User of Signature Signature web application, for the โweโre tickled pinkโ line of code (and thereโs a โtwinโ that follows it in the code) โฆ
var numbers1 = ainxto[0].match(/\d+/g);
โฆ weโd like to thank https://stackoverflow.com/questions/16096467/how-to-extract-array-of-numbers-from-string-in-javascript today.
This is RegExp (Regular Expression) functionality โslicing throughโ programming complexity. What is it doing? Itโs extracting an array of numbers embedded within a string so that if our Javascript string variable inxto is โฆ
27/05/17 to 31/05/17
โฆ and weโve already gone โฆ
ainxto=inxto.split(' to ');
โฆ ahead of the code above, and follow it by its โtwinโ code line, on hearing (the bells, the bells) that ainxto.length is 2 โฆ
var numbers2 = ainxto[1].match(/\d+/g);
โฆ then we have got the wherewithall to fill in all the date values between 27/05/17 and 31/05/17, given our stipulation, so far, that you can only increment or decrement by one, text content wise. Position (on canvas wise), that is up to the user making two clicks/touches at the start of the Sequential Text series and at the end. Proportional geometry helps with the co-ordinates in between, assuming you are using a symmetrical (timesheet, perhaps) form.
To get the lead up to this in context, start reading Signature Signature Supervisor Timesheet Tutorial as shown below.
What needed to change with our User of Signature Signature project to achieve this Form Filling helping functionality? Just the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs changed quite a bit (mainly slogging) as per thisway, and youโll want to see some action on this ahead of time with our tutorial picture.
Previous relevant Signature Signature Supervisor Timesheet Tutorial is shown below.
We get practical today thinking about usages for a User of Signature Signature style of web application, and the practical thought we first had was for a Timesheet web application. As much as anything, because Timesheets involve, usually โฆ
- signature(s)
- a hardcopy form โฆ for us represents a background image to our HTML(5) canvas element โฆ and on a mobile device with the Background Image Canvas Camera option that background image can be created there and then executing the web application, and taking a photograph of the hardcopy on the fly, perhaps
- text inserted interactively by the user into fields, perhaps rotated, depending on landscape versus portrait orientation
But before getting ahead of ourselves โฆ boy do we run funny โฆ thereโs a piece of functionality additional to what we have been building over quite a few days now. Can you guess what that would be? Yep, we want to have an Undo (and Redo) canvas drawing (elements) piece of functionality, because, as you would know filling out forms, isnโt that the time you seem to most make mistakes. Well, at least online, you can โdigitallyโ rub out easier than if you have made a mistake in ink.
We also facilitate the user being able to control any email subject lines.
And so we show you a tutorial picture today to show you what we mean, as a starting point. Starting point, because there is more specialized timesheet functionality that we can think of that will be useful, for some tutorials to come.
Todayโs work, like some others recently has called upon the external Javascript at the nuclear family level to contain the Javascript code called and referenced by the grandparent (which was written out by the external Javascript nuclear family code). Just how do you go about that for a Javascript function like โฆ
function rezero() {
jsclickno=0;
}
? Well, below in the external Javascript (at the nuclear family level) we see (in a pared down form) how it populates the grandparent level supervisor to call the external Javascript (at the nuclear family level) function as above โฆ
parent.document.getElementById('toptd').innerHTML+="
<select onchange=\" document.getElementById('" + topielem.id + "').contentWindow.rezero(); \" style='width:90%;' id='dcm' title='Discrete click/touch mode'>
... option tags ...
</select>
";
โฆ where the global variable topielem (we arranged earlier on in the code to) point at the grandparentโs HTML iframe containing the nuclear family HTML (remember it? โฆ it hasnโt changed for ages) and its accompanying external Javascript (that we keep raving about).
What was needed, again, for todayโs job progress continues on with the recent pattern of not needing to change the grandparent supervisor but changing the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs which changed quite a bit as per thislink and this liverun link. The email subject HTML PHP arrangements for signature_signaturephp changed in this smallway today.
Previous relevant Signature Signature Supervisor Discrete Click and Touch Text Rotation Tutorial is shown below.
Weโre getting closing to having the wherewithall for our User of Signature Signature web application functionality be practically useful for a task we have in mind, but we still need more added functionality for it, and today that functionality is related to Rotated Text functionality, that for this Text Rotation is different to yesterdayโs Signature Signature Supervisor Discrete Click and Touch Image Functionality Tutorialโs Canvas rotation in that we do make some Canvas Javascript DOM changes, guided by this useful link โฆ thanks โฆ on our way to be able to have it that โฆ
- user fills in a text rotation value, and then text can be rotated via that default textarea fill in of text not starting with < entry method, with attempts to start the text at the top left of the canvas โฆ or โฆ
- user fills in a text rotation value, and then text can be rotated via that default textarea fill in of text not starting with < entry method but with the user defining its top left positioning via one discrete click/touch โฆ or โฆ
- text can be rotated via that default textarea fill in of text not starting with < entry method but with the user defining its top left and a directional second click/touch that fills out the text rotation field, positioning via the first of the two discrete clicks/touches
There is a slight nuance of difference for the way the rotated text functionality above works. We do not clear the canvas under any non-horizontal text created, and we wait for the line feed (and carriage return) at the end of the textarea string before drawing that text if the intension is there to rotate it in any way other than the default horizontal way.
Also, today, long in the wanting, is the mechanism by which the user can send their email or postcard to a CC and/or a BCC email address recipient. And we add a Download button, for whose underlying event logic weโd like to thank this excellent link, as a sharing idea, converting what is on your canvas element to a PNG image downloadable to your device or computer. Leaving yesterdayโs functionality scenario untouched what is on your canvas element would not reflect what you see on the screen when you use those CSS3 flip and flop and rotation techniques. Remember, yesterday, how we said โฆ
Do you remember with the recent series of blog thread of postings culminating, so far, with Webcam Mobile Tutorial how we had a โฆ
- video streaming โฆ and really really really often updating a โฆ
- canvas element
โฆ and how we wanted to be able to, amongst other things โฆ
- (horizontally) flip the video, on its way to being mapped to the canvas โฆ and โฆ
- (vertically) flop the video, on its way to being mapped to the canvas โฆ and โฆ
- rotate the video, on its way to being mapped to the canvas
โฆ and how we, there, used some HTML5 Javascript DOM client functionality to achieve this? Well, we have this incorporated now, into our current User of Signature Signature web application, and will probably find a use for it for later purposes โฆ
Well, itโs time to call that Javascript DOM method of changing the canvas content into play, because it occurred to us for the Download button and for Email and Postcard button functionalities the user may have expected those data sets to reflect the true data content of the canvas, or maybe not, and so we ask you to set or not to set (that is the question) a Content checkbox, in other words to set is to use Javascript DOM (real canvas element content changes) and not to set is to use CSS3 (just screen looks) functionality modes of use. We also add a Rectangle (clear) additional option.
What was needed for todayโs job progress continues on with the recent pattern of not needing to change the grandparent supervisor but changing the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs which changed quite a bit as per thislink and this liverun link. The email (body content) HTML PHP arrangements didnโt need any change today.
Previous relevant Signature Signature Supervisor Discrete Click and Touch Image Functionality Tutorial is shown below.
Do you remember with the recent series of blog thread of postings culminating, so far, with Webcam Mobile Tutorial how we had a โฆ
- video streaming โฆ and really really really often updating a โฆ
- canvas element
โฆ and how we wanted to be able to, amongst other things โฆ
- (horizontally) flip the video, on its way to being mapped to the canvas โฆ and โฆ
- (vertically) flop the video, on its way to being mapped to the canvas โฆ and โฆ
- rotate the video, on its way to being mapped to the canvas
โฆ and how we, there, used some HTML5 Javascript DOM client functionality to achieve this? Well, we have this incorporated now, into our current User of Signature Signature web application, and will probably find a use for it for later purposes, but today, use a CSS3 (mapped to Javascript DOM) approach to a solution for the flip, flop and rotation of our grandparent level web application (just) canvas element today. And where did we see good advice regarding this approach? We found it at this great web site, thanks.
Weโll need this functionality for flip flops (tee hee), and flip flops on a lazy susan (boom boom) for a few reasons, at the very least โฆ
- when youโre on a mobile device using one of the Background Canvas Image Camera discrete click/touch menu options youโll map onto the canvas element a (horizontally) flipped image โฆ and will need todayโs functionality to fix that should that annoy you โฆ and โฆ
- photos generally can come to you out of cameras and webcams needing these functionalities โฆ and โฆ
- down the track, after today, weโll want more user clicked regional definitions of areas for this functionality possibility for ideas weโll show you later on regarding all this projectโs thinking and work
We also changed all โฆ
topelem.toDataURL('image/png');
โฆ calls to โฆ
topelem.toDataURL('image/jpeg', 0.7);
โฆ to allow for smaller data sets leading into our emails.
Youโll see this reflected by the continuation of yesterdayโs pattern of not needing to change the grandparent supervisor but changing the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs which changed quite a bit as per thislink and this liverun link. Additionally, thesechanges to our signature_signaturephp PHP happened today.
Previous relevant Signature Signature Supervisor Discrete Click and Touch Postcard Tutorial is shown below.
Todayโs steps forwards in our User of Signature Signature web application functionality are related to the Sharing functionality, adding to the existant โฆ
- email of the canvas image email โฆ with โฆ
- postcard email
โฆ gently introducing possibilities, like Content Management Systems do, for the user to control some HTML content, in the form of an email body section, in HTML format.
What is a postcard, generally, made up of?
- image(s)
- words
โฆ and yesterdayโs (Signature Signature Supervisor Discrete Click and Touch Image Functionality Tutorial) โฆ
- image via URL sized according to two user discrete click/touch events
- image via Browse of the current deviceโs hard disk or other Photos resource sized according to two user discrete click/touch events
- background image via URL sized to the current canvas or the canvas sized to current image
- background image via Browse of the current deviceโs hard disk or other Photos resource sized to the current canvas or the canvas sized to current image
- background image via Camera capture sized to the current canvas or the canvas sized to current image โฆ as probably only applicable to mobile devices with a camera
โฆ background image options will come in handy here for the postcard images (and imagery โฆ chortle, chortle), leaving us with our new input type=button โPostcardโโs onclick logic to split that HTML textareasโs functionality into two (or three) modes of use โฆ
- new HTML textarea content doesnโt contribute to canvas image content but does get sent to a Postcard Email receiver โฆ ie. that same reworked PHP code of previous blog postings on this thread โฆ adding to what was already there, that being โฆ
- old textarea non-HTML contributes to textual canvas data at its top left (or to a user defined click/touch position)
How can we tell the difference between the two different textarea content above? HTML starts with < โฆ doh! We donโt do it, but you might want to enforce that first character perhaps not being allowed to be a space for this very reason โฆ but maybe not โฆ for flexibility. These are project decisions reaching into the minutiae that many programmers spend great percentages of their lives coding for. Many projects have wonderfully elegant major principles, but the less elegant realities of life, especially user use validation, is not so easy to make as elegant.
This job(ette) today got us taking email HTML (body content) seriously, not a common occurrence for us. We find that CSS styling works, as do overlay principles, including all our favourites in this neck of the woods โฆ
- position:absolute; top:0; left:0;
- z-index:9;
- opacity:0.7;
โฆ and after quite a few goes of thinking to overlay words on top of images, we, instead, decided to use โฆ
- width:100%; text-align:
centerright; - and allow for linefeeds with the idea at the Javascript prompt window the user uses to enter the Postcard words, that the ~ character can later get mapped to <br>
What was needed for todayโs job(ette) continues on with yesterdayโs pattern of not needing to change the grandparent supervisor but changing the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs which changed quite a bit as per thislink and this liverun link. Additionally, those email (body content) HTML rearrangements involved thesechanges to our signature_signaturephp PHP.
Previous relevant Signature Signature Supervisor Discrete Click and Touch Image Functionality Tutorial is shown below.
Todayโs improvements to functionality for our User of Signature Signature web application we left off two days ago with Signature Signature Supervisor Discrete Click and Touch Functionality Tutorial as shown below, is all about images.
- image via URL sized according to two user discrete click/touch events
- image via Browse of the current deviceโs hard disk or other Photos resource sized according to two user discrete click/touch events
- background image via URL sized to the current canvas or the canvas sized to current image
- background image via Browse of the current deviceโs hard disk or other Photos resource sized to the current canvas or the canvas sized to current image
- background image via Camera capture sized to the current canvas or the canvas sized to current image โฆ as probably only applicable to mobile devices with a camera
The only coding needing to change for these new image functionalities is the external JavaScript (at the โnuclear familyโ level) called signature_signaturejs which changed a lot as per thislink and this liverun link. We again thank the great HTML5 Rocks website for their great advice, and inspiration.
Previous relevant Signature Signature Supervisor Discrete Click and Touch Functionality Tutorial is shown below.
Following yesterdayโs Signature Signature Supervisor Functionality Tutorial as shown below we added Scribble and Typed Text functionality a proof of concept grandparent web application framework to supervise our Signatureโs Signature web application module. That leaves today to concentrate more on what the grandparent web application might specialise in regarding Discrete Click/Touch functionality, that being, today โฆ
- ability to add Rectangle shapes as an outline or filled in
- ability to add Circle shapes as an outline or filled in
- ability to add Images defined via image URLs (so far)
- ability to control opacity and line colour via rgba(r,g,b,opacity) syntax to define Canvas Font colour
- ability to position Typed Text as a clicked/touched canvas position
- scribble
- typed text in predetermined top left position
- discrete click/touch via onclick/onmousedown(=touchstart) event logic attached to the grandparent canvas (by the external parent external Javascript)
- canvas.toDataUrl(โimage/pngโ);
- HTML form โฆ
- method=POST (suited for long data sets) โฆ
- action=./signature_signature.php โฆ
- enctype=application/x-www-urlencoded โฆ
- target=_self (clobber current webpage) โฆ
- input type=hidden id=sscoords name=sscoords value=OurBigLongCommaSeparatedSignatureCoordSet (is still there but use signature_signature.html to save and store signature signatures (that then will appear at user_of_signature_signature.html)) โฆ
- input type=hidden id=emailto name=emailto value=emailToAddress โฆ
- input type=hidden id=contentto name=contentto value=resultsOf_canvas.toDataUrl(โimage/pngโ) โฆ
- input type=submit id=mysbut โฆ that we document.getElementById(โmysbutโ).click(); (when the right time comes) to submit the form
- access the signature on file
- add to an existing signature at the grandparent level because what you do there should not change a user saved signature but can form composite canvas image data making use of signatures
- add non signature canvas (or other) data that goes to make up what your grandparent is aimed at creating
- HTML form โฆ
- method=POST (suited for long data sets) โฆ
- action=./signature_signature.php โฆ
- target=_self (clobber current webpage) โฆ
- input type=hidden id=sscoords name=sscoords value=OurBigLongCommaSeparatedSignatureCoordSet โฆ
- input type=submit id=mysbut โฆ that we document.getElementById(โmysbutโ).click(); (when the right time comes) to submit the form
- HTML URL get parameter โsscoords=โ โฆ nor โฆ
- HTTP Cookie โsscoords=โ
- HTML supervisor signature_signaturehtml has a liverun link, and changed, today, in thisway โฆ includes โฆ
- External Javascript signature_signaturejs changed, today, in thisway โฆ supervising โฆ
- PHP signature_signaturephp โฆ to help out with big signature data sets.
- If you do work out better (smaller) methods (of signature data representation), such as โjust the first coordinate set is real and the others are offsetsโ or โhexadecimally encodeโ, you go down the path of kidding yourself that you improve things for anything but a tiny percentage of cases.
- Youโll need a serverside intervention for sharing these large data sets anyway, later, as the project continues
- capture a personโs signature (via an HTML(5) Canvas element) โฆ and be โฆ
- collecting that Signatureโs โSignatureโ in terms of a pen plotter pen up/pen down instructional โdefinitionโ (in some way shape or form) โฆ if the user is satisfied to โฆ
- save the Signatureโs โSignatureโ in a HTTP Cookie that can be remembered by this and other web applications, perhaps โฆ weโll see on this one
- cross-platform and cross-browser issues within the touch/mouse worlds โฆ you are not alone โฆ
- can a complicated signature be saved within the storage restrictions of HTTP Cookies? โฆ the room is getting more crowded โฆ
- cropping and initial canvas size concepts โฆ take a ticket โฆ
- how do you handle scaling and the implications to authenticity (of scaling) if you reuse this Signatureโs โSignatureโ in another context โฆ think thereโs room there squeezed up against the fridge
- astronauts in zero gravity? โฆ alright already!
- mouse move event โonmousemoveโ (and its equivalent touch event(s)) โฆ for sure, and others, perhaps like โฆ
- mouse up โonmouseupโ (like pen up) (and its equivalent touch event(s))
- mouse down โonmousedownโ (like pen down) (and its equivalent touch event(s))
- has a supervisory HTML and Javascript signature_signaturehtml โฆ calling on โฆ
- external Javascript has a supervisory HTML and Javascript signature_signaturejs containing the Canvas element mouse/touch event logics
As you can see from todayโs tutorial picture that adds a lot more variety to what you might share via email using inline HTML email techniques via PHP mail.
Yet again, why not try our liverun link of our email capable grandparent level web application (changed in thisway) to swap its onclick event logic into the external Javascript) weโve called user_of_signature_signaturehtml that supervises signature_signaturehtml which in turn calls on our muchchanged external JavaScript signature_signaturejs and which itself supervises our unchanged signature_signaturephp for new inhouse HTML canvas image Discrete Click/Touch mode functionality? The external Javascript changes a lot to differentiate among โฆ
Scribble away, with discretion!
Previous relevant Signature Signature Supervisor Functionality Tutorial is shown below.
With yesterdayโs Signature Signature Proof of Concept Supervisor Tutorial as shown below we set up a proof of concept grandparent web application framework to supervise our Signatureโs Signature web application module. That leaves today to concentrate more on what the grandparent web application might specialise helping out with.
A grandparent level web application, we feel, should be able to share the created canvas data, and first cab off the โsharingโ rank here, for us, will involve email, and use the canvas.toDataUrl() functionality HTML5 introduced to us all.
With a lot of good help from this useful link we amended the PHP below to create inline HTML emails containing the image content of our canvas element via โฆ
Why not try our liverun link of our emailing grandparent level web application (changed in thisway to do the emailing work) weโve called user_of_signature_signaturehtml that supervises signature_signaturehtml which in turn calls on our muchchanged external JavaScript signature_signaturejs and which itself supervises our signature_signaturephp (thisway) for new inhouse HTML canvas image data emailing functionality? Scribble away!
Previous relevant Signature Signature Proof of Concept Supervisor Tutorial is shown below.
Yesterday, with Signature Signature PHP Tutorial as shown below, we reached a point where we feel we can draw a line under a unit of work and call it a module in terms of a web applicationโs modularisation. That module consisted of parent and child โnuclear familyโ level of hierarchy.
Today as we look to extending the functionality we introduce a supervisory level above as a grandparent level if you like. At the grandparent level our nuclear family exists in an HTML iframe child (of the grandparent). The grandparent level represents any web application we invent that could do well with a real user signature involved in its workings.
Those web applications will become apparent over time but today letโs get going a proof of concept arrangement whereby as with a letter or email you might want a signature to appear down the bottom of your correspondence. And youโll want to be able to โฆ
Our proof of concept is good at building a composite scribble canvas image component the size of that nuclear family canvas element at the bottom of the grandparent canvas element. Later weโll want to have the mechanisms to scale and rotate and position these canvas scribbles but that is for later down the track.
So why not try our liverun link of our proof of concept first cab off the rank grandparent level web application weโve called user_of_signature_signaturehtml that supervises signature_signaturehtml (changed thisway) which in turn calls on our muchchanged external JavaScript signature_signaturejs and which itself supervises (our unchanged) signature_signaturephp for when the signature data length overshoots the web address bar URL length restrictions (which we talked about yesterday at length with Signature Signature PHP Tutorial).
Weโll leave you with a YouTube video to see this User of Signature Signature in action โฆ
Previous relevant Signature Signature PHP Tutorial is shown below.
Did you know that on an Apache/PHP/MySql web server PHP code (file), itself, can be a data source? Just as ASP.Net could be a data source on its .NET web server.
This is because parts of a serverside language code can be hidden to the user, or in todayโs work, to an inapplicable user.
Today we use this approach to help out Signature Signature Primer Tutorialโs HTML supervisor signature_signature.html (with its hard working external signature_signature.js) with user signatureโs whose data length would overflow web server restrictions regarding address bar URLs, which happen to be the similar length restrictions to HTTP Cookie web browser storage. Remember, yesterday, we predicted as an issue with our Signature(โs) โSignatureโ web application โฆ
can a complicated signature be saved within the storage restrictions of HTTP Cookies? โฆ the room is getting more crowded โฆ
โฆ well, we werenโt wrong to be concerned. It takes very little signature data to overrun those web server and web browser length limits as above. And so we need to turn the HTML and Javascript attention when these proposed lengths get bigger than our default โ900โ setting to using โฆ
โฆ on the HTML supervisor side, whereas at the PHP we have this innoccuous looking line of code โฆ
$data=[""];
โฆ that is modified by the PHP itself. Yes, PHP can change itself dynamically (via file_put_contents method, for us, today), and that is how we can make PHP be a data source, because that $data array can be gleaned by the PHP itself via โฆ
$thiscont=file_get_contents(dirname(__FILE__) . "/signature_signature.php");
Now hereโs an important distinction with, say โฆ
$thiscont=file_get_contents("./signature_signature.php");
โฆ the first being like a real code listing, but the latter is a โrun through with the web serverโ and out to a (client) web page (interpretation or) listing (and will usually be smaller). We want the former to glean what the $data array contains from previous HTML form posting $data array updates when signature data lengths exceed our โ900โ.
Todayโs supervisor_supervisor.php has one other role. The modified HTML defines an HTML iframe โchildโ element of a call to signature_signature.php with no $_GET[] nor $_POST[] to which we have coded the PHP to return that userโs $data array match should it exist back to a โparentโ HTML div id=longsignature elementโs innerHTML property, should one exist. The โparentโ then, if no other โฆ
โฆ exist. If they do, and the PHP also has one defined, the other two โavenues of dataโ above prevail. In turn, a new defined signature for a user whose data exceeds โ900โ (again) will cause the PHP to โupdateโ its $data array, rather than adding to it (to make the sizeof($data) increase by one).
Letโs review the three bits of code now โฆ
Youโll see new HTTP Cookie code in the External Javascript above (where now, as a result of all this we can say we have intrasession and intersession accountability for a user using this web application), but in practice, weโre usually finding signatures will overshoot those aforesaidmentioned data limitations, which brings us to the question โฆ
Why not shorten (or encode differently) the data?
There are two big reasons why not.
we hope this discussion interests?!
Previous relevant Signature Signature Primer Tutorial is shown below.
Todayโs new web application is a Signature Signature. Our aim with this web application is โฆ
If youโre a programmer reading above, am sure you are immediately curious about โฆ
โฆ but, nevertheless, letโs just creep up on the project, and see how we go, here, today, on a first draft.
Concentrating in on the HTML(5) Canvas element thoughts, what events will be of interest?
This โeventsโ concern we have, above, had a similar scenario to when we presented Canvas Email Attachment Scribble Tutorial, and so, with that in mind, we are going to have a web application that โฆ
Here is a liverun link, and to see this in action, take a skeg at โฆ
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.