The realization of HTML5 's Webgl3d Archives ' visual Management system

This article brings the content is about HTML5 's Webgl3d Archives book Visual Management System realization, has certain reference value, has the need friend can refer to, hoped to be helpful to you.

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

Scene 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.

Initialize relative to the layout var relativelayout = new Ht.ui.RelativeLayout ();//Initialize 3D topology var g3dview = new Ht.graph3d.Graph3dView ();//Initialize H  TVIEW the component and place the topology into the var Htview = new Ht.ui.HTView (g3dview);//The layout loads the Htview component Relativelayout.addview (Htview, {    width: ' Match_parent ',  //Fill    Height: ' match_parent ',//fill    the margintop:64,//            leave space for TOP    Marginleft: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:

var palette = new Ht.widget.Palette ();//Palette panel is the element is divided into the "group", and then add an entity to the "group" var group = new HT. Group ();//Set group to open state group.setexpanded (TRUE);//Set Description Group.setname (' base entity ');p alette.dm (). Add (Group);//adding sub-entity Var Childnode = new ht. Node (); childnode.setparent (group); Childnode.setname (name); Childnode.setimage (image); Childnode.s ({    ' Draggable ': True,                     //True can be dragged     ' image.stretch ': ' Centeruniform '    //Picture ' method} ';p alette.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 while dragging

2. Display position when dragging to corresponding position

3. Create a corresponding 3D model in the corresponding position after dragging

The corresponding code is implemented as follows:

Get entity information when dragging

G3dview.getview (). AddEventListener (' DragOver ', function (e) {    e.preventdefault ();    var palettenode = palette.dm (). SM (). LD ();//Gets the last selected node on the palette     if (!palettenode | |!g3d.getdataat (e)) return;        Gets the node under the mouse    var data = G3d.getdataat (e);    if (DATA.S (' shape3d ') = = = ' file cabinet. Json ') {        //Record file bag dragged to which file cabinet        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 when setting all DisplayName for box section    The point is visible (so drag to get to the preset model) Array.foreach (function (data) {DATA.S (' 3d.visible ', true);    });    var data = G3d.getdataat (e);        if (DATA.S (' shape3d ') = = = ' file cabinet. Json ') {//Record file bag dragged to which file cabinet G3dview._focusdata = data;    Move the preset model to the dragged cabinet coordinate shelf.p3 (DATA.P3 ()); } if (data.getdisplayname () = = = ' box ') {/////This property modifies the transparency of the model by displaying the file bag model that is preset in the corresponding coordinates, and more properties can refer to the HT style manual data    . S (' shape3d.opacity ', 0.8); }    ...})    G3dview.getview (). AddEventListener (' Drop ', function (e) {//Get mouse position model var data = G3dview.getdataat (e);    if (!data) return;    Mouse position is not a preset model, skip directly if (Data.getdisplayname ()!== ' box ') return;    DATA.S (' shape3d.opacity ', 0);    Let go of the time set all displayName for box node Invisible Array.foreach (function (data) {DATA.S (' 3d.visible ', false);    }); var node = new ht.    Node (); NODE.S (' shape3d ', url); File Bag 3D Model groundAddress Node.r3 ([MATH.PI/2,-MATH.PI/2, 0]);    Rotate the file bag model so that it is flat node.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 listener G3DVIEW.MI (function (e) {if (E.kind = = = ' Doubleclickdata ') {//double-click event var shape3d = e.data.s (' sh        Ape3d '), Parentshape3d = E.data.getparent () && e.data.getparent (). S (' Shape3d ');        if (Shape3d && shape3d.indexof (' filing cabinet ') >-1) {//Highlight file cabinet ShowDetail (E.data); } else if (Parentshape3d && parentshape3d.indexof (' filing cabinet ') >-1) {ShowDetail (E.data.getparent (        )); }}); showdetail = function (data) {//save before entering the Defocus state the angle of view and center point eyeback = ht.    Default.clone (Graph3dview.geteye ()); Centerback = ht.    Default.clone (Graph3dview.getcenter ());    Set the camera to point to configure var opt = {};    Opt.animation = true;    Opt.ratio = 1;    Opt.direction = [1, 0.5, 0];    Opt.center = [Data.getx (), +, 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)//Save pre-set configuration, restore with if (!opacitymap[d.getid ()) {for the cabinet and Cabinet in the topology except for the file bag and the wall transparency Opacitymap[d.getid ()] = {' shape3d.opacity ': D.s (' shape3d.opacity '), ' SHAPE3D.TRANSP Arent ': 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.tra Nsparent '), ' right.opacity ': D.s (' right.opacity '), ' right.transparent ': D.s (' Right.transpare                NT '), ' 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 opacity D.s ({' shape3d.opacity ': opacity, ' Shape3d.trans            Parent ': 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.tran Sparent ': True, ' top.opacity ': opacity, ' top.transparent ': true, ' bottom.opacity ': opacit    Y, ' 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) {    var lastdata = G3dview.sm (). LD ();    Determines whether to    Focusdata {if (        lastdata = = = = = Focusdata | | (Lastdata && lastdata.getparetn () = = = Focusdata)) return;        G3dview.seteye (eyeback);        G3dview.setcenter (centerback);        Restores the original transparency of the model        g3dview.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 var TextField = new Ht.ui.textfield;textfield.seticon ("Imgs/search.json"); Textfield.seticonposition ("left") );//Initialize the query, condition: idvar finder = new ht. Quickfinder (LIBRARY.VIEW.DM, "id");//Input box when you click the Query button trigger Textfield.on (' P:value ', function (e) {    var dm = library.view.dm;    var value = E.newvalue;    var datas = Finder.find (value);    When querying to the corresponding entity, we will select the first result    if (datas && datas.size () > 0) {        library.view.dm.sm (). SS (Datas.get (0));    }});

Summarize

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.