npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-no-vnc

v0.0.7

Published

noVNC port for angular.js

Downloads

12

Readme

Angular noVNC

Port of Joel Martin's noVNC project for angularjs.

Sample app

Fullscreen mode

Install

$ bower install angular-no-vnc

Overview

  • Multiple connections\displays over one page.
  • Config over directive attributes.
  • Full screen mode support.
  • Easily scale, fit to width\height.

Usage

Start vnc & ws proxy (server-side)

This module is a port of noVNC project that means you should use websockify proxy to convert over websockets. For me it is:

$ sudo apt-get install -y x11vnc
$ x11vnc -display :0 -N -forever &

To run the websockify install angular-noVNC globally via npm:

$ npm install -g angular-no-vnc #add websockify command
$ websockify --web=.. 44999 localhost:5900

--web=.. will allow you to use sample app in ../index.html for fast check by http://localhost:44999

Note that websockify listens on /websockify path by default. If you want to use another ws path please run websockify --path your_path 44999 localhost:5900

Additional info of usage websockify is here. Others server-side features you might found here.

Use in your application (client-side)

After running websockify, or other ws:// proxy server:

  • Add library to your html file and noVNC to your module dependency. var app = angular.module('myApp', ['noVNC']);

  • Add directive <vnc host="localhost" port="44999" is-connected="true"></vnc>

  • Reload page =)

Configuration

| Attribute | Description | Scope type | Default value | |------------------------|---------------------------------------------------------------|:----------:|----------------------------------------------| | host | IP/name of host to connect. | @ | window.location.hostname | | port | Port of websockify port. | @ | window.location.port or 80\http, 443\https | | password | Connection password. | @ | '' | | path | Connection path | @ | '' | | true-color | True color representation. | = | true | | view-only | Disable keyboard and mouse events. | = | false | | is-connected | Connection switcher. | = | false | | style | Style of canvas\display element. | = | {} | | states | States of system actions. format: [{status: '', msg: ''},]. | = | [] | | display.scale | Scale of display from 0.1 to 1. | = | 1 | | display.width | Display width. | = | null | | display.height | Display height. | = | null | | display.fitTo | Fit display to width/height/scale. | = | null | | display.fullScreen | Full screen mode switcher. | = | null |

Problems

Yes, they are should be in. This port is goes with code changes of big one (noVNC), that's why you need to use it carefully.

Nearby changes

  • Add loadable flash ws:// support.
  • Add mobile mode support.
  • Add clipboard transfer.
  • Write tests.
  • Add encription support.
  • Refactoring and many code improvements.

All improvements need free time. Your stars and issues increase my interest to work with project =)

Contribution

  • Fork $ git clone [email protected]:rootStar-lock/angular-noVNC.git.
  • Navigate and install npm and bower dependencies. $ cd angular-noVNC && npm install.
  • Project driven by gulp build system. Run gulp --tasks to see whats we have.
  • Live sample app in index.html
  • Use gulp lint and gulp plato to check code complexity and common mistakes.

Forks and pulls will be accepted with love)