Mobiler Scale/Zoom (#mobilescale / #stagescale

  • Hi,

    habe jetzt nach 3 Tagen alles versucht, kriege aber den kleineres Zoom mit Mobilen Devicen nicht hin *sad*
    Mit dem Desktop sieht alles gut aus, im Mobilen Device müßte es verkleinert werden, da der Anfang viel zu
    gezommed ist.

    Egal was ich bei mobilescale/stagescale verändere, es ändert sich nichts für die mobilen Geräte:-(

    Kann mir einer erklären, welcher übergeordneter Befehlt das Problem ist ? *confused* *confused* *confused*

    Wenn ich das hinbekomme, werde ich mir die Lizenz endlich erwerben *wink*

    PS: Hier extra den fakedevice:"mobile" eingetragen um Mobil zu simulieren.


    index.html:
    ==========

    <!DOCTYPE html>
    <html>
    <head>
    <title>krpano - test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.5 " />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <style>
    @-ms-viewport { width:device-width; }
    @media only screen and (min-device-width:800px) { html { overflow:hidden; } }
    html { height:100%; }
    body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000;}
    </style>
    </head>
    <body>

    <script src="test.js"></script>

    <div id="pano" style="width:100%;height:100%;">
    <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
    <script>
    embedpano({swf:"test.swf", xml:"test.xml", target:"pano", html5:"prefer", mobilescale:0.5, fakedevice:"mobile" });
    </script>
    </div>

    </body>
    </html>


    SKIN:
    ====

    <krpano>
    <!-- krpano 1.18 default buttons skin -->

    <!-- default mouse control mode (moveto or drag2d) -->
    <control mousetype="drag2d" />

    <!-- default autorotate settings (disabled by default) -->
    <autorotate enabled="true" waittime="1.0" accel="8.0" speed="8.0" horizon="0.0" tofov="off" />

    <!-- control buttons style -->
    <style name="defaultskin_button" url="buttons-2.png" scale="0.5" align="lefttop" />

    <!-- the container layer that contains the buttons -->
    <!--
    <layer name="defaultskin_buttons" type="container" width="360" height="40" align="bottom=" y="10" scalechildren="true" scale="1.0" keep="true">

    <layer name="btn_in" x="0" style="defaultskin_button" crop="320|0|80|80" onovercrop="320|80|80|80" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" />
    <layer name="btn_out" x="40" style="defaultskin_button" crop="400|0|80|80" onovercrop="400|80|80|80" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);" />
    <layer name="btn_left" x="80" style="defaultskin_button" crop= "0|0|80|80" onovercrop= "0|80|80|80" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" />
    <layer name="btn_right" x="120" style="defaultskin_button" crop= "80|0|80|80" onovercrop= "80|80|80|80" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" />
    <layer name="btn_up" x="160" style="defaultskin_button" crop="160|0|80|80" onovercrop="160|80|80|80" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" />
    <layer name="btn_down" x="200" style="defaultskin_button" crop="240|0|80|80" onovercrop="240|80|80|80" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" />

    <layer name="btn_ctrlmode" x="240" style="defaultskin_button" crop="800|0|80|80" onovercrop="800|80|80|80" onclick="switch(control.mousetype,moveto,drag2d); switch(control.touchtype,moveto,drag2d); update_ctrl_mode();" />
    <layer name="btn_autorot" x="280" style="defaultskin_button" crop="480|0|80|80" onovercrop="480|80|80|80" onclick="switch(autorotate.enabled);" />


    <layer name="btn_fs" x="240" style="defaultskin_button" crop="560|0|80|80" onovercrop="560|80|80|80" onclick="switch(fullscreen);" visible="true" devices="fullscreensupport" />
    </layer>
    -->
    <!-- no fullscreen support => no fullscreen button => smaller container width -->
    <layer name="defaultskin_buttons" width="320" devices="!fullscreensupport" />

    <!-- scale the buttons 2x for mobile devices (when the mobilescale setting in the html file is below 1.0) -->
    <layer name="defaultskin_buttons" scale="0.5" if="device.mobile AND stagescale LT 1.0" />


    <!-- events for handling dynamic changes -->
    <events name="defaultskin_buttons" keep="true"
    onxmlcomplete="update_ctrl_mode(); update_fs_button();"
    onresize="adjust_button_sizes();"
    onenterfullscreen="update_fs_button();"
    onexitfullscreen ="update_fs_button();"
    />


    <!-- check if the buttons fit inside the window, and if not, make them smaller so that they will fit -->
    <action name="adjust_button_sizes">
    if(layer[defaultskin_buttons].pixelwidth GT stagewidth,
    div(layer[defaultskin_buttons].scale, stagewidth, layer[defaultskin_buttons].width);
    );
    </action>

    <!-- update the buttons and the cursors according to the current control mode setting -->
    <action name="update_ctrl_mode">
    if(control.mousetype == drag2d,
    <!-- set mouse cursor graphic -->
    set(cursors.url, %SWFPATH%/skin/drag-cursors-2.png);
    set(cursors.type, drag);
    set(cursors.move, 0|0|32|32);
    set(cursors.drag, 32|0|32|32);
    <!-- set button graphic -->
    set(layer[btn_ctrlmode].crop, 720|0|80|80);
    set(layer[btn_ctrlmode].onovercrop, 720|80|80|80);
    ,
    <!-- set mouse cursor graphic -->
    set(cursors.url, %SWFPATH%/skin/qtvr-cursors.png);
    set(cursors.type, 8way);
    set(cursors.move, 0|0|16|16);
    set(cursors.drag, 16|0|16|16);
    set(cursors.arrow_u, 32|0|16|16);
    set(cursors.arrow_d, 48|0|16|16);
    set(cursors.arrow_l, 64|0|16|16);
    set(cursors.arrow_r, 80|0|16|16);
    set(cursors.arrow_lu, 96|0|16|16);
    set(cursors.arrow_ru, 112|0|16|16);
    set(cursors.arrow_rd, 128|0|16|16);
    set(cursors.arrow_ld, 144|0|16|16);
    <!-- set button graphic -->
    set(layer[btn_ctrlmode].crop, 800|0|80|80);
    set(layer[btn_ctrlmode].onovercrop, 800|80|80|80);
    );
    </action>

    <!-- update the fullscreen button according to the current state -->
    <action name="update_fs_button">
    if(fullscreen,
    set(layer[btn_fs].crop, 640|0|80|80);
    set(layer[btn_fs].onovercrop, 640|80|80|80);
    ,
    set(layer[btn_fs].crop, 560|0|80|80);
    set(layer[btn_fs].onovercrop, 560|80|80|80);
    );
    </action>


    <!--
    inlined contextmenu.xml 1.18
    - Change the control mode and the viewing projection via the right click contextmenu.
    - The distorted view items will be only shown when Flash or WebGL are supported and when the
    pano image itself is a full 360x180 pano.
    - Note: The distorted views will only work correctly when view.stereographic=true will be set.
    -->

    <contextmenu>
    <item name="kr" caption="KRPANO" />
    <item name="fs" caption="FULLSCREEN" />
    <item name="cc" caption="Change Controlmode" onclick="cm_changecontrolmode();" separator="true" />
    <item name="nv" caption="Normal View" onclick="cm_normal_view();" showif="view.vlookatrange == 180" separator="true" />
    <item name="fv" caption="Fisheye View" onclick="cm_fisheye_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
    <item name="sv" caption="Stereographic View" onclick="cm_stereographic_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
    <item name="av" caption="Architectural View" onclick="cm_architectural_view();" showif="view.vlookatrange == 180" />
    <item name="pv" caption="Pannini View" onclick="cm_pannini_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
    <item name="lp" caption="Little Planet View" onclick="cm_littleplanet_view();" showif="view.vlookatrange == 180" devices="flash|webgl" />
    </contextmenu>


    <action name="cm_changecontrolmode">
    switch(control.mousetype, moveto, drag2d);
    switch(control.touchtype, moveto, drag2d);
    </action>

    <action name="cm_look_straight">
    if(view.vlookat LT -80 OR view.vlookat GT +80,
    tween(view.vlookat, 0.0, 1.0, easeInOutSine);
    tween(view.fov, 100, distance(150,0.8));
    );
    </action>

    <action name="cm_normal_view">
    cm_look_straight();
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini, 0.0, distance(1.0,0.5));
    tween(view.fisheye, 0.0, distance(1.0,0.5));
    </action>

    <action name="cm_architectural_view">
    cm_look_straight();
    tween(view.architectural, 1.0, distance(1.0,0.5));
    tween(view.pannini, 0.0, distance(1.0,0.5));
    tween(view.fisheye, 0.0, distance(1.0,0.5));
    </action>

    <action name="cm_fisheye_view">
    cm_look_straight();
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini, 0.0, distance(1.0,0.5));
    tween(view.fisheye, 0.35, distance(1.0,0.5));
    </action>

    <action name="cm_stereographic_view">
    cm_look_straight();
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini, 0.0, distance(1.0,0.5));
    tween(view.fisheye, 1.0, distance(1.0,0.8));
    </action>

    <action name="cm_pannini_view">
    cm_look_straight();
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini, 1.0, distance(1.0,0.8));
    if(view.fisheye LT 0.1,
    tween(view.fisheye, 1.0, distance(1.0,0.8));
    );
    </action>

    <action name="cm_littleplanet_view">
    tween(view.architectural, 0.0, distance(1.0,0.5));
    tween(view.pannini, 0.0, distance(1.0,0.5));
    tween(view.fisheye, 1.0, distance(1.0,0.8));
    tween(view.fov, 150, distance(150,0.8));
    tween(view.vlookat, 90, distance(100,0.8));
    add(new_hlookat, view.hlookat, 123.0);
    tween(view.hlookat, get(new_hlookat), distance(100,0.8));
    </action>

    </krpano>

  • Kann mir keiner helfen, wie man den mobilen Anfangs-Zoom/Scale abändern ?

    Wenn ich die Zeile der .xml auf folgendes änder, sieht der Anfangs-Zoom auf mobilen Geräten gut aus,
    aber auf Desktopgeräten habe ich dann die Kugel *wink* und bin total weit weg vom Bild

    <view hlookat="0" vlookat="0" maxpixelzoom="5.0" fov="148" fovmin="70" fovmax="78" fisheye="2.0" limitview="auto" />

    In der HTML den wert mobilescale zu verändern bringt keine Ändeurng:
    embedpano({swf:"test.swf", xml:"test.xml", target:"pano", html5:"prefer", mobilescale:0.5 });

    Hat jemand einen Tip ?

    Danke

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!