Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

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

Posted in Photography, Trips | Tagged , , , , , , , , , | 336 Comments

PC Html/Doc to Pdf via Mac TextEdit Primer Tutorial

File Server Sharing Mac with PC Tutorial

File Server Sharing Mac with PC Tutorial


PC Html/Doc to Pdf via Mac TextEdit Primer Tutorial

PC Html/Doc to Pdf via Mac TextEdit Primer Tutorial

Found this tutorial very interesting. It can be wasteful to overlook simple things. Take, for example the humble Mac application called TextEdit. From now on, am going to call it “The Broker”. The reason is, it is a simple application probably intended as a Text Editor (but Apple calls it a Word Processor, and now understand them to be correct) by real trade (here my personal Mac favourite is TextWrangler), but over time being the Mac OS X flagship for flexibility, so over time … am guessing? … it has been given some really cute features. It reads *.htm* HTML files, it reads *.doc* Microsoft Word document files … not perfectly, for the more complicated scenarios but really very well for text items, for example. Well, that is good, but it also Exports PDF … so finally we have a tutorial about one of the big ticket protocol-type items of the net, the PDF file. We need Wikipedia while we take a bex!

Portable Document Format (PDF) is a file format used to represent documents in a manner independent of application software, hardware, and operating systems.[1] Each PDF file encapsulates a complete description of a fixed-layout flat document, including the text, fonts, graphics, and other information needed to display it. In 1991, Adobe Systems co-founder John Warnock outlined a system called “Camelot”[2] that evolved into PDF.

While Adobe Systems made the PDF specification available free of charge in 1993, PDF remained a proprietary format, controlled by Adobe, until it was officially released as an open standard on July 1, 2008, and published by the International Organization for Standardization as ISO 32000-1:2008.[3][4] In 2008, Adobe published a Public Patent License to ISO 32000-1 granting royalty-free rights for all patents owned by Adobe that are necessary to make, use, sell and distribute PDF compliant implementations.[5]

Okay, today we do some imperfect conversions, warts and all, but you have to see how good using humble old TextEdit (free with a Mac laptop, for example) “The Broker” can be to write out some PDF, and so have another way in to useful (local MAMP web server (in the case of this tutorial, but the woorrrld is your oyster))) web work (because PDF=”useful web work” … it is well supported for web and mobile apps). The last slide of tutorial (and of picture above) sums up what this tutorial’s aim is:

Overview (starting at PC):

1) Started with a website (expressed with an *.htm* URL)
2) Used command line invocation of Microsoft Word on a PC to open the URL of 1)
3) Saved the data as a) Web page (*.htm) and b) Word document (*.doc) to Samba Shared Directory

4) … left PC … went to Mac laptop …

5) Opened 3) a) Samba Shared Directory *.htm file using Mac application TextEdit (“the broker”)
6) Exported to MAMP home directory as RJMProgrammingHHomePBitMashedUp.pdf
7) Opened 3) b) Samba Shared Directory *.doc file using Mac application TextEdit (“the broker”) … so, in this tutorial (only), can be called HTTP://localhost:8888/RJMProgrammingHHomePBitMashedUp.pdf in any web browser (if MAMP is up and going)
8) Exported to MAMP home directory as RJMProgrammingWHomePBitMashedUp.pdf (if you get emoticon here, well, that’s a bonus!) … so, in this tutorial (only), can be called HTTP://localhost:8888/RJMProgrammingWHomePBitMashedUp.pdf in any web browser (if MAMP is up and going)

9) Opened RJMProgrammingHHomePBitMashedUp.pdf in Adobe Reader and RJMProgrammingWHomePBitMashedUp.pdf in Preview

… things get lost in translation, to varying degrees, but this shows you what is possible, easily, with simple HTML elements. Chow.

Below are some good background reading for the concepts of these tutorials all via Wikipedia:

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

Posted in Data Integration, Networking, Operating System, Software, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , | 65 Comments

Maths Symbology via New Window Local Font Memory Tutorial

Maths Symbology via New Window Local Font Memory Tutorial

Maths Symbology via New Window Local Font Memory Tutorial

Yesterday’s Maths Symbology via New Window Local Font Tutorial‘s involvement of two quite big web applications is too resource hungry memory wise for all occasions and platforms, and today, we start down the road to optimise and prune functionality. And we try to cater for popup windows not working.

This happens, and there’s more to do, because image data is stored as data URIs (which are big) and also on canvas (presumably in at least as sizeable a data URI density), and in several places transferring between web applications.

And how do we give an alternative to a popup window? Settle for, for now, reduced functionality in an HTML iframe where we’ll need to also look into getting back “discrete click” functionality by coding for a fourth layer scenario.

And so, the code changes today involved …

Hope you hang around as our journey continues.

You can also see this play out at WordPress 4.1.1′s Maths Symbology via New Window Local Font Memory Tutorial.


Previous relevant Maths Symbology via New Window Local Font Tutorial is shown below.

Maths Symbology via New Window Local Font Tutorial

Maths Symbology via New Window Local Font Tutorial

The Javascript DOM communicators of yesterday’s Maths Symbology via Div Local Font Tutorial were, in large part, using …

  • parent webpage window … and …
  • child HTML iframe element

… communication conduits between web applications. But today we introduce another idea, the implication of a Javascript codeline such as …


var wois=window.open('./under_local_font.html?allowwo=' + Math.floor(Math.random() * 196745323) + midbit,'_blank');

… though opening a webpage in a new window, still thought of as a popup window, and so (var) wois will be null if a web browser popup blocker intervenes. Nonetheless, if you get past that the new communication conduit works it with …

  • parent webpage window (or “caller”) … and …
  • child popup window (or “called”) (that can see back to its caller via window.opener property)

What’s any advantage of this approach? Well, it’s a way to keep all the webpage window parties involved as being top.document to their inheritors, which, as we explained yesterday, can simplify Javascript logic considerably. You know where you stand. Do you like my slippers?!

Today’s …

… can form, respectively, the components of such a relationship when the user wants to dynamically create and use Local Font characters to map to ascii characters, and not necessarily Save any such Local Font character sets. These Local Font characters, via clicks or touches of the created Local Font character images can even transfer these images over to the other (or same) web browser “parent” Maths Symbology window and its (textarea looking) div contenteditable=true display.

An interesting alternative technique would be to use window.postMessage techniques. We hope this is of interest to you.


Previous relevant Maths Symbology via Div Local Font Tutorial is shown below.

Maths Symbology via Div Local Font Tutorial

Maths Symbology via Div Local Font Tutorial

Yesterday’s Local Fonts Revisited Middle Tutorial “Local Font” functionality teams up with the progress from the previous Maths Symbology via Div Primer Tutorial to combine with today’s extension of functionality, allowing for a Local Font interface, optionally.

To make this integration we wondered whether we could …

  • add the Maths Symbology web application as a layer on top of the Local Font 3-tier arrangement … found issues because that redefines (Javascript DOM) top.document … so rethought it so that …
  • slot the Maths Symbology so as to imbue itself as a second “parent” in the Local Font “grandparent” “parent(s)” “grandchild” hierarchy … and how do we achieve this?
    1. the changed talk_maths.html‘s onload logic change

      <body onload="if (parent.document == document || !parent.document) { top.location.href='./under_local_font.html?helpout=talk_maths.html'; } setTimeout(kutd, 1000); interpret();">

      … redirects to the Local Fonts web application if a default web browser address bar … and …
    2. the changed under_local_font.html‘s existant document.body.innerHTML is nested by …

      <table style='width:100%;';><tr><td id=left><script type='text/javascript'> var helpout=(location.search.split('helpout=')[1] ? (decodeURIComponent(location.search.split('helpout=')[1]).split('&')[0]) : ''); if (helpout != '') { setTimeout(noright, 1000); document.getElementById('left').style.width='90%'; document.write("<iframe src='" + helpout + "' style='width:100%;height:100vh;'></iframe>"); } </script></td><td id=right>

      … up the top … and …

      </td></tr></table>

      … down the bottom, directed to shift its normal content over to the right (and eventually disappearing, after passing data back to the Maths Symbology web application before that) to make way for the Maths Symbology web application at the left hand cell of the HTML table element above

    … bypassing the top.document redefinition (and so any integration hassles in that regard)

As you might imagine, once these communications are sorted out, and any Local Font image data passed across, then we need to allow for this optional functionality to be user selectable (in a select “dropdown” element), as required.

Please feel free to try the new live run link to try this new arrangement for yourself.


Previous relevant Maths Symbology via Div Primer Tutorial is shown below.

Maths Symbology via Div Primer Tutorial

Maths Symbology via Div Primer Tutorial

We’ve long been interested by …

  • HTML and Javascript and CSS web applications … that can …
  • display Mathematical symbology … and be capable of …
  • some sharing capabilities

So, in a similar line of thinking to HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial we’re harnessing …

  • HTML div contenteditable=true … and its …
  • onchange and onblur value change events … as well as …
  • onkeypress keyboard event (purely for a time when to intervene) … we allow for …
  • display controllables are …
    1. content symbology helper inspired by W3school’s https://www.w3schools.com/charsets/ref_utf_math.asp (thanks) … and …
    2. content superscript and normal and subscript modes of placement … and …
    3. font colour
    4. background colour
    5. font size

… we start down our road of discovery.

At this early “proof of concept” stage we have a talk_maths.html live run link for you to explore with, or take a look at our Vivax Solutions webpage (thanks) inspired tutorial picture for today.


Previous relevant HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

Today, as with WordPress 4.1.1′s HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial, we add a Double Jeopardy (aka the game, not so much the movie) clause to our HTML/Javascript Binomial Multiplication Game Primer Tutorial starting game from a couple of days ago.

So we now have four modes of game usage …

  • Multiplying Binomials (with Trinomials)
  • Double Jeopardy Binomials (with Trinomials) (ie. you supply either one of the two questions that would suit the answers shown)
  • Expanding to Quadratic Equations
  • Double Jeopardy Quadratic Equations (ie. you supply either one of the two questions that would suit the answers shown)

This adds a lot of new mathematics functionality to the game, just building on those HTML and Javascript ideas from a couple of days ago.

If you like practising your algebra maybe you should try, and hope you enjoy, the game and/or look at the HTML/Javascript programming source code you could call multiplying_binomials.html and which changed multiplying_binomials.htmlin this way.


Previous relevant HTML/Javascript Binomial Multiplication Game Primer Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Primer Tutorial

HTML/Javascript Binomial Multiplication Game Primer Tutorial

We can probably all think of good mathematics games we could invent in a program, but when you sit down to program you can be put off by the mathematical symbols you’d like to involve in the game, but find it unwieldy to do so. Below we talked a bit about this with HTML/Javascript MathML Primer Tutorial as shown below.

The use of MathML HTML tags is a great idea for sure, but with our “Multiplying Binomials” mathematics game today, that we would like to serve up to you today, all we want is to represent the “to the power of 2″ (ie: ²) symbol, and the MathML solution feels like a bit of overkill … and so we thought about it a bit …

  • you can’t use HTML entities in HTML input type=text elements … so …
  • nor can you use <sup>2</sup> … unless you want to look kind of dumb … but …
  • suppose you put in the header section (between <head> and </head>) <meta charset=”UTF-8″ /> then we can assign a Javascript (global) variable to a copied and pasted ² found on the net somewhere, for instance … as in the code

    var twosup="²";

… sounds promising as far as writing things onto the HTML input type=text element but what about the hassle for the user to have the control themselves interactively entering these ²s. Well, we can think of two useful (pragmatic) helper ideas here, they being …

  • we know there are going to be two ²s involved in any one Multiplying Binomials answer so why not initialize the value first presented in the HTML input type=text element’s value with 2 ²s spread apart a little that the user can build on to build up their answer without having to worry about the keypad production of any ² … and …
  • present a helper ² button that appends a ² at a time of the user’s choosing to the end of their Multiplying Binomials answer (separately for their Intermediate (show working) Answer and/or their final Answer)

We’ve used this game ourselves and found it reasonably easy to use, and it teaches you some mathematical patience to answer the Multiplying Binomials questions asked.

And what created the interest for this web application? The Maths is Fun website we think is wonderful here, as it is for so many mathematical subjects for school students, in particular.

So please try examining the HTML and Javascript programming source code, for the game, you could call multiplying_binomials.html (and just see that the var twosup=”²”; line (and any other lines containing ²) looks the way it should) and test it for yourself with a live run link.


Previous relevant HTML/Javascript MathML Primer Tutorial is shown below.

HTML/Javascript MathML Primer Tutorial

HTML/Javascript MathML Primer Tutorial

The HTML5 specification allows for the use of mathematical symbology via MathML HTML tags.

The display of mathematical symbology was not so easy to achieve very easily with older versions of HTML, and MathML makes this a lot easier for web content creators.

Today, with our tutorial, we show the use of MathML HTML tags to show operations on 2×2 matrices (in fact the matrix is the same on either side of + – x and / operators). Matrix mathematics can get hugely more complicated than in this primer tutorial, and should you want to study this further, and you are starting from scratch:

  • stop scratching
  • maybe start with a peruse of Wikipedia, and then take it from there to other research
  • link about matrix inversion

Today we have HTML and Javascript programmable source code you could call mathml_tutorial.html and here is its live run.

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.

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

Maths Symbology via New Window Local Font Tutorial

Maths Symbology via New Window Local Font Tutorial

Maths Symbology via New Window Local Font Tutorial

The Javascript DOM communicators of yesterday’s Maths Symbology via Div Local Font Tutorial were, in large part, using …

  • parent webpage window … and …
  • child HTML iframe element

… communication conduits between web applications. But today we introduce another idea, the implication of a Javascript codeline such as …


var wois=window.open('./under_local_font.html?allowwo=' + Math.floor(Math.random() * 196745323) + midbit,'_blank');

… though opening a webpage in a new window, still thought of as a popup window, and so (var) wois will be null if a web browser popup blocker intervenes. Nonetheless, if you get past that the new communication conduit works it with …

  • parent webpage window (or “caller”) … and …
  • child popup window (or “called”) (that can see back to its caller via window.opener property)

What’s any advantage of this approach? Well, it’s a way to keep all the webpage window parties involved as being top.document to their inheritors, which, as we explained yesterday, can simplify Javascript logic considerably. You know where you stand. Do you like my slippers?!

Today’s …

… can form, respectively, the components of such a relationship when the user wants to dynamically create and use Local Font characters to map to ascii characters, and not necessarily Save any such Local Font character sets. These Local Font characters, via clicks or touches of the created Local Font character images can even transfer these images over to the other (or same) web browser “parent” Maths Symbology window and its (textarea looking) div contenteditable=true display.

An interesting alternative technique would be to use window.postMessage techniques. We hope this is of interest to you.

You can also see this play out at WordPress 4.1.1′s Maths Symbology via New Window Local Font Tutorial.


Previous relevant Maths Symbology via Div Local Font Tutorial is shown below.

Maths Symbology via Div Local Font Tutorial

Maths Symbology via Div Local Font Tutorial

Yesterday’s Local Fonts Revisited Middle Tutorial “Local Font” functionality teams up with the progress from the previous Maths Symbology via Div Primer Tutorial to combine with today’s extension of functionality, allowing for a Local Font interface, optionally.

To make this integration we wondered whether we could …

  • add the Maths Symbology web application as a layer on top of the Local Font 3-tier arrangement … found issues because that redefines (Javascript DOM) top.document … so rethought it so that …
  • slot the Maths Symbology so as to imbue itself as a second “parent” in the Local Font “grandparent” “parent(s)” “grandchild” hierarchy … and how do we achieve this?
    1. the changed talk_maths.html‘s onload logic change

      <body onload="if (parent.document == document || !parent.document) { top.location.href='./under_local_font.html?helpout=talk_maths.html'; } setTimeout(kutd, 1000); interpret();">

      … redirects to the Local Fonts web application if a default web browser address bar … and …
    2. the changed under_local_font.html‘s existant document.body.innerHTML is nested by …

      <table style='width:100%;';><tr><td id=left><script type='text/javascript'> var helpout=(location.search.split('helpout=')[1] ? (decodeURIComponent(location.search.split('helpout=')[1]).split('&')[0]) : ''); if (helpout != '') { setTimeout(noright, 1000); document.getElementById('left').style.width='90%'; document.write("<iframe src='" + helpout + "' style='width:100%;height:100vh;'></iframe>"); } </script></td><td id=right>

      … up the top … and …

      </td></tr></table>

      … down the bottom, directed to shift its normal content over to the right (and eventually disappearing, after passing data back to the Maths Symbology web application before that) to make way for the Maths Symbology web application at the left hand cell of the HTML table element above

    … bypassing the top.document redefinition (and so any integration hassles in that regard)

As you might imagine, once these communications are sorted out, and any Local Font image data passed across, then we need to allow for this optional functionality to be user selectable (in a select “dropdown” element), as required.

Please feel free to try the new live run link to try this new arrangement for yourself.


Previous relevant Maths Symbology via Div Primer Tutorial is shown below.

Maths Symbology via Div Primer Tutorial

Maths Symbology via Div Primer Tutorial

We’ve long been interested by …

  • HTML and Javascript and CSS web applications … that can …
  • display Mathematical symbology … and be capable of …
  • some sharing capabilities

So, in a similar line of thinking to HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial we’re harnessing …

  • HTML div contenteditable=true … and its …
  • onchange and onblur value change events … as well as …
  • onkeypress keyboard event (purely for a time when to intervene) … we allow for …
  • display controllables are …
    1. content symbology helper inspired by W3school’s https://www.w3schools.com/charsets/ref_utf_math.asp (thanks) … and …
    2. content superscript and normal and subscript modes of placement … and …
    3. font colour
    4. background colour
    5. font size

… we start down our road of discovery.

At this early “proof of concept” stage we have a talk_maths.html live run link for you to explore with, or take a look at our Vivax Solutions webpage (thanks) inspired tutorial picture for today.


Previous relevant HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

Today, as with WordPress 4.1.1′s HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial, we add a Double Jeopardy (aka the game, not so much the movie) clause to our HTML/Javascript Binomial Multiplication Game Primer Tutorial starting game from a couple of days ago.

So we now have four modes of game usage …

  • Multiplying Binomials (with Trinomials)
  • Double Jeopardy Binomials (with Trinomials) (ie. you supply either one of the two questions that would suit the answers shown)
  • Expanding to Quadratic Equations
  • Double Jeopardy Quadratic Equations (ie. you supply either one of the two questions that would suit the answers shown)

This adds a lot of new mathematics functionality to the game, just building on those HTML and Javascript ideas from a couple of days ago.

If you like practising your algebra maybe you should try, and hope you enjoy, the game and/or look at the HTML/Javascript programming source code you could call multiplying_binomials.html and which changed multiplying_binomials.htmlin this way.


Previous relevant HTML/Javascript Binomial Multiplication Game Primer Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Primer Tutorial

HTML/Javascript Binomial Multiplication Game Primer Tutorial

We can probably all think of good mathematics games we could invent in a program, but when you sit down to program you can be put off by the mathematical symbols you’d like to involve in the game, but find it unwieldy to do so. Below we talked a bit about this with HTML/Javascript MathML Primer Tutorial as shown below.

The use of MathML HTML tags is a great idea for sure, but with our “Multiplying Binomials” mathematics game today, that we would like to serve up to you today, all we want is to represent the “to the power of 2″ (ie: ²) symbol, and the MathML solution feels like a bit of overkill … and so we thought about it a bit …

  • you can’t use HTML entities in HTML input type=text elements … so …
  • nor can you use <sup>2</sup> … unless you want to look kind of dumb … but …
  • suppose you put in the header section (between <head> and </head>) <meta charset=”UTF-8″ /> then we can assign a Javascript (global) variable to a copied and pasted ² found on the net somewhere, for instance … as in the code

    var twosup="²";

… sounds promising as far as writing things onto the HTML input type=text element but what about the hassle for the user to have the control themselves interactively entering these ²s. Well, we can think of two useful (pragmatic) helper ideas here, they being …

  • we know there are going to be two ²s involved in any one Multiplying Binomials answer so why not initialize the value first presented in the HTML input type=text element’s value with 2 ²s spread apart a little that the user can build on to build up their answer without having to worry about the keypad production of any ² … and …
  • present a helper ² button that appends a ² at a time of the user’s choosing to the end of their Multiplying Binomials answer (separately for their Intermediate (show working) Answer and/or their final Answer)

We’ve used this game ourselves and found it reasonably easy to use, and it teaches you some mathematical patience to answer the Multiplying Binomials questions asked.

And what created the interest for this web application? The Maths is Fun website we think is wonderful here, as it is for so many mathematical subjects for school students, in particular.

So please try examining the HTML and Javascript programming source code, for the game, you could call multiplying_binomials.html (and just see that the var twosup=”²”; line (and any other lines containing ²) looks the way it should) and test it for yourself with a live run link.


Previous relevant HTML/Javascript MathML Primer Tutorial is shown below.

HTML/Javascript MathML Primer Tutorial

HTML/Javascript MathML Primer Tutorial

The HTML5 specification allows for the use of mathematical symbology via MathML HTML tags.

The display of mathematical symbology was not so easy to achieve very easily with older versions of HTML, and MathML makes this a lot easier for web content creators.

Today, with our tutorial, we show the use of MathML HTML tags to show operations on 2×2 matrices (in fact the matrix is the same on either side of + – x and / operators). Matrix mathematics can get hugely more complicated than in this primer tutorial, and should you want to study this further, and you are starting from scratch:

  • stop scratching
  • maybe start with a peruse of Wikipedia, and then take it from there to other research
  • link about matrix inversion

Today we have HTML and Javascript programmable source code you could call mathml_tutorial.html and here is its live run.

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.

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

Maths Symbology via Div Local Font Tutorial

Maths Symbology via Div Local Font Tutorial

Maths Symbology via Div Local Font Tutorial

Yesterday’s Local Fonts Revisited Middle Tutorial “Local Font” functionality teams up with the progress from the previous Maths Symbology via Div Primer Tutorial to combine with today’s extension of functionality, allowing for a Local Font interface, optionally.

To make this integration we wondered whether we could …

  • add the Maths Symbology web application as a layer on top of the Local Font 3-tier arrangement … found issues because that redefines (Javascript DOM) top.document … so rethought it so that …
  • slot the Maths Symbology so as to imbue itself as a second “parent” in the Local Font “grandparent” “parent(s)” “grandchild” hierarchy … and how do we achieve this?
    1. the changed talk_maths.html‘s onload logic change

      <body onload="if (parent.document == document || !parent.document) { top.location.href='./under_local_font.html?helpout=talk_maths.html'; } setTimeout(kutd, 1000); interpret();">

      … redirects to the Local Fonts web application if a default web browser address bar … and …
    2. the changed under_local_font.html‘s existant document.body.innerHTML is nested by …

      <table style='width:100%;';><tr><td id=left><script type='text/javascript'> var helpout=(location.search.split('helpout=')[1] ? (decodeURIComponent(location.search.split('helpout=')[1]).split('&')[0]) : ''); if (helpout != '') { setTimeout(noright, 1000); document.getElementById('left').style.width='90%'; document.write("<iframe src='" + helpout + "' style='width:100%;height:100vh;'></iframe>"); } </script></td><td id=right>

      … up the top … and …

      </td></tr></table>

      … down the bottom, directed to shift its normal content over to the right (and eventually disappearing, after passing data back to the Maths Symbology web application before that) to make way for the Maths Symbology web application at the left hand cell of the HTML table element above

    … bypassing the top.document redefinition (and so any integration hassles in that regard)

As you might imagine, once these communications are sorted out, and any Local Font image data passed across, then we need to allow for this optional functionality to be user selectable (in a select “dropdown” element), as required.

Please feel free to try the new live run link to try this new arrangement for yourself.

You can also see this play out at WordPress 4.1.1′s Maths Symbology via Div Local Font Tutorial.


Previous relevant Maths Symbology via Div Primer Tutorial is shown below.

Maths Symbology via Div Primer Tutorial

Maths Symbology via Div Primer Tutorial

We’ve long been interested by …

  • HTML and Javascript and CSS web applications … that can …
  • display Mathematical symbology … and be capable of …
  • some sharing capabilities

So, in a similar line of thinking to HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial we’re harnessing …

  • HTML div contenteditable=true … and its …
  • onchange and onblur value change events … as well as …
  • onkeypress keyboard event (purely for a time when to intervene) … we allow for …
  • display controllables are …
    1. content symbology helper inspired by W3school’s https://www.w3schools.com/charsets/ref_utf_math.asp (thanks) … and …
    2. content superscript and normal and subscript modes of placement … and …
    3. font colour
    4. background colour
    5. font size

… we start down our road of discovery.

At this early “proof of concept” stage we have a talk_maths.html live run link for you to explore with, or take a look at our Vivax Solutions webpage (thanks) inspired tutorial picture for today.


Previous relevant HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

Today, as with WordPress 4.1.1′s HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial, we add a Double Jeopardy (aka the game, not so much the movie) clause to our HTML/Javascript Binomial Multiplication Game Primer Tutorial starting game from a couple of days ago.

So we now have four modes of game usage …

  • Multiplying Binomials (with Trinomials)
  • Double Jeopardy Binomials (with Trinomials) (ie. you supply either one of the two questions that would suit the answers shown)
  • Expanding to Quadratic Equations
  • Double Jeopardy Quadratic Equations (ie. you supply either one of the two questions that would suit the answers shown)

This adds a lot of new mathematics functionality to the game, just building on those HTML and Javascript ideas from a couple of days ago.

If you like practising your algebra maybe you should try, and hope you enjoy, the game and/or look at the HTML/Javascript programming source code you could call multiplying_binomials.html and which changed multiplying_binomials.htmlin this way.


Previous relevant HTML/Javascript Binomial Multiplication Game Primer Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Primer Tutorial

HTML/Javascript Binomial Multiplication Game Primer Tutorial

We can probably all think of good mathematics games we could invent in a program, but when you sit down to program you can be put off by the mathematical symbols you’d like to involve in the game, but find it unwieldy to do so. Below we talked a bit about this with HTML/Javascript MathML Primer Tutorial as shown below.

The use of MathML HTML tags is a great idea for sure, but with our “Multiplying Binomials” mathematics game today, that we would like to serve up to you today, all we want is to represent the “to the power of 2″ (ie: ²) symbol, and the MathML solution feels like a bit of overkill … and so we thought about it a bit …

  • you can’t use HTML entities in HTML input type=text elements … so …
  • nor can you use <sup>2</sup> … unless you want to look kind of dumb … but …
  • suppose you put in the header section (between <head> and </head>) <meta charset=”UTF-8″ /> then we can assign a Javascript (global) variable to a copied and pasted ² found on the net somewhere, for instance … as in the code

    var twosup="²";

… sounds promising as far as writing things onto the HTML input type=text element but what about the hassle for the user to have the control themselves interactively entering these ²s. Well, we can think of two useful (pragmatic) helper ideas here, they being …

  • we know there are going to be two ²s involved in any one Multiplying Binomials answer so why not initialize the value first presented in the HTML input type=text element’s value with 2 ²s spread apart a little that the user can build on to build up their answer without having to worry about the keypad production of any ² … and …
  • present a helper ² button that appends a ² at a time of the user’s choosing to the end of their Multiplying Binomials answer (separately for their Intermediate (show working) Answer and/or their final Answer)

We’ve used this game ourselves and found it reasonably easy to use, and it teaches you some mathematical patience to answer the Multiplying Binomials questions asked.

And what created the interest for this web application? The Maths is Fun website we think is wonderful here, as it is for so many mathematical subjects for school students, in particular.

So please try examining the HTML and Javascript programming source code, for the game, you could call multiplying_binomials.html (and just see that the var twosup=”²”; line (and any other lines containing ²) looks the way it should) and test it for yourself with a live run link.


Previous relevant HTML/Javascript MathML Primer Tutorial is shown below.

HTML/Javascript MathML Primer Tutorial

HTML/Javascript MathML Primer Tutorial

The HTML5 specification allows for the use of mathematical symbology via MathML HTML tags.

The display of mathematical symbology was not so easy to achieve very easily with older versions of HTML, and MathML makes this a lot easier for web content creators.

Today, with our tutorial, we show the use of MathML HTML tags to show operations on 2×2 matrices (in fact the matrix is the same on either side of + – x and / operators). Matrix mathematics can get hugely more complicated than in this primer tutorial, and should you want to study this further, and you are starting from scratch:

  • stop scratching
  • maybe start with a peruse of Wikipedia, and then take it from there to other research
  • link about matrix inversion

Today we have HTML and Javascript programmable source code you could call mathml_tutorial.html and here is its live run.

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.

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

Local Fonts Revisited Middle Tutorial

Local Fonts Revisited Dropdown Tutorial

Local Fonts Revisited Middle Tutorial

With software integration we normally find it is from the “outside in”, in somewhere shape or form, not like today’s emphasis on the “middle”, in that …

  • lots and lots of hierarchical issues still only go to the “parent” and “child” level … not to any …
  • “grandparent and parent and grandchild” scenarios (like our Local Fonts project), but even most of those are still most functional (and grand … tee hee) at the “grandparent” and “grandchild” levels

… but today really tested our “top.document” and “parent.document” and “contentWindow” and “contentDocument” patience with this overhaul of the “middle” of our “Local Fonts” web application project.

Why change the “middle” and what was it, and what did it become? Well, we change it because the …

  • “what it did become” HTML changed user_of_signature_signature.html‘s User of Signature Signature live run has only ever been a top level “parent” up to now, and as such, picked up a lot of useful functionalities (such as placing images and shapes in canvas elements) that we want to integrate into our Local Fonts web application workings, its integration in the “middle” still making it a “parent” to a “grandchild” who has a “grandparent” Local Fonts web application whose relationships need to be catered for so that the …
  • “what was it” HTML changed signature_signature.html called in a child HTML iframe element (by that “parent” above gets pushed down to becoming a “grandchild” for today’s arrangements) that you can test in isolation via a solo run link was enough for “scribble” purposes, but not for the “discrete click/touch” logics of the “parent” “middle” supervisor above, and including the “hard working duck” …
  • external Javascript changed signature_signature.js linchpin to gathering both …
  • “scribble” and “discrete click” user canvas functionalities into the “grandparent” supervisor HTML changed under_local_font.html‘s live run link for you to try and see what we mean here

This is all “same domain” work, so it is basically “parent/child” “webpage/iframe” arrangements (among the three HTMLs above) where “grandchildren” can reference up via “parent.document” and “top.document” to “parent” and “grandparent” respectively. “Seniors” best look to the “young’uns” via the “onload” event on the “iframe” with (“global var crazy”) code such as …


function getcanvas(ioiso) {
if (ioiso != null) {
atwoconto = (ioiso.contentWindow || ioiso.contentDocument);
if (atwoconto != null) {
if (atwoconto.document) { atwoconto = atwoconto.document; }
lelem=atwoconto.getElementById('topcanvas'); //'canvaselement');
lelem.style.width='' + eval(squaredim) + 'px';
lelem.style.height='' + eval(squaredim) + 'px';
lelem.width=eval(squaredim);
lelem.height=eval(squaredim);
lelemc=lelem.getContext('2d');
if (bcanvas == '' || 1 == 1 || (sqd != squaredim && eval('' + squaredim) > eval('' + sqd))) { bcanvas=lelem.toDataURL('image/png'); }
sqd=squaredim;
}
}
}

End result, building on yesterday’s Local Fonts Revisited Dropdown Tutorial, can be like pictograms or hieroglyphics or other coding systems, mapped to the keyboard ascii character set, and potentially saved as your “Local Font”. Bit restrictive (that way), yes, but we’ll see where we end up.

You can also see this play out at WordPress 4.1.1′s Local Fonts Revisited Middle Tutorial.


Previous relevant Local Fonts Revisited Dropdown Tutorial is shown below.

Local Fonts Revisited Dropdown Tutorial

Local Fonts Revisited Dropdown Tutorial

Introducing the HTML textarea element got us thinking about line feed content when we presented Local Fonts Revisited Textarea Tutorial, and earlier on we’d shored up the logic by involving the div (contenteditable=true) …

  • (innerText || contentWindow || contentDocument) text only version of its content, when we presented Local Fonts Revisited Onclick Tutorial below … but, today, we need to, ahead of that reductionism, add a preparatory layer of reductionism as per …
  • between onblur events of Local Font usage at the “top” of the processing reduce all the Local Font images into characters …

    function deimage(thedivo) { //incoming and outgoing HTML div contenteditable=true element ...
    var theid=('' + thedivo.id), huhspan=[];
    var isd=document.getElementsByTagName('img'); // all images
    var achar=' ';
    for (var jsd=0; jsd<isd.length; jsd++) {
    if (('' + isd[jsd].className).indexOf('ximage') != -1) { // all images within div contenteditable=true elements
    while (thedivo.innerHTML.indexOf(isd[jsd].outerHTML) != -1) {
    achar=String.fromCharCode(eval(isd[jsd].className.split('ximage')[1])); // for character in var achar
    thedivo.innerHTML=thedivo.innerHTML.replace(isd[jsd].outerHTML, achar);
    }
    }
    }
    if (theid != '') {
    while (document.getElementById(theid).innerHTML.indexOf('<span class="') != -1) {
    huhspan=document.getElementById(theid).innerHTML.split('<span class="');
    //document.title+='c:' + divo.id;
    document.getElementById(theid).innerHTML=document.getElementById(theid).innerHTML.replace('<span class="' + huhspan[1].split('>')[0] + '>', '');
    }
    return document.getElementById(theid);
    }
    if (thedivo.innerHTML.indexOf('<img') != -1) { alert('Oops'); }
    while (thedivo.innerHTML.indexOf('<span class="') != -1) {
    huhspan=thedivo.innerHTML.split('<span class="');
    //document.title+='c:' + divo.id;
    thedivo.innerHTML=thedivo.innerHTML.replace('<span class="' + huhspan[1].split('>')[0] + '>', '');
    }
    return thedivo;
    }

    … ahead of any (innerText || contentWindow || contentDocument) text only considerations

That’s made it better when multiple Local Font characters appear with any one div element.

Flexibility has improved today too by making our select element dropdown within the character (via canvas) capture section be dual purpose, keeping the original …

  1. changing the dropdown displays what is stored for that character in the canvas element … and today, adding the functionality to …
  2. changing the dropdown adds a button for that changed value so that the user can choose either the “in order” character to create and now can create a new image for the dropdown changed character instead

… which does not sound like much of a change, but adds considerable ease of use to the arrangements. This change affects “grandchild” level goings on, but is handled totally at the “top.document” (ie. (grand)parent) level as far as code goes. We did not have to change the “grandchild” level code at all for today’s improvements. This all works because of the web application design

… within a grandchild child iframe element … the in between child iframe called via the srcdoc content mode of populating

And speaking of dropdowns (albeit “grandchild” ones), our third change today involves a dropdown, this one at the top.document (grand)parent level, making that “70″ of …

idea of applying a “background image strip version of the textual content” brought to the fore (which can mean retract what’s there to the back) only where a user defined font character exists … alas, we discovered (without a lot more effort (we may yet do)) this only suits monospaced fonts such as Courier New (going back to that decision we made that the digitizing canvas should be 70 x 70)

… becomes a hardcoding that is “abstracted out” (ie. made generic) to be user controllable, via a dropdown. Save a Local Font with that dimension, and that will become your default dimension, though you can change it to ignore the saved Local Font, as required.

See this with the changed under_local_font.html‘s live run link we have for you today. We hope it interests.


Previous relevant Local Fonts Revisited Textarea Tutorial is shown below.

Local Fonts Revisited Textarea Tutorial

Local Fonts Revisited Textarea Tutorial

We find with some projects you have to remain fairly “current”, else it becomes very hard to get back into it. The recent Local Fonts Revisited Onclick Tutorial is very much “one of those projects”. There is a correlation for my tiny little mind, that being when the job is very hierarchical with its concepts. Though we admire “onions of the 4th dimension” … wouldn’t it be sacrilege not too?! … it’s just hard work, unless, as we say, you stay “current” with the job. Many more days away from “Local Fonts” and we think it could have got ugly.

As above, for “speed of progress”. This “Local Fonts” project needs patience, and even so, we may conclude it is not worthwhile pursuing, but believe it or not, with this project, there is an aim, that being to be able to show a blog posting webpage such as the one you are on, in a “Local Font” of your creation. We’ll see. In any case, on a long trip you often learn other things than just the final destination “moral”. We like a good trip, and well acknowledge that old thought that the world can be divided into those who like the trip and those who like to get there, but there are also those who like both (maybe even this).

And so today, we saunter along, just trying to cater for the confusion in our mind regarding how …

  • textarea elements … use …
    1. line feeds … as distinct from …
    2. <br> (HTML br element line breaks)

    … because it really matters in this project … it not being to everybody’s taste, we grant you

  • with regard to whether we persevere with the element in that textarea form … or instead …
  • overlay the textarea element with an equivalently sized div contenteditable=true … or instead …
  • replace them with a cloned div contenteditable=true

… and, as you may have guessed from “the build up” above, yes, we go with the latter (because, respectively, the textarea element is purely for text and “Local Fonts” involve imagery and when using “overlay” techniques we seemed to have trouble with element focus issues), via a whole rewriting of the webpage’s …

  • document.body.innerHTML … by replacing …
  • the [textarea].outerHTML … via a …
  • reworked (new) div contenteditable=true [div].outerHTML plucking the good bits out of the [textarea].outerHTML (ie. content and width and height), and “melding out” the inappropriate bits, and also adding in our own better replacement bits … as per (at the document.body onload event Javascript function) …

    document.body.innerHTML=document.body.innerHTML.replace(tas[itas].outerHTML, tas[itas].outerHTML.replace(' ', ' contenteditable=true ').replace(' cols=', ' data-cols=').replace(' rows=', ' data-rows=').replace(/textarea/g, 'div').replace(' id="', ' id="overlay').replace(' style="', ' style="width:' + ('' + tasrect.width).replace('px','') + 'px;height:' + ('' + tasrect.height).replace('px','') + 'px;')); //.tas[itas].style.visibility='hidden';

… and yes, you can see for yourself with the changed under_local_font.html‘s live run link and code that we pick optimal times, considering that new div contenteditable=true element’s innerHTML (ie. its HTML content), that we needed to convert …


String.fromCharCode(10) // ie. line feeds ... to ...


'<br>' // ie. HTML line breaks

… to get the correct result.


Previous relevant Local Fonts Revisited Onclick Tutorial is shown below.

Local Fonts Revisited Onclick Tutorial

Local Fonts Revisited Onclick Tutorial

Not much doing aesthetics wise with today’s improvements on yesterday’s Local Fonts Revisited Application Tutorial. It’s more a shoring up of the logic of that div contenteditable=true user defined field and incorporating two new ideas or concepts, those being …

  • a decision for the div’s onblur and onchange event logics to start with a scenario where innerHTML is equivalent to (innerText || contentWindow || contentDocument) before building all the imagery needed for the whole div content (ie. like changing from an SQL UPDATE idea to a DELETE/INSERT paradigm) … and for this we developed methodologies whereby …
  • the img (local font) insertions can be converted back to either …
    1. “spanized” form (ie. as span element) …or …
    2. straight text

    … either of which can then get you back to “straight text” with the …

    var outsidec=('' + (divo.innerText || divo.contentWindow || divo.contentDocument));

    … again

At first we thought Javascript [String].split(‘<img’) thoughts, but soon realized what would be much neater (and cuter) would be to “infuse” into the img elements onclick logic to self destruct. We like this because …

  • the onclick event has the scope to know about its title property or a global data attributes “data-index” we start using today (and access via [divObject].getAttribute(‘data-index’)) … as well as the fact that …
  • the onclick event can be accessed programmatically via the [imgObject].click() Javascript functionality … and so lends itself to …
  • a sequence of [imgObject].click() calls “do a procedure maketh for (var ijh=0; ijh<imgids.length; ijh++) { selfdestruct(ijh,”); }” (like up where we wanted to help with “img (local font) insertions can be converted back”)

Here’s the img element onclick logic function …


function selfdestruct(indx,ititle) {
var issa=[];
if (imgids.length > indx) {
var inc=imgids[indx].split(String.fromCharCode(9))[0];
var parid=imgids[indx].split(String.fromCharCode(9))[1];
var csid=imgids[indx].split(String.fromCharCode(9))[2];
var atti=imgids[indx].split(String.fromCharCode(9))[3];
var ih=String.fromCharCode(eval('' + inc.replace('ximage','').replace('image','')));
var intag='img';
if (1 == 3 && document.getElementsByClassName) {
issa=document.getElementsByClassName(inc);
var iil=0; //for (var iil=0; iil<issa.length; iil++) {
if (ititle != '') {
for (iil=0; iil<issa.length; iil++) {
if (issa[iil].outerHTML.indexOf(' data-index=') != -1) {
if (ititle == issa[iil].getAttribute('data-index')) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[iil].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
} else {
if (ititle == issa[iil].title) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[iil].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
}
}
} else if (issa.length > 0) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[iil].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
} else {
var ijl;
var huhs=document.getElementsByTagName(intag);
for (ijl=0; ijl<huhs.length; ijl++) {
if (huhs[ijl].className.indexOf(inc) != -1) {
issa.push(huhs[ijl]);
}
}
var il=0; //for (var il=0; il<issa.length; il++) {
if (ititle != '') {
for (il=0; il<issa.length; il++) {
if (issa[il].outerHTML.indexOf(' data-index=') != -1) {
if (ititle == issa[il].getAttribute('data-index')) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[il].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
} else {
if (ititle == issa[il].title) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[il].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
}
}
} else if (issa.length > 0) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[il].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
}
}
}

… instigated in the changed calling arrangement (for that div contenteditable=true red bordered element) …


imgids.push('ximage' + ic + String.fromCharCode(9) + 'arialdiv' + String.fromCharCode(9) + 'span' + outsidec.substring(ii, eval(1 + ii)) + String.fromCharCode(9) + eval(-1 + imgids.length));
dcs=docgetclasssub('span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt(), 'span', document.getElementById('ximage' + ic).outerHTML.replace(' id=', ' class=').replace('<img','<img title="Click to reveal original font character" data-index="' + eval(-1 + imgids.length) + '" onclick="selfdestruct(' + eval(-1 + imgids.length) + ',' + eval(-1 + imgids.length) + ');"'));
for (var idcs=1; idcs<dcs.length; idcs++) {
imgids.push('ximage' + ic + String.fromCharCode(9) + 'arialdiv' + String.fromCharCode(9) + 'span' + outsidec.substring(ii, eval(1 + ii)) + String.fromCharCode(9) + eval(-1 + imgids.length));
}

To see these ideas in play, you can see this idea play out at the changed under_local_font.html‘s live run link.


Previous relevant Local Fonts Revisited Application Tutorial is shown below.

Local Fonts Revisited Application Tutorial

Local Fonts Revisited Application Tutorial

It’s going to take a while to “bed this in”, the web application of yesterday’s Local Fonts Revisited Recall Tutorial involving local font management, and now thinking about “applying” local fonts digitized by the user.

We want to explore alternative ideas to …

  • character by character traversal of an HTML element (with innerHTML … the raw textual wording of which can be gleaned via code like (for HTML element object “divo”)) …

    var outsidec=('' + (divo.innerText || divo.contentWindow || divo.contentDocument));

    … for chances of “font character image” substitution to the innerHTML content … because it can be slow (though we think we can improve on that slowness, in future code releases) … so today we look to …
  • idea of applying a “background image strip version of the textual content” brought to the fore (which can mean retract what’s there to the back) only where a user defined font character exists … alas, we discovered (without a lot more effort (we may yet do)) this only suits monospaced fonts such as Courier New (going back to that decision we made that the digitizing canvas should be 70 x 70)

At first we tried that linear gradient thought that a background might “glow above” the foreground (tee hee, but seriously, this technique does suit sometimes, as with Javascript and PHP Base64 Media Tutorial). But then we saw sense and to “retract what’s there to the back” we could set the existant element CSS property color:transparent, opening the door to the plan below.

The plan we have going forward with this approach goes like …

  • find text elements with defined innerHTML … that …
  • have a defined “ID” … and …
  • apart from <br> and &gt; and &lt; and &amp; and &nbsp; if innerHTML is equivalent to (innerText || contentWindow || contentDocument) … we …
  • CSS (via Javascript DOM) …
    1. document.getElementById(‘arial_span’).style.color = ‘transparent’;
    2. document.getElementById(‘arial_span’).style.backgroundRepeat = ‘no-repeat’;
    3. document.getElementById(‘arial_span’).style.backgroundSize=’105% 100%’;
    4. letsomethrough( document.getElementById(‘arial_span’) ).style.backgroundImage = ‘URL(“‘ + document.getElementById(‘ifsrc’).src.replace(‘?ipinto=y’, document.getElementById(‘ipinto’).value) + ‘”)’;
  • “spanize” the parent text element as above via that Javascript function letsomethrough by nesting all “lonely” (find in code later below where var outside is true) text characters within a …
    1. span element (why span? … because it is CSS display:inline) … that if for a letter (as per the “w” of below) digitized by the user …
    2. will inherit its colour from the parent (ie. be transparent, and allow the background imagery to “shine through”, via <span>w</span>) … whereas if for a letter not digitized by the user …
    3. we define the colour to be black, overriding transparent, via <span style=”color:black;”>w</span>

As you can see, this is ongoing, and we hope to iron out some of the restrictiveness and get to cross browser issues and “apply” to real world data, such as this blog contents, perhaps.

In the meantime, see this idea play out at the changed under_local_font.html‘s live run link.

You can also see this play out at WordPress 4.1.1′s Local Fonts Revisited Application Tutorial.


Previous relevant Local Fonts Revisited Recall Tutorial is shown below.

Local Fonts Revisited Recall Tutorial

Local Fonts Revisited Recall Tutorial

Onto yesterday’s Local Fonts Revisited Primer Tutorial Local Fonts web application start, we’ve progressed today with some “recall” work.

In this respect we had to decide a mechanism by which a user could recall their work. Our decision is to …

  • be saving user defined font characters into a long “canvas” strip element … and …
  • allow a “Save” button be pressed … to …
  • convert that “canvas” strip element to data URI and subsequently to a web server image file (via PHP) … that has a filename whereby …
  • on web application rerun if such a Local Fonts web server image file is found (via PHP) … this triggers …
  • a select (dropdown) element appears in the h1 heading element allowing the user to “recall” that Local Font work …in which case …
  • a long “canvas” strip element appears with these Local Font characters … and tomorrow …

… leaving tomorrow’s work to “meld” that recall data into the natural workflow of that previous work.

It’s best you view the changed under_local_font.html‘s live run link to see what we mean here, getting the [canvasContext].drawImage() functionality to be able to draw multiple images into a single canvas element, the curiosity being that we needed to


function athy() {
var xid='';
if (lastcid != cid) {
lastcid=cid;
compcanv=document.getElementById('compositeimages');
compcanvc=compcanv.getContext('2d');

var isd=docgetclass('athy', 'img');
for (var jsd=0; jsd<isd.length; jsd++) {
xid=String.fromCharCode(eval('' + isd[jsd].id.replace('image','')));
curx=eval(70 * eval('' + origlist.indexOf(xid)));
compcanvc.drawImage(document.getElementById(isd[jsd].id),0,0,70,70,curx,cury,70,70);
}
}
}

… a form of verbosity we were not expecting but required because the canvas would clear in between Local Font character definitions.


Previous relevant Local Fonts Revisited Primer Tutorial is shown below.

Local Fonts Revisited Primer Tutorial

Local Fonts Revisited Primer Tutorial

Working off our work on the Textarea Pointing web application of the series of blog postings ending with Textarea Pointing Local Font Canvas Overlay Deletes Tutorial today we’re starting out on a Local Fonts web application journey.

At this early stage we’re missing a bit of accountability and recall but we have worked a way to combine …

  • proper web font text characters … with …
  • tailored canvas drawn “scribble” Local Font alternatives … within a grandchild child iframe element … the in between child iframe called via the srcdoc content mode of populating

The user can see these characters “infiltrate” text strings there on the webpage, one …

  1. a list of the ascii characters we’re dealing with using these Local Fonts … and the other …
  2. a user controllable HTML div contenteditable=true text string that dynamically changes appropriately as the user defines their Local Font characters

Like the idea? Well, follow the journey in the days to follow today’s “proof of concept” under_local_font.html live run link.

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.

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

Local Fonts Revisited Dropdown Tutorial

Local Fonts Revisited Dropdown Tutorial

Local Fonts Revisited Dropdown Tutorial

Introducing the HTML textarea element got us thinking about line feed content when we presented Local Fonts Revisited Textarea Tutorial, and earlier on we’d shored up the logic by involving the div (contenteditable=true) …

  • (innerText || contentWindow || contentDocument) text only version of its content, when we presented Local Fonts Revisited Onclick Tutorial below … but, today, we need to, ahead of that reductionism, add a preparatory layer of reductionism as per …
  • between onblur events of Local Font usage at the “top” of the processing reduce all the Local Font images into characters …

    function deimage(thedivo) { //incoming and outgoing HTML div contenteditable=true element ...
    var theid=('' + thedivo.id), huhspan=[];
    var isd=document.getElementsByTagName('img'); // all images
    var achar=' ';
    for (var jsd=0; jsd<isd.length; jsd++) {
    if (('' + isd[jsd].className).indexOf('ximage') != -1) { // all images within div contenteditable=true elements
    while (thedivo.innerHTML.indexOf(isd[jsd].outerHTML) != -1) {
    achar=String.fromCharCode(eval(isd[jsd].className.split('ximage')[1])); // for character in var achar
    thedivo.innerHTML=thedivo.innerHTML.replace(isd[jsd].outerHTML, achar);
    }
    }
    }
    if (theid != '') {
    while (document.getElementById(theid).innerHTML.indexOf('<span class="') != -1) {
    huhspan=document.getElementById(theid).innerHTML.split('<span class="');
    //document.title+='c:' + divo.id;
    document.getElementById(theid).innerHTML=document.getElementById(theid).innerHTML.replace('<span class="' + huhspan[1].split('>')[0] + '>', '');
    }
    return document.getElementById(theid);
    }
    if (thedivo.innerHTML.indexOf('<img') != -1) { alert('Oops'); }
    while (thedivo.innerHTML.indexOf('<span class="') != -1) {
    huhspan=thedivo.innerHTML.split('<span class="');
    //document.title+='c:' + divo.id;
    thedivo.innerHTML=thedivo.innerHTML.replace('<span class="' + huhspan[1].split('>')[0] + '>', '');
    }
    return thedivo;
    }

    … ahead of any (innerText || contentWindow || contentDocument) text only considerations

That’s made it better when multiple Local Font characters appear with any one div element.

Flexibility has improved today too by making our select element dropdown within the character (via canvas) capture section be dual purpose, keeping the original …

  1. changing the dropdown displays what is stored for that character in the canvas element … and today, adding the functionality to …
  2. changing the dropdown adds a button for that changed value so that the user can choose either the “in order” character to create and now can create a new image for the dropdown changed character instead

… which does not sound like much of a change, but adds considerable ease of use to the arrangements. This change affects “grandchild” level goings on, but is handled totally at the “top.document” (ie. parent) level as far as code goes. We did not have to change the “grandchild” level code at all for today’s improvements. This all works because of the web application design

… within a grandchild child iframe element … the in between child iframe called via the srcdoc content mode of populating

And speaking of dropdowns (albeit “grandchild” ones), our third change today involves a dropdown, this one at the top.document parent level, making that “70″ of …

idea of applying a “background image strip version of the textual content” brought to the fore (which can mean retract what’s there to the back) only where a user defined font character exists … alas, we discovered (without a lot more effort (we may yet do)) this only suits monospaced fonts such as Courier New (going back to that decision we made that the digitizing canvas should be 70 x 70)

… becomes a hardcoding that is “abstracted out” (ie. made generic) to be user controllable, via a dropdown. Save a Local Font with that dimension, and that will become your default dimension, though you can change it to ignore the saved Local Font, as required.

See this with the changed under_local_font.html‘s live run link we have for you today. We hope it interests.

You can also see this play out at WordPress 4.1.1′s Local Fonts Revisited Dropdown Tutorial.


Previous relevant Local Fonts Revisited Textarea Tutorial is shown below.

Local Fonts Revisited Textarea Tutorial

Local Fonts Revisited Textarea Tutorial

We find with some projects you have to remain fairly “current”, else it becomes very hard to get back into it. The recent Local Fonts Revisited Onclick Tutorial is very much “one of those projects”. There is a correlation for my tiny little mind, that being when the job is very hierarchical with its concepts. Though we admire “onions of the 4th dimension” … wouldn’t it be sacrilege not too?! … it’s just hard work, unless, as we say, you stay “current” with the job. Many more days away from “Local Fonts” and we think it could have got ugly.

As above, for “speed of progress”. This “Local Fonts” project needs patience, and even so, we may conclude it is not worthwhile pursuing, but believe it or not, with this project, there is an aim, that being to be able to show a blog posting webpage such as the one you are on, in a “Local Font” of your creation. We’ll see. In any case, on a long trip you often learn other things than just the final destination “moral”. We like a good trip, and well acknowledge that old thought that the world can be divided into those who like the trip and those who like to get there, but there are also those who like both (maybe even this).

And so today, we saunter along, just trying to cater for the confusion in our mind regarding how …

  • textarea elements … use …
    1. line feeds … as distinct from …
    2. <br> (HTML br element line breaks)

    … because it really matters in this project … it not being to everybody’s taste, we grant you

  • with regard to whether we persevere with the element in that textarea form … or instead …
  • overlay the textarea element with an equivalently sized div contenteditable=true … or instead …
  • replace them with a cloned div contenteditable=true

… and, as you may have guessed from “the build up” above, yes, we go with the latter (because, respectively, the textarea element is purely for text and “Local Fonts” involve imagery and when using “overlay” techniques we seemed to have trouble with element focus issues), via a whole rewriting of the webpage’s …

  • document.body.innerHTML … by replacing …
  • the [textarea].outerHTML … via a …
  • reworked (new) div contenteditable=true [div].outerHTML plucking the good bits out of the [textarea].outerHTML (ie. content and width and height), and “melding out” the inappropriate bits, and also adding in our own better replacement bits … as per (at the document.body onload event Javascript function) …

    document.body.innerHTML=document.body.innerHTML.replace(tas[itas].outerHTML, tas[itas].outerHTML.replace(' ', ' contenteditable=true ').replace(' cols=', ' data-cols=').replace(' rows=', ' data-rows=').replace(/textarea/g, 'div').replace(' id="', ' id="overlay').replace(' style="', ' style="width:' + ('' + tasrect.width).replace('px','') + 'px;height:' + ('' + tasrect.height).replace('px','') + 'px;')); //.tas[itas].style.visibility='hidden';

… and yes, you can see for yourself with the changed under_local_font.html‘s live run link and code that we pick optimal times, considering that new div contenteditable=true element’s innerHTML (ie. its HTML content), that we needed to convert …


String.fromCharCode(10) // ie. line feeds ... to ...


'<br>' // ie. HTML line breaks

… to get the correct result.


Previous relevant Local Fonts Revisited Onclick Tutorial is shown below.

Local Fonts Revisited Onclick Tutorial

Local Fonts Revisited Onclick Tutorial

Not much doing aesthetics wise with today’s improvements on yesterday’s Local Fonts Revisited Application Tutorial. It’s more a shoring up of the logic of that div contenteditable=true user defined field and incorporating two new ideas or concepts, those being …

  • a decision for the div’s onblur and onchange event logics to start with a scenario where innerHTML is equivalent to (innerText || contentWindow || contentDocument) before building all the imagery needed for the whole div content (ie. like changing from an SQL UPDATE idea to a DELETE/INSERT paradigm) … and for this we developed methodologies whereby …
  • the img (local font) insertions can be converted back to either …
    1. “spanized” form (ie. as span element) …or …
    2. straight text

    … either of which can then get you back to “straight text” with the …

    var outsidec=('' + (divo.innerText || divo.contentWindow || divo.contentDocument));

    … again

At first we thought Javascript [String].split(‘<img’) thoughts, but soon realized what would be much neater (and cuter) would be to “infuse” into the img elements onclick logic to self destruct. We like this because …

  • the onclick event has the scope to know about its title property or a global data attributes “data-index” we start using today (and access via [divObject].getAttribute(‘data-index’)) … as well as the fact that …
  • the onclick event can be accessed programmatically via the [imgObject].click() Javascript functionality … and so lends itself to …
  • a sequence of [imgObject].click() calls “do a procedure maketh for (var ijh=0; ijh<imgids.length; ijh++) { selfdestruct(ijh,”); }” (like up where we wanted to help with “img (local font) insertions can be converted back”)

Here’s the img element onclick logic function …


function selfdestruct(indx,ititle) {
var issa=[];
if (imgids.length > indx) {
var inc=imgids[indx].split(String.fromCharCode(9))[0];
var parid=imgids[indx].split(String.fromCharCode(9))[1];
var csid=imgids[indx].split(String.fromCharCode(9))[2];
var atti=imgids[indx].split(String.fromCharCode(9))[3];
var ih=String.fromCharCode(eval('' + inc.replace('ximage','').replace('image','')));
var intag='img';
if (1 == 3 && document.getElementsByClassName) {
issa=document.getElementsByClassName(inc);
var iil=0; //for (var iil=0; iil<issa.length; iil++) {
if (ititle != '') {
for (iil=0; iil<issa.length; iil++) {
if (issa[iil].outerHTML.indexOf(' data-index=') != -1) {
if (ititle == issa[iil].getAttribute('data-index')) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[iil].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
} else {
if (ititle == issa[iil].title) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[iil].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
}
}
} else if (issa.length > 0) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[iil].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
} else {
var ijl;
var huhs=document.getElementsByTagName(intag);
for (ijl=0; ijl<huhs.length; ijl++) {
if (huhs[ijl].className.indexOf(inc) != -1) {
issa.push(huhs[ijl]);
}
}
var il=0; //for (var il=0; il<issa.length; il++) {
if (ititle != '') {
for (il=0; il<issa.length; il++) {
if (issa[il].outerHTML.indexOf(' data-index=') != -1) {
if (ititle == issa[il].getAttribute('data-index')) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[il].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
} else {
if (ititle == issa[il].title) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[il].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
}
}
} else if (issa.length > 0) {
document.getElementById(parid).innerHTML=document.getElementById(parid).innerHTML.replace(issa[il].outerHTML, '<span class="' + csid + '">' + ih + '</span>');
}
}
}
}

… instigated in the changed calling arrangement (for that div contenteditable=true red bordered element) …


imgids.push('ximage' + ic + String.fromCharCode(9) + 'arialdiv' + String.fromCharCode(9) + 'span' + outsidec.substring(ii, eval(1 + ii)) + String.fromCharCode(9) + eval(-1 + imgids.length));
dcs=docgetclasssub('span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt(), 'span', document.getElementById('ximage' + ic).outerHTML.replace(' id=', ' class=').replace('<img','<img title="Click to reveal original font character" data-index="' + eval(-1 + imgids.length) + '" onclick="selfdestruct(' + eval(-1 + imgids.length) + ',' + eval(-1 + imgids.length) + ');"'));
for (var idcs=1; idcs<dcs.length; idcs++) {
imgids.push('ximage' + ic + String.fromCharCode(9) + 'arialdiv' + String.fromCharCode(9) + 'span' + outsidec.substring(ii, eval(1 + ii)) + String.fromCharCode(9) + eval(-1 + imgids.length));
}

To see these ideas in play, you can see this idea play out at the changed under_local_font.html‘s live run link.


Previous relevant Local Fonts Revisited Application Tutorial is shown below.

Local Fonts Revisited Application Tutorial

Local Fonts Revisited Application Tutorial

It’s going to take a while to “bed this in”, the web application of yesterday’s Local Fonts Revisited Recall Tutorial involving local font management, and now thinking about “applying” local fonts digitized by the user.

We want to explore alternative ideas to …

  • character by character traversal of an HTML element (with innerHTML … the raw textual wording of which can be gleaned via code like (for HTML element object “divo”)) …

    var outsidec=('' + (divo.innerText || divo.contentWindow || divo.contentDocument));

    … for chances of “font character image” substitution to the innerHTML content … because it can be slow (though we think we can improve on that slowness, in future code releases) … so today we look to …
  • idea of applying a “background image strip version of the textual content” brought to the fore (which can mean retract what’s there to the back) only where a user defined font character exists … alas, we discovered (without a lot more effort (we may yet do)) this only suits monospaced fonts such as Courier New (going back to that decision we made that the digitizing canvas should be 70 x 70)

At first we tried that linear gradient thought that a background might “glow above” the foreground (tee hee, but seriously, this technique does suit sometimes, as with Javascript and PHP Base64 Media Tutorial). But then we saw sense and to “retract what’s there to the back” we could set the existant element CSS property color:transparent, opening the door to the plan below.

The plan we have going forward with this approach goes like …

  • find text elements with defined innerHTML … that …
  • have a defined “ID” … and …
  • apart from <br> and &gt; and &lt; and &amp; and &nbsp; if innerHTML is equivalent to (innerText || contentWindow || contentDocument) … we …
  • CSS (via Javascript DOM) …
    1. document.getElementById(‘arial_span’).style.color = ‘transparent’;
    2. document.getElementById(‘arial_span’).style.backgroundRepeat = ‘no-repeat’;
    3. document.getElementById(‘arial_span’).style.backgroundSize=’105% 100%’;
    4. letsomethrough( document.getElementById(‘arial_span’) ).style.backgroundImage = ‘URL(“‘ + document.getElementById(‘ifsrc’).src.replace(‘?ipinto=y’, document.getElementById(‘ipinto’).value) + ‘”)’;
  • “spanize” the parent text element as above via that Javascript function letsomethrough by nesting all “lonely” (find in code later below where var outside is true) text characters within a …
    1. span element (why span? … because it is CSS display:inline) … that if for a letter (as per the “w” of below) digitized by the user …
    2. will inherit its colour from the parent (ie. be transparent, and allow the background imagery to “shine through”, via <span>w</span>) … whereas if for a letter not digitized by the user …
    3. we define the colour to be black, overriding transparent, via <span style=”color:black;”>w</span>

As you can see, this is ongoing, and we hope to iron out some of the restrictiveness and get to cross browser issues and “apply” to real world data, such as this blog contents, perhaps.

In the meantime, see this idea play out at the changed under_local_font.html‘s live run link.

You can also see this play out at WordPress 4.1.1′s Local Fonts Revisited Application Tutorial.


Previous relevant Local Fonts Revisited Recall Tutorial is shown below.

Local Fonts Revisited Recall Tutorial

Local Fonts Revisited Recall Tutorial

Onto yesterday’s Local Fonts Revisited Primer Tutorial Local Fonts web application start, we’ve progressed today with some “recall” work.

In this respect we had to decide a mechanism by which a user could recall their work. Our decision is to …

  • be saving user defined font characters into a long “canvas” strip element … and …
  • allow a “Save” button be pressed … to …
  • convert that “canvas” strip element to data URI and subsequently to a web server image file (via PHP) … that has a filename whereby …
  • on web application rerun if such a Local Fonts web server image file is found (via PHP) … this triggers …
  • a select (dropdown) element appears in the h1 heading element allowing the user to “recall” that Local Font work …in which case …
  • a long “canvas” strip element appears with these Local Font characters … and tomorrow …

… leaving tomorrow’s work to “meld” that recall data into the natural workflow of that previous work.

It’s best you view the changed under_local_font.html‘s live run link to see what we mean here, getting the [canvasContext].drawImage() functionality to be able to draw multiple images into a single canvas element, the curiosity being that we needed to


function athy() {
var xid='';
if (lastcid != cid) {
lastcid=cid;
compcanv=document.getElementById('compositeimages');
compcanvc=compcanv.getContext('2d');

var isd=docgetclass('athy', 'img');
for (var jsd=0; jsd<isd.length; jsd++) {
xid=String.fromCharCode(eval('' + isd[jsd].id.replace('image','')));
curx=eval(70 * eval('' + origlist.indexOf(xid)));
compcanvc.drawImage(document.getElementById(isd[jsd].id),0,0,70,70,curx,cury,70,70);
}
}
}

… a form of verbosity we were not expecting but required because the canvas would clear in between Local Font character definitions.


Previous relevant Local Fonts Revisited Primer Tutorial is shown below.

Local Fonts Revisited Primer Tutorial

Local Fonts Revisited Primer Tutorial

Working off our work on the Textarea Pointing web application of the series of blog postings ending with Textarea Pointing Local Font Canvas Overlay Deletes Tutorial today we’re starting out on a Local Fonts web application journey.

At this early stage we’re missing a bit of accountability and recall but we have worked a way to combine …

  • proper web font text characters … with …
  • tailored canvas drawn “scribble” Local Font alternatives … within a grandchild child iframe element … the in between child iframe called via the srcdoc content mode of populating

The user can see these characters “infiltrate” text strings there on the webpage, one …

  1. a list of the ascii characters we’re dealing with using these Local Fonts … and the other …
  2. a user controllable HTML div contenteditable=true text string that dynamically changes appropriately as the user defines their Local Font characters

Like the idea? Well, follow the journey in the days to follow today’s “proof of concept” under_local_font.html live run link.

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.

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

Maths Symbology via Div Primer Tutorial

Maths Symbology via Div Primer Tutorial

Maths Symbology via Div Primer Tutorial

We’ve long been interested by …

  • HTML and Javascript and CSS web applications … that can …
  • display Mathematical symbology … and be capable of …
  • some sharing capabilities

So, in a similar line of thinking to HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial we’re harnessing …

  • HTML div contenteditable=true … and its …
  • onchange and onblur value change events … as well as …
  • onkeypress keyboard event (purely for a time when to intervene) … we allow for …
  • display controllables are …
    1. content symbology helper inspired by W3school’s https://www.w3schools.com/charsets/ref_utf_math.asp (thanks) … and …
    2. content superscript and normal and subscript modes of placement … and …
    3. font colour
    4. background colour
    5. font size

… we start down our road of discovery.

At this early “proof of concept” stage we have a talk_maths.html live run link for you to explore with, or take a look at our Vivax Solutions webpage (thanks) inspired tutorial picture for today.

You can also see this play out at WordPress 4.1.1′s maths-symbology-via-div-primer-tutorial.


Previous relevant HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial

Today, as with WordPress 4.1.1′s HTML/Javascript Binomial Multiplication Game Jeopardy Tutorial, we add a Double Jeopardy (aka the game, not so much the movie) clause to our HTML/Javascript Binomial Multiplication Game Primer Tutorial starting game from a couple of days ago.

So we now have four modes of game usage …

  • Multiplying Binomials (with Trinomials)
  • Double Jeopardy Binomials (with Trinomials) (ie. you supply either one of the two questions that would suit the answers shown)
  • Expanding to Quadratic Equations
  • Double Jeopardy Quadratic Equations (ie. you supply either one of the two questions that would suit the answers shown)

This adds a lot of new mathematics functionality to the game, just building on those HTML and Javascript ideas from a couple of days ago.

If you like practising your algebra maybe you should try, and hope you enjoy, the game and/or look at the HTML/Javascript programming source code you could call multiplying_binomials.html and which changed multiplying_binomials.htmlin this way.


Previous relevant HTML/Javascript Binomial Multiplication Game Primer Tutorial is shown below.

HTML/Javascript Binomial Multiplication Game Primer Tutorial

HTML/Javascript Binomial Multiplication Game Primer Tutorial

We can probably all think of good mathematics games we could invent in a program, but when you sit down to program you can be put off by the mathematical symbols you’d like to involve in the game, but find it unwieldy to do so. Below we talked a bit about this with HTML/Javascript MathML Primer Tutorial as shown below.

The use of MathML HTML tags is a great idea for sure, but with our “Multiplying Binomials” mathematics game today, that we would like to serve up to you today, all we want is to represent the “to the power of 2″ (ie: ²) symbol, and the MathML solution feels like a bit of overkill … and so we thought about it a bit …

  • you can’t use HTML entities in HTML input type=text elements … so …
  • nor can you use <sup>2</sup> … unless you want to look kind of dumb … but …
  • suppose you put in the header section (between <head> and </head>) <meta charset=”UTF-8″ /> then we can assign a Javascript (global) variable to a copied and pasted ² found on the net somewhere, for instance … as in the code

    var twosup="²";

… sounds promising as far as writing things onto the HTML input type=text element but what about the hassle for the user to have the control themselves interactively entering these ²s. Well, we can think of two useful (pragmatic) helper ideas here, they being …

  • we know there are going to be two ²s involved in any one Multiplying Binomials answer so why not initialize the value first presented in the HTML input type=text element’s value with 2 ²s spread apart a little that the user can build on to build up their answer without having to worry about the keypad production of any ² … and …
  • present a helper ² button that appends a ² at a time of the user’s choosing to the end of their Multiplying Binomials answer (separately for their Intermediate (show working) Answer and/or their final Answer)

We’ve used this game ourselves and found it reasonably easy to use, and it teaches you some mathematical patience to answer the Multiplying Binomials questions asked.

And what created the interest for this web application? The Maths is Fun website we think is wonderful here, as it is for so many mathematical subjects for school students, in particular.

So please try examining the HTML and Javascript programming source code, for the game, you could call multiplying_binomials.html (and just see that the var twosup=”²”; line (and any other lines containing ²) looks the way it should) and test it for yourself with a live run link.


Previous relevant HTML/Javascript MathML Primer Tutorial is shown below.

HTML/Javascript MathML Primer Tutorial

HTML/Javascript MathML Primer Tutorial

The HTML5 specification allows for the use of mathematical symbology via MathML HTML tags.

The display of mathematical symbology was not so easy to achieve very easily with older versions of HTML, and MathML makes this a lot easier for web content creators.

Today, with our tutorial, we show the use of MathML HTML tags to show operations on 2×2 matrices (in fact the matrix is the same on either side of + – x and / operators). Matrix mathematics can get hugely more complicated than in this primer tutorial, and should you want to study this further, and you are starting from scratch:

  • stop scratching
  • maybe start with a peruse of Wikipedia, and then take it from there to other research
  • link about matrix inversion

Today we have HTML and Javascript programmable source code you could call mathml_tutorial.html and here is its live run.

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.

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

Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial

Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial

Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial

As promised with yesterday’s Inhouse Slideshow Design Exif Integration Tutorial we’re here today to talk about a Korn Shell assisted deployment strategy for …

the “implementation and deployment” phase of the “Inhouse Slideshow Exif Integration” project

We have the presentation part of many of our blog postings featuring this “Inhouse Slideshow” methodology, and recently we genericized it from a different set of HTML slideshow displays to a single index.php distributed to web server folders where these slideshow images resided. By “generic” we mean generic, as they all feature identical content, so our strategy is … ask of the user the following information (for our parent job.ksh), the safeguards being with the fact that they are not allowed to use blank answers, and the input file size in bytes is asked for, as well as a string to find in all those input files …


#!/bin/ksh
echo 'Files of a pattern and the same size replaced by a new version ...'
echo ''
echo 'Path to new version of file eg. ./index.php'
read index

if [ -f "$index" ]; then
echo ''
echo 'Must find this string eg. foreach (glob('
read findstring

if [ ! -z "$findstring" ]; then
echo ''
echo 'Must be this many bytes long eg. 7006'
read thismany

if [ ! -z "$thismany" ]; then
echo ''
echo 'Path to files to be replaced by this new version of file eg. /a/path/to/root/directory/of/interest/'
read path

if [ -d "$path" ]; then
echo ''
echo 'Filespec or filename of files to be replaced by a new version of file eg. index.php'
read filespec

if [ ! -z "$filespec" ]; then
echo ''
echo 'Starting the assembly of information to later execute a copy script or manual cp statements ...'
# find $path -size ${thismany}c -name "$filespec" -exec cp $index {} \;
IFS=
result=`find $path -size ${thismany}c -name "$filespec" -exec grep -H "$findstring" {} \;`
if [ -z "$result" ]; then
echo "No candidate files for change"
exit
else
indexsed=`echo "$index" | sed '/\//s//~!/g'`
echo $result | cut -d : -f 1 | uniq | sed "/^/s//cp $indexsed /g" | sed '/\~\!/s//\//g'
echo ''
echo 'Optional ksh file as above to create and get edit and execute advice eg. ./therealchange.ksh'
read thisksh

if [ ! -z "$findstring" ]; then
echo "#/bin/ksh" > $thisksh
echo $result | cut -d : -f 1 | uniq | sed "/^/s//cp $indexsed /g" | sed '/\~\!/s//\//g' >> $thisksh
echo "vi $thisksh # can edit, with a wq! to save, in vi editor"
echo "ksh $thisksh # can execute the statements to perform the copying"
exit
fi
fi
echo ''
echo 'Finished'
fi
else
echo "$path path is non-existant"
fi
fi
fi
else
echo "$index file not found"
fi
exit

… the use of which you can see us applying in a MacBook Pro (local MAMP web server) environment and then at the rjmprogramming.com.au web server as a “live run”. Notice all the sanity checks we make, such as editing the optional script output of the parent script execution, and the rerun to establish that then there should be no further input files found to process, and the (doh!) bringing up of one of the Inhouse Slideshow presentations to see that now, yes, they include an “Exif Slideshow” mode of use improvement. If you write such a procedure yourself, please know that a backup mechanism could improve your peace of mind considerably. Korn Shell being that powerful tool it is, it can happen in the blink of an eye, a big mistake by user mistake!

You can also see this play out at WordPress 4.1.1′s Inhouse Slideshow Design Exif Korn Shell Deployment Tutorial.


Previous relevant Inhouse Slideshow Design Exif Integration Tutorial is shown below.

Inhouse Slideshow Design Exif Integration Tutorial

Inhouse Slideshow Design Exif Integration Tutorial

A project of reasonable scale has several phases to it, the ones that spring to mind for us, being …

  • concept
  • planning and design
  • coding and unit testing
  • user acceptance and testing
  • platform acceptance and testing
  • implementation and deployment
  • going live
  • monitoring performance and uptake and usage patterns
  • user feedback and improvement planning

… in that order conceptually and initially, perhaps, but often messed up as a project matures and grows.

We have a mini project getting the work of yesterday’s PHP Exif Image Information Revisit Tutorial‘s PHP Exif information web application’s workings and aesthetics be put to good use, and straight off the bat we got going …

  • project “One Image Website Exif Integration” as small enough (“planning and design” established we’d only need to change 6 or 7 files) to have a very simple TextWrangler 7 file session followed by sftp over to the RJM Programming website as its “implementation and deployment” phase … the coding changes involving …
    HTML (new)

    <body id="body" style="background-color: #E4E4E4;" onload=' if (document.URL.indexOf("exif=") != -1) { dexifit(); } window.setTimeout("FadeInImage()", 4000); '>
    <a onclick=huhit(); onmousedown=huhittwo(); style=display:inline-block;cursor:pointer;text-decoration:underline;>Exif Run</a>


    <div id=dexif></div>
    </body>
    </html>
    CSS (new) is “Overlay Iframe Remembering” work

    <style>
    iframe {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    }
    </style>
    Javascript (new code) and integration steps


    function huhit() {
    top.location.href=('' + document.URL).split('#')[0].split('?')[0] + '?exif=y';
    }

    function huhittwo() {
    alinktop='#';
    }

    function dexifit() {
    document.getElementById('dexif').innerHTML='<iframe id=iexif style="position:absolute;top:0px;left:0px;z-index:45;" src=../PHP/read_exif_off_image_rotate.php></iframe>';
    }

    //
    // The existence of iframe "iexif" causes the "get new image" Javascript function to intervene and update the "src" property of iframe "iexif" with a
    // URL showing an image Exif report webpage as per "top.location.href=('' + document.URL).split('#')[0].split('?')[0] + '?exif=y';" codeline above (rather than display a new image and scroll within it (that being the default behaviour the build up for unchanged for our work))
    //

    … and today we shall …

  • get up to the “implementation and deployment” phase of the “Inhouse Slideshow Exif Integration” project … via …

    … above (or see them in a new window with the changed index.php‘s live run) … the “implementation and deployment” phase being involved (and big) enough that we need to explain more about with tomorrow’s blog posting … and in the meantime as a “refresher” have a read of Inhouse Slideshow Design Makeover Tutorial below

Previous relevant Inhouse Slideshow Design Makeover Tutorial is shown below.

Inhouse Slideshow Design Makeover Tutorial

Inhouse Slideshow Design Makeover Tutorial

One of the last times we considered the way we “worked” using our “Inhouse Slideshow Design” was when we presented Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial below, some time back. Perhaps, that is because this method has gone out of favour with us, with the number of image files required, and we’ve preferred in more recent times to …

  • annotate individual screenshots
  • compose multi-slide PDF presentations
  • compose multi-slide animated GIF presentations
  • compose multi-slide video presentations (much less often) … rather than using …
  • inhouse slideshow … when many slides are needed to explain a blog posting

Looking back, we spent too long creating these inhouse slideshows, compiling image lists into td cells of a single tr row in a single table element within individually tailored index.html (HTML) files.

Today’s makeover genericizes an overarching piece of PHP (we’ll be calling index.php) we place into the web server directory with these


foreach (glob("*-[0-9]*.[jJgGpP][pPiInN]*") as $ifil) {
if (strpos($spush, "'" . $surlprefix . $ifil . "'") === false) {
$ibits=explode("-", $ifil);
if (sizeof($ibits) > 1) {
$proposedstitle=str_replace("_", " ", $ibits[0]);
if ($proposedstitle != $stitle) {
if ($stitle == "") {
$stitle=$proposedstitle;
} else if (strpos($sothers, $proposedstitle) === false) {
$spush.="\n firstones.push(" . $scnt . "); \n";
$spush.="\n lastones.push(" . (-1 + $scnt) . "); \n";
$sothers.="<br><a id='apre" . $sscnt . "' href='#s" . $scnt . "' title=\"Movie'ize Here vs Follow Red Right Arrows with Bottom Scrollbar\" onclick='prehavealook(this); havealook(-" . $scnt . ");'>" . $proposedstitle . "</a>";
$sscnt++;
}
}
$smodebit.="\n if (smode != '0') document.getElementById('row').innerHTML+='<td><span style=\"color:red;font-size:14px;\"><b>--></b></span></td><td><img onclick=\"onck(this);\" id=\"i" . $scnt . "\" src=\"" . $surlprefix . $ifil . "\" title=\"" . $proposedstitle . "\" /></td>'; \n";
$spush.="\n uarraydatauri.push('" . $surlprefix . $ifil . "'); \n";
$scnt++;
}
}
}

… image filenames we can collect in that “glob” friendly *-[0-9]*.[jJgGpP][pPiInN]* (filespec) habit we had (and have), make genericization possible, and we’ll proceed on that understanding. What extra is needed, though, is to cater for more than one set of such slideshow image sets within any one web server directory (gleaned off the incoming URL, in PHP).

Here’s what we came up with in PHP called index.php we’ll start placing into the relevant rjmprogramming.com.au web server folders, over the next several days.


Previous relevant Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial is shown below.

Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial

Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial

To us, there are great similarities between animated GIFs and slideshows, as two forms of “presentation”, and so to extend yesterday’s Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI “exports” we add the functionality for …

  • slideshow creation (using our inhouse methods) which defaults to a horizontal (hashtag type of) navigation … as well as adding a …
  • slideshow creation, with Data URI image data, using functionality as if CSS z-index (ie. slides stacked on top of each other in “overlay” style) was being used, but actually isn’t …

… that little bit different to another “stacked” (or z-index feeling) approach we talked about with Multiple Class Slideshow Details Tutorial, where HTML element “class” properties were changed so that the last class defined reflects the look of the slideshow slide desired at any given time. We just use an array, and a setTimeout timer to achieve the same ends today, with our work (or “presentation”). If this “horizontal versus stack” navigation choice interests you, also take a read of HTML Input Element Types Randomized History Tutorial.

Again, with all this added functionality, because it is “hosted” in an HTML iframe element all the existant web browser (Windows right click or Mac OS X two finger gesture) functionality can come into play, and make life quite interesting for your non-mobile users “collecting” data URIs … there are worse hobbies!

You can see this in the context of how this PHP tutorial_to_animated_gif.php code changed for slideshows in this way or try it as a live run.


Previous relevant Animated GIF via PHP Writing PHP Data URI Tutorial is shown below.

Animated GIF via PHP Writing PHP Data URI Tutorial

Animated GIF via PHP Writing PHP Data URI Tutorial

The previous relevant “PHP writes PHP” methodology animated GIF creator we talked about, first, with Animated GIF via PHP Writing PHP Primer Tutorial came back to mind yesterday with our Missing Javascript Audio on Unmute Tutorial, where we pondered on whether an animated GIF could be represented on a webpage by a data URI. Why take an interest in this? Data URIs are very important to do with …

  • future mobile development web form navigation benefits from their usage
  • the use of data URIs make your web pages independent of web server location issues, so make your web data more portable, and flexible

… and ideally, animated GIFs are also not just a decorative part of all this web application usage (as they can be a very efficient representation of an animation that could not be a more succinct way to show that animation or presentation), and if they can be made to be like any other GIF or image data file in the ways they can be represented (and used), then that is all for the good.

So we changed the Jeroen van Wissen’s inspired PHP (“PHP writes PHP” methodology) code tutorial_to_animated_gif.php code allow for this extra animated GIF data URI representation in a new additional HTML iframe (containing the animegif.html of code below) that when harnessing existant web browser (Windows right click or Mac OS X two finger gesture) functionality can glean for us, as required, that animated GIF’s data URI representation. But don’t get too excited about this being rocket science, in that with a bit of effort, and PHP, it could have been gleaned from what we already produced, in that (in PHP “land”) …


$lastbitto="\$fp = fopen('animegif.gif', 'w');
\$data = \$gif->GetAnimation();
\$dataUri = 'data:image/gif;base64,' . base64_encode(\$data);
fwrite(\$fp, \$data);
fclose(\$fp);
\$fp = fopen('animegif.html', 'w');
fwrite(\$fp, '<!doctype html><html><body><h1>Data URI version below<h1><br><h4> ... via web browser (Windows right click, Mac OS X two finger gesture ...</h4><br><img src=' . \"\\n\" . \$dataUri . \"\\n\" . ' title=DataURI></img></body></html>');
fclose(\$fp);";

You can see this in the context of how this PHP code changed in this way or try it as a live run.


Previous relevant Animated GIF via PHP Writing PHP Primer Tutorial is shown below.

Animated GIF via PHP Writing PHP Primer Tutorial

Animated GIF via PHP Writing PHP Primer Tutorial

We find another very useful reason for PHP to write PHP. Today we establish a PHP web application to dynamically create Animated GIF images via some still images, like Gifpal would do.

We have some great open source PHP code to thank for the basis of the functionality we found at Jeroen van Wissen’s very useful link, thanks.

Then we added a more user friendly interface to get the information off the user we need. We present this in an HTML form, which navigates to the same PHP to do the actual assembly of the Animated GIF via techniques where PHP writes PHP … and really needs to, to be useful.

Do you remember, last, when we did some PHP writing PHP functionality … PHP Writes PHP Vertical TextBoxes Primer Tutorial?

And inside the PHP it makes big use of the GD and Image Functions to read and write the image data we assemble via the user information.

This Animated GIF form of animation is the easiest to implement, as it consists of just the one GIF image file, but the user has very little control over the animation settings, such as the delay between stills, one of the settings we ask about in our web application.

Our PHP source code today you could call tutorial_to_animated_gif.php and we redirect you to some live run ideas …

  • normal run with HTML form which posts back to itself … live run
  • example GET parameters run (like our tutorial picture)

Hope you find this tutorial useful.

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.

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

Inhouse Slideshow Design Exif Integration Tutorial

Inhouse Slideshow Design Exif Integration Tutorial

Inhouse Slideshow Design Exif Integration Tutorial

A project of reasonable scale has several phases to it, the ones that spring to mind for us, being …

  • concept
  • planning and design
  • coding and unit testing
  • user acceptance and testing
  • platform acceptance and testing
  • implementation and deployment
  • going live
  • monitoring performance and uptake and usage patterns
  • user feedback and improvement planning

… in that order conceptually and initially, perhaps, but often messed up as a project matures and grows.

We have a mini project getting the work of yesterday’s PHP Exif Image Information Revisit Tutorial‘s PHP Exif information web application’s workings and aesthetics be put to good use, and straight off the bat we got going …

  • project “One Image Website Exif Integration” as small enough (“planning and design” established we’d only need to change 6 or 7 files) to have a very simple TextWrangler 7 file session followed by sftp over to the RJM Programming website as its “implementation and deployment” phase … the coding changes involving …
    HTML (new)

    <body id="body" style="background-color: #E4E4E4;" onload=' if (document.URL.indexOf("exif=") != -1) { dexifit(); } window.setTimeout("FadeInImage()", 4000); '>
    <a onclick=huhit(); onmousedown=huhittwo(); style=display:inline-block;cursor:pointer;text-decoration:underline;>Exif Run</a>


    <div id=dexif></div>
    </body>
    </html>
    CSS (new) is “Overlay Iframe Remembering” work

    <style>
    iframe {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    }
    </style>
    Javascript (new code) and integration steps


    function huhit() {
    top.location.href=('' + document.URL).split('#')[0].split('?')[0] + '?exif=y';
    }

    function huhittwo() {
    alinktop='#';
    }

    function dexifit() {
    document.getElementById('dexif').innerHTML='<iframe id=iexif style="position:absolute;top:0px;left:0px;z-index:45;" src=../PHP/read_exif_off_image_rotate.php></iframe>';
    }

    //
    // The existence of iframe "iexif" causes the "get new image" Javascript function to intervene and update the "src" property of iframe "iexif" with a
    // URL showing an image Exif report webpage as per "top.location.href=('' + document.URL).split('#')[0].split('?')[0] + '?exif=y';" codeline above (rather than display a new image and scroll within it (that being the default behaviour the build up for unchanged for our work))
    //

    … and today we shall …

  • get up to the “implementation and deployment” phase of the “Inhouse Slideshow Exif Integration” project … via …

    … above (or see them in a new window with the changed index.php‘s live run) … the “implementation and deployment” phase being involved (and big) enough that we need to explain more about with tomorrow’s blog posting … and in the meantime as a “refresher” have a read of Inhouse Slideshow Design Makeover Tutorial below

You can also see this play out at WordPress 4.1.1′s Inhouse Slideshow Design Exif Integration Tutorial.


Previous relevant Inhouse Slideshow Design Makeover Tutorial is shown below.

Inhouse Slideshow Design Makeover Tutorial

Inhouse Slideshow Design Makeover Tutorial

One of the last times we considered the way we “worked” using our “Inhouse Slideshow Design” was when we presented Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial below, some time back. Perhaps, that is because this method has gone out of favour with us, with the number of image files required, and we’ve preferred in more recent times to …

  • annotate individual screenshots
  • compose multi-slide PDF presentations
  • compose multi-slide animated GIF presentations
  • compose multi-slide video presentations (much less often) … rather than using …
  • inhouse slideshow … when many slides are needed to explain a blog posting

Looking back, we spent too long creating these inhouse slideshows, compiling image lists into td cells of a single tr row in a single table element within individually tailored index.html (HTML) files.

Today’s makeover genericizes an overarching piece of PHP (we’ll be calling index.php) we place into the web server directory with these


foreach (glob("*-[0-9]*.[jJgGpP][pPiInN]*") as $ifil) {
if (strpos($spush, "'" . $surlprefix . $ifil . "'") === false) {
$ibits=explode("-", $ifil);
if (sizeof($ibits) > 1) {
$proposedstitle=str_replace("_", " ", $ibits[0]);
if ($proposedstitle != $stitle) {
if ($stitle == "") {
$stitle=$proposedstitle;
} else if (strpos($sothers, $proposedstitle) === false) {
$spush.="\n firstones.push(" . $scnt . "); \n";
$spush.="\n lastones.push(" . (-1 + $scnt) . "); \n";
$sothers.="<br><a id='apre" . $sscnt . "' href='#s" . $scnt . "' title=\"Movie'ize Here vs Follow Red Right Arrows with Bottom Scrollbar\" onclick='prehavealook(this); havealook(-" . $scnt . ");'>" . $proposedstitle . "</a>";
$sscnt++;
}
}
$smodebit.="\n if (smode != '0') document.getElementById('row').innerHTML+='<td><span style=\"color:red;font-size:14px;\"><b>--></b></span></td><td><img onclick=\"onck(this);\" id=\"i" . $scnt . "\" src=\"" . $surlprefix . $ifil . "\" title=\"" . $proposedstitle . "\" /></td>'; \n";
$spush.="\n uarraydatauri.push('" . $surlprefix . $ifil . "'); \n";
$scnt++;
}
}
}

… image filenames we can collect in that “glob” friendly *-[0-9]*.[jJgGpP][pPiInN]* (filespec) habit we had (and have), make genericization possible, and we’ll proceed on that understanding. What extra is needed, though, is to cater for more than one set of such slideshow image sets within any one web server directory (gleaned off the incoming URL, in PHP).

Here’s what we came up with in PHP called index.php we’ll start placing into the relevant rjmprogramming.com.au web server folders, over the next several days.


Previous relevant Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial is shown below.

Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial

Animated GIF and Slideshow via PHP Writing PHP Data URI Tutorial

To us, there are great similarities between animated GIFs and slideshows, as two forms of “presentation”, and so to extend yesterday’s Animated GIF via PHP Writing PHP Data URI Tutorial animated GIF creator “PHP Writes PHP” web application that now has the option for data URI “exports” we add the functionality for …

  • slideshow creation (using our inhouse methods) which defaults to a horizontal (hashtag type of) navigation … as well as adding a …
  • slideshow creation, with Data URI image data, using functionality as if CSS z-index (ie. slides stacked on top of each other in “overlay” style) was being used, but actually isn’t …

… that little bit different to another “stacked” (or z-index feeling) approach we talked about with Multiple Class Slideshow Details Tutorial, where HTML element “class” properties were changed so that the last class defined reflects the look of the slideshow slide desired at any given time. We just use an array, and a setTimeout timer to achieve the same ends today, with our work (or “presentation”). If this “horizontal versus stack” navigation choice interests you, also take a read of HTML Input Element Types Randomized History Tutorial.

Again, with all this added functionality, because it is “hosted” in an HTML iframe element all the existant web browser (Windows right click or Mac OS X two finger gesture) functionality can come into play, and make life quite interesting for your non-mobile users “collecting” data URIs … there are worse hobbies!

You can see this in the context of how this PHP tutorial_to_animated_gif.php code changed for slideshows in this way or try it as a live run.


Previous relevant Animated GIF via PHP Writing PHP Data URI Tutorial is shown below.

Animated GIF via PHP Writing PHP Data URI Tutorial

Animated GIF via PHP Writing PHP Data URI Tutorial

The previous relevant “PHP writes PHP” methodology animated GIF creator we talked about, first, with Animated GIF via PHP Writing PHP Primer Tutorial came back to mind yesterday with our Missing Javascript Audio on Unmute Tutorial, where we pondered on whether an animated GIF could be represented on a webpage by a data URI. Why take an interest in this? Data URIs are very important to do with …

  • future mobile development web form navigation benefits from their usage
  • the use of data URIs make your web pages independent of web server location issues, so make your web data more portable, and flexible

… and ideally, animated GIFs are also not just a decorative part of all this web application usage (as they can be a very efficient representation of an animation that could not be a more succinct way to show that animation or presentation), and if they can be made to be like any other GIF or image data file in the ways they can be represented (and used), then that is all for the good.

So we changed the Jeroen van Wissen’s inspired PHP (“PHP writes PHP” methodology) code tutorial_to_animated_gif.php code allow for this extra animated GIF data URI representation in a new additional HTML iframe (containing the animegif.html of code below) that when harnessing existant web browser (Windows right click or Mac OS X two finger gesture) functionality can glean for us, as required, that animated GIF’s data URI representation. But don’t get too excited about this being rocket science, in that with a bit of effort, and PHP, it could have been gleaned from what we already produced, in that (in PHP “land”) …


$lastbitto="\$fp = fopen('animegif.gif', 'w');
\$data = \$gif->GetAnimation();
\$dataUri = 'data:image/gif;base64,' . base64_encode(\$data);
fwrite(\$fp, \$data);
fclose(\$fp);
\$fp = fopen('animegif.html', 'w');
fwrite(\$fp, '<!doctype html><html><body><h1>Data URI version below<h1><br><h4> ... via web browser (Windows right click, Mac OS X two finger gesture ...</h4><br><img src=' . \"\\n\" . \$dataUri . \"\\n\" . ' title=DataURI></img></body></html>');
fclose(\$fp);";

You can see this in the context of how this PHP code changed in this way or try it as a live run.


Previous relevant Animated GIF via PHP Writing PHP Primer Tutorial is shown below.

Animated GIF via PHP Writing PHP Primer Tutorial

Animated GIF via PHP Writing PHP Primer Tutorial

We find another very useful reason for PHP to write PHP. Today we establish a PHP web application to dynamically create Animated GIF images via some still images, like Gifpal would do.

We have some great open source PHP code to thank for the basis of the functionality we found at Jeroen van Wissen’s very useful link, thanks.

Then we added a more user friendly interface to get the information off the user we need. We present this in an HTML form, which navigates to the same PHP to do the actual assembly of the Animated GIF via techniques where PHP writes PHP … and really needs to, to be useful.

Do you remember, last, when we did some PHP writing PHP functionality … PHP Writes PHP Vertical TextBoxes Primer Tutorial?

And inside the PHP it makes big use of the GD and Image Functions to read and write the image data we assemble via the user information.

This Animated GIF form of animation is the easiest to implement, as it consists of just the one GIF image file, but the user has very little control over the animation settings, such as the delay between stills, one of the settings we ask about in our web application.

Our PHP source code today you could call tutorial_to_animated_gif.php and we redirect you to some live run ideas …

  • normal run with HTML form which posts back to itself … live run
  • example GET parameters run (like our tutorial picture)

Hope you find this tutorial useful.

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.

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