Skip to content

Commit

Permalink
Merge pull request #27 from chanhoonseng/master
Browse files Browse the repository at this point in the history 
- Corrected word 'ventil' to 'valve'
- Added red-border-highlight feature for incomplete input
  • Loading branch information
@nicolaisi
nicolaisi authored Sep 12, 2016
2 parents 6d8a12e + cbbd721 commit 3e2864e
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 96 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ The input section *'Variable'* stores all the registered data. In order to style

* **Data** <br />This data type is for defining a data with numerical value. After defining your data to this type, you can choose to either add a header and a unit to your data value, specify the font size, or even give a condition and equation to the data. For example, when you enter the number 200 inside the input section *'larger than (red)'*, it means that when the data value is greater than 200, its font will change to red color, or if you enter an equation with variable x as your data value like x+100 inside the input field *'Equation'*, this means that the data value will automatically increased by 100.

* **Ventil** <br />To insert an ventil image, you can choose to use this data type. For defining this data type, you are required to set a value for it. For example, inside the input field *'unit'*, you need to specify dictionary case like *{“1”:“on” , “0”:”off”}* which means if the retrieved data value equals to 1, then an image of green colored ventil will be added or red colored ventil for input value 0, otherwise grey colored ventil for none.
* **Valve** <br />To insert an valve image, you can choose to use this data type. For defining this data type, you are required to set a value for it. For example, inside the input field *'unit'*, you need to specify dictionary case like *{“1”:“on” , “0”:”off”}* which means if the retrieved data value equals to 1, then an image of green colored valve will be added or red colored valve for input value 0, otherwise grey colored valve for none.

* **Integer-to-string** <br />When you wish to assign each data values to a specific definition, for example, input value 0 for Shutdown or input value 1 for Start-up, you can use this data type. This data type will analyze the retrieved data and print out the corresponded definition which you have previously defined. Likewise, for defining this data type, you need to specify a dictionary case inside the input field *'unit'* such as *{“0”:”Shutdown” , “1”:”Start-up”}*. Optionally, you can define each cases with a color code under the input field *'condition (red)'*. For example, *{“0”:”#f00” , “1”:”#008000”}*.

Expand Down
226 changes: 131 additions & 95 deletions designer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
{% end %}


{% if data['style'][key]['type'] == "ventil" %}
{% if data['style'][key]['type'] == "valve" %}
<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 }}">
<img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
</div>
Expand Down Expand Up @@ -139,7 +139,7 @@
<span class="info">Type</span>
<select id="vartype" style="font-size:16pt;">
<option value="data">data</option>
<option value="ventil">ventil</option>
<option value="valve">valve</option>
<option value="integer-to-string">integer-to-string</option>
<option value="header">header</option>
<option value="calc">calc</option>
Expand Down Expand Up @@ -303,77 +303,92 @@
"</div>";
} else if (vartype == "header") {
console.log("Header");
var clean_text = title_text.replace(/[^a-zA-Z0-9 ]/g, "")
varname = "header_" + clean_text.replace(/\s+/g, '-').toLowerCase();
html_text = "<div " +
"style='position: absolute; " +
"top:0; " +
"left:0;' " +
"class='varbox box_highlight' " +
"id='" + varname +
"' data-type='" + vartype +
"' data-cond='" + data_condition +
"' data-lesser='" + data_lesser +
"' data-larger='" + data_larger +
"'>" +
"<p>" +
"<span style='color: " + title_color + ";" +
"font-size:" + title_size + "px; " +
"font-weight: " + title_style + ";' " +
"class='title'>" + title_text +
" </span></p>" +
"</div>";
if (title_text.length > 0) {
var clean_text = title_text.replace(/[^a-zA-Z0-9 ]/g, "")
varname = "header_" + clean_text.replace(/\s+/g, '-').toLowerCase();
html_text = "<div " +
"style='position: absolute; " +
"top:0; " +
"left:0;' " +
"class='varbox box_highlight' " +
"id='" + varname +
"' data-type='" + vartype +
"' data-cond='" + data_condition +
"' data-lesser='" + data_lesser +
"' data-larger='" + data_larger +
"'>" +
"<p>" +
"<span style='color: " + title_color + ";" +
"font-size:" + title_size + "px; " +
"font-weight: " + title_style + ";' " +
"class='title'>" + title_text +
" </span></p>" +
"</div>";

$('#varname').append($('<option>', {
value: varname,
text: varname
}));
$('#varname').val(varname);
$('#varname').append($('<option>', {
value: varname,
text: varname
}));
$('#varname').val(varname);
$('#elem_title_text').removeClass('glowing_border');
} else {
console.log("NoInput");
html_text = "";
$('#elem_title_text').addClass('glowing_border');
}


} else if (vartype == "calc") {
console.log("Calc");
var clean_text = virtual_id.replace(/[^a-zA-Z0-9 ]/g, "")
varname = "calc_" + clean_text.replace(/\s+/g, '-').toLowerCase();
html_text = "<div " +
"style='position: absolute; " +
"top:0; " +
"left:0;' " +
"class='varbox box_highlight' " +
"id='" + varname +
"' data-type='" + vartype +
"' data-cond='" + data_condition +
"' data-lesser='" + data_lesser +
"' data-larger='" + data_larger +
"' data-formula='" + data_formula +
"'>" +
"<p>" +
"<span style='color: " + title_color + ";" +
"font-size:" + title_size + "px; " +
"font-weight: " + title_style + ";' " +
"class='title'>" + title_text +
" </span>" +
"<span style='color: " + unit_color + "; " +
"font-size:" + unit_size + "px; " +
"font-weight: " + unit_style + ";' " +
"class='varval'>XXX.XX </span>" +
"<span class='unit_title'>" + unit_text + "</span></p>" +
"</div>";

$('#varname').append($('<option>', {
value: varname,
text: varname
}));
$('#varname').val(varname);
if (data_formula.length > 0) {
var clean_text = virtual_id.replace(/[^a-zA-Z0-9 ]/g, "")
varname = "calc_" + clean_text.replace(/\s+/g, '-').toLowerCase();
html_text = "<div " +
"style='position: absolute; " +
"top:0; " +
"left:0;' " +
"class='varbox box_highlight' " +
"id='" + varname +
"' data-type='" + vartype +
"' data-cond='" + data_condition +
"' data-lesser='" + data_lesser +
"' data-larger='" + data_larger +
"' data-formula='" + data_formula +
"'>" +
"<p>" +
"<span style='color: " + title_color + ";" +
"font-size:" + title_size + "px; " +
"font-weight: " + title_style + ";' " +
"class='title'>" + title_text +
" </span>" +
"<span style='color: " + unit_color + "; " +
"font-size:" + unit_size + "px; " +
"font-weight: " + unit_style + ";' " +
"class='varval'>XXX.XX </span>" +
"<span class='unit_title'>" + unit_text + "</span></p>" +
"</div>";

$('#varname').append($('<option>', {
value: varname,
text: varname
}));
$('#varname').val(varname);
$('#elem_formula').removeClass('glowing_border');
} else {
console.log("NoInput");
html_text = "";
$('#elem_formula').addClass('glowing_border');
}

} else if (vartype == "ventil") {

} else if (vartype == "valve") {
console.log("Ventil");
var token = JSON.parse(unit_text);
data_on = token["on"];
data_off = token["off"];
if (unit_text.length > 0) {
var token = JSON.parse(unit_text);
data_on = token["on"];
data_off = token["off"];

html_text = "<div " +
html_text = "<div " +
"style='position: absolute; " +
"top:0; " +
"left:0;' " +
Expand All @@ -388,37 +403,55 @@
"'>" +
"<img width='100%' height='100%' " +
"src='{{ static_url("ventil_inactive.png") }}'></img>" +
"</div>";
} else if (vartype == "integer-to-string") {
console.log("Integer2String");
html_text = "<div " +
"style='position: absolute; " +
"top:0; " +
"left:0;' " +
"class='varbox box_highlight' " +
"id='" + varname +
"' data-type='" + vartype +
"' data-dict='" + unit_text +
"' data-cond='" + data_condition +
"'>" +
"<p>" +
"<span style='color: " + title_color + ";" +
"font-size:" + title_size + "px; " +
"font-weight: " + title_style + ";' " +
"class='title'>" + title_text +
" </span><br />" +
"<span style='color: " + unit_color + "; " +
"font-size:" + unit_size + "px; " +
"font-weight: " + unit_style + ";' " +
"class='varval'>??? </span>" +
"</p>" +
"</div>";
$('#elem_unit_text').removeClass('glowing_border');
} else{
console.log("NoInput");
html_text = "";
$('#elem_unit_text').addClass('glowing_border');
}

} else if (vartype == "integer-to-string") {
console.log("Integer2String");

if (unit_text.length > 0) {
html_text = "<div " +
"style='position: absolute; " +
"top:0; " +
"left:0;' " +
"class='varbox box_highlight' " +
"id='" + varname +
"' data-type='" + vartype +
"' data-dict='" + unit_text +
"' data-cond='" + data_condition +
"'>" +
"<p>" +
"<span style='color: " + title_color + ";" +
"font-size:" + title_size + "px; " +
"font-weight: " + title_style + ";' " +
"class='title'>" + title_text +
" </span><br />" +
"<span style='color: " + unit_color + "; " +
"font-size:" + unit_size + "px; " +
"font-weight: " + unit_style + ";' " +
"class='varval'>??? </span>" +
"</p>" +
"</div>";
$('#elem_unit_text').removeClass('glowing_border');
} else {
console.log("NoInput");
html_text = "";
$('#elem_unit_text').addClass('glowing_border');
}
}

console.log("Adding element");
console.log(html_text);
$( "body" ).append(html_text);
$("#"+varname).draggable();
$("#"+varname).resizable();
if (html_text.length > 0) {
$( "body" ).append(html_text);
$("#"+varname).draggable();
$("#"+varname).resizable();
}
}
}
function myremove() {
Expand Down Expand Up @@ -526,7 +559,7 @@
// header["size"] = $(".title", "#"+key).css("font-size");
// header["weight"] = $(".title", "#"+key).css("font-weight");
// tmp["header"] = header;
} else if ( $("#"+key).attr("data-type") == "ventil" ) {
} else if ( $("#"+key).attr("data-type") == "valve" ) {
if ((varname == key) && (varattr == "normal")) {
var unit_text = $("#elem_unit_text").val();
unit_text = unit_text.trim();
Expand Down Expand Up @@ -662,7 +695,7 @@
// header["size"] = $(".title", "#"+key).css("font-size");
// header["weight"] = $(".title", "#"+key).css("font-weight");
// tmp["header"] = header;
} else if ( $("#"+key).attr("data-type") == "ventil" ) {
} else if ( $("#"+key).attr("data-type") == "valve" ) {
if (varname == key) {
var unit_text = $("#elem_unit_text").val();
unit_text = unit_text.trim();
Expand Down Expand Up @@ -852,7 +885,10 @@
$("#elem_formula").val("");
$("#virtual_id_text").val("");
$('#elem_exponential').prop('checked', false);

$('#elem_unit_text').removeClass('glowing_border');
$('#elem_title_text').removeClass('glowing_border');
$('#elem_formula').removeClass('glowing_border');

if (vartype == "header") {
$("#elem_title_text").val($("#"+varname + " .title").text());
$("#elem_title_size").val(parseInt($("#"+varname + " .title").css("font-size")));
Expand Down Expand Up @@ -948,7 +984,7 @@
if ($("#"+varname).attr("data-formula") ) {
$("#elem_formula").val($("#"+varname).attr("data-formula"));
}
} else if (vartype == "ventil") {
} else if (vartype == "valve") {
$("#elem_unit_text").val("{'on':"+$("#"+varname).attr("data-on") + ",'off':"+$("#"+varname).attr("data-off")+"}" );
} else if (vartype == "integer-to-string") {
$("#elem_title_text").val($("#"+varname + " .title").text().trim());
Expand Down
Binary file added static/HIU_background.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,11 @@ span,
border-color: red;
}

.glowing_border {
border: 2px solid #FF0000;
border-radius: 7px;
}

[tooltip]:before {
/* needed - do not touch */
content: attr(tooltip);
Expand Down

0 comments on commit 3e2864e

Please sign in to comment.