viralgraphics.io

Creating Competitive Desktop Applications for the Web and Desktops

Usage no npm install needed!

<script type="module">
  import viralgraphicsIo from 'https://cdn.skypack.dev/viralgraphics.io';
</script>

README

ViralGraphics.io

ViralGraphics.io is a new JavaScript / HTML5 application framework under the MIT license. It is specifically designed to enable Desktop like applications inside your browser and provides a wide range of widgets and layouts to generate complex and good looking user interfaces.

It combines the best of the HMTL5 2D canvas and WebGL in an easy to use API.

Main Features:

  • A lightweight MVC system with integrated undo / redo and load / save capabilities.
  • Many different layouts and widgets.
  • Integrated backend for user management, application folders and more.
  • Compile and upload applications to the web using vgmake.js.
  • An integrated nodes system. The node application (source code in apps/nodes) can be viewed here
  • WebGL abstraction classes.

ViralGraphics.io was previously named VisualGraphics.tv. There may stll be references and links to the old name in the documentation.

Applications using ViralGraphics.io

The first major application based on ViralGraphics.io is PaintSupreme 3D. It is available on the Web, as well as in native Windows, Mac and Linux versions. It is also available inside the Mac and Windows App Stores. Native versions are possible via inbuild support of Electron.

Applications using ViralGraphics.io

  1. PaintSupreme 3D
  2. RaySupreme DF (Under Development)

Spaceship Screenshot

Status

The current version is v0.40 with new features being implemented daily. ViralGraphics.io is already in a usable state, however APIs can change without notice and documentation is under development at the moment.

For more information please visit the ViralGraphics.io Documentation at http://www.viralgraphics.io or contact me at markusm@viralgraphics.io.

Developing for ViralGraphics.io

Makefiles of ViralGraphics.io applications (they end with .vg) can be compiled into project files (.vide) using the node module viralgraphics.io. viralgraphics.io also allows the creation and publishing of applications on the Web.

Note that viralgraphics.io only compiles .vg files, it does not (yet) create ready to use default projects for ViralGraphics.io applications. You currently have to do this youself using the examples supplied in the ViralGraphics.io Git.

The documentation of ViralGraphics.io is currently the weak link and work in progress, you can find the (not complete) documention in the docs folder. We are working on this and hope to have a full documentation as soon as possible. Please also look at the example applications for reference.

V-IDE, the ViralGraphics.io IDE, has not yet catched up with the latest developments and has temporarily been taken out of the distribution. You can use vgmake to fully replace V-IDE for now.

viralgraphics.io

viralgraphics.io is a nodejs module to compile a ViralGraphics.io makefile (.vg) into .vide project which can than be executed via the supplied .html files and published on the Web. To install viralgraphics.io

npm install viralgraphics.io -g

The syntax of viralgraphics.io is pretty easy, you just supply the path and name of the .vg file and it will compile it and save it as a .vide file in the same directory as the source .vg file, e.g. "viralgraphics.io paintsupreme.vg". The .html file will read the .vide file and launch it via the supplied visualgraphics.js script.

Additionally you can supply parameters to viralgraphics.io to create and publish an application on the Web, this is done by supplying your www.viralgraphics.io account username and password via the -u and -p parameters and by using additional -create and -update parameters. The syntax of .vg files is described below.

Syntax of .vg Makefiles

Parameters

  • name - Sets the name of the Application. Has to be defined when you want to create the application on the ViralGraphics.io server.
  • url - Sets the Url the application will be available at inside the visualgraphics.tv/apps/ directory once published. Has to be defined when you want to create the application on the Visual Graphics server.
  • version - Sets the version string of the application.
  • author - Sets the author name of the application.
  • domain - Specifies an optional custom domain.
  • keywords - Keywords describing application functionality, will be inserted into the applications website meta-data once published.
  • title - Title of the application. Will be displayed in the browsers title bar once published.
  • description - Multi line description of the application.
  • webBorderColor - Specifies a custom web border color in CSS terms.

Content

  • sources - A comma separated list with links to the sources of the application. Several sources lines can be specified.
  • images - A comma separated list with links to the images used by the application. Several images lines can be specified. An image can be requested inside an application with VG.Utils.getImageByName( Filename ).
  • html - A comma separated list with links to the html or text files used by the application. Several html lines can be specified. An html/text file can be requested inside an application with VG.Utils.getTextByName( Filename ). Filename has to be the basename without any endings.
  • svg - A comma separated list with links to the scalable vector files of the application. Several vector file lines can be specified. An SVG can be requested inside an application with VG.Utils.getSVGByName( Filename ).

An example .vg makefile:

name = Website
version = 0.31
url = website
author = Markus Moenig

sources = main.js
sources = homepage.js, newspage.js

images = images/banner.png, images/logo_home.png

svg = svg/glyphs.svg, svg/socialglyphs.svg

html = html/About Visual Graphics.html, html/Features Overview.html