JSFrame

JSFrame is a easy way to display something with nodejs, without the need of a browser

Requirements

NodeJs

It is recommended to only use LTS version of nodejs. Otehrwise, instalation installation fail.

Java

To check if available use

$ java -version

Please share issues and impovement ideas -> https://github.com/Creepler13/JSFrame/issues

Quick Example

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);

Documentation

Objects

• Frame
• MouseCollider

Methods

Frame

• JSFrame#getCanvas()
• JSFrame#getWidth()
• JSFrame#getHeight()
• JSFrame#on()
• JSFrame#setPosition()
• JSFrame#setSize()
• JSFrame#setCanvasSize()
• JSFrame#show()
• JSFrame#setIcon()
• JSFrame#createMouseCollider()
• JSFrame#removeMouseCollider()

MouseCollider

• MouseCollider#enabled()
• MouseCollider#isEnabled()
• MouseCollider#setPosition()
• MouseCollider#setSize()
• MouseCollider#on()

Events

• FrameEvents
• KeyEvents
• MouseEvents

Frame

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()

getCanvas()

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

getWidth/Height()

const JSFrame = require("jsframe.jar");

let frame = new JSFrame(500, 500);

let width = frame.getWidth();
let height = frame.getHeight();

on

Used to Listen for Events

const JSFrame = require("jsframe.jar");

let frame = new JSFrame(500, 500);

frame.on(eventName, callBack);

setPosition()

Sets the position

const JSFrame = require("jsframe.jar");

let frame = new JSFrame(0, 0, 500, 500);

frame.setPosition(x, y);

Also works on MouseCollider

setSize()

Sets the size

const JSFrame = require("jsframe.jar");

let frame = new JSFrame(0, 0, 500, 500);

frame.setSize(width, height);

//optional if you want to have the canvas change to the same size as the frame (default=false)

frame.setSize(width, height, true);

Also works on MouseCollider

setCanvasSize()

Sets the size of the the Canvas without changing the size of the frame. You need to regenerate the context of the Canvas after resizing it.

const JSFrame = require("jsframe.jar");

let frame = new JSFrame(0, 0, 500, 500);

frame.setCanvasSize(width, height);

show()

Shows the Frame if it was hidden.

const JSFrame = require("jsframe.jar");

let frame = new JSFrame(0, 0, 500, 500);

frame.show();

setIcon()

Sets the icon of the Frame

const JSFrame = require("jsframe.jar");

let frame = new JSFrame(0, 0, 500, 500);

frame.setIcon("icon/icon.jpg");

FrameEvents

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

KeyEvents

//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);
});

MouseEvents

//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);
});

create/removeMouseCollider

frame.createMouseCollider(x, y, width, height);

returns a MouseCollider

frame.removeMouseCollider(MouseCollider);

removes the given MouseCollider from the frame

MouseCollider

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);
});

enabled()

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);

isEnabled()

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();