I’m getting back into internet programming after taking a class on it a few years ago and I’m trying to implement a library into my website.
For this project, I want to use these animated diagrams of Japanese kanji. I’m using a library from here which I currently have working on my webpage: [https://kanji.sljfaq.org/kanjivg.html(https://kanji.sljfaq.org/kanjivg.html)
The problem I’m running into is there’s a separate library that actually animated the diagrams. I’m sure it’s just my lack of knowledge about NodeJS but I can’t figure out how to get it to work. Here’s the library I’m trying to use:
[https://github.com/nihongodera/kanjivganimate]https://github.com/nihongodera/kanjivganimate)
Here’s what I have for my app.js script:
const express = require('express');
const path = require('path');
const app = express();
app.set("view engine", "ejs");
// Serve static files
app.use(express.static(path.join(__dirname, 'public')));
app.use('/kanjivg', express.static(path.join(__dirname, 'kanjivg')));
//routes
app.get('/', (req, res) => {
res.render('index');
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Here’s my main EJS file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KanjiVG Animation</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>KanjiVG Animation</h1>
<svg id="kanji-svg" class="kanjiVG" width="300" height="300">
<!-- SVGs will get loaded by script.js here -->
</svg>
<script src="script.js"></script>
</body>
</html>
And here’s the script.js I use to load the actual diagrams:
window.onload = function() {
const kanjiSVG = document.getElementById('kanji-svg');
const kanjiCharacter = '好';
var charCode = kanjiCharacter.charCodeAt(0).toString(16);
// The char codes for the svg files are 5 characters long with leading zeros
while (charCode.length < 5) charCode = "0" + charCode;
// Load SVG file dynamically
fetch(`/kanjivg/${charCode}.svg`)
.then(response => response.text())
.then(svgText => {
kanjiSVG.innerHTML = svgText;
//Here I can add in svganimate once you've managed to get the SVGs loaded
})
.catch(error => {
console.error('Error fetching SVG:', error);
});
new KanjivgAnimate('.kanjiVG');
};
The new KanjivgAnimate('.kanjiVG'); part throws an error naturally because I don’t have it included however I don’t know where to include it.
Putting const KanjivgAnimate = require('kanjivganimate'); in app.js doesn’t do anything and putting it in script.js says I can’t use require functions in this script. So how exactly do I do this? It seems like I need to call it in app.js but I also need to call it after the page has rendered. I tried putting it after res.render('index'); in app.js but it just wouldn’t run it.
Octavia is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
5
You need to include this in the frontend using a script tag. This is not a Node.js library. It’s pure HTML. Make sure it gets loaded before your own script.js.
The script (from the github project) also expects to be processed using a bundler like Webpack or Vite. However, it looks like the project includes a ‘minified’ version of the script so trying that could work as well.
Use a bundler as webpack to import and bundle the script, or include it via a CDN and tag script js directly in your HTML.
Your scripts are loaded after the DOM is ready.
joana is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1