Difference between revisions of "JavaScript API"

From ElphelWiki
Jump to: navigation, search
(first api preview)
m (→‎Lib preview example code)
 
(6 intermediate revisions by the same user not shown)
Line 25: Line 25:
 
camera = new Camera('http://192.168.1.3')
 
camera = new Camera('http://192.168.1.3')
  
−
alert(camera.model_name()) // fetches the data and returns it, the value gets cached
+
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', {
 
camera2 = new Camera('http://zimba:1234@192.168.1.3', {
Line 31: Line 31:
 
   model_name: '203'})
 
   model_name: '203'})
  
−
alert(camera.model_name()) // returns the data directly
+
camera.model_name(function(model_name) { alert(model_name) } ) // returns the data directly
  
 
</pre>
 
</pre>
Line 38: Line 38:
  
 
We need a way to make the lib compatible with the different apis and api versions.
 
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 ==
 
== HTML Generation ==
Line 43: Line 53:
 
<pre>
 
<pre>
  
−
Template.Image = function(camera_source) {
+
Template.Image = function(camera) {
−
   this.template = '<img src="'+camera_source+'" />'
+
   this.src = camera.picture_path()
 +
  this.alt = camera.name
 
}
 
}
−
Template.prototype = new Template()
+
Template.Image.prototype = document.createElement("IMG")
  
−
image = new Template(camera.picture_path())
+
var image = new Template(camera)
  
−
document.getElementById('some_element').innerHTML = image.source()
+
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>
 
</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"