http://wiki.hsyco.com/3.3.0/api.php?action=feedcontributions&user=Gionatan&feedformat=atomHSYCO - User contributions [en]2024-03-29T14:44:45ZUser contributionsMediaWiki 1.33.0http://wiki.hsyco.com/3.3.0/index.php?title=Client_JavaScript_Extension_API&diff=4887Client JavaScript Extension API2014-05-27T11:05:54Z<p>Gionatan: /* uiEvent */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Advanced Programming]]<br />
<div style="color:#CC0000">'''{{Note|<center>WARNING! The client-side JavaScript extensions API is experimental and subject to changes.</center>}}'''<br />
</div><br />
<br />
A project can have specific javascript code that runs on the client-side and manages various events. This code has to be written in an index.js file located inside the project's directory.<br />
<br />
== Events ==<br />
These are functions executed on specific events.<br />
<br />
=== StartupEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function StartupEvent()<br />
</syntaxhighlight><br />
<br />
Executed when the interface is first loaded.<br />
It's a good place to set up the interface and set variables, for example.<br />
<br />
=== userCommand ===<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param)<br />
</syntaxhighlight><br />
<br />
Called by user clicks on user buttons: [[User]], [[UserMini]], [[UserMicro]], [[UserRGB]] or [[UserImage]] objects.<br />
<br />
If you want to navigate to a specific page when the button is pressed (it would be like pressing a [[Link|Link object]]), return a string starting with "page:" followed by the page name; in this case, userCommand() will be called again when that popup or page is closed, with "/close" appended to param.<br />
<br />
'''Parameters:'''<br />
<br />
* name: string - the name field of the user object<br />
* param: string - the param of the user object<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: proceed to send the request to server as it is<br />
* "": assume the event was resolved. Don't send the request to the server<br />
* "page:page name": navigate to the specified page<br />
* "page:back": navigate to the previous page<br />
* "page:forward": navigate to the next page<br />
* "page:close": if the user button that generated the call has an open popup linked to it, close it<br />
* "error": error. Don't send the request to the server<br />
* an object, to specify new name and param values to be sent to the server<br />
<syntaxhighlight lang="javascript"><br />
{name:"new name", param:"new param"}<br />
</syntaxhighlight><br />
<br />
=== userSubmit ===<br />
<syntaxhighlight lang="javascript"><br />
function userSubmit(name, param)<br />
</syntaxhighlight><br />
Called on every submit request (from [[Submit]] objects).<br />
Parameters and return values are the same as the userCommand function.<br />
<br />
=== uiEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function uiEvent(id, attr, value)<br />
</syntaxhighlight><br />
Executed on every UISet received from the server, intercepts a UISet and allows to change it, prevent its execution or execute any other custom code (e.g. set variables).<br />
<br />
'''Parameters:'''<br />
<br />
* id: string - id of the ui object<br />
* attr: string - attribute name<br />
* value: string - new value being set<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: discard the UISet<br />
* <string>: set a new value for the UISet. To keep the UISet as it is, return the initial value<br />
<br />
== Functions ==<br />
=== varSet ===<br />
<syntaxhighlight lang="javascript"><br />
varSet(name,value)<br />
</syntaxhighlight><br />
Sets the value of a variable. If the name begins with '''!''', the variable will be stored in the browser's cache, so that it'll available even after reloading the page or closing and reopening the browser.<br />
<br />
=== varGet ===<br />
<syntaxhighlight lang="javascript"><br />
varGet(name)<br />
</syntaxhighlight><br />
Gets the value of a variable previously set with varSet.<br />
<br />
=== uiSet ===<br />
<syntaxhighlight lang="javascript"><br />
uiSet(id,attr,value)<br />
</syntaxhighlight><br />
Sets a UI Attribute. See [[Project]], [[Page]] or [[UI Objects]] list of attributes.<br />
<br />
=== webLog ===<br />
<syntaxhighlight lang="javascript"><br />
webLog(string)<br />
</syntaxhighlight><br />
Adds a line to the daily log file, viewable from the Manager's [[Log Viewer]].<br />
<br />
== Examples ==<br />
=== Using varget and varset ===<br />
In this example we declare a persistent variable (stored in the browser's local storage) the first time any user button is pressed, we increment it each time up to 10 and then we reset it to 0. When the variable equals 3, the page "page1" is shown. When the variable equals 7, the request isn't forwarded to the server.<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param) {<br />
var a = varGet("!counter"); // get the variable value<br />
<br />
if (!a) // first time and when a is 0<br />
a = 1;<br />
else if (a < 10)<br />
a++;<br />
else // reset<br />
a = 0;<br />
<br />
varSet("!counter",a); // set the variable value<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
if (a == 3)<br />
return "page:page1";<br />
else if (a == 7)<br />
return "";<br />
else<br />
return null;<br />
}<br />
</syntaxhighlight><br />
<br />
== User Object ==<br />
One or more User objects can be declared to send requests from the client to the server.<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() { <br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnErrorEvent(onUserError);<br />
// send reques<br />
user.send("myname","myparam");<br />
<br />
varSet("myvar1","myvalue");<br />
varSet("myvar2",5.3);<br />
varSet("myvar3",[1,2,3]);<br />
varSet("myvar4",{"a":1,"b":2});<br />
}<br />
</syntaxhighlight><br />
<br />
===Methods===<br />
====.send(name, param)====<br />
sends a virtualremote (name and param will be url encoded)<br />
<br />
====.setMaxWaitingTime(msec)====<br />
set max waiting time in msec. If a request exceeds this time, it will be aborted (and fire an onError event, if set).<br />
<br />
====.setMaxRetries(n)====<br />
set max number of retry attempts. If a a request fails, it will keep on retrying until it succeeds or the max number of retries is reached.<br />
Before retrying it will fire an onRetry event, if set.<br />
If n is 0, and retryOnErrorDelay is not 0, it will keep on retrying forever (it will never fire an onError event, if set).<br />
<br />
====.setRetryOnErrorDelay(msec)====<br />
set msec of delay before retrying after a request has failed.<br />
If msec is 0 it won't retry (and will fire an onError event, if set).<br />
<br />
====.setOnLoadedEvent(f)====<br />
f is a function that is called when the request is successful.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.setOnErrorEvent(f)====<br />
f is a function called when the request fails. f is called with an error code parameter: function(errCode)<br />
error codes are enumerated as .ERROR_GENERAL, .ERROR_CONNECTION ...<br />
<br />
====.setOnRetryEvent(f)====<br />
f is a function that is called when the last request failed, before retrying.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.getResponseText()====<br />
get the last response text<br />
<br />
====.getResponseXML()====<br />
get the last response XML<br />
<br />
====.free()====<br />
free the memory and reset the behaviour. It will be reinitialized if any method is called.<br />
<br />
===Error codes===<br />
*'''.ERROR_GENERAL''' : general error<br />
*'''.ERROR_CONNECTION''' : no connection<br />
*'''.ERROR_MAXWAITTIME''' : max waiting time exceeded<br />
*'''.ERROR_LOGOUT''' : client is logged out<br />
*'''.ERROR_LOCK''' : client is locked out<br />
*'''.ERROR_NOACCESS''' : request returned noaccess<br />
<br />
===Examples===<br />
====Try one time, then fire onLoaded or onError====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User();<br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
function onUserError(errCode) {<br />
webLog("error");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry forever, until it succeeds====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setRetryOnErrorDelay(1000); // wait one second before retrying on error<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry 3 times, then fire onError====<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
// init user object<br />
user.setRetryOnErrorDelay(100); // retry almost immediately on error<br />
user.setMaxRetries(3); // retry 3 times, then fire error<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
<br />
function onUserError(errCode) {<br />
webLog("error, already tried 3 times");<br />
if (errCode == user.ERROR_MAXWAITTIME)<br />
webLog("the last request failed because it exceeded the waiting time");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Client_JavaScript_Extension_API&diff=4886Client JavaScript Extension API2014-05-27T11:04:07Z<p>Gionatan: /* uiEvent */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Advanced Programming]]<br />
<div style="color:#CC0000">'''{{Note|<center>WARNING! The client-side JavaScript extensions API is experimental and subject to changes.</center>}}'''<br />
</div><br />
<br />
A project can have specific javascript code that runs on the client-side and manages various events. This code has to be written in an index.js file located inside the project's directory.<br />
<br />
== Events ==<br />
These are functions executed on specific events.<br />
<br />
=== StartupEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function StartupEvent()<br />
</syntaxhighlight><br />
<br />
Executed when the interface is first loaded.<br />
It's a good place to set up the interface and set variables, for example.<br />
<br />
=== userCommand ===<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param)<br />
</syntaxhighlight><br />
<br />
Called by user clicks on user buttons: [[User]], [[UserMini]], [[UserMicro]], [[UserRGB]] or [[UserImage]] objects.<br />
<br />
If you want to navigate to a specific page when the button is pressed (it would be like pressing a [[Link|Link object]]), return a string starting with "page:" followed by the page name; in this case, userCommand() will be called again when that popup or page is closed, with "/close" appended to param.<br />
<br />
'''Parameters:'''<br />
<br />
* name: string - the name field of the user object<br />
* param: string - the param of the user object<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: proceed to send the request to server as it is<br />
* "": assume the event was resolved. Don't send the request to the server<br />
* "page:page name": navigate to the specified page<br />
* "page:back": navigate to the previous page<br />
* "page:forward": navigate to the next page<br />
* "page:close": if the user button that generated the call has an open popup linked to it, close it<br />
* "error": error. Don't send the request to the server<br />
* an object, to specify new name and param values to be sent to the server<br />
<syntaxhighlight lang="javascript"><br />
{name:"new name", param:"new param"}<br />
</syntaxhighlight><br />
<br />
=== userSubmit ===<br />
<syntaxhighlight lang="javascript"><br />
function userSubmit(name, param)<br />
</syntaxhighlight><br />
Called on every submit request (from [[Submit]] objects).<br />
Parameters and return values are the same as the userCommand function.<br />
<br />
=== uiEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function uiEvent(id, attr, value)<br />
</syntaxhighlight><br />
Executed on every UISet received from the server, intercepts a UISet and allows to change it, prevent its execution or execute any other custom code.<br />
<br />
'''Parameters:'''<br />
<br />
* id: string - id of the ui object<br />
* attr: string - attribute name<br />
* value: string - new value being set<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: discard the UISet as proceed to send the request to server as it is<br />
* <string>: set a new value for the UISet<br />
<br />
== Functions ==<br />
=== varSet ===<br />
<syntaxhighlight lang="javascript"><br />
varSet(name,value)<br />
</syntaxhighlight><br />
Sets the value of a variable. If the name begins with '''!''', the variable will be stored in the browser's cache, so that it'll available even after reloading the page or closing and reopening the browser.<br />
<br />
=== varGet ===<br />
<syntaxhighlight lang="javascript"><br />
varGet(name)<br />
</syntaxhighlight><br />
Gets the value of a variable previously set with varSet.<br />
<br />
=== uiSet ===<br />
<syntaxhighlight lang="javascript"><br />
uiSet(id,attr,value)<br />
</syntaxhighlight><br />
Sets a UI Attribute. See [[Project]], [[Page]] or [[UI Objects]] list of attributes.<br />
<br />
=== webLog ===<br />
<syntaxhighlight lang="javascript"><br />
webLog(string)<br />
</syntaxhighlight><br />
Adds a line to the daily log file, viewable from the Manager's [[Log Viewer]].<br />
<br />
== Examples ==<br />
=== Using varget and varset ===<br />
In this example we declare a persistent variable (stored in the browser's local storage) the first time any user button is pressed, we increment it each time up to 10 and then we reset it to 0. When the variable equals 3, the page "page1" is shown. When the variable equals 7, the request isn't forwarded to the server.<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param) {<br />
var a = varGet("!counter"); // get the variable value<br />
<br />
if (!a) // first time and when a is 0<br />
a = 1;<br />
else if (a < 10)<br />
a++;<br />
else // reset<br />
a = 0;<br />
<br />
varSet("!counter",a); // set the variable value<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
if (a == 3)<br />
return "page:page1";<br />
else if (a == 7)<br />
return "";<br />
else<br />
return null;<br />
}<br />
</syntaxhighlight><br />
<br />
== User Object ==<br />
One or more User objects can be declared to send requests from the client to the server.<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() { <br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnErrorEvent(onUserError);<br />
// send reques<br />
user.send("myname","myparam");<br />
<br />
varSet("myvar1","myvalue");<br />
varSet("myvar2",5.3);<br />
varSet("myvar3",[1,2,3]);<br />
varSet("myvar4",{"a":1,"b":2});<br />
}<br />
</syntaxhighlight><br />
<br />
===Methods===<br />
====.send(name, param)====<br />
sends a virtualremote (name and param will be url encoded)<br />
<br />
====.setMaxWaitingTime(msec)====<br />
set max waiting time in msec. If a request exceeds this time, it will be aborted (and fire an onError event, if set).<br />
<br />
====.setMaxRetries(n)====<br />
set max number of retry attempts. If a a request fails, it will keep on retrying until it succeeds or the max number of retries is reached.<br />
Before retrying it will fire an onRetry event, if set.<br />
If n is 0, and retryOnErrorDelay is not 0, it will keep on retrying forever (it will never fire an onError event, if set).<br />
<br />
====.setRetryOnErrorDelay(msec)====<br />
set msec of delay before retrying after a request has failed.<br />
If msec is 0 it won't retry (and will fire an onError event, if set).<br />
<br />
====.setOnLoadedEvent(f)====<br />
f is a function that is called when the request is successful.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.setOnErrorEvent(f)====<br />
f is a function called when the request fails. f is called with an error code parameter: function(errCode)<br />
error codes are enumerated as .ERROR_GENERAL, .ERROR_CONNECTION ...<br />
<br />
====.setOnRetryEvent(f)====<br />
f is a function that is called when the last request failed, before retrying.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.getResponseText()====<br />
get the last response text<br />
<br />
====.getResponseXML()====<br />
get the last response XML<br />
<br />
====.free()====<br />
free the memory and reset the behaviour. It will be reinitialized if any method is called.<br />
<br />
===Error codes===<br />
*'''.ERROR_GENERAL''' : general error<br />
*'''.ERROR_CONNECTION''' : no connection<br />
*'''.ERROR_MAXWAITTIME''' : max waiting time exceeded<br />
*'''.ERROR_LOGOUT''' : client is logged out<br />
*'''.ERROR_LOCK''' : client is locked out<br />
*'''.ERROR_NOACCESS''' : request returned noaccess<br />
<br />
===Examples===<br />
====Try one time, then fire onLoaded or onError====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User();<br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
function onUserError(errCode) {<br />
webLog("error");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry forever, until it succeeds====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setRetryOnErrorDelay(1000); // wait one second before retrying on error<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry 3 times, then fire onError====<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
// init user object<br />
user.setRetryOnErrorDelay(100); // retry almost immediately on error<br />
user.setMaxRetries(3); // retry 3 times, then fire error<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
<br />
function onUserError(errCode) {<br />
webLog("error, already tried 3 times");<br />
if (errCode == user.ERROR_MAXWAITTIME)<br />
webLog("the last request failed because it exceeded the waiting time");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Client_JavaScript_Extension_API&diff=4885Client JavaScript Extension API2014-05-27T11:01:04Z<p>Gionatan: /* userSubmit */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Advanced Programming]]<br />
<div style="color:#CC0000">'''{{Note|<center>WARNING! The client-side JavaScript extensions API is experimental and subject to changes.</center>}}'''<br />
</div><br />
<br />
A project can have specific javascript code that runs on the client-side and manages various events. This code has to be written in an index.js file located inside the project's directory.<br />
<br />
== Events ==<br />
These are functions executed on specific events.<br />
<br />
=== StartupEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function StartupEvent()<br />
</syntaxhighlight><br />
<br />
Executed when the interface is first loaded.<br />
It's a good place to set up the interface and set variables, for example.<br />
<br />
=== userCommand ===<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param)<br />
</syntaxhighlight><br />
<br />
Called by user clicks on user buttons: [[User]], [[UserMini]], [[UserMicro]], [[UserRGB]] or [[UserImage]] objects.<br />
<br />
If you want to navigate to a specific page when the button is pressed (it would be like pressing a [[Link|Link object]]), return a string starting with "page:" followed by the page name; in this case, userCommand() will be called again when that popup or page is closed, with "/close" appended to param.<br />
<br />
'''Parameters:'''<br />
<br />
* name: string - the name field of the user object<br />
* param: string - the param of the user object<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: proceed to send the request to server as it is<br />
* "": assume the event was resolved. Don't send the request to the server<br />
* "page:page name": navigate to the specified page<br />
* "page:back": navigate to the previous page<br />
* "page:forward": navigate to the next page<br />
* "page:close": if the user button that generated the call has an open popup linked to it, close it<br />
* "error": error. Don't send the request to the server<br />
* an object, to specify new name and param values to be sent to the server<br />
<syntaxhighlight lang="javascript"><br />
{name:"new name", param:"new param"}<br />
</syntaxhighlight><br />
<br />
=== userSubmit ===<br />
<syntaxhighlight lang="javascript"><br />
function userSubmit(name, param)<br />
</syntaxhighlight><br />
Called on every submit request (from [[Submit]] objects).<br />
Parameters and return values are the same as the userCommand function.<br />
<br />
=== uiEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function uiEvent(id, attr, value)<br />
</syntaxhighlight><br />
Executed on every UISet received from the server.<br />
<br />
== Functions ==<br />
=== varSet ===<br />
<syntaxhighlight lang="javascript"><br />
varSet(name,value)<br />
</syntaxhighlight><br />
Sets the value of a variable. If the name begins with '''!''', the variable will be stored in the browser's cache, so that it'll available even after reloading the page or closing and reopening the browser.<br />
<br />
=== varGet ===<br />
<syntaxhighlight lang="javascript"><br />
varGet(name)<br />
</syntaxhighlight><br />
Gets the value of a variable previously set with varSet.<br />
<br />
=== uiSet ===<br />
<syntaxhighlight lang="javascript"><br />
uiSet(id,attr,value)<br />
</syntaxhighlight><br />
Sets a UI Attribute. See [[Project]], [[Page]] or [[UI Objects]] list of attributes.<br />
<br />
=== webLog ===<br />
<syntaxhighlight lang="javascript"><br />
webLog(string)<br />
</syntaxhighlight><br />
Adds a line to the daily log file, viewable from the Manager's [[Log Viewer]].<br />
<br />
== Examples ==<br />
=== Using varget and varset ===<br />
In this example we declare a persistent variable (stored in the browser's local storage) the first time any user button is pressed, we increment it each time up to 10 and then we reset it to 0. When the variable equals 3, the page "page1" is shown. When the variable equals 7, the request isn't forwarded to the server.<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param) {<br />
var a = varGet("!counter"); // get the variable value<br />
<br />
if (!a) // first time and when a is 0<br />
a = 1;<br />
else if (a < 10)<br />
a++;<br />
else // reset<br />
a = 0;<br />
<br />
varSet("!counter",a); // set the variable value<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
if (a == 3)<br />
return "page:page1";<br />
else if (a == 7)<br />
return "";<br />
else<br />
return null;<br />
}<br />
</syntaxhighlight><br />
<br />
== User Object ==<br />
One or more User objects can be declared to send requests from the client to the server.<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() { <br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnErrorEvent(onUserError);<br />
// send reques<br />
user.send("myname","myparam");<br />
<br />
varSet("myvar1","myvalue");<br />
varSet("myvar2",5.3);<br />
varSet("myvar3",[1,2,3]);<br />
varSet("myvar4",{"a":1,"b":2});<br />
}<br />
</syntaxhighlight><br />
<br />
===Methods===<br />
====.send(name, param)====<br />
sends a virtualremote (name and param will be url encoded)<br />
<br />
====.setMaxWaitingTime(msec)====<br />
set max waiting time in msec. If a request exceeds this time, it will be aborted (and fire an onError event, if set).<br />
<br />
====.setMaxRetries(n)====<br />
set max number of retry attempts. If a a request fails, it will keep on retrying until it succeeds or the max number of retries is reached.<br />
Before retrying it will fire an onRetry event, if set.<br />
If n is 0, and retryOnErrorDelay is not 0, it will keep on retrying forever (it will never fire an onError event, if set).<br />
<br />
====.setRetryOnErrorDelay(msec)====<br />
set msec of delay before retrying after a request has failed.<br />
If msec is 0 it won't retry (and will fire an onError event, if set).<br />
<br />
====.setOnLoadedEvent(f)====<br />
f is a function that is called when the request is successful.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.setOnErrorEvent(f)====<br />
f is a function called when the request fails. f is called with an error code parameter: function(errCode)<br />
error codes are enumerated as .ERROR_GENERAL, .ERROR_CONNECTION ...<br />
<br />
====.setOnRetryEvent(f)====<br />
f is a function that is called when the last request failed, before retrying.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.getResponseText()====<br />
get the last response text<br />
<br />
====.getResponseXML()====<br />
get the last response XML<br />
<br />
====.free()====<br />
free the memory and reset the behaviour. It will be reinitialized if any method is called.<br />
<br />
===Error codes===<br />
*'''.ERROR_GENERAL''' : general error<br />
*'''.ERROR_CONNECTION''' : no connection<br />
*'''.ERROR_MAXWAITTIME''' : max waiting time exceeded<br />
*'''.ERROR_LOGOUT''' : client is logged out<br />
*'''.ERROR_LOCK''' : client is locked out<br />
*'''.ERROR_NOACCESS''' : request returned noaccess<br />
<br />
===Examples===<br />
====Try one time, then fire onLoaded or onError====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User();<br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
function onUserError(errCode) {<br />
webLog("error");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry forever, until it succeeds====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setRetryOnErrorDelay(1000); // wait one second before retrying on error<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry 3 times, then fire onError====<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
// init user object<br />
user.setRetryOnErrorDelay(100); // retry almost immediately on error<br />
user.setMaxRetries(3); // retry 3 times, then fire error<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
<br />
function onUserError(errCode) {<br />
webLog("error, already tried 3 times");<br />
if (errCode == user.ERROR_MAXWAITTIME)<br />
webLog("the last request failed because it exceeded the waiting time");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Client_JavaScript_Extension_API&diff=4883Client JavaScript Extension API2014-05-26T12:44:32Z<p>Gionatan: /* uiEvent */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Advanced Programming]]<br />
<div style="color:#CC0000">'''{{Note|<center>WARNING! The client-side JavaScript extensions API is experimental and subject to changes.</center>}}'''<br />
</div><br />
<br />
A project can have specific javascript code that runs on the client-side and manages various events. This code has to be written in an index.js file located inside the project's directory.<br />
<br />
== Events ==<br />
These are functions executed on specific events.<br />
<br />
=== StartupEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function StartupEvent()<br />
</syntaxhighlight><br />
<br />
Executed when the interface is first loaded.<br />
It's a good place to set up the interface and set variables, for example.<br />
<br />
=== userCommand ===<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param)<br />
</syntaxhighlight><br />
<br />
Called by user clicks on user buttons: [[User]], [[UserMini]], [[UserMicro]], [[UserRGB]] or [[UserImage]] objects.<br />
<br />
If you want to navigate to a specific page when the button is pressed (it would be like pressing a [[Link|Link object]]), return a string starting with "page:" followed by the page name; in this case, userCommand() will be called again when that popup or page is closed, with "/close" appended to param.<br />
<br />
'''Parameters:'''<br />
<br />
* name: string - the name field of the user object<br />
* param: string - the param of the user object<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: proceed to send the request to server as it is<br />
* "": assume the event was resolved. Don't send the request to the server<br />
* "page:page name": navigate to the specified page<br />
* "page:back": navigate to the previous page<br />
* "page:forward": navigate to the next page<br />
* "page:close": if the user button that generated the call has an open popup linked to it, close it<br />
* "error": error. Don't send the request to the server<br />
* an object, to specify new name and param values to be sent to the server<br />
<syntaxhighlight lang="javascript"><br />
{name:"new name", param:"new param"}<br />
</syntaxhighlight><br />
<br />
=== userSubmit ===<br />
<syntaxhighlight lang="javascript"><br />
function userSubmit(name, param)<br />
</syntaxhighlight><br />
Executed on every submit request (from [[Submit]] objects).<br />
E.g.<br />
<br />
=== uiEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function uiEvent(id, attr, value)<br />
</syntaxhighlight><br />
Executed on every UISet received from the server.<br />
<br />
== Functions ==<br />
=== varSet ===<br />
<syntaxhighlight lang="javascript"><br />
varSet(name,value)<br />
</syntaxhighlight><br />
Sets the value of a variable. If the name begins with '''!''', the variable will be stored in the browser's cache, so that it'll available even after reloading the page or closing and reopening the browser.<br />
<br />
=== varGet ===<br />
<syntaxhighlight lang="javascript"><br />
varGet(name)<br />
</syntaxhighlight><br />
Gets the value of a variable previously set with varSet.<br />
<br />
=== uiSet ===<br />
<syntaxhighlight lang="javascript"><br />
uiSet(id,attr,value)<br />
</syntaxhighlight><br />
Sets a UI Attribute. See [[Project]], [[Page]] or [[UI Objects]] list of attributes.<br />
<br />
=== webLog ===<br />
<syntaxhighlight lang="javascript"><br />
webLog(string)<br />
</syntaxhighlight><br />
Adds a line to the daily log file, viewable from the Manager's [[Log Viewer]].<br />
<br />
== Examples ==<br />
=== Using varget and varset ===<br />
In this example we declare a persistent variable (stored in the browser's local storage) the first time any user button is pressed, we increment it each time up to 10 and then we reset it to 0. When the variable equals 3, the page "page1" is shown. When the variable equals 7, the request isn't forwarded to the server.<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param) {<br />
var a = varGet("!counter"); // get the variable value<br />
<br />
if (!a) // first time and when a is 0<br />
a = 1;<br />
else if (a < 10)<br />
a++;<br />
else // reset<br />
a = 0;<br />
<br />
varSet("!counter",a); // set the variable value<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
if (a == 3)<br />
return "page:page1";<br />
else if (a == 7)<br />
return "";<br />
else<br />
return null;<br />
}<br />
</syntaxhighlight><br />
<br />
== User Object ==<br />
One or more User objects can be declared to send requests from the client to the server.<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() { <br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnErrorEvent(onUserError);<br />
// send reques<br />
user.send("myname","myparam");<br />
<br />
varSet("myvar1","myvalue");<br />
varSet("myvar2",5.3);<br />
varSet("myvar3",[1,2,3]);<br />
varSet("myvar4",{"a":1,"b":2});<br />
}<br />
</syntaxhighlight><br />
<br />
===Methods===<br />
====.send(name, param)====<br />
sends a virtualremote (name and param will be url encoded)<br />
<br />
====.setMaxWaitingTime(msec)====<br />
set max waiting time in msec. If a request exceeds this time, it will be aborted (and fire an onError event, if set).<br />
<br />
====.setMaxRetries(n)====<br />
set max number of retry attempts. If a a request fails, it will keep on retrying until it succeeds or the max number of retries is reached.<br />
Before retrying it will fire an onRetry event, if set.<br />
If n is 0, and retryOnErrorDelay is not 0, it will keep on retrying forever (it will never fire an onError event, if set).<br />
<br />
====.setRetryOnErrorDelay(msec)====<br />
set msec of delay before retrying after a request has failed.<br />
If msec is 0 it won't retry (and will fire an onError event, if set).<br />
<br />
====.setOnLoadedEvent(f)====<br />
f is a function that is called when the request is successful.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.setOnErrorEvent(f)====<br />
f is a function called when the request fails. f is called with an error code parameter: function(errCode)<br />
error codes are enumerated as .ERROR_GENERAL, .ERROR_CONNECTION ...<br />
<br />
====.setOnRetryEvent(f)====<br />
f is a function that is called when the last request failed, before retrying.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.getResponseText()====<br />
get the last response text<br />
<br />
====.getResponseXML()====<br />
get the last response XML<br />
<br />
====.free()====<br />
free the memory and reset the behaviour. It will be reinitialized if any method is called.<br />
<br />
===Error codes===<br />
*'''.ERROR_GENERAL''' : general error<br />
*'''.ERROR_CONNECTION''' : no connection<br />
*'''.ERROR_MAXWAITTIME''' : max waiting time exceeded<br />
*'''.ERROR_LOGOUT''' : client is logged out<br />
*'''.ERROR_LOCK''' : client is locked out<br />
*'''.ERROR_NOACCESS''' : request returned noaccess<br />
<br />
===Examples===<br />
====Try one time, then fire onLoaded or onError====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User();<br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
function onUserError(errCode) {<br />
webLog("error");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry forever, until it succeeds====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setRetryOnErrorDelay(1000); // wait one second before retrying on error<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry 3 times, then fire onError====<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
// init user object<br />
user.setRetryOnErrorDelay(100); // retry almost immediately on error<br />
user.setMaxRetries(3); // retry 3 times, then fire error<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
<br />
function onUserError(errCode) {<br />
webLog("error, already tried 3 times");<br />
if (errCode == user.ERROR_MAXWAITTIME)<br />
webLog("the last request failed because it exceeded the waiting time");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Client_JavaScript_Extension_API&diff=4882Client JavaScript Extension API2014-05-26T10:37:06Z<p>Gionatan: /* webLog */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Advanced Programming]]<br />
<div style="color:#CC0000">'''{{Note|<center>WARNING! The client-side JavaScript extensions API is experimental and subject to changes.</center>}}'''<br />
</div><br />
<br />
A project can have specific javascript code that runs on the client-side and manages various events. This code has to be written in an index.js file located inside the project's directory.<br />
<br />
== Events ==<br />
These are functions executed on specific events.<br />
<br />
=== StartupEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function StartupEvent()<br />
</syntaxhighlight><br />
<br />
Executed when the interface is first loaded.<br />
It's a good place to set up the interface and set variables, for example.<br />
<br />
=== userCommand ===<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param)<br />
</syntaxhighlight><br />
<br />
Called by user clicks on user buttons: [[User]], [[UserMini]], [[UserMicro]], [[UserRGB]] or [[UserImage]] objects.<br />
<br />
If you want to navigate to a specific page when the button is pressed (it would be like pressing a [[Link|Link object]]), return a string starting with "page:" followed by the page name; in this case, userCommand() will be called again when that popup or page is closed, with "/close" appended to param.<br />
<br />
'''Parameters:'''<br />
<br />
* name: string - the name field of the user object<br />
* param: string - the param of the user object<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: proceed to send the request to server as it is<br />
* "": assume the event was resolved. Don't send the request to the server<br />
* "page:page name": navigate to the specified page<br />
* "page:back": navigate to the previous page<br />
* "page:forward": navigate to the next page<br />
* "page:close": if the user button that generated the call has an open popup linked to it, close it<br />
* "error": error. Don't send the request to the server<br />
* an object, to specify new name and param values to be sent to the server<br />
<syntaxhighlight lang="javascript"><br />
{name:"new name", param:"new param"}<br />
</syntaxhighlight><br />
<br />
=== userSubmit ===<br />
<syntaxhighlight lang="javascript"><br />
function userSubmit(name, param)<br />
</syntaxhighlight><br />
Executed on every submit request (from [[Submit]] objects).<br />
E.g.<br />
<br />
=== uiEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function uiEvent(id, attr, value)<br />
</syntaxhighlight><br />
Executed on every UISet received from the server. <br />
E.g.<br />
<br />
== Functions ==<br />
=== varSet ===<br />
<syntaxhighlight lang="javascript"><br />
varSet(name,value)<br />
</syntaxhighlight><br />
Sets the value of a variable. If the name begins with '''!''', the variable will be stored in the browser's cache, so that it'll available even after reloading the page or closing and reopening the browser.<br />
<br />
=== varGet ===<br />
<syntaxhighlight lang="javascript"><br />
varGet(name)<br />
</syntaxhighlight><br />
Gets the value of a variable previously set with varSet.<br />
<br />
=== uiSet ===<br />
<syntaxhighlight lang="javascript"><br />
uiSet(id,attr,value)<br />
</syntaxhighlight><br />
Sets a UI Attribute. See [[Project]], [[Page]] or [[UI Objects]] list of attributes.<br />
<br />
=== webLog ===<br />
<syntaxhighlight lang="javascript"><br />
webLog(string)<br />
</syntaxhighlight><br />
Adds a line to the daily log file, viewable from the Manager's [[Log Viewer]].<br />
<br />
== Examples ==<br />
=== Using varget and varset ===<br />
In this example we declare a persistent variable (stored in the browser's local storage) the first time any user button is pressed, we increment it each time up to 10 and then we reset it to 0. When the variable equals 3, the page "page1" is shown. When the variable equals 7, the request isn't forwarded to the server.<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param) {<br />
var a = varGet("!counter"); // get the variable value<br />
<br />
if (!a) // first time and when a is 0<br />
a = 1;<br />
else if (a < 10)<br />
a++;<br />
else // reset<br />
a = 0;<br />
<br />
varSet("!counter",a); // set the variable value<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
if (a == 3)<br />
return "page:page1";<br />
else if (a == 7)<br />
return "";<br />
else<br />
return null;<br />
}<br />
</syntaxhighlight><br />
<br />
== User Object ==<br />
One or more User objects can be declared to send requests from the client to the server.<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() { <br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnErrorEvent(onUserError);<br />
// send reques<br />
user.send("myname","myparam");<br />
<br />
varSet("myvar1","myvalue");<br />
varSet("myvar2",5.3);<br />
varSet("myvar3",[1,2,3]);<br />
varSet("myvar4",{"a":1,"b":2});<br />
}<br />
</syntaxhighlight><br />
<br />
===Methods===<br />
====.send(name, param)====<br />
sends a virtualremote (name and param will be url encoded)<br />
<br />
====.setMaxWaitingTime(msec)====<br />
set max waiting time in msec. If a request exceeds this time, it will be aborted (and fire an onError event, if set).<br />
<br />
====.setMaxRetries(n)====<br />
set max number of retry attempts. If a a request fails, it will keep on retrying until it succeeds or the max number of retries is reached.<br />
Before retrying it will fire an onRetry event, if set.<br />
If n is 0, and retryOnErrorDelay is not 0, it will keep on retrying forever (it will never fire an onError event, if set).<br />
<br />
====.setRetryOnErrorDelay(msec)====<br />
set msec of delay before retrying after a request has failed.<br />
If msec is 0 it won't retry (and will fire an onError event, if set).<br />
<br />
====.setOnLoadedEvent(f)====<br />
f is a function that is called when the request is successful.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.setOnErrorEvent(f)====<br />
f is a function called when the request fails. f is called with an error code parameter: function(errCode)<br />
error codes are enumerated as .ERROR_GENERAL, .ERROR_CONNECTION ...<br />
<br />
====.setOnRetryEvent(f)====<br />
f is a function that is called when the last request failed, before retrying.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.getResponseText()====<br />
get the last response text<br />
<br />
====.getResponseXML()====<br />
get the last response XML<br />
<br />
====.free()====<br />
free the memory and reset the behaviour. It will be reinitialized if any method is called.<br />
<br />
===Error codes===<br />
*'''.ERROR_GENERAL''' : general error<br />
*'''.ERROR_CONNECTION''' : no connection<br />
*'''.ERROR_MAXWAITTIME''' : max waiting time exceeded<br />
*'''.ERROR_LOGOUT''' : client is logged out<br />
*'''.ERROR_LOCK''' : client is locked out<br />
*'''.ERROR_NOACCESS''' : request returned noaccess<br />
<br />
===Examples===<br />
====Try one time, then fire onLoaded or onError====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User();<br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
function onUserError(errCode) {<br />
webLog("error");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry forever, until it succeeds====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setRetryOnErrorDelay(1000); // wait one second before retrying on error<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry 3 times, then fire onError====<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
// init user object<br />
user.setRetryOnErrorDelay(100); // retry almost immediately on error<br />
user.setMaxRetries(3); // retry 3 times, then fire error<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
<br />
function onUserError(errCode) {<br />
webLog("error, already tried 3 times");<br />
if (errCode == user.ERROR_MAXWAITTIME)<br />
webLog("the last request failed because it exceeded the waiting time");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Client_JavaScript_Extension_API&diff=4881Client JavaScript Extension API2014-05-26T10:36:50Z<p>Gionatan: /* webLog */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Advanced Programming]]<br />
<div style="color:#CC0000">'''{{Note|<center>WARNING! The client-side JavaScript extensions API is experimental and subject to changes.</center>}}'''<br />
</div><br />
<br />
A project can have specific javascript code that runs on the client-side and manages various events. This code has to be written in an index.js file located inside the project's directory.<br />
<br />
== Events ==<br />
These are functions executed on specific events.<br />
<br />
=== StartupEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function StartupEvent()<br />
</syntaxhighlight><br />
<br />
Executed when the interface is first loaded.<br />
It's a good place to set up the interface and set variables, for example.<br />
<br />
=== userCommand ===<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param)<br />
</syntaxhighlight><br />
<br />
Called by user clicks on user buttons: [[User]], [[UserMini]], [[UserMicro]], [[UserRGB]] or [[UserImage]] objects.<br />
<br />
If you want to navigate to a specific page when the button is pressed (it would be like pressing a [[Link|Link object]]), return a string starting with "page:" followed by the page name; in this case, userCommand() will be called again when that popup or page is closed, with "/close" appended to param.<br />
<br />
'''Parameters:'''<br />
<br />
* name: string - the name field of the user object<br />
* param: string - the param of the user object<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: proceed to send the request to server as it is<br />
* "": assume the event was resolved. Don't send the request to the server<br />
* "page:page name": navigate to the specified page<br />
* "page:back": navigate to the previous page<br />
* "page:forward": navigate to the next page<br />
* "page:close": if the user button that generated the call has an open popup linked to it, close it<br />
* "error": error. Don't send the request to the server<br />
* an object, to specify new name and param values to be sent to the server<br />
<syntaxhighlight lang="javascript"><br />
{name:"new name", param:"new param"}<br />
</syntaxhighlight><br />
<br />
=== userSubmit ===<br />
<syntaxhighlight lang="javascript"><br />
function userSubmit(name, param)<br />
</syntaxhighlight><br />
Executed on every submit request (from [[Submit]] objects).<br />
E.g.<br />
<br />
=== uiEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function uiEvent(id, attr, value)<br />
</syntaxhighlight><br />
Executed on every UISet received from the server. <br />
E.g.<br />
<br />
== Functions ==<br />
=== varSet ===<br />
<syntaxhighlight lang="javascript"><br />
varSet(name,value)<br />
</syntaxhighlight><br />
Sets the value of a variable. If the name begins with '''!''', the variable will be stored in the browser's cache, so that it'll available even after reloading the page or closing and reopening the browser.<br />
<br />
=== varGet ===<br />
<syntaxhighlight lang="javascript"><br />
varGet(name)<br />
</syntaxhighlight><br />
Gets the value of a variable previously set with varSet.<br />
<br />
=== uiSet ===<br />
<syntaxhighlight lang="javascript"><br />
uiSet(id,attr,value)<br />
</syntaxhighlight><br />
Sets a UI Attribute. See [[Project]], [[Page]] or [[UI Objects]] list of attributes.<br />
<br />
=== webLog ===<br />
<syntaxhighlight lang="javascript"><br />
webLog(string)<br />
</syntaxhighlight><br />
Adds a line to the log, viewable from the Manager's [[Log Viewer]].<br />
<br />
== Examples ==<br />
=== Using varget and varset ===<br />
In this example we declare a persistent variable (stored in the browser's local storage) the first time any user button is pressed, we increment it each time up to 10 and then we reset it to 0. When the variable equals 3, the page "page1" is shown. When the variable equals 7, the request isn't forwarded to the server.<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param) {<br />
var a = varGet("!counter"); // get the variable value<br />
<br />
if (!a) // first time and when a is 0<br />
a = 1;<br />
else if (a < 10)<br />
a++;<br />
else // reset<br />
a = 0;<br />
<br />
varSet("!counter",a); // set the variable value<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
if (a == 3)<br />
return "page:page1";<br />
else if (a == 7)<br />
return "";<br />
else<br />
return null;<br />
}<br />
</syntaxhighlight><br />
<br />
== User Object ==<br />
One or more User objects can be declared to send requests from the client to the server.<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() { <br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnErrorEvent(onUserError);<br />
// send reques<br />
user.send("myname","myparam");<br />
<br />
varSet("myvar1","myvalue");<br />
varSet("myvar2",5.3);<br />
varSet("myvar3",[1,2,3]);<br />
varSet("myvar4",{"a":1,"b":2});<br />
}<br />
</syntaxhighlight><br />
<br />
===Methods===<br />
====.send(name, param)====<br />
sends a virtualremote (name and param will be url encoded)<br />
<br />
====.setMaxWaitingTime(msec)====<br />
set max waiting time in msec. If a request exceeds this time, it will be aborted (and fire an onError event, if set).<br />
<br />
====.setMaxRetries(n)====<br />
set max number of retry attempts. If a a request fails, it will keep on retrying until it succeeds or the max number of retries is reached.<br />
Before retrying it will fire an onRetry event, if set.<br />
If n is 0, and retryOnErrorDelay is not 0, it will keep on retrying forever (it will never fire an onError event, if set).<br />
<br />
====.setRetryOnErrorDelay(msec)====<br />
set msec of delay before retrying after a request has failed.<br />
If msec is 0 it won't retry (and will fire an onError event, if set).<br />
<br />
====.setOnLoadedEvent(f)====<br />
f is a function that is called when the request is successful.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.setOnErrorEvent(f)====<br />
f is a function called when the request fails. f is called with an error code parameter: function(errCode)<br />
error codes are enumerated as .ERROR_GENERAL, .ERROR_CONNECTION ...<br />
<br />
====.setOnRetryEvent(f)====<br />
f is a function that is called when the last request failed, before retrying.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.getResponseText()====<br />
get the last response text<br />
<br />
====.getResponseXML()====<br />
get the last response XML<br />
<br />
====.free()====<br />
free the memory and reset the behaviour. It will be reinitialized if any method is called.<br />
<br />
===Error codes===<br />
*'''.ERROR_GENERAL''' : general error<br />
*'''.ERROR_CONNECTION''' : no connection<br />
*'''.ERROR_MAXWAITTIME''' : max waiting time exceeded<br />
*'''.ERROR_LOGOUT''' : client is logged out<br />
*'''.ERROR_LOCK''' : client is locked out<br />
*'''.ERROR_NOACCESS''' : request returned noaccess<br />
<br />
===Examples===<br />
====Try one time, then fire onLoaded or onError====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User();<br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
function onUserError(errCode) {<br />
webLog("error");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry forever, until it succeeds====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setRetryOnErrorDelay(1000); // wait one second before retrying on error<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry 3 times, then fire onError====<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
// init user object<br />
user.setRetryOnErrorDelay(100); // retry almost immediately on error<br />
user.setMaxRetries(3); // retry 3 times, then fire error<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
<br />
function onUserError(errCode) {<br />
webLog("error, already tried 3 times");<br />
if (errCode == user.ERROR_MAXWAITTIME)<br />
webLog("the last request failed because it exceeded the waiting time");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Client_JavaScript_Extension_API&diff=4880Client JavaScript Extension API2014-05-26T10:36:28Z<p>Gionatan: /* Functions */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Advanced Programming]]<br />
<div style="color:#CC0000">'''{{Note|<center>WARNING! The client-side JavaScript extensions API is experimental and subject to changes.</center>}}'''<br />
</div><br />
<br />
A project can have specific javascript code that runs on the client-side and manages various events. This code has to be written in an index.js file located inside the project's directory.<br />
<br />
== Events ==<br />
These are functions executed on specific events.<br />
<br />
=== StartupEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function StartupEvent()<br />
</syntaxhighlight><br />
<br />
Executed when the interface is first loaded.<br />
It's a good place to set up the interface and set variables, for example.<br />
<br />
=== userCommand ===<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param)<br />
</syntaxhighlight><br />
<br />
Called by user clicks on user buttons: [[User]], [[UserMini]], [[UserMicro]], [[UserRGB]] or [[UserImage]] objects.<br />
<br />
If you want to navigate to a specific page when the button is pressed (it would be like pressing a [[Link|Link object]]), return a string starting with "page:" followed by the page name; in this case, userCommand() will be called again when that popup or page is closed, with "/close" appended to param.<br />
<br />
'''Parameters:'''<br />
<br />
* name: string - the name field of the user object<br />
* param: string - the param of the user object<br />
<br />
<br />
'''Returns:'''<br />
<br />
* null: proceed to send the request to server as it is<br />
* "": assume the event was resolved. Don't send the request to the server<br />
* "page:page name": navigate to the specified page<br />
* "page:back": navigate to the previous page<br />
* "page:forward": navigate to the next page<br />
* "page:close": if the user button that generated the call has an open popup linked to it, close it<br />
* "error": error. Don't send the request to the server<br />
* an object, to specify new name and param values to be sent to the server<br />
<syntaxhighlight lang="javascript"><br />
{name:"new name", param:"new param"}<br />
</syntaxhighlight><br />
<br />
=== userSubmit ===<br />
<syntaxhighlight lang="javascript"><br />
function userSubmit(name, param)<br />
</syntaxhighlight><br />
Executed on every submit request (from [[Submit]] objects).<br />
E.g.<br />
<br />
=== uiEvent ===<br />
<syntaxhighlight lang="javascript"><br />
function uiEvent(id, attr, value)<br />
</syntaxhighlight><br />
Executed on every UISet received from the server. <br />
E.g.<br />
<br />
== Functions ==<br />
=== varSet ===<br />
<syntaxhighlight lang="javascript"><br />
varSet(name,value)<br />
</syntaxhighlight><br />
Sets the value of a variable. If the name begins with '''!''', the variable will be stored in the browser's cache, so that it'll available even after reloading the page or closing and reopening the browser.<br />
<br />
=== varGet ===<br />
<syntaxhighlight lang="javascript"><br />
varGet(name)<br />
</syntaxhighlight><br />
Gets the value of a variable previously set with varSet.<br />
<br />
=== uiSet ===<br />
<syntaxhighlight lang="javascript"><br />
uiSet(id,attr,value)<br />
</syntaxhighlight><br />
Sets a UI Attribute. See [[Project]], [[Page]] or [[UI Objects]] list of attributes.<br />
<br />
=== webLog ===<br />
<syntaxhighlight lang="javascript"><br />
webLog(string)<br />
</syntaxhighlight><br />
Adds a line to the log, viewable from the Manager's [[Log Viewer]].<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
<br />
== Examples ==<br />
=== Using varget and varset ===<br />
In this example we declare a persistent variable (stored in the browser's local storage) the first time any user button is pressed, we increment it each time up to 10 and then we reset it to 0. When the variable equals 3, the page "page1" is shown. When the variable equals 7, the request isn't forwarded to the server.<br />
<syntaxhighlight lang="javascript"><br />
function userCommand(name, param) {<br />
var a = varGet("!counter"); // get the variable value<br />
<br />
if (!a) // first time and when a is 0<br />
a = 1;<br />
else if (a < 10)<br />
a++;<br />
else // reset<br />
a = 0;<br />
<br />
varSet("!counter",a); // set the variable value<br />
<br />
webLog("usercommand:"+name+","+param+". Counter:"+a)<br />
if (a == 3)<br />
return "page:page1";<br />
else if (a == 7)<br />
return "";<br />
else<br />
return null;<br />
}<br />
</syntaxhighlight><br />
<br />
== User Object ==<br />
One or more User objects can be declared to send requests from the client to the server.<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() { <br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnErrorEvent(onUserError);<br />
// send reques<br />
user.send("myname","myparam");<br />
<br />
varSet("myvar1","myvalue");<br />
varSet("myvar2",5.3);<br />
varSet("myvar3",[1,2,3]);<br />
varSet("myvar4",{"a":1,"b":2});<br />
}<br />
</syntaxhighlight><br />
<br />
===Methods===<br />
====.send(name, param)====<br />
sends a virtualremote (name and param will be url encoded)<br />
<br />
====.setMaxWaitingTime(msec)====<br />
set max waiting time in msec. If a request exceeds this time, it will be aborted (and fire an onError event, if set).<br />
<br />
====.setMaxRetries(n)====<br />
set max number of retry attempts. If a a request fails, it will keep on retrying until it succeeds or the max number of retries is reached.<br />
Before retrying it will fire an onRetry event, if set.<br />
If n is 0, and retryOnErrorDelay is not 0, it will keep on retrying forever (it will never fire an onError event, if set).<br />
<br />
====.setRetryOnErrorDelay(msec)====<br />
set msec of delay before retrying after a request has failed.<br />
If msec is 0 it won't retry (and will fire an onError event, if set).<br />
<br />
====.setOnLoadedEvent(f)====<br />
f is a function that is called when the request is successful.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.setOnErrorEvent(f)====<br />
f is a function called when the request fails. f is called with an error code parameter: function(errCode)<br />
error codes are enumerated as .ERROR_GENERAL, .ERROR_CONNECTION ...<br />
<br />
====.setOnRetryEvent(f)====<br />
f is a function that is called when the last request failed, before retrying.<br />
To get the response text or xml, use .getResponseText() and .getResponseXML()<br />
<br />
====.getResponseText()====<br />
get the last response text<br />
<br />
====.getResponseXML()====<br />
get the last response XML<br />
<br />
====.free()====<br />
free the memory and reset the behaviour. It will be reinitialized if any method is called.<br />
<br />
===Error codes===<br />
*'''.ERROR_GENERAL''' : general error<br />
*'''.ERROR_CONNECTION''' : no connection<br />
*'''.ERROR_MAXWAITTIME''' : max waiting time exceeded<br />
*'''.ERROR_LOGOUT''' : client is logged out<br />
*'''.ERROR_LOCK''' : client is locked out<br />
*'''.ERROR_NOACCESS''' : request returned noaccess<br />
<br />
===Examples===<br />
====Try one time, then fire onLoaded or onError====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User();<br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
function onUserError(errCode) {<br />
webLog("error");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry forever, until it succeeds====<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setRetryOnErrorDelay(1000); // wait one second before retrying on error<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight><br />
<br />
====Retry 3 times, then fire onError====<br />
<br />
<syntaxhighlight lang="javascript"><br />
var user = new User(); <br />
<br />
function StartupEvent() {<br />
// init user object<br />
user.setRetryOnErrorDelay(100); // retry almost immediately on error<br />
user.setMaxRetries(3); // retry 3 times, then fire error<br />
user.setOnLoadedEvent(onUserLoaded);<br />
user.setOnError(onUserError);<br />
// send request<br />
user.send("myname","myparam");<br />
}<br />
<br />
function onUserLoaded() {<br />
webLog("loaded "+user.getResponseText());<br />
// do something with the response<br />
user.free(); // won't be using it again<br />
}<br />
<br />
function onUserError(errCode) {<br />
webLog("error, already tried 3 times");<br />
if (errCode == user.ERROR_MAXWAITTIME)<br />
webLog("the last request failed because it exceeded the waiting time");<br />
user.free(); // won't be using it again<br />
}<br />
</syntaxhighlight></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Input&diff=4875Input2014-05-14T10:45:45Z<p>Gionatan: /* Input attributes */</p>
<hr />
<div>{{UI Object Header}}<br />
Input field that allows the user to input a text.<br />
Can be used with a [[submit]] button.<br />
<br />
Requires an ID.<br />
<br />
For a tutorial on using this object, see [[Working with Forms]]<br />
<br />
[[File:UI Object input.png]]<br />
<br />
== Parameters ==<br />
*'''id''': the object's ID, used by UISets<br />
*'''position''': the object's position. Use the pixels or rows and columns coordinates format<br />
*'''css''': optional. Defines the CSS style for the input field<br />
*'''type''': optional. Defines the input type, see [[#Input attributes|inputtype UI attribute]]<br />
<br />
== Syntax ==<br />
(input!id <position>; [<css>]; [<type>])<br />
E.g.<br />
(input!myinput r1c1; color:blue; password)<br />
<br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Field)}}<br />
===Input attributes===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
<br />
|rowspan="3"|inputtype<br />
|input<br />
|Default behaviour<br />
|-<br />
|multiline<br />
|for input fields with more than a line. Use the height attribute on the css parameter to set the size<br />
|-<br />
|password<br />
|hides typed characters<br />
|-<br />
<br />
|value<br />
|<string><br />
|Input value<br />
|-<br />
<br />
|maxlenght<br />
|<number><br />
|Specify the maximum length that can be typed<br />
|-<br />
<br />
|rowspan="2"|eraseicon<br />
|true<br />
|Show an erase icon that can be clicked to quickly erase the input's content<br />
|-<br />
|false<br />
|Default: no erase icon<br />
|-<br />
<br />
|style<br />
|<CSS style><br />
|Set the field's CSS style<br />
|-<br />
<br />
|helptext<br />
|<string><br />
|Text to show when the field is empty<br />
|-<br />
<br />
|rowspan="2"|changedelay<br />
|<number><br />
|Sets the delay in milliseconds by which changes are detected. If the field is working in autosend mode, this value determines the delay between the last button press and the value being sent to the server<br />
|-<br />
|off<br />
|If the field is working in autosend mode, values aren't sent on a delay, but only when the field loses the focus (also when the tab or enter keys are pressed)<br />
|-<br />
<br />
|validatekey<br />
|<regular expression><br />
|A regular expression to be validated on a keypress. E.g. "[a-z]" will allow only lowercase letters.<br />
Won't work on Android devices.<br />
|-<br />
<br />
|validatevalue<br />
|<regular expression><br />
|A regular expression to be validated before the value is sent to the server. If the expression doesn't match the value, the previous value will be restored and the input will flash in red<br />
|-<br />
<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Datalogger&diff=4627Datalogger2014-04-23T08:20:20Z<p>Gionatan: /* Datalogger attributes */</p>
<hr />
<div>{{UI Object Header}}<br />
Works in combination with the data logger function to present a collection of data using time-based statistical charts.<br />
This object automatically adapts the graphical layout and size of the charts based on the overall object's size. The default presentation can be customized using several optional attributes.<br />
<br />
[[File:UI Object datalogger.1.png]][[File:UI Object datalogger.2.png]][[File:UI Object datalogger.3.png]]<br />
<br />
== Parameters ==<br />
*'''id''': the object's ID, used by UISets. Required<br />
*'''position''': the object's position. Use the pixels or rows and columns coordinates format<br />
*'''size''': the chart's area's width and height<br />
*'''label''': the values axis label<br />
*'''attributes''': list of UI attribute ids and values defining the chart's aspect and data. Setting this parameter is the same as setting each UI attribute with a UISet<br />
<br />
== Syntax ==<br />
(datalogger <id>; <pos>; <width>; <height>; <label>; <attributes>)<br />
E.g.<br />
(chart!chart1 x3y187; 312; 180; (type=line; values=0,10,24,12,7,35,42,1,23,4))<br />
<br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
=== Datalogger attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
<br />
|rowspan="5"|type<br />
|bars<br />
|Draw bars<br />
|-<br />
|gauge<br />
|Draw a gauge, for charts with a single value. Use with the "value" attribute<br />
|-<br />
|points<br />
|Draws points<br />
|-<br />
|line<br />
|Draws a line connecting the values<br />
|-<br />
|spline<br />
|Draws a spline connecting the values<br />
|-<br />
<br />
|rowspan="2"|mode<br />
|live<br />
|Live mode<br />
|-<br />
|browser<br />
|Browser mode<br />
|-<br />
<br />
|slot<br />
|<number><br />
|Show a specific slot, from 0 to the number of slots-1<br />
|-<br />
<br />
|rowspan="4"|scale<br />
|year<br />
|Set the live scale to year<br />
|-<br />
|month<br />
|Set the live scale to month<br />
|-<br />
|day <br />
|Set the live scale to day<br />
|-<br />
|hour<br />
|Set the live scale to hour<br />
|-<br />
<br />
|rowspan="4"|browserscale<br />
|year<br />
|Set the browser scale to year<br />
|-<br />
|month<br />
|Set the browser scale to month<br />
|-<br />
|day<br />
|Set the browser scale to day<br />
|-<br />
|hour<br />
|Set the browser scale to hour<br />
|-<br />
<br />
|browserdate<br />
|date and time, in the "yyyymmddhh" format<br />
|Set the browser date and time. These formats will also be accepted: "yyyy", "yyyymm", "yyyymmdd"<br />
|-<br />
<br />
|rowspan="3"|controls<br />
|tabs<br />
|Show tabs on live mode for scale and slots<br />
|-<br />
|toolbar<br />
|Shot a toolbar to control live and browser modes<br />
|-<br />
|none<br />
|Don't show any controls<br />
|- <br />
<br />
|rowspan="2"|panel<br />
|true<br />
|Show background panel<br />
|-<br />
|false<br />
|Hide background panel<br />
|-<br />
<br />
|rowspan="2"|multichart<br />
|true<br />
|Show multiple charts on live mode<br />
|-<br />
|false<br />
|Show a single chart on live mode, based on the selected scale<br />
|-<br />
<br />
|rowspan="2"|presentvaluecolor<br />
|<CSS color><br />
|A color that applies to all present values<br />
|-<br />
|<CSS color>,<CSS color>,<CSS color><br />
|Colors that apply respectively to minimum, average and maximum present values<br />
|-<br />
<br />
|rowspan="2"|pastvaluecolor<br />
|<CSS color><br />
|A color that applies to all past values<br />
|-<br />
|<CSS color>,<CSS color>,<CSS color><br />
|Colors that apply respectively to minimum, average and maximum past values<br />
|-<br />
<br />
|valuelabelcolor<br />
|<CSS color><br />
|Value label's color<br />
|-<br />
<br />
|rowspan="3"|valuelabeltype<br />
|inside<br />
|Value labels are shown inside (if "type" is bars, points or gauge) or over (if "type" is line or spline)<br />
|-<br />
|outside<br />
|Value labels are shown above or below<br />
|-<br />
|popup<br />
|Value labels are shown on mouseover, or on touch (if on a touch-enabled device)<br />
|-<br />
<br />
|notches<br />
|<value><br />
|Number of notches on the x-axis (for vertical charts) or on the y-axis (for horizontal charts)<br />
|-<br />
|axiscolor<br />
|<CSS color><br />
|Axis color<br />
|-<br />
<br />
|notchcolor<br />
|<CSS color><br />
|Color of the axis notches<br />
|-<br />
<br />
|labelcolor<br />
|<CSS color><br />
|Color of the axis and bars labels<br />
|-<br />
<br />
|thresholds<br />
|<comma-separated list of values><br />
|List of values at which to display a line (threshold)<br />
|-<br />
<br />
|thresholdcolor<br />
|<CSS color><br />
|Color of threshold lines<br />
|-<br />
<br />
|thresholdcolors<br />
|<comma-separated list of CSS colors><br />
|List of colors of threshold lines, one value each line<br />
|-<br />
<br />
|}<br />
<br />
{{Note:CSS Color}}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=UserImage&diff=4553UserImage2014-04-01T12:25:25Z<p>Gionatan: /* UserImage attributes */</p>
<hr />
<div>{{UI Object Header}}<br />
A clickable image similar to the [[user|user object]] used to execute customized Java code or generate events for the EVENTS interpreter.<br />
Pressing this button, HSYCO calls the method:<br />
:userCommand(String name, String param)<br />
in the user.class class. HSYCO also executes all actions associated to the event:<br />
:USER name=param<br />
defined in EVENTS. For a tutorial on how to use this object see [[Working with User Objects]].<br />
A long press will repeat the request every second.<br />
<br />
For an object with a list of user commands, see [[UserList]].<br />
<br />
== Parameters ==<br />
{{UI Object Parameter (ID)}}<br />
{{UI Object Parameter (image)}}<br />
{{UI Object Parameter (position)}}<br />
*'''size''': the image's width and height<br />
*'''name''': name passed to the Java callback method and event in EVENTS<br />
*'''parameter''': parameter passed to the Java callback method and event in EVENTS<br />
*'''label''': the text label next to the image. It can contain HTML tags<br />
*'''css''': the label's css attributes<br />
*'''repeat''': if "enabled", the command will be repeat every second<br />
<br />
== Syntax ==<br />
(userimage[!<id>] <image's filename>; <position>; <width>; <height>; <name>; <parameter>; <label>; <css>; <repeat>)<br />
E.g.<br />
(userimage!user1 myimage.png; r8c7; 100; 100; name; param; Label; (font-style:italic; top:-15px)) <br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Button)}}<br />
{{UI Object Attributes (Label)}}<br />
=== UserImage attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|name<br />
|<string><br />
|Set the user object's name value<br />
|-<br />
<br />
|rowspan="2"|parameter<br />
|<string><br />
|Set the user object's parameter value<br />
|-<br />
|coordinates<br />
|Set the object to send the coordinates of the point where the user clicks (or drags). E.g. for x=107,y=52 the server will receive ''107,52''<br />
|-<br />
<br />
|rowspan="2"|repeat<br />
|true<br />
|Set repeat mode to enabled<br />
|-<br />
|false<br />
|Set repeat mode to disabled<br />
|-<br />
<br />
|interval<br />
|<number><br />
|Set the time in milliseconds between repeats (default is 1000)<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=User&diff=4534User2014-03-28T11:27:26Z<p>Gionatan: </p>
<hr />
<div>{{UI Object Header}}<br />
A button used to execute customized Java code or generate events for the EVENTS interpreter.<br />
Pressing this button, HSYCO calls the method:<br />
:userCommand(String name, String param)<br />
in the user.class class. HSYCO also executes all actions associated to the event:<br />
:USER name=param<br />
defined in EVENTS. For a tutorial on how to use this object see [[Working with User Objects]].<br />
A long press will repeat the request every second.<br />
<br />
It has several colors (depending on the skin) and three different sizes:<br />
* '''user''' (standard size)<br />
:[[File:UI Object link.png]]<br />
* '''usermini''' (medium size)<br />
:[[File:UI Object linkmini.png]]<br />
* '''usermicro''' (small size)<br />
:[[File:UI Object linkmicro.png]]<br />
<br />
For a custom image version, see [[UserImage]].<br />
<br />
For an object with a list of user commands, see [[UserList]].<br />
<br />
== Parameters ==<br />
*'''id''': the object's ID, used by UISets. Required<br />
*'''name''': name passed to the Java callback method and event in EVENTS<br />
*'''parameter''': parameter passed to the Java callback method and event in EVENTS<br />
*'''position''': the object's position. Use the pixels or rows and columns coordinates format<br />
*'''color''': the color of the button. It can assume any of the skin's color values (E.g. for the "blue" skin, the possible values are: b - blue; g - green; gr - gray; r - red; y - yellow; glass)<br />
*'''label''': the text label on the button. It can contain HTML tags<br />
*'''repeat''': if "enabled", the command will be repeat every second<br />
<br />
== Syntax ==<br />
(user[!<id>] <name>; <parameter>; <position>; <color>; <label>)<br />
<br />
(usermini[!<id>] <name>; <parameter>; <position>; <color>; <label>)<br />
<br />
(usermicro[!<id>] <name>; <parameter>; <position>; <color>; <label>)<br />
<br />
E.g.<br />
(user!user1 name; param; r3c1; gr; label; enabled)<br />
<br />
(usermini!user1 name; param; r3c1; b; label;)<br />
<br />
(usermicro!user1 name; param; x0y10; r; label;)<br />
<br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Button)}}<br />
{{UI Object Attributes (Label)}}<br />
{{UI Object Attributes (User)}}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=UserImage&diff=4533UserImage2014-03-28T11:27:14Z<p>Gionatan: </p>
<hr />
<div>{{UI Object Header}}<br />
A clickable image similar to the [[user|user object]] used to execute customized Java code or generate events for the EVENTS interpreter.<br />
Pressing this button, HSYCO calls the method:<br />
:userCommand(String name, String param)<br />
in the user.class class. HSYCO also executes all actions associated to the event:<br />
:USER name=param<br />
defined in EVENTS. For a tutorial on how to use this object see [[Working with User Objects]].<br />
A long press will repeat the request every second.<br />
<br />
For an object with a list of user commands, see [[UserList]].<br />
<br />
== Parameters ==<br />
{{UI Object Parameter (ID)}}<br />
{{UI Object Parameter (image)}}<br />
{{UI Object Parameter (position)}}<br />
*'''size''': the image's width and height<br />
*'''name''': name passed to the Java callback method and event in EVENTS<br />
*'''parameter''': parameter passed to the Java callback method and event in EVENTS<br />
*'''label''': the text label next to the image. It can contain HTML tags<br />
*'''css''': the label's css attributes<br />
*'''repeat''': if "enabled", the command will be repeat every second<br />
<br />
== Syntax ==<br />
(userimage[!<id>] <image's filename>; <position>; <width>; <height>; <name>; <parameter>; <label>; <css>; <repeat>)<br />
E.g.<br />
(userimage!user1 myimage.png; r8c7; 100; 100; name; param; Label; (font-style:italic; top:-15px)) <br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Button)}}<br />
{{UI Object Attributes (Label)}}<br />
=== UserImage attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|name<br />
|<string><br />
|Set the user object's name value<br />
|-<br />
<br />
|rowspan="2"|parameter<br />
|<string><br />
|Set the user object's parameter value<br />
|-<br />
|coordinates<br />
|Set the object to send the coordinates of the point where the user clicks (or drags). E.g. ''x107y52''<br />
|-<br />
<br />
|rowspan="2"|repeat<br />
|true<br />
|Set repeat mode to enabled<br />
|-<br />
|false<br />
|Set repeat mode to disabled<br />
|-<br />
<br />
|interval<br />
|<number><br />
|Set the time in milliseconds between repeats (default is 1000)<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=UserImage&diff=4532UserImage2014-03-28T11:27:04Z<p>Gionatan: </p>
<hr />
<div>{{UI Object Header}}<br />
A clickable image similar to the [[user|user object]] used to execute customized Java code or generate events for the EVENTS interpreter.<br />
Pressing this button, HSYCO calls the method:<br />
:userCommand(String name, String param)<br />
in the user.class class. HSYCO also executes all actions associated to the event:<br />
:USER name=param<br />
defined in EVENTS. For a tutorial on how to use this object see [[Working_with_User_Objects]].<br />
A long press will repeat the request every second.<br />
<br />
For an object with a list of user commands, see [[UserList]].<br />
<br />
== Parameters ==<br />
{{UI Object Parameter (ID)}}<br />
{{UI Object Parameter (image)}}<br />
{{UI Object Parameter (position)}}<br />
*'''size''': the image's width and height<br />
*'''name''': name passed to the Java callback method and event in EVENTS<br />
*'''parameter''': parameter passed to the Java callback method and event in EVENTS<br />
*'''label''': the text label next to the image. It can contain HTML tags<br />
*'''css''': the label's css attributes<br />
*'''repeat''': if "enabled", the command will be repeat every second<br />
<br />
== Syntax ==<br />
(userimage[!<id>] <image's filename>; <position>; <width>; <height>; <name>; <parameter>; <label>; <css>; <repeat>)<br />
E.g.<br />
(userimage!user1 myimage.png; r8c7; 100; 100; name; param; Label; (font-style:italic; top:-15px)) <br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Button)}}<br />
{{UI Object Attributes (Label)}}<br />
=== UserImage attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|name<br />
|<string><br />
|Set the user object's name value<br />
|-<br />
<br />
|rowspan="2"|parameter<br />
|<string><br />
|Set the user object's parameter value<br />
|-<br />
|coordinates<br />
|Set the object to send the coordinates of the point where the user clicks (or drags). E.g. ''x107y52''<br />
|-<br />
<br />
|rowspan="2"|repeat<br />
|true<br />
|Set repeat mode to enabled<br />
|-<br />
|false<br />
|Set repeat mode to disabled<br />
|-<br />
<br />
|interval<br />
|<number><br />
|Set the time in milliseconds between repeats (default is 1000)<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=UserImage&diff=4531UserImage2014-03-28T11:26:27Z<p>Gionatan: /* UserImage attributes */</p>
<hr />
<div>{{UI Object Header}}<br />
A clickable image similar to the [[user|user object]] used to execute customized Java code or generate events for the EVENTS interpreter.<br />
Pressing this button, HSYCO calls the method:<br />
:userCommand(String name, String param)<br />
in the user.class class. HSYCO also executes all actions associated to the event:<br />
:USER name=param<br />
defined in EVENTS. For a tutorial on how to use this object see [[Working with User objects]].<br />
A long press will repeat the request every second.<br />
<br />
For an object with a list of user commands, see [[UserList]].<br />
<br />
== Parameters ==<br />
{{UI Object Parameter (ID)}}<br />
{{UI Object Parameter (image)}}<br />
{{UI Object Parameter (position)}}<br />
*'''size''': the image's width and height<br />
*'''name''': name passed to the Java callback method and event in EVENTS<br />
*'''parameter''': parameter passed to the Java callback method and event in EVENTS<br />
*'''label''': the text label next to the image. It can contain HTML tags<br />
*'''css''': the label's css attributes<br />
*'''repeat''': if "enabled", the command will be repeat every second<br />
<br />
== Syntax ==<br />
(userimage[!<id>] <image's filename>; <position>; <width>; <height>; <name>; <parameter>; <label>; <css>; <repeat>)<br />
E.g.<br />
(userimage!user1 myimage.png; r8c7; 100; 100; name; param; Label; (font-style:italic; top:-15px)) <br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Button)}}<br />
{{UI Object Attributes (Label)}}<br />
=== UserImage attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|name<br />
|<string><br />
|Set the user object's name value<br />
|-<br />
<br />
|rowspan="2"|parameter<br />
|<string><br />
|Set the user object's parameter value<br />
|-<br />
|coordinates<br />
|Set the object to send the coordinates of the point where the user clicks (or drags). E.g. ''x107y52''<br />
|-<br />
<br />
|rowspan="2"|repeat<br />
|true<br />
|Set repeat mode to enabled<br />
|-<br />
|false<br />
|Set repeat mode to disabled<br />
|-<br />
<br />
|interval<br />
|<number><br />
|Set the time in milliseconds between repeats (default is 1000)<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=UserImage&diff=4530UserImage2014-03-28T11:25:58Z<p>Gionatan: /* UI Attributes */</p>
<hr />
<div>{{UI Object Header}}<br />
A clickable image similar to the [[user|user object]] used to execute customized Java code or generate events for the EVENTS interpreter.<br />
Pressing this button, HSYCO calls the method:<br />
:userCommand(String name, String param)<br />
in the user.class class. HSYCO also executes all actions associated to the event:<br />
:USER name=param<br />
defined in EVENTS. For a tutorial on how to use this object see [[Working with User objects]].<br />
A long press will repeat the request every second.<br />
<br />
For an object with a list of user commands, see [[UserList]].<br />
<br />
== Parameters ==<br />
{{UI Object Parameter (ID)}}<br />
{{UI Object Parameter (image)}}<br />
{{UI Object Parameter (position)}}<br />
*'''size''': the image's width and height<br />
*'''name''': name passed to the Java callback method and event in EVENTS<br />
*'''parameter''': parameter passed to the Java callback method and event in EVENTS<br />
*'''label''': the text label next to the image. It can contain HTML tags<br />
*'''css''': the label's css attributes<br />
*'''repeat''': if "enabled", the command will be repeat every second<br />
<br />
== Syntax ==<br />
(userimage[!<id>] <image's filename>; <position>; <width>; <height>; <name>; <parameter>; <label>; <css>; <repeat>)<br />
E.g.<br />
(userimage!user1 myimage.png; r8c7; 100; 100; name; param; Label; (font-style:italic; top:-15px)) <br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Button)}}<br />
{{UI Object Attributes (Label)}}<br />
=== UserImage attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|name<br />
|<string><br />
|Set the user object's name value<br />
|-<br />
<br />
|rowspan="2"|parameter<br />
|<string><br />
|Set the user object's parameter value<br />
|-<br />
|coordinates<br />
|Set the object to send the coordinates of the point where the user clicks (or drags). E.g. ''name/x107y52''<br />
|-<br />
<br />
|rowspan="2"|repeat<br />
|true<br />
|Set repeat mode to enabled<br />
|-<br />
|false<br />
|Set repeat mode to disabled<br />
|-<br />
<br />
|interval<br />
|<number><br />
|Set the time in milliseconds between repeats (default is 1000)<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Slider&diff=4267Slider2014-03-19T11:16:33Z<p>Gionatan: /* Slider attributes */</p>
<hr />
<div>{{UI Object Header}}<br />
A slider object that sends requests to the server.<br />
<br />
Using this object you can execute customized Java code or generate events for the EVENTS interpreter, like with the [[user]] object, passing the object's name and the selected value.<br />
<br />
Three versions are available:<br />
* ''slider'': vertical slider with a label and an on/off button<br />
:[[File:UI Object slider.png]]<br />
* ''sliderv'': minimal vertical slider<br />
:[[File:UI Object sliderv.png]]<br />
* ''sliderh'': minimal horizontal slider<br />
:[[File:UI Object sliderh.png]]<br />
<br />
== Parameters ==<br />
*'''address''': address passed to the Java callback method and event in EVENTS<br />
*'''position''': the object's position. Use the pixels or rows and columns coordinates format<br />
*'''label''': the text label on the button. Can contain HTML tags<br />
<br />
== Syntax ==<br />
(slider!<id> <address>; <position>; <label>)<br />
<br />
(sliderv!<id> <address>; <position>)<br />
<br />
(sliderh!<id> <address>; <position>)<br />
E.g.<br />
(slider!myslider slider1; x10y20; Label)<br />
<br />
(sliderv!myslider slider1; x10y20)<br />
<br />
(sliderh!myslider slider1; x10y20)<br />
<br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
=== Slider attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
<br />
|rowspan="4"|value<br />
|0-100<br />
|Set the slider's value, from 0 to 100<br />
|-<br />
|0%-100%<br />
|Set the slider's value, from 0% to 100%<br />
|-<br />
|on | off<br />
|Set the slider's value to 100 (on) or 0 (off)<br />
|-<br />
|0-n/n<br />
|Set the slider's value, specifying a base. E.g. 64/256 sets the slider to 25%<br />
|-<br />
<br />
|rowspan="2"|bar<br />
|true<br />
|Show the value bar<br />
|-<br />
|false<br />
|Hide the value bar<br />
|-<br />
<br />
|barcolor<br />
|CSS color<br />
|Set the value bar's color<br />
|-<br />
<br />
|rowspan="2"|inverse<br />
|true<br />
|Inverts the slider's bar verse: on a slider object the cursor is at the top when the value is 0, at the bottom when the value is 100<br />
|-<br />
|false<br />
|Default behaviour<br />
|-<br />
<br />
|rowspan="2"|enabled<br />
|true<br />
|Field is enabled<br />
|-<br />
|false<br />
|Field is disabled<br />
|-<br />
<br />
|}<br />
<br />
{{Note:CSS Color}}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Template:UI_Object_Attributes_(User)&diff=4213Template:UI Object Attributes (User)2014-03-18T09:41:49Z<p>Gionatan: /* User attributes */</p>
<hr />
<div>=== User attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|name<br />
|<string><br />
|Set the user object's name value<br />
|-<br />
<br />
|parameter<br />
|<string><br />
|Set the user object's parameter value<br />
|-<br />
<br />
|rowspan="2"|repeat<br />
|true<br />
|Set repeat mode to enabled<br />
|-<br />
|false<br />
|Set repeat mode to disabled<br />
|-<br />
<br />
|interval<br />
|<number><br />
|Set the time in milliseconds between repeats (default is 1000)<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=User_Interface&diff=4139User Interface2014-03-14T14:50:13Z<p>Gionatan: /* Projects Syntax */</p>
<hr />
<div>[[Category:HSYCO]]<br />
HSYCO allows the interaction with the system through a custom user interface.<br />
We can identify three entities:<br />
* '''[[Project|Project]]''': a single interface<br />
* '''[[Page|Page]]''': a project can contain pages<br />
* '''[[UI Objects|Object]]''': a page can contain objects<br />
<br />
A project is defined by a subdirectory inside www that contains an index.hsm file.<br />
<br />
{{{note|Whenever HSYCO detects any change to the files in www and in its subdirectories, it forces the reload of all the projects on the connected browsers.}}}<br />
<br />
For each sub-directory in www in which the file index.hsm exists, you can access the page with the following URL:<br />
'''<nowiki>https://<name server>/<URLKey>/<subdirectory name></nowiki>'''<br />
<br />
For additional interface options, see '''[[URL Keywords]]'''.<br />
<br />
To create or edit a project there are two methods: visually, through the [[Project Editor]] or by manually editing the project's source code, the index.hsm file.<br />
<br />
== Projects Syntax ==<br />
<br />
Projects are described through a custom markup language that defines pages, objects and various directives that apply to the project (skin, language, size...).<br />
<br />
The syntax for every object is described in the corresponding section.<br />
<br />
index.hsm files can be viewed from the [[Project Editor]] (tools > source) and edited from the Editor in the [[File Manager]].<br />
<br />
When errors are detected, the page is not served to the Web browser.<br />
File parsing stops at the first error, so only the first line with errors is reported in the log file.<br />
<br />
Each type of graphic object could require one or more parameters, separated by the “;” character. Empty lines or blank spaces are ignored.<br />
<br />
{{note|Changes to index.hsm cause an automatic page reload on the connected Web browsers.}}<br />
<br />
You can insert comment lines, which are ignored. A comment line starts with the “#” character at the beginning of the line.<br />
<br />
{{note|Names in index.hsm are case sensitive, small and capital letters are significant; all objects defined in the standard skin have names with lower-case letters.}}<br />
<br />
{{note|Some objects support a variant called '''identified version''' to allow the '''!id''' dynamic modification of the text, visibility, color several other attributes with the uiSet() Java method or the UISET action.}}<br />
<br />
== The User Interface Configuration Database ==<br />
<br />
The graphical representation of user interface objects that are directly associated with I/O servers data points is defined in a file named '''systemtopo.txt'''.<br />
<br />
This file is usually created and updated automatically by the I/O servers, but can also be edited manually. It also contains location information for the WiFi location services.<br />
<br />
The systemtopo.txt file is only used by the Project Editor, to list the user interface data points in the address field of device objects, and in the run-time user interface, for the graphic representation of each object.<br />
<br />
{{tip|The systemtopo.txt file is not required for any other core function. If your HSYCO server does not have a user interface, but only application logic implemented with the various programming APIs, systemtopo.txt would be useless and could be ignored or even removed.}}<br />
<br />
See [[The User Interface Configuration Database]] section for detailed information on systemtopo.txt.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=URL_Keywords&diff=4138URL Keywords2014-03-14T14:49:21Z<p>Gionatan: </p>
<hr />
<div>[[Category:User Interface]]<br />
The user interface supports some options that can modify its behavior.<br />
These options are activated by specifying special keywords in the page URL, they are therefore freely manageable from each Web Browser.<br />
<br />
The complete URL format is:<br />
<nowiki>https://<name server>/<URLKey>/<subdirectory name>?<options></nowiki><br />
<br />
The options field can assume one or more of the keywords listed below; multiple keywords can be separated with the "." character:<br />
* '''nocamstream''': disables MJPEG streaming to the Web browser, even if the browser supports this format<br />
* '''nocache''': disables the HTML5 persistent cache for the Web session, overriding the default settings<br />
* '''nopics''': disables the display of the images associated to the devices, as set in the systemtopo.txt file. This option is typically used to enhance the performances in case of slow remote connections<br />
* '''page=<page name>''': when the user interface is initially loaded by the browser, display the specified page instead of the menu</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=URL_Keywords&diff=4137URL Keywords2014-03-14T14:49:06Z<p>Gionatan: Created page with "Category:User Interface The user interface supports some options that can modify its behavior. These options are activated by specifying special keywords in the page URL, ..."</p>
<hr />
<div>[[Category:User Interface]]<br />
The user interface supports some options that can modify its behavior.<br />
These options are activated by specifying special keywords in the page URL, they are therefore freely manageable from each Web Browser.<br />
<br />
The complete URL format is:<br />
<nowiki>https://<name server>/<URLKey>/<subdirectory name>?<options></onwiki><br />
The options field can assume one or more of the keywords listed below; multiple keywords can be separated with the "." character:<br />
* '''nocamstream''': disables MJPEG streaming to the Web browser, even if the browser supports this format<br />
* '''nocache''': disables the HTML5 persistent cache for the Web session, overriding the default settings<br />
* '''nopics''': disables the display of the images associated to the devices, as set in the systemtopo.txt file. This option is typically used to enhance the performances in case of slow remote connections<br />
* '''page=<page name>''': when the user interface is initially loaded by the browser, display the specified page instead of the menu</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=User_Interface&diff=4136User Interface2014-03-14T14:45:52Z<p>Gionatan: </p>
<hr />
<div>[[Category:HSYCO]]<br />
HSYCO allows the interaction with the system through a custom user interface.<br />
We can identify three entities:<br />
* '''[[Project|Project]]''': a single interface<br />
* '''[[Page|Page]]''': a project can contain pages<br />
* '''[[UI Objects|Object]]''': a page can contain objects<br />
<br />
A project is defined by a subdirectory inside www that contains an index.hsm file.<br />
<br />
{{{note|Whenever HSYCO detects any change to the files in www and in its subdirectories, it forces the reload of all the projects on the connected browsers.}}}<br />
<br />
For each sub-directory in www in which the file index.hsm exists, you can access the page with the following URL:<br />
'''<nowiki>https://<name server>/<URLKey>/<subdirectory name></nowiki>'''<br />
<br />
For additional interface options, see '''[[URL Keywords]]'''.<br />
<br />
To create or edit a project there are two methods: visually, through the [[Project Editor]] or by manually editing the project's source code, the index.hsm file.<br />
<br />
== Projects Syntax ==<br />
<br />
Projects are described through a custom markup language that defines page, objects and various directives that apply to the project (skin, language, size...).<br />
<br />
The syntax for every object is described in the corresponding section.<br />
<br />
index.hsm files can be viewed from the [[Project Editor]] (tools > source) and edited from the Editor in the [[File Manager]].<br />
<br />
When errors are detected, the page is not served to the Web browser.<br />
File parsing stops at the first error, so only the first line with errors is reported in the log file.<br />
<br />
Each type of graphic object could require one or more parameters, separated by the “;” character. Empty lines or blank spaces are ignored.<br />
<br />
{{note|Changes to index.hsm cause an automatic page reload on the connected Web browsers.}}<br />
<br />
You can insert comment lines, which are ignored. A comment line starts with the “#” character at the beginning of the line.<br />
<br />
{{note|Names in index.hsm are case sensitive, small and capital letters are significant; all objects defined in the standard skin have names with lower-case letters.}}<br />
<br />
{{note|Some objects support a variant called '''identified version''' to allow the '''!id''' dynamic modification of the text, visibility, color several other attributes with the uiSet() Java method or the UISET action.}}<br />
<br />
== The User Interface Configuration Database ==<br />
<br />
The graphical representation of user interface objects that are directly associated with I/O servers data points is defined in a file named '''systemtopo.txt'''.<br />
<br />
This file is usually created and updated automatically by the I/O servers, but can also be edited manually. It also contains location information for the WiFi location services.<br />
<br />
The systemtopo.txt file is only used by the Project Editor, to list the user interface data points in the address field of device objects, and in the run-time user interface, for the graphic representation of each object.<br />
<br />
{{tip|The systemtopo.txt file is not required for any other core function. If your HSYCO server does not have a user interface, but only application logic implemented with the various programming APIs, systemtopo.txt would be useless and could be ignored or even removed.}}<br />
<br />
See [[The User Interface Configuration Database]] section for detailed information on systemtopo.txt.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project&diff=4133Project2014-03-14T12:09:35Z<p>Gionatan: </p>
<hr />
<div>[[Category:User Interface]]<br />
A project defines a custom user interface, that allows the user to interact with the system.<br />
Each project has one or more [[page|pages]] that contain [[UI Objects]].<br />
<br />
On the index.hsm, the project's parameters are defined as directives (#<directive>)<br />
<br />
{{TOClimit|3}}<br />
<br />
== Parameters ==<br />
=== Skin ===<br />
Defines the graphical appearance of the project.<br />
<br />
==== Values ====<br />
*'''skin name''': the name of the skin. The standard skin provided with HSYCO is "blue"<br />
<br />
==== Syntax ====<br />
(#skin <skin name>)<br />
<br />
=== Language ===<br />
Defines the language used for all standard text messages of the Web interface.<br />
<br />
==== Values ====<br />
*'''language id''': the language used for the project (it | en | fr | cn)<br />
<br />
==== Syntax ====<br />
(#language <language id>)<br />
<br />
=== Header ===<br />
Specifies the page header, the text that normally appears in bookmarks and as the title of the browser's window.<br />
<br />
==== Values ====<br />
*'''title''': the project's title<br />
<br />
==== Syntax ====<br />
The header must be declared after all the directives and before the pages.<br />
(header <title>)<br />
<br />
=== Size ===<br />
Sets the project size as width and height. If the orientation mode is enabled, a second set of width and height is required. The first set refers to landscape mode, the second to portrait mode.<br />
<br />
==== Values ====<br />
*'''width''': the project's width in pixels<br />
*'''height''': the project's height in pixels<br />
<br />
==== Syntax ====<br />
(#size <width>x<height>)<br />
Or to enable orientation mode:<br />
(#size <width (landscape)>x<height (landscape)>x; <width (portrait)>x<height (portrait)>x)<br />
<br />
=== Device Image ===<br />
Enables or disables the camera or image pop-ups associated to devices in the project, as configured in the systemtopo.txt file.<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "enabled".<br />
(#deviceimage disable)<br />
<br />
=== Kiosk ===<br />
The kiosk mode removes the menu bar and borders, for digital signage or kiosks applications where you want to have a full-screen display of your pages. "lock" also disables the navigation functions.<br />
<br />
==== Values ====<br />
*'''mode''': disabled, enabled or locked<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "disabled".<br />
"enabled" mode:<br />
(#kiosk nolock)<br />
"locked" mode:<br />
(#kiosk lock)<br />
<br />
=== Scale ===<br />
Sets a scaling factor to resize the whole page area from the original size.<br />
<br />
==== Values ====<br />
*'''factor''': scale factor, as a decimal positive number. Numbers greater than 1.0 create a magnification effect, proportionally increasing the size of the page and its content; numbers smaller than 1.0 make the page and its content smaller than the original<br />
<br />
==== Syntax ====<br />
(#scale <factor>)<br />
<br />
=== Locked ===<br />
Disables any user command for this project. Users will be able to navigate between pages and see the current status, but all commands will be locked.<br />
<br />
==== Syntax ====<br />
If omitted, the project is unlocked.<br />
(#locked <true>)<br />
<br />
=== Background ===<br />
Defines the project's background for all pages.<br />
<br />
==== Values ====<br />
*'''image''': the image file name<br />
<br />
==== Syntax ====<br />
It must be defined after the header object, before the pages.<br />
(background!all.background <image>)<br />
<br />
{{Note: IMG Filename}}<br />
<br />
=== Camera List ===<br />
Defines the display name of each camera. It is required when you are displaying cameras in the index.hsm file. If you need to prevent access to one or more cameras for a specific index.hsm page, you can set that camera with an empty name, “”, or the reserved words “null” or “empty”. These cameras will be skipped by the camera rolling function, or when manually going from one camera to the next.<br />
<br />
==== Values ====<br />
*'''list''': the comma separated list of all cameras, in the same order in which the cameras' ids appear in the Cameras parameter in hsyco.ini. The names must be enclosed in double quotes.<br />
<br />
==== Syntax ====<br />
(#cameralist <list>)<br />
E.g.<br />
(#cameralist "garden","openspace")<br />
<br />
=== Camera Overlay ===<br />
Defines custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlays.<br />
<br />
==== Values ====<br />
*'''list''': the list of the type of overlay for each camera defined in hsyco.ini, the elements are separated by commas:<br />
** "default": default overlay for the PTZ cameras<br />
** "": default overlay for the PTZ cameras<br />
** "null": no overlay<br />
** "filename.png": customized file, in the www/<project's name>/img or www/img directory.<br />
<br />
==== Syntax ====<br />
(#cameraoverlay <overlay list>)<br />
E.g.<br />
(#cameraoverlay "","null","myoverlay.png")<br />
<br />
=== Camera Grid Headers ===<br />
Defines the display name of each camera grid. It is required when you are including camera grids in the project.<br />
<br />
==== Values ====<br />
*'''list''': the list of the cameras grids’ names, listed in order starting from 1, as they appear in the CameraGrid.id parameters in hsyco.ini. The names must be enclosed in double quotes and separated by commas.<br />
<br />
==== Syntax ====<br />
(#cameragridlist <list>)<br />
E.g.<br />
(#cameragridlist "Garden","Living Room")<br />
<br />
=== Style ===<br />
Defines style attributes that modify the appearance of the current skin. It is used to customize a skin, changing for example the color of the background.<br />
For a complete description of possible values, see [[Project Style]].<br />
<br />
==== Values ====<br />
*'''style''': the semicolon separated list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#style <style>)<br />
E.g.<br />
(#style body-background-color=red; pages-background-color=green; header-background-color=blue)<br />
<br />
=== UISet ===<br />
Defines a set of UISets that apply to the specified [[UI Objects]]. Sets are specified as ''<object's id>.<attribute name>=<value>''. A UISet without the object's id is applied directly to the project object (E.g. ''autoreload=false'' is the same as ''<project's name>.autoreload=false'')<br />
<br />
==== Values ====<br />
*'''uiset list''': list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#uiset <uiset list>)<br />
E.g.<br />
(#uiset autoreload=false; myinput.value=hello)<br />
<br />
== Accessibility ==<br />
The accessible mode, which can be enabled through a UISet (see the '''accessibility''' attribute below), adds enhancements for voice over when the browser supports it. These allow voice over to recognize buttons and their states. A custom interface optimized for voice over can include the following [[UI Objects|UI objects]]:<br />
* [[link]]<br />
* [[text]]<br />
* [[button]]<br />
* [[user]]<br />
<br />
== UI Attributes ==<br />
=== Project attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|rowspan="4"|kiosk<br />
|nolock<br />
|Kiosk mode, not locked<br />
|-<br />
|lock<br />
|Kiosk mode, locked (user navigation is disabled)<br />
|-<br />
|strict<br />
|Kiosk mode, total height excludes the height of the header/footer, so the kiosk layout can stay the same as a non-kiosk<br />
|-<br />
|false<br />
|Kiosk mode disabled<br />
|-<br />
<br />
|rowspan="2"|lock<br />
|true<br />
|Lock the interface, so user navigation is disabled<br />
|-<br />
|false<br />
|Unlock the interface, default<br />
|-<br />
<br />
|page<br />
|<page name><br />
|Show specified page. It has to be different from the previous set value<br />
|-<br />
<br />
|pageback<br />
|<page name><br />
|If the current page was set with a "page" attribute and its name is the same as <page name>, navigate to the previous page<br />
|-<br />
<br />
|rowspan="2"|accessibility<br />
|true<br />
|Enabled accessible mode<br />
|-<br />
|false<br />
|Disable accessible mode<br />
|-<br />
<br />
|blink<br />
|false<br />
|Disable all blinking animations in the project<br />
|-<br />
<br />
|rowspan="2"|autoreload<br />
|true<br />
|Default, the browser will automatically reload the page when the project changes<br />
|-<br />
|false<br />
|The browser won't automatically reload the page when the project changes<br />
|-<br />
<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project&diff=4132Project2014-03-14T12:00:56Z<p>Gionatan: /* Project attributes */</p>
<hr />
<div>[[Category:User Interface]]<br />
A project defines a custom user interface, that allows the user to interact with the system.<br />
Each project has one or more [[page|pages]] that contain [[UI Objects]].<br />
<br />
On the index.hsm, the project's parameters are defined as directives (#<directive>)<br />
<br />
{{TOClimit|3}}<br />
<br />
== Parameters ==<br />
=== Skin ===<br />
Defines the graphical appearance of the project.<br />
<br />
==== Values ====<br />
*'''skin name''': the name of the skin. The standard skin provided with HSYCO is "blue"<br />
<br />
==== Syntax ====<br />
(#skin <skin name>)<br />
<br />
=== Language ===<br />
Defines the language used for all standard text messages of the Web interface.<br />
<br />
==== Values ====<br />
*'''language id''': the language used for the project (it | en | fr | cn)<br />
<br />
==== Syntax ====<br />
(#language <language id>)<br />
<br />
=== Header ===<br />
Specifies the page header, the text that normally appears in bookmarks and as the title of the browser's window.<br />
<br />
==== Values ====<br />
*'''title''': the project's title<br />
<br />
==== Syntax ====<br />
The header must be declared after all the directives and before the pages.<br />
(header <title>)<br />
<br />
=== Size ===<br />
Sets the project size as width and height. If the orientation mode is enabled, a second set of width and height is required. The first set refers to landscape mode, the second to portrait mode.<br />
<br />
==== Values ====<br />
*'''width''': the project's width in pixels<br />
*'''height''': the project's height in pixels<br />
<br />
==== Syntax ====<br />
(#size <width>x<height>)<br />
Or to enable orientation mode:<br />
(#size <width (landscape)>x<height (landscape)>x; <width (portrait)>x<height (portrait)>x)<br />
<br />
=== Device Image ===<br />
Enables or disables the camera or image pop-ups associated to devices in the project, as configured in the systemtopo.txt file.<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "enabled".<br />
(#deviceimage disable)<br />
<br />
=== Kiosk ===<br />
The kiosk mode removes the menu bar and borders, for digital signage or kiosks applications where you want to have a full-screen display of your pages. "lock" also disables the navigation functions.<br />
<br />
==== Values ====<br />
*'''mode''': disabled, enabled or locked<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "disabled".<br />
"enabled" mode:<br />
(#kiosk nolock)<br />
"locked" mode:<br />
(#kiosk lock)<br />
<br />
=== Scale ===<br />
Sets a scaling factor to resize the whole page area from the original size.<br />
<br />
==== Values ====<br />
*'''factor''': scale factor, as a decimal positive number. Numbers greater than 1.0 create a magnification effect, proportionally increasing the size of the page and its content; numbers smaller than 1.0 make the page and its content smaller than the original<br />
<br />
==== Syntax ====<br />
(#scale <factor>)<br />
<br />
=== Locked ===<br />
Disables any user command for this project. Users will be able to navigate between pages and see the current status, but all commands will be locked.<br />
<br />
==== Syntax ====<br />
If omitted, the project is unlocked.<br />
(#locked <true>)<br />
<br />
=== Background ===<br />
Defines the project's background for all pages.<br />
<br />
==== Values ====<br />
*'''image''': the image file name<br />
<br />
==== Syntax ====<br />
It must be defined after the header object, before the pages.<br />
(background!all.background <image>)<br />
<br />
{{Note: IMG Filename}}<br />
<br />
=== Camera List ===<br />
Defines the display name of each camera. It is required when you are displaying cameras in the index.hsm file. If you need to prevent access to one or more cameras for a specific index.hsm page, you can set that camera with an empty name, “”, or the reserved words “null” or “empty”. These cameras will be skipped by the camera rolling function, or when manually going from one camera to the next.<br />
<br />
==== Values ====<br />
*'''list''': the comma separated list of all cameras, in the same order in which the cameras' ids appear in the Cameras parameter in hsyco.ini. The names must be enclosed in double quotes.<br />
<br />
==== Syntax ====<br />
(#cameralist <list>)<br />
E.g.<br />
(#cameralist "garden","openspace")<br />
<br />
=== Camera Overlay ===<br />
Defines custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlays.<br />
<br />
==== Values ====<br />
*'''list''': the list of the type of overlay for each camera defined in hsyco.ini, the elements are separated by commas:<br />
** "default": default overlay for the PTZ cameras<br />
** "": default overlay for the PTZ cameras<br />
** "null": no overlay<br />
** "filename.png": customized file, in the www/<project's name>/img or www/img directory.<br />
<br />
==== Syntax ====<br />
(#cameraoverlay <overlay list>)<br />
E.g.<br />
(#cameraoverlay "","null","myoverlay.png")<br />
<br />
=== Camera Grid Headers ===<br />
Defines the display name of each camera grid. It is required when you are including camera grids in the project.<br />
<br />
==== Values ====<br />
*'''list''': the list of the cameras grids’ names, listed in order starting from 1, as they appear in the CameraGrid.id parameters in hsyco.ini. The names must be enclosed in double quotes and separated by commas.<br />
<br />
==== Syntax ====<br />
(#cameragridlist <list>)<br />
E.g.<br />
(#cameragridlist "Garden","Living Room")<br />
<br />
=== Style ===<br />
Defines style attributes that modify the appearance of the current skin. It is used to customize a skin, changing for example the color of the background.<br />
For a complete description of possible values, see [[Project Style]].<br />
<br />
==== Values ====<br />
*'''style''': the semicolon separated list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#style <style>)<br />
E.g.<br />
(#style body-background-color=red; pages-background-color=green; header-background-color=blue)<br />
<br />
=== UISet ===<br />
Defines a set of UISets that apply to the specified [[UI Objects]]. Sets are specified as ''<object's id>.<attribute name>=<value>''. A UISet without the object's id is applied directly to the project object (E.g. ''autoreload=false'' is the same as ''<project's name>.autoreload=false'')<br />
<br />
==== Values ====<br />
*'''uiset list''': list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#uiset <uiset list>)<br />
E.g.<br />
(#uiset autoreload=false; myinput.value=hello)<br />
<br />
== UI Attributes ==<br />
=== Project attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|rowspan="4"|kiosk<br />
|nolock<br />
|Kiosk mode, not locked<br />
|-<br />
|lock<br />
|Kiosk mode, locked (user navigation is disabled)<br />
|-<br />
|strict<br />
|Kiosk mode, total height excludes the height of the header/footer, so the kiosk layout can stay the same as a non-kiosk<br />
|-<br />
|false<br />
|Kiosk mode disabled<br />
|-<br />
<br />
|rowspan="2"|lock<br />
|true<br />
|Lock the interface, so user navigation is disabled<br />
|-<br />
|false<br />
|Unlock the interface, default<br />
|-<br />
<br />
|page<br />
|<page name><br />
|Show specified page. It has to be different from the previous set value<br />
|-<br />
<br />
|pageback<br />
|<page name><br />
|If the current page was set with a "page" attribute and its name is the same as <page name>, navigate to the previous page<br />
|-<br />
<br />
|rowspan="2"|accessibility<br />
|true<br />
|Enabled accessible mode<br />
|-<br />
|false<br />
|Disable accessible mode<br />
|-<br />
<br />
|blink<br />
|false<br />
|Disable all blinking animations in the project<br />
|-<br />
<br />
|rowspan="2"|autoreload<br />
|true<br />
|Default, the browser will automatically reload the page when the project changes<br />
|-<br />
|false<br />
|The browser won't automatically reload the page when the project changes<br />
|-<br />
<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project&diff=4131Project2014-03-14T12:00:24Z<p>Gionatan: /* UI Attributes */</p>
<hr />
<div>[[Category:User Interface]]<br />
A project defines a custom user interface, that allows the user to interact with the system.<br />
Each project has one or more [[page|pages]] that contain [[UI Objects]].<br />
<br />
On the index.hsm, the project's parameters are defined as directives (#<directive>)<br />
<br />
{{TOClimit|3}}<br />
<br />
== Parameters ==<br />
=== Skin ===<br />
Defines the graphical appearance of the project.<br />
<br />
==== Values ====<br />
*'''skin name''': the name of the skin. The standard skin provided with HSYCO is "blue"<br />
<br />
==== Syntax ====<br />
(#skin <skin name>)<br />
<br />
=== Language ===<br />
Defines the language used for all standard text messages of the Web interface.<br />
<br />
==== Values ====<br />
*'''language id''': the language used for the project (it | en | fr | cn)<br />
<br />
==== Syntax ====<br />
(#language <language id>)<br />
<br />
=== Header ===<br />
Specifies the page header, the text that normally appears in bookmarks and as the title of the browser's window.<br />
<br />
==== Values ====<br />
*'''title''': the project's title<br />
<br />
==== Syntax ====<br />
The header must be declared after all the directives and before the pages.<br />
(header <title>)<br />
<br />
=== Size ===<br />
Sets the project size as width and height. If the orientation mode is enabled, a second set of width and height is required. The first set refers to landscape mode, the second to portrait mode.<br />
<br />
==== Values ====<br />
*'''width''': the project's width in pixels<br />
*'''height''': the project's height in pixels<br />
<br />
==== Syntax ====<br />
(#size <width>x<height>)<br />
Or to enable orientation mode:<br />
(#size <width (landscape)>x<height (landscape)>x; <width (portrait)>x<height (portrait)>x)<br />
<br />
=== Device Image ===<br />
Enables or disables the camera or image pop-ups associated to devices in the project, as configured in the systemtopo.txt file.<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "enabled".<br />
(#deviceimage disable)<br />
<br />
=== Kiosk ===<br />
The kiosk mode removes the menu bar and borders, for digital signage or kiosks applications where you want to have a full-screen display of your pages. "lock" also disables the navigation functions.<br />
<br />
==== Values ====<br />
*'''mode''': disabled, enabled or locked<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "disabled".<br />
"enabled" mode:<br />
(#kiosk nolock)<br />
"locked" mode:<br />
(#kiosk lock)<br />
<br />
=== Scale ===<br />
Sets a scaling factor to resize the whole page area from the original size.<br />
<br />
==== Values ====<br />
*'''factor''': scale factor, as a decimal positive number. Numbers greater than 1.0 create a magnification effect, proportionally increasing the size of the page and its content; numbers smaller than 1.0 make the page and its content smaller than the original<br />
<br />
==== Syntax ====<br />
(#scale <factor>)<br />
<br />
=== Locked ===<br />
Disables any user command for this project. Users will be able to navigate between pages and see the current status, but all commands will be locked.<br />
<br />
==== Syntax ====<br />
If omitted, the project is unlocked.<br />
(#locked <true>)<br />
<br />
=== Background ===<br />
Defines the project's background for all pages.<br />
<br />
==== Values ====<br />
*'''image''': the image file name<br />
<br />
==== Syntax ====<br />
It must be defined after the header object, before the pages.<br />
(background!all.background <image>)<br />
<br />
{{Note: IMG Filename}}<br />
<br />
=== Camera List ===<br />
Defines the display name of each camera. It is required when you are displaying cameras in the index.hsm file. If you need to prevent access to one or more cameras for a specific index.hsm page, you can set that camera with an empty name, “”, or the reserved words “null” or “empty”. These cameras will be skipped by the camera rolling function, or when manually going from one camera to the next.<br />
<br />
==== Values ====<br />
*'''list''': the comma separated list of all cameras, in the same order in which the cameras' ids appear in the Cameras parameter in hsyco.ini. The names must be enclosed in double quotes.<br />
<br />
==== Syntax ====<br />
(#cameralist <list>)<br />
E.g.<br />
(#cameralist "garden","openspace")<br />
<br />
=== Camera Overlay ===<br />
Defines custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlays.<br />
<br />
==== Values ====<br />
*'''list''': the list of the type of overlay for each camera defined in hsyco.ini, the elements are separated by commas:<br />
** "default": default overlay for the PTZ cameras<br />
** "": default overlay for the PTZ cameras<br />
** "null": no overlay<br />
** "filename.png": customized file, in the www/<project's name>/img or www/img directory.<br />
<br />
==== Syntax ====<br />
(#cameraoverlay <overlay list>)<br />
E.g.<br />
(#cameraoverlay "","null","myoverlay.png")<br />
<br />
=== Camera Grid Headers ===<br />
Defines the display name of each camera grid. It is required when you are including camera grids in the project.<br />
<br />
==== Values ====<br />
*'''list''': the list of the cameras grids’ names, listed in order starting from 1, as they appear in the CameraGrid.id parameters in hsyco.ini. The names must be enclosed in double quotes and separated by commas.<br />
<br />
==== Syntax ====<br />
(#cameragridlist <list>)<br />
E.g.<br />
(#cameragridlist "Garden","Living Room")<br />
<br />
=== Style ===<br />
Defines style attributes that modify the appearance of the current skin. It is used to customize a skin, changing for example the color of the background.<br />
For a complete description of possible values, see [[Project Style]].<br />
<br />
==== Values ====<br />
*'''style''': the semicolon separated list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#style <style>)<br />
E.g.<br />
(#style body-background-color=red; pages-background-color=green; header-background-color=blue)<br />
<br />
=== UISet ===<br />
Defines a set of UISets that apply to the specified [[UI Objects]]. Sets are specified as ''<object's id>.<attribute name>=<value>''. A UISet without the object's id is applied directly to the project object (E.g. ''autoreload=false'' is the same as ''<project's name>.autoreload=false'')<br />
<br />
==== Values ====<br />
*'''uiset list''': list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#uiset <uiset list>)<br />
E.g.<br />
(#uiset autoreload=false; myinput.value=hello)<br />
<br />
== UI Attributes ==<br />
=== Project attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|rowspan="3"|kiosk<br />
|nolock<br />
|Kiosk mode, not locked<br />
|-<br />
|lock<br />
|Kiosk mode, locked (user navigation is disabled)<br />
|-<br />
|strict<br />
|Kiosk mode, total height excludes the height of the header/footer, so the kiosk layout can stay the same as a non-kiosk<br />
|-<br />
<br />
|rowspan="2"|lock<br />
|true<br />
|Lock the interface, so user navigation is disabled<br />
|-<br />
|false<br />
|Unlock the interface, default<br />
|-<br />
<br />
|page<br />
|<page name><br />
|Show specified page. It has to be different from the previous set value<br />
|-<br />
<br />
|pageback<br />
|<page name><br />
|If the current page was set with a "page" attribute and its name is the same as <page name>, navigate to the previous page<br />
|-<br />
<br />
|rowspan="2"|accessibility<br />
|true<br />
|Enabled accessible mode<br />
|-<br />
|false<br />
|Disable accessible mode<br />
|-<br />
<br />
|blink<br />
|false<br />
|Disable all blinking animations in the project<br />
|-<br />
<br />
|rowspan="2"|autoreload<br />
|true<br />
|Default, the browser will automatically reload the page when the project changes<br />
|-<br />
|false<br />
|The browser won't automatically reload the page when the project changes<br />
|-<br />
<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project&diff=4130Project2014-03-14T11:59:48Z<p>Gionatan: </p>
<hr />
<div>[[Category:User Interface]]<br />
A project defines a custom user interface, that allows the user to interact with the system.<br />
Each project has one or more [[page|pages]] that contain [[UI Objects]].<br />
<br />
On the index.hsm, the project's parameters are defined as directives (#<directive>)<br />
<br />
{{TOClimit|3}}<br />
<br />
== Parameters ==<br />
=== Skin ===<br />
Defines the graphical appearance of the project.<br />
<br />
==== Values ====<br />
*'''skin name''': the name of the skin. The standard skin provided with HSYCO is "blue"<br />
<br />
==== Syntax ====<br />
(#skin <skin name>)<br />
<br />
=== Language ===<br />
Defines the language used for all standard text messages of the Web interface.<br />
<br />
==== Values ====<br />
*'''language id''': the language used for the project (it | en | fr | cn)<br />
<br />
==== Syntax ====<br />
(#language <language id>)<br />
<br />
=== Header ===<br />
Specifies the page header, the text that normally appears in bookmarks and as the title of the browser's window.<br />
<br />
==== Values ====<br />
*'''title''': the project's title<br />
<br />
==== Syntax ====<br />
The header must be declared after all the directives and before the pages.<br />
(header <title>)<br />
<br />
=== Size ===<br />
Sets the project size as width and height. If the orientation mode is enabled, a second set of width and height is required. The first set refers to landscape mode, the second to portrait mode.<br />
<br />
==== Values ====<br />
*'''width''': the project's width in pixels<br />
*'''height''': the project's height in pixels<br />
<br />
==== Syntax ====<br />
(#size <width>x<height>)<br />
Or to enable orientation mode:<br />
(#size <width (landscape)>x<height (landscape)>x; <width (portrait)>x<height (portrait)>x)<br />
<br />
=== Device Image ===<br />
Enables or disables the camera or image pop-ups associated to devices in the project, as configured in the systemtopo.txt file.<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "enabled".<br />
(#deviceimage disable)<br />
<br />
=== Kiosk ===<br />
The kiosk mode removes the menu bar and borders, for digital signage or kiosks applications where you want to have a full-screen display of your pages. "lock" also disables the navigation functions.<br />
<br />
==== Values ====<br />
*'''mode''': disabled, enabled or locked<br />
<br />
==== Syntax ====<br />
If omitted, the default value is "disabled".<br />
"enabled" mode:<br />
(#kiosk nolock)<br />
"locked" mode:<br />
(#kiosk lock)<br />
<br />
=== Scale ===<br />
Sets a scaling factor to resize the whole page area from the original size.<br />
<br />
==== Values ====<br />
*'''factor''': scale factor, as a decimal positive number. Numbers greater than 1.0 create a magnification effect, proportionally increasing the size of the page and its content; numbers smaller than 1.0 make the page and its content smaller than the original<br />
<br />
==== Syntax ====<br />
(#scale <factor>)<br />
<br />
=== Locked ===<br />
Disables any user command for this project. Users will be able to navigate between pages and see the current status, but all commands will be locked.<br />
<br />
==== Syntax ====<br />
If omitted, the project is unlocked.<br />
(#locked <true>)<br />
<br />
=== Background ===<br />
Defines the project's background for all pages.<br />
<br />
==== Values ====<br />
*'''image''': the image file name<br />
<br />
==== Syntax ====<br />
It must be defined after the header object, before the pages.<br />
(background!all.background <image>)<br />
<br />
{{Note: IMG Filename}}<br />
<br />
=== Camera List ===<br />
Defines the display name of each camera. It is required when you are displaying cameras in the index.hsm file. If you need to prevent access to one or more cameras for a specific index.hsm page, you can set that camera with an empty name, “”, or the reserved words “null” or “empty”. These cameras will be skipped by the camera rolling function, or when manually going from one camera to the next.<br />
<br />
==== Values ====<br />
*'''list''': the comma separated list of all cameras, in the same order in which the cameras' ids appear in the Cameras parameter in hsyco.ini. The names must be enclosed in double quotes.<br />
<br />
==== Syntax ====<br />
(#cameralist <list>)<br />
E.g.<br />
(#cameralist "garden","openspace")<br />
<br />
=== Camera Overlay ===<br />
Defines custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlays.<br />
<br />
==== Values ====<br />
*'''list''': the list of the type of overlay for each camera defined in hsyco.ini, the elements are separated by commas:<br />
** "default": default overlay for the PTZ cameras<br />
** "": default overlay for the PTZ cameras<br />
** "null": no overlay<br />
** "filename.png": customized file, in the www/<project's name>/img or www/img directory.<br />
<br />
==== Syntax ====<br />
(#cameraoverlay <overlay list>)<br />
E.g.<br />
(#cameraoverlay "","null","myoverlay.png")<br />
<br />
=== Camera Grid Headers ===<br />
Defines the display name of each camera grid. It is required when you are including camera grids in the project.<br />
<br />
==== Values ====<br />
*'''list''': the list of the cameras grids’ names, listed in order starting from 1, as they appear in the CameraGrid.id parameters in hsyco.ini. The names must be enclosed in double quotes and separated by commas.<br />
<br />
==== Syntax ====<br />
(#cameragridlist <list>)<br />
E.g.<br />
(#cameragridlist "Garden","Living Room")<br />
<br />
=== Style ===<br />
Defines style attributes that modify the appearance of the current skin. It is used to customize a skin, changing for example the color of the background.<br />
For a complete description of possible values, see [[Project Style]].<br />
<br />
==== Values ====<br />
*'''style''': the semicolon separated list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#style <style>)<br />
E.g.<br />
(#style body-background-color=red; pages-background-color=green; header-background-color=blue)<br />
<br />
=== UISet ===<br />
Defines a set of UISets that apply to the specified [[UI Objects]]. Sets are specified as ''<object's id>.<attribute name>=<value>''. A UISet without the object's id is applied directly to the project object (E.g. ''autoreload=false'' is the same as ''<project's name>.autoreload=false'')<br />
<br />
==== Values ====<br />
*'''uiset list''': list of attributes and values.<br />
<br />
==== Syntax ====<br />
(#uiset <uiset list>)<br />
E.g.<br />
(#uiset autoreload=false; myinput.value=hello)<br />
<br />
=== UI Attributes ===<br />
==== Project attributes ====<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|rowspan="3"|kiosk<br />
|nolock<br />
|Kiosk mode, not locked<br />
|-<br />
|lock<br />
|Kiosk mode, locked (user navigation is disabled)<br />
|-<br />
|strict<br />
|Kiosk mode, total height excludes the height of the header/footer, so the kiosk layout can stay the same as a non-kiosk<br />
|-<br />
<br />
|rowspan="2"|lock<br />
|true<br />
|Lock the interface, so user navigation is disabled<br />
|-<br />
|false<br />
|Unlock the interface, default<br />
|-<br />
<br />
|page<br />
|<page name><br />
|Show specified page. It has to be different from the previous set value<br />
|-<br />
<br />
|pageback<br />
|<page name><br />
|If the current page was set with a "page" attribute and its name is the same as <page name>, navigate to the previous page<br />
|-<br />
<br />
|rowspan="2"|accessibility<br />
|true<br />
|Enabled accessible mode<br />
|-<br />
|false<br />
|Disable accessible mode<br />
|-<br />
<br />
|blink<br />
|false<br />
|Disable all blinking animations in the project<br />
|-<br />
<br />
|rowspan="2"|autoreload<br />
|true<br />
|Default, the browser will automatically reload the page when the project changes<br />
|-<br />
|false<br />
|The browser won't automatically reload the page when the project changes<br />
|-<br />
<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=User_Interface&diff=4129User Interface2014-03-14T11:05:14Z<p>Gionatan: </p>
<hr />
<div>[[Category:HSYCO]]<br />
HSYCO allows the interaction with the system through a custom user interface.<br />
We can identify three entities:<br />
* '''[[Project|Project]]''': a single interface<br />
* '''[[Page|Page]]''': a project can contain pages<br />
* '''[[UI Objects|Object]]''': a page can contain objects<br />
<br />
A project is defined by a subdirectory inside www that contains an index.hsm file.<br />
<br />
{{{note|Whenever HSYCO detects any change to the files in www and in its subdirectories, it forces the reload of all the projects on the connected browsers.}}}<br />
<br />
For each sub-directory in www in which the file index.hsm exists, you can access the page with the following URL:<br />
'''<nowiki>https://<name server>/<URLKey>/<subdirectory name></nowiki>'''<br />
<br />
To create or edit a project there are two methods: visually, through the [[Project Editor]] or by manually editing the project's source code, the index.hsm file.<br />
<br />
== Projects Syntax ==<br />
<br />
Projects are described through a custom markup language that defines page, objects and various directives that apply to the project (skin, language, size...).<br />
<br />
The syntax for every object is described in the corresponding section.<br />
<br />
index.hsm files can be viewed from the [[Project Editor]] (tools > source) and edited from the Editor in the [[File Manager]].<br />
<br />
When errors are detected, the page is not served to the Web browser.<br />
File parsing stops at the first error, so only the first line with errors is reported in the log file.<br />
<br />
Each type of graphic object could require one or more parameters, separated by the “;” character. Empty lines or blank spaces are ignored.<br />
<br />
{{note|Changes to index.hsm cause an automatic page reload on the connected Web browsers.}}<br />
<br />
You can insert comment lines, which are ignored. A comment line starts with the “#” character at the beginning of the line.<br />
<br />
{{note|Names in index.hsm are case sensitive, small and capital letters are significant; all objects defined in the standard skin have names with lower-case letters.}}<br />
<br />
{{note|Some objects support a variant called '''identified version''' to allow the '''!id''' dynamic modification of the text, visibility, color several other attributes with the uiSet() Java method or the UISET action.}}<br />
<br />
== The User Interface Configuration Database ==<br />
<br />
The graphical representation of user interface objects that are directly associated with I/O servers data points is defined in a file named '''systemtopo.txt'''.<br />
<br />
This file is usually created and updated automatically by the I/O servers, but can also be edited manually. It also contains location information for the WiFi location services.<br />
<br />
The systemtopo.txt file is only used by the Project Editor, to list the user interface data points in the address field of device objects, and in the run-time user interface, for the graphic representation of each object.<br />
<br />
{{tip|The systemtopo.txt file is not required for any other core function. If your HSYCO server does not have a user interface, but only application logic implemented with the various programming APIs, systemtopo.txt would be useless and could be ignored or even removed.}}<br />
<br />
See [[The User Interface Configuration Database]] section for detailed information on systemtopo.txt.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=User_Interface&diff=4128User Interface2014-03-14T11:04:25Z<p>Gionatan: </p>
<hr />
<div>HSYCO allows the interaction with the system through a custom user interface.<br />
We can identify three entities:<br />
* '''[[Project|Project]]''': a single interface<br />
* '''[[Page|Page]]''': a project can contain pages<br />
* '''[[UI Objects|Object]]''': a page can contain objects<br />
<br />
A project is defined by a subdirectory inside www that contains an index.hsm file.<br />
<br />
{{{note|Whenever HSYCO detects any change to the files in www and in its subdirectories, it forces the reload of all the projects on the connected browsers.}}}<br />
<br />
For each sub-directory in www in which the file index.hsm exists, you can access the page with the following URL:<br />
'''<nowiki>https://<name server>/<URLKey>/<subdirectory name></nowiki>'''<br />
<br />
To create or edit a project there are two methods: visually, through the [[Project Editor]] or by manually editing the project's source code, the index.hsm file.<br />
<br />
== Projects Syntax ==<br />
<br />
Projects are described through a custom markup language that defines page, objects and various directives that apply to the project (skin, language, size...).<br />
<br />
The syntax for every object is described in the corresponding section.<br />
<br />
index.hsm files can be viewed from the [[Project Editor]] (tools > source) and edited from the Editor in the [[File Manager]].<br />
<br />
When errors are detected, the page is not served to the Web browser.<br />
File parsing stops at the first error, so only the first line with errors is reported in the log file.<br />
<br />
Each type of graphic object could require one or more parameters, separated by the “;” character. Empty lines or blank spaces are ignored.<br />
<br />
{{note|Changes to index.hsm cause an automatic page reload on the connected Web browsers.}}<br />
<br />
You can insert comment lines, which are ignored. A comment line starts with the “#” character at the beginning of the line.<br />
<br />
{{note|Names in index.hsm are case sensitive, small and capital letters are significant; all objects defined in the standard skin have names with lower-case letters.}}<br />
<br />
{{note|Some objects support a variant called '''identified version''' to allow the '''!id''' dynamic modification of the text, visibility, color several other attributes with the uiSet() Java method or the UISET action.}}<br />
<br />
== The User Interface Configuration Database ==<br />
<br />
The graphical representation of user interface objects that are directly associated with I/O servers data points is defined in a file named '''systemtopo.txt'''.<br />
<br />
This file is usually created and updated automatically by the I/O servers, but can also be edited manually. It also contains location information for the WiFi location services.<br />
<br />
The systemtopo.txt file is only used by the Project Editor, to list the user interface data points in the address field of device objects, and in the run-time user interface, for the graphic representation of each object.<br />
<br />
{{tip|The systemtopo.txt file is not required for any other core function. If your HSYCO server does not have a user interface, but only application logic implemented with the various programming APIs, systemtopo.txt would be useless and could be ignored or even removed.}}<br />
<br />
See [[The User Interface Configuration Database]] section for detailed information on systemtopo.txt.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4127Project Editor2014-03-14T11:01:15Z<p>Gionatan: </p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]] <br />
[[File:Manager Project Editor.2.png]] <br />
[[File:Manager Project Editor.3.png]]<br />
<br />
The '''Projects''' section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
'''Pages''' allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the '''Objects''' tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, press the '''+''' button to show a blank project's settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The "blue" '''skin''' is automatically selected. This is the standard skin. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The '''Language'''' selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
'''Header''' is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
The '''size''' options are discussed in the next paragraph.<br />
<br />
When done, press the "create project" button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the '''Size''' section, press the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the '''orientation''' support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn't support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of [[UI Objects|objects]]:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the position value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the "..." button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the "..." button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
=== Containers ===<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The toolbar ==<br />
A top toolbar allows access to functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, we have the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning button appears if there are errors in the page, like objects with missing parameters. Press the button to list all warnings, then press a warning message to highlight the object and show the specified attribute.<br />
<br />
The tools icon shows a number of useful editing functions:<br />
* '''Snap''' enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save<br />
* '''Bring forward''' and '''send backward''' move the selected objects on top or at the bottom of the others<br />
* '''Hide''' hides an object from view in the Project Editor, not affecting the final interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. The '''unhide''' button shows all hidden objects again<br />
* '''Select''' toggles the multiple selection mode, that allows more objects to be selected and moved together, copied or cut. The same result can also be achieved holding the '''shift''' button on a physical keyboard<br />
* '''Paste''' pastes copied objects on the current page<br />
* '''Source''' shows the project's index.hsm file. Using the File Manager you can open it for editing and directly modify the project's content working on text. Going back to the Project Editor, if that project was open, you will be asked to reload the changes <br />
* '''Undo''' undoes the last operation as you would normally expect<br />
<br />
== Keyboard Shortcuts ==<br />
* '''Ctrl + C''': copy selected object(s)<br />
* '''Ctrl + X''': cut selected object(s)<br />
* '''Ctrl + V''': paste copied object(s)<br />
* '''Ctrl + Z''': undo last operation<br />
* '''Ctrl + S''' or '''Cmd + S''': save project<br />
* hold '''Shift''': toggle multiple selection mode, click and drag or click on individual objects to select them<br />
* '''Ctrl + Shift''': Quick App switch</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4113Project Editor2014-03-13T16:09:44Z<p>Gionatan: </p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]] <br />
[[File:Manager Project Editor.2.png]] <br />
[[File:Manager Project Editor.3.png]]<br />
<br />
The '''Projects''' section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
'''Pages''' allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the '''Objects''' tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, press the '''+''' button to show a blank project's settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The "blue" '''skin''' is automatically selected. This is the standard skin. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The '''Language'''' selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
'''Header''' is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
The '''size''' options are discussed in the next paragraph.<br />
<br />
When done, press the "create project" button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the '''Size''' section, press the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the '''orientation''' support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn't support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of [[UI Objects|objects]]:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the position value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the "..." button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the "..." button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
=== Containers ===<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The toolbar ==<br />
A top toolbar allows access to functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, we have the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning button appears if there are errors in the page, like objects with missing parameters. Press the button to list all warnings, then press a warning message to highlight the object and show the specified attribute.<br />
<br />
The tools icon shows a number of useful editing functions:<br />
* '''Snap''' enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save<br />
* '''Bring forward''' and '''send backward''' move the selected objects on top or at the bottom of the others<br />
* '''Hide''' hides an object from view in the Project Editor, not affecting the final interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. The '''unhide''' button shows all hidden objects again<br />
* '''Select''' toggles the multiple selection mode, that allows more objects to be selected and moved together, copied or cut. The same result can also be achieved holding the '''shift''' button on a physical keyboard<br />
* '''Paste''' pastes copied objects on the current page<br />
* '''Source''' shows the project's index.hsm file. Using the File Manager you can open it for editing and directly modify the project's content working on text. Going back to the Project Editor, if that project was open, you will be asked to reload the changes <br />
* '''Undo''' undoes the last operation as you would normally expect</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=File:Manager_Project_Editor.1.png&diff=4112File:Manager Project Editor.1.png2014-03-13T16:05:04Z<p>Gionatan: Gionatan uploaded a new version of &quot;File:Manager Project Editor.1.png&quot;</p>
<hr />
<div></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=File:Manager_Project_Editor.3.png&diff=4111File:Manager Project Editor.3.png2014-03-13T16:04:09Z<p>Gionatan: </p>
<hr />
<div></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=File:Manager_Project_Editor.2.png&diff=4110File:Manager Project Editor.2.png2014-03-13T16:04:02Z<p>Gionatan: </p>
<hr />
<div></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=File:Manager_Project_Editor.1.png&diff=4109File:Manager Project Editor.1.png2014-03-13T16:03:49Z<p>Gionatan: Gionatan uploaded a new version of &quot;File:Manager Project Editor.1.png&quot;</p>
<hr />
<div></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4108Project Editor2014-03-13T16:03:26Z<p>Gionatan: </p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]] <br />
[[File:Manager Project Editor.2.png]] <br />
[[File:Manager Project Editor.3.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, press the + button to show a blank project's settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The "blue" skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
=== Containers ===<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The toolbar ==<br />
A top toolbar allows access to functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, we have the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning button appears if there are errors in the page, like objects with missing parameters. Press the button to list all warnings, then press a warning message to highlight the object and show the specified attribute.<br />
<br />
The tools icon shows a number of useful editing functions:<br />
* '''Snap''' enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save<br />
* '''Bring forward''' and '''send backward''' move the selected objects on top or at the bottom of the others<br />
* '''Hide''' hides an object from view in the Project Editor, not affecting the final interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. The '''unhide''' button shows all hidden objects again<br />
* '''Select''' toggles the multiple selection mode, that allows more objects to be selected and moved together, copied or cut. The same result can also be achieved holding the '''shift''' button on a physical keyboard<br />
* '''Paste''' pastes copied objects on the current page<br />
* '''Source''' shows the project's index.hsm file. Using the File Manager you can open it for editing and directly modify the project's content working on text. Going back to the Project Editor, if that project was open, you will be asked to reload the changes <br />
* '''Undo''' undoes the last operation as you would normally expect</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=File:Manager_Project_Editor.1.png&diff=4107File:Manager Project Editor.1.png2014-03-13T16:00:00Z<p>Gionatan: </p>
<hr />
<div></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4103Project Editor2014-03-13T15:48:13Z<p>Gionatan: /* The index.hsm project’s source file */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
=== Containers ===<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The toolbar ==<br />
A top toolbar allows access to functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, we have the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning button appears if there are errors in the page, like objects with missing parameters. Press the button to list all warnings, then press a warning message to highlight the object and show the specified attribute.<br />
<br />
The tools icon shows a number of useful editing functions:<br />
* '''Snap''' enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save<br />
* '''Bring forward''' and '''send backward''' move the selected objects on top or at the bottom of the others<br />
* '''Hide''' hides an object from view in the Project Editor, not affecting the final interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. The '''unhide''' button shows all hidden objects again<br />
* '''Select''' toggles the multiple selection mode, that allows more objects to be selected and moved together, copied or cut. The same result can also be achieved holding the '''shift''' button on a physical keyboard<br />
* '''Paste''' pastes copied objects on the current page<br />
* '''Source''' shows the project's index.hsm file. Using the File Manager you can open it for editing and directly modify the project's content working on text. Going back to the Project Editor, if that project was open, you will be asked to reload the changes <br />
* '''Undo''' undoes the last operation as you would normally expect</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4102Project Editor2014-03-13T15:48:05Z<p>Gionatan: /* The toolbar */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
=== Containers ===<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The toolbar ==<br />
A top toolbar allows access to functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, we have the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning button appears if there are errors in the page, like objects with missing parameters. Press the button to list all warnings, then press a warning message to highlight the object and show the specified attribute.<br />
<br />
The tools icon shows a number of useful editing functions:<br />
* '''Snap''' enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save<br />
* '''Bring forward''' and '''send backward''' move the selected objects on top or at the bottom of the others<br />
* '''Hide''' hides an object from view in the Project Editor, not affecting the final interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. The '''unhide''' button shows all hidden objects again<br />
* '''Select''' toggles the multiple selection mode, that allows more objects to be selected and moved together, copied or cut. The same result can also be achieved holding the '''shift''' button on a physical keyboard<br />
* '''Paste''' pastes copied objects on the current page<br />
* '''Source''' shows the project's index.hsm file. Using the File Manager you can open it for editing and directly modify the project's content working on text. Going back to the Project Editor, if that project was open, you will be asked to reload the changes <br />
* '''Undo''' undoes the last operation as you would normally expect<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4101Project Editor2014-03-13T15:46:44Z<p>Gionatan: /* The toolbar */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
=== Containers ===<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The toolbar ==<br />
A top toolbar allows access to functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, we have the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning button appears if there are errors in the page, like objects with missing parameters. Press the button to list all warnings, then press a warning message to highlight the object and show the specified attribute.<br />
<br />
The tools icon shows a number of useful editing functions:<br />
* '''Snap''' enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save<br />
* '''Bring forward''' and '''send backward''' move the selected objects on top or at the bottom of the others<br />
* '''Hide''' hides an object from view in the Project Editor, not affecting the final interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. The '''unhide''' button shows all hidden objects again<br />
* '''Select''' toggles the multiple selection mode, that allows more objects to be selected and moved together, copied or cut. The same result can also be achieved holding the '''shift''' button on a physical keyboard<br />
* '''Paste''' pastes copied objects on the current page<br />
* '''Source''' shows the project's index.hsm file<br />
* '''Undo''' undoes the last operation as you would normally expect<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4100Project Editor2014-03-13T15:40:17Z<p>Gionatan: </p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
=== Containers ===<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The toolbar ==<br />
You have a top toolbar with functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, see the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning icon appears if there are errors in the page, like objects with missing parameters. Touch the icon to list all warnings, then touch a warning message to highlight the object and show its attributes.<br />
<br />
The tools icon shows a number of useful editing functions.<br />
<br />
Snap enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save.<br />
<br />
Finally, the hide button hides an object from view in the Project Editor, not affecting the actual Web interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. Touch the unhide button to show all objects again.<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4099Project Editor2014-03-13T15:39:41Z<p>Gionatan: /* Containers */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
== The toolbar ==<br />
You have a top toolbar with functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, see the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning icon appears if there are errors in the page, like objects with missing parameters. Touch the icon to list all warnings, then touch a warning message to highlight the object and show its attributes.<br />
<br />
The tools icon shows a number of useful editing functions.<br />
<br />
Snap enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save.<br />
<br />
Finally, the hide button hides an object from view in the Project Editor, not affecting the actual Web interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. Touch the unhide button to show all objects again.<br />
<br />
== Containers ==<br />
A [[container]] is used to group other objects together. All the objects' positions within the container are relative to the container's position. Containers can be also nested inside one another.<br />
<br />
To create a container, press the + button, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4098Project Editor2014-03-13T15:37:29Z<p>Gionatan: /* Page's Objects */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Objects ==<br />
You can add and edit graphic and control objects in a page. Press the OBJ button and you will see the select tab with the list of all objects in the page. Press any object in the list to select it, then press the edit tab to edit its attributes.<br />
<br />
Press the + button to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes' fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object's coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object selected, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
<br />
== The toolbar ==<br />
You have a top toolbar with functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, see the navigation hierarchy, with project's name, current page name, and selected object. You can click these items to quickly jump back to the objects' listing or pages' listing.<br />
<br />
A warning icon appears if there are errors in the page, like objects with missing parameters. Touch the icon to list all warnings, then touch a warning message to highlight the object and show its attributes.<br />
<br />
The tools icon shows a number of useful editing functions.<br />
<br />
Snap enables or disables the snap to grid function. Undo allows you to revert changes you've made since last save.<br />
<br />
Finally, the hide button hides an object from view in the Project Editor, not affecting the actual Web interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. Touch the unhide button to show all objects again.<br />
<br />
== Containers ==<br />
A container is not a real object. It is used to group other objects together. All the objects’ positions within the container are relative to the container’s position. Containers can be also nested inside one another.<br />
<br />
To create a container, touch the + character, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=MediaWiki:Breadcrumbs&diff=4097MediaWiki:Breadcrumbs2014-03-13T15:23:31Z<p>Gionatan: </p>
<hr />
<div>* HSYCO @ [[HSYCO|HSYCO]] ><br />
* System Architecture @ [[HSYCO]] > [[System Architecture]] > <br />
* User Interface @ [[HSYCO]] > [[User Interface]] ><br />
* UI Objects @ [[HSYCO]] > [[User Interface]] > [[UI Objects]] ><br />
* Manager @ [[HSYCO]] > [[System Architecture]] > [[Manager]] ><br />
* Programming @ [[HSYCO]] > [[Programming]] ><br />
* Events @ [[HSYCO]] > [[Programming#Events|Programming (Events)]] ><br />
* JavaScript @ [[HSYCO]] > [[Programming#JavaScript|Programming (JavaScript)]] ><br />
* Java @ [[HSYCO]] > [[Programming#Java|Programming (Java)]] ><br />
* Creating Interfaces @ [[HSYCO]] > [[Programming#Creating User Interfaces|Programming (Creating User Interfaces)]] ><br />
* Advanced Programming @ [[HSYCO]] > [[Advanced Programming]] ></div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4063Project Editor2014-03-13T11:03:54Z<p>Gionatan: /* Menus, Pages and Popups */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, select the pages tab, then press the + button.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. In a project you can have only one menu, or two if the orientation mode is enabled: a landscape and a portrait version.<br />
<br />
Press '''menu''' to create a menu, then select the '''orientation''', if enabled.<br />
The '''[[gestures]]''' attribute defines the gestures that are available on the page.<br />
'''Scope List''' defines the page's scope (for further information see ).<br />
<br />
Press '''page''' to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The '''Location''' field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
If '''Protected''' is set to pin or puk, the user will be forced to input the pin or puk when accessing the page.<br />
<br />
'''Gestures''' and '''Scope List''' is the same as the menu page.<br />
<br />
A page can be '''deleted''' or '''duplicated''' to an identical page, with a different name (ID) using the two buttons at the bottom of the panel. Also it's possible to '''copy''' and '''cut''' the page. To paste the page, there's a button on the bottom of the select tab.<br />
<br />
Press '''popup''' to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the popup, and also set its '''width''' and '''height''' in pixels.<br />
The FIT SIZE button automatically adjusts the popup's size based on the objects that you added to the popup.<br />
<br />
The popup's '''type''' defines its behaviour: a simple popup appears linked to the object that generated it, while a modal popup is exclusive and appears in the middle of the page, darkening the background.<br />
<br />
== Page's Objects ==<br />
You can add and edit graphic and control objects in a page. Touch the  button and you will see the select tab with the list of all objects in the page. Touch any object in the list to highlight it in the page, then touch the edit tab to edit its attributes.<br />
<br />
Touch the + character to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes’ fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object’s coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object highlighted, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
You have a top toolbar with functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, see the navigation hierarchy, with project’s name, current page name, and selected object. You can click these items to quickly jump back to the objects’ listing or pages’ listing.<br />
<br />
A warning icon appears if there are errors in the page, like objects with missing parameters. Touch the icon to list all warnings, then touch a warning message to highlight the object and show its attributes.<br />
<br />
The tools icon shows a number of useful editing functions.<br />
<br />
Snap enables or disables the snap to grid function. Undo allows you to revert changes you’ve made since last save.<br />
<br />
Finally, the hide button hides an object from view in the Project Editor, not affecting the actual Web interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. Touch the unhide button to show all objects again.<br />
<br />
== Containers ==<br />
A container is not a real object. It is used to group other objects together. All the objects’ positions within the container are relative to the container’s position. Containers can be also nested inside one another.<br />
<br />
To create a container, touch the + character, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4053Project Editor2014-03-13T10:30:12Z<p>Gionatan: /* Editing a Project */</p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
<br />
E.g. <br />
{|class="wikitable"<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, touch the pages tab, then the + character.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. You can have only one menu in a project, or actually two, considering the landscape and portrait versions of it for projects with orientation enabled.<br />
<br />
Touch menu to create a menu, then select the orientation, if enabled. There are no additional parameters for menus.<br />
<br />
Touch page to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The Location field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
A page can be deleted or duplicated to an identical page, with a different name (ID) using the two buttons at the bottom of the panel.<br />
<br />
Touch popup to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the pop-up, and also set its width and height in pixels.<br />
The FIT SIZE button automatically adjusts the popup’s size based on the objects that you added to the popup.<br />
<br />
== Page's Objects ==<br />
You can add and edit graphic and control objects in a page. Touch the  button and you will see the select tab with the list of all objects in the page. Touch any object in the list to highlight it in the page, then touch the edit tab to edit its attributes.<br />
<br />
Touch the + character to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes’ fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object’s coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object highlighted, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
You have a top toolbar with functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, see the navigation hierarchy, with project’s name, current page name, and selected object. You can click these items to quickly jump back to the objects’ listing or pages’ listing.<br />
<br />
A warning icon appears if there are errors in the page, like objects with missing parameters. Touch the icon to list all warnings, then touch a warning message to highlight the object and show its attributes.<br />
<br />
The tools icon shows a number of useful editing functions.<br />
<br />
Snap enables or disables the snap to grid function. Undo allows you to revert changes you’ve made since last save.<br />
<br />
Finally, the hide button hides an object from view in the Project Editor, not affecting the actual Web interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. Touch the unhide button to show all objects again.<br />
<br />
== Containers ==<br />
A container is not a real object. It is used to group other objects together. All the objects’ positions within the container are relative to the container’s position. Containers can be also nested inside one another.<br />
<br />
To create a container, touch the + character, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Project_Editor&diff=4052Project Editor2014-03-13T10:28:18Z<p>Gionatan: </p>
<hr />
<div>[[Category:INCOMPLETE]]<br />
[[Category:Manager]]<br />
[[File:Manager Project Editor Icon.png|class=appIcon]]<br />
<br />
The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.<br />
<br />
You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.<br />
<br />
[[File:Manager Project Editor.1.png]]<br />
<br />
The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project.<br />
Pages allows the creation and editing of individual pages o pop-ups within a project.<br />
Finally, the Objects tab is used to manage individual objects within a single page.<br />
<br />
== Creating a New Project ==<br />
<br />
To create a new project, touch the + button to show a blank project’s settings form.<br />
Here you should enter a unique name for this project, this is used for both the path under www and the URL to access the project from the Web browser.<br />
<br />
The “blue” skin is automatically selected. This is the standard skin in HSYCO 3.3. If you have other skins installed, they will appear in the Skin selector.<br />
<br />
The Language selector offers the supported languages, Italian, English, French and Chinese. The language attribute is used for all text messages in the project you are creating.<br />
<br />
Header is a free-text field that simply corresponds to the Web page header (the text that normally appears in bookmarks and at the top of the browser's window). If no header is specified, the default header is the project's name.<br />
<br />
We'll discuss the size options in more detail in the next chapter.<br />
<br />
When done, touch the button to confirm the new project. The Project Editor will create a directory for this project with the index.hsm skeleton file.<br />
<br />
== Page Size and Coordinates ==<br />
When creating a project, you should decide the size of it to fit the screen layout of the devices that you wish to use to access HSYCO.<br />
<br />
In the Size section, touch the iPad or iPhone button to preset a size that properly fits these devices, as well as several others, or choose your custom size by entering the width and height in pixels. You can freely have a larger width, as you would usually do for desktop or portable traditional computers, or a larger height, that normally fits the iPhone, iPod touch or other mobile phones better.<br />
<br />
You can also enable the orientation support. With orientation enabled and on tablets and mobile phones that support screen rotation based on the device's orientation, you will be able to define distinct pages within the same project to show when the device is oriented vertically or horizontally. In this case, you could also define completely different layouts for the landscape and portrait pages, with a portrait layout optimized for the iPhone, and the landscape for the iPad or personal computers.<br />
<br />
If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.<br />
<br />
The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.<br />
<br />
You can use different formats for the position field of Web objects:<br />
* X-Y pixel coordinates. For example, x:100 y:200 places the object's origin at pixel 100 horizontally and 200 vertically, starting from the top-left corner of the display area<br />
* Row-Column coordinates. r:12 c:14 places the object at row 12, column 14 based on the reference grid, which depends on the size of the object using it<br />
<br />
In the index.hsm file, the resulting value will be formatted as x<x>y<y> for X-Y coordinates and r<r>c<c> for Row-Column.<br />
<br />
== Editing a Project ==<br />
Selecting the '''edit''' tab of an existing project, you have access to several additional parameters that affect the general behavior of the project's Web interface.<br />
<br />
'''Device Image''' enables or disables the camera or image pop-ups associated to devices in the Web interface, as configured in the systemtopo.txt file.<br />
<br />
'''Kiosk''' mode is used to remove the menu bar and borders, and is intended for digital signage or kiosks applications where you want to have a full-screen display of your pages. Selecting the "lock" mode also disables the navigation functions.<br />
<br />
'''Scale''' sets a scaling factor to resize the whole page area from the original size. Values greater than 1.0 create a magnifying effect, proportionally increasing the size of the page and its content; values smaller than 1.0 make the page and its content smaller than the original.<br />
<br />
Selecting '''Project locked''', disables any action that could be sent pressing buttons and commands in this project's Web interface.<br />
<br />
The '''Background''' parameters is used to select a custom image as the general background for all pages in this project.<br />
<br />
Pressing the ... button in the '''Camera List''' section, will show a pop-up dialog where you should enter a friendly description for each one of the cameras listed in the hsyco.ini file.<br />
<br />
Just leave the description text field blank if you don’t want to show a camera in this project.<br />
<br />
Pressing the ... button in the '''Camera Overlay''' section, will show a pop-up dialog where you could specify custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlay for PTZ cameras.<br />
<br />
'''Camera Grid''', just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.<br />
<br />
'''Scope List''' is used to associate a scope to the project, allowing specific UISet to be made. For further information about scope, see [[JavaScript_Command_and_Utility_Functions_API#User_Interface|JavaScript Command and Utility Functions API]].<br />
<br />
'''Style''' allow skin customization based on several attributes. For further information, see [[Project Style]].<br />
<br />
Finally, '''UISet''' allows the execution of a group of UISet instructions. It's useful to initialize UI Attributes. UI Attributes in the list are specified with an Attribute and a corresponding Value. Attributes have the format '''<object's id>.<attribute>'''. For UISets that apply to the project, the project's id is optional. For UISets that apply to all objects of a certain type, the format '''(<object's name>).<attribute>''' is used.<br />
E.g. <br />
{|<br />
|myimage.pos=x0y10<br />
|Changes position for object "myimage"<br />
|-<br />
|autoreload=false<br />
|Sets the project's autoreload attribute to false<br />
|-<br />
|(input).maxlenght=20<br />
|Sets the maximum length of characters of all input objects<br />
|}<br />
<br />
At the bottom of the panel you have buttons to delete or duplicate the project.<br />
<br />
== Menus, Pages and Popups ==<br />
<br />
We have three types of pages in the Web interface, menus, regular pages and pop-ups. To create a new page, touch the pages tab, then the + character.<br />
<br />
Menus are just like ordinary pages, but a menu is also the home page of a project. You can have only one menu in a project, or actually two, considering the landscape and portrait versions of it for projects with orientation enabled.<br />
<br />
Touch menu to create a menu, then select the orientation, if enabled. There are no additional parameters for menus.<br />
<br />
Touch page to create a new page, or pick a page from the selection list to edit.<br />
<br />
When a new page is created, the Project Editor automatically assigns it a name (that is the page ID) and a default title. You should change the page name and also its title to some more user friendly values.<br />
<br />
Select the orientation, if enabled.<br />
<br />
The Location field lets you associate a page to one or more location IDs, as defined with the LocationBases parameter in hsyco.ini. Thanks to the association between pages and locations, you can click the location name that is shown in the top-right area of the menu bar to jump to the pages associated to that area.<br />
<br />
A page can be deleted or duplicated to an identical page, with a different name (ID) using the two buttons at the bottom of the panel.<br />
<br />
Touch popup to create a new pop-up.<br />
<br />
Instead of using the full real estate of the project’s Web interface, a pop-up is a smaller page that shows on top of an existing page or another pop-up.<br />
<br />
Just like a page, you should change the name and title of the pop-up, and also set its width and height in pixels.<br />
The FIT SIZE button automatically adjusts the popup’s size based on the objects that you added to the popup.<br />
<br />
== Page's Objects ==<br />
You can add and edit graphic and control objects in a page. Touch the  button and you will see the select tab with the list of all objects in the page. Touch any object in the list to highlight it in the page, then touch the edit tab to edit its attributes.<br />
<br />
Touch the + character to add a new object. Pick an object from the list of all available objects, then move it in the page and edit its attributes.<br />
<br />
The edit tab shows all attributes of the selected object. Some attributes’ fields have selectors that let you choose from a list of values, like the address attribute of button objects. Others, like the image objects, have images selection wizards that let you browse existing files. Finally, objects with the CSS style attribute, have a style wizard.<br />
<br />
Touch the object’s coordinates to toggle between the row/column grid and pixels.<br />
<br />
When you have an object highlighted, go to the select tab to change the order of the object in the page. You can move an object up or down the list.<br />
<br />
Objects on top will graphically appear above others in the Web page.<br />
You have a top toolbar with functions that are specific of the Project Editor.<br />
<br />
Next to the projects, pages, and objects tabs, see the navigation hierarchy, with project’s name, current page name, and selected object. You can click these items to quickly jump back to the objects’ listing or pages’ listing.<br />
<br />
A warning icon appears if there are errors in the page, like objects with missing parameters. Touch the icon to list all warnings, then touch a warning message to highlight the object and show its attributes.<br />
<br />
The tools icon shows a number of useful editing functions.<br />
<br />
Snap enables or disables the snap to grid function. Undo allows you to revert changes you’ve made since last save.<br />
<br />
Finally, the hide button hides an object from view in the Project Editor, not affecting the actual Web interface, and is used to hide objects that are on top of others, so you can see objects that would otherwise be fully or partially hidden. Touch the unhide button to show all objects again.<br />
<br />
== Containers ==<br />
A container is not a real object. It is used to group other objects together. All the objects’ positions within the container are relative to the container’s position. Containers can be also nested inside one another.<br />
<br />
To create a container, touch the + character, then choose container from the list.<br />
<br />
A container box appears in the page. You can resize it by touching the bottom right corner and dragging, or open the container touching the bottom left corner.<br />
<br />
When you open a container, you have access to the objects inside the container, like in a normal page. When you are done editing the enclosed objects, close the container touching again the bottom left corner.<br />
<br />
== The index.hsm project’s source file ==<br />
Touching source in the tools bar, the Project Editor will show the index.hsm source text.<br />
<br />
Using the File Manager you can open it for editing and directly modify the project’s content working on text. Going back to the Projects Editor, if that project was open, you will be asked to reload the changes.</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Link&diff=4050Link2014-03-13T09:41:35Z<p>Gionatan: </p>
<hr />
<div>{{UI Object Header}}<br />
A button used to navigate to another page, a pop-up, or an external Web page.<br />
It has several colors (depending on the skin) and four different sizes:<br />
* '''link''' (standard size)<br />
:[[File:UI Object link.png]]<br />
* '''linkmini''' (medium size)<br />
:[[File:UI Object linkmini.png]]<br />
* '''linkmicro''' (small size)<br />
:[[File:UI Object linkmicro.png]]<br />
* '''dlink''' (big size)<br />
:[[File:UI Object dlink.png]]<br />
<br />
For a custom image version, see [[ImageLink]].<br />
<br />
== Parameters ==<br />
*'''id''': the object's ID, used by UISets. Required<br />
*'''position''': the object's position. Use the pixels or rows and columns coordinates format<br />
*'''color''': the color of the button. It can assume any of the skin's color values (E.g. for the "blue" skin, the possible values are: b - blue; g - green; gr - gray; r - red; y - yellow; glass)<br />
*'''page''': the name of the destination page associated to the button. It is possible to specify an absolute or relative URL in the '''page''' parameter. The tag will work as an <A HREF> tag, loading the new page. If the loaded page is an HSYCO menu, the '''back''' link will show up in the menu page, to reload the referrer page<br />
*'''label''': the text label on the button. It can contain HTML tags<br />
<br />
== Syntax ==<br />
(link[!<id>] <pos>; <color>; <page>; <label>)<br />
<br />
(linkmini[!<id>] <pos>; <color>; <page>; <label>)<br />
<br />
(linkmicro[!<id>] <pos>; <color>; <page>; <label>)<br />
<br />
(dlink[!<id>] <pos>; <color>; <page>; <label>)<br />
<br />
E.g.<br />
(link!link1 x10y20; r; page1; Page 1)<br />
<br />
(linkmini r0c1; glass; <nowiki>http://www.hsyco.com</nowiki>; hsyco)<br />
<br />
(linkmicro x0y100; gr; /hsycohsyco/office; HSYCO Office)<br />
<br />
(dlink!dlink1 x10y10; b; page1; <nowiki>Larger text<br>with <b>HTML</b></nowiki> tags)<br />
<br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Label)}}<br />
{{UI Object Attributes (Button)}}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=ImageLink&diff=4049ImageLink2014-03-13T09:41:22Z<p>Gionatan: </p>
<hr />
<div>{{UI Object Header}}<br />
A clickable image from the www/img directory. You can add an optional label text next to the image, and define several optional CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up.<br />
<br />
== Parameters ==<br />
{{UI Object Parameter (ID)}}<br />
{{UI Object Parameter (image)}}<br />
{{UI Object Parameter (position)}}<br />
*'''size''': the image's width and height<br />
*'''page''': the name of the destination page when you click the image. It is<br />
possible to specify an absolute or relative URL in the ''page'' parameter. The tag will work as an <A HREF> tag, loading the new page. If the loaded page is an HSYCO menu, the ''back'' link will show up in the menu page, to reload the referrer page<br />
*'''label''': the image's label<br />
*'''css''': the label's css attributes<br />
<br />
{{Note: IMG Filename}}<br />
== Syntax ==<br />
(imagelink<!id> <image's filename>; <position>; <width>; <height>; <page>; <label>; <css>)<br />
E.g.<br />
(imagelink myimage.png; r8c7; 100; 100; page1; Label; (font-style:italic; top:-15px))<br />
<br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Label)}}<br />
{{UI Object Attributes (Image)}}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Image&diff=4048Image2014-03-13T09:41:15Z<p>Gionatan: </p>
<hr />
<div>{{UI Object Header}}<br />
Shows an image file from the www/img directory. You can add an optional label text next to the image, and define several optional CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up.<br />
<br />
== Parameters ==<br />
{{UI Object Parameter (ID)}}<br />
{{UI Object Parameter (image)}}<br />
{{UI Object Parameter (position)}}<br />
*'''size''':the image's width and height<br />
*'''label''':the image's label<br />
*'''css''':the label's css attributes<br />
<br />
{{Note: IMG Filename}}<br />
== Syntax ==<br />
(image<!id> <image's filename>; <pos>; <width>; <height>; <label>; <css>)<br />
E.g.<br />
(image myimage.png; r8c7; 100; 100; Label; (font-style:italic; top:-15px))<br />
<br />
== UI Attributes ==<br />
{{UI Object Attributes (Common)}}<br />
{{UI Object Attributes (Label)}}<br />
{{UI Object Attributes (Image)}}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Template:UI_Object_Attributes_(Label)&diff=4047Template:UI Object Attributes (Label)2014-03-13T09:38:25Z<p>Gionatan: /* Label attributes */</p>
<hr />
<div>=== Label attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|label<br />
|<string><br />
|Label's text. Can contain HTML tags<br />
|-<br />
|fontfamily<br />
|<family name><br />
|A prioritized list of font family names<br />
|-<br />
|fontsize<br />
|<size><br />
|Font size in pixels. E.g. ''15px''<br />
|-<br />
|fontcolor<br />
|<CSS color><br />
|Font color<br />
|-<br />
|rowspan="3"|fontstyle<br />
|normal<br />
|Normal font style, default<br />
|-<br />
|italic<br />
|Italic font style<br />
|-<br />
|oblique<br />
|Oblique font style<br />
|-<br />
|rowspan="5"|fontweight<br />
|normal<br />
|Normal characters, default<br />
|-<br />
|bold<br />
|Thick characters<br />
|-<br />
|bolder<br />
|Thicker characters<br />
|-<br />
|lighter<br />
|Lighter characters<br />
|-<br />
|100 ... 900<br />
|Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold<br />
|-<br />
|}</div>Gionatanhttp://wiki.hsyco.com/3.3.0/index.php?title=Template:UI_Object_Attributes_(Label)&diff=4046Template:UI Object Attributes (Label)2014-03-13T09:37:56Z<p>Gionatan: /* Label attributes */</p>
<hr />
<div>=== Label attributes ===<br />
{| class="wikitable"<br />
!Name<br />
!Value<br />
!Description<br />
|-<br />
|label<br />
|<string><br />
|Label's text. Can contain HTML tags<br />
|-<br />
|fontfamily<br />
|<family name><br />
|A prioritized list of font family names<br />
|-<br />
|fontsize<br />
|<size><br />
|Font size in pixels. E.g. ''15px''<br />
|-<br />
|fontcolor<br />
|<CSS color><br />
|Font color<br />
|-<br />
|rowspan="3"|fontstyle<br />
|normal<br />
|Normal font style, default<br />
|-<br />
|italic<br />
|Italic font style<br />
|-<br />
|oblique<br />
|Oblique font style<br />
|-<br />
|rowspan="5"|fontweight<br />
|normal<br />
|Normal characters, default<br />
|-<br />
|bold<br />
|Thick characters<br />
|-<br />
|bolder<br />
|Thicker characters<br />
|-<br />
|lighter<br />
|Lighter characters<br />
|-<br />
|100..900<br />
|Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold<br />
|-<br />
|}</div>Gionatan