Difference between revisions of "Project"

From HSYCO
Jump to navigation Jump to search
 
(68 intermediate revisions by 4 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>)
  
−
<div class="toclimit-{{{1|{{{limit|3}}}}}}">__TOC__</div>
+
{{TOClimit|3}}
  
 
== Parameters ==
 
== Parameters ==
Line 21: Line 21:
  
 
==== Values ====
 
==== Values ====
−
*'''language id''': the language used for the project (it | en | fr | cn)
+
*'''language id''': the language used for the project:
 +
**cn: Chinese
 +
**en: English
 +
**fr: French
 +
**de: German
 +
**dk: Danish
 +
**it: Italian
 +
**pl: Polish
 +
**sl: Slovenian
  
 
==== Syntax ====
 
==== Syntax ====
Line 69: Line 77:
  
 
=== Scale ===
 
=== Scale ===
−
Sets a scaling factor to resize the whole page area from the original size.
+
Sets a scaling value to resize the whole page area from the original size.
  
 
==== Values ====
 
==== Values ====
 +
*'''auto''': the user interface is automatically expanded to fill the available browser area
 +
*'''fit''': the user interface is expanded as with auto, but also reduced if the available browser area is smaller than the original project's size
 
*'''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
 
*'''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 ====
 
==== Syntax ====
−
  (#scale <factor>)
+
  (#scale <value>)
  
 
=== Locked ===
 
=== Locked ===
Line 88: Line 98:
  
 
==== Values ====
 
==== Values ====
−
*'''image''': the image file name. The image will be searched inside the ''www/<project's name>/img'' directory first, then inside the ''www/img'' directory.
+
*'''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!<project's name>.background <image>)
 +
 
 +
{{Note: IMG Filename}}
  
 
=== Camera List ===
 
=== Camera List ===
Line 132: Line 144:
  
 
=== 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 or pages.
+
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 156:
  
 
=== 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'').
 +
To apply a UISet to all objects of a type, specify it as ''(<object's type>).<attribute name>=<value>'' (e.g. "(user).fontweight=bold").
  
 
==== Values ====
 
==== Values ====
Line 153: Line 166:
 
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 VoiceOver when the browser supports it. These allow VoiceOver to recognize buttons and their states. A custom interface optimized for VoiceOver can include the following [[UI Objects|UI objects]]:
 +
* [[link]]
 +
* [[text]]
 +
* [[button]]
 +
* [[user]]
 +
 +
== HSYCO App Support ==
 +
=== Favorite Pages ===
 +
Selected pages can be passed to the HSYCO App as favorite pages.
 +
These pages will appear on the HSYCO App interface for quick access, when the current interface is displayed.
 +
Favorite pages are specified through the "app_favpages" UISet, with the following JSON format:
 +
{"label":"<page label>", "page":"<page id>"}, {"label":"...
 +
 +
E.g.
 +
{"label":"Home", "page":"menu"}, {"label":"Cam", "page":"cameras"}
 +
 +
=== Apple Watch Page ===
 +
Through the HSYCO app it's possible to configure a page for the Apple Watch. This can be done visually with the Project Editor or through the "app_watch" UISet, which is useful for interfaces built dinamically.
 +
 +
An "app_watch" UISet is structured as follows:
 +
{type:<type>, label:<label>,  action:<action>}, {type: ...} ...
 +
 +
Each comma separated { ... } block defines a UI object with its attributes.
 +
Each object has a type attribute (ex. label, button, slider...) and various additional attributes, depending on its type.
 +
 +
For more information read the [[Apple_Watch_Interface|Apple Watch Interface documentation]].
 +
 +
== UI Attributes ==
 +
=== Project attributes ===
 +
{| class="wikitable"
 +
!Name
 +
!Value
 +
!Description
 +
|-
 +
 +
|rowspan="2"|accessibility
 +
|true
 +
|Enabled accessible mode
 +
|-
 +
|false
 +
|Disable accessible mode
 +
|-
 +
 +
|app_favpages
 +
|<configuration string>
 +
|Configure the favorite pages, displayed as links on the HSYCO App interface
 +
|-
 +
 +
|app_watch
 +
|<configuration string>
 +
|Configure the apple watch page associated to this project, accessible through the HSYCO App
 +
|-
 +
 +
|audiochannel
 +
|<string>
 +
|The name of an audio channel, to use with [[Audio and Public Announcement]]. If set, audio from a different channel won't be played. The default value is the name of 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
 +
|-
 +
 +
|blink
 +
|false
 +
|Disable all blinking animations in the project
 +
|-
 +
 +
|rowspan="2"|fullwindow
 +
|true
 +
|When an object (e.g. camerapanel, datalogger) switches to fullscreen mode, it will occupy the whole browser's window instead of actually going fullscreen
 +
|-
 +
|false
 +
|Default value. When an object (e.g. camerapanel, datalogger) switches to fullscreen mode, the browser page will switch to fullscreen
 +
|-
 +
 +
|gestures
 +
|false
 +
|Disable all gestures for the project
 +
|-
 +
 +
|gohome
 +
|<seconds>
 +
|After <seconds> seconds of inactivity, go to the menu page, or the page set with the page=<page name> URL option
 +
|-
 +
 +
|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
 +
|<page name>
 +
|Show the specified page (or modal pop-up) and disable user navigation
 +
|-
 +
|"" (empty string)
 +
|Unlock the interface, default
 +
|-
 +
 +
|rowspan="3"|page
 +
|<page name>
 +
|Show a page.
 +
This UISet shows the page only if the project is running. Setting this attribute and then loading the project won't trigger the page change.
 +
|-
 +
|"" (empty string)
 +
|Goes to the previous page (same as pressing the back button), without performing any checks (as opposed to the pageback attribute).
 +
|-
 +
|logout
 +
|forces a log out of the current session and shows the PIN pop-up
 +
|-
 +
 +
|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="3"|scale
 +
|auto
 +
|The user interface is automatically expanded to fill the available browser area
 +
|-
 +
|fit
 +
|The user interface is expanded as with auto, but also reduced if the available browser area is smaller than the original project's size
 +
|-
 +
|factor
 +
|The user interfaced is scaled to the specified factor, 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
 +
|-
 +
 +
|rowspan="2"|screensaver
 +
|<seconds>
 +
|Enters screensaver mode after <seconds> time of inactivity (see the '''[[Screensaver| Screensaver]]''' page for more details)
 +
|-
 +
|false
 +
|disables screensaver mode (0 has the same effect)
 +
|-
 +
 +
|rowspan="3"|screensaverimage
 +
|&lt;full url <nowiki>(http://...)</nowiki>&gt;
 +
|rowspan="2"|Set the image source
 +
|-
 +
|<nowiki>&lt;path relative to the project's img/ path&gt;</nowiki>
 +
|-
 +
|<empty string>
 +
|No screensaver image (default value)
 +
|-
 +
 +
|rowspan="2"|screensaverimagesize
 +
|fit
 +
|Set the screensaver image size so that it is fully contained in the interface (default value)
 +
|-
 +
|crop
 +
|Set the screensaver image size so that it covers the interface
 +
|-
 +
 +
|}

Latest revision as of 16:27, 17 February 2023

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:
    • cn: Chinese
    • en: English
    • fr: French
    • de: German
    • dk: Danish
    • it: Italian
    • pl: Polish
    • sl: Slovenian

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 value to resize the whole page area from the original size.

Values

  • auto: the user interface is automatically expanded to fill the available browser area
  • fit: the user interface is expanded as with auto, but also reduced if the available browser area is smaller than the original project's size
  • 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 <value>)

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!<project's name>.background <image>)
Image files are searched inside the www/<project's name>/img directory first, then inside the www/img directory.
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). To apply a UISet to all objects of a type, specify it as (<object's type>).<attribute name>=<value> (e.g. "(user).fontweight=bold").

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 VoiceOver when the browser supports it. These allow VoiceOver to recognize buttons and their states. A custom interface optimized for VoiceOver can include the following UI objects:

HSYCO App Support

Favorite Pages

Selected pages can be passed to the HSYCO App as favorite pages. These pages will appear on the HSYCO App interface for quick access, when the current interface is displayed. Favorite pages are specified through the "app_favpages" UISet, with the following JSON format: 

{"label":"<page label>", "page":"<page id>"}, {"label":"...

E.g. 

{"label":"Home", "page":"menu"}, {"label":"Cam", "page":"cameras"}

Apple Watch Page

Through the HSYCO app it's possible to configure a page for the Apple Watch. This can be done visually with the Project Editor or through the "app_watch" UISet, which is useful for interfaces built dinamically.

An "app_watch" UISet is structured as follows: 

{type:<type>, label:<label>,  action:<action>}, {type: ...} ...

Each comma separated { ... } block defines a UI object with its attributes. Each object has a type attribute (ex. label, button, slider...) and various additional attributes, depending on its type.

For more information read the Apple Watch Interface documentation.

UI Attributes

Project attributes

Name Value Description
accessibility true Enabled accessible mode
false Disable accessible mode
app_favpages <configuration string> Configure the favorite pages, displayed as links on the HSYCO App interface
app_watch <configuration string> Configure the apple watch page associated to this project, accessible through the HSYCO App
audiochannel <string> The name of an audio channel, to use with Audio and Public Announcement. If set, audio from a different channel won't be played. The default value is the name of 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
blink false Disable all blinking animations in the project
fullwindow true When an object (e.g. camerapanel, datalogger) switches to fullscreen mode, it will occupy the whole browser's window instead of actually going fullscreen
false Default value. When an object (e.g. camerapanel, datalogger) switches to fullscreen mode, the browser page will switch to fullscreen
gestures false Disable all gestures for the project
gohome <seconds> After <seconds> seconds of inactivity, go to the menu page, or the page set with the page=<page name> URL option
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 <page name> Show the specified page (or modal pop-up) and disable user navigation
"" (empty string) Unlock the interface, default
page <page name> Show a page.

This UISet shows the page only if the project is running. Setting this attribute and then loading the project won't trigger the page change.

"" (empty string) Goes to the previous page (same as pressing the back button), without performing any checks (as opposed to the pageback attribute).
logout forces a log out of the current session and shows the PIN pop-up
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
scale auto The user interface is automatically expanded to fill the available browser area
fit The user interface is expanded as with auto, but also reduced if the available browser area is smaller than the original project's size
factor The user interfaced is scaled to the specified factor, 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

screensaver <seconds> Enters screensaver mode after <seconds> time of inactivity (see the Screensaver page for more details)
false disables screensaver mode (0 has the same effect)
screensaverimage <full url (http://...)> Set the image source
<path relative to the project's img/ path>
<empty string> No screensaver image (default value)
screensaverimagesize fit Set the screensaver image size so that it is fully contained in the interface (default value)
crop Set the screensaver image size so that it covers the interface
Retrieved from "https://wiki.hsyco.com/3.8/index.php?title=Project&oldid=10855"