Giter Club home page Giter Club logo

ugui's Introduction

UGUI Logo

Join the chat at https://gitter.im/UniversalGUI/UGUI Community forums at ugui.reddit.com

Universal Graphical User Interface

UGUI gives a face to command line programs, and that face is HTML, CSS, & JS.

Create your own cross-platform desktop applications in minutes using UGUI.


Download

Download UGUI to use it for your project:


Quick Start

If you have Node.JS installed:

  1. Download latest release of UGUI
  2. Extract the UGUI folder from the zip file
  3. npm install
  4. npm start

If you don't have Node.JS installed:


What is UGUI?

  1. Framework for abstracting command line arguments into UI elements.
    • Designed for power and control with ease of use.
  2. Library for NW.js (formally Node-Webkit) that has an API of useful tools.
    • Simply typing ugui into the console gives you a wealth of useful information and helper functions for common tasks.
  3. Bootstrap: A pre-setup project with everything you need out of the box.
    • We supply you with common elements like navigation, "about" info, form elements, and 19 premade themes to pick from.
      Animated screenshot of UGUI interface using various themes
  4. Boilerplate: A general purpose compilation of commonly used tools for NW.js.
    • UGUI's project structure can be used for any kind of desktop app, or in combination with other common web frameworks, such as Angular or React. Many basic things (such as a detailed package.json for NW.js or code for making a Tray app) are already taken care of.
  5. Educational Platform: We believe UGUI can be used by anyone, even those with no coding experience. As part of this belief we approach everything from a UX perspective of making it as easy to understand as possible. This is why nearly every line of code in ugui.js is commented, and why we put such a focus on documentation and tutorials.

Our goal is to allow anyone, even those with no prior coding knowledge, to create a desktop application in just 5 minutes.


Project Roadmap

Current Version of Master Branch: V1.3.0.a

Phase 1: The library and framwork.

  • V1.4 Multi-File import
  • V1.5 Add some type of JSHint-like library to UGUI Dev Tools to inform developers about syntax errors.
  • V1.6 NW.js plans to implement a native spellchecker in version 13, if that doesn't occur, implement one into UGUI.

Phase 2: Site: Templates, Tutorials, & Documentation

The repo for the Phase 2 website is here: github.com/UniversalGUI/UniversalGUI.github.io

  • Buy domain name: UGUI.io
  • Create a community forum for discussions
  • Create UGUI site:
  • Create Explainer and tutorial videos.
    • UGUI Explainer: In Preproduction, Script and Storyboard complete. Artwork needs made and animated. Naration needs recorded.
    • Tutorial: Comprehensive and 30 second video covering running your project for development and distribution
    • Tutorial: Getting Started with UGUI
    • Tutorial: Covering every file in the UGUI project in detail.
    • Explainer: What is NW.js? In preproduction. Some artwork created, script done.
    • Demo: Creating a desktop application using UGUI.
    • Tutorial: Advanced way
  • Create several templates based on Twitter Bootstrap for different types of applications to give people quick places to start from.
    • Hardware Pack template to be created using D3.JS library to graphically display information about hardware such as CPU and RAM usage.
    • File System Pack template to be created to display information about files in a folder, file sizes, etc.
    • 3D Pack template using OpenGL and three.js to take advantage of 3D.
    • System Tray template for windowless application using native system tray and context-menu.
    • Mega Pack which combines most of the parts from all other official template packs.
    • More general templates that just focus on different visual layouts.
    • Advanced templates for more unique CMD programs.
  • Advertise the existence of this project like crazy!

Phase 3: UGUI Designer: The wizard and automation studio

  • Ultimately I'd like to make a program that makes this whole process far less manual. The program, UGUI Designer, would have the following features:
    1. Detect all JS and CSS files, uglify, minify, concat them in to one JS and one CSS doc.
    2. Remove any files not being used in the production version (git files, sass, etc.)
    3. Ability to export project to different environments (Win 32/64, Ubuntu, OSX, etc.)
    4. Eventually the exporting function would create an installer for Windows that will check if the required version of NW.js is already installed and if not download and install it, allowing for much smaller file sizes when packaging and distributing.

Known Issues

  • Loading settings doesn't update the value of <input type="file">. It does update it's internal file list though and should be functional if ran. There seems to currently be no method of updating the value of these elements due to security restrictions originally placed in Chromium. To get around this, we visually update the EZDZ plugin to make it look as though it's been updated, this however will not make a required <input type="file"> activate as being fullfilled until the user interacts with it. To work around this you can give the EZDZ input a class of do-not-save or remove the required="required".
  • Range slider value is empty in the UGUI Arg Obj (window.ugui.args) on load. This doesn't matter though as it will get it's value when clicking run or any other form element with a data-argName, which in turn updates the UGUI Developer Toolbar's CMD Output Preview. Will not fix. Will accept pull request.

Credits

People

Technology

ugui's People

Contributors

basilmir avatar bitdeli-chef avatar boymanjor avatar danodea avatar gitter-badger avatar orthographic-pedant avatar thejaredwilcurt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ugui's Issues

Looking forward to this!

I am, but how do I use it. I am on Win7 and I just ran index.htm. I want to make radio buttons for options and check boxes but how? Is there a forum where development is being discussed?

How to use the same executable multiple times?

Hey!

So I started using this to make a simple GUI on a project I am doing and its really helpful so far but for the terminal commands, I would like to use multiple of the same command like xdg-open to open folders. I did it like PATH but I would want to use the command for another path.

I noticed in the video guide you had a .exe in the same folder which I assume is a script executable but when I tried to replicate that by putting the command in a .exe script it does not really work.

Can you explain that part on the executable?

Thank you.

Multiple file selection

Hello!

First of all, thank you for your amazing work, I don't have big knowledges of programming but am trying to use UGUI to design a GUI for a software that needs mutiple files selection. For doing so, Is there any way to get that working? (and accordingly obtain fileToProcess.name for all of the selected files). The drag and drop box in the demo version ony allow you to select one file (and adding multiple to the HTML does't do the job).

Thank you in advance for any help you will provide

Best

Enhancement request: Update UGUI to support latest Bootswatch

I believe UGUI currently uses Bootstrap 3/older Bootswatch themes. These have some grid text vertical alignment issues by default and don't have all the modern bells and whistles like button-style radio selection.

This is a request to enhance UGUI to support the latest iteration of the Bootswatch themes, ex. https://bootswatch.com/cerulean

(I've messed with implementing the latest Bootswatch Cerulean myself, but what I've tried breaks the UGUI navbar, etc.)

ReferenceError: primordials is not defined

Test environement

OS: MacOS Big Sur
npm --version  7.21.0
node --version v16.8.0

Based on the quick start

  1. Download latest release of UGUI (1.3.0)
  2. Extract the UGUI folder from the zip file
  3. npm install
  4. npm start

Error

npm ERR! code 1
npm ERR! path /Users/aviivgi/Documents/development/blitzz.io/ugui/1.3.0/node_modules/nw
npm ERR! command failed
npm ERR! command sh -c node scripts/install.js
npm ERR! fs.js:47
npm ERR! } = primordials;
npm ERR!     ^
npm ERR! 
npm ERR! ReferenceError: primordials is not defined
npm ERR!     at fs.js:47:5
npm ERR!     at req_ (/Users/aviivgi/Documents/development/blitzz.io/ugui/1.3.0/node_modules/natives/index.js:143:24)
npm ERR!     at Object.req [as require] (/Users/aviivgi/Documents/development/blitzz.io/ugui/1.3.0/node_modules/natives/index.js:55:10)
npm ERR!     at Object.<anonymous> (/Users/aviivgi/Documents/development/blitzz.io/ugui/1.3.0/node_modules/download/node_modules/graceful-fs/fs.js:1:37)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1101:14)
npm ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
npm ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
npm ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
npm ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
npm ERR!     at require (node:internal/modules/cjs/helpers:94:18)

similar projects to generate native GUI from CLI app? qt, gtk, wx, tcl/tk, ...

hey, nice project : )

im looking for similar projects, that can generate native GUIs

ideas?

why: one limitation of html interfaces is the "choose file" dialog.
i could use electron, but i want to avoid the javascript-overhead
(alternatives: tauri, nodegui, flutter, ...)

for python, there are Gooey and Cli2Gui and magicgui
but im looking for a language agnostic solution

i suggest to list such "similar projects" in the readme
for example cli-wrapper-ui also renders to html
or should we start an awesome-cli2gui list?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.