1. First understand the entire page structure;
(1) Start from the topology map page: sysmaps.php in the root directory of zabbix;
(2) The map content in this file is created by the app/views/monitoring.map.view.php file ; Therefore the entry file is this file;
2. First modify the entry file: monitoring.map.php;
(1) The main object of this file is CWidget(); this object defines all the contents. Next, the various data required by the system are searched in this object;
(2) Add the modified link file under this file: MonitorModifyBynnts.php;
//call the page modified by
nnts require_once'../zabbix/nnts/ MonitorModifyBynnts.php';
3. Connection file: MonitorModifyBynnts.php
(1) At the beginning of the file, call the parameter definition file PhpToHtmlArray.php of the entire modified project;
(2) The main content of the file is the switch() function, and the sysmapsID is passed by clicking on different maps in the topology. Value, and pass the value to the switch() function;
(3) The sysmapsiD value is obtained by defining global variables in the PhpToHtmlArray.php file: $GLOBALS['MapButtonSysmapid']=$data['map']['sysmapid '];//Define map sysmapid parameters
(3) When sysmapsID matches switch, call the main file of the entire program: MonitorModifyBynnts.php
4. Parameter definition file: PhpToHtmlArray.php
(1) This file mainly obtains two global variable parameters; 1 , SysmapsiD parameter: $GLOBALS['MapButtonSysmapid']; 2. Screen zoom parameter: $GLOBALS['MapButtonScale'];
(2) Obtaining the screen zoom parameter;
//First confirm that the screen zoom parameter is in the CWidget() object, and The corresponding content is in the get_icon('fullscreen') object, and the attribute is: the value corresponding to'data -layout-mode';
//First convert the object into an array
$nl_list =array(get_icon('fullscreen')) ;
$arr=json_decode(json_encode($nl_list), true);
//遍历数组并提取相关参数属性'data-layout-mode',二维数组
foreach($arr as $key1=>$arr_item){
$data_layout=array($arr_item["attributes"]);
foreach($data_layout as $key2=>$value){
$GLOBALS['MapButtonScale']=$value['data-layout-mode'];
}}5. Interpretation of the main file MapControllerButton.html;
(1) The file mainly consists of three parts: 1. CSS style design; 2. The checkBOX button responds to the screen zoom parameter positioning; 3. Responds to the checnBOX button switch program; 4. Calls the mqtt publish program ;
(2) CSS styles are quoted in the head file. The CSS style mainly defines the checkBOX style. Use div and class elements;
(3) The checkBOX button uses php script to respond to screen zoom parameters and call the response html file. The different place in the corresponding html file is the top position attribute.
(4) The corresponding button switch program is mainly in the js script content:
A. The content is mainly composed of two types of main functions, the first is the automatic call function of the form, which is mainly used to initialize the button state and initialize the button state by calling json (MapButtonStatus.json) parameters in the file
. And assign the parameters to the checkbox status; there are two functions involved, one is readJSON(); one is found();
B. The other type of function is Switch() function, This function corresponds to the checkbox switch event; and calls the mqtt function JsToPhpMsg() through the switch event, and passes the corresponding php message content to the MQTTButtonPub.php file through the background;
(5) The js background transmits the message to the php file:
A. First introduce the Jquery class ; Include in the header file, and pay attention to the import path; <script type="text/javascript" src="assets/js/jquery-1.12.4.js"></script> This file can be downloaded from the jquery official website;
B .Then call the JsToPhpMsg() function; this function requires a PostMsg parameter, which is formed and passed in the switch() function;
function JsToPhpMsg(PostMsg){
$.ajax({
type: "POST",
url: "../zabbix/nnts/php/MQTTButtonPub.php",
data: PostMsg,
success: function(msg){
}
})
}
6 , MQTTButtonPub.php file content interpretation:
(1) This file mainly contains two pieces of content, 1. Write the message from the front desk to the json file MapButtonStatus.json; 2. Publish the MQTT content to the MQTT server;
(2) Write Import json file link:
(3) MQTT release link:
require("./phpMQTT.php");//Introduce MQTT
$mqtt = new phpMQTT("server_ip", 1883, $Device_SN);//Use device ID as content Transmit MQTT messages; $Device_SN content is delivered through the upper-level file;
$ret = json_encode($message);
if ($mqtt->connect()) {
$mqtt->publish($Device_SN,$ret,0);
$ mqtt->close();
}
7. Program installation: (1) Modify the monitoring.map.php file, add and import as in 2 (2)
(2) Copy nnts to the /usr/share/zabbix/ directory;
(3) Change jquery-1.12.4 Copy .js to the assets/js/ directory;
(4) chmod +777 attributes of the json file in the nnts directory;