We developing BMI(bode mass index).So we used jquery-gauge plugin in our project, we getting BMI score and Perfect UI. But we are facing one issue that is when BMI page is navigating in that we want to show Zero position of the BMI meter, that is we are enable to getting that. please any one help Me how to resolve this issue.
We are facing this Problem
We want like this
$(document).on('click', '#btnBmiCaltrSrvc', function() {
navNext('bmicaltr');
});
function calculateBMI() {
event.preventDefault();
page = "bmicaltr";
currentView = page;
showErrorMessages()
clearErrorMsg();
var errorID = "errIdBmiCaltr";
var txtAgeBmiCaltrID = "txtAgeBmiCaltr";
var txtHgtBmiCaltrID = "txtHgtBmiCaltr";
var txtWgtBmiCaltrID = "txtWgtBmiCaltr";
var agetVal = $("#" + txtAgeBmiCaltrID).val();
var heightVal = $("#" + txtHgtBmiCaltrID).val();
var weightVal = $("#" + txtWgtBmiCaltrID).val();
if (!validateAge(txtAgeBmiCaltrID, errorID)) {
$("#" + txtAgeBmiCaltrID).focus();
return false;
} else if (!validateHeight(txtHgtBmiCaltrID, errorID)) {
$("#" + txtHgtBmiCaltrID).focus();
return false;
} else if (!validateWeight(txtWgtBmiCaltrID, errorID)) {
$("#" + txtWgtBmiCaltrID).focus();
return false;
}
else {
BMIScore = parseInt((weightVal)
/ ((heightVal / 100) * (heightVal / 100))); // kg/m2
BMICalc(BMIScore);
if ((BMIScore >= 0) && (BMIScore <= 18.5)) {
$("#BMIScore").css("color", "#0092B9");
$("#lblScrBmiCaltr").css("color", "#0092B9");
}
else if ((BMIScore >= 18.5) && (BMIScore <= 24.9)) {
$("#BMIScore").css("color", "#86AD00");
$("#lblScrBmiCaltr").css("color", "#86AD00");
}
else if ((BMIScore >= 25) && (BMIScore <= 29.9)) {
$("#BMIScore").css("color", "#F2B705");
$("#lblScrBmiCaltr").css("color", "#F2B705");
}
else if (BMIScore >= 30) {
$("#BMIScore").css("color", "#D72931");
$("#lblScrBmiCaltr").css("color", "#D72931");
}
if (BMIScore >= 100) {
$("#BMIScore").html(BMIScore); //
$("#meterHghRang").text(Labels.lblScrBmiErrorCaltr);
}
else {
$("#BMIScore").html(BMIScore);
$("#meterHghRang").text("");
}
return false;
}
}
function BMICalc(val) {
Number.isNaN(val)
if (val != null && val != "" && Number.isNaN(val) == false) {
new Gauge($('.gauge'), {
value : val
});
} else {
var val = 0;
new Gauge($('.gauge'), {
value : val
});
}
if (val >= 100) {
var val = 100;
new Gauge($('.gauge'), {
value : val
});
}
}
var gauge = new Gauge($('.gauge'), {
value : 0
});.text-center {
margin-top: -20%;
}
.demo2 {
position: relative;
width: 40vw;
height: 40vw;
box-sizing: border-box;
margin-top: 37px;
margin-left: 20px;
margin-right: 20px
}
#BMIScore {
color: #0092B9;
}
#lblScrBmiCaltr {
color: #0092B9;
}
/* ARUL */
/* Base blocks */
.b-gauge {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
font-family: Arial, sans-serif
}
.b-gauge__block {
position: absolute;
overflow: visible;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Color circles */
.b-gauge__paths {
width: 100%;
height: 100%;
}
.b-gauge__path {
}
/* Arrow */
.b-gauge__arrow {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.b-gauge__arrow-circle {
}
/* Labels */
.b-gauge__labels {
}
.b-gauge__label {
position: absolute
}
/* Marks */
.b-gauge__marks {
}
.b-gauge__mark {
position: absolute;
background: #ccc;
width: 1px;
height: 4px;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>QLM</title>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<link rel="stylesheet" type="text/css" id="loadcss" />
<link rel="stylesheet" type="text/css" id="loadcss1" />
<script type="text/javascript"
src="lib/jquery-mobile/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript"
src="lib/jquery-mobile-router/js/jquery.mobile.router.min.js"></script>
<script type="text/javascript"
src="lib/jquery-mobile/js/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet"
href="lib/jquery-mobile/css/jquery.mobile-1.4.0.min.css" />
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2VMMoklmxRaYy1NvJ1Et8PjF2h4mcZEM"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepickerr.css">
<link rel="stylesheet" type="text/css" href="css/datepickertheme.css">
<link rel="stylesheet" type="text/css" href="css/wickedpicker.css">
<script src="js/datepicker.js"></script>
<script src="js/wickedpicker.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="bmicaltr">
<div id="loadbmicaltr">
<div data-role="header" data-position="" class="top-panel">
<a onClick="navBack()" href="#" class="backbtn hdrIcn backIcn back"><img
src="img/back.png" width="26%" id="" alt=""></a>
<h1 id="lblHdrBmiCaltr"></h1>
</div>
<div role="main" class="ui-content contentDiv" align="center">
<p id="errIdBmiCaltr" class="error"></p>
<input type="number" class="input-box clearTxtFld data"
id="txtAgeBmiCaltr" placeholder=""> <input type="number"
class="input-box clearTxtFld data" id="txtHgtBmiCaltr" placeholder="">
<input type="number" class="input-box clearTxtFld data"
id="txtWgtBmiCaltr" placeholder="">
<button class="view-table" id="btnShwBmiCaltr" onClick="calculateBMI()"
style="text-align: center !important"></button>
<div class="gauge demo2"></div>
<table class="text-center">
<tr style="margin-top: 15px;">
<td align="right" id="lblScrBmiCaltr" style="font-weight: bold"></td>
<td id="BMIScore" align="left" style="font-weight: bold"></td>
</tr>
</table>
<p id="meterHghRang" style="color: #525252; font-weight: bold"
align="center"></p>
<div class="text-center" style="margin-top: 30px; width: 100%;">
<h4 class="purple" id="lblUderWgtBmiCaltr" style="color: #0092B9"></h4>
<h5 class="skyblue" id="lblNrmlBmiCaltr" style="color: #86AD00"></h5>
<h6 class="blue" id="lblOvrWgtBmiCaltr" style="color: #F2B705"></h6>
<h6 class="blue" id="lblObeseBmiCaltr" style="color: #D72931"></h6>
</div>
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/jquery-gauge.min.js"></script>>
<script src="js/bmicaltr.js"></script>
</body>
</html>jquery-gauge.min.js
var Gauge = function(t, s) {
t && t instanceof jQuery && this.init(t, s)};
$(document).on("pagebeforeshow","#bmicaltr",function(){
clearFlds();
$("#BMIScore").html("");
$("#lblHdrBmiCaltr").text(Labels.btnBmiCaltrSrvc);
$("#txtAgeBmiCaltr").attr("placeholder",Labels.plcHldAgeBmiCaltr);
$("#txtHgtBmiCaltr").attr("placeholder",Labels.plcHldHgtBmiCaltr);
$("#txtWgtBmiCaltr").attr("placeholder",Labels.plcHldWgtBmiCaltr);
$("#btnShwBmiCaltr").text(Labels.btnShwBmiCaltr);
$("#lblScrBmiCaltr").text(Labels.lblScrBmiCaltr);
$("#lblUderWgtBmiCaltr").text(Labels.lblUderWgtBmiCaltr);
$("#lblNrmlBmiCaltr").text(Labels.lblNrmlBmiCaltr);
$("#lblOvrWgtBmiCaltr").text(Labels.lblOvrWgtBmiCaltr);
$("#lblObeseBmiCaltr").text(Labels.lblObeseBmiCaltr);
Gauge.defaults = {
template : [
'<div class="b-gauge" style="display:block !important">',
'<svg class="b-gauge__paths b-gauge__block" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>',
'<div class="b-gauge__marks b-gauge__block"></div>',
'<div class="b-gauge__labels b-gauge__block"></div>',
"</div>" ].join(""),
values : {
0 : '',
10: '',
20: '',
30: '',
40: '',
50: '',
60: '',
70: '',
80: '',
90: '',
100: ''
},
colors : {
0 : '#0092B9',
19: '#86AD00',
25: '#F2B705',
30: '#D72931'
},
angles: [
180,
360
],
lineWidth :5 ,
arrowWidth : 8,
arrowColor : "#525252",
inset : true,
value : 0
},
Gauge.prototype = {
constructor : Gauge,
gaps : [ [ 20, 12 ], [ 20, 8 ] ],
init : function(t, s) {
var i = this;
this.options = $.extend({}, Gauge.defaults, s),
this.$element = $(t), this.draw(), $(window).on(
"resize", function() {
i.draw()
})
},
draw : function() {
this.$element.html(this.options.template),
this.$paths = this.$element.find(".b-gauge__paths"),
this.$labels = this.$element.find(".b-gauge__labels"),
this.$marks = this.$element.find(".b-gauge__marks"),
this.getSizes(), this.setGaps(), this.createPaths(),
this.createArrow(), this.createValues(), this
.createMarks(), this
.setValue(this.options.value)
},
getSizes : function() {
var t = this.options.inset === !1;
this.options.pathsWidth = t ? this.$paths.innerWidth() - 2
* this.gaps[0][0] : this.$paths.innerWidth(),
this.options.pathsHeight = t ? this.$paths
.innerHeight()
- 2 * this.gaps[0][0] : this.$paths
.innerHeight(),
this.options.labelsWidth = t ? this.$labels
.innerWidth() : this.$labels.innerWidth() - 2
* this.gaps[0][0],
this.options.labelsHeight = t ? this.$labels
.innerHeight() : this.$labels.innerHeight() - 2
* this.gaps[0][0],
this.options.marksWidth = t ? this.$marks.innerWidth()
- 2 * this.gaps[0][1] : this.$marks
.innerWidth()
- 2 * this.gaps[1][1],
this.options.marksHeight = t ? this.$marks
.innerHeight()
- 2 * this.gaps[0][1] : this.$marks
.innerWidth()
- 2 * this.gaps[1][1]
},
setGaps : function() {
var t = this.options.inset === !1;
this.$paths.css({
left : t ? this.gaps[0][0] : 0,
top : t ? this.gaps[0][0] : 0
}), this.$labels.css({
left : t ? 0 : this.gaps[0][0],
top : t ? 0 : this.gaps[0][0]
}), this.$marks.css({
left : t ? this.gaps[0][1] : this.gaps[1][1],
top : t ? this.gaps[0][1] : this.gaps[1][1]
})
},
walkPercents : function(t, s) {
var i, e = this, a = function(t, s) {
return t - s
}, h = Object.keys(t).map(parseFloat).sort(a);
$.each(h, function(t, a) {
i = e.getPercentAngle(a), s.call(e, a, i)
})
},
getPercentAngle : function(t) {
return .01 * t
* (this.options.angles[1] - this.options.angles[0])
+ this.options.angles[0]
},
getCoordinate : function(t, s, i) {
return t = t * Math.PI / 180, [ Math.cos(t) * s / 2 + s / 2,
Math.sin(t) * i / 2 + i / 2 ]
},
createPaths : function() {
var t, s = this, i = this.options.angles[0];
this.$paths.html(""), this.walkPercents(this.options.colors,
function(e, a) {
t && s.createPath(i, a, t),
t = this.options.colors[e], i = a
});
var e = this.options.angles[1];
s.createPath(i, e, t)
},
createPath : function(t, s, i) {
var e = this.getCoordinate(t, this.options.pathsWidth,
this.options.pathsHeight), a = this.getCoordinate(s,
this.options.pathsWidth, this.options.pathsHeight), h = "M "
+ e
+ " A "
+ this.options.pathsWidth
/ 2
+ " "
+ this.options.pathsHeight
/ 2
+ " 0 "
+ (Math.abs(s - t) > 180 ? 1 : 0) + " 1 " + a;
this.appendSVG("path", {
"class" : "b-gauge__path",
d : h,
stroke : i,
"stroke-width" : this.options.lineWidth,
fill : "none"
})
},
createArrow : function() {
this.appendSVG("circle", {
"class" : "b-gauge__center",
cx : this.options.pathsWidth / 2,
cy : this.options.pathsHeight / 2,
r : this.options.arrowWidth,
fill : this.options.arrowColor
});
var t = [
this.options.pathsWidth / 2 - this.options.arrowWidth
/ 2 + "," + this.options.pathsHeight / 2,
this.options.pathsWidth / 2 + this.options.arrowWidth
/ 2 + "," + this.options.pathsHeight / 2,
this.options.pathsWidth / 2 + ",0" ].join(" ");
this.appendSVG("polyline", {
"class" : "b-gauge__arrow",
points : t,
fill : this.options.arrowColor
})
},
appendSVG : function(t, s) {
var i = document.createElementNS("http://www.w3.org/2000/svg",
t);
$.each(s, function(t, s) {
i.setAttribute(t, s)
}), this.$paths.append(i)
},
setValue : function(t) {
this.options.value = t;
var s = this.getPercentAngle(t);
this.$element.find(".b-gauge__arrow").css({
transform : "rotate(" + (s + 90) + "deg)"
})
},
createValues : function() {
this.walkPercents(this.options.values, function(t, s) {
var i = this.getCoordinate(s, this.options.labelsWidth,
this.options.labelsHeight), e = $("<div>")
.addClass("b-gauge__label").text(
this.options.values[t]);
this.$labels.append(e), e.css({
left : i[0] - e.width() / 2,
top : i[1] - e.height() / 2
})
})
},
createMarks : function() {
this.walkPercents(this.options.values, function(t, s) {
var i = this.getCoordinate(s, this.options.marksWidth,
this.options.marksHeight), e = $("<div>").addClass(
"b-gauge__mark");
this.$marks.append(e), e.css({
transform : "rotate(" + (s + 90) + "deg)",
left : i[0] - e.width() / 2,
top : i[1] - e.height() / 2
})
})
}
},
$.fn.gauge = function(t) {
return this
.each(function() {
var s = $(this), i = s.data("plugin-gauge"), e = "object" == typeof t
&& t;
i || s.data("plugin-gauge", i = new Gauge($(this), e)),
"string" == typeof t && i[t]()
})
}, $.fn.gauge.Constructor = Gauge;});
Aucun commentaire:
Enregistrer un commentaire