Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial

Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial

We find, quite often, with I.T. work, we have …

• ideas days … and …
• implementation days

… and sometimes the first needs the second, because the first needed the day to effectively “get the ideas on paper”, but the detail of making it work and be flexible and useful for users often needs days like today, for us, “implementation days” (that also have the advantage of a day’s worth of “mulling” for reworked “ideas”). That “mulling” led to a “flexibility thinking” session that led to the email subject …

Minus prefix deletes, blank suffix uses current background, same updates data: with current background, plus suffix adds onto, yyyymmdd_ start to new 5th column name is the only way to create two within a day

… coming from a half decent “offsite thinking session” because in some form already they were all relevant and all implemented … quite rare for an “offsite thinking result set” in our woooooorrrrrlllllllddd.

A surprise we discovered as well, by implementing (and bedding down yesterday’s Standing Order Sequences Canvas of Image Dimensions Tutorial ideas) that yesterday’s …

… we stopped using elem.toDataURL(“image/png”,0) in favour of the filterable (ie. image lossless compression) elem.toDataURL(“image/jpeg”,0.1) instead.

… was true for Standing Order Sequences involving images using that “Canvas Equals Image” functionality, but for other scenarios the “we stopped” decision above has been overridden. There is a place for elem.toDataURL(“image/png”,0) especially when any opacity starts becoming involved.

Let’s go into more detail regarding the context of that refinement list above and others as well …

And today we extend the Standing Order Sequence arrangements of Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial with the optional (ie. if not default) …

• window.localStorage (one per day, for the most part) record consisting of …
• # delimited … subrecords consisting of …
• startOrRelativeValue, numberOf, incrementOf, formatOf, lastx, lasty, x, y, FontSize_px_FontName_FontColour, dataURIcanvasSnapshotFirstSubrecordOnly

… to snapshot font arrangements the user had established before starting to define their first Sequence.

Also coded for today is the possibility to apply a rotation (in degrees) to your Annotation Sequences and then onto any affected and saved Standing Order Sequences. The way this is done is via a mantissa part applied to the “lastx” part of the data transfers through to the window.localStorage data conduit. Clearly, not all timesheets show all sequenced annotation as horizontal text, so this new functionality may be useful to the user. It shows for them as they shape to involve images, whether they follow through on this, or not.

Today the changed world.js (again used in Annotations part of the changed feedback.htm‘s feedback web application) continuing to allow for Standing Order Sequencing and “canvas dimensions equals image dimensions” possibilities.

Previous relevant Standing Order Sequences Canvas of Image Dimensions Tutorial is shown below.

Standing Order Sequences Canvas of Image Dimensions Tutorial

To us, resolution of static graphical base content was a “missing ingredient” to more generic usefulness regarding the Feedback web application “Standing Order Sequencing” functionality started with yesterday’s Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial. The unwieldy nature of …

• the previous static dimensions of the canvas … needed to change …
• when the user clicks a new “Canvas Equals Image” button … so that …
• canvas dimensions will match the browsed for image dimensions

… but to make this a feasible approach, we needed to introduce “Z” into the reasoning. Huh?! Yes, we needed to start being able to, between the …

• (potentially large) canvas … and …
• annotation menu

… be able to establish some of our favourite “overlay” principles …

• annotation menu gets put to opacity 0.6 …
• both up at the top heading and in the annotation menu itself we introduce a new toggle 🔄 button to toggle the z-index property of the annotation menu between …
  1. (Z sitting) below the canvas … and …
  2. (Z sitting) above the canvas

… allowing the user to both …

• get to mouse click or touch canvas places … and, helped out via control of toggle 🔄 button …
• get to say what those clicks/touches mean via the annotation menu buttons and dropdowns

The other danger this functionality change may incur is that the resolution improvement allowances means that the dataURI (canvas) content could become very big, so for “Standing Order Sequence” window.localStorage we stopped using elem.toDataURL(“image/png”,0) in favour of the filterable (ie. image lossless compression) elem.toDataURL(“image/jpeg”,0.1) instead.

With the changed world.js (again used in Annotations part of feedback web application) we allow for Standing Order Sequencing and “canvas dimensions equals image dimensions” possibilities.

Previous relevant Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial is shown below.

Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial

We want yesterday’s Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial be a jigsaw piece on the way to …

• fine tuning timesheet filling out web application … and we’re happy now that that is possible via …
• sequenced annotations onto a static graphical base content … via HTML5 canvas and concept of “Standing Order” … and then …
• allow for email sharing of canvas timesheet content

Today’s work is the refinement of how the “Standing Order” side of the story above can work. We decided our user specific data storage conduit for this should be via window.localStorage and extended the four column sequences of recent days into …

• window.localStorage (one per day, for the most part) record consisting of …
• # delimited … subrecords consisting of …
• startOrRelativeValue, numberOf, incrementOf, formatOf, lastx, lasty, x, y, dataURIcanvasSnapshotFirstSubrecordOnly

… where we encourage the user, for ease of “Standing Order” use to reference just the one startOrRelativeValue per “Standing Order” meaning that on a reuse of the “Standing Order” the web application only needs to ask for the one user startOrRelativeValue for their “Standing Order” rerun. But if all others cannot be described via startOrRelativeValue we ask for multiple redefinitions for each startOrRelativeValue encountered.

As an example, supposing you establish Fortnightly Timesheet scenario with Standing Order basis being “Period Ending date” (12/06/2020) …

• base graphics in the canvas consisting of …
  1. timesheet photo image (possibly created via Camera app of a mobile phone or tablet) browse into canvas (via Annotations menu) …
  2. scribbled signature into canvas (via Annotations menu)
  3. default ticks and crosses and totals (can be base graphics into canvas (via Annotations menu), or can be sequences)
• first sequence consisting of Timesheet right hand top rightmost click 1 and near middle of right half click 2 … teamed with startOrRelativeValue sequence …
  
12/06/20,5,-1,DD/MM/YY

• second sequence consisting of Timesheet near middle of left half rightmost click 3 and left hand top click 4 … teamed with startOrRelativeValue sequence …
  
-7,5,-1,DD/MM/YY

• up top right of Timesheet title top rightish click 5 and top rightish click 6 … teamed with startOrRelativeValue sequence …
  
0,1,0,DD/MM/YYYY

• down bottom right of Timesheet signature date bottom rightish click 7 and bottom rightish click 8 … teamed with startOrRelativeValue sequence …
  
0,1,0,DD/MM/YYYY


… that would be stored in window.localStorage as encodeURIComponent version of …


12/06/20,5,-1,DD/MM/YY,lastx_1,lasty_1,x_2,y_2,dataURIcanvasSnapshotFirstSubrecordOnly#-7,5,-1,DD/MM/YY,lastx_3,lasty_3,x_4,y_4#0,1,0,DD/MM/YYYY,lastx_5,lasty_5,x_6,y_6#0,1,0,DD/MM/YYYY,lastx_7,lasty_7,x_8,y_8


… as you can see in action with today’s tutorial picture … whose existence causes the next web application execution to display “Standing Order” button that when pressed will ask the question (with default answer, underneath, for a Javascript prompt window) …


Initial value for Standing Order Sequence (please keep the same format and leaving the same updates with current canvas static background)
12/06/20


… which would then display into the canvas that same base graphics above with overlayed sequences based on new startOrRelativeValue you provide with the Javascript prompt window above.

And so, in the changed world.js (again used in Annotations part of feedback web application) we allow for Standing Order Sequencing possibilities. Early days, and stay tuned for further refinements!

Previous relevant Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial is shown below.

Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial

Yesterday’s Canvas Annotations and Datetime or Number Sequences Tutorial was a basis to launch into some Annotation Sequences that can go beyond the 0 to 127 ascii values, into the “Wooooorrrrrlllllddddd of Emoji” and “HTML Entities” and “Unicode Characters”. So far with emoji work we’ve never tried to map “HTML Entity Names” to a “String CodePoint“. What do we mean here by “HTML Entity Names”? We mean a classification noting how HTML Entities like …

… just to name some of the really commonly used ones, at least around here. But there are lots of them and we thank the great Freeformatter website for Complete list of HTML entities – FreeFormatter.com as a great resource.

As you might imagine, not every HTML Entity you can think of has a corresponding HTML Entity Name like this, so in our extension of external Javascript logic of world.js (again used in Annotations part of feedback web application) we allow the user to enter the integer of the String CodePoint (the function String.fromCodePoint() references (and just quietly you can compose your own composite emoji type by including a decimal place like “127462.127482” for the Australian flag 🇦🇺 as an example)) that can be used to display in the Feedback canvas your emoji characters.

The conduit by which we make the HTML Entity Name parts of the new “c” format functionality happen is via some new html_entity_name_to_codepoint.php which is contacted by our external Javascript via new Ajax and FormData object logic you can see two new Javascript functions for below …


function ajaxEntityIt(inval) {
if (inval != '') {
ourfdstart=inval;
}
var lastxinc=eval(eval(x - lastx) / eval(-1 + eval(ourfdnumber)));
var lastyinc=eval(eval(y - lasty) / eval(-1 + eval(ourfdnumber)));
if (('' + ourfdstart).trim() != '') {
for (var thisij=1; thisij<ourfdnumber; thisij++) {
context.font = document.getElementById('myfont').value;
storecanvascommands("context.font = '" + document.getElementById('myfont').value + "';", false);
context.strokeStyle=document.getElementById('mycolour').value;
storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
if (('' + ourfdstart).indexOf('.') != -1) {
storecanvascommands("context.strokeText(String.fromCodePoint(" + ('' + ourfdstart).replace(/\./g,',') + ")," + lastx + "," + lasty + ");", false);
eval(canvascommands[eval(-1 + canvascommands.length)]);
} else {
context.strokeText(String.fromCodePoint(eval('' + ourfdstart)),lastx,lasty);
storecanvascommands("context.strokeText(String.fromCodePoint(" + ourfdstart + ")," + lastx + "," + lasty + ");", false);
}
lastx+=lastxinc;
lasty+=lastyinc;
if (('' + ourfdinc).replace('0','') != '') {
ourfdstart=eval('' + ourfdstart);
ourfdstart+=eval('' + ourfdinc);
}
}
context.font = document.getElementById('myfont').value;
storecanvascommands("context.font = '" + document.getElementById('myfont').value + "';", false);
context.strokeStyle=document.getElementById('mycolour').value;
storecanvascommands("context.strokeStyle='" + document.getElementById('mycolour').value + "';", false);
if (('' + ourfdstart).indexOf('.') != -1) {
storecanvascommands("context.strokeText(String.fromCodePoint(" + ('' + ourfdstart).replace(/\./g,',') + ")," + lastx + "," + lasty + ");", false);
eval(canvascommands[eval(-1 + canvascommands.length)]);
} else {
context.strokeText(String.fromCodePoint(eval('' + ourfdstart)),lastx,lasty);
storecanvascommands("context.strokeText(String.fromCodePoint(" + ourfdstart + ")," + lastx + "," + lasty + ");", false);
}
}
}

function ajaxEntityNameIt() {
if (ourzhr != null) {
if (ourzhr.readyState == 4) {
if (ourzhr.status == 200) {
ourfdstart=ourzhr.responseText;
ajaxEntityIt('');
}
ourzhr=null;
ourzform=null;
}
}
}


Today’s tutorial picture shows us using this new emoji creation capability for …

• Greek Uppercase via “Alpha,24,1,c”
• Greek Lowercase via “alpha,24,1,c”
• ISO-8859-1 Characters via “192,64,1,c”

… as a sequencing sequence you might say, but the third value can easily be zero (ie. 0) to create a static (ie. repeated) sequence for timesheet requirements like a “tick” (alas, the closest “HTML Entity Name” to tick is “radic” (√) (though “10004” (✔) will look more apt as a “tick”)).

Previous relevant Canvas Annotations and Datetime or Number Sequences Tutorial is shown below.

Canvas Annotations and Datetime or Number Sequences Tutorial

Today we’ve added some …

• two canvas click based …
  1. number … or …
  2. datetime
• sequenced text annotation canvas placements

… and you’ll probably guess the nature of our interest if we direct you to HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial as background reading.

Sequences are that predictable and pleasing thing to many people in mathematics whereby, just as with popular music, somehow you can work out what is coming next. After all, music is all about sequences, with its scales and arpeggios and double stops etcetera.

Requirements of the user are …

• two discrete clicks …
• click new button … and …
• filling out the 4 comma separated fields of a Javascript prompt window as per …
  1. start date or number (latter is format “n” below)
  2. number of annotations
  3. increment of annotation values (note in example below how we allowed for eval and added mins (for minutes) units)
  4. format of annotation that matches format of start date or “n” if number

Try thinking how tedious it would have been to space nicely and write out the 5 annotation texts of today’s tutorial picture as opposed to the Javascript prompt answer (after the two positional canvas clicks) …


09/June/2020 10:00:00,5,-213 * 24 * 60 -23 * 60 -23 mins,DD/Month/YYYY HH24:MI:SS


To add this new functionality into the changed external Javascript world.js (used in Annotations part of feedback web application) what was needed?

• add new button via Javascript codeline …
  
hstuff+="&nbsp;<img src='//www.rjmprogramming.com.au/MarkItUp/sequence.png' onclick=' dosequence(); ' alt='Sequence' title='Sequence'></img>";

• add one new Javascript “function dosequence()” as you can glean via the “changed external Javascript” link above

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.