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

zincjs

v1.11.5

Published

ZincJS (Web-based-Zinc-Visualisation)

Downloads

369

Readme

ZincJS (Web-based-Zinc-Visualisation)

Some of the following documentations are currerntly out-of-date .

Webapp developed using ZincJS:

SPARC Portal

Fitzlet

Scaffold Maker

ScaffoldVuer

Installation:

You need NPM to build the ZincJS library. Once NPM has been installed, follow the instructions below:

$ npm install
$ npm run build-bundle

If everything works accordingly, a 'build' folder along with two files zinc.js and zinc.min.js in it should be created. The zinc.js and zinc.min.js can now be consumed in your preferred envirnoment.

Useful links:

Examples

Tutorials

API Documentation

How to export models to ZincJS:

Here is a short instruction on how to get simple models from CMGUI/Zinc showing on web brwoser quickly.

For Mapping Tool users:

Argon scene exporter

For PyZinc users:

PyZinc2ZincJS

For Cmgui users:

  1. Download the latest cmgui from http://physiomeproject.org/software/opencmiss/cmgui/download/developer

  2. Read in your files, set up the graphics and viewing windows.

  3. Export the json files using the following command gfx expore threejs, there are few different options regarding the export, make sure you read the instruction using "gfx export threejs ?" command. Please note down the filename_prefix you have chosen here. The number of files output may vary depending on the type of graphics.

  4. A file containing information of the viewport is also required. After adjusting the viewport on Cmgui to the desired setting then note down the values of eye point, interest point, upvector, near plane and far plane from the output of the "gfx list win 1" command. For example with the following output:

    farPlane: 601.1211762872496 nearPlane: 14.809855917663832 upVector: [0.0, 1.0, 0.0] interest point: [9.704483032226562, 6.385875701904297, -5.001008987426758] eye point: [9.704483032226562, 6.385875701904297, 291.1961093658496]}

The viewport file will look like this:

{"farPlane": 601.1211762872496, "nearPlane": 14.809855917663832, "upVector": [0.0, 1.0, 0.0], "targetPosition": [9.704483032226562, 6.385875701904297, -5.001008987426758],  "eyePosition": [9.704483032226562, 6.385875701904297, 291.1961093658496]}
  1. The first exported file -[filename]_1.json is the metadata file and contains informations of other required files including primitives type, url and etc. It also contains information of the viewport file (as mentioned above) but as the parameters are not known to the exporters. Users have to add it to the metadata file themselves and it looks something like:

    { "Type" : "View", "URL" : "new_models_view.json" }

Make sure all the json files are located in the same folder and now we should have all files required and we are ready to view them.

*please not that only surfaces are supported at this moment.

For PyZinc users:

Take a look at the following page: https://github.com/alan-wu/PyZinc2ZincJS

Using the sample page:

I have included a simple html page - multiscenes_example.html which will display simple models. You can also view the following page to see mroe WebGL based Zinc in action: http://sites.bioeng.auckland.ac.nz/webgl_zinc_collections/

Use of ThreeJS:

This library wraps the ThreeJS library and provides a more Zinc-like experience to users. I have modified the ThreeJS backend slightly to fit my usage here, you can find the github repository of my ThreeJS fork here: https://github.com/alan-wu/three.js

Basic controls:

  • Left click/single finger touch move: Rotate
  • Middle click/three finger touch move: Translate
  • Right click/two finger pinch: Zoom