renderbird
v1.0.4
Published
Eaisily create renderings with renderbird in your website!
Maintainers
turtle2285Readme
Welcome to renderbird see which you are below I am a user who is using this to render a website
I am a developer that wants to use renderbird in my browser
#user
Welcome to render bird! To get started first download Node Now that you have node open the terminal and add to system path Now type:
npm
npm i renderbirdNow create a new.js file. then put this in it
node.js
const renderBird = require('renderbird');
renderBird.init();Run it with node.js and you have render bird installed on the system
#dev
How to Use RenderBird in Your Website Step 1: Install RenderBird Start by installing RenderBird through npm:
bash
npm install renderbirdStep 2: Initialize RenderBird Create a Node.js script to start the RenderBird server. This will host the rendering library on localhost:9961.
Example:
javascript
const renderBird = require('renderbird');
renderBird.init();Run this script using:
bash
node your-script.jsStep 3: Access RenderBird in the Browser Once the server is running, open your browser and navigate to:
[the render bird localhost](http://localhost:9961/renderbird 'localhost:9961/renderbird)This will display the available commands in the RenderBird library.
Step 4: Integrate RenderBird into Your Website To use RenderBird commands, make HTTP requests from your website to the RenderBird server.
Example Integration with HTML and JavaScript: Create an HTML file (index.html) and include JavaScript to interact with RenderBird:
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RenderBird Integration</title>
</head>
<body>
<h1>RenderBird Demo</h1>
<button id="check-installed">Check Installation</button>
<button id="render-text">Render Text</button>
<button id="render-box">Render Box</button>
<script>
// Check if RenderBird is installed
document.getElementById('check-installed').addEventListener('click', async () => {
const response = await fetch('http://localhost:9961/renderbird/rb.installed');
const text = await response.text();
alert(text);
});
// Render Text Example
document.getElementById('render-text').addEventListener('click', async () => {
const response = await fetch('http://localhost:9961/renderbird/rb.renderText?text=HelloWorld');
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
});
// Render Box Example
document.getElementById('render-box').addEventListener('click', async () => {
const response = await fetch('http://localhost:9961/renderbird/rb.renderBox?width=300&height=200');
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
});
</script>
</body>
</html>Step 5: Extend RenderBird for Custom Rendering Developers can extend RenderBird by adding new endpoints or modifying the rendering logic in the Node.js script.
For example, to add a custom rendering command for circles:
javascript
// Add this endpoint in your Node.js script
if (req.url.startsWith('/renderbird/rb.renderCircle')) {
const query = new URL(req.url, `http://localhost:9961`);
const radius = parseInt(query.searchParams.get("radius") || "50");
const canvas = createCanvas(radius * 2 + 10, radius * 2 + 10);
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(radius + 5, radius + 5, radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();
res.writeHead(200, { 'Content-Type': 'image/png' });
res.end(canvas.toBuffer());
}Step 6: Prepare for Future Enhancements RenderBird is designed for easy integration with websites. Future updates will include support for 3D rendering using libraries like Three.js. Developers can start experimenting by adding WebGL or Three.js code.