Change gyro button style when gyro is enabled

Jk_pano · July 20, 2015 at 1:59 PM

Hi,

i've got a problem with the gyro-plugin. I'm using it on the mobile version and it's working great. I'm trying to change the style of the gyro button if gyro is enabled. I'm not shure how to do this. I've tried to get the effect with the code below, but i'm not shure where to place the code. At the plugin? Or at the button?

Code

if(plugin[skin_gyro].enabled == true, set(layer[skin_btn_gyro].crop, '128|291|64|64'));"

It would be great if someone could help me!

sachagriffin · July 20, 2015 at 4:52 PM

Code

<plugin name="gyro" devices="html5" keep="true"
        url="gyro2.js" 
        enabled="true"
        sensor_mode="1"
        onavailable="set(layer[skin_btn_gyro].crop, '128|291|64|64');"
        onunavailable=""
        />

Jk_pano · July 20, 2015 at 9:01 PM

Hi,

thanks for your help, but this was not what i was looking for. I would like to change the style of the button only when the plugin is enabled, not when it is available. The goal is to show the user whether the plugin is turned on or off. Any idea how to do this?

sachagriffin · July 21, 2015 at 12:07 AM

Code

<plugin name="gyro" devices="html5" keep="true"
        url="gyro2.js" 
        enabled="true"
        sensor_mode="1"
        onavailable=""
        onunavailable=""
        />
<layer name="skin_btn_gyro" onclick="switch(layer[gyro].enabled;switch(layer[skin_btn_gyro].crop, '128|291|64|64|other4cropvalues');"

You're starting to get into programming territory. It's helpful here to look at all the examples in the examples folders to see how things work.

Switch works by keeping track of the arguments in the function and what the current value is vs the order.

Jk_pano · July 21, 2015 at 12:35 PM

Hi,

thanks for your help. I think you did not get my problem. I am using the gyro button like in the examples. When you are viewing the examples and you activate the gyro plugin by clicking on the button, the gyro plugin gets enabled but the stlye of the button doesn't change. To improve the usability i would like to show the user that the plugin is activated by changing the style of the button. Is this possible?

sachagriffin · July 21, 2015 at 7:00 PM

Quote from Jk_pano

To improve the usability i would like to show the user that the plugin is activated by changing the style of the button. Is this possible?

How did the above not do exactly this?

Just about anything is possible with krpano.

This tour works as you described. When you click the gyro, the crop changes.

http://www.seeit360.com/360-virtual-to…ing-panama-city

Jk_pano · July 21, 2015 at 9:42 PM

Hi,

i'm sorry! Actually i din't got your answer. Now i got it and it's working great!

Thank you so much

VinzVideo · August 25, 2015 at 4:58 PM

I like this idea. Tried to implement it, but it doesn't seem to work for me.
I'm using it to change the appearance of a Rotate On/Off icon, instead of the gyro.

The rotation does switch on/off, but the icon does not change.

Does anyone see an error in the code? It looks good to me. Thanks.

Code

<layer name="skin_btn_rotate"       style="skin_base|skin_glow" crop="0|510|64|64" align="left"    keep="true"    x="90"   y="0"  scale="0.55" onclick="switch
(autorotate.enabled); switch(layer[skin_btn_rotate].crop, '0|510|64|64|64|510|64|64'); "  />

sachagriffin · August 25, 2015 at 5:00 PM

Quote from VinzVideo

onclick="switch
(autorotate.enabled); switch(layer[skin_btn_rotate].crop, '0|510|64|64|64|510|64|64'); "

Code

onclick="switch
(autorotate.enabled); switch(layer[skin_btn_rotate].crop, '0|510|64|64','64|510|64|64'); "

VinzVideo · August 25, 2015 at 5:29 PM

Yep, that does it!
Thank you.

v

Participate now!