templates/gallery3D/gallery3D_inline.html.twig line 1

Open in your IDE?
  3.         {% for message in app.flashes('notice') %}
  4.         <div class="flash-notice">
  5.             <div class='notice'>{{ message }}</div>
  6.         </div>
  7.         {% endfor %}
  8.         {% for message in app.flashes('error') %}
  9.             <div class="flash-error">
  10.                 <div class='error'>{{ message }}</div>
  11.             </div>
  12.         {% endfor %}
  14.         {#    {% block title %}{{ gallery3D.gallery3DName }}{% endblock %}#}
  16.         {#    we setup images for 3D space #}
  17.         {% set gallery3DInfo = [] %}
  18.         {% set gallery3DInfo = gallery3DInfo|merge({'image_size_horisontal': '4.8 3.2 0.1'}) %}
  19.         {% set gallery3DInfo = gallery3DInfo|merge({'frame_size_horisontal': '5.2 3.6 0.1'}) %}
  20.         {% set gallery3DInfo = gallery3DInfo|merge({'image_size_vertical': '3.2 4.8 0.1'}) %}
  21.         {% set gallery3DInfo = gallery3DInfo|merge({'frame_size_vertical': '3.6 5.2 0.1'}) %}
  23.         {#    we prepare textures #}
  24.         {% set textureArray = [] %}
  25.         {% set textureArray = textureArray|merge({'logo-texture-1': ''}) %}        
  26.         {% set textureArray = textureArray|merge({'floor-texture-1': ''}) %}
  27.         {% set textureArray = textureArray|merge({'floor-texture-2': ''}) %}
  28.         {% set textureArray = textureArray|merge({'ceil-texture-1': ''}) %}
  29.         {% set textureArray = textureArray|merge({'wall-texture-1': ''}) %}
  30.         {% set textureArray = textureArray|merge({'wall-texture-2': ''}) %}
  31.         {% set textureArray = textureArray|merge({'background-front': ''}) %}
  32.         {% set textureArray = textureArray|merge({'background-back': ''}) %}
  33.         {% set textureArray = textureArray|merge({'background-left': ''}) %}
  34.         {% set textureArray = textureArray|merge({'background-right': ''}) %}
  35.         {% set textureArray = textureArray|merge({'image-help-1': ''}) %}
  36.         {% set textureArray = textureArray|merge({'button-play': ''}) %}
  37.         {% set textureArray = textureArray|merge({'button-home': ''}) %}
  38.         {% set textureArray = textureArray|merge({'button-help': ''}) %}
  39.         {% set textureArray = textureArray|merge({'button-exit-1': ''}) %}
  40.         {% set textureArray = textureArray|merge({'gallery-logo': ''}) %}
  41.         {% set textureArray = textureArray|merge({'cart-texture-1': ''}) %}
  42.         {% set textureArray = textureArray|merge({'info-texture-1': ''}) %}
  43.         {% set textureArray = textureArray|merge({'bg-texture-1': ''}) %}
  44.         {% set textureArray = textureArray|merge({'bg-texture-2': ''}) %}
  45.         {% set textureArray = textureArray|merge({'bg-texture-3': ''}) %}
  46.         {% set textureArray = textureArray|merge({'bg-texture-4': ''}) %}
  48.         {% if textureItemCollection is not defined %} 
  49.             {% set textureItemCollection = [] %}
  50.         {% endif %}
  52.         {% for textureItem in textureItemCollection %}
  54.             {% if 'http' in textureItem.galleryItemFile %}
  55.                 {% set texturePath = textureItem.galleryItemFile %}
  56.             {% else %} 
  57.                 {% set texturePath = userDirs['web'] ~ '/images/' ~ textureItem.galleryItemFile %}
  58.             {% endif %}
  60.             {% if textureItem.galleryItemName is defined and textureItem.galleryItemName != '' %}
  61.                 {% set textureKey = textureItem.galleryItemName %}
  62.     {#                {% set textureArray[textureKey] = texturePath %}#}
  63.                 {% set textureArray = textureArray|merge({(textureKey): (texturePath)}) %}
  64.             {% endif %}
  66.         {% endfor %}
  68.         {% if isFullscreen is defined and isFullscreen %}
  69.             {% set resizeButton = 'button_fullscreen' %}
  70.             {% set isFullscreen = true %}
  71.             {% set screenHeight = '90vh' %}
  72.         {% else %}
  73.             {% set resizeButton = 'button_defaultscreen' %}
  74.             {% set isFullscreen = false %}
  75.             {% set screenHeight = '323px' %}
  76.         {% endif %}    
  78.         <!-- X3D  -->
  79.         <div style="width: 100vw; height: {{ screenHeight }}; display:block; right:0; left:0; box-sizing: border-box; position: absolute; left: 0; right: 0; background-color: Black;" id="x3d" class="x3d_container">
  80.                 <!-- menu -->
  81.                 
  82.               <div style="position: absolute; left: 0px; width: 100%; height: 40px; display:inline-block; border-right: 1px solid #EA5B0C; background-color: #222; opacity: 0.5; font-family: helvetica, sans-serif; font-weight: bold; font-size: 10px; color: #EA5B0C; padding-left:5px; z-index: 3;" class="x3d_menu" id="x3d_menu">
  83.                     
  84.                     <div style="margin-right:7px;padding-top:2px; display:inline-block; text-align: center;">
  85.                         <div><big>3D</big></div>
  86.                         <div><small>menu</small></div>
  87.                     </div>                    
  88.                     <div style="margin-right:7px; display:inline-block" id="x3d_menu_viewpoint_home">
  89.                         <button id="button_viewpoint_home" onclick="changeViewpoint('x3d_viewpoint_home')" style="font-family: helvetica, sans-serif; font-weight: normal; font-size: 10px; background-color: black; border: 1px solid #333; color: white;padding:2px;  background-image: url( '/images/x3dmenu_home.png' ); background-size: 31px 31px; height: 33px; width: 33px; border: 1px solid silver; border-radius:17px;" title="Home Viewpoint"></button>
  90.                 </div>    
  92.               <div style="margin-right:7px; display:inline-block" id="x3d_menu_tour">
  93.                 <button id="gallery_button_viewpoint" onclick="changeViewpoint('x3d_viewpoint_tour')" style="font-family: helvetica, sans-serif; font-weight: normal; font-size: 10px; background-color: black; border: 1px solid #333; color: white;padding:2px;  background-image: url( '/images/x3dmenu_walk.png' ); background-size: 31px 31px; height: 31px; width: 31px; border: 1px solid silver; border-radius:17px;" title="Tour"></button>
  94.                 </div>
  96.               {% for galleryItem in galleryItemCollection %}
  97.                   {% set itemId = galleryItem.galleryItemId %}
  98.                   {% set viewpoint = 'gallery_viewpoint_' ~ itemId %}
  100.                   <div style="margin-right:7px; display:inline-block" id="gallery_menu_viewpoint_{{ itemId }}">
  101.                 <button id="gallery_button_viewpoint_{{ itemId }}" onclick="changeViewpoint('gallery_viewpoint_{{ itemId }}')" style="font-family: helvetica, sans-serif; font-weight: normal; font-size: 10px; background-color: black; color: white;padding:2px;  background-image: url( '/images/x3dmenu_eye.png' ); background-size: 31px 31px; height: 33px; width: 33px;  border: 1px solid silver; border-radius:17px;" title="Gallery item {{ itemId }}" class="x3d_menu_button_viewpoint"></button>
  102.                 </div>
  104.               {% endfor %}
  106.               <div style="margin-right:7px; display:inline-block" id="x3d_menu_defaultscreen">
  107.                 <button id="button_defaultscreen" style="font-family: helvetica, sans-serif; font-weight: normal; font-size: 10px; background-color: black; border: 1px solid #333; color: white;padding:2px;  background-image: url( '/images/x3dmenu_defaultscreen.png' ); background-size: 31px 31px; height: 33px; width: 33px; border: 1px solid silver; border-radius:17px;" title="default screen"></button>
  108.               </div>
  109.               <div style="margin-right:7px; display:inline-block" id="x3d_menu_fullscreen">
  110.                 <button id="button_fullscreen" style="font-family: helvetica, sans-serif; font-weight: normal; font-size: 10px; background-color: black; border: 1px solid #333; color: white;padding:2px; background-image: url( '/images/x3dmenu_fullscreen.png' ); background-size: 31px 31px; height: 33px; width: 33px; border: 1px solid silver; border-radius:17px;" title="full screen"></button>
  111.                 </div>
  113.               </div>
  115.               <div style="position: absolute; right: 0px; width: 0px; height: 100%; display:block; border-left: 1px solid #EFEFEF; background-color: #222; opacity: 0.8; text-align:left; font-family: helvetica, sans-serif; font-weight: bold; font-size: 10px; color: #FFF; padding-top:5px; padding-left:8px; padding-right:15px; z-index: 1;" id="x3d_item_detail">
  116.                   <div style="margin-top:1px" id="x3d_item_detail_close" style="tex-align: left; float: left;">
  117.                         <button id="button_item_detail_close" style="font-family: helvetica, sans-serif; font-weight: normal; font-size: 10px; background-color: black; border: 1px solid #333; color: white;padding:2px;  background-image: url( '{{ textureArray['button-exit-1'] }}' ); background-size: 31px 31px; height: 33px; width: 33px;" title="default screen"></button>
  118.                   </div>
  119.                   <div id="x3d_item_name" style="font-weight: bold; font-size: 22px; margin-top:8px"></div>
  120.                   <div style="margin-top:8px">
  121.                       <span id="x3d_item_description" style="font-weight: normal; font-size: 16px"></span>
  122.                   </div>        
  123.                   <div style="margin-top:6px" id="x3d_item_detail_close2" style="tex-align: left; float: left;">
  124.                         <button id="button_item_detail_close2" style="font-family: helvetica, sans-serif; font-weight: normal; font-size: 10px; background-color: black; border: 1px solid #333; color: white;padding:2px;  background-image: url( '{{ textureArray['button-exit-1'] }}' ); background-size: 31px 31px; height: 33px; width: 33px;" title="default screen"></button>
  125.                   </div>                                        
  126.               </div>
  128.                 <x3d width='100%' height="{{ screenHeight }}" id="x3d_section" class="x3d" style="height: {{ screenHeight }}; background-color: #222;">
  129.                 <scene id="x3d_scene">
  130.                 <NavigationInfo headlight="true" visibilityLimit="0.0" type='"EXAMINE", "ANY"' avatarSize="0.25, 1.75, 0.75"></NavigationInfo>
  132.                 {% if gallery3D.isStartGuide is defined and gallery3D.isStartGuide == true %}
  133.                     <Transform DEF='TourAvatarWrapper' id='TourAvatarWrapper'>
  134.                         <viewpoint orientation='0 1 0 -0.2' position='0 3 0' DEF='x3d_viewpoint_tour' id='x3d_viewpoint_tour'></viewpoint>
  135.                     </Transform>
  136.                 {% endif %}
  138.                 <Transform DEF='AvatarWrapper' id='AvatarWrapper'>
  139.                     <viewpoint orientation='0 1 0 -0' position='-5 3 7' DEF='x3d_viewpoint_1' id='x3d_viewpoint_1'></viewpoint>
  140.                 </Transform>
  141.                 <viewpoint orientation='0 1 0 1' position='-10 3 0'  id='x3d_viewpoint_2'></viewpoint>
  142.                 <viewpoint orientation='0 1 0 0.5' position='-10 3 -13'  id='x3d_viewpoint_3'></viewpoint>
  143.                 <viewpoint orientation='0 1 0 -0' position='0 3 11'  id='x3d_viewpoint_home'></viewpoint>
  145.                 {% if gallery3D.isStartGuide is defined and gallery3D.isStartGuide == false %}
  146.                     <Transform DEF='TourAvatarWrapper' id='TourAvatarWrapper'>
  147.                         <viewpoint orientation='0 1 0 -0.2' position='0 3 0' DEF='x3d_viewpoint_tour' id='x3d_viewpoint_tour'></viewpoint>
  148.                     </Transform>    
  149.                 {% endif %}        
  151.                 <DirectionalLight ambientIntensity='0.835991' direction='0.584419 0.286636 0.75914'></DirectionalLight>
  152.                 
  153.                 {% if gallery3D.preferredBackgroundSkyColor is defined and gallery3D.preferredBackgroundSkyColor != '' %}
  154.                     {% set preferredBackgroundSkyColor = gallery3D.preferredBackgroundSkyColor %}
  155.                 {% else %}
  156.                     {% set preferredBackgroundSkyColor = '0.8 0.8 0.2 0.8 0.8 0.2 0.1 0.1 0.6 0.1 0.1 0.6 0.1 0.25 0.8 0.6 0.6 0.9' %}
  157.                 {% endif %}    
  159.                 {% if gallery3D.preferredBackgroundGroundColor is defined and gallery3D.preferredBackgroundGroundColor != '' %}
  160.                     {% set preferredBackgroundGroundColor = gallery3D.preferredBackgroundGroundColor %}
  161.                 {% else %}
  162.                     {% set preferredBackgroundGroundColor = '0.2 0.2 0 0.3 0.3 0 0.5 0.5 0.3 0.1 0.3 0.4 0 0.2 0.4' %}
  163.                 {% endif %}                    
  164.                 
  165.                 <Background groundColor='{{ preferredBackgroundGroundColor }}' skyAngle='0.04 0.05 0.1 1.309 1.570' skyColor='{{ preferredBackgroundSkyColor }}'></Background>                
  167.                 
  168.               <Transform DEF='ImagesBox' translation='0 0 0' rotation='0 1 0 -0.13117953405799'>
  170.               {% set xPos = -15 %}
  171.               {% set zPos = 2 %}
  172.               {% set yRotation = 1.6 %}
  173.               {% set imageCount = 0 %}
  174.               {% set imagePanelWidth = 5.2 %}
  175.               {% set frontWallImageCount = 4 %}
  176.               {% set imageTotalCount = galleryItemCollection|length %}
  177.               {% set sideWallImageCount = ((imageTotalCount - frontWallImageCount)/2) %}
  178.               {% set zPosFrontWall = null %}
  179.  
  180.               {% for galleryItem in galleryItemCollection %}
  182.                       {% if (imageCount < (sideWallImageCount-1)) %}
  184.                           {% set zPos = zPos - imagePanelWidth %}
  185.                           {% set yRotation = 1.6 %}
  186.                           {% set xPosViewPoint = -7 %}
  187.                           {% set zPosViewPoint = zPos %}
  188.                           {% set zPosFrontWall = zPos %}
  190.                       {% elseif (imageCount < (sideWallImageCount + frontWallImageCount)) %}
  192.                           {% set xPos = xPos + imagePanelWidth %}
  193.                           {% set yRotation = 0 %}
  194.                           {% set xPosViewPoint = xPos %}
  195.                           {% set zPosViewPoint = -((sideWallImageCount * 4) - 5) %}
  196.                           {% set zPos = zPosFrontWall - 2 %}
  198.                       {% else %}    
  200.                           {% set zPos = zPos + imagePanelWidth %}
  201.                           {% set xPos = 15 %}
  202.                           {% set yRotation = -1.6 %}
  203.                           {% set xPosViewPoint = 9 %}
  204.                           {% set zPosViewPoint = zPos %}
  205.                           {% set zPosFrontWall = zPos %}
  207.                       {% endif %}
  209.                       {% set fileID = galleryItem.galleryItemId %}
  210.                       {% set itemId = galleryItem.galleryItemId %}
  212.                       {% if 'http' in galleryItem.galleryItemFile %}
  213.                           {% set path = galleryItem.galleryItemFile %}
  214.                           {% set pathObj = galleryItem.galleryItemFile %}
  215.                       {% else %}        
  216.                           {% set path = userDirs['web'] ~ '/images/' ~ galleryItem.galleryItemFile %}
  217.                           {% set pathObj = userDirs['web'] ~ '/images/' ~ galleryItem.galleryItemFile %}
  218.                       {% endif %}
  220.                       {% set image = path %}
  222.                     {% set img = imagecreatefromstring(file_get_contents(image)) %}
  223.                     {% set imgObj = imagecreatefromstring(file_get_contents(pathObj)) %}
  225.                     {% if ImageSX(imgObj) > ImageSY(imgObj) %} 
  226.                         {% set boxSize = gallery3DInfo['image_size_horisontal'] %}
  227.                         {% set frameSize = gallery3DInfo['frame_size_horisontal'] %}
  228.                     {% else %}
  229.                         {% set boxSize = gallery3DInfo['image_size_vertical'] %}
  230.                         {% set frameSize = gallery3DInfo['frame_size_vertical'] %}
  231.                     {% endif %}
  234.                 <viewpoint orientation='0 1 0 {{ yRotation }}' position='{{ xPosViewPoint }} 3.5 {{ zPosViewPoint }}' id='gallery_viewpoint_{{ fileID }}'></viewpoint>
  236.                 <Transform rotation='0 1 0 {{ yRotation }}' translation='{{ xPos }} 3.3 {{ zPos }}'>
  237.                 
  239.                   <Transform>
  240.                     <Shape onclick="changeViewpoint('gallery_viewpoint_{{ itemId }}')">
  241.                       <Appearance>
  242.                         <Material></Material>
  243.                         <ImageTexture url="{{ path }}"></ImageTexture>
  244.                       </Appearance>
  245.                       <Box size='{{ boxSize }}'></Box>
  246.                     </Shape>
  247.                     <TouchSensor DEF='Image1Sensor'></TouchSensor>
  248.                   </Transform>
  250.                   <Transform translation='0 0 -0.1'>
  251.                     <Shape>
  252.                       <Appearance>
  253.                         <Material diffuseColor='0 0 0' transparency='0.3'></Material>
  254.                       </Appearance>
  255.                       <Box size='{{ frameSize }}'></Box>
  256.                     </Shape>
  257.                   </Transform>
  258.                 </Transform> 
  259.                 <Transform rotation='0 1 0 {{ yRotation }}' translation='{{ xPos }} 1.3 {{ zPos }}'>    
  260.                     
  261.                     {% set menuX = 0 %}
  262.                     {% if galleryItem.clickURL is defined and galleryItem.clickURL != '' %}
  264.                         <!-- browse url button -->
  265.                         <Anchor
  266.                             description='{{ 'system.browse_url'|trans }}'
  267.                             id = 'img_url_{{ galleryItem.galleryItemId }}'
  268.                             url='{{ galleryItem.clickURL }}'
  269.                             parameter = 'target=_blank'>
  270.                             <Transform translation='{{ (menuX - 0.8) }} -0.85 0'>
  271.                               <Shape>
  272.                                 <Appearance>
  273.                                    <Material diffuseColor='0 1 0'></Material>
  274.                                    <ImageTexture url='{{ textureArray['browseurl-texture-1'] }}'></ImageTexture>
  275.                                        <TextureTransform scale='1 1'></TextureTransform>
  276.                                 </Appearance>
  277.                                 <Box size='1.7 0.7 0.1'></Box>
  278.                               </Shape>
  279.                             </Transform> 
  280.                         </Anchor>
  281.                         {% set menuX = menuX + 0.55 %}
  282.     
  283.                        {% endif %}
  285.                        {% if galleryItem.galleryItemDescription is defined and galleryItem.galleryItemDescription != '' %}
  287.                       <!--  more info button -->
  288.                         <Transform translation='{{ (menuX + 0.3) }} -0.85 0'>
  289.                           <Shape onclick="getGaleryItemDetail('{{ galleryItem.galleryItemName }}','{{ galleryItem.galleryItemDescription }}')">
  290.                             <Appearance>
  291.                                <Material diffuseColor='0 1 0'></Material>
  292.                                <ImageTexture url='{{ textureArray['info-texture-1'] }}'></ImageTexture>
  293.                                    <TextureTransform scale='1 1'></TextureTransform>
  294.                             </Appearance>
  295.                             <Box size='1.7 0.7 0.1'></Box>
  296.                           </Shape>
  297.                         </Transform> 
  299.                         {% set menuX = menuX + 0.55 %}
  300.  
  301.                        {% endif %}
  303.                 </Transform> 
  305.                   {% set imageCount = imageCount + 1 %}
  307.               {% endfor %}
  308.               
  309.                 <!-- logo 1 -->
  310.                 <Group DEF='Animation_header'>
  311.                   <TimeSensor DEF='LogoTimer'
  312.                       cycleInterval='24'
  313.                       loop='true'
  314.                       isActive='true'></TimeSensor>
  315.                   <OrientationInterpolator DEF='BoxRotationInterpolator'
  316.                       key='0, 0.25, 0.5, 0.75, 1'
  317.                       keyValue='0 0 1 0, 0 -1 0 1.5707963267949, 0 -1 0 3.14159253438051, 0 1 0 1.57079644600419, 0 0 1 0'></OrientationInterpolator>
  318.                 </Group>
  319.                 
  320.                 <Transform translation='0 8.5 -5' >
  321.                       <Shape >
  322.                         <Appearance >
  323.                           <Material diffuseColor='0.1 0.1 0.1'>
  324.                           </Material>
  325.                         </Appearance>
  326.                         <Cylinder height='0.3' radius='1.5' >
  327.                         </Cylinder>
  328.                       </Shape>
  329.                 </Transform>                
  330.                 
  331.                 <Transform DEF='ExamineSensor' translation='0 7 -5'>
  332.                   <Shape onclick="changeViewpoint('x3d_viewpoint_tour')">
  333.                     <Appearance>
  334.                       <Material ambientIntensity='0.1'></Material>
  335.                       <ImageTexture url='{{ textureArray['logo-texture-1'] }}'></ImageTexture>
  336.                       <TextureTransform scale='1 1'></TextureTransform>
  337.                     </Appearance>
  338.                     <Box size='3 3 3'></Box>
  339.                   </Shape>
  340.                 </Transform>            
  342.                 <TimeSensor DEF='userTime1' cycleInterval='25' cycleTime='1' elapsedTime='0' enabled='true' first='true' firstCycle='0.0' fraction_changed='0' isActive='false' isPaused='false' loop='false' metadata='X3DMetadataObject' pauseTime='0' resumeTime='0' startTime='0' stopTime='0' time='0' ></TimeSensor>
  344.                 <PositionInterpolator DEF='UserTranslation1' key='0 0.3 0.5 0.8 1.0' keyValue='-12 0.5 0 -2 0.5 {{ -((sideWallImageCount * 4) - 6) }} 12 0.5 {{ -((sideWallImageCount * 4) - 6) }} 12 0.5 0 -12 0.5 0'/></PositionInterpolator>
  345.                 <TimeSensor DEF='CLOCK' cycleInterval='{{ (imageTotalCount * 4) }}' loop='true' enabled='true'></TimeSensor>
  346.                 
  347.                 <!-- floor -->
  348.                 <Shape>
  349.                   <Appearance>
  350.                     <Material ambientIntensity='0.1'/></Material>
  351.                     <ImageTexture url='{{ textureArray['floor-texture-1'] }}'></ImageTexture>
  352.                     <TextureTransform scale='15 15'></TextureTransform>
  353.                   </Appearance>
  354.                   <IndexedFaceSet solid='false' coordIndex='0 1 2 3 -1'>
  355.                     <Coordinate point='-20 0 15.3 20 0 15.3 20 0 -70 -20 0 -70'></Coordinate>
  356.                   </IndexedFaceSet>
  357.                 </Shape>
  358.                 <!-- ceil -->
  359.                 <Shape>
  360.                   <Appearance>
  361.                     <Material ambientIntensity='0.1'></Material>
  362.                     <ImageTexture url='{{ textureArray['ceil-texture-1'] }}'></ImageTexture>
  363.                     <TextureTransform scale='15 15'></TextureTransform>
  364.                   </Appearance>
  365.                   <IndexedFaceSet solid='false' coordIndex='0 1 2 3 -1'>
  366.                     <Coordinate point='-20 8.9 15.3 20 8.9 15.3 20 8.9 -70 -20 8.9 -70'></Coordinate>
  367.                   </IndexedFaceSet>
  368.                 </Shape>
  369.                 <!-- back wall -->
  370.                 <Transform translation='0 4.6 15.3'>
  371.                   <Shape>
  372.                     <Appearance>
  373.                       <Material ambientIntensity='0.1'></Material>
  374.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  375.                       <TextureTransform scale='7 2'></TextureTransform>
  376.                     </Appearance>
  377.                     <Box size='40 9.2 0.4'></Box>
  378.                   </Shape>
  379.                 </Transform>
  380.                 <!-- front wall - bottom -->
  381.                 <Transform translation='0 0.8 -69.8'>
  382.                   <Shape>
  383.                     <Appearance>
  384.                       <Material ambientIntensity='0.1'></Material>
  385.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  386.                       <TextureTransform scale='15 0.7'></TextureTransform>
  387.                     </Appearance>
  388.                     <Box size='40 2.2 0.4'></Box>
  389.                   </Shape>
  390.                 </Transform>
  391.                 <!-- front wall - top -->
  392.                 <Transform translation='0 8.4 -69.8'>
  393.                   <Shape>
  394.                     <Appearance>
  395.                       <Material ambientIntensity='0.1'></Material>
  396.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  397.                       <TextureTransform scale='15 0.7'></TextureTransform>
  398.                     </Appearance>
  399.                     <Box size='40 2.2 0.4'></Box>
  400.                   </Shape>
  401.                 </Transform>
  402.                 <!-- front left column -->
  403.                 <Transform translation='-20 4.6 -69.8'>
  404.                   <Shape>
  405.                     <Appearance>
  406.                       <Material ambientIntensity='0.1'></Material>
  407.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  408.                       <TextureTransform scale='0.5 2'/>
  409.                     </Appearance>
  410.                     <Box size='1.5 9.2 1.5'></Box>
  411.                   </Shape>
  412.                 </Transform>
  413.                 <!-- front right column -->
  414.                 <Transform translation='-20 4.6 -25.8'>
  415.                   <Shape>
  416.                     <Appearance>
  417.                       <Material ambientIntensity='0.1'></Material>
  418.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  419.                       <TextureTransform scale='0.5 2'/>
  420.                     </Appearance>
  421.                     <Box size='1.5 9.2 1.5'></Box>
  422.                   </Shape>
  423.                 </Transform>
  424.                 <!-- left column -->
  425.                 <Transform translation='20 4.6 -69.8'>
  426.                   <Shape>
  427.                     <Appearance>
  428.                       <Material ambientIntensity='0.1'></Material>
  429.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  430.                       <TextureTransform scale='0.5 2'/>
  431.                     </Appearance>
  432.                     <Box size='1.5 9.2 1.5'></Box>
  433.                   </Shape>
  434.                 </Transform>
  435.                 <!-- left column --> 
  436.                 <Transform translation='20 4.6 -25.8'>
  437.                   <Shape>
  438.                     <Appearance>
  439.                       <Material ambientIntensity='0.1'></Material>
  440.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  441.                       <TextureTransform scale='0.5 2'/>
  442.                     </Appearance>
  443.                     <Box size='1.5 9.2 1.5'></Box>
  444.                   </Shape>
  445.                 </Transform>
  446.                 <!-- right side wall -->
  447.                 <Transform translation='-20 0.8 -27.2'>
  448.                   <Shape>
  449.                     <Appearance>
  450.                       <Material ambientIntensity='0.1'></Material>
  451.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  452.                       <TextureTransform scale='15 0.7'></TextureTransform>
  453.                     </Appearance>
  454.                     <Box size='0.4 2.2 85'></Box>
  455.                   </Shape>
  456.                 </Transform>
  457.                 <!-- left side wall -->                
  458.                 <Transform translation='-20 8.4 -27.2'>
  459.                   <Shape>
  460.                     <Appearance>
  461.                       <Material ambientIntensity='0.1'></Material>
  462.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  463.                       <TextureTransform scale='15 0.7'></TextureTransform>
  464.                     </Appearance>
  465.                     <Box size='0.4 2.2 85'></Box>
  466.                   </Shape>
  467.                 </Transform>
  468.                 <Transform translation='0 0.25 -67.5'>
  469.                   <Shape>
  470.                     <Appearance>
  471.                       <Material diffuseColor='0 0 0'/>
  472.                       <ImageTexture url='""'/>
  473.                       <TextureTransform scale='15 2'/>
  474.                     </Appearance>
  475.                     <Box size='30 0.5 5'></Box>
  476.                   </Shape>
  477.                 </Transform>
  478.                 <Transform translation='0 0.25 -64.995'>
  479.                   <Shape>
  480.                     <Appearance>
  481.                       <Material diffuseColor='0 0 0'/>
  482.                     </Appearance>
  483.                     <Box size='30 0.5 0.01'></Box>
  484.                   </Shape>
  485.                 </Transform>
  486.                 <!-- Left side floor below images -->
  487.                 <Transform translation='-18.3 0.25 -27.2'>
  488.                   <Shape>
  489.                     <Appearance>
  490.                       <Material diffuseColor='0 0 0'/>
  491.                       <ImageTexture url='""'/>
  492.                       <TextureTransform scale='2 15'/>
  493.                     </Appearance>
  494.                     <Box size='4 0.5 85'></Box>
  495.                   </Shape>
  496.                 </Transform>
  498.                 <Transform translation='20 0.8 -27.2'>
  499.                   <Shape>
  500.                     <Appearance>
  501.                       <Material ambientIntensity='0.1'></Material>
  502.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  503.                       <TextureTransform scale='15 0.7'></TextureTransform>
  504.                     </Appearance>
  505.                     <Box size='0.4 2.2 85'></Box>
  506.                   </Shape>
  507.                 </Transform>
  508.                 <Transform translation='20 8.4 -27.2'>
  509.                   <Shape>
  510.                     <Appearance>
  511.                       <Material ambientIntensity='0.1'></Material>
  512.                       <ImageTexture url='{{ textureArray['wall-texture-1'] }}'></ImageTexture>
  513.                       <TextureTransform scale='15 0.7'></TextureTransform>
  514.                     </Appearance>
  515.                     <Box size='0.4 2.2 85'></Box>
  516.                   </Shape>
  517.                 </Transform>
  518.                 <!-- Right side floor below images -->
  519.                 <Transform translation='17.3 0.25 -27.2'>
  520.                   <Shape>
  521.                     <Appearance>
  522.                       <Material diffuseColor='0 0 0'/>
  523.                       <ImageTexture url='""'/>
  524.                       <TextureTransform scale='2 15'/>
  525.                     </Appearance>
  526.                     <Box size='5 0.5 85'></Box>
  527.                   </Shape>
  528.                 </Transform>
  529.                 <Transform translation='14.8 0.25 -27.2'>
  530.                   <Shape>
  531.                     <Appearance>
  532.                       <Material DEF='backgroundPanel' diffuseColor='0 0 0'/>
  533.                     </Appearance>
  534.                     <Box size='0.01 0.5 85'></Box>
  535.                   </Shape>
  536.                 </Transform>
  537.             
  538.               </Transform>
  540.             <Route fromNode="CLOCK" fromField ="fraction_changed" toNode="UserTranslation1" toField="set_fraction"> </Route> 
  541.             <Route fromNode="UserTranslation1" fromField ="value_changed" toNode="TourAvatarWrapper" toField="translation"> </Route>  
  543.         </scene>
  544.       </x3d>
  545.     </div>
  546.         
  547.         <script>
  548.             //we setup full screen 3d canvas
  549.             // var buttonResizeScreen = document.getElementById("button_defaultscreen");
  550.       //       buttonResizeScreen.click(); // this will trigger the click event
  552.               {% if isFullscreen is defined and isFullscreen %}
  553.                 {% set resizeButton = 'button_defaultscreen' %}
  554.             {% else %}
  555.                 $( document ).ready(function() {
  556.                 // alert( "ready!" );
  557.                     document.getElementById("button_defaultscreen").click(); 
  558.                 });
  559.             {% endif %}    
  562.         </script>
  563.