{"id":17018250,"url":"https://github.com/zlatnaspirala/visualjs","last_synced_at":"2025-03-22T16:31:23.879Z","repository":{"id":37580096,"uuid":"60555998","full_name":"zlatnaspirala/visualjs","owner":"zlatnaspirala","description":"Now `visual-js` can be used from npm i visual-js also MatrixEngneGUI Editor is here.","archived":false,"fork":false,"pushed_at":"2025-03-02T18:04:38.000Z","size":236800,"stargazers_count":8,"open_issues_count":4,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:46:30.047Z","etag":null,"topics":["animation","canvas2d","frame","game","game-development","game-engine","gamedev","javascript","matrix-engine","matrix-engine-texture-editor","visual-editor","visual-js","web-editor","webcam","window-gui"],"latest_commit_sha":null,"homepage":"https://maximumroulette.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zlatnaspirala.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-06T19:46:53.000Z","updated_at":"2025-03-02T18:03:31.000Z","dependencies_parsed_at":"2023-02-08T08:00:53.372Z","dependency_job_id":"d944a8ef-cd38-4a40-b9c9-840783fc23af","html_url":"https://github.com/zlatnaspirala/visualjs","commit_stats":{"total_commits":118,"total_committers":4,"mean_commits":29.5,"dds":0.0423728813559322,"last_synced_commit":"85c6848170f83cf33bf835cb85db44d308f7a6cd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisualjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisualjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisualjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zlatnaspirala%2Fvisualjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zlatnaspirala","download_url":"https://codeload.github.com/zlatnaspirala/visualjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244986580,"owners_count":20543036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas2d","frame","game","game-development","game-engine","gamedev","javascript","matrix-engine","matrix-engine-texture-editor","visual-editor","visual-js","web-editor","webcam","window-gui"],"created_at":"2024-10-14T06:45:08.502Z","updated_at":"2025-03-22T16:31:18.871Z","avatar_url":"https://github.com/zlatnaspirala.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual-js\n### Version : 3.0.0\n\nAll new version begin with 3.0.0 for client, server or GUI part.\n\n[![Join the chat at https://gitter.im/Visual-JS-game-engine/Lobby](https://badges.gitter.im/Visual-JS-game-engine/Lobby.svg)](https://gitter.im/Visual-JS-game-engine/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n#### Full name: visual-js game engine\n#### This is JavaScript game engine (dev tools node.js / client js).\n\n### Objective\n\n - Create UI from live page. I called `ON-PAGE-EDITOR`.\n     on right click in EDITOR = true status.\n - Create more visual-js embedded visual controls.\n     Like Oscillator , make input/output pins ...\n - [DONE]Improve visual-js in concept of npm usage.\n   Make it easy usable from `npm i visual-js`.\n - [WIP] Matrix-engine GUI Texture, This is c# application.The main goal of this app is to automate all the necessary actions related to installing, starting and building the final script for matrix-engine or for any other purpose.\n\n### Installation and setup:\n\nUse this for `/project/client` part, `project/server` part also use it in `test-npm`.\n```js\nnpm i\n```\n\nYou can use this project from this git repo or you can use it from npm services like in `test-npm/` folder.\n\n## Client/Manifest [html5]\n```js\n/**\n * @Filename : manifest.js\n * Manifest file for visual-js application.\n */\nvar APPLICATION = {\n    NAME: \"VISUAL-JS\",\n    TYPE: \"client\",\n    VERSION: \"3.0.0\",\n    STATUS: \"develop\",\n    MULTILANGUAGE: false,\n    // false for fiddle support , we need absolute path.\n    IMAGE_LOADER_PREFIX: true,\n    EDITOR: true,\n    EDITOR_AUTORUN: false,\n    LOCAL_SERVER: \"localhost\",\n    DEVELOPERS: [\"Nikola Lukic Zlatnaspirala@gmail.com\"],\n    ACCESSIBILITY: {\n        VIRTUAL_KEYBOARD_FOR_DESKTOP: false,\n        ACTIVATE_VK_FOR_DESKTOP: function () {\n            CREATE_VIRTUAL_KEYBOARD();\n            HIDE_KEYBOARD();\n            APPLICATION.ACCESSIBILITY.VIRTUAL_KEYBOARD_FOR_DESKTOP = true;\n        },\n        DEACTIVATE_VK_FOR_DESKTOP: function () {\n            APPLICATION.ACCESSIBILITY.VIRTUAL_KEYBOARD_FOR_DESKTOP = false\n        }\n    },\n    SINGLE_BROADCAST: true,\n    MULTIRTC_PEER: true,\n    PROGRAM: {\n        // MONITOR is innerWidth.Height or CANVAS is canvas width\n        CALCULATING_POSITION_BY: \"CANVAS\",\n        RENDER_SPEED: 5,\n        UPDATE_SPEED: 5\n    },\n    SYSTEM: {\n        COLOR: \"#afa9aa\",\n        HOVER_COLOR: \"#5991FF\",\n        TEXT_COLOR: \"black\",\n        ACTOR_X: \"\",\n        ACTOR_Y: \"\"\n    },\n};\n```\n\n\n## Server/Editor [node.js] (Folder: /project/server/)\nThis is dev tool for creating object on page.\n\n### Config\n```js\nmodule.exports = {\n  VERSION : \"3.0.0\",\n  PATH_OF_NODE_APP : \"D:/PATH_TO_SERVER_INSTANCE_FOLDER/server/\", // EDIT HERE\n  PATH_OF_WWW : \"D:/xamp/htdocs/project_instance/\", // PATH_TO_WWW  EDIT HERE\n  EDITOR_PORT : \"1013\",\n  DESTROY_SESSION_AFTER_X_mSECUNDS : 20000,\n  SELF_HOST: {\n    protocol: 'http',\n    port: 80\n  }\n};\n```\n\n## CLIENT OR WEB APPLICATION (Folder: /project/client/)\n\n### How to start:\n\nYou can use `EDITOR` from source this repo or `visualjs` from npm service.\n\n### ON/PAGE Editor [Nodejs]\n\nFrom package.json:\n```\n\"scripts\": {\n    \"pack\": \"node build.js\",\n    \"res\": \"node res.js\",\n    \"editor\": \"node editor.js\",\n    \"host\": \"node self-host.js\"\n  }\n```\n\n```js\nnpm run host\n```\n```json\nThis is just a webserver for simple hosting in nodejs.\n```\n\n```js\nnpm run res\n```\n```json\nJust put new image in new folder with same name example -\u003e (`logo/logo.png`).\nAfter this cmd engine will get meta data. This is not list for direct loading images.\nBuild meta data for image/images.\n```\n\n```js\nnpm run editor\n```\n```json\n This is editor to make possible concept of EDITOR-ON-PAGE.\n```\n\n```js\nnpm run pack\n```\n```json\nThis will pack all scripts created from editor to the `starter/visual.js`.\n```\n\nEditor use [`cache/`] this folder for cache data -maybe you will need extra permission.\n3) In browser navigate to /client/ folder (index.html)\n\nClick right button and you will see content menu . First item is *Add New game object* .\nThan your game object will show at web page. Right click on rectangle area to see game object context menu.\n\nlocal node.js application tools (Use this in develop mode only):\n\n - server/res.js  - create RESOURCE js object (ADD image or images for animation)\n   Put image or images in one folder for example TEST_RES/  . Put that folder in this location **project_instance/res/** .\n\nRun command:\n```js\nserver/node res.js\n```\n\nNote: Object `RESOURCE` is still in global space. Must be resolved [How to load script in run time from (module type) builded js bundle?].\n\nObject `RESOURCE` memory all image paths data. When you create folder and put image intro and build with `node res.js` we still did not create images object.\nImages object will be created after you add animation to the game objects (This is good because memory safe) Sometimes your app will no need some resources.\n\n\n To use `ON-PAGE-EDITOR` you will need to run:\n ```js\n server/editor.js\n```\nFor interconnections used webSocket communication protocol.\n\nCreate game objects direct in web browser view. Takes data from system folder `cache/` and generate code. After build you can found your code intro visual.js (`node build.js`)\n\n- server/build.js (node.js dev app for local use!)\n There is not security validation on server part and this action use only\n on local dev stage. After build you wil get all EDITOR created objects intro final runtime js pack.\n\nIf you use editor.js to visual create game object method, you must start\nnode build.js on the end of work.\nThis tool will create visual.js in folder starter/ with all your game object was created in editor.\n\nNew FEATURE =\u003e save stage\n\n\n## Use visual-js from npm service\nTake a look at the `test-npm/` folder. (test npm github link)[https://github.com/zlatnaspirala/visualjs/tree/master/test-npm]\n\nYou need to create `config.js` file with content:\n```js\nmodule.exports = {\n  VERSION : \"3.0.0\",\n  PATH_OF_NODE_APP : \"G:\\\\web_server\\\\xampp\\\\htdocs\\\\PRIVATE_SERVER\\\\visual-js-GIT\\\\build\\\\visualjs\\\\test-npm\\\\\",\n  PATH_OF_WWW : \"G:\\\\web_server\\\\xampp\\\\htdocs\\\\PRIVATE_SERVER\\\\visual-js-GIT\\\\build\\\\visualjs\\\\test-npm\\\\\",\n  EDITOR_PORT : \"1013\",\n  DESTROY_SESSION_AFTER_X_mSECUNDS : 20000,\n  SELF_HOST: {\n    protocol: 'http',\n    port: 80\n  }\n};\n```\nReplace `PATH_OF_NODE_APP` and `PATH_OF_WWW` with your own project folder path.\nFor windows best try with `\\\\` agenst `\\` like this `G:\\\\web_server\\\\xampp\\\\htdocs\\\\`\n\nMain JS script (Client part web):\n```js\nimport { sys, ActivateModifiers, loadEditor, runEditor, loadEditorObjects } from 'visual-js';\nActivateModifiers();\n\n// Run editor\nrunEditor();\nloadEditor();\n\nsys.DOM.CREATE_SURFACE(\"SURF\", \"examples\", 100, 99.4, \"DIAMETRIC\");\nexamples.ENGINE.CREATE_MODUL(\"STARTER\");\nvar smodul = examples.ENGINE.MODULES.ACCESS_MODULE(\"STARTER\");\n\n// This is preload gameobject , you can't manipulate with\n// this game object in editor.\nsmodul.NEW_OBJECT(\"IamNewObject\", 25, 50, 12, 25, 10);\n\n// Run editor\nloadEditorObjects();\n```\nI use browserify for building bundle:\n `browserify test.js -p esmify \u003e builds/examples.js`\n\n\n### Note ⛔\n```json\n  Don't use editor features on public server.\n  Please do not run editor tools on a public server. There is no form of abuse protection.\n```\n\n`visual-js-server` is also part of this git repo project,\nYou can run editor feature, just create file editor.js with content:\n\n```js\nlet tools = require('visual-js-server');\n\nlet config = {\n  VERSION : \"3.0.0\",\n  PATH_OF_NODE_APP : \"G:\\\\web_server\\\\xampp\\\\htdocs\\\\PRIVATE_SERVER\\\\visual-js-GIT\\\\build\\\\visualjs\\\\test-npm\\\\\",\n  PATH_OF_WWW : \"G:\\\\web_server\\\\xampp\\\\htdocs\\\\PRIVATE_SERVER\\\\visual-js-GIT\\\\build\\\\visualjs\\\\test-npm\\\\\",\n  EDITOR_PORT : \"1013\",\n  DESTROY_SESSION_AFTER_X_mSECUNDS : 20000,\n  SELF_HOST: {\n    protocol: 'http',\n    port: 80\n  }\n};\n\ntools.editor(config);\n```\n\nThen open new terminal and run:\n```\nnode editor.js\n```\n\n\n### External licences in this project:\n\n- Webcam NUI control is under:\n  Created by Romuald Quantin.\n  http://creativecommons.org/licenses/by-nc-sa/3.0/\n  Download from :\n  https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html\n- WEBRTC - webcam communication is under:\n    Creator Muaz Khan www.MuazKhan.com\n    MIT License       - www.WebRTC-Experiment.com/licence\n- Socket.io.js        - http://socket.io/download/\n\n### Disclaimer of warranty\n\n'Visual js' is provided \"as-is\" and without warranty of any kind, express, implied or otherwise,\nincluding without limitation, any warranty of merchantability or fitness for a particular purpose.\nIn no event shall the author of this software be held liable for data loss,\ndamages, loss of profits or any other kind of loss while using or misusing this\n\n\n#### Creator: Nikola Lukic zlatnaspirala@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlatnaspirala%2Fvisualjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzlatnaspirala%2Fvisualjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzlatnaspirala%2Fvisualjs/lists"}