Web server template with drag and drop elements

Hi,

here the same template but with all elements can be draged & droped. The XHTML source is very light. An element is isolated in a div block and can be place anywhere onto the page with a css attribute (x,y).
You can try it here :
http://www.leroch.org/x10/fond-brosse2/



A lot of new elements can be create and design, web cam, meteo, VLC command, iChat messages, etc.)

Feel free to send me your reports,
Regards,

Ollivier

That is Fantastic! How would I go about placing a polling widget for the weather as you have?
I have text but, I would rather use the dashboard widget to display the current weather stats.

That is Fantastic! How would I go about placing a polling widget for the weather as you have?
I have text but, I would rather use the dashboard widget display the current weather stats.

Widgets are just little html pages that are displayed in Dashboard.

If you navigate to /Library/Widgets, then right/ctrl click on the Weather widget and select Show Package contents you will see all the associated html, js and graphics used to make the widget work.

I was looking into doing this last night and although haven't done it yet this should work:

I would suggest creating a seperate directory under /Library/Webserver/Doccuments, say call it Weather and copy (not move!) the contents of the widget to that folder. Then open up the Weather.js file and substitue your city, state and zip for whats already in the file.

Now if you turn on your Apache webserver and navigate to http://localhost/Weather/Weather.html your widget should pop up.

From there you can use an <iframe> to insert the widget into any html you like, you'll just have to use the real ip address of the webserver and not "localhost" as in the example above.

There maybe another way of doing it but this seemed pretty easy to me and now I'm going to have to revamp my control pages for a THIRD time!

Thank's Cosmuk.

Yes, Snowjay, your solution is a very good idea.
Specialy if you want to include the weather of your town in your Indigo webserver.

In my example I've not hacked the Apple Widget for two reasons,

first, the code is too complicated for what I want to do,
second, I don't want to insert the weather since the meteo server.

I'v made this element with a very simple code with my own pictures (sun, moon…) and CSS.
The goal is to report YOUR house weather station (temperature, wind, rain…), since your own meteo sensors… For example, you can insert WeatherLink exported data in your web server.
WeatherLink site :
http://www.davisnet.com/weather/products/weather_product.asp?pnum=07855

Cosmuk wrote:

I have text but, I would rather use the dashboard widget display the current weather stats.

No problem Cosmuk, if you want, tell me what are the data you have, how many data do you want to display, what design do you want for your widget, I'll try to do for you.

The example was made with those 3 images :





Regards,
Ollivier

[French Joke ON]
I think your page is wrong because, you can't have 20°c in Brest
[/French Joke OFF]

Wonderful page !
I want the same now

salut Mric,

[prouvencou joke] lou soleil me fai canta [prouvencou joke]
tu peux causer frenchy
Bien vu, fais pas 20 mais 5° !
Mais bon comme je le disais c'est un template (non dynamique)
de plus je n'ai pas de sonde météo X10 perso…
par contre si tu en as une on peut tester en réel !

Je suis actuellement en train de m'escagasser le teston sur le code server pour y intégrer en dynamique mes templates, si tu as des tuyaux… Très volontiers !

Content de te faire ta connaissance
Kenavo
Ollivier
......................................
Hi Mric,

It's true,
there's no 20 but 5°C now !
this is just a template, no a dynamic page.
I've not X10 weather sensor at the momeent,
but if you have this we can try with my template now.

For the moment I try to embed my template in Indigo Web Server,
If you have some idea about this…
…

For the moment I try to embed my template in Indigo Web Server,
If you have some idea about this…
…

What I have done for my control pages is create a website using the Apache webserver and then pull in my Indigo control pages with <iframe> tags.

That might be one way to go about it, you have the weather and webcams coded into the Apache website and then the Indigo pages are just pulled in with the <iframe>

This is my example. The title and menubar are all part of my website "template" being served by Apache and the floorplan and buttons are from Indigo.



I actually like your template design better and might try to use it, or at least a version of it for my new redesign.

Hi snowjay,

Thank's a lot for your suggestions,

This is a good ControlPage, I understand… You use iFrames for including Indigo code.

With my template, the problem is that I must insert <div id="itunes*"> </div> around the Indigo iTunes code only. (for example)
And put <span class="button"> </span> around the a href indigo command for create rollover effects…
I must modify html code of those pages : controlpage.html, _pageelemlist.html, _pageelem.html
or
Copy/paste the Indigo server variables in my template.
-> I try understing variable like this :
"controlpage?name=${pageElem.actionLinkTarget, entityEncoding='URL'}" ${pageElem.actionLinkHrefTarget, entityEncoding='skip'

Yes you can download images and use my template
I think that I'll be better in the future when I'll understand the Indigo server language

Oh, I understand what you are saying, for the ability todrag and drop them. I was just thinking for a static page.

I've never tried anything that sophisticated. It took me a while just to do my simple little page.

I've answer Matt about those functions… I hope for the Edit Control page v2.
Your Control Page look great with a lot of functions… Cool

Ollivier,

Can I ask how you made or what you used for the brushed metal look? It looks almost identical to what Safari uses and all the examples I have seen are not even close to the same.

[matt (support)]

Hi Ollivier,

I try understing variable like this :
"controlpage?name=${pageElem.actionLinkTarget, entityEncoding='URL'}" ${pageElem.actionLinkHrefTarget, entityEncoding='skip'

The templates are run through the Python-based Cheetah template engine. In the case above it is referencing a python variable "pageElem", which has an instance variable for the link URL (actionLinkTarget). The above could be written like this as well:

Code: Select all

<a href="controlpage?name=$pageElem.actionLinkTarget" $pageElem.actionLinkHrefTarget>

So, for example, if the control element has a URL to CNN.com with the option set to open in a new browser window, then pageElem will be defined like this:

$pageElem.actionLinkTarget = 'http://.www.cnn.com/'
$pageElem.actionLinkHrefTarget = 'target="_blank"'

which the Cheetah engine then swaps in when it builds up the page to be served. The entityEncoding stuff is used to make sure the strings get encoded correctly into a URL format. There are different options for doing different encoding based on where the string is being substituted. My simplified example above will work in most cases, but will mess up encoding some URLs which is why the actual template is a bit different.

Hope that helps at least a little...

Regards,
Matt

$pageElem.actionLinkTarget = 'http://.www.cnn.com/'
$pageElem.actionLinkHrefTarget = 'target="_blank"'

Hi Matt,

I'll try this tonight, I think that I'll create a static template in wich I insert variable like you wrote.
thank's a lot for you example, yes that help me a lot

regards

Ollivier

Can I ask how you made or what you used for the brushed metal look? It looks almost identical to what Safari uses and all the examples I have seen are not even close to the same.

hi snowjay,

I used Adobe Photoshop for making all graphics elements.
For making a brush metal look, it's simple…
- Onto layer number one (for example) Make a gradient with two medium grey.
- Onto a second layer insert black and white noise (effects menu)
- Apply a (horizontal) directional blur on this noise (layer 2)
- Set the opacity of layer 2 (you'll see what is the best % opacity)
- "et voilà" you've got a metal brushed look.
After you can create the border with mask and apply a shadow under this new metal brushed window

I hope it's Ok, feel free to tell me if there's a problem with those steps…

Regards,

Ollivier

Thank you Ollivier! I hope to be able to try this out tonight.

edited: I also tried my Weather Widget hack last night and it doesn't seem to work. You can click the Weather.html file locally and it works, but once you try to serve it up via Apache it never grabs the weather info. I'm not sure what the issue is.