{"id":40207,"date":"2018-08-19T03:01:16","date_gmt":"2018-08-18T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=40207"},"modified":"2018-08-19T08:46:32","modified_gmt":"2018-08-18T22:46:32","slug":"octopus-anatomy-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/octopus-anatomy-primer-tutorial\/","title":{"rendered":"Octopus Anatomy Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/octopus.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Octopus Anatomy Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/octopus.png\" title=\"Octopus Anatomy Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Octopus Anatomy Primer Tutorial<\/p><\/div>\n<p>What do Carpentry and Octopus Anatomy have in common?  Many hands make light fittings get a bevelled edge?  No, for us, finding an arrowed diagram for Octopus Anatomy that functioned like the one we used for our Carpentry web application of <a title='Floor Wall and Roof Framing Members Primer Tutorial' href='#fwrfmpt'>Floor Wall and Roof Framing Members Primer Tutorial<\/a> below.<\/p>\n<p>So much so, we kept the same Javascript logic and bits of the HTML other than the &#8230;<\/p>\n<ul>\n<li>img element image &#8230; doh! &#8230; and &#8230;<\/li>\n<li>underlying (image) map element &#8230; created in that similar (great, stupendous) <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> (thanks) method as for the Carpentry web application<\/li>\n<\/ul>\n<p>To get from today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/octopus.html-GETME\" title=\"octopus.html\">octopus.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/octopus.html-GETME\" title=\"octopus.html\">changed code<\/a> then we &#8230;<\/p>\n<ol>\n<li>started with the Carpentry HTML and Javascript code as a basis &#8230;<\/li>\n<li>surfing the net found interesting octopus image via <a target=_blank title='Octopus image Google search' href='https:\/\/www.google.com\/search?client=firefox-b-ab&#038;biw=1280&#038;bih=677&#038;tbs=itp%3Alineart&#038;tbm=isch&#038;sa=1&#038;ei=y2R3W6-kGoWpoASQ9Yq4DA&#038;q=octopus+diagram&#038;oq=octopus+diagram&#038;gs_l=img.3..0l6j0i5i30k1l4.2438.5549.0.5869.8.8.0.0.0.0.311.1536.2-5j1.6.0....0...1c.1.64.img..2.6.1534...0i67k1.0.fYP6jU1Ovh0#imgrc=X7XiaH3WLfDs-M:'>this Google image search<\/a> finding <a target=_blank title='Octopus image Google search' href='https:\/\/www.researchgate.net\/figure\/Schematic-representation-of-external-and-internal-body-parts-of-octopus_fig14_305329627'>this applicable image<\/a> (from &#8220;Methodologies for studying finfish and shellfish biology&#8221; (ISBN: 978-93-82263-03-6) by Dineshbabu Ap), thanks, that we scanned and copied (and which we later change) into an image file on this MacBook Pro that was uploaded to &#8230;<\/li>\n<li>visited mobilefish to create the new image (img element) and associated map element &#8230;<\/li>\n<li>replaced the old Carpentry img and map with the new Octopus ones, pointing the img element <em>src<\/em> property at the correct image &#8230; that image now &#8230;<\/li>\n<li>opened octopus image in <a target=_blank href='http:\/\/www.gimp.org' title='Gimp, or GIMP'>Gimp<\/a> and Gaussian Blurred out the octopus labels via &#8230;\n<ul>\n<li>Tools -&gt; Selection Tools -&gt; Rectangle Select<\/li>\n<li>Filters -&gt; Blur -&gt; Gaussian Blur&#8230; Horizontal: 14.0px Vertical: 14.0px<\/li>\n<\/ul>\n<\/li>\n<li>(unit) tested code, and realized we&#8217;d forgotten to &#8230;<\/li>\n<li>within the new octopus img and map code replace all &#8221; title=&#8221; for &#8221; data-title=&#8221; (to hide answers from the user) and &#8221; href=&#8221; for &#8221; data-href=&#8221; to stop navigation resetting the score<\/li>\n<\/ol>\n<p> &#8230; to arrive at where we are at with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/octopus.html\" title=\"Click picture\">live run<\/a>.  We hope you try it, and learn a bit about Octopus Anatomy should that be your thing!<\/p>\n<hr>\n<p id='fwrfmpt'>Previous relevant <a target=_blank title='Floor Wall and Roof Framing Members Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/floor-wall-and-roof-framing-members-primer-tutorial\/'>Floor Wall and Roof Framing Members 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\/HTMLCSS\/floor_wall_roof_framing_members.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Floor Wall and Roof Framing Members Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/floor_wall_roof_framing_members.png\" title=\"Floor Wall and Roof Framing Members Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Floor Wall and Roof Framing Members Primer Tutorial<\/p><\/div>\n<p>We all learn differently, but personally, I find it easier to learn things of a certain ilk and things that are new to me, when the study material is augmented by pictures in the form of a diagram or photograph or video, perhaps.  I know very little about carpentry, and get lost in conversations talking about &#8220;joists&#8221; and &#8220;bearers&#8221;, so, today, we&#8217;ve purloined the great <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> image map (of HTML area elements) creator website and <a target=_blank title='Very useful webpage' href='https:\/\/no.pinterest.com\/explore\/jack-stud\/'>this very useful webpage<\/a> (the source of the great diagram &#8230; thanks) to piece together today&#8217;s &#8220;click and learn&#8221; web application.<\/p>\n<p>We use some <a target=_blank title='Overlay blog posts' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a> techniques with today&#8217;s game where the user tries to identify diagram labels Gaussian Blurred out (via GIMP) while a non-Gaussian-Blurred-out image is used (in an overlayed way) as the background (via background-position definitions) for HTML divs &#8230;<\/p>\n<ul>\n<li>position:absolute; left:[derivedViaMinAreaXCoords]px; top:[derivedViaMinAreaYCoords]px; width:[derivedViaMaxMinDiffAreaXCoords]px; height:[derivedViaMaxMinDiffAreaYCoords]px;<\/li>\n<li>z-index:9;<\/li>\n<li>background:URL([non-Gaussian-Blurred-out_image]); background-position:-[derivedViaMinAreaXCoords]px  -[derivedViaMinAreaYCoords]px;<\/li>\n<li>data attributes (eg. data-title) hide answers from the user to avoid making it all too easy, and internalize navigation (eg. data-href)<\/li>\n<\/ul>\n<p> &#8230; <a target=_blank title='blank title='Reveal tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a>ed as above when the user gives up (via a space answer) or answers some words correctly in the Javascript prompt window used to prompt the user for &#8220;carpentry&#8221; terminology word matches, the score incrementing for each correct word match.<\/p>\n<p>Now hope you don&#8217;t go around &#8220;nogging&#8221; in public with your newfound knowledge trying out today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/floor_wall_roof_framing_members.html\" title=\"Click picture\">live run<\/a> test of your carpentry and building knowledge.  It is based on HTML and CSS and Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/floor_wall_roof_framing_members.html_GETME\" title=\"floor_wall_roof_framing_members.html\">floor_wall_roof_framing_members.html<\/a> and download, as you wish.<\/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='#d36243' onclick='var dv=document.getElementById(\"d36243\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36243' 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='#d40207' onclick='var dv=document.getElementById(\"d40207\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/anatomy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40207' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>What do Carpentry and Octopus Anatomy have in common? Many hands make light fittings get a bevelled edge? No, for us, finding an arrowed diagram for Octopus Anatomy that functioned like the one we used for our Carpentry web application &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/octopus-anatomy-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,14,15,16,37],"tags":[75,152,2479,476,477,2333,491,576,590,652,678,745,800,2657,997,1319],"class_list":["post-40207","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-gimp","category-tutorials","tag-anatomy","tag-blur","tag-carpentry","tag-game","tag-games-2","tag-gaussian-blur","tag-gimp","tag-html","tag-image","tag-javascript","tag-label","tag-map","tag-mobilefish","tag-octopus","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40207"}],"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=40207"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40207\/revisions"}],"predecessor-version":[{"id":40226,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40207\/revisions\/40226"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=40207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=40207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=40207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}