Images for web server skining

Hi,

Just a little skin for iTunes remote :


See this example in full CSS mode :
http://www.leroch.org/x10/Indigo-module ... odule.html

Feel free to download all those images (background, caption…) 270 Ko zip :
http://www.leroch.org/x10/Indigo-modules/iTunes.zip

Images are in PNG 24 bits mode, OK for Safari, Opera, Firefox and IE 7.
( IE 6 don't see very well 24bits PNG [transparency problem] without a JS hack)

Other skins comming soon,

Regards

Ollivier

[matt (support)]

Hi Ollivier --

Excellent -- thanks for sharing!

FYI, the Indigo Web Server automatically handles serving transparent PNG images to IE on windows correctly. If the server detects the IE 5.5 or IE 6 browser agent, then the server will have IE use the DLL plug-in filter to render the transparent PNG instead of having IE mess it up. Seems to work okay, at least on my testing with IE 5.5.

Regards,
Matt

Hi Matt

thanks !

A DLL for IE 5 & 6… Cool !

Matt, I've a dream
For the future EditControlPage,
do you plan to include those 2 functions :
- Rollover on buttons (with two images for each buttons)
- CSS enhancement to create InLine (span) and Block (div) elements with a class or ID attibute… A cool function to group elements by family and positionning elements with an external CSS…

regards,

Ollivier

Hi,

A full skin package for Applelike template I've made tonight….
800x600 pix.
Feel free to download this stuff.
Any comments are welcomes

(Zip 182 Ko including PNG background and buttons )
http://www.leroch.org/x10/fond-brosse/ozone-fb.zip

Regards,
Ollivier

Wow Ollivier that template is great!

[matt (support)]

- Rollover on buttons (with two images for each buttons)

Rollover images isn't super high on my priority list, but I would like to see it eventually. I need to get upload support to the PowerLinc V2 in first.

- CSS enhancement to create InLine (span) and Block (div) elements with a class or ID attibute… A cool function to group elements by family and positionning elements with an external CSS…

So you are wanting to group multiple Control Page elements together via a CSS class or ID, correct? I have considered this... I would also like to have a way to easily import any multiple Controls so that they can be easily shared across users.

Regards,
Matt

Thank's !

More templates coming soon…

@+
Ollivier

Hi Matt,

Yes, for example, I'ld want to group all iTunes commands in one specific Block Element (div#itunes), after that I can add somes effects to thisBlock Element like drag&drop (like widgets for example) or other…

AND
the same things with InLine Elements, I'ld like to add , for example :
<a title="Room lights" href="function"><span class="button">Room</span></a>

OR
<a title="Room lights" href="function"><span class="hiden">Room</span>&nbsp;</a>
when I want to hide the word for graphical buttons…

If this two possibilities are include in EditControlpage we can make a cool interface with effects (Ajax, JS…) and Rollover function on buttons (hover, focus, active, etc…).

For editing a graphical interface it would be nice to create FIRST column with div attibutes (one culumn for menu, one column for map, one colum for…), after group future element with div, too (div#itunes, div#menu, div#submenu,…),

I'll create a HTML template tonight, for explain in code this
You can see the Jpeg below about div and span.
I hope that my english is not too bad for understing what I say

http://www.leroch.org/x10/csstag.jpg

Regards
Ollivier

[matt (support)]

Yep, I think this is a great idea. Let me think about how to add it to the Control Page Editor UI.

Regards,
Matt

Using Olliviers template above as a starting point I think this is going to be my new HA web site.

I created a new brushed background with the white box on the side. Everything else on the page is in layers for ease of placement. The iTunes Remote and my floor plan are being called with an <iframe>. The buttons on the left when clicked will update the iframe image on the right. So right now clicking the status button will pull up the status screen and lighting will bring up the screen you see now.

The clock comes from clocklink.com and works pretty well. they have lots of options there. I'm still looking for a nice weather widget to go below the buttons.

I also redesigned my floor plan using OmniGraffle in sort of a stylized design. It's a little cleaner looking than my last floorplan.

I designed to run in Safari with no tab, bookmarks or address bar for the cleanest appearance, to almost seem like a stand alone app. Now only if I can figure out how to create an alias of Safari that will automatically start it that way.

I created a new brushed background with the white box on the side. Everything else on the page is in layers for ease of placement. The iTunes Remote and my floor plan are being called with an <iframe>. The buttons on the left when clicked will update the iframe image on the right. So right now clicking the status button will pull up the status screen and lighting will bring up the screen you see now.

Hi Snowjay, congratulations, cool

I designed to run in Safari with no tab, bookmarks or address bar for the cleanest appearance, to almost seem like a stand alone app. Now only if I can figure out how to create an alias of Safari that will automatically start it that way.

If I understand what you say, you want to open safari without statuts bar, …
I see, for the moment, two solutions,
First, using javaScript Pop-up like this :
http://leroch.org/x10/safari/

Second, do you know Saft ? A Safari plug-in that can enable the Kioske function in Safari (be carefull with certain options in preference menu, they can block all shortcut, etc…). If you can't stop Safari in Kioske mode, force mac restart and before lauching Safari, go to :
User->Library->Preferences…
And put in the trash the "com.apple.Safari.plist" file

There is a lot of option, i'm sure that is THE solution


Saft home page :
Saft plug-in for Tiger : $12.00 USD
http://haoli.dnsalias.com/Saft/

I hope you can find a solution, perhaps those…
Regards

Olivier

Ollivier,

That javascript is perfect, thank you!

That javascript is perfect

Hi Jason,
Cool ! You can set the pop up size in the HTML code. In the link of the first page modify width : 1010, height : 680 by another value :
<a href="indigo.html" target="popUpWin" onclick="popUpWin(this.href,'console',1010,680);return false;">Indigo</a>

I actually trimmed the code down and created this applescript which I saved as an application:

Code: Select all

set js to "javascript:window.open('http://192.168.0.175/
       IndigoWeb/new.html','newWin',
       'resizable,toolbar=no,location=no,scrollbars=no,width=1024,
       height=685,left=0,top=0')"
tell application "Safari" to do JavaScript js in document 1