Skip to content

Instantly share code, notes, and snippets.

@RuanAragao

RuanAragao/index.html

Created March 31, 2015 17:12
Show Gist options
  • Save RuanAragao/f5d066dd2cf03673c2df to your computer and use it in GitHub Desktop.
Save RuanAragao/f5d066dd2cf03673c2df to your computer and use it in GitHub Desktop.
Download ZIP
Seven Segments // source http://jsbin.com/qetomu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>Seven Segments</title>
<style id="jsbin-css">
#output {
width: 200px;
height: 100px;
}
#display {
width: 200px;
height: 400px;
background: #e3e3e3;
position: relative;
}
#seg-1,
#seg-2,
#seg-3,
#seg-4,
#seg-5,
#seg-6,
#seg-7 {
width: 140px;
height: 15px;
position: absolute;
background-color: rgb(100, 0, 0);
}
#seg-1,
#seg-4,
#seg-7 {
margin: 0 30px;
}
#seg-2,
#seg-3,
#seg-5,
#seg-6 {
transform: rotate(90deg);
}
#seg-1 {
top: 20px;
}
#seg-2 {
top: 106px;
left: -50px;
}
#seg-3 {
top: 106px;
left: 110px;
}
#seg-4 {
top: 192.5px;
}
#seg-5 {
top: 280px;
left: -50px;
}
#seg-6 {
top: 280px;
left: 110px;
}
#seg-7 {
bottom: 20px;
}
</style>
</head>
<body>
<div id="display">
<div id="seg-1"></div>
<div id="seg-2"></div>
<div id="seg-3"></div>
<div id="seg-4"></div>
<div id="seg-5"></div>
<div id="seg-6"></div>
<div id="seg-7"></div>
</div>
<hr>
<textarea id="output"></textarea>
<script id="jsbin-javascript">
// Falta terminar geração de código e documentar
var red_on = 'rgb(255, 0, 0)'; // Cor do LED ligado
var red_off = 'rgb(100, 0, 0)'; // Cor do LED desligado
var seg = []; // Array com lista de segmentos
// controla o acendimento dos segmentos com binario
// Ex: "setBin(1,1,1,1,1,1,1)" irá exibir o algarismo "8"
function setBin(seg) {
for(var s = 0; s <= 6; s++) {
var n_id = s + 1;
if(seg[s]) {
// ligar led
$('#seg-' + n_id).css('background-color', red_on);
console.log('#seg-' + s + ' - yes');
}
if(!seg[s]) {
// desligar led
$('#seg-' + n_id).css('background-color', red_off);
console.log('#seg-' + s + ' - no');
}
console.log('Seg: ' + seg[s]);
}
console.log('end if');
}
// função para enviar o algarismo decimal que deve ser exibido
// Ex: "setNun(8)" irá chamar a função "setBin([1,1,1,1,1,1,1])"
function setNun(val) {
switch(val) {
case 1:
setBin([0,0,1,0,0,1,0]);
break;
case 2:
setBin([1,0,1,1,1,0,1]);
break;
case 3:
setBin([1,0,1,1,0,1,1]);
break;
case 4:
setBin([0,1,1,1,0,1,0]);
break;
case 5:
setBin([1,1,0,1,0,1,1]);
break;
case 6:
setBin([1,1,0,1,1,1,1]);
break;
case 7:
setBin([1,0,1,0,0,1,0]);
break;
case 8:
setBin([1,1,1,1,1,1,1]);
break;
case 9:
setBin([1,1,1,1,0,1,1]);
break;
case 0:
setBin([1,1,1,0,1,1,1]);
break;
}
}
$(document).ready(function() {
var red_on = 'rgb(255, 0, 0)';
var red_off = 'rgb(100, 0, 0)';
// array com lista de leds
var out = ['0', '0', '0', '0', '0', '0', '0'];
$('#display div').click(function() {
var led_clicked = $(this).attr('id');
if($(this).css('background-color') != red_on) {
console.log(red_on);
$(this).css('background-color', red_on);
out.push(led_clicked);
return 0;
}
if($(this).css('background-color') == red_on){
console.log(red_off);
$(this).css('background-color', red_off);
out = jQuery.grep(out, function(value) {
return value != led_clicked;
});
return 0;
}
});
$('#output').text(out);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"><\/script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"><\/script>
<meta charset="utf-8">
<title>Seven Segments</title>
</head>
<body>
<div id="display">
<div id="seg-1"></div>
<div id="seg-2"></div>
<div id="seg-3"></div>
<div id="seg-4"></div>
<div id="seg-5"></div>
<div id="seg-6"></div>
<div id="seg-7"></div>
</div>
<hr>
<textarea id="output"></textarea>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#output {
width: 200px;
height: 100px;
}
#display {
width: 200px;
height: 400px;
background: #e3e3e3;
position: relative;
}
#seg-1,
#seg-2,
#seg-3,
#seg-4,
#seg-5,
#seg-6,
#seg-7 {
width: 140px;
height: 15px;
position: absolute;
background-color: rgb(100, 0, 0);
}
#seg-1,
#seg-4,
#seg-7 {
margin: 0 30px;
}
#seg-2,
#seg-3,
#seg-5,
#seg-6 {
transform: rotate(90deg);
}
#seg-1 {
top: 20px;
}
#seg-2 {
top: 106px;
left: -50px;
}
#seg-3 {
top: 106px;
left: 110px;
}
#seg-4 {
top: 192.5px;
}
#seg-5 {
top: 280px;
left: -50px;
}
#seg-6 {
top: 280px;
left: 110px;
}
#seg-7 {
bottom: 20px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
// Falta terminar geração de código e documentar
var red_on = 'rgb(255, 0, 0)'; // Cor do LED ligado
var red_off = 'rgb(100, 0, 0)'; // Cor do LED desligado
var seg = []; // Array com lista de segmentos
// controla o acendimento dos segmentos com binario
// Ex: "setBin(1,1,1,1,1,1,1)" irá exibir o algarismo "8"
function setBin(seg) {
for(var s = 0; s <= 6; s++) {
var n_id = s + 1;
if(seg[s]) {
// ligar led
$('#seg-' + n_id).css('background-color', red_on);
console.log('#seg-' + s + ' - yes');
}
if(!seg[s]) {
// desligar led
$('#seg-' + n_id).css('background-color', red_off);
console.log('#seg-' + s + ' - no');
}
console.log('Seg: ' + seg[s]);
}
console.log('end if');
}
// função para enviar o algarismo decimal que deve ser exibido
// Ex: "setNun(8)" irá chamar a função "setBin([1,1,1,1,1,1,1])"
function setNun(val) {
switch(val) {
case 1:
setBin([0,0,1,0,0,1,0]);
break;
case 2:
setBin([1,0,1,1,1,0,1]);
break;
case 3:
setBin([1,0,1,1,0,1,1]);
break;
case 4:
setBin([0,1,1,1,0,1,0]);
break;
case 5:
setBin([1,1,0,1,0,1,1]);
break;
case 6:
setBin([1,1,0,1,1,1,1]);
break;
case 7:
setBin([1,0,1,0,0,1,0]);
break;
case 8:
setBin([1,1,1,1,1,1,1]);
break;
case 9:
setBin([1,1,1,1,0,1,1]);
break;
case 0:
setBin([1,1,1,0,1,1,1]);
break;
}
}
$(document).ready(function() {
var red_on = 'rgb(255, 0, 0)';
var red_off = 'rgb(100, 0, 0)';
// array com lista de leds
var out = ['0', '0', '0', '0', '0', '0', '0'];
$('#display div').click(function() {
var led_clicked = $(this).attr('id');
if($(this).css('background-color') != red_on) {
console.log(red_on);
$(this).css('background-color', red_on);
out.push(led_clicked);
return 0;
}
if($(this).css('background-color') == red_on){
console.log(red_off);
$(this).css('background-color', red_off);
out = jQuery.grep(out, function(value) {
return value != led_clicked;
});
return 0;
}
});
$('#output').text(out);
});</script></body>
</html>
Raw
jsbin.qetomu.css
#output {
width: 200px;
height: 100px;
}
#display {
width: 200px;
height: 400px;
background: #e3e3e3;
position: relative;
}
#seg-1,
#seg-2,
#seg-3,
#seg-4,
#seg-5,
#seg-6,
#seg-7 {
width: 140px;
height: 15px;
position: absolute;
background-color: rgb(100, 0, 0);
}
#seg-1,
#seg-4,
#seg-7 {
margin: 0 30px;
}
#seg-2,
#seg-3,
#seg-5,
#seg-6 {
transform: rotate(90deg);
}
#seg-1 {
top: 20px;
}
#seg-2 {
top: 106px;
left: -50px;
}
#seg-3 {
top: 106px;
left: 110px;
}
#seg-4 {
top: 192.5px;
}
#seg-5 {
top: 280px;
left: -50px;
}
#seg-6 {
top: 280px;
left: 110px;
}
#seg-7 {
bottom: 20px;
}
Raw
jsbin.qetomu.js
// Falta terminar geração de código e documentar
var red_on = 'rgb(255, 0, 0)'; // Cor do LED ligado
var red_off = 'rgb(100, 0, 0)'; // Cor do LED desligado
var seg = []; // Array com lista de segmentos
// controla o acendimento dos segmentos com binario
// Ex: "setBin(1,1,1,1,1,1,1)" irá exibir o algarismo "8"
function setBin(seg) {
for(var s = 0; s <= 6; s++) {
var n_id = s + 1;
if(seg[s]) {
// ligar led
$('#seg-' + n_id).css('background-color', red_on);
console.log('#seg-' + s + ' - yes');
}
if(!seg[s]) {
// desligar led
$('#seg-' + n_id).css('background-color', red_off);
console.log('#seg-' + s + ' - no');
}
console.log('Seg: ' + seg[s]);
}
console.log('end if');
}
// função para enviar o algarismo decimal que deve ser exibido
// Ex: "setNun(8)" irá chamar a função "setBin([1,1,1,1,1,1,1])"
function setNun(val) {
switch(val) {
case 1:
setBin([0,0,1,0,0,1,0]);
break;
case 2:
setBin([1,0,1,1,1,0,1]);
break;
case 3:
setBin([1,0,1,1,0,1,1]);
break;
case 4:
setBin([0,1,1,1,0,1,0]);
break;
case 5:
setBin([1,1,0,1,0,1,1]);
break;
case 6:
setBin([1,1,0,1,1,1,1]);
break;
case 7:
setBin([1,0,1,0,0,1,0]);
break;
case 8:
setBin([1,1,1,1,1,1,1]);
break;
case 9:
setBin([1,1,1,1,0,1,1]);
break;
case 0:
setBin([1,1,1,0,1,1,1]);
break;
}
}
$(document).ready(function() {
var red_on = 'rgb(255, 0, 0)';
var red_off = 'rgb(100, 0, 0)';
// array com lista de leds
var out = ['0', '0', '0', '0', '0', '0', '0'];
$('#display div').click(function() {
var led_clicked = $(this).attr('id');
if($(this).css('background-color') != red_on) {
console.log(red_on);
$(this).css('background-color', red_on);
out.push(led_clicked);
return 0;
}
if($(this).css('background-color') == red_on){
console.log(red_off);
$(this).css('background-color', red_off);
out = jQuery.grep(out, function(value) {
return value != led_clicked;
});
return 0;
}
});
$('#output').text(out);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment