diff --git a/plm/views/ir_attachment_view.xml b/plm/views/ir_attachment_view.xml
index 8c655984..62b177e3 100755
--- a/plm/views/ir_attachment_view.xml
+++ b/plm/views/ir_attachment_view.xml
@@ -262,7 +262,7 @@
                 <button
                     class="fa fa-print"
                     type="object"
-                    titel="print"
+                    title="print"
                     name="download_printout"
                     invisible="document_type in ['3d','pr','other']"/>
                 <field name="name" select="True"/>
diff --git a/plm_web_3d/__init__.py b/plm_web_3d/__init__.py
index 2b78325e..33331da3 100755
--- a/plm_web_3d/__init__.py
+++ b/plm_web_3d/__init__.py
@@ -1,3 +1,4 @@
+# -*- coding: utf-8 -*-
 ##############################################################################
 #
 #    OmniaSolutions, Your own solutions
@@ -18,12 +19,9 @@
 #    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 ##############################################################################
-
 """
 Created on 13/11/2020
-
 @author: Matteo Boscolo
 """
-
 from . import models
 from . import controllers
diff --git a/plm_web_3d/__manifest__.py b/plm_web_3d/__manifest__.py
index f72cbf07..53ddcea6 100644
--- a/plm_web_3d/__manifest__.py
+++ b/plm_web_3d/__manifest__.py
@@ -1,3 +1,4 @@
+# -*- coding: utf-8 -*-
 ##############################################################################
 #
 #    OmniaSolutions, Open Source Management Solution
@@ -20,23 +21,20 @@
 ##############################################################################
 {
     "name": "PLM Web 3d Support",
-    "version": "18.0.0.1",
+    "version": "18.0.1.0.0",
     "author": "OmniaSolutions",
     "website": "https://odooplm.omniasolutions.website",
     "category": "Manufacturing/Product Lifecycle Management (PLM)",
     "sequence": 15,
     "license": "AGPL-3",
-    "summary": "",
-    "images": [],
+    "summary": """
+    This Module allows you to view 3D file.
+    """,
     "depends": ["plm"],
     "data": [
-        # views
         "views/ir_attachment.xml",
         "views/web_template.xml",
     ],
-    "qweb": [],
-    "demo": [],
-    "test": [],
     "installable": True,
     "application": False,
     "auto_install": False,
diff --git a/plm_web_3d/controllers/__init__.py b/plm_web_3d/controllers/__init__.py
index ef003fc3..2a595943 100644
--- a/plm_web_3d/controllers/__init__.py
+++ b/plm_web_3d/controllers/__init__.py
@@ -1,7 +1,7 @@
 # -*- encoding: utf-8 -*-
 ##############################################################################
 #
-#    OmniaSolutions, Open Source Management Solution    
+#    OmniaSolutions, Open Source Management Solution
 #    Copyright (C) 2010-2011 OmniaSolutions (<http://www.omniasolutions.eu>). All Rights Reserved
 #    $Id$
 #
diff --git a/plm_web_3d/controllers/main.py b/plm_web_3d/controllers/main.py
index 381cbe98..2ce5a9cc 100755
--- a/plm_web_3d/controllers/main.py
+++ b/plm_web_3d/controllers/main.py
@@ -1,13 +1,9 @@
 # -*- coding: utf-8 -*-
-import functools
 import base64
+import functools
 import json
-import logging
-import os
-from odoo import _
+
 from odoo.http import Controller, route, request, Response
-import copy
-from odoo.tools.misc import DEFAULT_SERVER_DATETIME_FORMAT
 
 
 def webservice(f):
@@ -17,45 +13,53 @@ def wrap(*args, **kw):
             return f(*args, **kw)
         except Exception as e:
             return Response(response=str(e), status=500)
+
     return wrap
 
+
 class Web3DView(Controller):
-    @route('/plm/show_treejs_model', type='http', auth='public')
+    @route("/plm/show_treejs_model", type="http", auth="public")
     @webservice
     def show_treejs_model(self, document_id, document_name):
-        return request.render('plm_web_3d.main_treejs_view', {'document_id': document_id,
-                                                              'document_name': document_name})
+        return request.render(
+            "plm_web_3d.main_treejs_view",
+            {"document_id": document_id, "document_name": document_name},
+        )
 
-    @route('/plm/download_treejs_model', type='http', auth='public')
+    @route("/plm/download_treejs_model", type="http", auth="public")
     @webservice
     def download_treejs_model(self, document_id):
-        for ir_attachment in request.env['ir.attachment'].sudo().search([('id','=', int(document_id))]):
+        for ir_attachment in (
+            request.env["ir.attachment"].sudo().search([("id", "=", int(document_id))])
+        ):
             if ir_attachment.has_web3d:
                 headers = []
                 content_base64 = base64.b64decode(ir_attachment.datas)
-                headers.append(('Content-Length', len(content_base64)))
-                headers.append(('file_name', ir_attachment.name))
+                headers.append(("Content-Length", len(content_base64)))
+                headers.append(("file_name", ir_attachment.name))
                 response = request.make_response(content_base64, headers)
                 return response
         return Response(response="Document Not Found %r " % document_id, status=500)
-    
+
     def document_extra(self, document):
         """
-            this function id for customising the documents attributes
+        this function id for customising the documents attributes
         """
         return document
-    
+
     def component_extra(self, components):
         """
-            this function id for customising the component attributes
+        this function id for customising the component attributes
         """
         return components
-        
-    @route('/plm/get_product_info', type='http', auth="user")
+
+    @route("/plm/get_product_info", type="http", auth="user")
     @webservice
     def getProductInfo(self, document_id):
-        out={}
-        for ir_attachment in request.env['ir.attachment'].sudo().search([('id','=', int(document_id))]):
+        out = {}
+        for ir_attachment in (
+            request.env["ir.attachment"].sudo().search([("id", "=", int(document_id))])
+        ):
             if ir_attachment.has_web3d:
                 document = """
                 <li class="attribute_info"><b>Name:</b> %s</li>
@@ -64,30 +68,44 @@ def getProductInfo(self, document_id):
                 """ % (
                     ir_attachment.engineering_code or ir_attachment.name,
                     ir_attachment.engineering_revision,
-                    ir_attachment.engineering_state
-                    )
+                    ir_attachment.engineering_state,
+                )
                 document = self.document_extra(document)
-                out['document']=document
+                out["document"] = document
                 for component in ir_attachment.linkedcomponents:
                     components = """
                     <li class="attribute_info"><b>Product Name:</b> %s</li>
                     <li class="attribute_info"><b>Product Revision:</b> %s</li>
                     <li class="attribute_info"><b>Description:</b> %s</li>
-                    """ % ( component.engineering_code,
-                            component.engineering_revision,
-                            component.name)
+                    """ % (
+                        component.engineering_code,
+                        component.engineering_revision,
+                        component.name,
+                    )
                     components = self.component_extra(components)
-                    out['component']=components
+                    out["component"] = components
         return json.dumps(out)
-    
-    @route('/plm/get_3d_web_document_info', type='http', auth="user")
+
+    @route("/plm/get_3d_web_document_info", type="http", auth="user")
     @webservice
     def get_3d_web_document_info(self, src_name):
-        src_name = src_name.split("(")[0] # this split is needed for solidwoks file the put the configuration on the name filename(<configuration name>)description
+        src_name = src_name.split("(")[0]
+        # this split is needed for solidwoks file the put the configuration
+        # on the name filename(<configuration name>)description
         out = f"""<span>{src_name}</span>"""
-        for ir_attachment in request.env['ir.attachment'].sudo().search(['|',('name','ilike', src_name),('engineering_code','ilike', src_name)]):
+        for ir_attachment in (
+            request.env["ir.attachment"].sudo().search([
+                "|", ("name", "ilike", src_name),
+                ("engineering_code", "ilike", src_name)
+            ])
+        ):
             for product_product_id in ir_attachment.linkedcomponents:
-                out = f"""<span title={product_product_id.name}>{product_product_id.engineering_code} Rev. {product_product_id.engineering_revision}</span>"""
+                out = f"""
+                <span title={product_product_id.name}>
+                {product_product_id.engineering_code}
+                Rev. {product_product_id.engineering_revision}
+                </span>
+                """
                 break
+
         return out
-  
\ No newline at end of file
diff --git a/plm_web_3d/models/__init__.py b/plm_web_3d/models/__init__.py
index 78e39ddb..d0391b99 100755
--- a/plm_web_3d/models/__init__.py
+++ b/plm_web_3d/models/__init__.py
@@ -1,3 +1,4 @@
+# -*- encoding: utf-8 -*-
 ##############################################################################
 #
 #    OmniaSolutions, Your own solutions
@@ -18,13 +19,9 @@
 #    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 ##############################################################################
-
 """
 Created on 13/11/2020
-
 @author: Matteo Boscolo
 """
-
 from . import ir_attachment
 from . import product_product_document_rel
-
diff --git a/plm_web_3d/models/ir_attachment.py b/plm_web_3d/models/ir_attachment.py
index 01abc73d..63c7f245 100644
--- a/plm_web_3d/models/ir_attachment.py
+++ b/plm_web_3d/models/ir_attachment.py
@@ -18,33 +18,38 @@
 #    along with this prograIf not, see <http://www.gnu.org/licenses/>.
 #
 ##############################################################################
-'''
+"""
 Created on 13 Nov 2020
-
 @author: mboscolo
-'''
+"""
 import os
-import json
-import logging
-import datetime
-from odoo import models
-from odoo import fields
-from odoo import api
-from odoo import _
-from odoo.exceptions import UserError
-from datetime import timedelta
-from odoo.tools import DEFAULT_SERVER_DATETIME_FORMAT
 import urllib.parse
-SUPPORTED_WEBGL_EXTENTION = ['.3mf','.gltf','.glb','.fbx','.obj','.wrl','.json', '.stl','.svg', '.dxf']
-#
-#
+
+from odoo import api, fields, models
+
+SUPPORTED_WEBGL_EXTENTION = [
+    ".3mf",
+    ".gltf",
+    ".glb",
+    ".fbx",
+    ".obj",
+    ".wrl",
+    ".json",
+    ".stl",
+    ".svg",
+    ".dxf",
+]
+
+
 class IrAttachment(models.Model):
-    _inherit = ['ir.attachment']
-    
-    has_web3d = fields.Boolean(string="Has 3d Web link",
-                               compute="_compute_web_3d_link",
-                              # store=True,
-                               help='Check if this document has related 3d web document')
+    _inherit = "ir.attachment"
+
+    has_web3d = fields.Boolean(
+        string="Has 3d Web link",
+        compute="_compute_web_3d_link",
+        # store=True,
+        help="Check if this document has related 3d web document",
+    )
 
     def isWebGl(self):
         for ir_attachment in self:
@@ -52,51 +57,58 @@ def isWebGl(self):
                 _name, exte = os.path.splitext(ir_attachment.name)
                 return exte.lower() in SUPPORTED_WEBGL_EXTENTION
         return False
-    
-    @api.depends('name')
+
+    @api.depends("name")
     def _compute_web_3d_link(self):
-        attach_relations = self.env['ir.attachment.relation']
+        attach_relations = self.env["ir.attachment.relation"]
         for ir_attachment in self:
             if ir_attachment.isWebGl():
                 ir_attachment.has_web3d = True
                 continue
-            ir_attachment.has_web3d = attach_relations.search_count([('parent_id', '=', ir_attachment.id),
-                                                                     ('link_kind','=','Web3DTree')])
-        
+            ir_attachment.has_web3d = attach_relations.search_count([
+                ("parent_id", "=", ir_attachment.id),
+                ("link_kind", "=", "Web3DTree")
+            ])
+
     def get_url_for_3dWebModel(self):
-        attach_relations = self.env['ir.attachment.relation']
+        attach_relations = self.env["ir.attachment.relation"]
         for ir_attachment in self:
-            base_url = self.env['ir.config_parameter'].sudo().get_param('web.base.url')
+            base_url = self.env["ir.config_parameter"].sudo().get_param("web.base.url")
             url_params = None
             if ir_attachment.isWebGl():
-                url_params = urllib.parse.urlencode({'document_id': ir_attachment.id,
-                                                     'document_name': ir_attachment.name})
+                url_params = urllib.parse.urlencode({
+                    "document_id": ir_attachment.id,
+                    "document_name": ir_attachment.name
+                })
             else:
-                for rel in attach_relations.search([('parent_id', '=', ir_attachment.id),
-                                                    ('link_kind','=','Web3DTree')]):
-                    
-                    url_params = urllib.parse.urlencode({'document_id': rel.child_id.id,
-                                                         'document_name': rel.child_id.name})
+                for rel in attach_relations.search([
+                    ("parent_id", "=", ir_attachment.id),
+                    ("link_kind", "=", "Web3DTree")
+                ]):
+                    url_params = urllib.parse.urlencode({
+                        "document_id": rel.child_id.id,
+                        "document_name": rel.child_id.name
+                    })
             if url_params:
                 return f"{base_url}/plm/show_treejs_model?{url_params}"
-    
+
     def show_releted_3d(self):
         for ir_attachment in self:
             url = ir_attachment.get_url_for_3dWebModel()
             if url:
-                return {'name': 'Odoo TreeJs View',
-                        'res_model': 'ir.actions.act_url',
-                        'type': 'ir.actions.act_url',
-                        'target': self,
-                        'url': url
-                        }
+                return {
+                    "name": "Odoo TreeJs View",
+                    "res_model": "ir.actions.act_url",
+                    "type": "ir.actions.act_url",
+                    "target": self,
+                    "url": url,
+                }
 
     def get_all_relation(self, document_id, exte):
-        out={}
+        out = {}
         if exte in document_id.name:
             out[document_id.id] = document_id.name
         for child_attachment_id in self.getRelatedHiTree(document_id.id):
             if exte in self.browse(child_attachment_id).name:
-                out[child_attachment_id.id]=child_attachment_id.name
+                out[child_attachment_id.id] = child_attachment_id.name
         return out
-        
\ No newline at end of file
diff --git a/plm_web_3d/models/product_product_document_rel.py b/plm_web_3d/models/product_product_document_rel.py
index a7535c37..1206789c 100644
--- a/plm_web_3d/models/product_product_document_rel.py
+++ b/plm_web_3d/models/product_product_document_rel.py
@@ -18,38 +18,30 @@
 #    along with this prograIf not, see <http://www.gnu.org/licenses/>.
 #
 ##############################################################################
-'''
+"""
 Created on 13 Nov 2020
-
 @author: mboscolo
-'''
-import logging
-import datetime
-from odoo import models
-from odoo import fields
-from odoo import api
-from odoo import _
-from odoo.exceptions import UserError
-from datetime import timedelta
-from odoo.tools import DEFAULT_SERVER_DATETIME_FORMAT
+"""
+from odoo import fields, models
+
 
 class PlmComponentDocumentRel(models.Model):
-    _inherit = 'plm.component.document.rel'
-     
-    has_web3d = fields.Boolean(string='Has Web3d',
-                               related='document_id.has_web3d',
-                               help="Check if this document has releted 3d web document")
+    _inherit = "plm.component.document.rel"
+
+    has_web3d = fields.Boolean(
+        string="Has Web3d",
+        related="document_id.has_web3d",
+        help="Check if this document has releted 3d web document",
+    )
+
     def show_releted_3d(self):
         for PlmCompDocRel in self:
             if PlmCompDocRel.has_web3d:
                 url = PlmCompDocRel.documeent_id.get_url_for_3dWebModel()
-                return {'name': 'Go to website 3dWebView',
-                        'res_model': 'ir.actions.act_url',
-                        'type': 'ir.actions.act_url',
-                        'target': self,
-                        'url': url
-                        }
-    
-    
-    
-    
\ No newline at end of file
+                return {
+                    "name": "Go to website 3dWebView",
+                    "res_model": "ir.actions.act_url",
+                    "type": "ir.actions.act_url",
+                    "target": self,
+                    "url": url,
+                }
diff --git a/plm_web_3d/static/src/css/OdooCADApplication.css b/plm_web_3d/static/src/css/OdooCADApplication.css
index dc4edcc6..de70893f 100644
--- a/plm_web_3d/static/src/css/OdooCADApplication.css
+++ b/plm_web_3d/static/src/css/OdooCADApplication.css
@@ -44,14 +44,14 @@
 	padding: 5px;
 	position: relative;
 	text-align: center;
-	
+
 }
 .main_command_slide {
   height: 26px;
-  box-shadow:2px 2px 5px 1px grey;
+  /*box-shadow:2px 2px 5px 1px grey;*/
   width: auto;
-  opacity: .5;
-  background-color: white;
+  /*opacity: .5;*/
+  /*background-color: white;*/
   overflow: hidden;
   position: absolute;
   transition: height 0.1s;
@@ -62,14 +62,17 @@
   /* Safari and Chrome */
   -o-transition: height 0.1s;
   /* Opera */
-  transform-origin: bottom;  
+  transform-origin: bottom;
+}
+#activatorClick{
+        box-shadow: 2px 2px 5px 1px grey;
 }
-.main_command_slide:hover{
+/*.main_command_slide:hover{
 	 height: 210px;
 	 background-color: transparent;
-	 opacity: 1; 
-	 
-}
+	 opacity: 1;
+
+}*/
 .main_command_slide .activator {
   height: 80px;
   width: 100%;
@@ -80,15 +83,17 @@
   text-align: center;
   margin: 1px;
   height: 20px;
-  width: 20%;
-  float: top;
+  width: 25px;
+  border-radius: 2px !important;
+  padding: 2px !important;
+  /*float: top;*/
 }
 #hiper_treejs{
 	justify-self:center;
 }
 #hiper_odooplm{
 	justify-self:right;
-	
+
 }
 .header_image{
 	height: 40;
@@ -98,7 +103,7 @@
   margin: 1px;
 }
 
-.activator:hover {}
+/*.activator:hover {}
 
 .activator:hover .content {
   display: block;
@@ -106,7 +111,7 @@
 
 .activator:hover .img {
   float: bottom;
-}
+}*/
 
 .measurement {
 	 pointer-events: auto;
@@ -117,7 +122,7 @@
      margin: 5px;
      cursor: row-resize;
  }
- 
+
 .measurementLabel {
      display: inline-block;
      font-family: monospace;
@@ -143,7 +148,7 @@
   background: #997992;
   -webkit-appearance: none;
   background-color: white;
-  border-radius: 5px;  
+  border-radius: 5px;
 }
 
 #object_explosion::-webkit-slider-thumb {
@@ -167,11 +172,11 @@
 
 #object_transparency {
   margin: 10px;
-  
+
   background: #997992;
   -webkit-appearance: none;
   background-color: white;
-  border-radius: 5px;  
+  border-radius: 5px;
 }
 
 
@@ -244,9 +249,10 @@ label{
   border-radius: 10px;
   border: 2px solid #714B67;
   padding: 2px;
+  margin-top: 27px;
   width: 300px;
   visibility: hidden;
-  opacity:0;  
+  opacity:0;
   resize: horizontal;
   overflow: auto;
   direction: rtl;
@@ -259,12 +265,12 @@ label{
 }
 
 hr.datacard_line{
-    color: #714B67; 
+    color: #714B67;
     margin-top: 2px ;
 }
 
 hr.hover_line{
-    color: #714B67; 
+    color: #714B67;
     margin-top: 4px ;
     margin-bottom: 4px ;
 }
@@ -304,6 +310,10 @@ li.attribute_info{
 .cube {
   width: 80px;
   height: 80px;
+  left: unset !important;
+  top: unset !important;
+  bottom: 25px !important;
+  right: 25px !important;
   transform-style: preserve-3d;
   transform: translateZ(-100px);
   position: absolute;
@@ -331,8 +341,8 @@ li.attribute_info{
 }
 .cube__face:hover{
       background: #7d7d7d;
-      color: #fff;	
-	
+      color: #fff;
+
 }
 .cube__face--front {
   background: rgba(194, 103, 171, 0.9);
@@ -433,6 +443,14 @@ ul, #myUL {
 .document_tree_line>i:hover{
 	background-color: #eda3da;
 }
-
-
-
+canvas#odoo_canvas{
+    height: -webkit-fill-available !important;
+    width: -webkit-fill-available !important;
+}
+.click_show{
+    margin-left: unset !important;
+    margin-right: unset !important;
+    width: 25px !important;
+    right: 0px !important;
+    position: absolute !important;
+}
diff --git a/plm_web_3d/static/src/js/OdooCADApplication.js b/plm_web_3d/static/src/js/OdooCADApplication.js
index 950da279..ccea40f1 100644
--- a/plm_web_3d/static/src/js/OdooCADApplication.js
+++ b/plm_web_3d/static/src/js/OdooCADApplication.js
@@ -1,6 +1,6 @@
 // some of the code here is taken from
 // https://github.com/leemun1/three-viewcube
-// thanks https://github.com/leemun1 
+// thanks https://github.com/leemun1
 
 import * as THREE from './lib/three.js/build/three.module.js';
 import * as ODOOCAD from './lib/odoocad/odoocad.js';
@@ -48,7 +48,7 @@ const pointer = new THREE.Vector2();
 function createSphereHelper() {
   var sphere = new THREE.SphereGeometry(snapDistance,
 		  								snapDistance,
-		  								snapDistance);	
+		  								snapDistance);
   sphere.widthSegments=32;
   sphere.heightSegments=32;
   const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
@@ -139,7 +139,7 @@ var change_background = function (){
 	    break;
 	  case 'room2':
 		  imageBckground('/plm_web_3d/static/src/img/bakgroung_360/white_room.png');
-	    break;	    
+	    break;
 	  case 'workshop1':
 		  imageBckground('/plm_web_3d/static/src/img/bakgroung_360/workshop1.png');
 		  break;
@@ -170,12 +170,12 @@ function imageBckground(path_to_load){
 		texture.mapping = THREE.EquirectangularReflectionMapping;
 	    const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
 	    rt.fromEquirectangularTexture(renderer, texture);
-	    
+
 	    scene.background = texture;
-	    
+
 	    const cubeCamera = new THREE.CubeCamera( 1, 100000, rt );
 	    scene.add( cubeCamera );
-	    
+
 	    render();
 	    controls.update();
 	  });
@@ -222,7 +222,7 @@ function show_all_scene_item(){
         icon.classList.remove('fa-eye-slash');
         icon.classList.add('fa-eye');
     }
-    OdooCad.show_all();                    
+    OdooCad.show_all();
 }
 
 function hide_all_scene_item(){
@@ -300,8 +300,8 @@ function init() {
  */
   var bnt_hide_all_parts = document.getElementById('hide_all_parts');
   bnt_hide_all_parts.addEventListener("click", hide_all_scene_item);
-  
-  
+
+
   var bnt_show_all_parts = document.getElementById('show_all_parts');
   bnt_show_all_parts.addEventListener("click", show_all_scene_item);
 
@@ -354,13 +354,15 @@ function initcommand(){
 	var selector = document.getElementById("webgl_background");
 	selector.onchange = function(event){
 		change_background();
-	} 
-	
+	}
+
 	let click_show = document.getElementById("click_show");
-	
+	let activatorClick = document.getElementById("activatorClick");
+	console.log(activatorClick);
+    activatorClick.addEventListener("click", onActivatorClick);
 
 	click_show.addEventListener("click", on_data_card_button_click);
-	
+
 	// document.addEventListener('mousemove', onDocumentMousemove, false);
 	document.addEventListener('pointerdown', onClick, false);
 	document.addEventListener('pointermove', onPointerMove );
@@ -370,10 +372,10 @@ function initcommand(){
 	html_canvas.addEventListener("OdooCAD_fit_items", fitCameraToSelectionEvent, false);
 	var object_transparency = document.getElementById("object_transparency");
 	object_transparency.oninput = change_object_transparency;
-    
+
     var object_explosion = document.getElementById("object_explosion");
     object_explosion.oninput = change_object_explosion;
-    	
+
 	var colorPicker = document.getElementById("object_color");
 	colorPicker.oninput = change_object_color;
 	/*
@@ -399,17 +401,32 @@ function initcommand(){
 	xmlhttp.open("GET", url, true);
 	xmlhttp.send();
 }
-
+function onActivatorClick(event) {
+	  // highlight the mouseover target
+	  let bottom_command = document.getElementById("bottom_command");
+	  let main_command_slide = document.getElementById('mainCommandSlide')
+//	  $(bottom_command).toggleClass('d-none')
+	  if (bottom_command.classList.contains('d-none')) {
+	    bottom_command.style.visibility = 'visible';
+	    bottom_command.style.opacity=0.8;
+	    bottom_command.classList.remove('d-none');
+	    main_command_slide.style.height= '210px';
+	  }
+	  else{
+	    bottom_command.style.visibility= 'invisible';
+	    bottom_command.style.opacity=0;
+	    bottom_command.classList.add('d-none');
+	    main_command_slide.style.height= '26px';
+	  }
+	}
 function on_data_card_button_click(event) {
 	  // highlight the mouseover target
 	  let main_div = document.getElementById("main_div");
 	  if (clicked) {
-	    console.log("not clicked");  
 	    main_div.style.visibility = 'invisible';
 	    main_div.style.opacity=0;
 	  }
 	  else{
-	     console.log("clicked");  
 	    main_div.style.visibility= 'visible';
 	    main_div.style.opacity=0.8;
 	  }
@@ -445,7 +462,7 @@ var saveFile = function (strData, filename) {
         location.replace(uri);
     }
 }
-        
+
 var change_object_color = function(event){
 	var items = OdooCad.items;
 	for (let i = 0; i < items.length; i=i+1) {
@@ -456,7 +473,7 @@ var change_object_color = function(event){
 
 var apply_transparency = function(item, value){
         var material = item.material;
-             
+
         if(value){
             if (value>99.9){
                 material.transparent=false;
@@ -471,7 +488,7 @@ var apply_transparency = function(item, value){
         else{
             material.transparent=true;
             material.opacity=0;
-        }   
+        }
 }
 var change_object_transparency = function(event) {
 	var items = OdooCad.items;
@@ -493,7 +510,7 @@ var change_object_explosion = function(event){
     var value = this.value;
     var factor= entitys_BBOX.max.length()/10000
     for (let i = 0; i < items.length; i=i+1) {
-        var loop_item = items[i];    
+        var loop_item = items[i];
             explode(loop_item,
                     entitys_BBOX.getCenter(center),
                     value,
@@ -503,9 +520,9 @@ var change_object_explosion = function(event){
 
 var fitCameraToSelectionEvent = function(e){
     if (Object.values(OdooCad.tree_ref_elements).length>0){
-	fitCameraToSelection(OdooCad.tree_ref_elements,1.1);	
-	   return 
-	}	
+	fitCameraToSelection(OdooCad.tree_ref_elements,1.1);
+	   return
+	}
 	fitCameraToSelection(OdooCad.items,1.1);
 }
 
@@ -554,8 +571,8 @@ var onClick = function (e) {
 	        drawingLine = false;
 	        lineId++;
 	    }
-	} 
-	
+	}
+
 }
 
 function onPointerMove( event ) {
@@ -587,7 +604,7 @@ function onPointerMove( event ) {
 	        }
 		}
 		render();
-		
+
 	}
 }
 
@@ -606,7 +623,7 @@ function onKeyup(event) {
         renderer.domElement.style.cursor = "pointer";
         if (drawingLine) {
         	drawingLine = false;
-        } 
+        }
         scene.remove(measurementLabels[lineId]);
         scene.remove(startPoint[lineId]);
         scene.remove(endPoint[lineId]);
@@ -633,7 +650,7 @@ function addCamera(){
 
 function addOrbit(){
 	controls = new OrbitControls( camera, renderer.domElement );
-	controls.addEventListener('change', render ); 
+	controls.addEventListener('change', render );
 	controls.minDistance = 2;
 	controls.maxDistance = 10;
 	controls.rotateSpeed = 0.5
@@ -643,7 +660,7 @@ function addOrbit(){
 
 function resetLight(bbox, size) {
 	var mult = size * 1000;
-	var center = new THREE.Vector3(); 
+	var center = new THREE.Vector3();
 	bbox.getCenter(center);
 	var x = center.x + mult;
 	var y = center.y + mult;
@@ -670,14 +687,14 @@ function addLight(){
 	light1.position.y = - 70;
 	light1.position.x = - 70;
 	scene.add( light1 );
-	
+
 	light2 = new THREE.DirectionalLight( 0xffdddd, 0.1 );
 	light2.castShadow = true; // default false
 	light2.position.z = 70;
 	light2.position.x = - 70;
 	light2.position.y = 70;
 	scene.add( light2 );
-	
+
 	light3 = new THREE.DirectionalLight( 0xf7d962, 0.1 );
 	light3.castShadow = true; // default false
 	light3.position.z = 70;
@@ -689,11 +706,11 @@ function addLight(){
                                                   'darkslategrey',  // dim ground color
                                                   1.5,                // intensity
     );
-    
+
     scene.add(ambientLight);
     if (DEBUG_SCENE){
         let i = 0;
-        const lights = [light1,light2,light3]; 
+        const lights = [light1,light2,light3];
         while (i < lights.length) {
             var directionalLightHelper = new THREE.DirectionalLightHelper(lights[i]);
             scene.add( directionalLightHelper );
@@ -719,7 +736,7 @@ function showSnapPoint(){
 				spoolVector.x = vertices[i] + intersection.object.position.x;
 				spoolVector.y = vertices[i+1] + intersection.object.position.y;
 				spoolVector.z = vertices[i+2] + intersection.object.position.z;
-				check_distance = intersection.point.distanceTo( spoolVector ) 
+				check_distance = intersection.point.distanceTo( spoolVector )
 				if (first){
 					distance = check_distance;
 					nearestPoint = 	spoolVector;
@@ -727,7 +744,7 @@ function showSnapPoint(){
 				} else {
 					if (check_distance < distance){
 						distance = check_distance;
-						nearestPoint = 	spoolVector;	
+						nearestPoint = 	spoolVector;
 						/*
 						 * console.log(distance); console.log("IP",
 						 * intersection.point); console.log("SV", spoolVector);
@@ -742,7 +759,7 @@ function showSnapPoint(){
 			sphereHelper.visible=false;
 		}
 	}
-	
+
 }
 
 function updateOrientationCube(camera){
@@ -778,7 +795,7 @@ function tweenCamera(position){
         offsetUnit * offsetFactor.y,
         offsetUnit * offsetFactor.z
       );
-    
+
     const center = new THREE.Vector3();
     const finishPosition = center.add(offset);
     console.log("-> new camera position: ");
@@ -837,41 +854,41 @@ function getElementByXpath(path, document_env) {
 /**
  * obj : the current node on the scene graph
  * box_ct_world : a vec3 center of the bounding box
- * 
+ *
  */
 function explode(obj,
                  box_center,
                  speed,
                  factor){
-    //var scene = this.el.sceneEl.object3D ; //I am using Aframe , so this is how I retrieve the whole scene .   
+    //var scene = this.el.sceneEl.object3D ; //I am using Aframe , so this is how I retrieve the whole scene .
     if(obj instanceof THREE.Mesh){
-        var position = obj.position ; 
+        var position = obj.position ;
+
+        position.setFromMatrixPosition(scene.matrixWorld) ;
 
-        position.setFromMatrixPosition(scene.matrixWorld) ; 
-    
         var addx =0 ;
         var addy =0 ;
-        var addz =0 ; 
-    
+        var addz =0 ;
+
         /**
          * This is the vector from the center of the box to the node . we use that to translate every meshes away from the center
          */
-        var addx =(position.x - box_center.x) * speed * factor; 
+        var addx =(position.x - box_center.x) * speed * factor;
         var addy =(position.y - box_center.y) * speed * factor;
-        var addz =(position.z - box_center.z) * speed * factor; 
+        var addz =(position.z - box_center.z) * speed * factor;
         var explode_vectorx=  addx;
         var explode_vectory=  addy;
         var explode_vectorz=  addz;
-    
-        var vector = new THREE.Vector3(explode_vectorx , explode_vectory, explode_vectorz) ; 
+
+        var vector = new THREE.Vector3(explode_vectorx , explode_vectory, explode_vectorz) ;
         obj.position.set(vector.x , vector.y , vector.z ) ;
-    
+
         if(obj.children.length != 0 ){
           for(var i = 0 ; i < obj.children.length ; i++){
              explode(obj.children[i],
                      box_center,
                      speed,
-                     factor); 
+                     factor);
           }
         }
       }
@@ -881,8 +898,8 @@ function explode(obj,
                 explode(obj.children[i],
                         box_center,
                         speed,
-                        factor); 
-            }            
+                        factor);
+            }
         }
      }
 };
@@ -911,11 +928,11 @@ if (inIframe()){
 					carousel.addEventListener("click", function() {
 						console.log("refreshed");
 						refreshIframe();
-					})	
+					})
 					iframe.setAttribute('o-plm-refreshed', true);
 			}	}
 	},false);
-	
+
 }
 // commandEffects();
 
@@ -999,6 +1016,5 @@ const defined_orientation = {
     }
     };
 
-
 export {camera};
 export {tweenCamera};
diff --git a/plm_web_3d/views/ir_attachment.xml b/plm_web_3d/views/ir_attachment.xml
index bae6f24f..a24324f9 100644
--- a/plm_web_3d/views/ir_attachment.xml
+++ b/plm_web_3d/views/ir_attachment.xml
@@ -4,17 +4,19 @@
         <field name="name">plm.web.3d.plm.document.kanban.view</field>
         <field name="model">ir.attachment</field>
         <field name="inherit_id" ref="plm.document_kanban_view"/>
-        <field name="arch" type="xml">    
-	        <xpath expr="//kanban/field[@name='engineering_state']" position="after">
-	            <field name="has_web3d"></field>
-	        </xpath>
-	        <xpath expr="//td[@name='attachment_button_box']" position="inside">
-	           <button type="object"
-	                   name="show_releted_3d"
-	                   class="btn btn-primary btn-sm"
-	                   invisible="has_web3d==False">
-	                   <i class="fa fa-cube"></i> WebGl</button>
-	        </xpath>
+        <field name="arch" type="xml">
+            <xpath expr="//kanban/field[@name='engineering_state']" position="after">
+                <field name="has_web3d"></field>
+            </xpath>
+            <xpath expr="//td[@name='attachment_button_box']" position="inside">
+                <button type="object"
+                        name="show_releted_3d"
+                        class="btn btn-primary btn-sm"
+                        invisible="has_web3d==False">
+                    <i class="fa fa-cube"></i>
+                    WebGl
+                </button>
+            </xpath>
         </field>
     </record>
 
@@ -22,17 +24,17 @@
         <field name="name">plm.web.3d.plm.view_attachment.form.plm.hinerit</field>
         <field name="model">ir.attachment</field>
         <field name="inherit_id" ref="plm.view_attachment_form_plm_hinerit"/>
-        <field name="arch" type="xml">  
+        <field name="arch" type="xml">
             <xpath expr="//button[@name='action_view_rel_doc']" position="after">
-                 <field name="has_web3d" invisible="True"/>
-                 <button name="show_releted_3d"
-                         class="oe_stat_button" icon="fa-cube" type="object" 
-                         invisible="has_web3d==False">
-                         <div class="o_field_widget o_stat_info o_readonly_modifier">
-                            <span>WebGl</span>
-                         </div>                        
-                  </button>
-            </xpath>                 
+                <field name="has_web3d" invisible="True"/>
+                <button name="show_releted_3d"
+                        class="oe_stat_button" icon="fa-cube" type="object"
+                        invisible="has_web3d==False">
+                    <div class="o_field_widget o_stat_info o_readonly_modifier">
+                        <span>WebGl</span>
+                    </div>
+                </button>
+            </xpath>
         </field>
     </record>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/plm_web_3d/views/web_template.xml b/plm_web_3d/views/web_template.xml
index 87e42817..aaf241a8 100644
--- a/plm_web_3d/views/web_template.xml
+++ b/plm_web_3d/views/web_template.xml
@@ -1,162 +1,169 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <odoo>
-  <template id="plm_web_3d.main_treejs_view">
-    <html>
-      <head>
-        <meta charset="utf-8"></meta>
-        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"></meta>
-        <title>OdooPLM WebGl View</title>       
-        <script type="importmap">
-            {"imports": {
-                "three": "../plm_web_3d/static/src/js/lib/three.js/build/three.module.js"
-                }
-             }
-        </script>
-        <script type="module" >
-            import { tweenCamera,camera } from "../plm_web_3d/static/src/js/OdooCADApplication.js";
-            window.tweenCamera = tweenCamera;
-            window.camera = camera;
-        </script>
-        <link rel="stylesheet" type="text/css" href="../plm_web_3d/static/src/css/OdooCADApplication.css"></link>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
-      </head>
-      <body style="margin: 0;">
-      	<div id="main_3d_web">
-	        
-	        <span id="active_model" t-att-active_model="document_id" t-att-document_name="document_name"></span>
-	        <div id="odoo_plm_title">
-                <a href="https://odooplm.omniasolutions.website/" id="hiper_odooplm">
-                   <img src="../plm_web_3d/static/src/img/odoo_plm_2019x300.png" alt="OdooPLM" class="header_image"/>
-                </a>
-                <a href="https://threejs.org/" id="hiper_treejs">
-                    <img src="../plm_web_3d/static/src/img/threejs_logo.png" alt="ThreeJs" class="header_image"/>
-                </a>
-                <div id="progress">
-                    <div id="progress_bar"/>
-                </div>
-            </div>
-            <div class='main_command_slide'>
-                <div class='activator'>
-                    <div class="img">
-                      <hr class="hover_line"/>
-                      <hr class="hover_line"/>
-                      <hr class="hover_line"/>
-                    </div>	        
-        	        <lu id="bottom_command">
-        	            <li class="plm_web_button" id="fit_view"><i class="fa fa-home"></i>Fit</li>
-        	            <li class="plm_web_button" id="save_view"><i class="fa fa-save"></i>Save</li>
-        	            <li  class="plm_web_button">
-            	            <label for="webgl_background">BackGround:</label>
-                            <select name="webgl_background" id="webgl_background">
-                                <option value="tecnical">Tecnical</option>
-                                <option value="room1">Room 1</option>
-                                <option value="room2">Room 2</option>
-                                <option value="outdoor">Outdoor 1</option>
-                                <option value="workshop1">WorkShop 1</option>
-                                <option value="workshop2">WorkShop 2</option>
-                                <option value="workshop3">WorkShop 3</option>
-                            </select>
-                        </li>
-                        <li  class="plm_web_button">
-                           <label for="transparency_slider">Transparency:</label>
-            	           <input name="transparency_slider" id="object_transparency" type="range" min="0" max="100" value="90"/>
-        	           </li>
-                        <li  class="plm_web_button">
-                           <label for="explosion_slider">Explosion:</label>
-                           <input name="explosion_slider" id="object_explosion" type="range" min="0" max="100" value="0"/>
-                       </li>
-        	           <li  class="plm_web_button">
-            	           <div id="color_object_grp">
-            	               <label for="object_color">Color:</label>
-                               <input type="color" id="object_color" name="object_color" value="#b2ffc8"/>
-                            </div>
-                       </li>
-        	        </lu>
-                </div>
-            </div>
-                <div id="datasheet">
-                    <div id="click_show">
-                      <hr class="hover_line"/>
-                      <hr class="hover_line"/>
-                      <hr class="hover_line"/>
+    <template id="plm_web_3d.main_treejs_view">
+        <html>
+            <head>
+                <meta charset="utf-8"></meta>
+                <meta name="viewport"
+                      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"></meta>
+                <title>OdooPLM WebGl View</title>
+                <script type="importmap">
+                    {"imports": {
+                    "three": "../plm_web_3d/static/src/js/lib/three.js/build/three.module.js"
+                    }
+                    }
+                </script>
+                <script type="module">
+                    import { tweenCamera,camera } from "../plm_web_3d/static/src/js/OdooCADApplication.js";
+                    window.tweenCamera = tweenCamera;
+                    window.camera = camera;
+                </script>
+                <link rel="stylesheet" type="text/css"
+                      href="../plm_web_3d/static/src/css/OdooCADApplication.css"></link>
+                <link rel="stylesheet"
+                      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
+            </head>
+            <body style="margin: 0;">
+                <div id="main_3d_web">
+
+                    <span id="active_model" t-att-active_model="document_id" t-att-document_name="document_name"></span>
+                    <div id="odoo_plm_title">
+                        <a href="https://odooplm.omniasolutions.website/" id="hiper_odooplm">
+                            <img src="../plm_web_3d/static/src/img/odoo_plm_2019x300.png" alt="OdooPLM"
+                                 class="header_image"/>
+                        </a>
+                        <a href="https://threejs.org/" id="hiper_treejs">
+                            <img src="../plm_web_3d/static/src/img/threejs_logo.png" alt="ThreeJs"
+                                 class="header_image"/>
+                        </a>
+                        <div id="progress">
+                            <div id="progress_bar"/>
+                        </div>
                     </div>
-                    <div id="main_div">
-                        <div id="main_div_hidden">
-                            <div class="info_header">
-                                <b>Product Information</b>
-                            </div>  
-                            <hr class="datacard_line"/> 
-                            <lu id="product_info">
-                            </lu>
-                            <br/>
-                            <div class="info_header">
-                                <b>Document Information</b>
+                    <div class='main_command_slide' id="mainCommandSlide">
+                        <div class='activator'>
+                            <div class="img" id="activatorClick">
+                                <hr class="hover_line"/>
+                                <hr class="hover_line"/>
+                                <hr class="hover_line"/>
                             </div>
-                            <hr class="datacard_line"/>
-                            <lu id="document_info">
+                            <lu id="bottom_command" class="d-none">
+                                <li class="plm_web_button" id="fit_view"><i class="fa fa-home"></i>Fit
+                                </li>
+                                <li class="plm_web_button" id="save_view"><i class="fa fa-save"></i>Save
+                                </li>
+                                <li class="plm_web_button">
+                                    <label for="webgl_background">BackGround:</label>
+                                    <select name="webgl_background" id="webgl_background">
+                                        <option value="tecnical">Tecnical</option>
+                                        <option value="room1">Room 1</option>
+                                        <option value="room2">Room 2</option>
+                                        <option value="outdoor">Outdoor 1</option>
+                                        <option value="workshop1">WorkShop 1</option>
+                                        <option value="workshop2">WorkShop 2</option>
+                                        <option value="workshop3">WorkShop 3</option>
+                                    </select>
+                                </li>
+                                <li class="plm_web_button">
+                                    <label for="transparency_slider">Transparency:</label>
+                                    <input name="transparency_slider" id="object_transparency" type="range" min="0"
+                                           max="100" value="90"/>
+                                </li>
+                                <li class="plm_web_button">
+                                    <label for="explosion_slider">Explosion:</label>
+                                    <input name="explosion_slider" id="object_explosion" type="range" min="0" max="100"
+                                           value="0"/>
+                                </li>
+                                <li class="plm_web_button">
+                                    <div id="color_object_grp">
+                                        <label for="object_color">Color:</label>
+                                        <input type="color" id="object_color" name="object_color" value="#b2ffc8"/>
+                                    </div>
+                                </li>
                             </lu>
-                            <br/>
-                            <div class="info_header">
-                                <b>Document Structure</b>
-                            </div>
-                            <hr class="datacard_line"/>
-                            <div class="search_document_list">
-                                <input type="text" id="input_search_document_list" placeholder="Search Here !!"/>
-                                <button type="button"  id="hide_all_parts" title="Hide"    class="fa fa-moon-o"></button>
-                                <button type="button"  id="show_all_parts" title="Un-Hide" class="fa fa-lightbulb-o"></button>
+                        </div>
+                    </div>
+                    <div id="datasheet">
+                        <div id="click_show" class="click_show">
+                            <hr class="hover_line"/>
+                            <hr class="hover_line"/>
+                            <hr class="hover_line"/>
+                        </div>
+                        <div id="main_div">
+                            <div id="main_div_hidden">
+                                <div class="info_header">
+                                    <b>Product Information</b>
+                                </div>
+                                <hr class="datacard_line"/>
+                                <lu id="product_info">
+                                </lu>
+                                <br/>
+                                <div class="info_header">
+                                    <b>Document Information</b>
+                                </div>
+                                <hr class="datacard_line"/>
+                                <lu id="document_info">
+                                </lu>
+                                <br/>
+                                <div class="info_header">
+                                    <b>Document Structure</b>
+                                </div>
+                                <hr class="datacard_line"/>
+                                <div class="search_document_list">
+                                    <input type="text" id="input_search_document_list" placeholder="Search Here !!"/>
+                                    <button type="button" id="hide_all_parts" title="Hide"
+                                            class="fa fa-moon-o"></button>
+                                    <button type="button" id="show_all_parts" title="Un-Hide"
+                                            class="fa fa-lightbulb-o"></button>
+                                </div>
+                                <lu id="document_list">
+                                </lu>
                             </div>
-                            <lu id="document_list">
-                            </lu>
                         </div>
                     </div>
-               </div>
-        <ViewCubeContainer>
-          <div class='cube'>
-            <div
-              class='cube__face cube__face--front'
-              onClick="window.tweenCamera('FRONT')"
-            >
-              front
-            </div>
-            <div
-              class='cube__face cube__face--back'
-              onClick="window.tweenCamera('BACK')"
-            >
-              back
-            </div>
-            <div
-              class='cube__face cube__face--right'
-              onClick="window.tweenCamera('RIGHT')"
-            >
-              right
-            </div>
-            <div
-              class='cube__face cube__face--left'
-              onClick="window.tweenCamera('LEFT')"
-            >
-              left
-            </div>
-            <div
-              class='cube__face cube__face--top'
-              onClick="window.tweenCamera('TOP')"
-            >
-              top
-            </div>
-            <div
-              class='cube__face cube__face--bottom'
-              onClick="window.tweenCamera('BOTTOM')"
-            >
-              bottom
-            </div>
-          </div>
-        </ViewCubeContainer>
-        
-        <canvas id="odoo_canvas"/>
-           
-	    </div>
-      </body>
-    </html>
-  </template>
+                    <ViewCubeContainer>
+                        <div class='cube'>
+                            <div
+                                class='cube__face cube__face--front'
+                                onClick="window.tweenCamera('FRONT')"
+                            >
+                                front
+                            </div>
+                            <div
+                                class='cube__face cube__face--back'
+                                onClick="window.tweenCamera('BACK')"
+                            >
+                                back
+                            </div>
+                            <div
+                                class='cube__face cube__face--right'
+                                onClick="window.tweenCamera('RIGHT')"
+                            >
+                                right
+                            </div>
+                            <div
+                                class='cube__face cube__face--left'
+                                onClick="window.tweenCamera('LEFT')"
+                            >
+                                left
+                            </div>
+                            <div
+                                class='cube__face cube__face--top'
+                                onClick="window.tweenCamera('TOP')"
+                            >
+                                top
+                            </div>
+                            <div
+                                class='cube__face cube__face--bottom'
+                                onClick="window.tweenCamera('BOTTOM')"
+                            >
+                                bottom
+                            </div>
+                        </div>
+                    </ViewCubeContainer>
+                    <canvas id="odoo_canvas"/>
+                </div>
+            </body>
+        </html>
+    </template>
 </odoo>
-
-