fgouin2014/index.html

## index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Affichage à 7 Segments</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="seven-segment-display" id="sevenSegmentDivs">
    <!-- Instances des affichages à 7 segments créées par JavaScript -->
  </div>

  <canvas id="sevenSegmentCanvas" width="400" height="200"></canvas>

  <script src="script.js"></script>
</body>
</html>

## red-led-counter.markdown

      
    Raw
  

              red-led-counter.markdown
            
          
    Red led Counter

A Pen by fgouin2014 on CodePen.
License.

  
## script.js
const digitSegments = [
  ['a', 'b', 'c', 'd', 'e', 'f'],       // 0
  ['b', 'c'],                           // 1
  ['a', 'b', 'd', 'e', 'g'],            // 2
  ['a', 'b', 'c', 'd', 'g'],            // 3
  ['b', 'c', 'f', 'g'],                 // 4
  ['a', 'c', 'd', 'f', 'g'],            // 5
  ['a', 'c', 'd', 'e', 'f', 'g'],       // 6
  ['a', 'b', 'c'],                      // 7
  ['a', 'b', 'c', 'd', 'e', 'f', 'g'],  // 8
  ['a', 'b', 'c', 'd', 'f', 'g']        // 9
];

function createSevenSegmentDivs(numberOfDigits) {
  const container = document.getElementById('sevenSegmentDivs');
  container.innerHTML = '';

  for (let i = 0; i < numberOfDigits; i++) {
    const digitContainer = document.createElement('div');
    digitContainer.className = 'seven-segment';

    ['a', 'b', 'c', 'd', 'e', 'f', 'g'].forEach(segment => {
      const segmentDiv = document.createElement('div');
      segmentDiv.className = `segment ${segment}`;
      digitContainer.appendChild(segmentDiv);
    });

    container.appendChild(digitContainer);
  }
}

function showNumber(number) {
  const digits = String(number).split('');
  const segments = document.querySelectorAll('.seven-segment');

  digits.forEach((digit, index) => {
    const digitSegmentsArray = segments[index].querySelectorAll('.segment');
    digitSegmentsArray.forEach(segment => segment.classList.remove('on'));

    digitSegments[parseInt(digit)].forEach(segment => {
      segments[index].querySelector(`.${segment}`).classList.add('on');
    });
  });
}

// Fonction pour afficher un nombre sur le canvas
function drawNumberOnCanvas(number, ctx) {
  const segmentCoordinates = {
    a: [10, 0, 80, 20],
    b: [90, 10, 20, 80],
    c: [90, 110, 20, 80],
    d: [10, 190, 80, 20],
    e: [0, 110, 20, 80],
    f: [0, 10, 20, 80],
    g: [10, 90, 80, 20]
  };

  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  const digits = String(number).split('');

  digits.forEach((digit, digitIndex) => {
    const xOffset = digitIndex * 100;
    ctx.fillStyle = '#333';

    Object.keys(segmentCoordinates).forEach(segment => {
      const [x, y, width, height] = segmentCoordinates[segment];
      ctx.fillRect(x + xOffset, y, width, height);
    });

    ctx.fillStyle = 'red';
    digitSegments[parseInt(digit)].forEach(segment => {
      const [x, y, width, height] = segmentCoordinates[segment];
      ctx.fillRect(x + xOffset, y, width, height);
    });
  });
}

// Initialisation
createSevenSegmentDivs(4);  // Créer 4 affichages à 7 segments
const canvas = document.getElementById('sevenSegmentCanvas');
const ctx = canvas.getContext('2d');

// Exemple d'affichage des nombres de 0000 à 9999 en boucle
let currentNumber = 0;
setInterval(() => {
  showNumber(currentNumber);
  drawNumberOnCanvas(currentNumber, ctx);
  currentNumber = (currentNumber + 1) % 10000;
}, 1000);

## style.css
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #333;
  color: #fff;
  margin: 0;
}

.seven-segment-display {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.seven-segment {
  position: relative;
  width: 40px;
  height: 80px;
}

.segment {
  position: absolute;
  background-color: #333;
  transition: background-color 0.2s;
}

.segment.on {
  background-color: red;
}

.a { top: 0; left: 5px; width: 30px; height: 10px; }
.b { top: 5px; right: 0; width: 10px; height: 30px; }
.c { bottom: 5px; right: 0; width: 10px; height: 30px; }
.d { bottom: 0; left: 5px; width: 30px; height: 10px; }
.e { bottom: 5px; left: 0; width: 10px; height: 30px; }
.f { top: 5px; left: 0; width: 10px; height: 30px; }
.g { top: 35px; left: 5px; width: 30px; height: 10px; }
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Affichage à 7 Segments</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="seven-segment-display" id="sevenSegmentDivs">
	<!-- Instances des affichages à 7 segments créées par JavaScript -->
	</div>

	<canvas id="sevenSegmentCanvas" width="400" height="200"></canvas>

	<script src="script.js"></script>
	</body>
	</html>
	const digitSegments = [
	['a', 'b', 'c', 'd', 'e', 'f'], // 0
	['b', 'c'], // 1
	['a', 'b', 'd', 'e', 'g'], // 2
	['a', 'b', 'c', 'd', 'g'], // 3
	['b', 'c', 'f', 'g'], // 4
	['a', 'c', 'd', 'f', 'g'], // 5
	['a', 'c', 'd', 'e', 'f', 'g'], // 6
	['a', 'b', 'c'], // 7
	['a', 'b', 'c', 'd', 'e', 'f', 'g'], // 8
	['a', 'b', 'c', 'd', 'f', 'g'] // 9
	];

	function createSevenSegmentDivs(numberOfDigits) {
	const container = document.getElementById('sevenSegmentDivs');
	container.innerHTML = '';

	for (let i = 0; i < numberOfDigits; i++) {
	const digitContainer = document.createElement('div');
	digitContainer.className = 'seven-segment';

	['a', 'b', 'c', 'd', 'e', 'f', 'g'].forEach(segment => {
	const segmentDiv = document.createElement('div');
	segmentDiv.className = `segment ${segment}`;
	digitContainer.appendChild(segmentDiv);
	});

	container.appendChild(digitContainer);
	}
	}

	function showNumber(number) {
	const digits = String(number).split('');
	const segments = document.querySelectorAll('.seven-segment');

	digits.forEach((digit, index) => {
	const digitSegmentsArray = segments[index].querySelectorAll('.segment');
	digitSegmentsArray.forEach(segment => segment.classList.remove('on'));

	digitSegments[parseInt(digit)].forEach(segment => {
	segments[index].querySelector(`.${segment}`).classList.add('on');
	});
	});
	}

	// Fonction pour afficher un nombre sur le canvas
	function drawNumberOnCanvas(number, ctx) {
	const segmentCoordinates = {
	a: [10, 0, 80, 20],
	b: [90, 10, 20, 80],
	c: [90, 110, 20, 80],
	d: [10, 190, 80, 20],
	e: [0, 110, 20, 80],
	f: [0, 10, 20, 80],
	g: [10, 90, 80, 20]
	};

	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	const digits = String(number).split('');

	digits.forEach((digit, digitIndex) => {
	const xOffset = digitIndex * 100;
	ctx.fillStyle = '#333';

	Object.keys(segmentCoordinates).forEach(segment => {
	const [x, y, width, height] = segmentCoordinates[segment];
	ctx.fillRect(x + xOffset, y, width, height);
	});

	ctx.fillStyle = 'red';
	digitSegments[parseInt(digit)].forEach(segment => {
	const [x, y, width, height] = segmentCoordinates[segment];
	ctx.fillRect(x + xOffset, y, width, height);
	});
	});
	}

	// Initialisation
	createSevenSegmentDivs(4); // Créer 4 affichages à 7 segments
	const canvas = document.getElementById('sevenSegmentCanvas');
	const ctx = canvas.getContext('2d');

	// Exemple d'affichage des nombres de 0000 à 9999 en boucle
	let currentNumber = 0;
	setInterval(() => {
	showNumber(currentNumber);
	drawNumberOnCanvas(currentNumber, ctx);
	currentNumber = (currentNumber + 1) % 10000;
	}, 1000);
	body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #333;
	color: #fff;
	margin: 0;
	}

	.seven-segment-display {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	}

	.seven-segment {
	position: relative;
	width: 40px;
	height: 80px;
	}

	.segment {
	position: absolute;
	background-color: #333;
	transition: background-color 0.2s;
	}

	.segment.on {
	background-color: red;
	}

	.a { top: 0; left: 5px; width: 30px; height: 10px; }
	.b { top: 5px; right: 0; width: 10px; height: 30px; }
	.c { bottom: 5px; right: 0; width: 10px; height: 30px; }
	.d { bottom: 0; left: 5px; width: 30px; height: 10px; }
	.e { bottom: 5px; left: 0; width: 10px; height: 30px; }
	.f { top: 5px; left: 0; width: 10px; height: 30px; }
	.g { top: 35px; left: 5px; width: 30px; height: 10px; }