Latest revision as of 17:06, 5 December 2005

in English | [[{{{de}}}|deutsch]] | [[{{{fr}}}|français]] | по-русски | автоперевод | 中文版 | 机械翻译

This work is under development

Authors : Khlut, zimbatm

The javascript library is intended to be used in different environments. The usage scenarios are HTML interfaces, which can easily be extended with the library. Interfaces can also be created, by using a simple extension syntax.

Goals

• Easy to embed in existing HTML
• Auto-configurable
• HTML generation

Essay

Configuration

The configuration of a camera goes through a new object's creation.

The object automatically retrieves the data using asyncronous Http requests. Optionally, you can provide the data trough an object to avoid too much queries.

Example:

camera = new Camera('http://192.168.1.3')

camera.model_name(function(model_name) { alert(model_name) } ) // fetches the data and returns it, the value gets cached

camera2 = new Camera('http://zimba:1234@192.168.1.3', {
  api: Api.Axis,
  model_name: '203'})

camera.model_name(function(model_name) { alert(model_name) } ) // returns the data directly

Api

We need a way to make the lib compatible with the different apis and api versions.

Testing that a feature exists :

if (camera.ptz) { // if the function is defined
  document.getElementById('ptz_control').innerHTML = (new Template.Ptz(camera)).source()
}

HTML Generation

Template.Image = function(camera) {
  this.src = camera.picture_path()
  this.alt = camera.name
}
Template.Image.prototype = document.createElement("IMG")

var image = new Template(camera)

document.getElementById('some_element').appendChild(image)

Lib preview example code

var Camera = function(host, options) {
  Camera[host] = this
  this.host = host  

  if (XMLHttpRequest) {
    this.http = new XMLHttpRequest
  } else if (window.ActiveXObject) {
    this.http = new ActiveXObject("Microsoft.XMLHTTP")
  } else {
    throw 'XmlHttpRequest is not supported by your browser'
  }
  
  // pseudo-code
  this.http.fetch(this.host + '/version')
  this.http.callback( Api.factory(this) )
}
Camera.cameras = {}
Camera.prototype = {
  api: null,
  http: null,
  host: '',
  resolutions: [],

  is_loaded: false,
  onload: function(camera) {}, // callback

  picture_path: function() { // todo }
}

Api = {}
Api.factory = function(camera) {
  new Api[this.http.result](camera)
}

Api.Axis = function(camera) {
  for (method_name in this) {
    camera[method_name] = this[method_name]
  }
  
  camera.api = this

  // fetch the data
  camera.http.fetch('resolutions_url')
  camera.http.callback( function(camera) {
    this.resolutions = camera.http.result
  } )
}

Api.Axis.prototype = {
  video_url: function(options) {
    return 'http://' + this.host + '/video/mjpg.cgi'
  }
}