Eyecopia 2.0 Help System
-How to Customize your Eyecopia Server Website-
We have created a default website for your Eyecopia server, but we have also included a lot of information to help you customize this website to meet your needs. The default website with the Eyecopia theme is created by a set of documents in My Computer\Shared Documents\Eyecopia Templates\Default. Every document in this folder is processed by Eyecopia and uploaded to the web along with the actual Eyecopia content. In addition to allowing dynamic website control to provide Eyecopia specific content, this also gives users the ability to use variables in the documents for more flexibility in design. To understand how to customize the Eyecopia website template, you'll want to take a closer look at the structure and content of the default web documents. The following documents are used by Eyecopia to create the Eyecopia theme default website.
- Overview.html: This file is used to create the overview page (Overview.html) of your website. It contains a thumbnail image of the live view and last three events for every camera connected to your Eyecopia server.
- Live.html: This file is used to create the live page (Live.html) of your website. This page contains an image that rotates through the latest live image and last ten snapshots for each camera connected to your Eyecopia server
- Cameras.html: This is an important file, as only files with this name will be repeated for each active camera. In the default template, an events page for each camera is created from the single Cameras.html file. For each camera specific page: (Cameras.html): ==> CameraName1.html, CameraName2.html etc (# is 1 ... n)
- EyeWebContent.css: This cascading style sheet(css) template is used to control the style of all html content within the EyeWebContent div, which is the main content of each page.
- EyeWebTheme.css and EyeWebThemeIE.css: These documents are used to control the overall layout of the website for the default Eyecopia theme.
- EyeWeb.js This file provides the javascript necessary for the default website, such as the image replacement and refresh features
How to Use Variables in Eyecopia Web Documents
Within a template directory you can use variables to refer to Eyecopia content. Variables must be used within our unique Eyecopia web elements in a specific order for Eyecopia to understand them. There are five Eyecopia web elements that are used in a manner similar to standard HTML elements, such as <p></p>. These are:
- <Cameras></Cameras> All content within Cameras elements will be repeated (copy and pasted) for all cameras. The one exception to this case is the Cameras.html document, which is itself repeated for all cameras. The name is used to convey that the entire document is within Cameras elements
- <Events></Events> All content within Events elements will be repeated for all events
- <Comments></Comments> All content within Comments elements will be repeated for all comments that exist for an event
- <Categories></Categories> All content within Categories elements will be repeated for all categories that exist for an event
- <Snapshots></Snapshots> All content within Snapshots elements will be repeated for all snapshot images that exist for a camera
You can use the variables defined below within the described elements, but they must be used within the structure as shown below. For instance, a variable listed between the Events elements would not be substituted if it fell outside of Events elements.
Variable Structure
All available variables are shown below.
<Cameras>
- [Camera]: This refers to the name of the camera device that you provided within Eyecopia's Camera Setup Wizard
- [CameraPage]: This refers to the name of the webpage for a particular camera
- [LiveImage]: This refers to the full path of the latest live view image for a particular camera. You can use this variable within your webpage template to display the live view image itself
- [CameraColor]: This refers to a unique color that Eyecopia assigns to a particular camera. You can use this to make it easier to distinguish between camera pages
- [CameraStyle]: This refers to the stylesheet name used by a particular camera
- [Width]: This refers to the width dimension of the camera resolution
- [Height]: This refers to the height dimension of the camera resolution
- [ScaledWidth(X)]: This returns a calculated value of the width dimension if the height dimension is equal to X, where X can be any positive integer
- [ScaledHeight(X)]: This returns a calculated value of the height dimension if the width dimension is equal to X, where X can be any positive integer
<Events>
- [EventTime]: This refers to the start time of an event
- [EventDuration]: This refers to the elapsed time of an event
- [EventImage]: This refers to the full path of an event still image. This is the image that contains the highlighted circle where motion was detected. You can use this variable within your webpage template to display the event image itself
- [EventImageName]: This refers to just the filename of an event still image, without the directory path. This is a useful variable if you want to display the filename in text
- [EventVideo]: This refers to the full path of an event video. You can use this variable within your webpage template to display the event image itself
- [EventVideoName]: This refers to just the filename of an event video, without the directory path. This is a useful variable if you want to display the filename in text
- [EventSize]: This refers to a text description of the size of an event video
<Comments>
- [EventComment]: This refers to any comments that have been applied to an event using the Eyecopia Notes feature
</Comments>
<Categories>
</Categories>
</Events>
<Snapshots>
- [SnapshotImage]: This refers to the full path of a snapshot image for a particular camera. Snapshot images are outdated live view images. In the Eyecopia default template, snapshot images are used to create a timelapse view. You can use this variable within your webpage template to display the snapshot image itself
</Snapshots>
</Cameras>
Additional notes about using variables
- If you want to only refer to a subset of an element group, you can set a number in the first element. For instance, if you want to repeat information for only the latest three events, you would use <Events=3> with </Events>
- Note that some elements can only be used within other elements, as defined in the structure listed above. Specifically, <Comments> </Comments> and <Categories> </Categories> can only be used within <Events></Events>, and all elements must be within <Cameras> </Cameras>, unless it occurs within the Camera.html page.
Share your Customizations!
Now that you understand what Eyecopia is doing to the documents in your template, feel free to customize your own template and create your own theme. If you like it, why don't you share it with us on our Enjoin Community Forum!
Related Concepts
- Web Publishing Settings
- Web Publishing in the Camera Setup Wizard
- Web Publishing Override in the Toolbar
Related Guides