{"id":3817,"date":"2021-03-16T16:51:30","date_gmt":"2021-03-16T21:51:30","guid":{"rendered":"https:\/\/www.kasdorf.name\/wordpress\/?p=3817"},"modified":"2022-09-01T12:45:28","modified_gmt":"2022-09-01T17:45:28","slug":"ipanorama-adding-a-compass","status":"publish","type":"post","link":"https:\/\/www.kasdorf.name\/wordpress\/2021\/03\/16\/ipanorama-adding-a-compass\/","title":{"rendered":"iPanorama &#8211; Adding a Compass"},"content":{"rendered":"\n<p>Still playing around with the iPanorama plugin for Word Press. When reading about the features on the web site I noticed it said there was a compass to help keep you headed in the right direction!Since I do mostly 360\u00b0&#8217;s of nature preserves and trails, I thought a compass would be nice. I never could find out how to make it work, and so wrote in the support forum to see what was the secret!<\/p>\n\n\n\n<p>Turns out, it was turned on in the program, one of those many little things that get missed during a major update. No problem, the author soon restored it, and I was off to the races!<\/p>\n\n\n\n<p>It was nice, but I thought it lacking, at least for what I wanted.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-02.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"254\" height=\"218\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-02.jpg\" alt=\"\" class=\"wp-image-3818\"\/><\/a><figcaption>Figure 1: The default compass<\/figcaption><\/figure>\n<\/div>\n\n\n<p>As you can see, it was quite small, and being black and white was not easily noticeable. While some people may like the fact that it is unobtrusive, it wasn&#8217;t for me.<\/p>\n\n\n\n<p>I wrote the plugin author and asked about if, and how it could be changed. He replied promptly that yes it could be easily done in the &#8220;Custom CSS&#8221; section. Unfortunately as much as I wish I was able to program, I can&#8217;t.<\/p>\n\n\n\n<p>He was very accommodating and sent me some sample code. I tried it, and it works so good! And while I can&#8217;t write original code, I can often hack up what is there to tweak it to my tastes.<\/p>\n\n\n\n<p>So, if you have an interest, and want to add, or change the compass. Here are my hopefully simple directions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-01.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"250\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-01-644x250.jpg\" alt=\"\" class=\"wp-image-3820\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-01-644x250.jpg 644w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-01-300x117.jpg 300w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-01-768x299.jpg 768w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-01.jpg 1515w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/a><figcaption>Figure 2: iPanorama Compass activation and offset.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>(1) In the scene you want a compass to appear in first make sure it is enabled.<\/li><li>(2) In the settings, turn the &#8220;Compass&#8221; slider on.<ul><li>Note that you must do this for each scene in which you want the compass to appear.<\/li><\/ul><\/li><li>(3) There is a field for &#8220;North offset&#8221;. Nothing to do now, but you may want to come back here later.  If your compass does not point north correctly change the degree offset here.<ul><li>Tip: clicking on the compass points it due North. If the image is not showing North at the top rotate the image so North is &#8220;Up&#8221; then note the current angle and estimate the degree change needed.<\/li><\/ul><\/li><li>Save the tour, then if you use the preview button you should see the default small arrow. Where it appears depends on the widget (Theme) you are using. It should look like Figure 1 above.<\/li><\/ul>\n\n\n\n<p>But you don&#8217;t want that plain old compass do you! First you need a good compass image. Then to change the default to your custom image, copy this code into the &#8220;Custom CSS&#8221; window:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-03-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"318\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-03-1-644x318.jpg\" alt=\"\" class=\"wp-image-3822\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-03-1-644x318.jpg 644w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-03-1-300x148.jpg 300w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-03-1.jpg 690w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/a><figcaption>Figure 3: Custom CSS code<\/figcaption><\/figure>\n\n\n\n<p>(4) Make sure you enable styles!<\/p>\n\n\n\n<p>(5) enter or paste the code and modify the URL for your compass image.<\/p>\n\n\n\n<pre id=\"block-466158fc-83fc-44f3-8213-472824dcf465\" class=\"wp-block-code\"><code>.ipnrm .ipnrm-widget .ipnrm-compass:before {<br \/>    display:none;<br \/>}<br \/>.ipnrm .ipnrm-widget .ipnrm-compass:after {<br \/>    display:none;    <br \/>}<br \/>.ipnrm .ipnrm-widget .ipnrm-compass.ipnrm-active {<br \/>    width:64px;  <br \/>    height:64px;<br \/>    background-image:url(<em><strong><\/strong><\/em>);<br \/>    background-size:contain;<br \/>}<br \/>?<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-04.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"255\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-04.jpg\" alt=\"\" class=\"wp-image-3819\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-04.jpg 365w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-04-300x210.jpg 300w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/a><figcaption>Figure 4: The custom compass <\/figcaption><\/figure>\n\n\n\n<p>You can further tweak the size using the &#8220;width&#8221; and &#8220;height&#8221; parameters.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-large is-resized\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1-644x1394.png\" alt=\"\" class=\"wp-image-3826\" width=\"314\" height=\"680\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1-644x1394.png 644w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1-139x300.png 139w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1-768x1663.png 768w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1-709x1536.png 709w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1-946x2048.png 946w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/2021-03-16_19-33-46-1.png 1125w\" sizes=\"auto, (max-width: 314px) 100vw, 314px\" \/><\/a><figcaption>It looks okay on a mobile phone also!<\/figcaption><\/figure>\n<\/div>\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-06.png\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"483\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-06-644x483.png\" alt=\"\" class=\"wp-image-3831\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-06-644x483.png 644w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-06-300x225.png 300w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-06-768x576.png 768w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-06-1536x1152.png 1536w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-06.png 2048w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/a><figcaption>iPad with widget &#8211; Note location of compass<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-05.png\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"483\" src=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-05-644x483.png\" alt=\"\" class=\"wp-image-3832\" srcset=\"https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-05-644x483.png 644w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-05-300x225.png 300w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-05-768x576.png 768w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-05-1536x1152.png 1536w, https:\/\/www.kasdorf.name\/wordpress\/wp-content\/uploads\/2021\/03\/iPanorama-Compass-05.png 2048w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/a><figcaption>iPad with widget &#8211; Note location of compass<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Still playing around with the iPanorama plugin for Word Press. When reading about the features on the web site I noticed it said there was a compass to help keep you headed in the right direction!Since I do mostly 360\u00b0&#8217;s of nature preserves and trails, I thought a compass would be nice. I never could [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[239,9],"tags":[240],"series":[],"class_list":["post-3817","post","type-post","status-publish","format-standard","hentry","category-ipanorama","category-wordpress-playground","tag-ipanorama"],"_links":{"self":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts\/3817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/comments?post=3817"}],"version-history":[{"count":0,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts\/3817\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/media?parent=3817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/categories?post=3817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/tags?post=3817"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/series?post=3817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}