Adding feature of changing color of displayed equation.

This commit is contained in:
Helena Ribera 2023-10-04 10:09:24 +02:00
parent f077a800f9
commit dcd974e5b4
4 changed files with 24 additions and 3 deletions

17
app.js
View File

@ -77,13 +77,22 @@ conversionRouter.post('/convert', async (req, res) => {
return;
}
// Define a regular expression pattern to match a 6-character string of numbers or letters.
const colorPattern = /^[0-9a-zA-Z]{6}$/;
if (!colorPattern.test(req.body.outputColor)) {
res.end(JSON.stringify({ error: 'Invalid color format. It should be a 6-character string of numbers and/or letters.' }));
return;
}
const equation = req.body.latexInput.trim();
const fileFormat = req.body.outputFormat.toLowerCase();
const outputScale = scaleMap[req.body.outputScale];
const fontColor = req.body.outputColor;
// Generate and write the .tex file
await fsPromises.mkdir(`${tempDir}/${id}`);
await fsPromises.writeFile(`${tempDir}/${id}/equation.tex`, getLatexTemplate(equation));
await fsPromises.writeFile(`${tempDir}/${id}/equation.tex`, getLatexTemplate(equation, fontColor));
// Run the LaTeX compiler and generate a .svg file
await execAsync(getDockerCommand(id, outputScale));
@ -133,7 +142,7 @@ app.listen(port, () => console.log(`Latex2Image listening at http://localhost:${
//// Helper functions
// Get the LaTeX document template for the requested equation
function getLatexTemplate(equation) {
function getLatexTemplate(equation, fontColor) {
return `
\\documentclass[12pt]{article}
\\usepackage{amsmath}
@ -143,8 +152,12 @@ function getLatexTemplate(equation) {
\\usepackage{siunitx}
\\usepackage[utf8]{inputenc}
\\thispagestyle{empty}
\\definecolor{mycolor}{HTML}{${fontColor}}
\\begin{document}
\{
\\color{mycolor}
${equation}
\}
\\end{document}`;
}

1
package-lock.json generated
View File

@ -5,6 +5,7 @@
"requires": true,
"packages": {
"": {
"name": "latex2image-web",
"version": "1.0.0",
"license": "MIT",
"dependencies": {

View File

@ -42,6 +42,12 @@
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="outputColorSelect">Font color (HEX format without '#')</label>
<input type="text" class="form-control" id="outputColorSelect" placeholder="000000">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="outputScaleSelect">Scale</label>

View File

@ -57,7 +57,8 @@ $(document).ready(function() {
data: {
latexInput: latexInput,
outputFormat: $('#outputFormatSelect').val(),
outputScale: $('#outputScaleSelect').val()
outputScale: $('#outputScaleSelect').val(),
outputColor: $('#outputColorSelect').val()
},
success: function(data) {
$('#convertButton').prop('disabled', false);