A visual management system for WebGL 3D archives based on HTML5

Objective

The file management system is to standardize the whole document management through the establishment of the unified standard, including the complete file resource Information Sharing service platform which regulates the document management of each business system, mainly realizes the file pipelining collection function. For enterprises and institutions of archives modernization management, to provide a complete solution, file management system can be self-made system, to provide users with complete file management and network query function, but also with the Unit OA office automation and DPM design process management, or with MIS information management system, To form a more perfect modern information management network. With the rapid development and change of society, the traditional archives have undergone great changes in form, and gradually evolved into modern wisdom archives. Based on modern science and technology, the intelligent archives fully combine modern internet of things technology and cloud computing technology to build a perfect urban intelligence file, and realize the goal of comprehensive management of modern society. Based on the current popular H5 technology, this paper provides a set of WEB solutions for modern wisdom archives.

Code Implementation Scenario Setup

In this example, the page is laid out using the HT UI component, and the page is divided into three parts using the Relativelayout relative layout: Left, top, center, and the left part is divided into Logo,editor,cha using the Vboxlayout portrait layout. RT Three Parts

Graph3dview Loading 3D scenes

Graph3dview is a topology component that loads 3D models in HT components, and Relativelayout is a UI solution provided by HT that provides Htview components in the UI components to enable the integration of the topology with the UI.

    //Initializing relative layouts    varRelativelayout =Newht.ui.RelativeLayout (); //initializing the 3D topology    varG3dview =NewHt.graph3d.Graph3dView (); //initializes the Htview component and puts the topology into its    varHtview =NewHt.ui.HTView (G3dview); //The Htview component is loaded by the layoutRelativelayout.addview (Htview, {width:' Match_parent ',//FillHeight: ' match_parent ',//FillMargintop:64,//leave room for TOPmarginleft:250//leave space for left
});

Create a file bag model in left

The EDITOR section on the left uses the HT palette component (Ht.widget.Palette) to add the file bag to the color palette and is set to be dragged:

varpalette =NewHt.widget.Palette (); //The Palette panel is to divide the entities into groups, and then add elements to the group    varGroup =Newht.    Group (); //set Group to open StateGroup.setexpanded (true); //set up a description for a groupGroup.setname (' Basic elements ');        PALETTE.DM (). Add (group); //Add sub-entities    varChildnode =Newht.    Node ();    Childnode.setparent (group);    Childnode.setname (name);    Childnode.setimage (image); CHILDNODE.S ({' Draggable ':true,//true to be draggable' Image.stretch ': ' Centeruniform '//Photo Exhibition Method    }); PALETTE.DM (). Add (Childnode);

implement dragging an entity from a palette to a 3D scene

In the previous step we set the element properties in the palette to be dragged, which allows you to animate the dragged elements. However, it is not possible to drag the entities directly into the 3D scene, the idea is:

1. Get dragged element information when dragging
2. Display the available position when dragging to the corresponding position
3. Create the corresponding 3D model in the corresponding position after dragging and dropping

The corresponding code is implemented as follows:

Get entity information when dragging

G3dview.getview (). AddEventListener (' DragOver ',function(e) {e.preventdefault (); varPalettenode = PALETTE.DM (). SM (). LD ();//gets the last selected node on the palette        if(!palettenode | |!g3d.getdataat (e))return; //get the node under the mouse        vardata =G3d.getdataat (e); if(Data.s (' shape3d ') = = = ' file cabinet. JSON ') {            //which file cabinet is dragged to the record bag?G3dview._focusdata =data; }    });

When dragging to the corresponding location to create a 3D model, in the actual implementation process because it is difficult to accurately get to each file cabinet can be placed in the coordinate position of the file bag, so in this example, the use of a preset method. The specific principle is to create a normal invisible file cabinet model, and in which the file bags are placed intact, in the drag, the invisible model and will be placed in the model coincident, at this time just to determine whether the mouse is located under the point of a pre-existing model exists to know if the place can create a 3D model, The implementation results are as follows:

G3dview.getview (). AddEventListener (' DragOver ',function(e) {...//old logic omitted                //drag down to set all the displayName for the box node to be visible (so drag to get to the pre-built model)Array.foreach (function(data) {DATA.S (' 3d.visible ',true);        }); vardata =G3d.getdataat (e); if(Data.s (' shape3d ') = = = ' file cabinet. JSON ') {            //which file cabinet is dragged to the record bag?G3dview._focusdata =data; //move the preset model to the dragged cabinet coordinatesshelf.p3 (DATA.P3 ()); }        if(Data.getdisplayname () = = = ' box ') {            //Display the file bag model that is preset under the corresponding coordinates            //This property modifies the transparency of the model, and more properties can be referenced in the HT style manualDATA.S (' shape3d.opacity ', 0.8);        }        ...    }) G3dview.getview (). AddEventListener (' Drop ',function(e) {//get mouse position model        vardata =G3dview.getdataat (e); if(!data)return; //mouse position is not preset model, skip directly        if(Data.getdisplayname ()!== ' box ')return; DATA.S (' Shape3d.opacity ', 0); //let go of the time set all the displayName for the box node is not visibleArray.foreach (function(data) {DATA.S (' 3d.visible ',false);        }); varnode =Newht.        Node (); NODE.S (' Shape3d ', url);//file bag 3D model addressNODE.R3 ([MATH.PI/2,-MATH.PI/2, 0]);//rotate the file bag model so that it is placed flatnode.p3 (DATA.P3 ());        Node.setparent (G3dview._focusdata);    Node.sethost (G3dview._focusdata); });

realization of the virtual effect of file cabinet

We have achieved the effect of dragging the file bag to the 3D scene, but we can find that the file bag model is much smaller than the cabinet, it is not so easy to put the file bag in the correct position. So at this point we can enlarge the file cabinet that need operation to be in the middle, the other model is fictitious processing.

//3D topology Interactive monitoringG3DVIEW.MI (function(e) {if(E.kind = = = ' Doubleclickdata ')) {            //Double-click event            varShape3d = E.data.s (' Shape3d ')), Parentshape3d= E.data.getparent () && e.data.getparent (). S (' Shape3d '); if(Shape3d && shape3d.indexof (' filing cabinets ') >-1) {                //Highlight File CabinetShowDetail (E.data); }            Else if(Parentshape3d && parentshape3d.indexof (' filing cabinets ') >-1) {ShowDetail (e.data.getparent ());    }        }    }); ShowDetail=function(data) {//Save the View and center point before entering the state of the BlurEyeback =ht.        Default.clone (Graph3dview.geteye ()); Centerback=ht.            Default.clone (Graph3dview.getcenter ()); //setting the camera to point to configuration        varopt = {}; Opt.animation=true; Opt.ratio= 1; Opt.direction= [1, 0.5, 0]; Opt.center= [Data.getx (), 100, Data.gety ()];        Graph3dview.flyto (data, opt); Focusdata=data; DATA.S (' Select.brightness ', 1); Datamodel.each (function(d) {if(d = = = Focusdata | | (!d.s (' 3d.selectable ') && d.gettag ()!== ' wall ')                || D.getparent () = = = Focusdata | | D.getdisplayname () = = = ' box ')return; //Set the Opacity (0~1) of the cabinet and Cabinet in the topology, and the transparency of the wall outside.                        //Save pre-set configuration, restore with            if(!Opacitymap[d.getid ()]) {Opacitymap[d.getid ()]= {                    ' Shape3d.opacity ': D.s (' shape3d.opacity ')),                    ' Shape3d.transparent ': D.s (' shape3d.transparent ')),                    ' All.opacity ': D.s (' all.opacity ')),                    ' All.transparent ': D.s (' all.transparent ')),                    ' Left.opacity ': D.s (' left.opacity ')),                    ' Left.transparent ': D.s (' left.transparent ')),                    ' Right.opacity ': D.s (' right.opacity ')),                    ' Right.transparent ': D.s (' right.transparent ')),                    ' Front.opacity ': D.s (' front.opacity ')),                    ' Front.transparent ': D.s (' front.transparent ')),                    ' Back.opacity ': D.s (' back.opacity ')),                    ' Back.transparent ': D.s (' back.transparent ')),                    ' Top.opacity ': D.s (' top.opacity ')),                    ' Top.transparent ': D.s (' top.transparent ')),                    ' Bottom.opacity ': D.s (' bottom.opacity ')),                    ' Bottom.transparent ': D.s (' bottom.transparent ')),                    ' 3d.selectable ': D.s (' 3d.selectable '))                }            }                        //transparency set to opacityD.s ({' Shape3d.opacity ': Opacity,' Shape3d.transparent ':true,                ' All.opacity ': Opacity,' All.transparent ':true,                ' Left.opacity ': Opacity,' Left.transparent ':true,                ' Right.opacity ': Opacity,' Right.transparent ':true,                ' Front.opacity ': Opacity,' Front.transparent ':true,                ' Back.opacity ': Opacity,' Back.transparent ':true,                ' Top.opacity ': Opacity,' Top.transparent ':true,                ' Bottom.opacity ': Opacity,' Bottom.transparent ':true,                ' 3d.selectable ':false            });    }); }

Exit the blur mode to monitor the selected changes in the 3D topology to achieve

G3DVIEW.DM (). MS (function(e) {varLastdata =G3dview.sm (). LD (); //determine whether to make a virtual        if(focusdata) {if(Lastdata = = = Focusdata | | (Lastdata && lastdata.getparetn () = = = Focusdata))return;            G3dview.seteye (Eyeback);            G3dview.setcenter (Centerback); //restore the original transparency of the modelG3DVIEW.DM (). each (function(d) {if(d = = = Focusdata)return;            D.s (Opacitymap[d.getid ());                        }); FOCUSDATA.S (' Select.brightness ', 0.7); Focusdata=NULL; Eyeback=NULL; Centerback=NULL; }    });

Fast query function implementation

There are quick query plugin Quickfinder available in HT components, this time we use this plugin to implement a simple file numbering query

//Initialize input box    varTextField =NewHt.ui.TextField; Textfield.seticon ("Imgs/search.json"); Textfield.seticonposition ("Left"); //Initialize the query, condition: ID    varFinder =NewHt. Quickfinder (LIBRARY.VIEW.DM, "id"); //trigger when the input box hits the query buttonTextfield.on (' P:value ',function(e) {varDM =library.view.dm; varValue =E.newvalue; varDatas =Finder.find (value); //when we query to the corresponding entity, we select the first result        if(Datas && datas.size () > 0) {Library.view.dm.sm (). SS (Datas.get (0)); }    });

Summary

After the realization of the above functions, a basic Intelligent file management system is formed. Of course, as a smart management system, these are still far from enough, such as file dynamic monitoring, file room staff walking monitoring, video surveillance, temperature monitoring, disaster alarm and so on modules are can be improved later. It simply provides a 3D solution based on HTML5 WEBGL. The same principle, intelligent buildings, intelligent room, smart city can also be based on this.

The final effect can be viewed: