# OpenGMSDiagramModel

**Repository Path**: geomodeling/OpenGMSDiagramModel

## Basic Information

- **Project Name**: OpenGMSDiagramModel
- **Description**: Diagram Model for OpenGMS
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-30
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OpenGMS Diagram Model

[![Travis (.org)](./images/Demo/OpenGMS.svg)](http://geomodeling.njnu.edu.cn/)

#### Introduction
This project is used for diagram model building and showing in Open Graphical Modeling and Simulation platform (OpenGMS). Use [mxGraph](https://www.jgraph.com/) for visualization component, [Bootstrap](https://getbootstrap.com/) for style of dialog and [jQuery](https://jquery.com/) for basic operation.

#### Structure



#### Installation
[Download this js file](https://gitee.com/geomodeling/OpenGMSDiagramModel/blob/master/js/ogmsDiagram.js) and include in your project.


#### Usage
Initialization
```
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="fonts/css/font-awesome.min.css" />
<script type="text/javascript" src="js/mxClient.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/ogmsDiagram.js" ></script>
<script type="text/javascript" >
            var diagram = new OGMSDiagram();
            diagram.init( $('#ogmsDiagramContainer'), 
            {
                width : 1000,       //! Width of panel 
                height : 600,       //! Height of panel
                enabled : true      //! Edit enabled
            },
            {
                x : 500,            //! X postion of state information window
                y : 0,              //! Y postion of state information window
                width: 520,         //! Width of state information window
                height: 650         //! Height of state information window
            },
            {
                x : 1000,           //! X postion of data reference information window
                y : 0,              //! Y postion of data reference information window
                width: 300,         //! Width of data reference information window
                height: 400         //! Height of data reference information window
            },
            'images/modelState.png',    //! state IMG
            'images/grid.gif',          //! Grid IMG
            'images/connector.gif',     //! Connection center IMG
            false                       //! Debug button
        );
</script>
```
##### API 

1. Get graph information. Draw diagram below and get structure json data and use  `format2JSON` .

![Demo](./images/Demo/demo.png 'Demo Diagram')

```

var json = diagram.format2JSON();

```
JSON structure show below

```
json = {
        //! State information
	"states": [{
		"id": "806beceb-0998-492e-8389-770a4822bad5",
		"name": "State1",
		"type": "basic",
		"description": "",
		"events": []
	}, {
		"id": "d48d8287-61c7-4fc0-8f0a-01ee16cc06e8",
		"name": "State2",
		"type": "basic",
		"description": "",
		"events": []
	}, {
		"id": "1033ce77-5ee6-4139-9448-01747f05ddba",
		"name": "State3",
		"type": "basic",
		"description": "",
		"events": []
	}],
        //! Links information
	"transition": [{
		"from": "806beceb-0998-492e-8389-770a4822bad5",
		"to": "d48d8287-61c7-4fc0-8f0a-01ee16cc06e8"
	}, {
		"from": "806beceb-0998-492e-8389-770a4822bad5",
		"to": "1033ce77-5ee6-4139-9448-01747f05ddba"
	}],
        //! Data reference in events
	"dataRef": []
}

```

#### Contributors
##### Founder
Min Chen (<chenmin0902@163.com>) 

Yongning Wen (<wenyn@msn.com>)

Songshan Yue (<yss123yss@126.com>)

Fengyuan Zhang (<franklinzhang@foxmail.com>) 
##### Coder
Fengyuan Zhang (<franklinzhang@foxmail.com>) 

All codes are used in [OpenGMS](http://geomodeling.njnu.edu.cn/) platform