Image Flipping or Flopping at Speed Sharing Tutorial

Posted on by
Image Flipping or Flopping at Speed Sharing Tutorial

Image Flipping or Flopping at Speed Sharing Tutorial

To value add with a web application, further to yesterday’s Image Flipping or Flopping at Speed Browsing Tutorial, we see it as important to get to a point where you can broach that big philosophical question …

Do you see what I see?

… and the most approachable way we know to attempt this is to allow an …

  • email … or …
  • SMS

… recipient be able to click a link within an email or SMS, and recreate a lot of what the originator is trying to convey, information wise.

To do this, we use …

  • “a” href=”mailto:[EmailAddress]?subject=Image%20Flip%20or%20Flop&body=encodeURIComponent(originatorURLsimulatingCurrentLook)”
  • “a” href=”sms:[SMSnumber]&body=encodeURIComponent(originatorURLsimulatingCurrentLook)” … or …

… elements constructed on the fly via the user press of two new buttons presented (within the Javascript script element’s document.write clause) …

<script type=text/javascript>

document.write(' blah blah blah <br><br>Show Axis <input id=axchk type=checkbox onchange=changeax(this); ' + (showax == true ? 'checked' : '') + '></input>  <button onclick=" doemail(); " id="butemail">Email &#128231;</button>  <button onclick=" dosms(); " id="butsms">SMS &#128223;</button><br><br> blah blah blah ');

</script>

… via …


function constructahref() {
var phrefis=document.URL.split('?')[0].split('#')[0];
phrefis+='?radius=' + encodeURIComponent('' + brad) + '&rpm=' + encodeURIComponent('' + rpm) + '&transform=' + encodeURIComponent(document.getElementById('sforf').value) + '&axis=' + (showax == true ? 'y' : 'n') + '&#url=' + (theimgurl == 'http://www.rjmprogramming.com.au/Android/NalaLuna.jpg' ? '' : encodeURIComponent(document.getElementById('myimg').src));
return phrefis;
}


function doemail() {
var anchor=null;
var emis=prompt('Please enter email address to send to.', '');
if (emis == null) { emis=''; }
if (emis.indexOf('@') != -1) {
anchor = document.createElement('a');
anchor.href = 'mailto:' + emis.trim() + '?subject=My%20Flip%20or%20Flop&body=' + encodeURIComponent(constructahref());
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();


} else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(constructahref());
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}

function dosms(){
var anchor=null;
var emis=prompt('Please enter SMS number to send to.', '');
if (emis == null) { emis=''; }
if (emis.indexOf('@') != -1) {
anchor = document.createElement('a');
anchor.href = 'mailto:' + emis.trim() + '?subject=My%20Flip%20or%20Flop&body=' + encodeURIComponent(constructahref());
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();


} else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(constructahref());
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}

So what is the point of the new checkbox? Well, that involves some aesthetic display work involving a new horizontal rule ( ie. hr <hr id=myhr style=display:none;z-index:-1;transform:rotate(90deg);overflow:visible;></hr> ) element we use to approximate the axis around which the Flip or Flop (of the image) is taking place …


var iw=0, ih=0;
var showax=(location.search + ('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'').replace(/^\#/g,'&')).split('axis=')[1] ? ((decodeURIComponent((location.search + ('' + location.hash).replace(/^null/g,'').replace(/^undefined/g,'').replace(/^\#/g,'&')).split('axis=')[1].split('&')[0])).toLowerCase().indexOf('y') == 0 ? true : false) : true;



function changef(tbo) {
if (tbo.value.toLowerCase() == 'flip') {
imgo.style.transform='scaleY(1)';
sxis=1.0,
syis=0.0;
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(10 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + iw) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(90deg)';
} else if (tbo.value.toLowerCase() == 'flop') {
imgo.style.transform='scaleX(1)';
//alert('here');
sxis=0.0,
syis=1.0;
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(30 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + ih) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px'; // + eval(eval('' + eval(10 + eval('' + iw))) / 2) + 'px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(0deg)';
} else if (tbo.value.toLowerCase() == 'flipflop') {
imgo.style.transform='scaleX(1)';
imgo.style.transform='scaleY(1)';
//alert('here');
sxis=0.1,
syis=0.0;
ffnum=0;
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(10 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + iw) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(90deg)';
} else if (tbo.value.toLowerCase() == 'flopflip') {
imgo.style.transform='scaleX(1)';
imgo.style.transform='scaleY(1)';
//alert('here');
sxis=0.0,
syis=0.1;
ffnum=0;
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(10 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + iw) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(90deg)';
}
}

function doanim() {
if (Math.abs(sxis) > 0.5) {
sxis=eval(-1.0 * sxis);
imgo.style.transform='scaleX(' + sxis + ')';
} else if (Math.abs(syis) > 0.5) {
syis=eval(-1.0 * syis);
imgo.style.transform='scaleY(' + syis + ')';
} else if (Math.abs(sxis) > 0.0) {
imgo.style.transform=flipflops[ffnum];
if (flipflops[ffnum].indexOf('X(-') != -1) {
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(10 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + iw) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(90deg)';
} else if (flipflops[ffnum].indexOf('Y(-') != -1) {
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(30 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + ih) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px'; // + eval(eval('' + eval(10 + eval('' + iw))) / 2) + 'px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(0deg)';
}
ffnum++;
if (ffnum >= eval('' + flipflops.length)) { ffnum=0; }

} else if (Math.abs(syis) > 0.0) {
imgo.style.transform=flopflips[ffnum];
if (flopflips[ffnum].indexOf('X(-') != -1) {
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(10 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + iw) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(90deg)';
} else if (flopflips[ffnum].indexOf('Y(-') != -1) {
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(30 + eval('' + Math.max(ih,iw))) + 'px';
//document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + ih) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px'; // + eval(eval('' + eval(10 + eval('' + iw))) / 2) + 'px';
//document.getElementById('myhr').style.backgroundColor='black';
document.getElementById('myhr').style.transform='rotate(0deg)';
}
ffnum++;
if (ffnum >= eval('' + flopflips.length)) { ffnum=0; }
}
setTimeout(doanim, Math.round(isecs * 1000));
}


function startanim(isio) {
imgo=isio;
iw=imgo.width;
ih=imgo.height;
if (!started) {
setTimeout(doanim, Math.round(isecs * 1000));
}
started=true;
var rectone=document.getElementById('rpm').getBoundingClientRect();
var recttwo=document.getElementById('imgurl').getBoundingClientRect();
var rectthree=document.getElementById('radius').getBoundingClientRect();
document.getElementById('imgurl').style.width='' + eval(eval('' + rectone.right) - eval('' + recttwo.left)) + 'px';
document.getElementById('radius').style.width='' + eval(eval('' + rectone.right) - eval('' + rectthree.left)) + 'px';
if (dcbi == '') { dcbi=document.getElementById('divcbi').innerHTML; }
if (showax) {
document.getElementById('myhr').style.display='block';
} else {
document.getElementById('myhr').style.display='none';
}
document.getElementById('myhr').style.position='absolute';
document.getElementById('myhr').style.left='0px';
document.getElementById('myhr').style.width='' + eval(10 + eval('' + Math.max(ih,iw))) + 'px';
document.getElementById('myhr').style.height='20px';
document.getElementById('myhr').style.top='' + eval(eval('' + iw) / 2) + 'px';
document.getElementById('myhr').style.transformOrigin='' + eval(eval('' + eval(10 + eval('' + Math.max(ih,iw)))) / 2) + 'px 0px';
document.getElementById('myhr').style.backgroundColor='rgba(127,127,127,0.7)';
document.getElementById('myimg').style.zIndex='2';
document.getElementById('myimg').style.marginTop='5px';
document.getElementById('myimg').style.marginLeft='5px';
document.getElementById('tdleft').style.marginRight='5px';
//alert('' + iw + '.' + ih);
if (tis != 'flip') { changef(document.getElementById('sforf')); }
if (brad != '0') { brad='-999'; changeradius(document.getElementById('radius')); }
}

… in the modified third draft Image Flipping or Flopping at Speed web application you can try, for yourself, also, below.

Previous relevant Image Flipping or Flopping at Speed Browsing Tutorial is shown below.

Image Flipping or Flopping at Speed Browsing Tutorial

Image Flipping or Flopping at Speed Browsing Tutorial

We’ve thought of a few ways to improve on the work of yesterday’s Image Flipping or Flopping at Speed Primer Tutorial, they being …

  • onto yesterday’s Image URL means of addressing your image today we allow for local file browsing of your image file (and transferred into the web application’s image contents via Javascript …

    var imgo=null;
    var sxis=1.0, syis=0.0;
    var rpm=eval(300 / 10);
    var isecs=eval(30 / rpm); // 0.1;
    var imagedurl='', theimgurl='http://www.rjmprogramming.com.au/Android/NalaLuna.jpg';
    var theclass=theimgurl.slice(-96).replace(/\:/g,'!').replace(/\./g,'|'); //'http!//www.rjmprogramming.com.au/Android/NalaLuna|jpg';
    var dcbi='', started=false;


    function resultlook() {
    if (document.getElementById('result').innerHTML != '') {
    imagedurl=document.getElementById('result').innerHTML;
    document.getElementById('result').innerHTML='';
    theimgurl=imagedurl;
    theclass=theimgurl.slice(-96).replace(/\:/g,'!').replace(/\./g,'|');
    document.getElementById('myimg').src=imagedurl;
    imgo=document.getElementById('myimg');
    document.getElementById('myimg').className=theclass;
    document.getElementById('imgurl').placeholder=imagedurl;
    document.getElementById('imgurl').title=imagedurl;
    document.getElementById('imgurl').value='';
    imagedurl='';
    document.getElementById('divcbi').innerHTML=dcbi;
    }
    }


    setInterval(resultlook, 5000);

    … teaming up with the HTML access to our inhouse local file browser …

    <div id=divcbi style=display:inline-block;><iframe scrolling=no frameborder=0 id=cbi data-accept="image/*" style="width:163px;height:228px;margin-top:-204px;display:inline-block;background-color:transparent;" src="/HTMLCSS/client_browsing.htm?d=3121605626826&wording=Allimages%20images%2E%20"></iframe></div>

    … allowing for the data URI to be gleaned this way)
  • allow for a CSS border-radius property be applied to your image via …

    var brad="0";

    function changeradius(tbo) {
    if (eval('' + tbo.value) != brad) {
    brad=('' + tbo.value);
    document.getElementById('myimg').style.borderRadius='' + brad.trim().replace(/px$/g,'') + (brad.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').replace(/px/g,'').trim() == '' ? 'px' : '');
    }
    }
  • onto yesterday’s Flip and Flop transform options today we add FlipFlop and FlopFlip options this way …

    var ffnum=0;
    var flipflops=['scaleX(1) scaleY(1)','scaleX(-1) scaleY(1)','scaleX(-1) scaleY(-1)','scaleX(1) scaleY(-1)'];
    var flopflips=['scaleX(1) scaleY(1)','scaleX(1) scaleY(-1)','scaleX(-1) scaleY(-1)','scaleX(-1) scaleY(1)'];


    function doanim() {
    if (Math.abs(sxis) > 0.5) {
    sxis=eval(-1.0 * sxis);
    imgo.style.transform='scaleX(' + sxis + ')';
    } else if (Math.abs(syis) > 0.5) {
    syis=eval(-1.0 * syis);
    imgo.style.transform='scaleY(' + syis + ')';
    } else if (Math.abs(sxis) > 0.0) {
    imgo.style.transform=flipflops[ffnum];
    ffnum++;
    if (ffnum >= eval('' + flipflops.length)) { ffnum=0; }
    } else if (Math.abs(syis) > 0.0) {
    imgo.style.transform=flopflips[ffnum];
    ffnum++;
    if (ffnum >= eval('' + flopflips.length)) { ffnum=0; }
    }
    setTimeout(doanim, Math.round(isecs * 1000));
    }

    function changef(tbo) {
    if (tbo.value.toLowerCase() == 'flip') {
    imgo.style.transform='scaleY(1)';
    sxis=1.0,
    syis=0.0;
    } else if (tbo.value.toLowerCase() == 'flop') {
    imgo.style.transform='scaleX(1)';
    //alert('here');
    sxis=0.0,
    syis=1.0;
    } else if (tbo.value.toLowerCase() == 'flipflop') {
    imgo.style.transform='scaleX(1)';
    imgo.style.transform='scaleY(1)';
    //alert('here');
    sxis=0.1,
    syis=0.0;
    ffnum=0;
    } else if (tbo.value.toLowerCase() == 'flopflip') {
    imgo.style.transform='scaleX(1)';
    imgo.style.transform='scaleY(1)';
    //alert('here');
    sxis=0.0,
    syis=0.1;
    ffnum=0;
    }
    }

    … to add to the variety of display possibilities

… in a modified second draft Image Flipping or Flopping at Speed web application you can try, for yourself, also, below.

Previous relevant Image Flipping or Flopping at Speed Primer Tutorial is shown below.

Image Flipping or Flopping at Speed Primer Tutorial

Image Flipping or Flopping at Speed Primer Tutorial

The “making of” the recent Select Multiple Webpage Palette Speech Bubble Swipe Tutorial inspired us to start down the road of a new …

Image Flipping or Flopping at Speed

… web application. At first, with it, we wondered, regarding our animation, whether we could …

  • create “smoothed out” flipping or flopping scenarios via CSS keyframes and transition animations … or …
  • use Javascript DOM

… and sadly the “CSS keyframes and transition animations” is a “no go” for this project (ie. not every CSS property can be animated this way, as we have alluded to in the past).

Never mind, today we supplied the starting three controls the user has, over to the right of their image …

  1. image URL (in textbox, in first draft) …
  2. toggling between Flip and Flop ability …
  3. revolutions per minute

… settings in this first draft Image Flipping or Flopping at Speed web application you can try, for yourself, also, below …

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.

This entry was posted in Animation, eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *