Added keyboard events
This commit is contained in:
dbroqua
parent
d925c99081
commit
21153e21d6
1 changed files with 182 additions and 152 deletions
334
index.html
334
index.html
|
|
@ -2,170 +2,200 @@
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||||
<title>Free Telec</title>
|
<title>Free Telec</title>
|
||||||
|
|
||||||
<!-- Bootstrap -->
|
<!-- Bootstrap -->
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||||
|
|
||||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
.btn-group .col-md-4,
|
.btn-group .col-md-4,
|
||||||
.btn-group .col-md-12 {
|
.btn-group .col-md-12 {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.freeHome {
|
.freeHome {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Free Telec <small>v0.1</small></h1>
|
<h1>Free Telec <small>v0.1</small></h1>
|
||||||
</header>
|
</header>
|
||||||
``
|
``
|
||||||
<section>
|
<section>
|
||||||
<div class="row col-xs-12">
|
<div class="row col-xs-12">
|
||||||
<div class="col-md-4 col-xs-12 btn-group">
|
<div class="col-md-4 col-xs-12 btn-group">
|
||||||
<div class="col-md-4 col-xs-4">
|
<div class="col-md-4 col-xs-4">
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="1">1</div>
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="1">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 col-xs-4">
|
<div class="col-md-4 col-xs-4">
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="2">2</div>
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="2">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 col-xs-4">
|
<div class="col-md-4 col-xs-4">
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="3">3</div>
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="3">3</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="4">4</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="5">5</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="6">6</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="7">7</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="8">8</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="9">9</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="tv">AV</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="0">0</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="power"><span class="fa fa-power-off" aria-hidden="true"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-12 btn-group">
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-danger btn-lg" data-key="red"><span class="fa fa-undo" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="up"><span class="fa fa-chevron-up" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-info btn-lg" data-key="blue"><span class="fa fa-search" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="left"><span class="fa fa-chevron-left" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="ok">OK</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="right"><span class="fa fa-chevron-right" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-success btn-lg" data-key="green"><span class="fa fa-align-justify" aria-hidden="true"></span> M</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="down"><span class="fa fa-chevron-down" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-warning btn-lg" data-key="yellow">I <span class="fa fa-align-justify" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg btn-free" data-key="home"><img src="img/free.png" class="freeHome" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-12 btn-group">
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="vol_inc"><span class="fa fa-plus" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="mute"><span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="prgm_inc"><span class="fa fa-plus" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg">VOL</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4"></div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg">PROG</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="vol_dec"><span class="fa fa-minus" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-danger btn-lg" data-key="rec"><span class="glyphicon glyphicon-record" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="prgm_dec"><span class="fa fa-minus" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="bwd"><span class="fa fa-backward" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="play"><span class="fa fa-play" aria-hidden="true"></span><span class="fa fa-pause" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-xs-4">
|
|
||||||
<div class="col-xs-12 btn btn-default btn-lg" data-key="fwd"><span class="fa fa-forward" aria-hidden="true"></span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
<div class="col-md-4 col-xs-4">
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="4">4</div>
|
||||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
</div>
|
||||||
<script src="./conf.js" text="text/JavaScript"></script>
|
<div class="col-md-4 col-xs-4">
|
||||||
<script type="text/JavaScript">
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="5">5</div>
|
||||||
$(function() { $('.btn').on('click',function(){ $.get("http://hd1.freebox.fr/pub/remote_control?code="+codeTelec+"&key="+$(this).data('key')); }); });
|
</div>
|
||||||
</script>
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="6">6</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="7">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="8">8</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="9">9</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="tv">AV</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="0">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="power"><span class="fa fa-power-off" aria-hidden="true"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-12 btn-group">
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-danger btn-lg" data-key="red"><span class="fa fa-undo" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="up"><span class="fa fa-chevron-up" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-info btn-lg" data-key="blue"><span class="fa fa-search" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="left"><span class="fa fa-chevron-left" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="ok">OK</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="right"><span class="fa fa-chevron-right" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-success btn-lg" data-key="green"><span class="fa fa-align-justify" aria-hidden="true"></span> M</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="down"><span class="fa fa-chevron-down" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-warning btn-lg" data-key="yellow">I <span class="fa fa-align-justify" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg btn-free" data-key="home"><img src="img/free.png" class="freeHome" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-12 btn-group">
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="vol_inc"><span class="fa fa-plus" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="mute"><span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="prgm_inc"><span class="fa fa-plus" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg">VOL</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4"></div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg">PROG</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="vol_dec"><span class="fa fa-minus" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-danger btn-lg" data-key="rec"><span class="glyphicon glyphicon-record" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="prgm_dec"><span class="fa fa-minus" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="bwd"><span class="fa fa-backward" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="play"><span class="fa fa-play" aria-hidden="true"></span><span class="fa fa-pause" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-xs-4">
|
||||||
|
<div class="col-xs-12 btn btn-default btn-lg" data-key="fwd"><span class="fa fa-forward" aria-hidden="true"></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||||
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||||
|
<script src="./conf.js" text="text/JavaScript"></script>
|
||||||
|
<script type="text/JavaScript">
|
||||||
|
$(function() {
|
||||||
|
$('.btn').on('click',function(){
|
||||||
|
callApi($(this).data('key'));
|
||||||
|
});
|
||||||
|
$('body').on('keypress', function(e){
|
||||||
|
const codes = {
|
||||||
|
13: 'ok',
|
||||||
|
38: 'up',
|
||||||
|
40: 'down',
|
||||||
|
37: 'left',
|
||||||
|
39: 'right',
|
||||||
|
109: 'green', //m -> Menu
|
||||||
|
105: 'yellow', //i -> Info
|
||||||
|
115: 'blue', //s -> Search
|
||||||
|
97: 'tv', //a -> A/V
|
||||||
|
49: 1,
|
||||||
|
50: 2,
|
||||||
|
51: 3,
|
||||||
|
52: 4,
|
||||||
|
53: 5,
|
||||||
|
54: 6,
|
||||||
|
55: 7,
|
||||||
|
56: 8,
|
||||||
|
57: 9,
|
||||||
|
48: 0
|
||||||
|
};
|
||||||
|
let code = (e.keyCode ? e.keyCode : e.which);
|
||||||
|
|
||||||
|
callApi(codes[code]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue