JSFrame is a easy way to display something with nodejs, without the need of a browser
Version >= 15.*To check if available use
$ java -versionPlease share issues and impovement ideas -> https://github.com/Creepler13/JSFrame/issues
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(0, 0, 500, 500);
let ctx = frame.getCanvas().getContext("2d");
ctx.fillStyle = "black";
let x = 0;
let y = 50;
setInterval(() => {
ctx.fillRect(0, 0, x, y);
x += 50;
if (x > 500) {
x = 0;
y += 50;
}
}, 50);
- JSFrame#getCanvas()
- JSFrame#getWidth()
- JSFrame#getHeight()
- JSFrame#on()
- JSFrame#setPosition()
- JSFrame#setSize()
- JSFrame#show()
- JSFrame#setIcon()
- JSFrame#createMouseCollider()
- JSFrame#removeMouseCollider()
- MouseCollider#enabled()
- MouseCollider#isEnabled()
- MouseCollider#setPosition()
- MouseCollider#setSize()
- MouseCollider#on()
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(x, y, width, height, hide);The hide argument ist optional if want to create a Frame but not show directly. it will stay hidden until you run show()
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(500, 500);
let canvas = frame.getCanvas();Returns a Canvas object which behaves like a html canvas
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(500, 500);
let width = frame.getWidth();
let height = frame.getHeight();Used to Listen for Events
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(500, 500);
frame.on(eventName, callBack);Sets the position
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(0, 0, 500, 500);
frame.setPosition(x, y);Also works on MouseCollider
Sets the size
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(0, 0, 500, 500);
frame.setPosition(width, height);Also works on MouseCollider
Shows the Frame if it was hidden.
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(0, 0, 500, 500);
frame.show();Sets the icon of the Frame
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(0, 0, 500, 500);
frame.setIcon("icon/icon.jpg");frame.on("ready", () => {}); // run when the frame is ready (mostly not needed)
frame.on("closed", () => {}); // run when the frame is closed
frame.on("update", () => {}); // run everytime BEFORE the frame updates
frame.on("minimized", () => {}); // run when the frame is minimized
frame.on("normalized", () => {}); // run when the frame goes back to normal after being minimized//example output : { keyCode: 65, key: "a", event: { type: "frame", name: "keyPressed"}}
frame.on("keyPressed", (e) => {
console.log(e);
});
frame.on("keyReleased", (e) => {
console.log(e);
});//example output : { x: 100, y: 100, button: 1, event: { type: "frame", name: "mousePressed"} }
// button = 0 (no button used)
// button = 1 (left-click)
// button = 2 (mouse-wheel)
// button = 3 (right-click)
frame.on("mousePressed", (e) => {
console.log(e);
});
frame.on("mouseReleased", (e) => {
console.log(e);
});
frame.on("mouseExited", (e) => {
console.log(e);
});
frame.on("mouseEntered", (e) => {
console.log(e);
});
frame.on("mouseMoved", (e) => {
console.log(e);
});
frame.on("mouseDragged", (e) => {
console.log(e);
});frame.createMouseCollider(x, y, width, height);returns a MouseCollider
frame.removeMouseCollider(MouseCollider);removes the given MouseCollider from the frame
The MouseCollider is a feature that allows for easy implmentation of, for example a button.
Its Events are equal to the Frame MouseEvents
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(500, 500);
let MC;
let ctx = frame.getCanvas().getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 500, 500);
frame.on("ready", () => {
MC = frame.createMouseCollider(50, 50, 200, 200);
MC.on("mouseEntered", (e) => {
ctx.fillStyle = "black";
ctx.fillRect(50, 50, 200, 200);
});
MC.on("mouseExited", (e) => {
ctx.fillStyle = "white";
ctx.fillRect(50, 50, 200, 200);
});
MC.on("mousePressed", (e) => {
ctx.fillStyle = "black";
ctx.fillText("Button Pressed", 50, 300);
});
MC.on("mouseReleased", (e) => {
ctx.fillStyle = "white";
ctx.fillRect(50, 250, 150, 100);
});
});
frame.on("mousePressed", (e) => {
ctx.fillStyle = "black";
ctx.fillText("Frame clicked", 200, 300);
});
frame.on("mouseReleased", (e) => {
ctx.fillStyle = "white";
ctx.fillRect(150, 250, 150, 100);
});
frame.on("keyReleased", (e) => {
frame.removeMouseCollider(MC);
});
enables or disables the MouseCollider
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(width, height);
let MC = frame.createMouseCollider(x, y, width, height);
MC.enabled(bool);reuturn if the MouseCollider is enabled
const JSFrame = require("jsframe.jar");
let frame = new JSFrame(width, height);
let MC = frame.createMouseCollider(x, y, width, height);
MC.isEnabled();