Tag Archives: dictionary

HTML Square Horizontal Rule Image Map Jigsaw Signatures Tutorial

Not sure if it’s happened before, but just the one additional letter in a blog posting title today differentiates it from the recent HTML Square Horizontal Rule Image Map Jigsaw Signature Tutorial. Mind you that letter is a plural implying “s” and programmers will tell you often, I’m sure, that to change program logic from “it only needs to work for one instance” to “it needs to work for as many instances of an instance as is necessary” this can be easier said than done, in many cases. And sometimes you’re not sure yourself what the implications are. Two days later my optimism has been tempered by the task … Make the code work for the case where a user’s signature may need to occur multiple times on a Timesheet with our Timesheet Helper logic. It is tempting to be lazy and leave the code as was in the knowledge that 99% of timesheet designs probably only require the single signature, we’d venture. But that is just a lazy thought for two reasons, at least for us, those being … aim for 100% rather than 99% if it can be done and is not reinventing the wheel … as well as the fact that … we think this Timesheet Helper work is going to lead to a much more generic “Document Helper” as time goes on … because we have more future plans of a very generic nature here to follow, but will talk more of that soon Okay, so we’d like to say that to go from “one” to “as many as needed” we used a linked list approach such as for the bold bit of the code snippet … var piesuff=”, nextpiesuff=’2′, piesuffsdone=’,’; // these are global // … versus local code below … var xsf=”; if (!document.getElementById(‘divsignature’ + nextpiesuff)) { xsf='<div title=” ” id=divsignature’ + nextpiesuff + ‘></div><iframe id=”isignature’ + nextpiesuff + ‘” style=”display:none;” src=””></iframe>’; if (1 == 1) { document.getElementById(‘daxes’).innerHTML+=xsf; xsf=”; } } if (document.getElementById(‘divsignature’ + piesuff).title == ” && piesuffsdone.indexOf(‘,’ + piesuff + ‘,’) == -1 && document.getElementById(‘divsignature’ + piesuff).innerHTML.indexOf(‘<IMG’) == -1 && document.getElementById(‘divsignature’ + piesuff).innerHTML.indexOf(‘<img’) == -1) { if (1 == 1) { if (1 == 1) { document.getElementById(‘divsignature’ + piesuff).innerHTML='<IMG id=”parentimgelement’ + piesuff + ‘” width=’ + eval(sigmaxx – sigminx) + ‘ height=’ + eval(sigmaxy – sigminy) + ‘ style=”z-index:340;background-color:transparent;”></img>’ + xsf; } } else { document.getElementById(‘divsignature’ + piesuff).innerHTML='<IMG id=”parentimgelement’ + piesuff +

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 3 Comments

HTML Square Horizontal Rule Image Map Jigsaw Signature Tutorial

We’re on the way to allowing for signatures today, adding onto the recent HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial progress with Timesheet Helper functionality via Image Map Jigsaw ideas. We’d already done a lot of work on this HTML5 canvas based work, but just like with renovating, to integrate something that’s been integrated a few times already, complicates things more than somewhat. With the signature work on a timesheet we have a set width and height which become a new calling mechanism to the signature producing PHP and HTML and Javascript and CSS. All the same, a user may be happy with a “prerecorded” signature they made from the past, and so we have all the following modes of use … user gets shown a blank white (canvas) screen (of that set width and height) for them to “scribble” a new signature for the timesheet (or other document), as applicable, after about ten seconds of inactivity to be replaced by a transparent background image “scribble” signature user gets shown a previous stored signature on a blank white (canvas) screen (of that set width and height) for them to leave because they are happy with it after about ten seconds of inactivity to be replaced by a transparent background image “scribble” signature user gets shown a previous stored signature on a blank white (canvas) screen (of that set width and height) for them to click into the canvas within ten seconds of inactivity so that a previous signature is cleared and a user “scribble” a new signature for the timesheet (or other document), as applicable, after about ten seconds of inactivity to be replaced by a transparent background image “scribble” signature Quite a lot needed changing for this signature functionality, that is triggered via … var timesheet_blurb=” Some Timesheet helpers are that within area properties to add non-default class=tick will add ” + String.fromCodePoint(10004) + ” into shape=rect and to end a title property with starting or ending assumes a date DD/MM/YYYY regime and other titles with that same title +/- a number of days fills those calculated dates into place in DD/MM/YYYY format, and class=’signature’ can facilitate the placement of a scribbled signature within an image map area element.”; … and please know that the signature travels with your template and so you may only have to sign the timesheet (template) the once. You can peruse the

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

HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial

If you are a regular reader at this blog, you may know that over some time now, several years in fact, we’ve longed to write code to help with Timesheets, and have come at this from … HTML5 canvas usage with signatures Speech to Text thinking … and introducing today … da da, da da, da da da da, da da da … Image Map and Timesheet Image along with Image Map area special properties … and we think we are getting closer, and we think, as far as signatures go, we can integrate that first “push” above later. However, even today, we have an alternative collaborative or sharing idea at the end of proceedings today. On Google Chrome web browser today, we reach a stage where … (Mac OS X) Google Chrome File->Print… has an “Open PDF in Preview” option (no doubt others link to Adobe Acrobat) … and in Preview (and probably Adobe Acrobat) these days there are (albeit quite awkward) ways to digitally sign into PDF documents … and from this application’s File->Share you can email off your Timesheet as required For now, as we start out on Timesheet Help Image Map Jigsaw functionality read the changed square_hr_tracing.htm new “Timesheet Helper” blurb … var timesheet_blurb=” Some Timesheet helpers are that within area properties to add non-default class=tick will add ” + String.fromCodePoint(10004) + ” into shape=rect and to end a title property with starting or ending assumes a date DD/MM/YYYY regime and other titles with that same title +/- a number of days fills those calculated dates into place in DD/MM/YYYY format.”; We hope this, and perhaps a viewing of a PDF slideshow (and/or perusing our new external Javascript tsheet.js) where we start with a timesheet image (or you can start with that same image) … … can have its “Period Ending” date be set to “08/03/2019” as shown below (baked already) … … or as an emailee downloading an email attachment (of such a reworked timesheet image and shared via the 📧 button) and then clicking that HTML file would see it (ie. being asked for their “Period Ending” and then rest of their Timesheet (but not signature yet)) as above. Get where we’re going now with Timesheet Help via Image Map Jigsaw methodologies? Can you see it paperless with these ideas? Well, perhaps reading yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Polygon Tutorial sets

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

HTML Square Horizontal Rule Image Map Jigsaw Polygon Tutorial

Yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial had us at a point where … image map area shape=rect elements could form a jigsaw of overlay navigational functionality aided and abetted by “snap to” methodologies … and today we add … image map area shape=circle element functionality … and the reason we decided not to introduce a new button for “snap off” … image map area shape=poly element functionality that does not use “snap to” methodologies … and because shape=rect is just a special form of shape=poly means the user can choose between “snap on” or “snap off” work via the value they choose from a new “shape” select element (dropdown). The use of a dropdown allowed us to offer the three “shape” choices as well as a “made to lowercase from differently configured uppercase and lowercase combination” option values so as to define … shape=circle radius shape=poly number of vertices (or not known) … pieces of information. Salutary, we think, in how flexible and space saving the use of dropdowns can be in web design. Today, the changed square_hr_tracing.htm‘s Image Map Jigsaw Guillotine live run link’s logic we allow for this full spectrum of HTML area element shape attributes we encourage you to try, be maintainable in many more places, those being … Previous relevant HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial is shown below. Yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial helped us establish a methodology by which our Image Map creator might be a collaboration tool. Today, though, we try to improve the automated features about what might be useful about the Image Map webpages (that you can now share via email) can do, in the sense of event driven logic. Without event driven logic of any kind, an Image Map can still be useful via the use of its area subelement href attributes. With these, on clicking that area subelement you could navigate to a URL (relative or absolute) or hashtag (local) place. Depending on the target value determines where to open the linked document, and here we often plump for _blank for new window or _self for current window or perhaps _top for topmost window or a name of an HTML iframe element. All good. But, believe it or not, as you get more and more into HTML design with CSS styling and most importantly Javascript (DOM) event

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

HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial

Yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial helped us establish a methodology by which our Image Map creator might be a collaboration tool. Today, though, we try to improve the automated features about what might be useful about the Image Map webpages (that you can now share via email) can do, in the sense of event driven logic. Without event driven logic of any kind, an Image Map can still be useful via the use of its area subelement href attributes. With these, on clicking that area subelement you could navigate to a URL (relative or absolute) or hashtag (local) place. Depending on the target value determines where to open the linked document, and here we often plump for _blank for new window or _self for current window or perhaps _top for topmost window or a name of an HTML iframe element. All good. But, believe it or not, as you get more and more into HTML design with CSS styling and most importantly Javascript (DOM) event logic, you’ll gravitate more and more to the events such as (the most vital) onclick event. We’re here today primarily urging you to see this Image Map dynamic creation tool as a pretty safe place to experiment with some Javascript (DOM) event logic. To write Javascript event logic you can … write it into the HTML via inline HTML Javascript … like … <area title=”Area 1″ onclick=” if (1 == 1) { alert(‘We clicked ‘ + this.title); }” ></area> (and, as of today, we write the logic to enable you to) write it into blocks of Javascript, usually in the head section but also, like with today, within the body section HTML … like … <area title=”Area 1″ onclick=” areaclick(this); ” ></area> <script type=’text/javascript’> function areaclick(oarea) { if (1 == 1) { alert(‘We clicked ‘ + oarea.title); } } </script> … amounting to the same end result event driven logic wise (and, as of today, we write the logic to enable you to) write it into external file of Javascript … like … <area title=”Area 1″ onclick=” areaclick(this); ” ></area> <script type=’text/javascript’ src=’ourjs.js’></script> … the aforesaid mentioned ourjs.js being a file containing … function areaclick(oarea) { if (1 == 1) { alert(‘We clicked ‘ + oarea.title); } } … amounting to the same end result event driven logic wise Today, in the changed square_hr_tracing.htm‘s Image Map Jigsaw Guillotine live run

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

HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial

Online collaboration depends on a communication mechanism for your web applications. This amounts to a situation where a user can break out of the relative URL scenario within most web applications, where navigation is controlled to designated places, or to stay within the same domain via relative URLs. Our favourite means of achieving this is via email. We do this a lot, but looking through our PHP mail means of doing this, we’d never written a generic “HTML Attachment” email. The web uses HTML web pages, so what could be a more useful generic communication tool than this. Today, we’ve upped the ante on genericity we hope by boiling our requirement, as far as an “HTML Attachment Email” goes, as it needing … To email address … mandatory Body HTML becomes an email attachment … mandatory (for today’s generic PHP communication tool) … we can make up any body text needed Subject line … optional (as we can make one up otherwise) CC email address … optional BCC email address … optional … and considering this list above, realized that data (that we make the rules up for) … containing < and > can be considered “Body HTML” data … and that, consecutively data … containing @ can be considered, respectively, To then CC then BCC email addresses … and so that leaves other data … containing none of < nor > nor @ can be considered as a user defined Subject line What is the implication of being able to tie down the data this way? It means we can remove the names of parent form fields as a thing that matters. We just … $phpcont=””; $to=””; $cc=””; $bcc=””; $subj=””; $getpostfound=false; foreach( $_POST as $name=>$val ) { $getpostfound=true; if (strpos(str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,strtolower(urldecode($val))))), “<“) !== false &&^ strpos(str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,strtolower(urldecode($val))))), “>”) !== false) { $phpcont=str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,urldecode($val)))); $pbits=explode(‘”data:’, $phpcont); for ($ii=1; $ii<sizeof($pbits); $ii++) { $phpcont=str_replace(explode(‘”‘,$pbits[$ii])[0],str_replace(” “,”+”,explode(‘”‘,$pbits[$ii])[0]),$phpcont); } } else if (strpos(str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,strtolower(urldecode($val))))), “@”) !== false) { if ($to == “”) { $to=str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,urldecode($val)))); } else if ($cc == “”) { $cc=str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,urldecode($val)))); } else { $bcc=str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,urldecode($val)))); } } else { $subj=str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,urldecode($val)))); } } foreach( $_GET as $name=>$val ) { $getpostfound=true; if (strpos(str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,strtolower(urldecode($val))))), “<“) !== false && strpos(str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,strtolower(urldecode($val))))), “>”) !== false) { $phpcont=str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,urldecode($val)))); $pbits=explode(‘”data:’, $phpcont); for ($ii=1; $ii<sizeof($pbits); $ii++) { $phpcont=str_replace(explode(‘”‘,$pbits[$ii])[0],str_replace(” “,”+”,explode(‘”‘,$pbits[$ii])[0]),$phpcont); } } else if (strpos(str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,strtolower(urldecode($val))))), “@”) !== false) { if ($to == “”) { $to=str_replace(“+”,” “,str_replace(“&lt;”,”<“,str_replace(“&gt;”,”>”,urldecode($val))));

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 2 Comments

HTML Square Horizontal Rule Mobile Image Map Jigsaw Tutorial

The recent HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial left us with an Image Map creator in its early days, not very good at handling a mobile platform’s needs to … apply inline CSS HTML styling to the parent HTML div element encasing the img element as per … overflow:scroll;-webkit-overflow-scrolling:touch; to allow the image be panned within a parent HTML div element staying still to enable the user to reach to anywhere in the image … that had us needing to trap an element’s [element].scrollLeft and [element].scrollTop that we found available during the ontouchmove event, that we scrutinized via (where gscrollLeft and gscrollTop and gleft and gtop are global variables) … var qrect=evt.target.getBoundingClientRect(); if ((” + (” + qrect.left).replace(‘px’,”) + ‘:’ + (” + qrect.top).replace(‘px’,”)) != ‘0;0’) { if (gtop == 0 && gleft == 0) { gtop=eval((” + ttable.top).replace(‘px’,”)); gleft=eval((” + ttable.left).replace(‘px’,”)); } gscrollLeft=gleft gscrollLeft-=eval((” + qrect.left).replace(‘px’,”)); gscrollTop=gtop; gscrollTop-=eval((” + qrect.top).replace(‘px’,”)); } … and where ttable.left and ttable.top are the co-ordinates of the parent HTML div element of the image being panned. This gscrollLeft and gscrollTop were offsets needed to plot the dashed rectangle Image Map area element indicators. And in practice this can mean the user may see a dashed rectangle happening below where they click, because they have been panning around a bit. It is like you are writing dashed rectangles onto a non-moving pane of glass in front of the image. Pan it back to its original position and you see how those dashed rectangles with the image as far as how the image map will work it. We’ve also started down the road of trying to improve the image map editing functionalities, but we are not there yet. So please, again, try for yourself, via the top yellow button click, with the changed square_hr_tracing.htm‘s Image Map Jigsaw Guillotine live run link, for your perusal. Previous relevant HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial is shown below. Adding to yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Tutorial, today we add logic to be able to … Edit the image map via an HTML div contenteditable=true element showing the image map’s outerHTML representation … as well as … Execute a new window of that image map in action, via an onclick event on the HTML textarea captured entire HTML for a working image map (that you could Copy and Paste and work

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

HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial

Adding to yesterday’s HTML Square Horizontal Rule Image Map Jigsaw Tutorial, today we add logic to be able to … Edit the image map via an HTML div contenteditable=true element showing the image map’s outerHTML representation … as well as … Execute a new window of that image map in action, via an onclick event on the HTML textarea captured entire HTML for a working image map (that you could Copy and Paste and work on yourself separately should you prefer to work it that way, too) … as well as “rubberbanding” for non-mobile platforms (alas, more work for mobile platforms here), which is achieved by coding event logic for the onmousemove event (and readying the mobile platform ontouchmove event). “Rubberbanding” is the prediction of one of your image map (shape=”rect”) area subelements ahead of it being written to the image map that happens after your top left click and proceeding to temporarily define the proposed area as a dashed HTML div element overlayed over your image. It is the scrolling of that image to reach other parts and requires scrolling that needs more thought soon regarding mobile platform improvements. Why “rubberband”? Well, if we are expecting you to create an entire “jigsaw” of area subelements, you’ll need some “lining up” mechanisms to assist you, we figure. So please try for yourself, via the top yellow button click, with the changed square_hr_tracing.htm‘s Image Map Jigsaw Guillotine live run link, for your perusal. Previous relevant HTML Square Horizontal Rule Image Map Jigsaw Tutorial is shown below. We like the image editor GIMP’s Guillotine functionality we last talked about at Gimp Guillotine Follow Up Memory Tutorial and wanted to start out creating image maps in a similar vein, and remembering back to hard copy digitizing days and incorporating the idea of “snap” onto an existant co-ordinate, so that we felt like swapping “Guillotine” with “:Jigsaw” in the title of today’s tutorial. It is early days on this project, but we found a good place to launch from, namely the recent HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial where we worked with background images, whereas today we work with … HTML img elements underpinning the … HTML map element we help the user create full of HTML area shape=”rect” elements … as you may recall GIMP Guillotine functionality also has as one of its functionality features. Please try for yourself, via

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