Difference between revisions of "Project"
| (11 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
[[Category:User Interface]] | [[Category:User Interface]] | ||
A project defines a custom user interface, that allows the user to interact with the system. | A project defines a custom user interface, that allows the user to interact with the system. | ||
| − | Each project has one or more [[pages]] that contain [[UI Objects]]. | + | Each project has one or more [[page|pages]] that contain [[UI Objects]]. |
On the index.hsm, the project's parameters are defined as directives (#<directive>) | On the index.hsm, the project's parameters are defined as directives (#<directive>) | ||
| − | {{TOClimit| | + | {{TOClimit|3}} |
== Parameters == | == Parameters == | ||
| Line 88: | Line 88: | ||
==== Values ==== | ==== Values ==== | ||
| − | *'''image''': the image file name | + | *'''image''': the image file name |
==== Syntax ==== | ==== Syntax ==== | ||
It must be defined after the header object, before the pages. | It must be defined after the header object, before the pages. | ||
(background!all.background <image>) | (background!all.background <image>) | ||
| + | |||
| + | {{Note: IMG Filename}} | ||
=== Camera List === | === Camera List === | ||
| Line 132: | Line 134: | ||
=== Style === | === Style === | ||
| − | 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 | + | 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. |
For a complete description of possible values, see [[Project Style]]. | For a complete description of possible values, see [[Project Style]]. | ||
| Line 144: | Line 146: | ||
=== UISet === | === UISet === | ||
| − | 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'') | + | 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'') |
==== Values ==== | ==== Values ==== | ||
| Line 153: | Line 155: | ||
E.g. | E.g. | ||
(#uiset autoreload=false; myinput.value=hello) | (#uiset autoreload=false; myinput.value=hello) | ||
| + | |||
| + | == Accessibility == | ||
| + | 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]]: | ||
| + | * [[link]] | ||
| + | * [[text]] | ||
| + | * [[button]] | ||
| + | * [[user]] | ||
| + | |||
| + | == UI Attributes == | ||
| + | === Project attributes === | ||
| + | {| class="wikitable" | ||
| + | !Name | ||
| + | !Value | ||
| + | !Description | ||
| + | |- | ||
| + | |rowspan="4"|kiosk | ||
| + | |nolock | ||
| + | |Kiosk mode, not locked | ||
| + | |- | ||
| + | |lock | ||
| + | |Kiosk mode, locked (user navigation is disabled) | ||
| + | |- | ||
| + | |strict | ||
| + | |Kiosk mode, total height excludes the height of the header/footer, so the kiosk layout can stay the same as a non-kiosk | ||
| + | |- | ||
| + | |false | ||
| + | |Kiosk mode disabled | ||
| + | |- | ||
| + | |||
| + | |rowspan="2"|lock | ||
| + | |true | ||
| + | |Lock the interface, so user navigation is disabled | ||
| + | |- | ||
| + | |false | ||
| + | |Unlock the interface, default | ||
| + | |- | ||
| + | |||
| + | |page | ||
| + | |<page name> | ||
| + | |Show specified page. It has to be different from the previous set value | ||
| + | |- | ||
| + | |||
| + | |pageback | ||
| + | |<page name> | ||
| + | |If the current page was set with a "page" attribute and its name is the same as <page name>, navigate to the previous page | ||
| + | |- | ||
| + | |||
| + | |rowspan="2"|accessibility | ||
| + | |true | ||
| + | |Enabled accessible mode | ||
| + | |- | ||
| + | |false | ||
| + | |Disable accessible mode | ||
| + | |- | ||
| + | |||
| + | |blink | ||
| + | |false | ||
| + | |Disable all blinking animations in the project | ||
| + | |- | ||
| + | |||
| + | |rowspan="2"|autoreload | ||
| + | |true | ||
| + | |Default, the browser will automatically reload the page when the project changes | ||
| + | |- | ||
| + | |false | ||
| + | |The browser won't automatically reload the page when the project changes | ||
| + | |- | ||
| + | |||
| + | |} | ||
Latest revision as of 13:09, 14 March 2014
A project defines a custom user interface, that allows the user to interact with the system. Each project has one or more pages that contain UI Objects.
On the index.hsm, the project's parameters are defined as directives (#<directive>)
Parameters
Skin
Defines the graphical appearance of the project.
Values
- skin name: the name of the skin. The standard skin provided with HSYCO is "blue"
Syntax
(#skin <skin name>)
Language
Defines the language used for all standard text messages of the Web interface.
Values
- language id: the language used for the project (it | en | fr | cn)
Syntax
(#language <language id>)
Header
Specifies the page header, the text that normally appears in bookmarks and as the title of the browser's window.
Values
- title: the project's title
Syntax
The header must be declared after all the directives and before the pages.
(header <title>)
Size
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.
Values
- width: the project's width in pixels
- height: the project's height in pixels
Syntax
(#size <width>x<height>)
Or to enable orientation mode:
(#size <width (landscape)>x<height (landscape)>x; <width (portrait)>x<height (portrait)>x)
Device Image
Enables or disables the camera or image pop-ups associated to devices in the project, as configured in the systemtopo.txt file.
Syntax
If omitted, the default value is "enabled".
(#deviceimage disable)
Kiosk
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.
Values
- mode: disabled, enabled or locked
Syntax
If omitted, the default value is "disabled". "enabled" mode:
(#kiosk nolock)
"locked" mode:
(#kiosk lock)
Scale
Sets a scaling factor to resize the whole page area from the original size.
Values
- 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
Syntax
(#scale <factor>)
Locked
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.
Syntax
If omitted, the project is unlocked.
(#locked <true>)
Background
Defines the project's background for all pages.
Values
- image: the image file name
Syntax
It must be defined after the header object, before the pages.
(background!all.background <image>)
If the filename is set with a UISet, it's possible to load an image from the web by entering the URL, or a path relative to www/<skin's name>/pic by specifying /pic/ followed by the filename
Camera List
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.
Values
- 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.
Syntax
(#cameralist <list>)
E.g.
(#cameralist "garden","openspace")
Camera Overlay
Defines custom overlay image masks for each camera. It is optional, and if not specified HSYCO will use the standard overlays.
Values
- list: the list of the type of overlay for each camera defined in hsyco.ini, the elements are separated by commas:
- "default": default overlay for the PTZ cameras
- "": default overlay for the PTZ cameras
- "null": no overlay
- "filename.png": customized file, in the www/<project's name>/img or www/img directory.
Syntax
(#cameraoverlay <overlay list>)
E.g.
(#cameraoverlay "","null","myoverlay.png")
Camera Grid Headers
Defines the display name of each camera grid. It is required when you are including camera grids in the project.
Values
- 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.
Syntax
(#cameragridlist <list>)
E.g.
(#cameragridlist "Garden","Living Room")
Style
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. For a complete description of possible values, see Project Style.
Values
- style: the semicolon separated list of attributes and values.
Syntax
(#style <style>)
E.g.
(#style body-background-color=red; pages-background-color=green; header-background-color=blue)
UISet
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)
Values
- uiset list: list of attributes and values.
Syntax
(#uiset <uiset list>)
E.g.
(#uiset autoreload=false; myinput.value=hello)
Accessibility
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 Attributes
Project attributes
| Name | Value | Description |
|---|---|---|
| kiosk | nolock | Kiosk mode, not locked |
| lock | Kiosk mode, locked (user navigation is disabled) | |
| strict | Kiosk mode, total height excludes the height of the header/footer, so the kiosk layout can stay the same as a non-kiosk | |
| false | Kiosk mode disabled | |
| lock | true | Lock the interface, so user navigation is disabled |
| false | Unlock the interface, default | |
| page | <page name> | Show specified page. It has to be different from the previous set value |
| pageback | <page name> | If the current page was set with a "page" attribute and its name is the same as <page name>, navigate to the previous page |
| accessibility | true | Enabled accessible mode |
| false | Disable accessible mode | |
| blink | false | Disable all blinking animations in the project |
| autoreload | true | Default, the browser will automatically reload the page when the project changes |
| false | The browser won't automatically reload the page when the project changes |
