Skip to content

Commit de82a54

Browse files
dosipoddosipod
authored
Update text_to_gif_pc.html
1 parent 097788e commit de82a54

File tree

1 file changed

+32
-28
lines changed

1 file changed

+32
-28
lines changed

‎txt-to-gifs-wled/text_to_gif_pc.html‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Text to GIF for WLED - Version 1.5</title>
4+
<title>Text to GIF for WLED - Version 1.6</title>
55
<style>
66
#previewBox {
77
border: 1px solid #000;
@@ -14,12 +14,12 @@
1414
</style>
1515
</head>
1616
<body>
17-
<h2>Text to GIF for WLED - Version 1.5</h2>
18-
<input type="text" id="textInput" placeholder="Enter text" oninput="updatePreview()">
17+
<h2>Text to GIF for WLED - Version 1.6</h2>
18+
<input type="text" id="textInput" placeholder="Enter text" oninput="updatePreviewAndGIF()">
1919
<p>Font Size: <span id="fontSizeValue">16</span>px</p>
20-
<input type="range" id="fontSizeSlider" min="8" max="32" value="16" oninput="updateFontSize()">
20+
<input type="range" id="fontSizeSlider" min="8" max="32" value="16" oninput="updatePreviewAndGIF()">
2121
<p>Font:
22-
<select id="fontSelect" onchange="updatePreview()">
22+
<select id="fontSelect" onchange="updatePreviewAndGIF()">
2323
<option value="Arial">Arial</option>
2424
<option value="Courier New">Courier New</option>
2525
<option value="Georgia">Georgia</option>
@@ -38,15 +38,22 @@ <h2>Text to GIF for WLED - Version 1.5</h2>
3838
<option value="Yu Gothic">Yu Gothic</option>
3939
</select>
4040
</p>
41+
<p>Font Style:
42+
<select id="fontStyleSelect" onchange="updatePreviewAndGIF()">
43+
<option value="normal">Regular</option>
44+
<option value="italic">Italic</option>
45+
<option value="bold">Bold</option>
46+
<option value="bold italic">Bold Italic</option>
47+
</select>
48+
</p>
4149
<p>Text Color:
42-
<input type="color" id="colorPicker" value="#FFFFFF" onchange="updatePreview()">
50+
<input type="color" id="colorPicker" value="#FFFFFF" onchange="updatePreviewAndGIF()">
4351
</p>
4452
<p>Background Color:
45-
<input type="color" id="bgColorPicker" value="#000000" onchange="updatePreview()">
53+
<input type="color" id="bgColorPicker" value="#000000" onchange="updatePreviewAndGIF()">
4654
</p>
4755
<p>Preview:</p>
4856
<div id="previewBox"></div>
49-
<button onclick="previewGIF()">Preview GIF</button>
5057
<button onclick="saveGIF()">Save GIF</button>
5158
<p>GIF Preview:</p>
5259
<img id="gifPreview" src="" alt="GIF Preview" style="border:1px solid #000; width:300px; height:150px;">
@@ -56,35 +63,46 @@ <h2>Text to GIF for WLED - Version 1.5</h2>
5663
function updateFontSize() {
5764
const fontSize = document.getElementById('fontSizeSlider').value;
5865
document.getElementById('fontSizeValue').textContent = fontSize;
59-
updatePreview();
66+
updatePreviewAndGIF();
6067
}
6168

6269
function updatePreview() {
6370
const text = document.getElementById('textInput').value;
6471
const fontSize = document.getElementById('fontSizeSlider').value;
6572
const font = document.getElementById('fontSelect').value;
73+
const fontStyle = document.getElementById('fontStyleSelect').value;
6674
const color = document.getElementById('colorPicker').value;
6775
const bgColor = document.getElementById('bgColorPicker').value;
6876
const previewBox = document.getElementById('previewBox');
6977
previewBox.style.fontSize = `${fontSize}px`;
7078
previewBox.style.fontFamily = font;
79+
previewBox.style.fontStyle = fontStyle.includes('italic') ? 'italic' : 'normal';
80+
previewBox.style.fontWeight = fontStyle.includes('bold') ? 'bold' : 'normal';
7181
previewBox.style.color = color;
7282
previewBox.style.backgroundColor = bgColor;
7383
previewBox.textContent = text;
7484
}
7585

76-
function generateGIF(callback) {
86+
function updatePreviewAndGIF() {
87+
updatePreview();
88+
saveGIF();
89+
}
90+
91+
function saveGIF() {
7792
const text = document.getElementById('textInput').value;
7893
const fontSize = document.getElementById('fontSizeSlider').value;
7994
const font = document.getElementById('fontSelect').value;
95+
const fontStyle = document.getElementById('fontStyleSelect').value;
8096
const color = document.getElementById('colorPicker').value;
8197
const bgColor = document.getElementById('bgColorPicker').value;
8298

8399
const canvas = document.createElement('canvas');
84100
canvas.width = 32;
85101
canvas.height = 16;
86102
const ctx = canvas.getContext('2d', { willReadFrequently: true });
87-
ctx.font = `${fontSize}px ${font}`;
103+
ctx.font = `${fontStyle.includes('bold') ? 'bold' : 'normal'} ${fontStyle.includes('italic') ? 'italic' : 'normal'} ${fontSize}px ${font}`;
104+
ctx.fillStyle = color;
105+
ctx.fillRect(0, 0, canvas.width, canvas.height); // Set background color
88106
ctx.fillStyle = color;
89107

90108
const textWidth = ctx.measureText(text).width;
@@ -94,7 +112,7 @@ <h2>Text to GIF for WLED - Version 1.5</h2>
94112
for (let x = 0; x < totalFrames; x++) {
95113
ctx.clearRect(0, 0, canvas.width, canvas.height);
96114
ctx.fillStyle = bgColor;
97-
ctx.fillRect(0, 0, canvas.width, canvas.height);
115+
ctx.fillRect(0, 0, canvas.width, canvas.height); // Set background color
98116
ctx.fillStyle = color;
99117
ctx.fillText(text, -x, 12);
100118
frames.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
@@ -113,22 +131,6 @@ <h2>Text to GIF for WLED - Version 1.5</h2>
113131
});
114132

115133
gif.on('finished', function(blob) {
116-
callback(blob);
117-
});
118-
119-
gif.render();
120-
}
121-
122-
function previewGIF() {
123-
generateGIF(function(blob) {
124-
const url = URL.createObjectURL(blob);
125-
const gifPreview = document.getElementById('gifPreview');
126-
gifPreview.src = url;
127-
});
128-
}
129-
130-
function saveGIF() {
131-
generateGIF(function(blob) {
132134
const url = URL.createObjectURL(blob);
133135
const a = document.createElement('a');
134136
a.href = url;
@@ -139,6 +141,8 @@ <h2>Text to GIF for WLED - Version 1.5</h2>
139141
const gifPreview = document.getElementById('gifPreview');
140142
gifPreview.src = url;
141143
});
144+
145+
gif.render();
142146
}
143147
</script>
144148
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>

0 commit comments

Comments
 (0)