Light

bbc / visualise-videocontext Goto Github PK

View Code? Open in Web Editor NEW

4.0 25.0 1.0 7.12 MB

Library to visualise a VideoContext graph

License: BSD 3-Clause "New" or "Revised" License

JavaScript 100.00%

rd-project videocontext rd-stability-yellow rd-section-apmm

visualise-videocontext's Introduction

Introduction

This project provides a visualisation of the graph, showing vertices and edges, from a programmatic configuration of VideoContext.

visualise-videocontext is currently receiving maintenance updates but not under active development.

Example

import VideoContext from 'videocontext'
import VideoContextVisualisation from 'visualise-videocontext'

// 1. Set up VideoContext graph
const vc = new VideoContext(document.getElementById('canvas'))
const v1 = vc.video('http://somewebsite.com/some-video.mp4')
v1.start(0)
const eff = vc.effect(VideoContext.DEFINITIONS.MONOCHROME)
v1.connect(eff)
eff.connect(vc.destination)
vc.play()

// 2. Visualise VideoContext graph

const div = document.getElementById('vis')
// eg <div id="vis"></div> with width and height set in css.

const vis = new VideoContextVisualisation(div)

vis.setData(VideoContext.snapshot(vc))
vis.render()

// Update regularly - could also use VideoContext's built-in callbacks to trigger this.
setInterval(() => {
    vis.setData(VideoContext.snapshot(vc))
    // No need to call render() a second time
}, 100)

Development

Do not use yarn! When you run yarn it seems to install dependencies incorrectly. I'm not sure what's causing this, but just use npm, at least for installing dependencies.

However it is totally fine to use yarn in projects that include visualise-videocontext as a dependency.

visualise-videocontext's People

Contributors

Stargazers

Watchers

Forkers

visualise-videocontext's Issues

[feature request] - Indicate current state of source node.

VideoContext v0.43.0 has introduced a "state" field for each source node in the exportToJSON utility.

The state can be one of the following values: "waiting", "sequenced", "playing", "paused", "ended", "error" and will be changed to reflect the current state of the VideoContext at the point exportToJSON is called.

It might be useful to visually represent what the current state of the node is?

Text should probably line wrap

Otherwise long urls are annoying

Transition printing logic is flawed

Only works for "mix" values and probably messes up other types of transitions.

Make it easy to extend how lines are coloured

there's lots of times we'd like lines to be opaque - if they're connect to a processing node with 'opacity' or 'crossfade'. If we're feeling clever we could even partially discolour lines if several nodes are going into a compositing node with COMBINE definition, and only have as fully opaque the line whose input is 'on top'.

Hangs if we give setValues json string rather than json object

Should probably improve API (setValues isn't a great method name anyway) or at least have a runtime check that throws an error if you don't give it an object.

Probably breaks if a node/edge gets deleted

URLs for custom video nodes are not useful

Maybe VideoContext needs to expose a way to set the displayName of a custom node? Or maybe overkill.

Can't use yarn

Weird dependency lodash bug so have to use npm.

Need to re-set zoom level on each render

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.