|
Page 1 of 2
|
[ 22 posts ] |
Go to page: 1, 2 Next |
Web server template with drag and drop elements
| Author |
Message |
|
ollivier_le_roch
Joined: Jan 19, 2007 Posts: 18 Location: France
|
 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
_________________ Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/
|
| Tue Jan 23, 2007 4:54 pm |
|
 |
|
Cosmuk
Joined: Jan 16, 2007 Posts: 115 Location: Chicago
|
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.
_________________ Skype : cosmuk
Last edited by Cosmuk on Sun Mar 04, 2007 3:20 pm, edited 1 time in total.
|
| Wed Jan 24, 2007 11:13 am |
|
 |
|
snowjay
Joined: Aug 09, 2006 Posts: 254
|
Cosmuk wrote: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! 
|
| Wed Jan 24, 2007 11:38 am |
|
 |
|
ollivier_le_roch
Joined: Jan 19, 2007 Posts: 18 Location: France
|
 Personnal meteo widget
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
_________________ Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/
|
| Wed Jan 24, 2007 2:10 pm |
|
 |
|
mric
Joined: Sep 26, 2006 Posts: 61 Location: Nîmes (France)
|
[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 
_________________ Mric
|
| Wed Jan 24, 2007 3:33 pm |
|
 |
|
ollivier_le_roch
Joined: Jan 19, 2007 Posts: 18 Location: France
|
 Lou soleil me fai canta
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…
…
_________________ Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/
|
| Wed Jan 24, 2007 4:12 pm |
|
 |
|
snowjay
Joined: Aug 09, 2006 Posts: 254
|
 Re: Lou soleil me fai canta
ollivier_le_roch wrote: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.
|
| Wed Jan 24, 2007 4:48 pm |
|
 |
|
ollivier_le_roch
Joined: Jan 19, 2007 Posts: 18 Location: France
|
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 
_________________ Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/
|
| Wed Jan 24, 2007 5:09 pm |
|
 |
|
snowjay
Joined: Aug 09, 2006 Posts: 254
|
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.
|
| Wed Jan 24, 2007 5:22 pm |
|
 |
|
ollivier_le_roch
Joined: Jan 19, 2007 Posts: 18 Location: France
|
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 
_________________ Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/
|
| Wed Jan 24, 2007 5:48 pm |
|
 |
|
snowjay
Joined: Aug 09, 2006 Posts: 254
|
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.
|
| Wed Jan 24, 2007 6:49 pm |
|
 |
|
matt (support)
Site Admin
Joined: Jan 27, 2003 Posts: 11814 Location: Texas
|
Hi Ollivier,
ollivier_le_roch wrote: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
|
| Wed Jan 24, 2007 11:04 pm |
|
 |
|
ollivier_le_roch
Joined: Jan 19, 2007 Posts: 18 Location: France
|
support wrote:$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
_________________ Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/
|
| Thu Jan 25, 2007 1:24 am |
|
 |
|
ollivier_le_roch
Joined: Jan 19, 2007 Posts: 18 Location: France
|
snowjay wrote: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
_________________ Ozone : Web Design, photography and X10…
Ollivier Le Roch : http://www.leroch.org/
|
| Thu Jan 25, 2007 1:32 am |
|
 |
|
snowjay
Joined: Aug 09, 2006 Posts: 254
|
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.
|
| Thu Jan 25, 2007 6:15 am |
|
|
|
Page 1 of 2
|
[ 22 posts ] |
Go to page: 1, 2 Next |
Who is online |
Users browsing this forum: No registered users and 3 guests |
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot post attachments in this forum
|
|