From dcd974e5b4f981340fdaff39f4fd3619962d8de0 Mon Sep 17 00:00:00 2001 From: Helena Ribera Date: Wed, 4 Oct 2023 10:09:24 +0200 Subject: [PATCH] Adding feature of changing color of displayed equation. --- app.js | 17 +++++++++++++++-- package-lock.json | 1 + static/index.html | 6 ++++++ static/latex2image-client.js | 3 ++- 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index f20e30a..23e756d 100644 --- a/app.js +++ b/app.js @@ -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}`; } diff --git a/package-lock.json b/package-lock.json index 71c3a69..533c5cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "latex2image-web", "version": "1.0.0", "license": "MIT", "dependencies": { diff --git a/static/index.html b/static/index.html index b8356af..0cbf924 100644 --- a/static/index.html +++ b/static/index.html @@ -42,6 +42,12 @@ +
+
+ + +
+
diff --git a/static/latex2image-client.js b/static/latex2image-client.js index 4a98b80..3a037da 100644 --- a/static/latex2image-client.js +++ b/static/latex2image-client.js @@ -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);