Difference between revisions of "JavaScript API"

From ElphelWiki
Jump to: navigation, search
m (→‎Lib preview example code)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{en|ru=JavaScript_API_ru|cn=JavaScript_API_cn}}
 
{{en|ru=JavaScript_API_ru|cn=JavaScript_API_cn}}
 +
 +
'''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:'''
 +
<pre>
 +
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
 +
 +
</pre>
 +
 +
== Api ==
 +
 +
We need a way to make the lib compatible with the different apis and api versions.
 +
 +
 +
Testing that a feature exists :
 +
<pre>
 +
 +
if (camera.ptz) { // if the function is defined
 +
  document.getElementById('ptz_control').innerHTML = (new Template.Ptz(camera)).source()
 +
}
 +
 +
</pre>
 +
 +
== HTML Generation ==
 +
 +
<pre>
 +
 +
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)
 +
 +
</pre>
 +
 +
== Lib preview example code ==
 +
 +
<pre>
 +
 +
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'
 +
  }
 +
}
 +
 +
</pre>

Latest revision as of 16: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'
  }
}
Retrieved from "https://wiki.elphel.com/index.php?title=JavaScript_API&oldid=2196"