designer.html 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Designer</title>
  6. <meta name="description"
  7. content="Designer Drawing Block.">
  8. <link rel="stylesheet" href="{{ static_url("style.css") }}">
  9. <link rel="stylesheet" href="{{ static_url("jquery-ui.min.css") }}">
  10. <!--[if IE]>
  11. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  12. <![endif]-->
  13. </head>
  14. <body>
  15. <div id="page_info">Designer Block. Generated by BORA 0.0.1</div>
  16. {% if "background" in data %}
  17. <img src="{{ static_url( data['background'] ) }}"></img>
  18. {% else %}
  19. <img src="{{ static_url( 'background.png' ) }}"></img>
  20. {% end %}
  21. <button class="button showhide" onclick="showhide()">Show/Hide</button>
  22. {% if data['style'] %}
  23. {% for key in data['style'] %}
  24. {% if data['style'][key]['type'] == "calc" %}
  25. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
  26. data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
  27. height:{{ data['style'][key]['height'] }}px;'
  28. {% if "condition" in data['style'][key] %}
  29. data-cond="{{ data['style'][key]['condition'] }}"
  30. {% else%}position
  31. {% end%}
  32. {% if "formula" in data['style'][key] %}
  33. data-formula="{{ data['style'][key]['formula'] }}"
  34. {% else %}
  35. {% end %}
  36. {% if "lesser" in data['style'][key] %}
  37. data-lesser="{{ data['style'][key]['lesser'] }}"
  38. {% else %}
  39. {% end %}
  40. {% if "larger" in data['style'][key] %}
  41. data-larger="{{ data['style'][key]['larger'] }}"
  42. {% else %}
  43. {% end %}
  44. data-type="{{ data['style'][key]['type'] }}" class='varbox' id="{{ key }}">
  45. <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX <span class='unit_title' style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" > {{ data['style'][key]['unit']['title'] }}</span></span></p>
  46. </div>
  47. {% else %}
  48. {% end %}
  49. {% if data['style'][key]['type'] == "data" %}
  50. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
  51. data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
  52. height:{{ data['style'][key]['height'] }}px;'
  53. {% if "condition" in data['style'][key] %}
  54. data-cond="{{ data['style'][key]['condition'] }}"
  55. {% else%}position
  56. {% end%}
  57. {% if "formula" in data['style'][key] %}
  58. data-formula="{{ data['style'][key]['formula'] }}"
  59. {% else %}
  60. {% end %}
  61. {% if "lesser" in data['style'][key] %}
  62. data-lesser="{{ data['style'][key]['lesser'] }}"
  63. {% else %}
  64. {% end %}
  65. {% if "larger" in data['style'][key] %}
  66. data-larger="{{ data['style'][key]['larger'] }}"
  67. {% else %}
  68. {% end %}
  69. {% if "exponential" in data['style'][key] %}
  70. data-exponential="{{ data['style'][key]['exponential'] }}"
  71. {% else %}
  72. {% end %}
  73. data-type="{{ data['style'][key]['type'] }}" class='varbox' id="{{ key }}">
  74. <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX <span class='unit_title' style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" > {{ data['style'][key]['unit']['title'] }}</span></span></p>
  75. </div>
  76. {% else %}
  77. {% end %}
  78. {% if data['style'][key]['type'] == "valve" %}
  79. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;' data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" class='varbox' id="{{ key }}">
  80. <img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
  81. </div>
  82. {% else %}
  83. {% end %}
  84. {% if data['style'][key]['type'] == "integer-to-string" %}
  85. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
  86. data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
  87. height:{{ data['style'][key]['height'] }}px;'
  88. {% if "cond" in data['style'][key] %}
  89. data-cond="{{ data['style'][key]['cond'] }}"
  90. {% else%}
  91. {% end%}
  92. data-dict="{{ data['style'][key]['dict'] }}" data-type="{{ data['style'][key]['type'] }}" class='varbox' id="{{ key }}">
  93. <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><br /><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}px; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval">??? </span></p>
  94. </div>
  95. {% else %}
  96. {% end %}
  97. {% if data['style'][key]['type'] == "header" %}
  98. <div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
  99. data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
  100. height:{{ data['style'][key]['height'] }}px;' data-type="{{ data['style'][key]['type'] }}" class='varbox' id="{{ key }}">
  101. <p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}px; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span></p>
  102. </div>
  103. {% else %}
  104. {% end %}
  105. {% end %}
  106. {% else %}
  107. {% end %}
  108. <div id="tool-btn">
  109. <span class="info">Variable</span>
  110. <select id="varname" style="font-size:16pt;">
  111. {% if data['index'] %}
  112. {% for key in data['index'] %}
  113. {% if key != "time" %}
  114. <option value={{ key }}>{{key}}</option>
  115. {% else %}
  116. {% end %}
  117. {% end %}
  118. {% else %}
  119. {% end %}
  120. </select>
  121. <span class="info">Type</span>
  122. <select id="vartype" style="font-size:16pt;">
  123. <option value="data">data</option>
  124. <option value="valve">valve</option>
  125. <option value="integer-to-string">integer-to-string</option>
  126. <option value="header">header</option>
  127. <option value="calc">calc</option>
  128. </select>
  129. <span class="info">Attribute</span>
  130. <select id="varattr" style="font-size:16pt;">
  131. <option value="normal">Normal</option>
  132. <option value="virtual">Virtual</option>
  133. </select>
  134. <span class="info">Virtual ID</span>
  135. <input type="text" id="virtual_id_text" placeholder="text" style="font-size:16pt; width=100px;"/>
  136. <br /><br />
  137. <span class="info">Title</span>
  138. <input type="text" id="elem_title_text" placeholder="text" style="font-size:16pt; width=100px;"/>
  139. <input type="text" id="elem_title_size" placeholder="size" style="font-size:16pt; width=100px;"/>
  140. <input type="text" id="elem_lesser_range" placeholder="smaller than (red)" style="font-size:16pt; width=100px;"/>
  141. <input type="text" id="elem_larger_range" placeholder="larger than (red)" style="font-size:16pt; width=100px;"/>
  142. <select id="elem_title_style" style="font-size:16pt;">
  143. <option value="400">normal</option>
  144. <option value="700">bold</option>
  145. </select>
  146. <br /><br />
  147. <span class="info">Value</span>
  148. <input type="text" id="elem_unit_text" placeholder="unit" style="font-size:16pt; width=100px;"/>
  149. <input type="text" id="elem_unit_size" placeholder="size" style="font-size:16pt; width=100px;"/>
  150. <input type="text" id="elem_condition_range" placeholder="condition (red)" style="font-size:16pt; width=100px;"/>
  151. <input type="text" id="elem_formula" placeholder="Equation" style="font-size:16pt; width=100px;"/>
  152. <select id="elem_unit_style" style="font-size:16pt;">
  153. <option value="400">normal</option>
  154. <option value="700">bold</option>
  155. </select>
  156. <span class="info">Exp</span><input type="checkbox" id="elem_exponential" style="font-size:16pt; width:20px; height:20px;"/>
  157. <br /><br />
  158. <button class="button save" onclick="backup()">Backup</button>
  159. <button style="display:none;" id="buttonHighlight" class="button highlight" onclick="highlight({{ data['cache'] }})">Highlight</button>
  160. <button class="button add" onclick="add()">Add</button>
  161. <button class="button remove" onclick="myremove()">Remove</button>
  162. <button class="button save" onclick="mysave({{ data['cache'] }})">Save</button>
  163. </div>
  164. <!-- java script -->
  165. <script src="{{ static_url("jquery-1.12.3.min.js") }}"></script>
  166. <script src="{{ static_url("jquery-ui.min.js") }}"></script>
  167. <script>
  168. function backup() {
  169. $.ajax({
  170. url: '/backup/',
  171. type: 'POST',
  172. success: function (response) {
  173. alert("Backup success!");
  174. },
  175. error: function () {
  176. console.log("Error.")
  177. }
  178. });
  179. }
  180. function showhide() {
  181. console.log("Show or Hide");
  182. $("#tool-btn").toggle();
  183. }
  184. function add() {
  185. console.log("add element");
  186. title_text = $("#elem_title_text").val();
  187. title_text = title_text.trim();
  188. title_color = "#000000";
  189. //title_color = $("#elem_title_color").val();
  190. title_size = $("#elem_title_size").val();
  191. title_style = $("#elem_title_style option:selected").val();
  192. unit_text = $("#elem_unit_text").val();
  193. unit_text = unit_text.trim();
  194. unit_color = "#000";
  195. //unit_color = $("#elem_unit_color").val();
  196. unit_size = $("#elem_unit_size").val();
  197. unit_style = $("#elem_unit_style option:selected").val();
  198. data_condition = $("#elem_condition_range").val();
  199. //data_max = $("#elem_max_range").val();
  200. data_formula = $("#elem_formula").val();
  201. virtual_id = $("#virtual_id_text").val();
  202. virtual_id = virtual_id.trim();
  203. if (virtual_id == "") {
  204. virtual_id = "0";
  205. }
  206. if ($('#elem_exponential').is(":checked")) {
  207. data_exponential = true;
  208. $("#"+key).attr("data-exponential", true);
  209. } else {
  210. data_exponential = false;
  211. $("#"+key).attr("data-exponential", false);
  212. }
  213. data_lesser = $("#elem_lesser_range").val();
  214. data_larger = $("#elem_larger_range").val();
  215. varval = $( "#varname option:selected").val();
  216. varname = $("#varname option:selected").text();
  217. vartype = $("#vartype option:selected").val();
  218. varattr = $("#varattr option:selected").val();
  219. console.log("Selected");
  220. console.log(varattr);
  221. console.log(virtual_id);
  222. console.log(vartype);
  223. console.log(title_text, unit_text, varname, varval, vartype);
  224. if(($("#" + varname).length == 0) || (vartype=="header") || (vartype=="calc") || (varattr=="virtual")) {
  225. console.log("Must enter here");
  226. console.log(vartype);
  227. if (vartype == "data") {
  228. if (varattr=="virtual") {
  229. virtual_name = "virtual_" + varname + "_" + virtual_id;
  230. if ( $("#" + virtual_name).length > 0 ) {
  231. for (i = 0; i < 50; i++) {
  232. virtual_name = "virtual_" + varname + "_" + i.toString();
  233. console.log($("#" + virtual_name).length);
  234. if (!$("#" + virtual_name).length){
  235. break;
  236. }
  237. }
  238. }
  239. varname = virtual_name;
  240. }
  241. console.log("Data");
  242. html_text = "<div " +
  243. "style='position: absolute; " +
  244. "top:0; " +
  245. "left:0;' " +
  246. "class='varbox box_highlight' " +
  247. "id='" + varname +
  248. "' data-type='" + vartype +
  249. "' data-cond='" + data_condition +
  250. "' data-formula='" + data_formula +
  251. "' data-lesser='" + data_lesser +
  252. "' data-larger='" + data_larger +
  253. "' data-exponential='" + data_exponential +
  254. "'>" +
  255. "<p>" +
  256. "<span style='color: " + title_color + ";" +
  257. "font-size:" + title_size + "px; " +
  258. "font-weight: " + title_style + ";' " +
  259. "class='title'>" + title_text +
  260. " </span>" +
  261. "<span style='color: " + unit_color + "; " +
  262. "font-size:" + unit_size + "px; " +
  263. "font-weight: " + unit_style + ";' " +
  264. "class='varval'>XXX.XX </span>" +
  265. "<span class='unit_title'>" + unit_text + "</span></p>" +
  266. "</div>";
  267. } else if (vartype == "header") {
  268. console.log("Header");
  269. if (title_text.length > 0) {
  270. var clean_text = title_text.replace(/[^a-zA-Z0-9 ]/g, "")
  271. varname = "header_" + clean_text.replace(/\s+/g, '-').toLowerCase();
  272. html_text = "<div " +
  273. "style='position: absolute; " +
  274. "top:0; " +
  275. "left:0;' " +
  276. "class='varbox box_highlight' " +
  277. "id='" + varname +
  278. "' data-type='" + vartype +
  279. "' data-cond='" + data_condition +
  280. "' data-lesser='" + data_lesser +
  281. "' data-larger='" + data_larger +
  282. "'>" +
  283. "<p>" +
  284. "<span style='color: " + title_color + ";" +
  285. "font-size:" + title_size + "px; " +
  286. "font-weight: " + title_style + ";' " +
  287. "class='title'>" + title_text +
  288. " </span></p>" +
  289. "</div>";
  290. $('#varname').append($('<option>', {
  291. value: varname,
  292. text: varname
  293. }));
  294. $('#varname').val(varname);
  295. $('#elem_title_text').removeClass('glowing_border');
  296. } else {
  297. console.log("NoInput");
  298. html_text = "";
  299. $('#elem_title_text').addClass('glowing_border');
  300. }
  301. } else if (vartype == "calc") {
  302. console.log("Calc");
  303. if (data_formula.length > 0) {
  304. var clean_text = virtual_id.replace(/[^a-zA-Z0-9 ]/g, "")
  305. varname = "calc_" + clean_text.replace(/\s+/g, '-').toLowerCase();
  306. html_text = "<div " +
  307. "style='position: absolute; " +
  308. "top:0; " +
  309. "left:0;' " +
  310. "class='varbox box_highlight' " +
  311. "id='" + varname +
  312. "' data-type='" + vartype +
  313. "' data-cond='" + data_condition +
  314. "' data-lesser='" + data_lesser +
  315. "' data-larger='" + data_larger +
  316. "' data-formula='" + data_formula +
  317. "'>" +
  318. "<p>" +
  319. "<span style='color: " + title_color + ";" +
  320. "font-size:" + title_size + "px; " +
  321. "font-weight: " + title_style + ";' " +
  322. "class='title'>" + title_text +
  323. " </span>" +
  324. "<span style='color: " + unit_color + "; " +
  325. "font-size:" + unit_size + "px; " +
  326. "font-weight: " + unit_style + ";' " +
  327. "class='varval'>XXX.XX </span>" +
  328. "<span class='unit_title'>" + unit_text + "</span></p>" +
  329. "</div>";
  330. $('#varname').append($('<option>', {
  331. value: varname,
  332. text: varname
  333. }));
  334. $('#varname').val(varname);
  335. $('#elem_formula').removeClass('glowing_border');
  336. } else {
  337. console.log("NoInput");
  338. html_text = "";
  339. $('#elem_formula').addClass('glowing_border');
  340. }
  341. } else if (vartype == "valve") {
  342. console.log("Ventil");
  343. if (unit_text.length > 0) {
  344. var token = JSON.parse(unit_text);
  345. data_on = token["on"];
  346. data_off = token["off"];
  347. html_text = "<div " +
  348. "style='position: absolute; " +
  349. "top:0; " +
  350. "left:0;' " +
  351. "class='varbox box_highlight' " +
  352. "id='" + varname +
  353. "' data-type='" + vartype +
  354. "' data-cond='" + data_condition +
  355. "' data-lesser='" + data_lesser +
  356. "' data-larger='" + data_larger +
  357. "' data-on='" + data_on +
  358. "' data-off='" + data_off +
  359. "'>" +
  360. "<img width='100%' height='100%' " +
  361. "src='{{ static_url("ventil_inactive.png") }}'></img>" +
  362. "</div>";
  363. $('#elem_unit_text').removeClass('glowing_border');
  364. } else{
  365. console.log("NoInput");
  366. html_text = "";
  367. $('#elem_unit_text').addClass('glowing_border');
  368. }
  369. } else if (vartype == "integer-to-string") {
  370. console.log("Integer2String");
  371. if (unit_text.length > 0) {
  372. html_text = "<div " +
  373. "style='position: absolute; " +
  374. "top:0; " +
  375. "left:0;' " +
  376. "class='varbox box_highlight' " +
  377. "id='" + varname +
  378. "' data-type='" + vartype +
  379. "' data-dict='" + unit_text +
  380. "' data-cond='" + data_condition +
  381. "'>" +
  382. "<p>" +
  383. "<span style='color: " + title_color + ";" +
  384. "font-size:" + title_size + "px; " +
  385. "font-weight: " + title_style + ";' " +
  386. "class='title'>" + title_text +
  387. " </span><br />" +
  388. "<span style='color: " + unit_color + "; " +
  389. "font-size:" + unit_size + "px; " +
  390. "font-weight: " + unit_style + ";' " +
  391. "class='varval'>??? </span>" +
  392. "</p>" +
  393. "</div>";
  394. $('#elem_unit_text').removeClass('glowing_border');
  395. } else {
  396. console.log("NoInput");
  397. html_text = "";
  398. $('#elem_unit_text').addClass('glowing_border');
  399. }
  400. }
  401. console.log("Adding element");
  402. console.log(html_text);
  403. if (html_text.length > 0) {
  404. $( "body" ).append(html_text);
  405. $("#"+varname).draggable();
  406. $("#"+varname).resizable();
  407. }
  408. }
  409. }
  410. function myremove() {
  411. varname = $("#varname option:selected").text();
  412. vartype = $("#vartype option:selected").val();
  413. if($("#" + varname).length > 0) {
  414. $("#"+varname).remove();
  415. console.log(varname +" removed.");
  416. }
  417. }
  418. function mysave(data) {
  419. console.log("saving...");
  420. varname = $("#varname option:selected").text();
  421. varattr = $("#varattr option:selected").val();
  422. console.log("debug");
  423. console.log(varattr);
  424. var position = {};
  425. for(key in data) {
  426. var tmp = {};
  427. //console.log(key);
  428. if($("#" + key).length > 0 ) {
  429. tmp["ref"] = key;
  430. tmp["left"] = $("#"+key).css("left");
  431. tmp["top"] = $("#"+key).css("top");
  432. tmp["width"] = $("#"+key).width();
  433. tmp["height"] = $("#"+key).height();
  434. tmp["type"] = $("#"+key).attr("data-type");
  435. if ( $("#"+key).attr("data-type") == "data" ) {
  436. if ( (varname == key) && (varattr == "normal") ) {
  437. tmp["condition"] = $("#elem_condtion_range").val();
  438. tmp["formula"] = $("#elem_formula").val();
  439. tmp["lesser"] = $("#elem_lesser_range").val();
  440. tmp["larger"] = $("#elem_larger_range").val();
  441. if ($('#elem_exponential').is(":checked")) {
  442. tmp["exponential"] = true;
  443. } else {
  444. tmp["exponential"] = false;
  445. }
  446. header = {};
  447. header["title"] = $("#elem_title_text").val().trim();
  448. //header["color"] = $(".title", "#"+key).css("color");
  449. header["size"] = $("#elem_title_size").val();
  450. header["weight"] = $("#elem_title_style").val();
  451. // update field
  452. $(".title", "#"+key).text(header["title"]);
  453. $(".title", "#"+key).css("font-size", header["size"] + "px");
  454. $(".title", "#"+key).css("font-weight", header["weight"]);
  455. unit = {};
  456. unit["title"] = $("#elem_unit_text").val().trim();
  457. //unit["color"] = $(".varval", "#"+key).css("color");
  458. unit["size"] = $("#elem_unit_size").val();
  459. unit["weight"] = $("#elem_unit_style").val();
  460. $(".varval", "#"+key).css("font-size", unit["size"] + "px");
  461. $(".unit_title", "#"+key).css("font-size", unit["size"] + "px");
  462. $(".unit_title", "#"+key).css("font-weight", unit["weight"]);
  463. $(".varval", "#"+key).css("font-weight", unit["weight"]);
  464. } else {
  465. tmp["condition"] = $("#"+key).attr("data-cond");
  466. tmp["formula"] = $("#"+key).attr("data-formula");
  467. tmp["lesser"] = $("#"+key).attr("data-lesser");
  468. tmp["larger"] = $("#"+key).attr("data-larger");
  469. tmp["exponential"] = $("#"+key).attr("data-exponential");
  470. //tmp["min"] = $("#"+key).attr("min");
  471. //tmp["max"] = $("#"+key).attr("max");
  472. header = {};
  473. header["title"] = $(".title", "#"+key).text();
  474. //header["color"] = $(".title", "#"+key).css("color");
  475. header["size"] = parseInt($(".title", "#"+key).css("font-size")) || 28;
  476. var fontWeight = $(".title", "#"+key).css("font-weight");
  477. if (fontWeight == 'bold' || fontWeight == '700') {
  478. header["weight"] = "700";
  479. } else {
  480. header["weight"] = "400";
  481. }
  482. unit = {};
  483. unit["title"] = $(".unit_title", "#"+key).text();
  484. //unit["color"] = $(".varval", "#"+key).css("color");
  485. unit["size"] = parseInt($(".varval", "#"+key).css("font-size")) || 28;
  486. fontWeight = $(".varval", "#"+key).css("font-weight");
  487. if (fontWeight == 'bold' || fontWeight == '700') {
  488. unit["weight"] = "700";
  489. } else {
  490. unit["weight"] = "400";
  491. }
  492. }
  493. tmp["header"] = header;
  494. tmp["unit"] = unit;
  495. //} else if ( $("#"+key).attr("data-type") == "header" ) {
  496. // header = {};
  497. // header["title"] = $(".title", "#"+key).text();
  498. // header["size"] = $(".title", "#"+key).css("font-size");
  499. // header["weight"] = $(".title", "#"+key).css("font-weight");
  500. // tmp["header"] = header;
  501. } else if ( $("#"+key).attr("data-type") == "valve" ) {
  502. if ((varname == key) && (varattr == "normal")) {
  503. var unit_text = $("#elem_unit_text").val();
  504. unit_text = unit_text.trim();
  505. var dtoken = JSON.parse(unit_text);
  506. tmp["on"] = dtoken["on"];
  507. tmp["off"] = dtoken["off"];
  508. } else {
  509. tmp["on"] = $("#"+key).attr("data-on");
  510. tmp["off"] = $("#"+key).attr("data-off");
  511. }
  512. } else if ( $("#"+key).attr("data-type") == "integer-to-string" ) {
  513. if ((varname == key)&& (varattr == "normal")) {
  514. var unit_text = $("#elem_unit_text").val();
  515. unit_text = unit_text.trim();
  516. var data_condition = $("#elem_condition_range").val();
  517. tmp["cond"] = data_condition;
  518. tmp["dict"] = unit_text;
  519. header = {};
  520. header["title"] = $("#elem_title_text").val().trim();
  521. header["size"] = $("#elem_title_size").val();
  522. header["weight"] = $("#elem_title_style").val();
  523. unit = {};
  524. //unit["color"] = $(".varval", "#"+key).css("color");
  525. unit["size"] = $("#elem_unit_size").val();
  526. unit["weight"] = $("#elem_unit_style option:selected").val();
  527. } else {
  528. tmp["dict"] = $("#"+key).attr("data-dict");
  529. tmp["cond"] = $("#"+key).attr("data-cond");
  530. header = {};
  531. header["title"] = $(".title", "#"+key).text();
  532. //header["color"] = $(".title", "#"+key).css("color");
  533. header["size"] = $(".title", "#"+key).css("font-size");
  534. header["weight"] = $(".title", "#"+key).css("font-weight");
  535. unit = {};
  536. //unit["title"] = $(".unit_title", "#"+key).text();
  537. //unit["color"] = $(".varval", "#"+key).css("color");
  538. unit["size"] = $(".varval", "#"+key).css("font-size");
  539. unit["weight"] = $(".varval", "#"+key).css("font-weight");
  540. }
  541. tmp["header"] = header;
  542. tmp["unit"] = unit;
  543. }
  544. position[key] = tmp;
  545. }
  546. }
  547. var title_text = $("#elem_title_text").val();
  548. title_text = title_text.trim();
  549. var clean_text = title_text.replace(/[^a-zA-Z0-9 ]/g, "")
  550. var token = "header_" + clean_text.replace(/\s+/g, '-').toLowerCase();
  551. $('[id^=virtual_]').each(function( index ) {
  552. var tmp = {};
  553. var key = this.id;
  554. var ref = key.split("_");
  555. ref = ref[1];
  556. if (key != "virtual_id_text") {
  557. console.log("Check this");
  558. console.log(key);
  559. if($("#" + key).length > 0 ) {
  560. tmp["ref"] = ref;
  561. tmp["left"] = $("#"+key).css("left");
  562. tmp["top"] = $("#"+key).css("top");
  563. tmp["width"] = $("#"+key).width();
  564. tmp["height"] = $("#"+key).height();
  565. tmp["type"] = $("#"+key).attr("data-type");
  566. if ( $("#"+key).attr("data-type") == "data" ) {
  567. if (varname == key) {
  568. tmp["condition"] = $("#elem_condtion_range").val();
  569. tmp["formula"] = $("#elem_formula").val();
  570. tmp["lesser"] = $("#elem_lesser_range").val();
  571. tmp["larger"] = $("#elem_larger_range").val();
  572. header = {};
  573. header["title"] = $("#elem_title_text").val().trim();
  574. //header["color"] = $(".title", "#"+key).css("color");
  575. header["size"] = $("#elem_title_size").val();
  576. header["weight"] = $("#elem_title_style option:selected").val();
  577. // update field
  578. $(".title", "#"+key).css("font-size", header["size"] + "px");
  579. $(".title", "#"+key).css("font-weight", header["weight"] + "px");
  580. unit = {};
  581. unit["title"] = $("#elem_unit_text").val().trim();
  582. //unit["color"] = $(".varval", "#"+key).css("color");
  583. unit["size"] = $("#elem_unit_size").val();
  584. unit["weight"] = $("#elem_unit_style option:selected").val();
  585. // update field
  586. $(".varval", "#"+key).css("font-size", unit["size"] + "px");
  587. $(".unit_title", "#"+key).css("font-size", unit["size"] + "px");
  588. $(".varval", "#"+key).css("font-weight", unit["weight"] + "px");
  589. } else {
  590. tmp["condition"] = $("#"+key).attr("data-cond");
  591. tmp["formula"] = $("#"+key).attr("data-formula");
  592. tmp["lesser"] = $("#"+key).attr("data-lesser");
  593. tmp["larger"] = $("#"+key).attr("data-larger");
  594. //tmp["min"] = $("#"+key).attr("min");
  595. //tmp["max"] = $("#"+key).attr("max");
  596. header = {};
  597. header["title"] = $(".title", "#"+key).text();
  598. //header["color"] = $(".title", "#"+key).css("color");
  599. header["size"] = parseInt($(".title", "#"+key).css("font-size")) || 28;
  600. header["weight"] = parseInt($(".title", "#"+key).css("font-weight")) || 28;
  601. unit = {};
  602. unit["title"] = $(".unit_title", "#"+key).text();
  603. //unit["color"] = $(".varval", "#"+key).css("color");
  604. unit["size"] = parseInt($(".varval", "#"+key).css("font-size")) || 28;
  605. unit["weight"] = parseInt($(".varval", "#"+key).css("font-weight")) || 28;
  606. }
  607. tmp["header"] = header;
  608. tmp["unit"] = unit;
  609. //} else if ( $("#"+key).attr("data-type") == "header" ) {
  610. // header = {};
  611. // header["title"] = $(".title", "#"+key).text();
  612. // header["size"] = $(".title", "#"+key).css("font-size");
  613. // header["weight"] = $(".title", "#"+key).css("font-weight");
  614. // tmp["header"] = header;
  615. } else if ( $("#"+key).attr("data-type") == "valve" ) {
  616. if (varname == key) {
  617. var unit_text = $("#elem_unit_text").val();
  618. unit_text = unit_text.trim();
  619. var dtoken = JSON.parse(unit_text);
  620. tmp["on"] = dtoken["on"];
  621. tmp["off"] = dtoken["off"];
  622. } else {
  623. tmp["on"] = $("#"+key).attr("data-on");
  624. tmp["off"] = $("#"+key).attr("data-off");
  625. }
  626. } else if ( $("#"+key).attr("data-type") == "integer-to-string" ) {
  627. if (varname == key) {
  628. var unit_text = $("#elem_unit_text").val();
  629. unit_text = unit_text.trim();
  630. var data_condition = $("#elem_condition_range").val();
  631. tmp["cond"] = data_condition;
  632. tmp["dict"] = unit_text;
  633. header = {};
  634. header["title"] = $("#elem_title_text").val().trim();
  635. header["size"] = $("#elem_title_size").val();
  636. header["weight"] = $("#elem_title_style option:selected").val();
  637. unit = {};
  638. //unit["color"] = $(".varval", "#"+key).css("color");
  639. unit["size"] = $("#elem_unit_size").val();
  640. unit["weight"] = $("#elem_unit_style option:selected").val();
  641. } else {
  642. tmp["dict"] = $("#"+key).attr("data-dict");
  643. tmp["cond"] = $("#"+key).attr("data-cond");
  644. header = {};
  645. header["title"] = $(".title", "#"+key).text();
  646. //header["color"] = $(".title", "#"+key).css("color");
  647. header["size"] = $(".title", "#"+key).css("font-size");
  648. header["weight"] = $(".title", "#"+key).css("font-weight");
  649. unit = {};
  650. //unit["title"] = $(".unit_title", "#"+key).text();
  651. //unit["color"] = $(".varval", "#"+key).css("color");
  652. unit["size"] = $(".varval", "#"+key).css("font-size");
  653. unit["weight"] = $(".varval", "#"+key).css("font-weight");
  654. }
  655. tmp["header"] = header;
  656. tmp["unit"] = unit;
  657. }
  658. position[key] = tmp;
  659. }
  660. }
  661. });
  662. $('[id^=header_]').each(function( index ) {
  663. tmp = {};
  664. var hkey = $( this ).attr('id');
  665. console.log(hkey);
  666. tmp["left"] = $("#"+hkey).css("left");
  667. tmp["top"] = $("#"+hkey).css("top");
  668. tmp["width"] = $("#"+hkey).width();
  669. tmp["height"] = $("#"+hkey).height();
  670. tmp["type"] = $("#"+hkey).attr("data-type");
  671. header = {};
  672. if (token == hkey) {
  673. header["title"] = $("#elem_title_text").val().trim();
  674. //header["color"] = $(".title", "#"+key).css("color");
  675. header["size"] = $("#elem_title_size").val();
  676. header["weight"] = $("#elem_title_style option:selected").val();
  677. // update field
  678. $(".title", "#"+hkey).css("font-size", header["size"] + "px");
  679. $(".title", "#"+hkey).css("font-weight", header["weight"]);
  680. } else {
  681. header["title"] = $(".title", "#"+hkey).text();
  682. //header["color"] = $(".title", "#"+hkey).css("color");
  683. header["size"] = parseInt($(".title", "#"+hkey).css("font-size")) || 28;
  684. header["weight"] = parseInt($(".title", "#"+hkey).css("font-weight")) || 28;
  685. var fontWeight = $(".title", "#"+hkey).css("font-weight");
  686. if (fontWeight == 'bold' || fontWeight == '700') {
  687. header["weight"] = "700";
  688. } else {
  689. header["weight"] = "400";
  690. }
  691. }
  692. tmp["header"] = header;
  693. position[hkey] = tmp;
  694. //console.log( index + ": " + $( this ).text() );
  695. });
  696. $('[id^=calc_]').each(function( index ) {
  697. var tmp = {};
  698. var key = this.id;
  699. if($("#" + key).length > 0 ) {
  700. tmp["ref"] = "";
  701. tmp["left"] = $("#"+key).css("left");
  702. tmp["top"] = $("#"+key).css("top");
  703. tmp["width"] = $("#"+key).width();
  704. tmp["height"] = $("#"+key).height();
  705. tmp["type"] = $("#"+key).attr("data-type");
  706. if ( $("#"+key).attr("data-type") == "calc" ) {
  707. if (varname == key) {
  708. tmp["condition"] = $("#elem_condtion_range").val();
  709. tmp["formula"] = $("#elem_formula").val();
  710. tmp["lesser"] = $("#elem_lesser_range").val();
  711. tmp["larger"] = $("#elem_larger_range").val();
  712. header = {};
  713. header["title"] = $("#elem_title_text").val().trim();
  714. //header["color"] = $(".title", "#"+key).css("color");
  715. header["size"] = $("#elem_title_size").val();
  716. header["weight"] = $("#elem_title_style option:selected").val();
  717. unit = {};
  718. unit["title"] = $("#elem_unit_text").val().trim();
  719. //unit["color"] = $(".varval", "#"+key).css("color");
  720. unit["size"] = $("#elem_unit_size").val();
  721. unit["weight"] = $("#elem_unit_style option:selected").val();
  722. } else {
  723. tmp["condition"] = $("#"+key).attr("data-cond");
  724. tmp["formula"] = $("#"+key).attr("data-formula");
  725. tmp["lesser"] = $("#"+key).attr("data-lesser");
  726. tmp["larger"] = $("#"+key).attr("data-larger");
  727. //tmp["min"] = $("#"+key).attr("min");
  728. //tmp["max"] = $("#"+key).attr("max");
  729. header = {};
  730. header["title"] = $(".title", "#"+key).text();
  731. //header["color"] = $(".title", "#"+key).css("color");
  732. header["size"] = $(".title", "#"+key).css("font-size");
  733. header["weight"] = $(".title", "#"+key).css("font-weight");
  734. unit = {};
  735. unit["title"] = $(".unit_title", "#"+key).text();
  736. //unit["color"] = $(".varval", "#"+key).css("color");
  737. unit["size"] = $(".varval", "#"+key).css("font-size");
  738. unit["weight"] = $(".varval", "#"+key).css("font-weight");
  739. }
  740. tmp["header"] = header;
  741. tmp["unit"] = unit;
  742. }
  743. position[key] = tmp;
  744. }
  745. });
  746. console.log("Check here");
  747. //console.log(position);
  748. var dataToSend = JSON.stringify(position);
  749. console.log(dataToSend);
  750. $.ajax({
  751. url: '/save/',
  752. type: 'POST',
  753. data: dataToSend,
  754. success: function (response) {
  755. var objresponse = JSON.parse(response);
  756. console.log(objresponse);
  757. },
  758. error: function () {
  759. console.log("Error.")
  760. }
  761. });
  762. }
  763. function highlight(mydata) {
  764. console.log("highlight");
  765. varname = $("#varname option:selected").text();
  766. vartype = $("#"+varname).attr("data-type");
  767. $("#vartype").val(vartype);
  768. //console.log(varname, vartype);
  769. // clear values
  770. $("#elem_title_text").val("");
  771. $("#elem_title_size").val("");
  772. $("#elem_unit_text").val("");
  773. $("#elem_unit_size").val("");
  774. $("#elem_lesser_range").val("");
  775. $("#elem_larger_range").val("");
  776. $("#elem_condition_range").val("");
  777. $("#elem_formula").val("");
  778. $("#virtual_id_text").val("");
  779. $('#elem_exponential').prop('checked', false);
  780. $('#elem_unit_text').removeClass('glowing_border');
  781. $('#elem_title_text').removeClass('glowing_border');
  782. $('#elem_formula').removeClass('glowing_border');
  783. if (vartype == "header") {
  784. $("#elem_title_text").val($("#"+varname + " .title").text());
  785. $("#elem_title_size").val(parseInt($("#"+varname + " .title").css("font-size")));
  786. $("#elem_title_style").val("400");
  787. var fontWeight = $("#"+varname + " .title").css("font-weight");
  788. if (fontWeight == 'bold' || fontWeight == '700') {
  789. $("#elem_title_style").val("700");
  790. }
  791. $("#elem_unit_style").val("400");
  792. var fontWeight = $("#"+varname + " .varval").css("font-weight");
  793. if (fontWeight == 'bold' || fontWeight == '700') {
  794. $("#elem_unit_style").val("700");
  795. }
  796. } else if (vartype == "data") {
  797. if ($("#"+varname).attr("data-exponential")) {
  798. $('#elem_exponential').prop('checked', true);
  799. } else {
  800. $('#elem_exponential').prop('checked', false);
  801. }
  802. $("#elem_title_text").val($("#"+varname + " .title").text().trim());
  803. $("#elem_title_size").val("");
  804. if ($("#"+varname + " .title").css("font-size")) {
  805. $("#elem_title_size").val(parseFloat($("#"+varname + " .title").css("font-size")));
  806. }
  807. $("#elem_unit_text").val($("#"+varname + " .unit_title").text().trim());
  808. $("#elem_unit_size").val("");
  809. if ($("#"+varname + " .varval").css("font-size")) {
  810. $("#elem_unit_size").val(parseFloat($("#"+varname + " .varval").css("font-size")));
  811. }
  812. $("#elem_lesser_range").val("");
  813. if ($("#"+varname).attr("data-lesser") ) {
  814. $("#elem_lesser_range").val($("#"+varname).attr("data-lesser"));
  815. }
  816. $("#elem_larger_range").val("");
  817. if ($("#"+varname).attr("data-larger") ) {
  818. $("#elem_larger_range").val($("#"+varname).attr("data-larger"));
  819. }
  820. $("#elem_condition_range").val("");
  821. if ($("#"+varname).attr("data-cond") ) {
  822. $("#elem_condition_range").val($("#"+varname).attr("data-cond"));
  823. }
  824. $("#elem_formula").val("");
  825. if ($("#"+varname).attr("data-formula") ) {
  826. $("#elem_formula").val($("#"+varname).attr("data-formula"));
  827. }
  828. $("#elem_title_style").val("400");
  829. var fontWeight = $("#"+varname + " .title").css("font-weight");
  830. if (fontWeight == 'bold' || fontWeight == '700') {
  831. $("#elem_title_style").val("700");
  832. }
  833. $("#elem_unit_style").val("400");
  834. var fontWeight = $("#"+varname + " .varval").css("font-weight");
  835. if (fontWeight == 'bold' || fontWeight == '700') {
  836. $("#elem_unit_style").val("700");
  837. }
  838. } else if (vartype == "calc") {
  839. var vid = varname.split("_");
  840. vid = vid[1];
  841. $("#virtual_id_text").val(vid);
  842. $("#elem_title_text").val($("#"+varname + " .title").text().trim());
  843. $("#elem_title_size").val("");
  844. if ($("#"+varname + " .title").css("font-size")) {
  845. $("#elem_title_size").val(parseFloat($("#"+varname + " .title").css("font-size")));
  846. }
  847. $("#elem_unit_text").val($("#"+varname + " .unit_title").text().trim());
  848. $("#elem_unit_size").val("");
  849. if ($("#"+varname + " .varval").css("font-size")) {
  850. $("#elem_unit_size").val(parseFloat($("#"+varname + " .varval").css("font-size")));
  851. }
  852. $("#elem_lesser_range").val("");
  853. if ($("#"+varname).attr("data-lesser") ) {
  854. $("#elem_lesser_range").val($("#"+varname).attr("data-lesser"));
  855. }
  856. $("#elem_larger_range").val("");
  857. if ($("#"+varname).attr("data-larger") ) {
  858. $("#elem_larger_range").val($("#"+varname).attr("data-larger"));
  859. }
  860. $("#elem_condition_range").val("");
  861. if ($("#"+varname).attr("data-cond") ) {
  862. $("#elem_condition_range").val($("#"+varname).attr("data-cond"));
  863. }
  864. $("#elem_formula").val("");
  865. if ($("#"+varname).attr("data-formula") ) {
  866. $("#elem_formula").val($("#"+varname).attr("data-formula"));
  867. }
  868. } else if (vartype == "valve") {
  869. $("#elem_unit_text").val("{'on':"+$("#"+varname).attr("data-on") + ",'off':"+$("#"+varname).attr("data-off")+"}" );
  870. } else if (vartype == "integer-to-string") {
  871. $("#elem_title_text").val($("#"+varname + " .title").text().trim());
  872. $("#elem_title_size").val("");
  873. if ($("#"+varname + " .title").css("font-size")) {
  874. $("#elem_title_size").val(parseFloat($("#"+varname + " .title").css("font-size")));
  875. }
  876. $("#elem_unit_text").val($("#"+varname).attr("data-dict"));
  877. $("#elem_condition_range").val("");
  878. if ($("#"+varname).attr("data-cond") ) {
  879. $("#elem_condition_range").val($("#"+varname).attr("data-cond"));
  880. }
  881. }
  882. for(key in mydata) {
  883. //console.log(key, varname);
  884. if(($("#" + key).length > 0) && (key == varname) ) {
  885. //if (!$("#"+varname).hasClass("box_highlight")) {
  886. $("#"+key).addClass("box_highlight");
  887. //}
  888. } else {
  889. $("#"+key).removeClass("box_highlight");
  890. }
  891. }
  892. }
  893. jQuery(window).load(function () {
  894. $("#varname > option").each(function() {
  895. if ($('#'+this.text).length){
  896. $('#'+this.text).draggable();
  897. $('#'+this.text).resizable();
  898. $('#'+this.text).click(function() {
  899. //console.log($(this).attr("id"));
  900. $("#varname").val($(this).attr("id"));
  901. $("#buttonHighlight").trigger("click");
  902. });
  903. }
  904. //console.log(this.text + ' ' + this.value);
  905. });
  906. $("#buttonHighlight").trigger("click");
  907. $("#varname").change(function() {
  908. varval = $( "#varname option:selected").val();
  909. varname = $("#varname option:selected").text();
  910. console.log(varval, varname);
  911. $("#buttonHighlight").trigger("click");
  912. });
  913. $("#vartype").change(function() {
  914. vartype = $("#vartype option:selected").val();
  915. if ((vartype == "header") || (vartype == "calc")) {
  916. $("#varname").val("");
  917. // clear values
  918. $("#elem_title_text").val("");
  919. $("#elem_title_size").val("");
  920. $("#elem_unit_text").val("");
  921. $("#elem_unit_size").val("");
  922. $("#elem_lesser_range").val("");
  923. $("#elem_larger_range").val("");
  924. $("#elem_condition_range").val("");
  925. $("#elem_formula").val("");
  926. }
  927. });
  928. });
  929. </script>
  930. </body>
  931. </html>