Today I'll present you a widget that considers 2 depths: idle (submode) and fuel consumption screen (full mode). We'll better understand the index.html with two different screens (two div structure).
This widget is responsible for a simple fuel consumption control (considering KM and Liters). I'm not worried about images, ok? We are here today to better understand screens changes, html, css and js relationship.
Let's get it started...
html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
<!-- link to CSS file -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- link to JS file -->
<script type=text/javascript src=js/callBack.js></script>
</head>
<!-- first js call - used to initialize some
vars, set initial screen, etc... -->
<body onload="doInit();">
<!-- first depth screen - submode -->
<div id="idle" class="idle" style="display:none">
<div id="txtFuelControl" class="txtFuelControl">Fuel
Consumption</div> </div>
<!-- second depth screen - full mode -->
<div id="fuelControlScreen" style="display:none">
<!-- label -->
<div id="km_inputTitle" class="km_inputTitle">Km</div>
<!-- label -->
<div id="l_inputTitle" class= "l_inputTitle">L</div>
<!-- inputs - created on js -->
<div id="km_inputValueJS"></div>
<!-- inputs - created on js -->
<div id="l_inputValueJS"></div>
<!-- result - will be presented by js -->
<div id="result_FuelControl"></div>
<!-- back button -->
<div id="btnBack" class="btnBack">Back</div>
<!-- result button -->
<div id="btnConfirm" class="btnConfirm">Fuel Consumption</div>
</div>
</body>
</html>
NOTE: I'm using DIV structure, that has any problem to widgets development. I think this way it's easier than modifying each HTML elements in CSS. You can try both.
css>
@CHARSET "UTF-8";
body{margin:0; padding:0;}
.idle{
position:absolute;
width: 180px;
height: 131px;
background:black;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:white;
font-size:11pt;
font-weight:bold;
border: 1px solid white;
}
#fuelControlScreen{
position:absolute;
top:0px;
width: 239px;
height: 300px;
background:black;
}
.km_inputTitle {
position:absolute;
top:80px;
left:5px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:white;
font-size:11pt;
font-weight:bold;
}
.km_inputValue {
position:absolute;
top:0px;
left:0px;
}
#km_inputValueJS {
position:absolute;
top:80px;
left:135px;
}
.l_inputTitle {
position:absolute;
top:40px;
left:5px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:white;
font-size:11pt;
font-weight:bold;
}
.l_inputValue {
position:absolute;
top:0px;
left:0px;
}
#l_inputValueJS {
position:absolute;
top:40px;
left:135px;
}
.btnBack{
position:absolute;
top:270px;
left:180px;
width: 40px;
height: 30px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:white;
font-size:11pt;
font-weight:bold;
}
.btnConfirm{
position:absolute;
top:270px;
left:20px;
width: 160px;
height: 30px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
color:white;
font-size:11pt;
font-weight:bold;
}
#result_FuelControl{
position:absolute;
top:195px;
left:90px;
width: 150px;
color: white;
font-size:11pt;
font-weight:bold;
}
HR{
position:absolute;
top: 35px;
left: 30px;
color: black;
width:180px;
border: 3px solid #000;
}
.txtFuelControl {
position:absolute;
top:50px;
left:20px;
width: 160px;
height: 25px;
font-size: 11pt;
}
js>
//init
doInit=function(){
getIdleScreen();
gId("txtFuelControl").onclick=function(){
getFuelControlScreen();
};
gId("btnBack").onclick=function(){
getIdleScreen();
return;
};
gId("btnConfirm").onclick=function(){
getFuelControlResult();
return;
};
};
//shortcut
function gId(id) {
return document.getElementById(id);
};
//shows idle screen and hide fuelControlScreen
function getIdleScreen(){
gId("idle").style.display = "block";
gId("fuelControlScreen").style.display = "none";
}
//shows fuelControlScreen screen and hide idle
function getFuelControlScreen(){
try {
gId("km_inputValueJS").innerHTML = "<input type=text
id=\"km_inputValue\"
class=\"km_inputValue\" maxlength=\"5\" size=\"10\"
onclick=\"clearInputKM()\"></input>";
gId("l_inputValueJS").innerHTML = "<input type=text
id=\"l_inputValue\"
class=\"l_inputValue\" maxlength=\"5\" size=\"10\"
onclick=\"clearInputL()\"></input>";
} catch (e) {
alert(e);
}
gId("idle").style.display = "none";
gId("fuelControlScreen").style.display = "block";
}
//check comma use
function checaVirgula(valor){
return valor = valor.replace(",",".");
}
function getFuelControlResult(){
var km;
var litros;
var consumo = 0;
km = gId("km_inputValue").value;
litros = gId("l_inputValue").value;
km = checaVirgula(km);
litros = checaVirgula(litros);
if(isNaN(parseFloat(km)) || isNaN(parseFloat(litros)) ||
parseFloat(km) == 0 || parseFloat(litros) == 0 ||
parseFloat(km) < 0 || parseFloat(litros) < 0){
alert("Invalid data!");
clearFields();
return;
}
consumo = parseFloat(km);
consumo /= parseFloat(litros);
gId("result_FuelControl").innerHTML = consumo.toFixed(2)
+ " Km/L";
}
function clearInputKM(){
if(gId("result_FuelControl").innerHTML != ""){
gId("result_FuelControl").innerHTML = "";
}
}
function clearInputL(){
if(gId("result_FuelControl").innerHTML != ""){
gId("result_FuelControl").innerHTML = "";
}
}
function clearFields(){
gId("km_inputValue").value = "";
gId("l_inputValue").value = "";
gId("result_FuelControl").innerHTML = " " ;
}
The widget:
You can try this code. Remember... Package > Run as... > Widget
Have a nice day!
Thanks for your visit! :)
Next post: How to debug your code
Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo
Nenhum comentário:
Postar um comentário