oboe.js-website icon indicating copy to clipboard operation
oboe.js-website copied to clipboard

Published 20 hours ago • verified publisher icon jimhigson

How are the demos made?

Open gaurav21r opened this issue 8 years ago • 3 comments

Hello! Oboe.js is really fantastic and equally fantastic are the demo animations!

How are these animations made? By inspecting source I saw that the diagrams themselves are SVG. Is there any animation framework being used? Is one created especially for this.

Having seen https://github.com/jimhigson/oboe.js-website/tree/master/statics/js/demo The animation framework looks pretty general purpose!

Any chance maybe we could pull it out and make it standalone! Just a passing thought but would love to get some insight at least!

gaurav21r avatar Mar 02 '16 17:03 gaurav21r

Hi Gaurav

Sure, you could pull it out into a standard library for visualising similar things. It is based on a pretty simple MVC simulation model - it simulates network traffic and keeps an animation going to match the model.

All I used to build it is jQuery and SVG.

Jim

On Wed, Mar 2, 2016 at 5:11 PM, Gaurav Ramanan [email protected] wrote:

Hello! Oboe.js is really fantastic and equally fantastic are the demo animations!

How are these animations made? By inspecting source I saw that the diagrams themselves are SVG. Is there any animation framework being used? Is one created especially for this.

Having seen https://github.com/jimhigson/oboe.js-website/tree/master/statics/js/demo The animation framework looks pretty general purpose!

Any chance maybe we could pull it out and make it standalone! Just a passing thought but would love to get some insight at least!

— Reply to this email directly or view it on GitHub https://github.com/jimhigson/oboe.js-website/issues/16.

jimhigson avatar Mar 07 '16 09:03 jimhigson

@jimhigson Wow. THanks. But I need some guidance. Can you write a short intro into how to get familiar with the codebase? What file does what?

gaurav21r avatar Mar 07 '16 11:03 gaurav21r

The code for the animations is all in: https://github.com/jimhigson/oboe.js-website/tree/master/statics/js/demo

Should read ok for the most part. The model-related stuff is in the model dir, views in views etc. Descriptions of each animation are in scenarios.js.

On Mon, Mar 7, 2016 at 11:28 AM, Gaurav Ramanan [email protected] wrote:

@jimhigson https://github.com/jimhigson Wow. THanks. But I need some guidance. Can you write a short intro into how to get familiar with the codebase? What file does what?

— Reply to this email directly or view it on GitHub https://github.com/jimhigson/oboe.js-website/issues/16#issuecomment-193213783 .

jimhigson avatar Mar 07 '16 11:03 jimhigson