vtour thumbs bigger on iphone

machart · September 9, 2011 at 12:10 PM

hello,
im quite new in changing my tours to be viewable on mobile devices...

i use the thumbs template by klaus, and have this problem:
the thumbs are too small on iphone, so i integrated

Code

altonloaded="if(isphone, mul(scale,2.4)); onloaded();"

to the buildthumbs action.
but the thumbs dont become bigger... (at least with the iphone simulator)

here the whole action:

Code

<action name="buildthumbs"> 
    if(%1 != NEXT, set(i,0)); 
    if(i LT scene.count, copy(thumb, scene[get(i)].thumburl); 
    txtadd(thumbname,"thumb_",get(i)); 
    addplugin(get(thumbname)); 
    set(plugin[get(thumbname)].url, get(thumb)); 
    set(plugin[get(thumbname)].keep, true); 
    set(plugin[get(thumbname)].align, leftbottom); 
    set(plugin[get(thumbname)].width, 40); 
    set(plugin[get(thumbname)].height, 40); 
    set(plugin[get(thumbname)].x, 10); 
    set(plugin[get(thumbname)].y, 10); mul(plugin[get(thumbname)].x, i,0); 
    mul(plugin[get(thumbname)].y, i,0); 
    add(plugin[get(thumbname)].x, 10); 
    add(plugin[get(thumbname)].y, 10); 
    copy(plugin[get(thumbname)].xsmall, plugin[get(thumbname)].x); 
    copy(plugin[get(thumbname)].ysmall, plugin[get(thumbname)].y); 
    add(plugin[get(thumbname)].zorder, 100, i); 
    set(plugin[get(thumbname)].effect,glow(0xFFFFFF,1.0,2,10000)); 
    set(plugin[get(thumbname)].alpha,0.8); 
    set(plugin[get(thumbname)].jsborder,"1px solid #FFFFFF"); 
    copy(plugin[get(thumbname)].thumbpos, i); 
    set(plugin[get(thumbname)].linkedscene, get(scene[get(i)].name) ); 
    set(plugin[get(thumbname)].onclick, openthumbs() ); 
    copy(plugin[get(thumbname)].scenetitle, scene[get(i)].title); 
    set(plugin[get(thumbname)].onhover,showtext(get(scenetitle), navistyle) ); 
    inc(i); buildthumbs(NEXT); ); 
    [color=#009900]altonloaded="if(isphone, mul(scale,2.4)); onloaded();"[/color]
    </action>

Display More

did i miss something?

here is the tour:

VN2011 · September 9, 2011 at 3:15 PM

Quote from machart

altonloaded="if(isphone, mul(scale,2.4)); onloaded();"

should be

set(plugin[get(thumbname)].altonloaded, if(isphone, mul(scale,2.4)));

i think.

actually i dont think it should be under the altonloaded it should be under the normal onloaded. alt only gets run on html5 so if you want larger thumbs for andriod the onloaded would be the correct one.

HansNyb · September 9, 2011 at 3:26 PM

I do it by using the devices settings.

This means that I have made a duplicate of all the actions used for the thumbs.
One like this
<action devices="desktop|tablet" name="buildthumbs">
And one like this
<action devices="mobile" name="buildthumbs">

Same for the openthumb and openthumbs action and if needed also for closethumbs.

This give me full control over how they perform on different media.

Devices="mobile" also make it work on Android mobiles.

Same on the startup action. If I want the mobile thumbs to be closed I use a duplicate with no opnethumbs

Hans

VN2011 · September 9, 2011 at 4:04 PM

hans method will work it just doubles the amound of xml to parse. you shold be able to make the onloaded idea work.

machart · September 9, 2011 at 7:00 PM

hello vn, hello hans!

thanks for your hints!

i tried vns idea, it works! but of course the thumbs are overlapping now... i tried this:

Code

set(plugin[get(thumbname)].altonloaded, if(isphone, mul(scale, 1.6), mul(x, 1.6)));

but that doesnt fix the overlap... must be something different...

for the open/close buttons i have this:

Code

onloaded="IF(ishtml5, set(y, 8), set(x, 53)); IF(isphone, mul(scale, 1.6));"

the first part corrects the alignment and works fine, but with the scaling part after it its gone...
here is the screenshot:

VN2011 · September 9, 2011 at 9:34 PM

the over lap is because the thumb open postions is controlled by another action. the openthumb action. adjusting the y settings should stop the over lap. i didnt test that but you can see the idea. IF desktop - set the thumbnails the default if not since you used used a scale of 1.6 make the y 150 or so. i sued stagewidth so the thumbs will go to the edge of the phone then start a second layer if needed.

<action name="openthumb">
if(%2 != NEXT,
set(pos,0);
copy(curpos, plugin[%1].thumbpos);
set(xdst, 0);
IF(isdesktop, set(ydst, 90), set(ydst,150));
);

if(pos LT curpos,
inc(pos);
IF(isdesktop, inc(ydst,90), inc(ydst,150));
IF(isdesktop, set(ymax, 200), set(ymax, get(stagewidth));
if(ydst GT ymax, inc(xdst,90);set(ydst,0); );
openthumb(%1,NEXT);
,
add(xdst,10);
add(ydst,10);
tween(plugin[%1].x, get(xdst) );
tween(plugin[%1].y, get(ydst) );
tween(plugin[%1].width, 80);
tween(plugin[%1].height, 80);
);
</action>

otherwise what i do is to use the thumbnail for desktops only. set the device tags on the actions to only work on desktops. then use a combobox which is set to only display on phones and tablets and use a combobox drop down menu that autofills itself based on the scenes for mobile devices.

<plugin name="cb" keep="true" devices="ipod|ipad|iphone|andriod"
url="plugins/combobox.swf"
alturl="plugins/combobox.js"
align="topcenter" x="0" y="0"
onloaded="fillbox();" zorder="15"
/>

<action name="fillbox">
if(scene.count == 1, set(plugin[cb].visible,false));
for(set(i,0), i LT scene.count, inc(i),
set(scenename, get(scene[get(i)].name));
set(titlename, get(scene[get(i)].title));
txtadd(itemaction, 'loadscene(', get(scenename),',null,MERGE,BLEND(1));');
plugin[cb].additem(get(titlename), get(itemaction));
);
</action>

HansNyb · September 10, 2011 at 5:45 PM

Quote from machart
hello vn, hello hans!
thanks for your hints!
i tried vns idea, it works! but of course the thumbs are overlapping now... i tried this:
Code
set(plugin[get(thumbname)].altonloaded, if(isphone, mul(scale, 1.6), mul(x, 1.6)));
but that doesnt fix the overlap... must be something different...
for the open/close buttons i have this:
Code
onloaded="IF(ishtml5, set(y, 8), set(x, 53)); IF(isphone, mul(scale, 1.6));"
the first part corrects the alignment and works fine, but with the scaling part after it its gone...
here is the screenshot:
Display More

Yes thats why I use it my way. You get control of every part of the thumbs.

Hans

machart · September 13, 2011 at 1:15 PM

hello, hans, hello vn!

yes, you are right, building 3 optimised versions give an perfect GUI...
but it makes the code very complex...

after thinking about GUI in general, it should be less overloaded on iphone...

i think, vn is right: no thumbs on the iphone...

so i didnt take the code by vn (thanks for it) , but tried to integrate a combobox for iphone only.

i took the code of klaus`s example and the snippet by vn... and dont know why it doesnt work...

the code is the following:

Code

<action name="startup">	    
	        loadscene(get(scene[0].name), null, MERGE); 
		buildthumbs(); 
		combobox();
	</action>




	<plugin name="box" 
	        url="%SWFPATH%/plugins/combobox.swf"
	        alturl="%SWFPATH%/plugins/combobox.js"
	        devices="mobile"
	        preload="true"
	        keep="true"
	        zorder="15"
	        align="lefttop" x="10" y="10" width="120" 
	        blendmode="layer" 
	        onloaded="fillbox();" 
	        onclick="trace(combobox clicked);"
	        />	        
	        
<action name="combobox">
	plugin[box].addIdItem(1, 'Von vorne', loadscene(scene_ju1, null, MERGE, BLEND(1)); );
        plugin[box].addIdItem(2, 'Rechte Seite', loadscene(scene_ju2, null, MERGE, BLEND(1)); );
        plugin[box].addIdItem(3, 'Der Bauch', loadscene(scene_ju3, null, MERGE, BLEND(1); );
        plugin[box].addIdItem(4, 'Im Cockpit', loadscene(scene_ju4, null, MERGE, BLEND(1)); );
        plugin[box].addIdItem(5, 'Am Heckleitwerk', loadscene(scene_ju5, null, MERGE, BLEND(1)); );
        plugin[box].addIdItem(6, 'Am Triebwerk', loadscene(scene_ju6, null, MERGE, BLEND(1); );
        plugin[box].addIdItem(7, 'Linke Seite', loadscene(scene_ju7, null, MERGE, BLEND(1)); );
        plugin[box].addIdItem(8, 'Der Einstieg', loadscene(scene_ju8, null, MERGE, BLEND(1)); );
</action>


<action name="fillbox"> 
    if(scene.count == 1, set(plugin[box].visible,false));
    for(set(i,0), i LT scene.count, inc(i),
    set(scenename, get(scene[get(i)].name));
    set(titlename, get(scene[get(i)].title));
    txtadd(itemaction, 'loadscene(', get(scenename),',null,MERGE,BLEND(1));');
    plugin[box].additem(get(titlename), get(itemaction));
);
</action>

Display More

maybe i misunderstood the whole thing...

[EDIT]

the first scene has this:

Code

<scene name="scene_ju1" title="Von Vorne" 
	
	        onstart="action(start_scene1); "
            thumburl="ju12.tiles/thumb.jpg">


<action name="start_scene1">
                set(hotspot.visible,false);
	            action(setlittleplanetcoords,0,140.0);
	            rotate_off();
	            plugin[box].selectIdItem(1);" 	                        		
</action>


<events onloadcomplete="set(control.usercontrol,all);
                        set(events.onloadcomplete,null);
                        delayedcall(1.8, normalview1());"/>

Display More

VN2011 · September 13, 2011 at 3:03 PM

the combobox() and fillbox() are the same thing. the fillbox() action is designed to read the scenes in a vtour and populate the combobox automatically. get rid of the combobox() action all together. it should work then.

machart · September 13, 2011 at 5:01 PM

thanks, vn!

stupid me...

fillbox(); is much better than combobox();
because its automatic...

Participate now!