{"id":63485,"date":"2024-04-29T03:01:38","date_gmt":"2024-04-28T17:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63485"},"modified":"2024-04-29T08:21:22","modified_gmt":"2024-04-28T22:21:22","slug":"colouring-in-drag-and-drop-mobile-postcard-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-mobile-postcard-tutorial\/","title":{"rendered":"Colouring In Drag and Drop Mobile Postcard Tutorial"},"content":{"rendered":"
\"Colouring<\/a>

Colouring In Drag and Drop Mobile Postcard Tutorial<\/p><\/div>\n

Yesterday’s Colouring In Drag and Drop Postcard Tutorial<\/a> mentioned two issues with its Postcard creation functionalities that needed further attention …<\/p>\n

\nWe have more work to do regarding data limits (even with hashtagging) using mobile platforms and the Take Photo idea, and we have some text positioning to fix also …\n<\/p><\/blockquote>\n

… and today we look into that a bit more.<\/p>\n

Regarding “We have more work to do regarding data limits (even with hashtagging) using mobile platforms”<\/i> we were finding the “Take Photo” iOS Camera app functionality was producing images of more than 3000×4000 and as such, though amazingly it can still work in non-mobile, we were not surprised it didn’t work when shaping to create the mainly hashtagged email link required to share a Postcard with an emailee (ie. email recipient). So we did some pruning<\/font> …<\/p>\n


\nvar lesserinurl='';<\/font>
\n
\nfunction checkspag() {
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i) && document.getElementById('result').innerHTML.trim() != '' && lesserinurl == '' && document.getElementById('result').innerHTML.indexOf('data:') == 0) {
\n newimg=document.createElement('img');
\n newimg.onload = function() {
\n \/\/ draw the image onto the canvas
\n \/\/alert(11);
\n newcanvas=document.getElementById('mymobilecanvas'); \/\/document.createElement('canvas');
\n \/\/alert(111);
\n if (newimg.width > 800) {
\n newcanvas.width=800;
\n newcanvas.height=Math.round(newimg.height * 800 \/ newimg.width);
\n \/\/alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
\n newcanvas.getContext('2d').drawImage(newimg, 0, 0, newimg.width, newimg.height, 0, 0, newcanvas.width, newcanvas.height);
\n } else {
\n newcanvas.width=newimg.width;
\n \/\/alert('' + newimg.width + 'x' + newimg.height);
\n newcanvas.height=newimg.height;
\n \/\/alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
\n newcanvas.getContext('2d').drawImage(newimg, 0, 0);
\n }
\n lesserinurl=newcanvas.toDataURL('image\/jpeg', 0.1);
\n document.getElementById('result').innerHTML=lesserinurl;
\n \/\/document.getElementById('inurl').value=lesserinurl;
\n \/\/alert(lesserinurl);
\n \/\/document.getElementById('inurl').blur();
\n }
\n newimg.src = document.getElementById('result').innerHTML;
\n setTimeout(checkspag, 5000);
\n } else <\/font>if (document.getElementById('result').innerHTML.trim() != '' && multistyle == '') {
\n imdu=document.getElementById('result').innerHTML.trim();
\n document.getElementById('result').innerHTML='';
\n document.getElementById('cbi').src='\/HTMLCSS\/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20';
\n \/\/alert(' #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(\/\\ \/g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } <\/sty' + 'le>');
\n if (document.getElementById('ddstyle')) {
\n if (document.getElementById('ddstyle').innerHTML.indexOf(imdu) == -1) {
\n document.getElementById('ddstyle').innerHTML=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); background-repeat:no-repeat; background-size:contain; } <\/sty' + 'le>';
\n }
\n } else {
\n if (document.getElementById('dstyle').innerHTML.indexOf(imdu) == -1) {
\n\/\/alert('Here');
\n document.getElementById('dstyle').innerHTML+=' #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); background-repeat:no-repeat; background-size:contain; } <\/sty' + 'le>';
\n }
\n }
\n setTimeout(checkspag, 5000);
\n } else {
\n setTimeout(checkspag, 5000);
\n }
\n}
\n<\/code><\/p>\n

… using the great HTML5 canvas<\/a> element invention, and found it could send such a pruned down postcard, though we are not ruling out future tweaks that may add back some resolution and size into the future. We’ll see.<\/p>\n

And regarding “we have some text positioning to fix”<\/i>, our hunch about the offset needed to fix being the (opposite of the) amount to the top of the imagery in a normal Colouring In webpage, panned out<\/font> …<\/p>\n


\n var postcard=false;
\n var origmytablerect=null;
\n
\n setTimeout(function(){
\n origmytablerect=document.getElementById('mytable').getBoundingClientRect();<\/font>
\n console.log('356:' + origmytablerect.top);
\n var woois=window.open('', '_blank', 'top=50,left=50,width=800,height=800');
\n if (1 == 1) {
\n woois.document.write('<html>' + document.head.outerHTML.replace('postc' + 'ard=false', 'postc' + 'ard=true') + document.body.outerHTML + '<\/html>');
\n \/\/origmytablerect=woois.document.getElementById('mytable').getBoundingClientRect();
\n \/\/console.log('56:' + origmytablerect.top);
\n if (eval('' + origmytablerect.top) > 0) {
\n var wasthetop=0, thespans=woois.document.getElementsByTagName('span');
\n for (var iispans=0; iispans<thespans.length; iispans++) {
\n if (thespans[iispans].outerHTML.indexOf('absolute;') != -1 && thespans[iispans].outerHTML.indexOf('top:') != -1) {
\n console.log('10:' + thespans[iispans].outerHTML);
\n wasthetop=eval('' + thespans[iispans].outerHTML.split('top:')[1].split(';')[0].replace('px','').trim());
\n wasthetop-=eval('' + origmytablerect.top);
\n thespans[iispans].style.top='' + wasthetop + 'px';
\n }
\n }
\n }<\/font>
\n woois.document.getElementById('mytable').style.position='fixed';
\n woois.document.getElementById('mytable').style.left='0px';
\n woois.document.getElementById('mytable').style.top='0px';
\n woois.document.getElementById('mytable').style.zIndex='23';
\n woois.document.getElementsByTagName('h1')[0].style.display='none';
\n woois.document.getElementsByTagName('h3')[0].style.display='none';
\n woois.document.getElementsByTagName('h3')[1].style.display='none';
\n woois.document.getElementsByTagName('h4')[0].style.display='none';
\n woois.document.getElementById('spancb').style.display='none';
\n woois.document.getElementById('dsource').style.display='none';
\n } else {
\n \/\/woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace('<div id=\"ta' + 'rget\">', '<div id=\"ta' + 'rget\" style=\"position:fixed;top:0px;left:0px;z-index:23;\">') + '<\/html>');
\n woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing=\"0\" sty' + 'le=\"', ' cellspacing=\"0\" sty' + 'le=\"position:fixed;top:0px;left:0px;z-index:23;') + '<\/html>');
\n \/\/woois.document.write('<html>' + document.head.outerHTML + document.body.outerHTML.replace(' cellspacing=\"0\" sty' + 'le=\"', ' cellspacing=\"0\" sty' + 'le=\"margin-top:-150px;z-index:23;') + '<\/html>');
\n
\n woois.document.getElementsByTagName('h1')[0].style.display='none';
\n woois.document.getElementsByTagName('h3')[0].style.display='none';
\n woois.document.getElementsByTagName('h3')[1].style.display='none';
\n woois.document.getElementsByTagName('h4')[0].style.display='none';
\n woois.document.getElementById('spancb').style.display='none';
\n woois.document.getElementById('dsource').style.display='none';
\n }
\n }, 15000);
\n<\/code> <\/p>\n

Only a changed<\/a> experimental_drag_and_drop.htm<\/a> Experimental Drag and Drop<\/a> clientside HTML and Javascript basis was needed to help out our Colouring In<\/a> web application’s Postcard production ideas.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n