Beiträge von SoFla360

  • Bold looking fonts on Mac

    I don't have the answer to your question, but I've noticed web fonts rendering differently between Mac/PC, Chrome/Firefox/IE/Safari, and desktop/mobile in website development. A Google web font I'm using on my website looks much thinner in Mac Safari than in Mac Chrome or Firefox. The font rendering in krpano is likely the same as if the font were used on the web page itself. Font rendering across platforms, browsers, and devices is close, but not totally consistent. If it really bothers you, the best bet is to search for a font where there's not a big rendering difference between your targets. Wish I had some suggestions.

  • Where to find more hotspots?

    People likely create the hotspot graphics on their own using programs like Photoshop. Creating a new static graphic is quite easy while creating an animated graphic would require a bit more work. The easiest approach is to take an existing static or animated graphic that comes with krpano, open in Photoshop (or some other graphic program), then create new designs on another layer while using the original design as a guide. You want the same placement and size as the original. Delete the old graphics/layers then save your new graphic as a PNG-24 using the same name and directory as the original. This approach allows you to get something new without having to edit any code.

    If you change the size or desire an animation with more steps, you would also need to alter the associated XML code.

    Here are two files included with krpano:

    Static: vtourskin_hotspot.png
    Animated: hotspot_ani_white_64x64x20.png

    Search for them, open in Photoshop or another graphic editor and see what you do.

    PS: You can customize the navigation bar using the same approach.

  • Customized Tour Skin

    Hi,

    I've been able to customize the single pano and virtual tour skins to some degree. Now, I'm trying to figure how to get a single custom button to slide up/down along with the default virtual tour skin. See sample here:

    http://www.sofla360.com/photography/pa…a-lighthouse-2/

    The orange button takes you back to the (previous) gallery page. I would like to have it move vertically along with the pano title when thumbnails are shown/hidden or when the nav bar is shown/hidden. I tried adding this button via the vrtourskin.xml, but I could not get it to display. The code is currently part of the customized tour XML and duplicated within each scene. I'm sure there is a way to add it to vrtourskin.xml and get it sliding up/down, I just don't know how.

    Thanks in advance.

  • iphone4 gyroscope plugin

    Hi,

    I'm using the default skin for a single pano and I'd like to add a gyro toggle button that appears at the end of the nav bar only when needed. I have already implemented the gyro functionality, I just need to add in the button. I have read thru the documentation and the thread here, but I'm still not clear on the best approach.

    This functionality is automatically added when using the MAKE VTOUR (MULTIRES) droplet, but not when using the MAKE PANO (MULTIRES) droplet. It would be helpful if this functionality was also added to the single pano droplet and/or there was a toggle button included in the gyro example files.

    Maybe it's outlined somewhere and I'm just missing it? Maybe I can create a new droplet that adds this functionality to the MAKE PANO (MULTIRES) droplet?

    Thanks in advance.

  • WordPress, Full Screen & Mobile - May 2013 Status

    *** The original post has been edited to reflect what I discovered while searching for answers. ***

    Okay... so I'm working on a new website and decided to rework my panos with the latest available code. My previous site was hand-coded from the ground up (HTML/CSS/JS) while the new one will be based in WordPress. My main goal was to determine the best path to the most interactive features - given the current available options.

    There are a lot of different posts regarding WordPress, full screen, mobile and combined solutions. Hopefully this post is helpful to those trying to find their way.

    Three approaches to embedding a pano or tour into a WordPress page:

    • Use iframe code to embed HTML generated via krpano (droplets or manually)
    • Use PanoPress (WordPress plugin) to embed XML generated via krpano (or various other viewers)
    • Use the process outlined on the krpano: 'Embedding into HTML' page

    Results of different approaches:

    Using iframe + krpano code (HTML):

    • Full-screen button/option not available on computer or mobile
    • Gyro available on mobile
    • Code used: <iframe src="/360/panos/01/index.html" width="940" height="529"></iframe>

    Using PanoPress + krpano code (XML):

    • Full-screen button/option available on computer
    • Full-screen button/option not available on mobile (however, there is an option to display a nearly full-screen lightbox popup)
    • Gyro not available on mobile (may also display errors if code is left in/executed)
    • Code used: [pano file="/360/panos/01/tour.xml" width="940" height="529"] (lightbox popup controlled via plug-in preferences)

    krpano: 'Embedding into HTML:

    • Full-screen button/option available on computer
    • Full-screen button/option not available on mobile
    • Gyro available on mobile
    • Code used:
      <script src="/360/swfkrpano.js"></script>
      <div id="pano"></div>
      <script>
      embedpano({swf:"/360/krpano.swf", xml:"/360/panos/01/tour.xml", target:"pano"});
      </script>
    • I also stylized the 'pano' ID via CSS (set height, width, margins, etc) so I didn't need to do that each time I added a new pano.

    * You would need to organize and upload your files via FTP before using any of the code in your WP pages. The above code references a directory named '360' at the root of my website that contains my SWF, JS, plug-ins, skins, licenses, etc. Individual pano files (XML & pano images) are located in individual directories found here: _root/360/panos/

    My journey basically went in this order and I finally ended up using option #3. This is really where I should have started, but the forum posts I found regarding WordPress embedding sent me in a different direction. Later I came across the text where krpano advises against using iframes since it messes with the full-screen functionality.

    I may take another look at PanoPress. It streamlines the process and provides an option for nearly full-screen viewing (via lightbox). I just didn't spend enough time with it to see if I could also get the gyro working. This may ultimately be a better solution for those not familiar with HTML/CSS coding.

    Ideally, I think we all want the full-screen option working as easily on mobile as it does on the computer. For now, these seem to be the options.

    *'mobile references synonymous w/ HTML5 code
    ** I've only tested the above on an iPad 2

    Comments, clarifications, questions & answers welcome.

  • Mac OS X droplets & HTML5 troubles

    *whistling* Never mind... problem SOLVED...

    My krpanoiphone.license.js was not in my krpanotools folder along with the other licenses. Copied one over from my krpano folder and all is well. Dumb mistake.

    ---------------------------

    None of my Mac OS X droplets are not producing the necessary files for HTML5 viewing:

    I've checked their respective config files and the following line is present:

    Code
    html5=auto

    However, when I run the droplet, Terminal displays the following line:

    Code
    Output: Flash=yes HTML5=no

    When I view the file via iPad it tells me Flash is required.


    ---------------------------

    OS X 10.8.3
    krpano 1.16.2-mac64

  • CSS 'position' and HTML5 player / using z-index and krpano

    Although I was able to get the my div/graphic to remain above the pano (regular and full screen views) and it passed major browser tests (IE7+, Safari 2+, Firefox 3+, Chrome, etc.), I found that it still didn't function properly on some machines (including some of the passing browsers). Rather than fight with it anymore, I decided having my graphic overlap the pano wasn't the way to go. Instead, I down-sized the graphic and added some dynamic content to fill the space better.

    Posted for anyone attempting a similar layout.

  • Moving from createPanoViewer to embedpano while still supporting mobile

    I know this is probably right under my nose, but I've been messing with it long enough to go ahead and ask here.

    I have been using the following code and it works fine on the desktop and mobile:

    Code
    <div id="mediaPlayer">
      	<script>
  		var viewer = createPanoViewer({swf:"../../../assets/krpano.swf",target:"mediaPlayer"});
  		viewer.addVariable("xml", "krpano.xml");
  		viewer.embed();
		</script>
      </div><!--END mediaPlayer-->

    Code contained within the XML points to various image resolutions - computer, mobile & tablet.

    Now I want to modify that code to use a self-contained pano created with krProtect on the desktop then have it use the XML for mobile and tablet. (The self-contained pano get's embeded in Facebook when someone clicks the 'Share on Facebook'.) What is the best approach?

    Should I create separate XML files for mobile and tablet or leave as one while removing references to the hi-res images for desktop viewing? Also, can I use soundinterface.js to stream audio to my mobile panos? I've viewed the sample code and played around with different configurations, but cannot find the right fit. Replacing

    Code
    var viewer = createPanoViewer({swf:"../../../assets/krpano.swf",target:"mediaPlayer"});

    with

    Code
    var viewer = embedpano({swf:"pano.swf",target:"mediaPlayer"});

    was my first step, but then I got lost on best way to handle the mobile portion of the code.

    PS: I'm now using 1.0.8.14. Not sure if krProtect plays nicely with the updated files.

  • CSS 'position' and HTML5 player / using z-index and krpano

    Thanks for the reply Klaus.

    I have updated my files to 1.0.8.14 and it did improve things, but doesn't totally solve my problem. Now the pano goes full screen on the iPad, but the one image still remains on top.

    Making progress, but I may ultimately need to kill the graphic overlap.

    PS: I didn't bother to update my XML or HTML when I updated. Any reason I should?

  • CSS 'position' and HTML5 player / using z-index and krpano

    I have a pano playing in a div which is partially overlapped by another div on the page. I am using 'z-index' and 'position' within my CSS for this effect. Everything works well via the SWF player on the desktop, but fullscreen functionality does not work properly via the HTML5 player on the iPad. Adding 'position: relative' to the div that holds the pano is what causes the problem. Fullscreen works fine when 'position' is removed from the CSS, but then I can no longer use z-index for the layered effect.

    I've uploaded a sample here: http://edgedesign.net/test/index.html (toggle fullscreen on both desktop and iPad to see problem)

    Does anyone have any idea how I could solve this problem or another approach I should try??

    Thx

  • Skins

    Thanks Sam!

    I figured as much and I already have a pretty good idea on how to approach it after looking at more samples and reading up on the xml coding.

    By the way, it was thru your website that I discovered krpano. Your images are outstanding and I really like how you configured them.

    Cheers,
    Bill