mirrors/Bibata_Cursor
1
0
Fork 0
mirror of https://github.com/ful1e5/Bibata_Cursor.git synced 2025-05-19 17:55:11 -04:00
Code Issues Projects Releases Packages Wiki Activity

🖼️ Render static pngs

Browse source
This commit is contained in:
ful1e5 2021-02-20 17:49:57 +05:30
parent 99dde92a8a
commit 05a7d723f6
3 changed files with 99 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

91
bitmapper/packages/core/src/BitmapsGenerator.ts
View file

@ -1,7 +1,9 @@
import fs from "fs"; import fs from "fs";
import path from "path"; import path from "path";
import * as puppeteer from "puppeteer"; import puppeteer, { Browser } from "puppeteer";
import { toHTML } from "./util/toHTML";
class BitmapsGenerator { class BitmapsGenerator {
/** /**
@ -9,25 +11,9 @@ class BitmapsGenerator {
* @param themeName Give name, So all bitmaps files are organized in one directory. * @param themeName Give name, So all bitmaps files are organized in one directory.
* @param bitmapsDir `absolute` or `relative` path, Where `.png` files will store. * @param bitmapsDir `absolute` or `relative` path, Where `.png` files will store.
*/ */
constructor( constructor(private bitmapsDir: string) {
private bitmapsDir: string, this.bitmapsDir = path.resolve(bitmapsDir);
private readonly themeName: string
) {
this.bitmapsDir = path.resolve(bitmapsDir, themeName);
this.createDir(this.bitmapsDir); this.createDir(this.bitmapsDir);
// TODO
console.log(this.themeName);
}
/**
* Prepare headless browser.
*/
async initialize() {}
static async create(bitmapsDir: string, themeName: string) {
const newObject = new BitmapsGenerator(bitmapsDir, themeName);
await newObject.initialize();
} }
/** /**
@ -40,33 +26,68 @@ class BitmapsGenerator {
} }
} }
protected async staticPng(page: puppeteer.Page) { // private async screenshot(
// TODO // element: ElementHandle<Element>
console.log("Static"); // ): Promise<string | void | Buffer> {
await page.close(); // return element.screenshot({
} // omitBackground: true,
// encoding: "binary",
// });
// }
protected async animatedPng(page: puppeteer.Page) { // private async stopAnimation(page: Page) {
// TODO // // @ts-ignore
console.log("animated"); // await page._client.send("Animation.setPlaybackRate", {
await page.close(); // playbackRate: 0,
} // });
// }
//
// private async resumeAnimation(page: Page, playbackRate: number = 0.1) {
// // @ts-ignore
// await page._client.send("Animation.setPlaybackRate", {
// playbackRate,
// });
// }
//
// private async saveFrameImage(key: string, frame: Buffer) {
// const out_path = path.resolve(outDir, key);
// fs.writeFileSync(out_path, frame, { encoding: "binary" });
// }
public async getBrowser() { /**
* Prepare headless browser.
*/
public async getBrowser(): Promise<Browser> {
return await puppeteer.launch({ return await puppeteer.launch({
ignoreDefaultArgs: [" --single-process ", "--no-sandbox"], ignoreDefaultArgs: [" --single-process ", "--no-sandbox"],
headless: true, headless: true,
}); });
} }
public async toPng( public async generate(
browser: puppeteer.Browser, browser: Browser,
content: string, content: string,
out: string,
animated: boolean = false animated: boolean = false
) { ) {
const page = await browser.newPage(); if (!content) {
await page.setContent(content); throw new Error(`${content} File Read error`);
}
animated ? this.animatedPng(page) : this.staticPng(page); const page = await browser.newPage();
const html = toHTML(content);
await page.setContent(html);
const svg = await page.$("#container svg");
if (!svg) {
throw new Error("svg element not found!");
}
if (animated) {
console.log("animated");
} else {
await svg.screenshot({ omitBackground: true, path: out });
}
} }
} }
export { BitmapsGenerator }; export { BitmapsGenerator };

19
bitmapper/packages/core/src/util/toHTML.ts Normal file
View file

@ -0,0 +1,19 @@
export const template = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Render Template</title>
</head>
<body>
<div id="container">
<svginjection>
</div>
</body>
</html>
`;
export const toHTML = (svgData: string): string =>
template.replace("<svginjection>", svgData);

29
bitmapper/packages/modern/src/index.ts
View file

@ -1,19 +1,38 @@
import path from "path"; import path from "path";
import fs from "fs";
import { BitmapsGenerator, SVGHandler } from "bibata-core"; import { BitmapsGenerator, SVGHandler } from "bibata-core";
import { Colors } from "bibata-core/src/types";
const root = path.resolve(__dirname, "../../../../"); const root = path.resolve(__dirname, "../../../../");
const svgDir = path.resolve(root, "svg", "modern"); const svgDir = path.resolve(root, "svg", "modern");
const themeName = "Bibata-Modern";
const bitmapsDir = path.resolve(root, "bitmaps", themeName);
const color: Colors = {
base: "#000000",
outline: "#FFFFFF",
watch: {
background: "#FFFFFF",
},
};
const main = async () => { const main = async () => {
const SVG = new SVGHandler.SvgDirectoryParser(svgDir); const SVG = new SVGHandler.SvgDirectoryParser(svgDir);
SVG.getStatic().forEach((svg) => { const png = new BitmapsGenerator(bitmapsDir);
console.log(svg); const browser = await png.getBrowser();
});
SVG.getAnimated().forEach((svg) => { SVG.getStatic().forEach(async (svg) => {
console.log(svg); const key = `${path.basename(svg, ".svg")}.png`;
console.log("Saving", key, "...");
const out = path.resolve(bitmapsDir, key);
let content = fs.readFileSync(svg, "utf-8");
content = SVGHandler.colorSvg(content, color);
await png.generate(browser, content, out);
}); });
}; };