{"id":24814,"date":"2016-09-17T03:01:15","date_gmt":"2016-09-16T17:01:15","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24814"},"modified":"2017-03-29T11:59:47","modified_gmt":"2017-03-29T01:59:47","slug":"gimp-free-select-tool-and-css-rotation-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-free-select-tool-and-css-rotation-primer-tutorial\/","title":{"rendered":"Gimp Free Select Tool and CSS Rotation Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.html?image=http%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Flead.png&#038;blurb=You%20are%20getting%20mindful%20...&#038;pendulum=y\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Gimp Free Select Tool and CSS Rotation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.jpg\" title=\"Gimp Free Select Tool and CSS Rotation Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Free Select Tool and CSS Rotation Primer Tutorial<\/p><\/div>\n<p>There are a few &#8220;themes&#8221; to today&#8217;s HTML and Javascript and CSS web application we&#8217;ve written, that also features in WordPress 4.1.1&#8217;s <a target=_blank title='Gimp Free Select Tool and CSS Rotation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-free-select-tool-and-css-rotation-primer-tutorial\/'>Gimp Free Select Tool and CSS Rotation Primer Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>creation of image of a white lead with transparent background featuring Gimp&#8217;s &#8220;Free Select&#8221; tool and the role of <a target=_blank title='Realia information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Realia_(education)'>Realia<\/a> in learning, to focus attention and\/or amusement &#8230; in order to &#8230;<\/li>\n<li>a desire to attempt to genericize the interim <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.html-GETME\" title=\"One up from original analogue_clock code\">analogue_clock.htm<\/a> functionality, last looked at with our blog posting thread ending with <a target=_blank title='Analogue Clock Timezone Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-timezone-tutorial\/'>Analogue Clock Timezone Tutorial<\/a>, for other purposes &#8230; such as a pendulum movement for today&#8217;s rather lame connection of &#8230;<\/li>\n<li>make a pretty lame joke embedded in the <a title='Fitbit Activity Tracker Bluetooth Primer Tutorial' href='#fatbpt'>Fitbit Activity Tracker Bluetooth Primer Tutorial<\/a> as shown below<\/li>\n<\/ul>\n<p> &#8230; but it&#8217;s often the &#8220;lame&#8221; ideas that get you learning lots, as they are often quite difficult to &#8220;nut out&#8221; actually.<\/p>\n<p>Let&#8217;s show that &#8220;lame&#8221; idea again below &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.html?image=http%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Flead.png&#038;blurb=You%20are%20getting%20mindful%20...&#038;pendulum=y' style='width:100%;height:400px;'><\/iframe><\/p>\n<p>So, roughly, what steps went into the creation of our image &#8230; <img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lead.png\" title=\"Lead image realia\"><\/img> &#8230; realia.<\/p>\n<ol>\n<li>photograph it laid out on table with iPad Camera app<\/li>\n<li>via iPad Photos app email it to myself to pick up with MacBook Pro&#8217;s Gmail email and download, initially to Paintbrush<\/li>\n<li>resize to 553 x 553 pixels, like the compass needle used in <a target=_blank title='Analogue Clock Timezone Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-timezone-tutorial\/'>Analogue Clock Timezone Tutorial<\/a> to compare &#8220;apples with apples&#8221; we guess, in Paintbrush, then Save As&#8230; <i>lead.png<\/i><\/li>\n<li>open <i>lead.png<\/i> in Gimp and rotate 90 degrees (which we should have thought of to do right back at the iPad Camera app, if we&#8217;d been &#8220;mindful&#8221; enough &#8230; chortle, chortle)<\/li>\n<li>in Gimp use Tools -&gt; Selection Tools -&gt; Free Select tool to trace out and Copy the <i>lead<\/i> image parts into the Clipboard<\/li>\n<li>in Gimp set opacity of whole image to 0% and Export As&#8230; <i>lead.png<\/i> &#8230; effectively clobbering it<\/li>\n<li>reopen <i>lead.png<\/i> in Paintbrush and Paste in the contents of the Clipboard, and place this centrally<\/li>\n<li>in Paintbrush Save As&#8230; <i>lead.png<\/i> &#8230; effectively clobbering it again &#8230; for the last time<\/li>\n<\/ol>\n<p>Roughly speaking, what initial genericizations have we applied for the new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.html-GETME\" title='generic_swinger.html'>generic_swinger.html<\/a> HTML and Javascript and CSS code &#8230;<\/p>\n<ul>\n<li>introduced GET parameter (ie. in address bar URL) functionality for &#8230;\n<ol>\n<li>image URL<\/li>\n<li>&#8220;pendulum&#8221; mode (for 90 degree to and fro arcing, rather than the 360 degrees of analogue clock) <\/li>\n<li>text (that replaces the analogue clock datestamp text)<\/li>\n<li>number of <i>hands<\/i> &#8230; default 1 &#8230; but can have up to 3 &#8230; our &#8220;hand&#8221; is a &#8220;lead&#8221;, for our purposes<\/li>\n<\/ol>\n<\/li>\n<li>allowed for mapped bearings to have rotations going to and fro, as for &#8220;pendulum&#8221; mode (so far), rather than continuously clockwise, as with the analogue clock<\/li>\n<\/ul>\n<p>You can see this as a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.html?image=http%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Flead.png&#038;blurb=You%20are%20getting%20mindful%20...&#038;pendulum=y\" title=\"Pendulum lead live run\">&#8220;pendulum&#8221; mode <i>lead<\/i> live run<\/a> or raw <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.html\" title=\"Click picture\">live run<\/a>.  You can peruse how it was developed from that interim analogue clock code via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.html-GETME\" title='generic_swinger.html'>this link<\/a>.<\/p>\n<hr>\n<p id='fatbpt'>Previous relevant <a target=_blank title='Fitbit Activity Tracker Bluetooth Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/fitbit-activity-tracker-bluetooth-primer-tutorial\/'>Fitbit Activity Tracker Bluetooth Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/fitbit.pdf\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Fitbit Activity Tracker Bluetooth Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/fitbit008.jpg\" title=\"Fitbit Activity Tracker Bluetooth Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Fitbit Activity Tracker Bluetooth Primer Tutorial<\/p><\/div>\n<p><a target=_blank title='Fitbit landing page' href='https:\/\/www.fitbit.com'>Fitbit<\/a> devices, in our case an <a target=_blank title='Fitbit device information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Fitbit'>activity tracker<\/a>, feels, for me at least, like one of the most integrated bits of computer, or perhaps you&#8217;d say &#8220;leisure&#8221;, equipment around.  In helping set one up recently, it was really impressive to me the integration among &#8230;<\/p>\n<ul>\n<li>Fitbit device<\/li>\n<li>iPad Fitbit app<\/li>\n<li>iOS Notifications<\/li>\n<li>Bluetooth<\/li>\n<li>WiFi<\/li>\n<li>Windows laptop<\/li>\n<li>Web reporting software<\/li>\n<\/ul>\n<p> &#8230; and though we are so very fond of &#8220;ubiquitous&#8221; black and white leads around here, dealing with hardware and software not involving a lead of any sort, is quite pleasurable.  Mind you, with <i>leads<\/i>, we feel that &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/generic_swinger.html?image=http%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Flead.png&#038;blurb=You%20are%20getting%20mindful%20...&#038;pendulum=y' style='width:100%;height:400px;'><\/iframe><\/p>\n<p>Nor that idea, with a lot of software, that assumes you will be available almost 24\/7, and it giving the impression that this is a boon to your life.  Maybe to some, but our motto is &#8230; &#8220;forget the hype, unless it really has <i>added<\/i> to your life, rather than just putting on slightly more than it inconveniences&#8221; &#8230; pretty quirky adage, eh wot &#8230; guv&#8217;.  But seriously, am happy to say the Fitbit experience was so much better than we thought it would be.<\/p>\n<p>And the major reason for this is <a target=_blank title='Bluetooth information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Bluetooth'>Bluetooth<\/a> technology, as well as the great iOS <a target=_blank title='Notifications on iOS' href='https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/features\/notifications\/'>Notifications<\/a> functionality, which we&#8217;ve tried to talk about before &#8230; can remember sitting in the VM Golf with a DVD Player experimenting for hours &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=dDVp-nGo77o#t=2m10s'>&#8220;good times&#8221;<\/a>.  Let&#8217;s see a bit of what Wikipedia has to say about this technology &#8230;<\/p>\n<blockquote><p>\nBluetooth is a wireless technology standard for exchanging data over short distances (using short-wavelength UHF radio waves in the ISM band from 2.4 to 2.485 GHz[4]) from fixed and mobile devices, and building personal area networks (PANs). Invented by telecom vendor Ericsson in 1994,[5] it was originally conceived as a wireless alternative to RS-232 data cables. It can connect several devices, overcoming problems of synchronization.\n<\/p><\/blockquote>\n<p>Take a look at this image courtesy of <a target=_blank title='Useful diagram - thanks' href='www.projecthealthdesign.org\/projects\/round-2-projects\/chronologymd'>Chronology.MD &#8211; Project HealthDesign<\/a> putting a Fitbit device into a health monitoring usage framework &#8230;<\/p>\n<p><img title='Fitbit device network example' src='http:\/\/image.slidesharecdn.com\/projecthealthdesign-technicalarchitecturediagrams-111019131614-phpapp01\/95\/project-healthdesign-technical-architecture-diagrams-5-728.jpg?cb=1319120372'><\/img><\/p>\n<p>Once heard about the proportion of the world&#8217;s data that Fitbit applications represent, and remember being staggered, and so having a feeling you would not be alone if you acquired your own <a target=_blank title='Fitbit landing page' href='https:\/\/www.fitbit.com'>Fitbit<\/a>.<\/p>\n<p>We&#8217;ll leave you today with a &#8220;stream of consciousness&#8221; PDF <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/fitbit.pdf\" title='Click picture'>&#8220;slideshow&#8221;<\/a> view of some of the setup and early integration days of the Fitbit activity device communicating with an iPad and Windows laptop.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24737' onclick='var dv=document.getElementById(\"d24737\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24737' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d24814' onclick='var dv=document.getElementById(\"d24814\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gimp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24814' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are a few &#8220;themes&#8221; to today&#8217;s HTML and Javascript and CSS web application we&#8217;ve written, that also features in WordPress 4.1.1&#8217;s Gimp Free Select Tool and CSS Rotation Primer Tutorial &#8230; creation of image of a white lead with &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-free-select-tool-and-css-rotation-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,16,37],"tags":[214,281,491,576,652,896,997,1072,1116,2005,1319],"class_list":["post-24814","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gimp","category-tutorials","tag-clipboard","tag-css","tag-gimp","tag-html","tag-javascript","tag-paintbrush","tag-programming","tag-rotation","tag-selection","tag-tool","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24814"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=24814"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24814\/revisions"}],"predecessor-version":[{"id":29205,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/24814\/revisions\/29205"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=24814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=24814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=24814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}