Subject: From: Date:

RE: [ECS] Converted to ECS Web Interface Martin Terry Tue, 30 May 2000 21:45:40 -0700

---

Sure Don,

<Warning, long-winded post>

I'm not doing any java myself per se, just using what Mark provides. I'll
try to provide some insight, but I'm doing this on my laptop so I can't copy
and paste code.

Here's how I got started:

I created a new group in ECS, and added a single item - a light. I selected
the light bulb icon and left it the original size. Saved the group.

Then I went to the browser and opened ECS's default page
http://ecs:3000/main.htm. I then selected links to the "web test" group I
created. 

The web page creates an item on the web page that looks exactly like the
item does in the ECS group screen - icon on the left, name and state on the
right. If this doesn't work correctly for you, you have some kind of setup
problem. review Mark's setup instructions.

Once you have the web page, you should be able to click the state and get a
frame to the right that offers other states. Here you can select on, off,
etc.

Now personally I don't like this look/feel - but you don't have to stick
with it. Click on the page just off of the item and select view source
(however your browser does this - in IE it's a right click menu.)

The source will give you a lot of insight to how the page works. In this
case you will see some basic html and 3 java applets.

The first applet, called ecs_msg, draws a text box across the top of the
page. I don't know what Mark calls this thing, but it's the same line at the
top of the ECS window that logs ecs activity - saves, tts speech, etc. You
can include this applet in your own pages by copying everything between
<APPLET and /APPLET> into your own page. You can vary the width and height
parameters to change the size of the text box. I have this applet at the top
of my custom html pages so I can see who is calling on the phone (anything
spoken by ECS will appear in this line with a time stamp).

The second applet you will see if you follow this example will be the item
you placed on the group page. the DIV command places this in x/y fashion on
the page so you can specify the exact placement. If you move the item around
on the group page and redisplay the html, you will see the values of the DIV
command change. This applet has a bunch of parameters, especially if you use
a light as an example. Here are some basic ones I've figured out:

SBS0 value="ECS Item" This will be the name of the item as shown in ECS.

ICON_F value="1" - 1 displays the icon, 0 turns it off. (For the item)

ICON_W value="?" I believe this is a scaling factor for the icon
100=original size, bigger numbers make the icon larger, smaller numbers make
it smaller. I don't think the icons scale very well, so if I want them much
smaller I usually make a smaller icon. In fact I'm not using any of ECS's
stock images.

NAME_F value="1" If 1 the item name is displayed, if 0 it is not. I always
use 0. If I want to include the name I'll do it via html, much more
flexible. With html you can put the name where ever you want on the page,
with the java applet it's to the right of the icon, period. You also get no
control over the text style or color.

STATE_F value="1" same as the name, but the state instead. This one I
sometimes set to 1, but usually not. I let the icon indicate the state
usually.

TEXT_F value="0" Dang, I don't remember what this one is. :) A good argument
for taking notes.

SUB_F and ADD_F value="0" When set to 1 these add little up and down arrows
next to the icon, which allow you to click on them to raise and lower the
state values (dim/inc light, etc.) 

SUB_CHANGE, ADD_CHANGE value="x" Used in conjunction with SUB and ADD above.
Every click will inc/dec by "x" value.

STATE_ICON:state value="path/image" I modify this alot, basically if the
item is at "state" then "path/image" is used as the icon. If you use the
light example you will get an image list for every possible state (a lot of
parameters). If you use a true/false item, you will only get 2 parameters.
You don't actually need to provide a image parameter for every state, but if
you don't and the item is at that state, you won't get an icon at all.

The last applet is an important one, but doesn't actually display anything.
It is called "Ecsio". If you don't include this applet on a page where the
others are, they won't work. Simple rule of thumb - add this applet to the
end of any page you use the others on, including frames. Leave the
parameters as is. This allows ECS to actually display the item/state/icon
and update it on the fly.



So basically I get everything done with these 3 applets, provided by Mark. I
use the 2nd one extensively, with many mods to the parameters. Usually I
will set an applet up to display only the icon, no text, no state. I modify
the size of the applet and image parameters to use a GIF I provide. 

It will look like this:        HTML Description    Icon

For example:

I have a security page showing the status of the alarm system. It is a
digital-i/o item. In the html page I have a table, and in the first cell I
have "Alarm status". In the second cell I have the applet from above with a
true image of "Armed" and a false image of "Disarmed". I only display the
icon(GIF images) so when I load the page it will look like this:


         Alarm Status:           Disarmed

With "Disarmed" as a little button GIF. If I arm the security system, ECS
automatically updates the page to display:

         Alarm Status:           Armed

You can click on the icon and this click will be passed to ECS as an
ICON-CLICK1. So I have an event that says something like:

If           Icon-click1       is now          DIO:AlarmArmed 
then      Flg:ArmAlarm   Invert           Flg:ArmAlarm

This triggers an event that arms the alarm.



OK, so this is the basics. I wish I had a full time connection, I'd let you
take a look. Maybe soon.
If this doesn't make it clear as mud, maybe I can copy the html to a floppy
and upload it here.



-----Original Message-----
From: donstephens@101freeway.com [mailto:donstephens@101freeway.com]
Sent: Tuesday, May 30, 2000 8:40 PM
To: ecs-list@netbloc.com
Subject: Re: [ECS] Converted to ECS Web Interface


Martin:

I've been banging my head against the wall with this. Could you share some
parts of your Java stuff?

Thanks:

Don
----- Original Message -----
From: "Martin Terry" <Martin.Terry@mail.tribnet.com>
To: "Ecs-List (E-mail)" <ecs-list@netbloc.com>
Sent: Monday, May 29, 2000 11:53 PM
Subject: [ECS] Converted to ECS Web Interface


> ECSers,
>
> Well, I took a 4 day weekend and took the plunge and converted my
Automation
> system to ECS's new browser interface. I previously had used ACE as the
User
> Interface for ECS.
>
> First off, Mark should be commended for the amazing transformation of ECS.
> The flexibility and power of the interface is pretty awesome!
>
> Here's a little bit of my current setup -
>
> ECS is running on a P133 in my garage. It's connected to an Ethernet based
> LAN in the house. It has a modem that does dial-up for internet access as
> necessary. My client machine is a P75 (!) in the Kitchen/Family Room
> (previously running ACE) now running IE 4. It's about as quick as the ACE
> client was, so even with the low speed machines performance is not bad.
>
> I've spent some time over the last couple of weeks "dissecting" the web
> pages that ECS generates automatically. Mark makes generous use of Java
> applets, with numerous parameters that are passed to control the look and
> feel. I had a pretty good feel for how they work, boosted by HTML and JAVA
> for dummies books. :)
>
> I then setup some basic pages of HTML, keeping in mind what I currently
get
> done in ACE. I swiped a bunch of graphics from the web and coded all the
> pages by hand, making generous use of frames.
> I've done a little HTML prior to this, but I'm a novice at best.
>
> The result is that I have about 70% of what I had in ACE. It looks much
> snazzier than ACE and can be whatever you want it to be. I intend to get
all
> of what I'm doing with ACE, then add some new stuff like integrating
weather
> reports, automatic page refreshes maybe even TV listings (but I'm waiting
on
> this, I expect Mark is working on this now). I'm going to set up some
pages
> to be downloaded off line then integrate them into ECS's pages.
>
> OK, now the Pros and Cons:
>
> Pro - Flexible, colorful, and can have any look you want. Any of Mark's
java
> applets on the page automatically update states and so forth when things
> change, without having to refresh the page - way cool. Can integrate any
> data you can put in a web page. Can have links to the internet (if you
have
> a full time connection, I don't).
>
> Cons - Mainly a lack of documentation; no wimps here, you will have to
> figure most of this out yourself. For example ICON_W=26 Who would have
> guessed this is a percentage of the icon's size? Good luck.
>
> I tried some animated GIFs, but they wouldn't work - this could have
easily
> been me or the browser. I'm not a big fan of animated GIFs anyway. :)
>
> Suggestions/Questions for Mark -
>
> Mark, is there anyway to change the background color of the item java
> applets? Mine always show up with a gray background. Also, is there a way
to
> turn off the thin line border that surrounds the applet? I'd like to ditch
> it if I could.
>
> Also, the messages link (e.g. ecs:3000/Messages) always shows the single
> line message applet on top of the message list, can we list the messages
> without this line? I already have that applet on the page and I'm trying
to
> show the messages in a frame. Speaking of the messages, can we control the
> font and background? And can they list in reverse order (most recent on
> top?).
>
> Anyway, thanks for the great update.
>
>
>
>

---