Project Editor

The Project Editor is a very powerful Web-based visual editor you can use to create user interfaces.

You will see three tabs in the top-left corner of the page, Projects, Pages, and Objects.

The Projects section is used to upload a project, edit its parameters, duplicate, delete or create a new project. Pages allows the creation and editing of individual pages o pop-ups within a project. Finally, the Objects tab is used to manage individual objects within a single page.

Creating a New Project

To create a new project, touch the + button to show a blank project’s settings form. 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.

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.

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.

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.

We'll discuss the size options in more detail in the next chapter.

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.

Page Size and Coordinates

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.

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.

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.

If the device doesn’t support orientation, the landscape format will be used when showing the project's Web interface.

The general layout and metrics of the page area are shown in the following snapshot, based for example on a 1000x800 window size.

You can use different formats for the position field of Web objects:

• 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
• 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

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.

Editing a Project

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.

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.

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.

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.

Selecting Project locked, disables any action that could be sent pressing buttons and commands in this project's Web interface.

The Background parameters is used to select a custom image as the general background for all pages in this project.

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.

Just leave the description text field blank if you don’t want to show a camera in this project.

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.

Camera Grid, just like the Camera List section, allows you to enter friendly descriptions for camera grids defined in hsyco.ini.

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.

Style allow skin customization based on several attributes. For further information, see Project Style.

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. E.g.

myimage.pos=x0y10	Changes position for object "myimage"
autoreload=false	Sets the project's autoreload attribute to false
(input).maxlenght=20	Sets the maximum length of characters of all input objects

At the bottom of the panel you have buttons to delete or duplicate the project.

Menus, Pages and Popups

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.

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.

Touch menu to create a menu, then select the orientation, if enabled. There are no additional parameters for menus.

Touch page to create a new page, or pick a page from the selection list to edit.

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.

Select the orientation, if enabled.

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.

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.

Touch popup to create a new pop-up.

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.

Just like a page, you should change the name and title of the pop-up, and also set its width and height in pixels. The FIT SIZE button automatically adjusts the popup’s size based on the objects that you added to the popup.

Page's Objects

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.

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.

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.

Touch the object’s coordinates to toggle between the row/column grid and pixels.

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.

Objects on top will graphically appear above others in the Web page. You have a top toolbar with functions that are specific of the Project Editor.

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.

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.

The tools icon shows a number of useful editing functions.

Snap enables or disables the snap to grid function. Undo allows you to revert changes you’ve made since last save.

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.

Containers

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.

To create a container, touch the + character, then choose container from the list.

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.

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.

The index.hsm project’s source file

Touching source in the tools bar, the Project Editor will show the index.hsm source text.

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.