You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Friday, October 17th 2014, 6:31pm

krpano 1.18

Hi,

krpano version 1.18 is ready:
One focus of the new version 1.18 was the HTML5 support for panoramic video but there are also a lot of detail improvements in all other aspects of krpano. Below an overview about a few new features in this version. For a full list about all news, changes and fixes, please have a look at the Release Notes.

Best regards,
Klaus

Panoramic Video support for HTML5 (WebGL)

  • Using videos as panoramic image is now supported also in the krpano HTML5 viewer.
  • Depending on the system, the browser and the graphics hardware the video-playback can be much smoother and faster with HTML5 than with Flash.
  • Another nice feature of the HTML5 support is the 'free seeking' (or also called 'pseudo-streaming) - this makes it possible to seek within the video, even to parts that haven't already loaded yet. This can also be used to switch any time dynamically between several video files with different quality, resolution and bandwidth.
  • Technically the HTML5 panoramic video support will be only available and usable on systems and browsers that are supporting WebGL and the usage of videos as WebGL textures. This presumes modern and fast GPUs and up-to-date operating systems, browsers and graphic card drivers.
    Systems that are basically supported are:
    • Desktop: Chrome, Firefox, Opera, IE11, Mac Safari 8
    • Android: Chrome, Firefox, Opera
    • iOS: iPhones and iPads with iOS 8.0 or higher - for the iPhone krpano has a very special kind of support - normally Apple doesn't allow to show a video not as fullscreen video, but krpano uses a trick to bypass this restriction.
    Not capable systems (like iOS before 8.0 or older Android browsers) still can play the videos as flat-panos (with zooming and panning support by custom xml code).
  • From usage/xml perspective everything works basically just like in the Flash version. All interfaces are the same. All different panoramic projections (e.g. little planet, fisheye, pannini) and also all projection transitions (e.g. the spherical to flat transition) are supported and working the same in HTML5.
  • Additionally there is a new panoramic video interface skin (videointerface.xml) and an improved videoplayer plugin to utilize the new possibilities. The new videointerface skin provides:
    • A layout for desktop, tablet and mobile devices.
    • A loading / seek bar with direct click-to and dragging seeking.
    • An extendible and customizable menu interface - used in the default skin for control changing (move, drag, gyro), video quality changing and a menu for different panoramic projections.
    • An alternative flat-pano display and control mode (zooming and panning) when panoramic videos are not supported by the browser (no WebGL or no Video-to-WebGL support).
  • Some notes - please note that WebGL and WebGL+video is an emerging technology and so expect several browser and system related support-/rendering- or performance-problems. Here a list of known browser problems. The video to WebGL transfer is currently too slow in many browsers (especially in Safari). It would be surely possible to address and to improve these problems, but this would need to be done by the browser developers. The krpano WebGL rendering code itself is already highly optimized and very fast.

Panoramic video examples:

Thanks to www.airpano.com and www.360-grad-video.com for providing the panoramic videos!

Mobile Devices Testing Videos:

Spherical and cylindrical image support for HTML5 (WebGL)

  • Because of the new panoramic video support, where the flat videos were rendered as spherical pano, the krpano HTML5 viewer supports now also the direct usage of spherical and cylindrical images as panos. Any kind of partial pano (via the hfov, vfov and voffset settings) is supported too.
  • Using and rendering these images will be only possible when the browser is supporting WebGL. Even when supported now, such images should be used only for simplified or special usage cases. For the best image quality, the best rendering performance and the best multi-device, multi-browser support, the usage of cubical images would be still recommended.
  • Currently only single, non-tiled, non-multires spherical or cylindrical images are supported. Support for tiled/multires images support will come with the next krpano versions.

Polygonal hotspot support for HTML5

  • The polygonal hotspots are supported also in HTML5 now.
  • Together with the new HTML5 support, the default colors and the way how the hotspots are working have been slightly changed (in Flash too) to provide more control (touch behavior) and more possibilities:
    • Now the colors / style of a polygonal hotspot will not change automatically on mouse hovering.
    • To change the colors on some user interaction (like mouse hovering), the onover and onout (or ondown and onup) events and the tween() action should be used now (the tween action can now change also colors).
    • For backward-compatibility the old automatic color changing on hovering and the old default colors are still supported in the Flash viewer, but only when the version number in the xml is lower than 1.18.
    • Because of technical reasons, the polygonal hotspots are always layered behind the image hotspots in HTML5.
  • The polygonal hotspots are supported and working on all systems and browsers, but their rendering performance can be a bit reduced on older mobile/tablet devices in some cases.
  • Examples:

showtext() support for HTML5

  • There is a new 'xml-only' plugin that adds showtext() support also for HTML5: showtext plugin.
  • Just include the plugin via:
    <include url="showtext.xml" />
    and the showtext() action will be available also in HTML5. The usage itself is the same as in Flash.
  • The showtext xml plugin is based on the textfield plugin and some xml code and will override the build-in showtext() action. This way the same code can be used for Flash and HTML5 and the plugin itself is easier to maintain and to extend.
  • The new showtext() action will work identically in Flash and HTML5, except for the effect settings - due basic technical differences, it's not possible to do exactly the same as in Flash, but the HTML5 viewer tries to emulate that setting as good as possible. But by using the new shadow/textshadow settings instead of the effects setting, it would be possible to achieve the same results in both viewers.
  • The showtext.xml plugin provides additional <textstyle> settings:
  • Example: Showtext / Textstyles example

Contextmenu for touch devices + Customizable look/style


XML - Device checks for attributes

  • Often it can be useful to be able to define a certain attribute only for a specific device. Currently this was only possible by defining an additional xml element and using the devices attribute. With version 1.18 it's now possible to do device checks directly at the attribute definition.
  • This works by adding a dot
    .
    character at the end of the attribute name and by defining there on which devices this attribute should be used. For example:
    videourl.desktop="video.mp4|video.webm"
    videourl.mobile.or.tablet="video-small.mp4"
  • The syntax:
    • Everything before the first dot belongs to the name of the attribute itself and everything after the first dot belongs to the device check.
    • All the same devices as in the devices attribute can be used for the device checking.
    • Mixing several devices via logical AND, OR and NOT operators is possible too, but because of the xml-character-limitations with a slightly different syntax:
      • An
        .and.
        can be used as AND operator to check if all given devices settings are matching (like the
        +
        character in the devices attribute).
      • An
        .or.
        can be used as OR operator to check if one of the given devices settings is matching (like the
        |
        character in the devices attribute).
      • A
        no-
        prefix before a devices setting can be used to check if the given devices setting is NOT set (like the
        !
        character in the devices attribute).
      • This new syntax can be used also in the devices attribute itself now.
    • Important to know: The order of xml-attributes is random and can differ each time! That means the order how the attributes were defined in the xml file don't need to be the same how they will be get loaded/parsed. Therefore never redefine attributes again with other devices settings that should override previous definitions!
      That means - DO NOT something like here:
      videourl="video.mp4"
      videourl.mobile="video-small.mp4"
      Correct would be:
      videourl.no-mobile="video.mp4"
      videourl.mobile="video-small.mp4"
  • The documentation:
    http://krpano.com/docu/xml/#devicechecksforattributes
  • Examples:
    scale.no-mobile="1.0" (the same as: scale.desktop.or.tablet="1.0")
    scale.mobile="0.5"
    url.flash="plugin.swf"
    url.html5="plugin.js"
    width.desktop="200"
    width.tablet="150"
    width.mobile="100"
    visible.fullscreensupport="true"
    visible.no-fullscreensupport="false"
    visible.html5.and.webgl.or.flash="true"
    visible.html5.and.no-webgl="false"

XML - Improved Actions / Scripting possibilities

  • The if() action is supporting
    AND
    ,
    OR
    and
    !
    operators and
    (...)
    parenthesis now.
    Examples:
    if(var1 == 1 AND var2 == 2, ... );
    if(device.mobile OR device.tablet, ... );
    if(!anysetting, ... );
    if((num GT 1) AND (num LT 10), ... );
  • Automatic running / starting <action> via the new autorun setting.
  • The tween() action can now change several variables with one call and it can correctly tween/interpolate 32bit ARGB color values.
  • The new callwith() action can be used to run actions or code within the calling context/scope of <layer>, <plugin> or <layer> elements - e.g. to call and run an event from such element.
  • The new screentolayer(layer,sx,sy,lx,ly) and layertoscreen(layer,lx,ly,sx,sy) actions can be used to convert coordinates between the screen and a layer.
  • New wheeldelta_touchscale variable for getting the relative scale from a zoom touch gesture. This can be used for scaling custom images via the mouse wheel or via touch gestures - example
  • Other new actions: tohex(), tolower(), toupper(), clamp()

XML - Improved Layer / Container elements

  • The container <layer> elements are now supporting borders, rounded edges and shadows (with several customizable options).
  • There are min/max settings for the layer width and height. This can be useful when using percent values for the width or height settings and limiting their resulting pixel sizes.

Improved Gyroscope Support

  • The gyroscope plugin supports now also Android Chrome / Opera, Android Firefox and Windows Phone 8/IE11.
  • The Gyroscope sensor data in Android Chrome itself is still buggy, but when the device provides also acceleration and gravity-acceleration data, then the gyroscope plugin will be able to use that data to calculate and to simulate a proper gyroscope orientation.

More news...

  • An embedded Youtube player example for Flash and HTML5.
  • A simple Videoplayer example.
  • Customizable languages for the Bing and Google map plugins.
  • A new fps plugin (xml-only).
  • Many detail improvements and fixes.
  • Updated and improved documentations and examples.
  • And many things more - please have a look at the Release Notes for more.



jeromebg

Professional

Posts: 792

Location: Angers - France

Occupation: Photographer

  • Send private message

2

Friday, October 17th 2014, 7:03pm

WAOUW !!!
YOU ARE THE BEST KLAUS !!!
1 000 000 000 THANXS !

Tuur

Sage

Posts: 3,169

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

3

Friday, October 17th 2014, 7:08pm

+10000000000
Yeahhhh!

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

martyhr

Intermediate

Posts: 334

Location: CZ

  • Send private message

4

Friday, October 17th 2014, 7:11pm

HORRAY !!!!! *thumbsup*

jschrader

Intermediate

Posts: 237

Location: Bavaria, Germany

Occupation: Photographer, Producer

  • Send private message

5

Friday, October 17th 2014, 7:12pm

WOW!
Thanks heaps.

tommo77funk

Intermediate

Posts: 158

Location: London

Occupation: Photographer

  • Send private message

6

Friday, October 17th 2014, 7:22pm

Epic release !!!! thanks so much Klaus :)

rey

Trainee

Posts: 44

Location: Tallinn, Estonia

Occupation: 360VR photographer

  • Send private message

7

Friday, October 17th 2014, 7:25pm

Thanks!

Still waiting for html5 multi-res object *cool*

inno

Trainee

Posts: 86

Location: Wyk auf Föhr

  • Send private message

8

Friday, October 17th 2014, 8:55pm

many many many thanks

LG
Peter

globule22

Trainee

Posts: 57

Location: Rennes, France

  • Send private message

9

Friday, October 17th 2014, 10:07pm

Good release Klaus !

Thanks for your work, you give very exciting new possibilities !

Umalo

Professional

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

10

Friday, October 17th 2014, 11:06pm

OMG, I want one month vacation to study/play with latest release step by step. Was astonished reading release note in details....
Thx guys...let's do more crazy things from today.... *thumbsup*

Alexey Tkachenko

Professional

Posts: 757

Location: Sevastopol, Crimea, Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message

11

Friday, October 17th 2014, 11:57pm

Christmas is quite far away, but hey, guys, we have an astonishing present already *tongue* *tongue* ;-) *thumbup* *thumbup* .

What a job, Klaus!!! Really epic *thumbsup*
Regards,

Alexey

12

Saturday, October 18th 2014, 12:54am

*thumbsup* *thumbsup* *thumbsup* best news of year!thanks!klaus

13

Saturday, October 18th 2014, 4:52am

This is fantastic news Klaus.

However I can't get the sample panoramic videos to load in Chrome on my Samsung S5:

INFO: krpano 1.18 (build 2014-10-17)
INFO: Android 4.4.2 (SM-G900F) - Chrome 38.0 - WebGL
INFO: Registered to: krpano.com
ERROR: parsing "../../plugins/videoplayer.js" failed: SyntaxError: Unexpected token <


It works in the default android web browser but work diminished functionality as you describe.

14

Saturday, October 18th 2014, 2:59pm

everytime everywhere krpano is the best of bests

15

Saturday, October 18th 2014, 5:17pm

Hi,

Thanks all! ;-)

Still waiting for html5 multi-res object *cool*
Already in work, maybe ready for version 1.19...

However I can't get the sample panoramic videos to load in Chrome on my Samsung S5:
...
ERROR: parsing "../../plugins/videoplayer.js" failed: SyntaxError: Unexpected token <
Try clearing the browser cache - there might be an old or invalid videoplayer.js in the cache for some reason (interrupted download?)...
The videos should work very fine on a S5 in Chrome.

Best regards,
Klaus

andrew22222

Intermediate

Posts: 341

Location: Australia

  • Send private message

16

Sunday, October 19th 2014, 4:40am

Much appreciated Klaus *thumbsup*

17

Sunday, October 19th 2014, 10:51pm

audio problem

Hi!

Really nice performance on Iphone 6! congratulations!

I tried some video files It plays audio on desktop but I couldn't listen on the iphone!

Did anyone had this problem too?

Thanks

18

Monday, October 20th 2014, 9:22am

Hi,

Really nice performance on Iphone 6! congratulations!
Thanks, but it could be even better if Apple would improve the 'Video to WebGL texture' transfer performance. Safari is currently the worst browser here (same on iOS and Mac) - Chrome, Firefox and IE are doing that way better and faster. Technically that's only a software/implementation problem inside Safari/Webkit, the hardware itself would be much faster.

See also here at 'iOS 8 and Mac Safari 8 - Bad video to WebGL performance':
http://krpano.com/plugins/videoplayer/#h…nownbrowserbugs


I tried some video files It plays audio on desktop but I couldn't listen on the iphone!
That's related to the iOS iPhone 'video-only-fullscreen' limitation - normally it wouldn't be possible to show a pano video in a iPhone browser not in 'fullscreen-only' mode. The krpano viewer uses a tricky solution to bypass this limitation and this allows to use the video, but not the audio. To allow audio on the iPhone, Apple would only need to change one small internal Safari setting (allowsInlineMediaPlayback), but at the moment they don't want to change that...

See here at 'iOS 8 - automatic video fullscreen playback on the iPhone':
http://krpano.com/plugins/videoplayer/#h…nownbrowserbugs

Best regards,
Klaus

19

Monday, October 20th 2014, 3:23pm

Hi Klaus,

I've bought the KRPano version krpano1.17.2 and it works fine.

I've just downlaod the KRPano 1.18 and I've a watermark. How can I clear the watermark ?

In this tread you talk abouyt this : load a youtube video

Quoted

Yes, the current 1.17 license is valid for all 1.x.x versions (from 1.17 and up).
Thanks for your help. *smile*

panomaster

Intermediate

Posts: 277

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

20

Monday, October 20th 2014, 5:39pm

Nice update. But

Source code

1
<hotspot ... zoom="true" />


still doesn't work in HTML5 :(