Project Structure - rusgrafx/isy-panel GitHub Wiki

ISY PANEL PROJECT STRUCTURE

ISY Panel project consists of several files (htm, js, css, jpg, png). All these files should be uploaded to the same folder on your ISY. You can choose your own name for the folder, but I recommend to call it ISYPANEL (yes, in uppercase), that way it would be easier for you to remember what's inside that folder. All user files on ISY live under /USER/WEB folder, so you should upload all files to /USER/WEB/ISYPANEL. Then on your panels (or other devices) you will type http://{your_isy_address}/USER/WEB/ISYPANEL/panel.htm to access the UI. Just replace {your_isy_address} with actual IP of your ISY-99i.

ISY PANEL FILES

Let's look at each file in the ISY Panel project. The files listed below are the core files that are required to run the project. You will have to customize and add your own styling for panels. For this task, familiarity with JavaScript and CSS will be extremely helpful.

  • config.js - This is the file that stores your panel(s) configuration - all your locations, links to web cameras, etc. It is one most important file of the project. The file that comes with ISY Panel is only for your reference, you would have to create your own config.js. More on this later.
  • jquery.js - This is jQuery library (http://jquery.com) that is used by main.js for AJAX and other functions. DO NOT TOUCH IT.
  • panel.htm - Main (and only) UI file. It has the backbones, the layout of the panel. The default one should work in most cases. Do not edit this file unless you know what you're doing and ready to face the consequences.
  • main.js - This is, well, main JS file that has all the logics to generate GUI from your configuration. Do not edit this file either.
  • panel.css - Main style sheet that defines the layout. No need to edit this too.
  • favicon.png - The icon that will appear in your browser's address bar. You can replace it with your own if you like, just keep the name.
  • Readme.txt - This file.

The following files are used to customize your panels. They are referenced from config.js and dynamically loaded when GUI is being generated. You can rename them, remove them or add more files. Every panel could have its own unique style (or they could share the same one). For example, you can create panels that match colors of your rooms to make the touch-screens blend in (never forget about the WAF!). Or you can make a playful panel with bright colored buttons and Winnie the Pooh in the background for your kid's room. Be creative!

  • styleXX.css - This file is referenced in CONFIG.panels[i].css attribute of config.js.
  • backgrXX.jpg - These are little tiles used in backgrounds of the panels. They are referenced by your CSS files.
  • camXX.jpg - These images are used at development time as placeholders for real camera image snapshots. They make it easier to create styles for panels when you work offline. You can replace them with your own if you like, just keep the names.