On our macOS 14.5 (23F79) Google Chrome web browser Version 130.0.6723.70 (Official Build) (arm64) we had an issue revisiting the WebGL API using inhouse web application we last talked about with WebGL Prism Canvas Email Tutorial. Other web browsers such as Safari or Firefox or Opera do not have the issue for us.
Perhaps, on your Google Chrome web browser, clicking that “inhouse web application” link above, you too, get the error message …
It doesn’t appear your computer can support WebGL.
Today we’re revisiting our “Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the WebGL API scenario”, we last talked about with PHP and Javascript and CSS WebGL Prism Tutorial as shown below. We revisit with a view to …
make it more aesthetically pleasing, we hope
centre the main graphical elements of the web application when unsupervised and avoid our old “sinful” align=’center’ “habit” usage we talked about at W3C XHTML Nu Checker Validation Primer Tutorial going on, which we diligently changed to style=” width:100%;text-align:center; “ here today … when unsupervised, but …
left justify the main graphical elements of the web application when supervised, so this involved detecting “supervision” and Javascript DOM changes at …
window.onload = function init() { if (document.URL.indexOf('huh=') != -1 || parent.document.getElementById('glcanvas') != null || (document.referrer.indexOf('/HTMLCSS/ShapeDraw') != -1 && document.referrer.indexOf('.htm') == -1)) {
document.getElementById('myform').innerHTML+='<input type=hidden name=huh value=></input>';
document.getElementById('mydiv').style.position='absolute';
document.getElementById('mydiv').style.top='0px';
document.getElementById('mydiv').style.left='0px';
document.getElementById('mydiv').style.width='300px';
document.getElementById('mydiv').style.textAlign='left';
document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="300" height="300"></canvas>';
document.getElementById('mydiv2').style.position='absolute';
document.getElementById('mydiv2').style.top='310px';
document.getElementById('mydiv2').style.left='0px';
document.getElementById('mydiv2').style.textAlign='left';
document.getElementById('mydiv3').style.position='absolute';
document.getElementById('mydiv3').style.top='330px';
document.getElementById('mydiv3').style.left='0px';
document.getElementById('mydiv3').style.textAlign='left';
} else {
document.getElementById('mydiv').innerHTML='<canvas id="gl-canvas" width="400" height="400"></canvas>';
}
canvas = document.getElementById( "gl-canvas" );
// more follows ...
adding new Email functionality via mailto: tags linking to the user’s default Email client program, featuring the ability to …
have the body section of that email be able to have a clipboard image pasted into it, for which we can utilize HTML5 canvas element’s toDataURL() method, teamed up with a window.open popup window of the toDataURL image data, which can be selected and copied, optionally, by the user themselves, should they wish this to make their email more self explanatory … and that canvas element’s “meeting of minds” with WebGL changing as per …
… the help for which we got great ideas from this useful link, thanks, and which allows the canvas element content to be retained long enough to be available for the toDataURL() call of it
As we’ve said before about email, as a communication tool, its use can add a lot of accountability to your web applications, as well as being a great “sharing” method.
To infinity and beyond!! … well, at least to the 3rd dimension … yes, we’re rejoining our Geometry and Land Surveying theme today, rejoining the discussion of PHP and Javascript and CSS Shape Rotation Tutorial as shown below, but giving some additional functionality to show the Convex Polygon shape with an added dimension by displaying its 3D prism equivalent via the WebGL API, modelling the additional code via the public generosity and wonderful resources from the University of New Mexico … our heartfelt thanks.
If you have been a recent reader you’ll have seen that we have been discussing OpenGL. OpenGL has a OpenGL.org landing page which will talk about all the platforms supported, and let’s just remind you about the purpose, with a quote from the webpage …
The Industry’s Foundation for High Performance Graphics
from games to virtual reality, mobile phones to supercomputers
… well, today, we use some of that knowledge … some being the operative word, and we’ll talk more on this tomorrow, but … with the sequence of blog posts culminating in C++ OpenGL in Xcode Generic Regular Prism Drawing Tutorial we learnt some things about graphics software and the concepts of …
object vertices definition
object colour
lighting … direction, type, angle, numbers of sources etcetera
perspective … field of view, aspect ratio, Z position
… and the Land Surveying use of thinking about Survey Traverses as an idea to genericize the vertex definition phase, as this is the major difference between drawing a “cube” or a “hexagonal prism” or a “butterfly in Brazil” (just kidding … that’s for tomorrow (in Klingon time)).
So the wonderful code from the University of New Mexico (via StackOverflow) was to show a cube, and the use of buttons to display animation and rendering “smarts” … so am really really really keen for you to examine this additional HTML code of today you could call webgl_test.html … we change it to add some Land Surveying feeling to the creation of vertices for our Convex Polygon extended into a Prism arrangement as per the Javascript code …
WebGL API performs its graphics via the use of the HTML5 canvas element. We’ll be discussing more on this topic, no doubt, as time goes on.
Here is a link to Shape Draw live run (with Google Line Chart and HTML svg and WebGL 3D Prism drawing and University of New Mexico inspired animation functionality) here.
Here is a link to Shape Draw PHP source code ShapeDraw.php with changes from previous code as per this link.
Try it out, and get into web based 3D graphics via the WebGL API … you’ll be drawing prism animals before the sun goes down!
PHP and Javascript and CSS Shape Rotation Tutorial
We’re continuing on with our Geometry and Land Surveying theme today, following on from yesterday’s PHP and Javascript and CSS Shape Drawing Tutorial as shown below. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements.
If you read yesterday’s posting you’ll see that we added some popup window functionality to display the Convex Polygon created by the web application in a relative sense, and to do this we called on (where variable “opop” is global in scope) …
We’re here, today, to remind you, that that popup doesn’t have to be like a dead fish, just displaying information. It can be interactive itself, and is known to the “parent” window, so can have its own “hidden input” HTML element (for example) as per …
function takealook() {
var things;
if (opop != null) {
if (opop.document.getElementById('myunload').value.indexOf(",") != -1) {
things = opop.document.getElementById('myunload').value.split(",");
opop.close();
opop = null;
if (things.length >= 3) {
if (sipos != null) { clearInterval(sipos); sipos = null; }
var bis = 0.0;
bis += parseFloat(initialbearing);
bis += parseFloat(things[2]);
window.location = "./ShapeDraw.php?sides=" + things[1] + ",0&length=" + things[0] + "&bearing=" + posval(bis);
}
}
}
}
… to allow for some HTML “svg” element rotation functionality, if the button is pressed, that is. One last nicety is to use the Window Event “onunload” to clear the setInterval handler with a web browser close or a user closing the parent webpage as per …
Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here.
Link to Shape Draw PHP source code ShapeDraw.php with changes from code yesterday as per this link.
You may be interested in CSS3 ways to rotate HTML elements as well, so we’ll leave you with this link to point you in the direction of where we have discussed this previously.
It is no coincidence that Geometry and Land Surveying have a lot in common. When there are only small distances we talk about Plane Geometry because the curvature of the earth doesn’t come into the equation. When Earth curvature matters, over longer distances, in Land Surveying the term Geodetic Surveying is often used. Here, the equations used need to model the Earth as close as possible to known measurements.
So today, with our Plane Geometry web application, we start with our previous Survey Traverse web application, and add to its functionality with ability for it to fill out more for the user to describe a regular polygon of their choosing, defined by …
number of polygon sides
length of each polygon side
We also add to the Google Charts Line Graph of the Drawn Shape a popup window showing the polygon as an HTML svg element. Part of the reason for this is that the Google Chart Line Graph can exaggerate the x or y co-ordinate of its plots, but with the HTML svg element, you avoid this issue, as we are just showing you a “relative” view of the shape (ie. as distinct from an “absolute” view with distinct co-ordinates).
The thinking here started with a look at New Century Maths stages 5.2/5.3 “Exterior angle sum of a convex polygon”. Did you know?
The sum of the exterior angles of a convex polygon is 360°.
What we found to be the case, practically speaking, to imagine the drawing of a regular even-sided convex polygon (with “numsides” sides) was …
look north …
turn clockwise (360° / numsides) for first line to draw (NB. there is more symmetry if this number is then divided by 2) … then from then on …
off this previous line, turn clockwise (180° + (360° / numsides)) for subsequent lines
Link to Shape Draw live run (with Google Line Chart and HTML svg functionality) here.
Link to Shape Draw PHP source code ShapeDraw.php with changes from code below as per this link.
Hope you enjoy the geometry ideas, and will leave you with a very useful link that helped with the Convex Polygon method to calculate the Surface Area here.
HTML and Javascript and CSS Survey Traverse Tutorial
Here is a tutorial showing some client-side basics in HTML and Javascript and CSS all in the one HTML file, to simplify concepts. The tutorial subject matter is a webpage to perform Survey Traverse calculations. A Survey Traverse is:
Traverse is a method in the field of surveying to establish control networks.[1] It is also used in geodesy. Traverse networks involve placing survey stations along a line or path of travel, and then using the previously surveyed points as a base for observing the next point. Traverse networks have many advantages, including:
Less reconnaissance and organization needed;
While in other systems, which may require the survey to be performed along a rigid polygon shape, the traverse can change to any shape and thus can accommodate a great deal of different terrains;
Only a few observations need to be taken at each station, whereas in other survey networks a great deal of angular and linear observations need to be made and considered;
Traverse networks are free of the strength of figure considerations that happen in triangular systems;
Scale error does not add up as the traverse is performed. Azimuth swing errors can also be reduced by increasing the distance between stations.
The traverse is more accurate than triangulateration[2] (a combined function of the triangulation and trilateration practice).[3]
Let’s see some simple HTML in action in a tutorial …
Link to HTML “spiritual home” … at W3Schools has many tutorials.
Link to Survey Traverse live run … here.
Link to Survey Traverse live run (additional Google Line Chart functionality) here.
Link to Survey Traverse information … from Wikipedia from which quote above comes.
Link to some downloadable HTML code … rename to SurveyTraverse.html which packages up a lot of Javascript and a little bit of CSS … or JaCvasScriptS … not sure whether this would ever catch on.
Link to some downloadable PHP programming code (additional Google Line Chart functionality) … rename to SurveyTraverse.php
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.
📹 ( 📹 ) means by which a user can choose to suppress the video aspects (but not the controls) to the YouTube video “parent” level webpage(s) we display
📜 ( 📜 ) scroll emoji allowing the Radio playing web application aspects push the relevant video playing parts to the top of the screen
colour picker can allow user tailoring of the background colour to the “parent” level webpages supervising the “grandchild” players of the YouTube videos
“proof of concept” one to allow for user testing of event.stopPropagation() Javascript event bubbling control usage … and yet, is also a …
player of YouTube videos using the YouTube API inhouse interfacing here
… and it is the second functionality we want to emphasize. In such scenarios, we sometimes apply an apt Background Image (we’re applying to all document.body) via …
… and regarding /retro-music-concept-with-headphones-space.jpg we have Freepik to thank for the free headphones background image we found there and downloaded then uploaded into place.
While we’re talking styling another CSS measure we often use to change the aesthetics of a webpage look is to soften some squared off borders via the application of a border-radius.
The meta viewport tag came in handy for this project, as another layer, for mobile platforms, of allowing mobile gestures to genuinely improve the video viewing, for the user …
Another matter with mobile usage and a personalized playlist play scenario was that the use of the Mute and Unmute checkboxes at the “grandparent” level did not amount to a real click at the “grandchild” level, and so we started involving Javascript confirm box querying of users here, and this satisfied as a real user click for mobile platform media play purposes.
on mobile, needing a lot of “user tap maintenance” to keep the “personalized playlist” (consisting of YouTube ID video) music rolling … hence our …
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
… from a preceeding tutorial … well … we still allow that mode of use, but add to that, the possibility of …
on mobile or non-mobile, we now offer the referencing of …
… so that shuffling and, in the case of YouTube Playlists using the YouTube App (if on mobile), looping can be part of the mix in your Song Plays (now appearing in the web application title … doh!! … yay!!!!)
The way to access this new functionality, above, is via the “now always appearing” 🍪 ( 🍪 Cookie button ) new prompt window arrangement …
var xname='';
if (('' + location.hash).replace(/^\#/g,'') != '') {
xname=prompt('Recall name for this playlist. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Spaces at front results in a request to us at RJM Programming to host your proposed playlist on our YouTube channel and we will return a 34 character ID you can use yourself in the textbox presented. Add spaces at end also to just attend to that email off to RJM Programming.', '');
} else {
xname=prompt('Please optionally enter a recallable YouTube (34) or Spotify (22) playlist ID we will save for you from here on in optionally suffixed by # hashtag separated playlist title. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Our supplied YouTube playlist ID example is Nala and Luna (mainly) but please use Cancel to avoid remembering this playlist into the future.', 'PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE#Nala and Luna');
if (xname != null) { if (eval('' + xname.indexOf('#')) > 0) { btoaname=encodeURIComponent(xname.split('#')[1].replace(/\ /g,'_')); xname=xname.split('#')[0]; } usethisnotlh=xname; }
}
… that is possible when no personalized playlist hashtag data is in the mix. If it is, well, that opens another whole story all the way through to allowing the user to (email) request the creation of their personalized list of YouTube video IDs becoming a public facing YouTube Playlist hosted on the RJM Programming YouTube Channel, whereby we moderate, here, and if all passes muster, we return a 34 character YouTube Playlist ID the user can save from then on as a playlist on mobile or non-mobile capable of shuffling and looping (if the YouTube App is invoked, on mobile).
We’ve allowed those YouTube search results to “linger longer” too, by replicating them at the “grandparent level” at the point of time we wipe them from the “parent level”, the latest set appearing just below those top three options we now have going for both non-mobile and mobile platforms.
grandchildren … stop_start_youtube.htmlYouTube API caller obviously not progressing at school, or not changing, often enough, like, if you know what we mean … tut, tut!
YouTube Video API Event Playlist Save and Recall Tutorial
Meanwhile, back at the wishlist, with our recent YouTube API interfacing web application project …
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
… it is the olive ideas we’ve made a start on today. We say “we’ve made a start on” only because, when it comes to programming, it doesn’t pay to close off alternate ideas as you go about looking for solutions. Take “Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)” (for some reason we’re nicknaming “innerHTML” … who wrote this script) …
… well, yes, that would be nice, but, more to the point, we started involving top.document.title in solution making but then, along the way, started incorporating just plain and simple Javascript get/set functionality …
var ajaxs_ih='';
function get_ajaxs_ih() {
return ajaxs_ih;
}
function set_ajaxs_ih(wht) {
ajaxs_ih=wht;
}
… parent.get_ajaxs_ih() and parent.set_ajaxs_ih(strIn) references from the “parent” level referencing the “grandparent” level (of code above) and being able to populate those YouTube search dropdowns more efficiently. This get/set paradigm is “a classic” methodology in a lot of OOP work, further to the recent YouTube Video API Event Radio Play Sharing Tutorial.
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
Of interest, here, might be the “emoji means” and top.document.title means by which we tackle the Mute and unmute dynamically issue. Why use top.document.title here? Well, a grandchild of the grandparent is best placed to …
tell the grandparent the non-muted volume (which seems to always be 100, as you control what 100 means with the actual volume you have for your speakers) … as well as …
obey a grandparent edict to either …
mute
unmute
… the volume as our way to say “keep playing the radio but shush while I take this phone call” in certain scenarios that might happen
… meaning that all the grandparent has to do, effectively “broadcasting” to any “grandchildren YouTube video players”, is “the emoji flagging work” and adjusting (what it knows as) document.title to perform this functionality for the two new input type=checkboxes (appended by an empty span element and nested in a span id=smute element) we add into the HTML design mix via onchange event function Javascript …
… Javascript event control of it’s “bubbling” (up through an element hierarchy), in other words, depending where you place this, stopping it’s “bubbling up” at that element concerned …
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().
We find, around here, we don’t know we’ve created a need for event.stopPropagation() usage until we’ve stumbled onto it, most of the time, so trying to get in ahead of it with today’s proof of conceptto event.stopPropagation() or not to event.stopPropagation() web application feels a bit novel to us, in a good way.
This means by which to toggle that mode of use was more straightforward than “data control” with our musical YouTube API video functionality allowing a user to choose and slot in their own video ideas via either …
YouTube video ID … 11 characters long … or …
search string to try to select a video, via a programmatically populated dropdown, with an 11 character long YouTube video ID
… asking us to do a fair bit of tweaking to our inhouse interfacing …
The recent Making Of Earth Scanner Legs Tutorial set us to thinking about how to offer a toggling arrangement between our inhouse YouTube Embedded Iframe API playing of …
video … with an incarnation of this that plays …
audio … “sort of” only (but able to be toggled back to video playing)
… and it got us wondering how to “dull out” a video. We chose the CSS …
<style>
iframe { filter: invert(45%); }
</style>
If you want a “complete dull out” try filter: invert(50%); … but we wanted to see controls down the bottom, still useful for audio only playing.
onsubmit event function logic (and from here on the two have logic differences) …
function quickbtoa() {
document.getElementById('newcode').value='' + window.btoa(document.getElementById('newcode').value);
document.getElementById('usingcode').value='' + window.btoa(document.getElementById('usingcode').value);
setTimeout(function(){
document.getElementById('newcode').value='' + window.atob(document.getElementById('newcode').value);
document.getElementById('usingcode').value='' + window.atob(document.getElementById('usingcode').value);
}, 2000);
document.getElementById('ifresults').style.display='block';
return true;
}
… and …
received via …
var newcodeinbtoaed=location.search.split('newcode=')[1] ? decodeURIComponent(location.search.split('newcode=')[1].split('&')[0]) : '';
var usingcodeinbtoaed=location.search.split('usingcode=')[1] ? decodeURIComponent(location.search.split('usingcode=')[1].split('&')[0]) : '';
var tag=null;
function execute() {
if (newcodeinbtoaed != '') {
document.getElementById('newcode').value=window.atob(newcodeinbtoaed);
}
if (usingcodeinbtoaed != '') {
document.getElementById('usingcode').value=window.atob(usingcodeinbtoaed);
}
if (newcodeinbtoaed != '') {
tag = document.createElement('script');
tag.setAttribute("type", "text/javascript");
tag.innerHTML = window.atob(newcodeinbtoaed);
document.body.appendChild(tag);
document.getElementById('footer').innerHTML+='<hr>New Javascript Code</hr>';
}
if (usingcodeinbtoaed != '') {
tag = document.createElement('script');
tag.setAttribute("type", "text/javascript");
tag.innerHTML = window.atob(usingcodeinbtoaed);
document.body.appendChild(tag);
document.getElementById('footer').innerHTML+='<hr>Using Javascript Code</hr>';
}
}
… same, same but different … we want to facilitate a user driven discovery modus operandi towards exploring Javascript object method usage, with a mind to the user creating …
overridden methods … and/or …
new methods
… and the example we supply as a default, with thanks to this great webpage whose reworking of …
String.fromCodePoint
… fallback has been used by us for years now.
But, Javascript being that incredibly flexible coding language that it is, based on Object Oriented Programming ( ie. OOP ) as required (think DOM, think OOPs) you can create new methods on the fly very easily (as you do so much with OOP).
Pardon our eternal naivety here, but we always think on this with wonder, because of the “verb” functional way we also think of, when we think of Javascript. To us, it’s like you can be inventing coding language on the fly, rather than just “obeying syntax rules”, if you see what we are getting at here. Javascript has this way of satisfying your needs, no matter how those needs roll! Amazing!
Anyway, we thought you might want to enter …
Javascript object method … whether that be new or overriding … along with optional …
Javascript using that new or overriding Javascript object method
Javascript, in “clientside mode”, has many more asynchronous ideas than it used to, say, a decade ago, where it was mainly setTimeout and setInterval timer functions we turned to, in this regard. It used to be that any idea of “waiting for JS” was not on, but that does not have to be the case with the modern web browsers using “modern Javascript”. Today, for example, we’ve written a “proof of concept” web application making use of …
A microtask is a short function which is executed after the function or program which created it exits and only if the JavaScript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script’s execution environment.
… which, as you may surmise, allows for a “jumping order of execution” paradigm with your Javascript.
we can use navigation via an HTML form method=POST … allowing for large amounts of user written Javascript code they want to dynamically execute … and …
as we mentioned with the recent PHP Tokeniser Primer Tutorial talking about “code as content, teamed with navigation using this code data” …
we leave using Javascript window.btoa …
<?php echo ”
function doit(tdiho) {
document.getElementById('jcode').value=window.btoa(tdiho.innerText);
document.getElementById('mysub').click();
}
“; ?>
… hanging off an HTML td contenteditable=true onblur event logic idea … and …
arrive back using PHP base64_decode …
<?php
if (isset($_POST['jcode'])) {
$thejcode=base64_decode($_POST['jcode']);
}
?>
… so as …
to better handle the transference of real “+” characters in your data (as code is apt to have)
“proof of concept” one to allow for user testing of event.stopPropagation() Javascript event bubbling control usage … and yet, is also a …
player of YouTube videos using the YouTube API inhouse interfacing here
… and it is the second functionality we want to emphasize. In such scenarios, we sometimes apply an apt Background Image (we’re applying to all document.body) via …
… and regarding /retro-music-concept-with-headphones-space.jpg we have Freepik to thank for the free headphones background image we found there and downloaded then uploaded into place.
While we’re talking styling another CSS measure we often use to change the aesthetics of a webpage look is to soften some squared off borders via the application of a border-radius.
The meta viewport tag came in handy for this project, as another layer, for mobile platforms, of allowing mobile gestures to genuinely improve the video viewing, for the user …
Another matter with mobile usage and a personalized playlist play scenario was that the use of the Mute and Unmute checkboxes at the “grandparent” level did not amount to a real click at the “grandchild” level, and so we started involving Javascript confirm box querying of users here, and this satisfied as a real user click for mobile platform media play purposes.
on mobile, needing a lot of “user tap maintenance” to keep the “personalized playlist” (consisting of YouTube ID video) music rolling … hence our …
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
… from a preceeding tutorial … well … we still allow that mode of use, but add to that, the possibility of …
on mobile or non-mobile, we now offer the referencing of …
… so that shuffling and, in the case of YouTube Playlists using the YouTube App (if on mobile), looping can be part of the mix in your Song Plays (now appearing in the web application title … doh!! … yay!!!!)
The way to access this new functionality, above, is via the “now always appearing” 🍪 ( 🍪 Cookie button ) new prompt window arrangement …
var xname='';
if (('' + location.hash).replace(/^\#/g,'') != '') {
xname=prompt('Recall name for this playlist. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Spaces at front results in a request to us at RJM Programming to host your proposed playlist on our YouTube channel and we will return a 34 character ID you can use yourself in the textbox presented. Add spaces at end also to just attend to that email off to RJM Programming.', '');
} else {
xname=prompt('Please optionally enter a recallable YouTube (34) or Spotify (22) playlist ID we will save for you from here on in optionally suffixed by # hashtag separated playlist title. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Our supplied YouTube playlist ID example is Nala and Luna (mainly) but please use Cancel to avoid remembering this playlist into the future.', 'PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE#Nala and Luna');
if (xname != null) { if (eval('' + xname.indexOf('#')) > 0) { btoaname=encodeURIComponent(xname.split('#')[1].replace(/\ /g,'_')); xname=xname.split('#')[0]; } usethisnotlh=xname; }
}
… that is possible when no personalized playlist hashtag data is in the mix. If it is, well, that opens another whole story all the way through to allowing the user to (email) request the creation of their personalized list of YouTube video IDs becoming a public facing YouTube Playlist hosted on the RJM Programming YouTube Channel, whereby we moderate, here, and if all passes muster, we return a 34 character YouTube Playlist ID the user can save from then on as a playlist on mobile or non-mobile capable of shuffling and looping (if the YouTube App is invoked, on mobile).
We’ve allowed those YouTube search results to “linger longer” too, by replicating them at the “grandparent level” at the point of time we wipe them from the “parent level”, the latest set appearing just below those top three options we now have going for both non-mobile and mobile platforms.
grandchildren … stop_start_youtube.htmlYouTube API caller obviously not progressing at school, or not changing, often enough, like, if you know what we mean … tut, tut!
YouTube Video API Event Playlist Save and Recall Tutorial
Meanwhile, back at the wishlist, with our recent YouTube API interfacing web application project …
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
… it is the olive ideas we’ve made a start on today. We say “we’ve made a start on” only because, when it comes to programming, it doesn’t pay to close off alternate ideas as you go about looking for solutions. Take “Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)” (for some reason we’re nicknaming “innerHTML” … who wrote this script) …
… well, yes, that would be nice, but, more to the point, we started involving top.document.title in solution making but then, along the way, started incorporating just plain and simple Javascript get/set functionality …
var ajaxs_ih='';
function get_ajaxs_ih() {
return ajaxs_ih;
}
function set_ajaxs_ih(wht) {
ajaxs_ih=wht;
}
… parent.get_ajaxs_ih() and parent.set_ajaxs_ih(strIn) references from the “parent” level referencing the “grandparent” level (of code above) and being able to populate those YouTube search dropdowns more efficiently. This get/set paradigm is “a classic” methodology in a lot of OOP work, further to the recent YouTube Video API Event Radio Play Sharing Tutorial.
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
Of interest, here, might be the “emoji means” and top.document.title means by which we tackle the Mute and unmute dynamically issue. Why use top.document.title here? Well, a grandchild of the grandparent is best placed to …
tell the grandparent the non-muted volume (which seems to always be 100, as you control what 100 means with the actual volume you have for your speakers) … as well as …
obey a grandparent edict to either …
mute
unmute
… the volume as our way to say “keep playing the radio but shush while I take this phone call” in certain scenarios that might happen
… meaning that all the grandparent has to do, effectively “broadcasting” to any “grandchildren YouTube video players”, is “the emoji flagging work” and adjusting (what it knows as) document.title to perform this functionality for the two new input type=checkboxes (appended by an empty span element and nested in a span id=smute element) we add into the HTML design mix via onchange event function Javascript …
… Javascript event control of it’s “bubbling” (up through an element hierarchy), in other words, depending where you place this, stopping it’s “bubbling up” at that element concerned …
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().
We find, around here, we don’t know we’ve created a need for event.stopPropagation() usage until we’ve stumbled onto it, most of the time, so trying to get in ahead of it with today’s proof of conceptto event.stopPropagation() or not to event.stopPropagation() web application feels a bit novel to us, in a good way.
This means by which to toggle that mode of use was more straightforward than “data control” with our musical YouTube API video functionality allowing a user to choose and slot in their own video ideas via either …
YouTube video ID … 11 characters long … or …
search string to try to select a video, via a programmatically populated dropdown, with an 11 character long YouTube video ID
… asking us to do a fair bit of tweaking to our inhouse interfacing …
The recent Making Of Earth Scanner Legs Tutorial set us to thinking about how to offer a toggling arrangement between our inhouse YouTube Embedded Iframe API playing of …
video … with an incarnation of this that plays …
audio … “sort of” only (but able to be toggled back to video playing)
… and it got us wondering how to “dull out” a video. We chose the CSS …
<style>
iframe { filter: invert(45%); }
</style>
If you want a “complete dull out” try filter: invert(50%); … but we wanted to see controls down the bottom, still useful for audio only playing.
on mobile, needing a lot of “user tap maintenance” to keep the “personalized playlist” (consisting of YouTube ID video) music rolling … hence our …
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
… from a preceeding tutorial … well … we still allow that mode of use, but add to that, the possibility of …
on mobile or non-mobile, we now offer the referencing of …
… so that shuffling and, in the case of YouTube Playlists using the YouTube App (if on mobile), looping can be part of the mix in your Song Plays (now appearing in the web application title … doh!! … yay!!!!)
The way to access this new functionality, above, is via the “now always appearing” 🍪 ( 🍪 Cookie button ) new prompt window arrangement …
var xname='';
if (('' + location.hash).replace(/^\#/g,'') != '') {
xname=prompt('Recall name for this playlist. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Spaces at front results in a request to us at RJM Programming to host your proposed playlist on our YouTube channel and we will return a 34 character ID you can use yourself in the textbox presented. Add spaces at end also to just attend to that email off to RJM Programming.', '');
} else {
xname=prompt('Please optionally enter a recallable YouTube (34) or Spotify (22) playlist ID we will save for you from here on in optionally suffixed by # hashtag separated playlist title. Understand that 34 character words will be seen as YouTube Playlist IDs or 22 character words will be seen as Spotify Playlist IDs for which we will start the ball rolling, and present them ready for you to play. Our supplied YouTube playlist ID example is Nala and Luna (mainly) but please use Cancel to avoid remembering this playlist into the future.', 'PLjsR7WjAKSPU-6URvzZ552o5cvQ2p2GYE#Nala and Luna');
if (xname != null) { if (eval('' + xname.indexOf('#')) > 0) { btoaname=encodeURIComponent(xname.split('#')[1].replace(/\ /g,'_')); xname=xname.split('#')[0]; } usethisnotlh=xname; }
}
… that is possible when no personalized playlist hashtag data is in the mix. If it is, well, that opens another whole story all the way through to allowing the user to (email) request the creation of their personalized list of YouTube video IDs becoming a public facing YouTube Playlist hosted on the RJM Programming YouTube Channel, whereby we moderate, here, and if all passes muster, we return a 34 character YouTube Playlist ID the user can save from then on as a playlist on mobile or non-mobile capable of shuffling and looping (if the YouTube App is invoked, on mobile).
We’ve allowed those YouTube search results to “linger longer” too, by replicating them at the “grandparent level” at the point of time we wipe them from the “parent level”, the latest set appearing just below those top three options we now have going for both non-mobile and mobile platforms.
grandchildren … stop_start_youtube.htmlYouTube API caller obviously not progressing at school, or not changing, often enough, like, if you know what we mean … tut, tut!
YouTube Video API Event Playlist Save and Recall Tutorial
Meanwhile, back at the wishlist, with our recent YouTube API interfacing web application project …
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
… it is the olive ideas we’ve made a start on today. We say “we’ve made a start on” only because, when it comes to programming, it doesn’t pay to close off alternate ideas as you go about looking for solutions. Take “Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)” (for some reason we’re nicknaming “innerHTML” … who wrote this script) …
… well, yes, that would be nice, but, more to the point, we started involving top.document.title in solution making but then, along the way, started incorporating just plain and simple Javascript get/set functionality …
var ajaxs_ih='';
function get_ajaxs_ih() {
return ajaxs_ih;
}
function set_ajaxs_ih(wht) {
ajaxs_ih=wht;
}
… parent.get_ajaxs_ih() and parent.set_ajaxs_ih(strIn) references from the “parent” level referencing the “grandparent” level (of code above) and being able to populate those YouTube search dropdowns more efficiently. This get/set paradigm is “a classic” methodology in a lot of OOP work, further to the recent YouTube Video API Event Radio Play Sharing Tutorial.
st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)
And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!
Of interest, here, might be the “emoji means” and top.document.title means by which we tackle the Mute and unmute dynamically issue. Why use top.document.title here? Well, a grandchild of the grandparent is best placed to …
tell the grandparent the non-muted volume (which seems to always be 100, as you control what 100 means with the actual volume you have for your speakers) … as well as …
obey a grandparent edict to either …
mute
unmute
… the volume as our way to say “keep playing the radio but shush while I take this phone call” in certain scenarios that might happen
… meaning that all the grandparent has to do, effectively “broadcasting” to any “grandchildren YouTube video players”, is “the emoji flagging work” and adjusting (what it knows as) document.title to perform this functionality for the two new input type=checkboxes (appended by an empty span element and nested in a span id=smute element) we add into the HTML design mix via onchange event function Javascript …
… Javascript event control of it’s “bubbling” (up through an element hierarchy), in other words, depending where you place this, stopping it’s “bubbling up” at that element concerned …
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().
We find, around here, we don’t know we’ve created a need for event.stopPropagation() usage until we’ve stumbled onto it, most of the time, so trying to get in ahead of it with today’s proof of conceptto event.stopPropagation() or not to event.stopPropagation() web application feels a bit novel to us, in a good way.
This means by which to toggle that mode of use was more straightforward than “data control” with our musical YouTube API video functionality allowing a user to choose and slot in their own video ideas via either …
YouTube video ID … 11 characters long … or …
search string to try to select a video, via a programmatically populated dropdown, with an 11 character long YouTube video ID
… asking us to do a fair bit of tweaking to our inhouse interfacing …
The recent Making Of Earth Scanner Legs Tutorial set us to thinking about how to offer a toggling arrangement between our inhouse YouTube Embedded Iframe API playing of …
video … with an incarnation of this that plays …
audio … “sort of” only (but able to be toggled back to video playing)
… and it got us wondering how to “dull out” a video. We chose the CSS …
<style>
iframe { filter: invert(45%); }
</style>
If you want a “complete dull out” try filter: invert(50%); … but we wanted to see controls down the bottom, still useful for audio only playing.
We could spend a lifetime telling you about the functionality of various ImageMagick guises and usages, further to the recent Imagick PHP Class Primer Tutorial. We’ve decided to live a little separated from ImageMagick, or we just know we would have dreams about command line switches that turn into snakes or command lines turning into congo lines or command lines telling me about ten things I was never meant to do.
The other day, though, we stumbled upon a webpage rekindling interest, which is far easier these days, with ImageMagick installed on our AlmaLinux web server here at RJM Programming. Mind you, we also had it installed on the old CentOS web server, but it was as if, on CentOS, we had never …
… and the command line had us hooked again. So, we wrote a way you can get hooked too, effectively parsing a favoured ImageMagick “convert” (verb) command into switches, a bit like parsing a language sentence, using PHP.
Yes … in all seriousness to us it depends how we define these ideas. What we said was …
median colour is the one where you line up pixels in order of the (modal) list starting with the more popular one through to the least popular one, and the middle RGB colour value of these we’ll call “the median colour” …
mode colour is easy … the most popular colour (ie. most numerous) … which we had huge help from this great link regarding its suggested PHP GD based code to help, thanks … and …
mean (ie. average) colour is calculated as the rgb(r,g,b) whereby r=moving average of Red pixel “strengths” encountered and g=moving average of Green pixel “strengths” encountered and b=moving average of Blue pixel “strengths” encountered
Why couldn’t a colour system be …
pfoa([pink amount 0 up to 255], [fuchsia amount 0 up to 255]], [olive amount 0 up to 255], [transparency amount 0 to 1]);
?
Well, yes, there are lots of colour systems? There’s one with Cyan and Magenta and something else, but, guess we’re wondering if there is a transference mechanism (in mathematics, like)? And, “is your Red” like “my Red”, is curious with all this?! Anyway, enough philosophy!
HTML/Javascript Binary to Hexadecimal Base Game Tutorial
Remember being pointed out, at school, in mathematics, how you could have numerical counting systems that weren’t base 10, and it blowing my tiny little mind! Then, in high school, imaginary numbers … wow! Still don’t know what they’re useful for?! But, for us, the point is, it can unhinge you to be thrown into, say, what we’d call “a dimensional thing” that you are just not used to.
The next few days we’re devoting to a little more of this sort of thing, with …
today, extending on from the base 2 (binary) and base 8 (octal) and base 16 (hexadecimal) themes of the quiz game of HTML/Javascript Binary/Octal/Hexadecimal Game Tutorial to allow for base numbers you set all the way from 2 to 16 (and please don’t ask me, yet, about fractional (ie. mantissaish) real number representations) … and …
tomorrow, though we really wanted to break open colour Red/Green/Blue (ie. RGB) thinking to other “base thoughts”, for now, because we haven’t found any suitable lead ins yet, we’re settling on the exploration of PHP image “average colour” themes
In today’s quiz work we melded those new base modes of play into the Hexadecimal Way (turn left at Station Street, up High Street, down Lowdown Crook, straight into Park Lane, hard right at Mayfair, and take the Town Drain home or away) where we started adjusting dropdown (ie. select) element innards so as to show blank options, then resurrect them, rather then reinventing 12? wheels …
function restorestuff() {
var sv='';
var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';
if (1 == 2) {
var opts=document.getElementsByTagName('options');
for (var iopts=0; iopts<opts.length; iopts++) {
if (opts[iopts].value != '00') {
if (opts[iopts].innerText != opts[iopts].value) {
opts[iopts].Text=opts[iopts].value;
}
}
}
}
My head hurts thinking about what we’d have had to do to make the other base that we use a lot around here, work! That base is 64, used a lot with webpage information encoding and decoding these days. Think …
to pass across data that is programming language … ie. bound to contain some + characters … being that + is also used to encode a space character … how do you tell the difference between these guises at the other end? … well, lately, we’ve been …
introducing a form onsubmit event where, maybe just for the few seconds needed, the textbox or textarea content is changed to base64 via window.btoa and at some time after the return true; that finishes the event logic you might want to revert back (ie. use combination of setTimeout and window.atob to revert back, for this purpose) … and at the receiving end …
for HTML/Javascript (or PHP, for that matter) use window.atob (only) or for PHP use base64_decode (only) …
to better preserve real + characters in the transfer
HTML/Javascript Binary/Octal/Hexadecimal Game Tutorial
Are you feeling transformational? Maybe calculating? Perhaps didactic? Witheringly logical? You can test how you feel, in a mathematical sense, by playing our “Binary/Octal/Hexadecimal” game today.
The study of bases other than (decimal) 10 in mathematics is very interesting and it is used a lot in computing, a simple example of which is notation like #ffffff to describe the colour white, which lots of us were taught at school as the colour that contains the lot, hence all the 255 (hexadecimal ff) of Red and 255 (hexadecimal ff) of Green and 255 (hexadecimal ff) of Blue in the RGB colour model system. You might think that a computer would be able to work faster with the smaller amounts of data of hexadecimal, but, basically, the computer will, eventually, go and turn this into binary because at the bottom of its design it understands on and off, as you would understand voltage on a Bugs Bunny cartoon if you were the Coyote just missing the Roadrunner, running into an electrical socket running an Eat at Joes sign being switched off, on (sizzle), off, on (sizzle), off, on (sizzled Coyote, meet Daffy Duck?!).
Anyway, see how you go with this game that asks you to solve 5 problems as quickly as possible. One way around you can cheat the system, and this is fine by me, in the sense that the intention is just to put that picture in your head of the powers of 2 involved to get a little bit familiar with them. Another way to do this is to access a text editor that can simultaneously display a hexadecimal view (or dump) of that data. UltraEdit on Windows can do this.
Here is a link to some downloadable HTML (with Javascript) programming code you could rename to binary_quiz.html and a 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.
HTML/Javascript Binary to Hexadecimal Base Game Tutorial
Remember being pointed out, at school, in mathematics, how you could have numerical counting systems that weren’t base 10, and it blowing my tiny little mind! Then, in high school, imaginary numbers … wow! Still don’t know what they’re useful for?! But, for us, the point is, it can unhinge you to be thrown into, say, what we’d call “a dimensional thing” that you are just not used to.
The next few days we’re devoting to a little more of this sort of thing, with …
today, extending on from the base 2 (binary) and base 8 (octal) and base 16 (hexadecimal) themes of the quiz game of HTML/Javascript Binary/Octal/Hexadecimal Game Tutorial to allow for base numbers you set all the way from 2 to 16 (and please don’t ask me, yet, about fractional (ie. mantissaish) real number representations) … and …
tomorrow, though we really wanted to break open colour Red/Green/Blue (ie. RGB) thinking to other “base thoughts”, for now, because we haven’t found any suitable lead ins yet, we’re settling on the exploration of PHP image “average colour” themes
In today’s quiz work we melded those new base modes of play into the Hexadecimal Way (turn left at Station Street, up High Street, down Lowdown Crook, straight into Park Lane, hard right at Mayfair, and take the Town Drain home or away) where we started adjusting dropdown (ie. select) element innards so as to show blank options, then resurrect them, rather then reinventing 12? wheels …
function restorestuff() {
var sv='';
var parts=[], wasbit='', nowbit='', subparts=[], isp=0, numtodo='';
if (1 == 2) {
var opts=document.getElementsByTagName('options');
for (var iopts=0; iopts<opts.length; iopts++) {
if (opts[iopts].value != '00') {
if (opts[iopts].innerText != opts[iopts].value) {
opts[iopts].Text=opts[iopts].value;
}
}
}
}
My head hurts thinking about what we’d have had to do to make the other base that we use a lot around here, work! That base is 64, used a lot with webpage information encoding and decoding these days. Think …
to pass across data that is programming language … ie. bound to contain some + characters … being that + is also used to encode a space character … how do you tell the difference between these guises at the other end? … well, lately, we’ve been …
introducing a form onsubmit event where, maybe just for the few seconds needed, the textbox or textarea content is changed to base64 via window.btoa and at some time after the return true; that finishes the event logic you might want to revert back (ie. use combination of setTimeout and window.atob to revert back, for this purpose) … and at the receiving end …
for HTML/Javascript (or PHP, for that matter) use window.atob (only) or for PHP use base64_decode (only) …
to better preserve real + characters in the transfer
HTML/Javascript Binary/Octal/Hexadecimal Game Tutorial
Are you feeling transformational? Maybe calculating? Perhaps didactic? Witheringly logical? You can test how you feel, in a mathematical sense, by playing our “Binary/Octal/Hexadecimal” game today.
The study of bases other than (decimal) 10 in mathematics is very interesting and it is used a lot in computing, a simple example of which is notation like #ffffff to describe the colour white, which lots of us were taught at school as the colour that contains the lot, hence all the 255 (hexadecimal ff) of Red and 255 (hexadecimal ff) of Green and 255 (hexadecimal ff) of Blue in the RGB colour model system. You might think that a computer would be able to work faster with the smaller amounts of data of hexadecimal, but, basically, the computer will, eventually, go and turn this into binary because at the bottom of its design it understands on and off, as you would understand voltage on a Bugs Bunny cartoon if you were the Coyote just missing the Roadrunner, running into an electrical socket running an Eat at Joes sign being switched off, on (sizzle), off, on (sizzle), off, on (sizzled Coyote, meet Daffy Duck?!).
Anyway, see how you go with this game that asks you to solve 5 problems as quickly as possible. One way around you can cheat the system, and this is fine by me, in the sense that the intention is just to put that picture in your head of the powers of 2 involved to get a little bit familiar with them. Another way to do this is to access a text editor that can simultaneously display a hexadecimal view (or dump) of that data. UltraEdit on Windows can do this.
Here is a link to some downloadable HTML (with Javascript) programming code you could rename to binary_quiz.html and a live run.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
