Responsive scrollarea

    Hi, I'm trying to build a responsive thumbnails menu in a scrollarea plugin.
    I have 2 "colons" of thumbnails and want the both thumbnails to fill the screen width.
    I divide the stagewidth by the 2 thumbnails width and scale the scrollarea container with the result and scalechildren="true", and then divide 100 by the result to setup the width and height of the container to fill the screen...
    Unfortunatly it's not working as wanted...
    On portrait mode I can't scroll to the end of the thumbnails list, and in landscape I can scroll too much...
    I'm sure I'm not taking the problme the right way but don't see how I could achieve this in another way only with krpano..

    Here is the code :

    and you can see the result here ( try with a mobile as it's only a mobile menu ;) : http://www.covecreekproductions.com/tours/island_l…?pano=drama.xml
    and clic on the bottomleft button

    Salut Jerome,

    I would use stagewidth/height in my calculations.

    make action: Orientation();
    events onresize: Orientation();

    in action Orientation you put the math etc..
    if(stagewidth LT stageheight, blabla else bla);

    I used to call Orientation(); in the onstart as well

    Hope it helps,
    Tuur *thumbsup*

    Heu Tuur, thanx for looking,
    I already use stagewidth :

    Code
    <action name="setmyscale">
div(mobilethumbscale,stagewidth,750);
set(layer[mobilethumbs].scale,get(mobilethumbscale));
div(msw,100,get(mobilethumbscale));
div(msh,100,get(mobilethumbscale));
txtadd(myscrollwidth,get(msw),'%');
txtadd(myscrollheight,get(msh),'%');
set(layer[mobilethumbs].width,get(myscrollwidth));
set(layer[mobilethumbs].height,get(myscrollheight));
</action>

    but maybe I didn't get something, stagewidth changes if you are in portrait or landscape or it's always the bigger side ?

    Hi,

    i think,
    change the layer scrollareamobile 's height on orientation change.

    edit: the stage width is the horizontal width.
    So you need an other size for the scrollarea depending on the being portrait or landscape.
    So try something like: if portrait set scroll area height 1234, else set 4567..
    But you need also the change when the device is turned so for that you use the event

    Tuur *thumbsup*

    Ok, it works better with :

    even if it's a bit strange, so space at the end of the thumbnails list in portrait, a nearly not enought in landscape... ???

    Another problem I have is with the textfield to write the name of the pano on each thumbnails, looks like it's too many actions at the same time so when I first open the list only the last thumbnails has a textfield on it, and if I change orientation I recall my "setmyscale()" action and all the textfields are displayed, but not in a very accurate position...
    Here is an example of textfield :

    Code
    <layer name="AIR_LAKEVIEW_txt" parent="layer[AIR_LAKEVIEW]" style="thumbs_txt" html="MAIN VIEW" />
<style name="thumbs_txt"  align="bottom" devices="all" url="%SWFPATH%/plugins/textfield.swf" width="100%" autoheight="auto" backgroundcolor="0x185cca" backgroundalpha="0.8" padding="5" css="text-align:center;color:#ffffff;" zorder="35"/>

    I guess it's because le text layer is parent befor the thumbnail scale changes ?
    Don't know how to solve this...

    Thanx to tuur the responsive scrollarea works better, but there is still a very strange bug that wr're not able to solve by now...
    when the scrollarea is loaded an action is called to setup the width/height of the thumbnails and their y position, sometimes it works well but after clicking on a thumbnail it bugs, sometimes it bugs the first time it's loaded.
    The bug is that the right colon starts one thumbnail after the left colon ???
    The textfields wich are parent from the thumbnails don't have time to load all after first setup too ?

    here is the code

    Is someone have an brilliant idea (Klaus ?) that would be very helpfull !!!

    You can try it live here : http://www.360images.fr/island/index.html?pano=boat.xml

    THX A LOT !!!

    Better version here
    http://www.virtualtuur.com/krpano/thumbrows/
    you can also set
    - the number of columns you want
    - the space between the thumbs
    - background color and background alpha

    xml --> http://www.virtualtuur.com/krpano/thumbro…rowscroller.xml


    ** Still have to work a bit on it to make some extra features and settings etc.. but the idea is clear i think.
    In the base it was build to serve Jerome's needs.. so i need to skip those things and make it 'global'

    Tuur *thumbsup*

    Thanks for sharing!


    I've been trying to load scene thumbs dynamically into the thumb_background layer with no success. Well, they do show up in the layer but they just align on top of each other.

    I'm trying to implement the addthumbs action from Kuchlerhaus demo.

    for(set(i,0), i LT scene.count, inc(i),
    calc(thumbname,'thumb_' + i);
    addlayer(get(thumbname));
    copy(layer[get(thumbname)].url, scene[get(i)].thumburl);
    set(layer[get(thumbname)].parent, 'thumb_background');
    set(layer[get(thumbname)].linkedscene, get(scene[get(i)].name) );
    set(layer[get(thumbname)].onclick, hidethumbs(); loadscene(get(linkedscene), null, MERGE, BLEND(0.5)); );
    );

    Has anyone tried smth similar with success?


    NVM, thanks. Went with another solution.

    Edited once, last by klaea (June 5, 2019 at 8:13 AM).

    Hello!
    I tried to conduct an experiment in the form of an adaptive grid.
    Used means krpano.
    I have compiled a formula. The elements themselves do not change, are distributed only depending on the width of the screen.
    There is a scroll. At the bottom there is a slider that you can resize the element.
    Try changing the width of the browser window and adjust the elements themselves.
    I apologize for the translation.


    http://novosibpano.ru/VT/adap/

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login