open-index/open-npm huggingface dataset:
npm package: @petitatelier/d3-force-graph
Description: Defines the ‹d3-force-graph› element, a force directed graph, that layouts HTML and SVG as nodes
Author: Yves Lange
Latest version: 0.0.2

# D3-force-graph Component

![example of force directed graph](https://github.com/petitatelier/d3-web-components/raw/master/demos/assets/screenshots/20190222-ylange-d3-force-graphs.jpg)

An experiment around force directed graphs inspired by 
*[Disjoint Force-Directed Graph](https://beta.observablehq.com/@mbostock/disjoint-force-directed-graph)*

## Example of usage:
### Using SVG primitives
 
```
<d3-force-graph>
 <svg slot="nodes">
   <circle id=1 r=10></circle>
   <circle id=2 r=10></circle>
   ...
 </svg>
 <svg slot="links">
   <link source=1 target=2></link>
 </svg>
</d3-force-graph>
```
 
## Using HTML elements
 
```
<d3-force-graph>
 <div slot="nodes">
  <input id=1 type=text></input>
  <video id=2 src='...'></video>
   ...
 </svg>
 <svg slot="links">
   <link source=1 target=2></link>
 </svg>
</d3-force-graph>
```
npm package: @petitatelier/dia-code
Description: The ‹dia-code› web component displays code fragments in a monospaced font
Author: Olivier & Yves Lange
Latest version: 0.2.11

# @petitatelier/dia-code

Defines the ‹dia-code› web component, which displays code fragments in a monospaced font, eventually highlighted.

## Features

* Displays a code fragment in a monospaced font.

## Usage

```html
<dia-code type="javascript">
  customElements.define( "x-element", class XElement {
    …
  });
</dia-code>
```
npm package: @petitatelier/dia-glitch
Description: A component to display Glitch code editor and/or preview inside a diapositive of a slideshow.
Author: Olivier & Yves Lange
Latest version: 0.0.3
Deprecated: Package renamed to @petitatelier/dia-livecode

# @petitatelier/dia-glitch

A component to display Glitch code editor and/or preview inside a diapositive of a slideshow.

## Usage

```html
    <dia-show slide="s01" display="proj01">
      <dia-slide id="s01">
        <dia-po display="proj01"><dia-glitch src="…" editor></dia-glitch></dia-po>
        <dia-po display="tv01"><dia-glitch src="…" preview></dia-glitch></dia-po>
        <dia-po display="tv02"></dia-po>
        <dia-po display="pres01"></dia-po>
        <dia-po display="pres02"></dia-po>
      </dia-slide>
      <dia-slide id="s02">
        <dia-po display="proj01"><dia-glitch src="…" both></dia-glitch></dia-po>
        <dia-po display="tv01"></dia-po>
        <dia-po display="tv02"></dia-po>
        <dia-po display="pres01"></dia-po>
        <dia-po display="pres02"></dia-po>
      </dia-slide>
      <dia-slide id="s03">
        <dia-po display="proj01"></dia-po>
        <dia-po display="tv01"></dia-po>
        <dia-po display="tv02"></dia-po>
        <dia-po display="pres01"></dia-po>
        <dia-po display="pres02"></dia-po>
      </dia-slide>
    </dia-show>
<dia-show>
```
npm package: @petitatelier/dia-livecode
Description: The ‹dia-livecode› web component embeds the Glitch collaborative code editor in a diapositive of a slideshow
Author: Olivier & Yves Lange
Latest version: 0.2.11

# @petitatelier/dia-livecode

Defines the ‹dia-livecode› web component, which displays the Glitch collaborative code editor and/or preview inside a diapositive of a slideshow.

## Features

1. [Glitch](https://glitch.com/) as the provider of the live-coding collaborative editor (and [Stackblitz](https://stackblitz.com/) could easily be added, both use a similar URL scheme);
2. Specification of Glitch project with `project="‹projectId›"`;
3. Editor / Preview / Embed views of Glitch with `mode="editor|preview|embed"` attribute;
4. Selection of file to edit with `file="‹filename›"` attribute;
5. Auto-refresh with `refresh="‹timeout›"` attribute (timeout in milliseconds); useful for `preview` mode.

## Usage

```html
    <dia-show slide="s01" display="proj01">
      <dia-slide id="s01">
        <dia-po display="proj01"><dia-livecode project="power-asteroid" mode="editor" file="index.html"></dia-livecode></dia-po>
        <dia-po display="tv01"><dia-livecode project="power-asteroid" mode="preview" refresh="5000"></dia-livecode></dia-po>
        <dia-po display="tv02"></dia-po>
        <dia-po display="pres01"></dia-po>
        <dia-po display="pres02"></dia-po>
      </dia-slide>
      <dia-slide id="s02">
        <dia-po display="proj01"><dia-livecode project="power-asteroid" mode="embed" file="index.html"></dia-livecode></dia-po>
        <dia-po display="tv01"></dia-po>
        <dia-po display="tv02"></dia-po>
        <dia-po display="pres01"></dia-po>
        <dia-po display="pres02"></dia-po>
      </dia-slide>
      <dia-slide id="s03">
        <dia-po display="proj01"></dia-po>
        <dia-po display="tv01"></dia-po>
        <dia-po display="tv02"></dia-po>
        <dia-po display="pres01"></dia-po>
        <dia-po display="pres02"></dia-po>
      </dia-slide>
    </dia-show>
<dia-show>
```
npm package: @petitatelier/dia-show
Description: A multiplex slideshow system, allowing one or more speakers to drive the same presentation, spreading its display on multiple displays
Author: Olivier & Yves Lange
Latest version: 0.2.14

# @petitatelier/dia-show

A multiplex slideshow system, allowing one or more speakers to drive the same presentation, spreading its display on multiple displays — including computers & tablets of the audience.

## Usage

```html
<dia-show slide="s01" display="proj01">
  <dia-slide id="s01">
    <dia-po display="proj01"></dia-po>
    <dia-po display="tv01" default></dia-po>
    <dia-po display="tv02"></dia-po>
    <dia-po display="pres01"></dia-po>
    <dia-po display="pres02"></dia-po>
  </dia-slide>
  <dia-slide id="s02">
    <dia-po display="proj01"></dia-po>
    <dia-po display="tv01"></dia-po>
    <dia-po display="tv02" default></dia-po>
    <dia-po display="pres01"></dia-po>
    <dia-po display="pres02"></dia-po>
  </dia-slide>
  <dia-slide id="s03">
    <dia-po display="proj01"></dia-po>
    <dia-po display="tv01" default></dia-po>
    <dia-po display="tv02"></dia-po>
    <dia-po display="pres01"></dia-po>
    <dia-po display="pres02"></dia-po>
  </dia-slide>
</dia-show>
```

## Adjustment of diapositives to displays

Scale all the diapositives:

```css
dia-po {
  transform: scale( 1)
}
```

Perspective of the diapositives displayed on projector:

```css
dia-po[ display="pj01"] {
  transform: skew( 0, -5deg)
}
```

See also: [MDN › CSS › `transform` property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
npm package: @petitatelier/dia-styles
Description: The CSS styles common to all slideshow packages
Author: Olivier & Yves Lange
Latest version: 0.2.11

# @petitatelier/dia-code

Defines the ‹dia-code› web component, which displays code fragments in a monospaced font, eventually highlighted.

## Features

* Displays a code fragment in a monospaced font.

## Usage

```html
<dia-code type="javascript">
  customElements.define( "x-element", class XElement {
    …
  });
</dia-code>
```
npm package: @petitatelier/osc-bridge
Description: OSC bridge server, enabling bi-directional OSC messaging between Websocket <-> UDP
Author: Olivier Lange
Latest version: 0.2.1

# data-streams/osc-bridge

An _OSC bridge server_, enabling bi-directional OSC messaging between
Websocket <-> UDP.

It is meant to be used by client apps, that use a Web Socket client
to receive/send OSC messages from/to a remote OSC controller, which
would only send/receive UDP datagrams.

## Setup

    $ npm install
    $ npm link

## Usage

    $ osc-bridge [ --auto-ping ]

## Configuration

### OSC bridge server

Before starting the _OSC bridge server_, you might want to tweak its configuration;
add following NPM environment variables in the `config` section of your `package.json`:

    {
      …,
      "config": {
        "osc-bridge": {
          "udp-server": {
            "host": "0.0.0.0",
            "port": "7400"
          },
          "udp-client": {
            "host": "192.168.xxx.yyy",
            "port": "7500"
          },
          "ws-server": {
            "host": "0.0.0.0",
            "port": "8080"
          }
        }
      },
      "devDependencies": {
        "osc-bridge": "latest",
        …
      }
      …
    }

See the [package.json](../../package.json) at the root of this monorepo
for an example.

### OSC remote controller

To send and receive OSC messages to/from the _OSC bridge server_, you will also
need to configure your remote _OSC controller app_.

Use the IP address of the network adapter listed by the _OSC bridge server_
upon start. For instance, if you get following output, your computer and
the _OSC bridge server_ will be reachable at IP `192.168.178.47`:

```
$ npm run dev:osc

> @petitatelier/data-streams@ dev:osc …
> osc-bridge & npm run dev && fg

OSC Websocket <-> UDP bridge server
Bridging OSC over Web Socket to/from `ws://0.0.0.0:8080`
Listening for OSC over UDP on `0.0.0.0:7400`
Broadcasting OSC over UDP to `192.168.178.29:7500`
Local host reachable at: [ en0: `192.168.178.47` ]
…
```

If you were using the popular [TouchOSC](https://hexler.net/software/touchosc)
_remote OSC controller app_, you would consequently configure its _Host_ and
_Port (outgoing)_ fields with IP `192.168.178.47` and port `7400`, as shown
in screencopy hereafter:

<img height="400" alt="TouchOSC configuration · Screencopy"
  src="https://raw.githubusercontent.com/petitatelier/data-streams/master/demos/images/touchosc-config.png">

Back to your `package.json`, to forward OSC messages from the bridge server
to the remote controller, you would adjust the `udp-client.host` field to
the _Local IP address_ `192.168.178.29` shown by TouchOSC; and the
`udp-client.port` field to the value shown in the _Port (incoming)_ field
of TouchOSC:

```
{
  …
  "config": {
    "osc-bridge": {
      …
      "udp-client": {
          "host": "192.168.178.29",
          "port": "7500"
      }
      …
    …
  …
}
```
npm package: @petitatelier/slideshow
Description: A multiplex slideshow system, spreading a presentation on multiple displays
Author: Olivier & Yves Lange
Latest version: 0.0.3
Deprecated: Package renamed to @petitatelier/dia-show

# @petitatelier/slideshow

A multiplex slideshow system, spreading a presentation on multiple displays.

## Usage

```html
<dia-show slide="s01" display="proj01">
  <dia-slide id="s01">
    <dia-po display="proj01"></dia-po>
    <dia-po display="tv01"></dia-po>
    <dia-po display="tv02"></dia-po>
    <dia-po display="pres01"></dia-po>
    <dia-po display="pres02"></dia-po>
  </dia-slide>
  <dia-slide id="s02">
    <dia-po display="proj01"></dia-po>
    <dia-po display="tv01"></dia-po>
    <dia-po display="tv02"></dia-po>
    <dia-po display="pres01"></dia-po>
    <dia-po display="pres02"></dia-po>
  </dia-slide>
  <dia-slide id="s03">
    <dia-po display="proj01"></dia-po>
    <dia-po display="tv01"></dia-po>
    <dia-po display="tv02"></dia-po>
    <dia-po display="pres01"></dia-po>
    <dia-po display="pres02"></dia-po>
  </dia-slide>
</dia-show>
```
npm package: @petitatelier/three-app
Description: Defines the ‹three-app› element, a Three.js app container and view, that animates its scenes and cameras
Author: Olivier Lange
Latest version: 0.2.1

# ‹three-app› element

Three.js app container, that provides animation timing and a registry of cameras and scenes — and synchronizes animation and rendering of the scenes.

## Features

1. Animates the scenes and cameras — synchronized in the same animation step, running at a desired FPS (if possible);
2. Renders the current scene, at the same desired or actual FPS;
3. Handles _resizing_ of its bounding box — propagating the change to the aspect ratio to the cameras and renderers.

Incidentally, also imports [THREE.js](https://github.com/mrdoob/three.js/) (that was just to say it is used, but all
of the elements import it as needed).
npm package: @petitatelier/three-camera
Description: Defines the ‹three-camera› element, to be used by a ‹three-app› container to render a scene
Author: Olivier Lange
Latest version: 0.2.1

# ‹three-camera› element

Creates a camera, to be used by a ‹three-app› container to render a scene. Can be either an orthographic or a perspective camera.

## Features

1. Orthographic or perspective camera;
2. Optional camera orbiter controls;
3. Optional helper, to display camera viewpoint.
npm package: @petitatelier/three-force-graph
Description: Defines a ‹three-force-graph› element, that renders a force 3D graph
Author: Yves Lange
Latest version: 0.2.1

# ‹three-force-graph› class


Creates a force 3D graph element, that can be placed in a scene. 

## Features

TODO

## Example

```html
<three-app class="vflex vfill" fps="60">
  <three-camera id="camera01" type="perspective" position='[0,5,0]'></three-camera>
  <three-scene id="scene01">
    <three-force-graph
      id="three-force-graph"
      position='[0,0,0]'
      verbose
      animated
      generate=300
      generateSpeed=10
      nodeSize=0.5
      >
    </three-force-graph>
  </three-scene>
</three-app>
```

## Screenshots

### Basic three force graph 
201 generated nodes with random colors


<img src="../../demos/assets/screenshots/20190226-three-force-graph.jpg" width=300 />

### Transparent white
301 generated nodes with a white transparent color


<img src="../../demos/assets/screenshots/20190226-three-force-graph-white.jpg" width=300 />

### Radioactive colors
501 generated nodes with a range of color


<img src="../../demos/assets/screenshots/20190226-three-force-graph-radioactive.jpg" width=300 />
npm package: @petitatelier/three-scene
Description: Defines the ‹three-scene› element, that can be rendered and to which objects can be added
Author: Olivier Lange
Latest version: 0.2.1

# ‹three-scene› element

Creates a scene, to be rendered by a ‹three-app› container.

## Features

1. Registers itself with parent ‹three-app› upon creation.
2. Deregisters itself with parent ‹three-app› when disposed.
3. Propagate animation steps to child elements.