From 9d44282f815a005e71674a16bd79e6db755e85ea Mon Sep 17 00:00:00 2001 From: Joseph Rautenbach Date: Sat, 16 Jan 2021 01:05:01 +0100 Subject: [PATCH] Updated static site with HTML download-attribute on button & JS formatting --- static/index.html | 21 +++--- static/latex2image-client.js | 124 +++++++++++++++++------------------ static/logo.svg | 28 ++++---- 3 files changed, 86 insertions(+), 87 deletions(-) diff --git a/static/index.html b/static/index.html index e33683a..888ba0f 100644 --- a/static/index.html +++ b/static/index.html @@ -4,14 +4,14 @@ - + - LaTeX2Image – Convert LaTeX math equations to images + LaTeX to image converter

Convert LaTeX math equations to PNG/JPG/SVG images

-

LaTeX2Image allows LaTeX math equations to be exported directly to multiple image formats, and saved for use in other documents.

-

The full source code is available on GitHub. - Behind the scenes, a Node.js app starts an isolated Docker container with a LaTeX installation for each request, - compiling the generated .tex file and converting it to an SVG vector image. If required, the SVG file is then converted to a raster image format. +

LaTeX2Image allows LaTeX math equations to be exported directly to multiple image formats, and saved for use in other documents.
+ Enter in a LaTeX math equation and click “Convert”. For a sample expression, click “Show Example”. Source code available on GitHub.

-
@@ -38,8 +35,8 @@
@@ -71,7 +68,7 @@


- Save Image + Save Image
@@ -80,8 +77,8 @@
- \ No newline at end of file + diff --git a/static/latex2image-client.js b/static/latex2image-client.js index d4cfdc7..2554c06 100644 --- a/static/latex2image-client.js +++ b/static/latex2image-client.js @@ -2,74 +2,74 @@ var sampleEquation = '\\frac{\\pi}{2} = \\int_{-1}^{1} \\sqrt{1-x^2}\\ dx'; var hasShownBefore = false; $(document).ready(function() { - function show(resultData) { - function afterSlideUp() { - var resultDataJSON; - if ((resultDataJSON = JSON.parse(resultData)) && !resultDataJSON.error) { - $('#resultImage').attr('src', resultDataJSON.imageURL); - $('#downloadButton').attr('href', resultDataJSON.imageURL); - $('#resultCard').show(); - $('#errorAlert').hide(); - } else { - $('#errorAlert').text(resultDataJSON.error || 'Invalid response received'); - $('#errorAlert').show(); - $('#resultCard').hide(); + function show(resultData) { + function afterSlideUp() { + var resultDataJSON; + if ((resultDataJSON = JSON.parse(resultData)) && !resultDataJSON.error) { + $('#resultImage').attr('src', resultDataJSON.imageURL); + $('#downloadButton').attr('href', resultDataJSON.imageURL); + $('#resultCard').show(); + $('#errorAlert').hide(); + } else { + $('#errorAlert').text(resultDataJSON.error || 'Invalid response received'); + $('#errorAlert').show(); + $('#resultCard').hide(); - } - $('#result').slideDown(330); + } + $('#result').slideDown(330); - // Scroll window to bottom - $("html, body").animate({ - scrollTop: $(document).height() - }, 1000); + // Scroll window to bottom + $("html, body").animate({ + scrollTop: $(document).height() + }, 1000); - hasShownBefore = true; - } - - $('#result').slideUp(hasShownBefore ? 330 : 0, afterSlideUp); + hasShownBefore = true; } - $('#convertButton').click(function() { - if (!$('#latexInputTextArea').val()) { - show(JSON.stringify({ - error: 'No LaTeX input provided' - })); - return; - } - - $('#result').slideUp(hasShownBefore ? 330 : 0, function() { - $('#resultImage').attr('src', ''); - }); - - $('#convertButton').prop('disabled', true); - $('#exampleButton').prop('disabled', true); - $('#convertButton').prop('value', 'Converting...'); - $.ajax({ - url: '/convert', - type: 'POST', - data: { - latexInput: $('#latexInputTextArea').val(), - outputFormat: $('#outputFormatSelect').val(), - outputScale: $('#outputScaleSelect').val() - }, - success: function(data) { - $('#convertButton').prop('disabled', false); - $('#exampleButton').prop('disabled', false); - $('#convertButton').prop('value', 'Convert'); - show(data); - }, - error: function() { - $('#convertButton').prop('disabled', false); - $('#exampleButton').prop('disabled', false); - $('#convertButton').prop('value', 'Convert'); - alert('Error communicating with server'); - } - }); + $('#result').slideUp(hasShownBefore ? 330 : 0, afterSlideUp); + } + + $('#convertButton').click(function() { + if (!$('#latexInputTextArea').val()) { + show(JSON.stringify({ + error: 'No LaTeX input provided' + })); + return; + } + + $('#result').slideUp(hasShownBefore ? 330 : 0, function() { + $('#resultImage').attr('src', ''); }); - // Show and convert a sample equation - $('#exampleButton').click(function() { - $('#latexInputTextArea').val(sampleEquation); - $('#convertButton').click(); + $('#convertButton').prop('disabled', true); + $('#exampleButton').prop('disabled', true); + $('#convertButton').prop('value', 'Converting...'); + $.ajax({ + url: '/convert', + type: 'POST', + data: { + latexInput: $('#latexInputTextArea').val(), + outputFormat: $('#outputFormatSelect').val(), + outputScale: $('#outputScaleSelect').val() + }, + success: function(data) { + $('#convertButton').prop('disabled', false); + $('#exampleButton').prop('disabled', false); + $('#convertButton').prop('value', 'Convert'); + show(data); + }, + error: function() { + $('#convertButton').prop('disabled', false); + $('#exampleButton').prop('disabled', false); + $('#convertButton').prop('value', 'Convert'); + alert('Error communicating with server'); + } }); + }); + + // Show and convert a sample equation + $('#exampleButton').click(function() { + $('#latexInputTextArea').val(sampleEquation); + $('#convertButton').click(); + }); }); diff --git a/static/logo.svg b/static/logo.svg index 4142ec5..b13ebde 100644 --- a/static/logo.svg +++ b/static/logo.svg @@ -1,9 +1,8 @@ - + - @@ -13,18 +12,21 @@ + + - - - - - - - - - - - + + + + + + + + + + + +