Skip to content

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

License

Notifications You must be signed in to change notification settings

Creepler13/JSFrame

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Methods

Frame

MouseCollider

Events

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

getPosition()

Returns the position

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

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

frame.getPosition(); // returns {x: XPosition, y: YPosition}

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/is redrawn

frame.on("minimized", () => {}); // run when the frame is minimized

frame.on("normalized", () => {}); // run when the frame goes back to normal after being minimized

frame.on("positionChanged", () => {}); // run when the frame is moved. returns {x: XPosition, y: YPosition, event: { type: "frame", name: "positionChanged"}}

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

About

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

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors 3

  •  
  •  
  •