{"id":2029,"date":"2024-08-16T08:57:03","date_gmt":"2024-08-15T23:57:03","guid":{"rendered":"https:\/\/www.gassensor.kr\/?p=2029"},"modified":"2024-08-16T08:57:03","modified_gmt":"2024-08-15T23:57:03","slug":"%ed%85%8c%ec%8a%a4%ed%8a%b8-2","status":"publish","type":"post","link":"https:\/\/www.gassensor.kr\/?p=2029","title":{"rendered":"\ud14c\uc2a4\ud2b8"},"content":{"rendered":"<p>\ub0a0\uc9dc\ubcc4\ub85c \ubd88\ub7ec\uc62c\uc218\ub3c4 \uc788\uace0 \ub0a0\uc9dc\ubcc4\ub85c \uba54\ubaa8\uc640 \uc0ad\uc81c\uac00 \uac00\ub2a5\ud558\ub3c4\ub85d \uba54\ub274 \ucd94\uac00\ud560 \ud544\uc694: \uce21\uc815\uc2dc 5\ubd84 \uc815\ub3c4\ub294 \ubbf8\ub9ac \ucf1c\ub193\uc558\ub2e4\uac00 \uc774\ud6c4 \uce21\uc815\uc2dc\uc791<\/p>\n<table>\n<tr>\n<th> \uad6c\ubd84 <\/th>\n<th>\uc885\ub958 <\/th>\n<th>\ub370\uc774\ud130 \uc120\ud0dd <\/th>\n<\/tr>\n<tr>\n<td rowspan=\"2\"> X \ucd95 <\/td>\n<td>\uce21\uc815\uc2dc\uac04<\/td>\n<td><span id=\"menuX_T\"><\/span><\/td>\n<\/tr>\n<tr>\n<td>Sensors<\/td>\n<td><span id=\"menuX_S\"><\/span><\/td>\n<\/tr>\n<tr>\n<td> Y \ucd95 <\/td>\n<td>Sensors<\/td>\n<td><span id=\"menuY_S\"><\/span><\/td>\n<\/tr>\n<tr>\n<td> Y2 \ucd95 <\/td>\n<td>Sensors<\/td>\n<td><span id=\"menuY2_S\"><\/span><\/td>\n<\/tr>\n<\/table>\n<p>\n<span id=\"userlist\"><\/span><span id=\"data_num\"><\/span><button id=\"get_data\">\ub370\uc774\ud130\uac00\uc838\uc624\uae30<\/button><br \/>\n<span id=\"gas_type\"><\/span><span id=\"graph_mode\"><\/span><button id=\"plot_data\">\uadf8\ub798\ud504 \uc0c8\ub85c\uadf8\ub9ac\uae30<\/button><\/p>\n<div id=\"msg\"><\/div>\n<div id=\"output_graph\"><\/div>\n<div id=\"output\"><\/div>\n<div id=\"output_plot\"><\/div>\n<div id=\"id_show\"><\/div>\n<p><script src=\"https:\/\/cdn.plot.ly\/plotly-latest.min.js\"><\/script><br \/>\n<script>\njQuery(document).ready(function(){\n  var user_id = '';\n  let res_json = {};\n  if (Object.keys(res_json).length == 0) {\n    jQuery(\"#gas_type\").hide();\n    jQuery(\"#graph_mode\").hide();\n    jQuery(\"#plot_data\").hide();\n  }\n  let user_json = [{\"id\": \"case1\", \"name\": \"User1\"},{\"id\": \"case2\", \"name\": \"User2\"},{\"id\": \"case3\", \"name\": \"User3\"},{\"id\": \"case4\", \"name\": \"User4\"},{\"id\": \"case5\", \"name\": \"User5\"}];\n  let data_json = [{\"id\": \"100\", \"name\": \"\ucd5c\uadfc100\uac1c\"},{\"id\": \"500\", \"name\": \"\ucd5c\uadfc500\uac1c\"},{\"id\": \"1000\", \"name\": \"\ucd5c\uadfc1000\uac1c\"},{\"id\": \"1500\", \"name\": \"\ucd5c\uadfc1500\uac1c\"},{\"id\": \"2000\", \"name\": \"\ucd5c\uadfc2000\uac1c\"},{\"id\": \"-1\", \"name\": \"\uc804\uccb4\"}];\n  let gas_json = [{\"id\": \"Temp\", \"name\": \"Temperature\" },{\"id\": \"Humid\", \"name\": \"Humidity\" },{\"id\": \"VOC\", \"name\": \"VOC\" },{\"id\": \"CO2\", \"name\": \"CO2\" }, {\"id\": \"NH3\", \"name\": \"NH3\" }, {\"id\": \"MQ131\", \"name\": \"Air Quaility\" }];\n  let gas_mode = [{\"id\": \"t-y\", \"name\": \"y vs t\"}, {\"id\": \"y-dydt\", \"name\": \"dydt vs y\"}, {\"id\": \"y-ddyddt\", \"name\": \"ddyddt vs y\"}, {\"id\": \"dydt-ddyddt\", \"name\": \"d2y\/dt2 vs dy\/dt\"}];\n  jQuery(\"#userlist\").html(selectJsonMenuBreath(user_json,\"userlist_choice\",default_user(user_id)));\n  jQuery(\"#data_num\").html(selectJsonMenuBreath(data_json,\"datanum_choice\",1));\n  jQuery(\"#gas_type\").html(selectJsonMenuBreath(gas_json,\"gas_choice\",2));\n  jQuery(\"#graph_mode\").html(selectJsonMenuBreath(gas_mode,\"graph_choice\",0));\n  var json_timearray = [\n    { type: '\uce21\uc815\uc2dc\uac04', value: 'mt', checked: true }\n  ];\n  var json_sensorarray = [\n    { type:'CH2O', value: 'sensor1', checked: false }, \n    { type:'MQ131', value: 'sensor2', checked: false }, \n    { type:'VOC', value: 'sensor3', checked: false }, \n    { type:'NH3', value: 'sensor4', checked: false }, \n    { type:'CO', value: 'sensor5', checked: false },\n    { type:'NO2', value: 'sensor6', checked: false },\n    { type:'CO2', value: 'sensor7', checked: false },\n    { type:'C3H8', value: 'sensor8', checked: false },\n    { type:'C4H10', value: 'sensor9', checked: false },\n    { type:'CH4', value: 'sensor10', checked: false },\n    { type:'H2', value: 'sensor11', checked: false },\n    { type:'C2H5OH', value: 'sensor12', checked: false },\n    { type:'Temp', value: 'sensor13', checked: false }, \n    { type:'Humidity', value: 'sensor14', checked: false }\n  ];\n  var optionX_T = optionXMenu(json_timearray,\"optionx\");\n  jQuery(\"#menuX_T\").html(optionX_T);\n  var optionX_S = optionXMenu(json_sensorarray,\"optionx\");\n  jQuery(\"#menuX_S\").html(optionX_S);\n  json_sensorarray[2]['checked'] = true;\n  json_sensorarray[3]['checked'] = true;\n  json_sensorarray[4]['checked'] = true;\n  var optionY_S = checkXMenu(json_sensorarray,\"optiony\");\n  jQuery(\"#menuY_S\").html(optionY_S);\n  json_sensorarray[2]['checked'] = false;\n  json_sensorarray[3]['checked'] = false;\n  json_sensorarray[4]['checked'] = false;\n  json_sensorarray[13]['checked'] = true;\n  var optionY2_S = checkXMenu(json_sensorarray,\"optiony2\");\n  jQuery(\"#menuY2_S\").html(optionY2_S);\n  jQuery(\"#get_data\").click(function(){    \/\/ \uc5ec\uae30\uc11c\ubd80\ud130 \uc2dc\uc791\n    let user_choice = jQuery(\"#userlist_choice\").val();\n    let data_choice = jQuery(\"#datanum_choice\").val();\n    jQuery(\"#msg\").html(\"\ub370\uc774\ud130\ub97c \ubd88\ub7ec\ub4e4\uc774\uace0 \uc788\uc2b5\ub2c8\ub2e4.\");\n    jQuery.ajaxSetup({ timeout:60000 });\n    jQuery.get(\"https:\/\/www.gassensor.kr\/relay.php?device=\" + user_choice + \"&num=\" + data_choice, function(res){\n      res_json = JSON.parse(res);\n      console.log(res_json);\n      multiple_plot(res_json);\n\/\/      data_plot(jQuery(\"#gas_choice\").val(), graph_setting(jQuery(\"#graph_choice\").val()), res_json);\n      jQuery(\"#gas_type\").hide();\n      jQuery(\"#graph_mode\").show();\n      jQuery(\"#plot_data\").show();\n      jQuery(\"#msg\").html(\"\ub370\uc774\ud130\ub97c \ubaa8\ub450 \ubd88\ub7ec\uc654\uc2b5\ub2c8\ub2e4. \uadf8\ub798\ud504 \ubaa8\ub4dc\ub97c \ubc14\uafb8\uc5b4 \uc0c8\ub85c \uadf8\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\");\n    });\n  });\n  jQuery(\"#plot_data\").click(function(){\n    console.log(graph_setting(jQuery(\"#graph_choice\").val()));\n    jQuery(\"#msg\").html(\"\uc0c8\ub85c \uadf8\ub798\ud504\ub97c \uadf8\ub9b4 \uc900\ube44\ub97c \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.\");\n    multiple_plot(res_json);\n\/\/    data_plot(jQuery(\"#gas_choice\").val(), graph_setting(jQuery(\"#graph_choice\").val()), res_json);\n    jQuery(\"#msg\").html(\"\uc0c8\ub85c \uadf8\ub798\ud504\ub85c \ud45c\ud604 \ud588\uc2b5\ub2c8\ub2e4. \ub2e4\ub978 \uadf8\ub798\ud504 \ubaa8\ub4dc\ub97c \ubc14\uafb8\uc5b4 \uc0c8\ub85c \uadf8\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\");\n  });\n});\nfunction convert2array(data_json) { \n  var rows = [];\n  for (var i = 0; i < data_json.length; i++) {\n    var row = [];\n    for (key in data_json[i]) {\n      row.push(Number(data_json[i][key]));\n    }\n    rows.push(row);\n  }\n  return rows;\n}\nfunction selectJsonMenu(json_array,id,init_index){\n  var menu = '<select id=\"' + id + '\">';\n  for (var i = 0; i < json_array.length; i++) {\n    if (i == init_index) {\n      menu += '<option value=\"' + json_array[i].did + '\" selected>' + json_array[i].did + ': ' + json_array[i].keyword + '<\/option>';\n    } else {\n      menu += '<option value=\"' + json_array[i].did + '\">' + json_array[i].did + ': ' + json_array[i].keyword + '<\/option>';\n    }\n  }\n  menu += '<\/select>';\n  return menu;\n}\nfunction optionXMenu(json_array, name){\n  var checkmenu = '';\n  for (var i = 0; i < json_array.length; i++) { \n    if (json_array[i].checked) {\n      checkmenu += '<input type=\"radio\" name=\"' + name + '\" value=\"' + json_array[i].value + '\" checked> &nbsp;' + json_array[i].type + '&nbsp;&nbsp;';\n    } else {\n      checkmenu += '<input type=\"radio\" name=\"' + name + '\" value=\"' + json_array[i].value + '\"> &nbsp;' + json_array[i].type + '&nbsp;&nbsp;';\n    }\n  }\n  return checkmenu;\n}\nfunction checkXMenu(json_array, name){\n  var checkmenu = '';\n  for (var i = 0; i < json_array.length; i++) {\n    if (json_array[i].checked) {\n      checkmenu += '<input type=\"checkbox\" name=\"' + name + '\" value=\"' + json_array[i].value + '\" checked> &nbsp;' + json_array[i].type + '&nbsp;&nbsp;';\n    } else {\n      checkmenu += '<input type=\"checkbox\" name=\"' + name + '\" value=\"' + json_array[i].value + '\"> &nbsp;' + json_array[i].type + '&nbsp;&nbsp;';\n    }\n  }\n  return checkmenu;\n}\nfunction exportToCsv(filename, rows) {\n    var processRow = function (row) {\n        var finalVal = '';\n        for (var j = 0; j < row.length; j++) {\n            var innerValue = row[j] === null ? '' : row[j].toString();\n            if (row[j] instanceof Date) {\n                innerValue = row[j].toLocaleString();\n            };\n            var result = innerValue.replace(\/\"\/g, '\"\"');\n            if (result.search(\/(\"|,|\\n)\/g) >= 0)\n                result = '\"' + result + '\"';\n            if (j > 0)\n                finalVal += ',';\n            finalVal += result;\n        }\n        return finalVal + '\\n';\n    };\n    var csvFile = '';\n    for (var i = 0; i < rows.length; i++) {\n        csvFile += processRow(rows[i]);\n    }\n    var blob = new Blob([csvFile], { type: 'text\/csv;charset=utf-8;' });\n    if (navigator.msSaveBlob) { \/\/ IE 10+\n        navigator.msSaveBlob(blob, filename);\n    } else {\n        var link = document.createElement(\"a\");\n        if (link.download !== undefined) { \/\/ feature detection\n            \/\/ Browsers that support HTML5 download attribute\n            var url = URL.createObjectURL(blob);\n            link.setAttribute(\"href\", url);\n            link.setAttribute(\"download\", filename);\n            link.style.visibility = 'hidden';\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n        }\n    }\n}\nfunction selectJsonMenuBreath(json_array,id,init_index){\n  var menu = '<select id=\"' + id + '\">';\n  for (var i = 0; i < json_array.length; i++) {\n    if (i == init_index) {\n      menu += '<option value=\"' + json_array[i].id + '\" selected>' + json_array[i].name + '<\/option>';\n    } else {\n      menu += '<option value=\"' + json_array[i].id + '\">' + json_array[i].name + '<\/option>';\n    }\n  }\n  menu += '<\/select>';\n  return menu;\n}\nfunction default_user(id){\n  let choice = 0;\n  if (id === 'gassensor') choice = 4;\n  if (id === 'yeeuni220') choice = 1;\n  if (id === 'jolee') choice = 0;\n  return choice;\n}\nfunction graph_setting(mode){\n  if (mode == \"t-y\") return {\"x\": \"t\", \"y\": \"v\"};  \n  if (mode == \"y-dydt\") return {\"x\": \"v\", \"y\": \"dvdt\"};  \n  if (mode == \"y-ddyddt\") return {\"x\": \"v\", \"y\": \"ddyddt\"};  \n  if (mode == \"dydt-ddyddt\") return {\"x\": \"dvdt\", \"y\": \"ddyddt\"}; \n}\nfunction data_plot(choice, graphmode_json, data_json){\n  var traces = [];\n  var trace = {\n     x: data_json[choice][graphmode_json['x']],\n     y: data_json[choice][graphmode_json['y']],\n     mode: 'markers',\n     type: 'scatter',\n     marker: { size : 10 }\n\/\/     mode: 'scatter' \/\/ lines'\n  };\n  var layout = {    \/\/ https:\/\/plotly.com\/javascript\/axes\/\n      height: 500,\n      xaxis: {\n         title: graphmode_json['x']\n      },\n      yaxis: {\n         title: graphmode_json['y']\n      },\n      margin: { t: 50 } \n  };\n  traces.push(trace);\n  Plotly.newPlot('output_graph', traces, layout);\n}\nfunction transpose(matrix) {\n  const rows = matrix.length, cols = matrix[0].length;\n  const grid = [];\n  for (let j = 0; j < cols; j++) {\n    grid[j] = Array(rows);\n  }\n  for (let i = 0; i < rows; i++) {\n    for (let j = 0; j < cols; j++) {\n      grid[j][i] = matrix[i][j];\n    }\n  }\n  return grid;\n}\nfunction settingname(name){\n  var colname = ['sensor1','sensor2','sensor3','sensor4','sensor5','sensor6','sensor7','sensor13','sensor14','sensor8','sensor9','sensor10','sensor11','sensor12','mt'];\n  var names = ['CH2O','MQ131','VOC','NH3','CO','NO2','CO2','Temp','Humidity','C3H8','C4H10','CH4','H2','C2H5OH','time(s)'];\n  return names[colname.indexOf(name)];\n}\nfunction multiple_plot(res_json){\n    var colname = ['sensor1','sensor2','sensor3','sensor4','sensor5','sensor6','sensor7','sensor13','sensor14','sensor8','sensor9','sensor10','sensor11','sensor12','mt'];\n    var columnX = [];\n    var columnY = [];\n    var columnY2 = [];\n    var columns = [];\n    var plotmode = jQuery(\"#graph_choice\").val();\n    jQuery('input:radio[name=\"optionx\"]').each(function() {\n        if(this.checked){\/\/checked \ucc98\ub9ac\ub41c \ud56d\ubaa9\uc758 \uac12\n            columnX.push(this.value);\n            columns.push(this.value);\n        }\n    });\n    jQuery('input:checkbox[name=\"optiony\"]').each(function() {\n        if(this.checked){\/\/checked \ucc98\ub9ac\ub41c \ud56d\ubaa9\uc758 \uac12\n            columnY.push(this.value); \n            columns.push(this.value);\n        }\n    });\n    jQuery('input:checkbox[name=\"optiony2\"]').each(function() {\n        if(this.checked){\/\/checked \ucc98\ub9ac\ub41c \ud56d\ubaa9\uc758 \uac12\n            columnY2.push(this.value); \n            columns.push(this.value);\n        }\n    });\n    console.log(columnX);\n    console.log(columnY);\n    console.log(columnY2);\n    console.log(columns);\n    var data_arr, data_arrX, xtitle, ytitle;\n    if (plotmode == 't-y') {\n        xtitle = 't (sec)';\n        ytitle = 'y (V)';\n        data_arrX = res_json['t'];\n        data_arr = transpose(res_json['v']);\n    } else if (plotmode == 'y-dydt'){\n        xtitle = 'y';\n        ytitle = 'dy\/dt';\n        data_arrX = transpose(res_json['v']);\n        data_arr = transpose(res_json['dydt']);\n    } else if (plotmode == 'y-ddyddt'){\n        xtitle = 'y';\n        ytitle = 'd$^2$y\/dt$^2$';\n        data_arrX = transpose(res_json['v']);\n        data_arr = transpose(res_json['ddyddt']);\n    } else if (plotmode == 'dydt-ddyddt'){\n        xtitle = 'dy\/dt';\n        ytitle = 'd$^2$y\/dt$^2$';\n        data_arrX = transpose(res_json['dydt']);\n        data_arr = transpose(res_json['ddyddt']);\n    }\n    console.log(data_arr);\n    var traces = [];\n    var data_X = res_json['t'];\n    for (var i = 1; i < columns.length ; i++) {\n        if (plotmode != 't-y') {\n          data_X = data_arrX[colname.indexOf(columns[i]) + 1];\n        }\n        var trace = {\n            x: data_X,\n            y: data_arr[colname.indexOf(columns[i]) + 1],\n            name: settingname(columns[i])\n        }\n        if (plotmode == 't-y') {\n          trace['mode'] = 'lines';\n        } else {\n          trace['mode'] = 'markers';\n          trace['type'] = 'scatter';\n          trace['marker'] = { size : 10 };\n        }\n        if (columnY2.indexOf(columns[i])>=0) trace['yaxis'] = 'y2';\n        console.log(trace);\n        traces.push(trace);\n    }\n    var layout = {\n        height: 700,\n        width: 800,\n        xaxis: {\n            title: xtitle\n        },\n        yaxis: {\n            title: ytitle\n        },\n        margin: { t: 50 } \n    };\n    if (columnY2.length>0) layout['yaxis2'] = { title: 'y2 axis values', overlaying:'y', side: 'right' };\n    Plotly.newPlot('output_plot', traces, layout);\n    jQuery(\"#output\").html(\"\");\n}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p> [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=\/wp\/v2\/posts\/2029"}],"collection":[{"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2029"}],"version-history":[{"count":1,"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=\/wp\/v2\/posts\/2029\/revisions"}],"predecessor-version":[{"id":2030,"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=\/wp\/v2\/posts\/2029\/revisions\/2030"}],"wp:attachment":[{"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gassensor.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}