Tyckte att den tidigare versionen var för slö trots att jag gjort vad jag kunnat för att optimera koden. Gjorde ett försök med att slänga ut jQuery Mobile och då gick det genast mycket bättre. I den nya versionen har jag tagit inspiration från Windows Phone 7. Jag har dock skippat allt med Metro och kör bara på en svart bakgrund och knappar med vit ram. Jag tycker att det ser bättre ut när det är minimalistiskt men det viktigaste är endå att den nya versionen är sjukt mycket snabbare än den gamla.
Koden får du från https://bitbucket.org/sebnil/eventghost-web-gui/get/tip.zip.
Instruktioner för att sätta upp allt
Några förbättringar:
- Rensade bort all seg kod från jQuery Mobile. Less is more!
- Endast 4 http request per sidvisning. Toksnabba sidvisningar är resultatet.
- Ingen onödig javascript. Tog bort ganska mycket av min egen kod.
- Lättare html. jQuery Mobile gjorde många enkla saker svåra. I den nya versionen så borde en nybörjare inom html-programmering kunna lista ut hur man ska göra egna gränssnitt. Det är i alla fall min förhoppning.
Youtube-video:
Really easy to implement. Great Work and Thanx!!
So I thought I should describe how I extended the excellent solution a bit more by using a Tellstick Duo and a wireless temperature sensor:
1) Get the Tellstick Dou (hard to get unfortunately), and a supported temperature sensor
(list of supported devices at Telldus home page)
2) Install the Telldus Duo plugin into Eventghost
3) Grab the temperature sensor ID in the "activity list" within Eventghost
4) Create a new Macro based on the event (e.g. "TellstickDuo.fineoffset.temeraturehumidity.213.Temperature:")
5) Add a Phytom Script to the macro with the following script:
------
p = eg.event.payload
p = p.split('|')
outtemp213 = p[0]
eg.globals.outtemp213 = outtemp213
# print outtemp213
------
(last row is for debugging,
naming the parameters to 213 will ensure to have multiple sensor,
no error handling if sensor is lost included)
6) in the index.html - header-hgroup section add:
My Street 1
Outside temperature: {{eg.globals.outtemp213}} °C
7) enjoy 🙂
8) if you want the page to allways be up to date consider using:
9) And if you have multiple sensors for humidity and teperature etc. you can allways make a "Weather tab" with all values.
I can share one if someone needs it for inspiration
To add information on when the temp was updated consider the folloing update to the phyton script:
import datetime
now = datetime.datetime.now()
outtemp213time = now.strftime("%Y-%m-%d %H:%M")
eg.globals.outtemp213time = outtemp213time
and the following addition to the html:
({{eg.globals.outtemp213time}})
Får det inte riktigt att fungerar så det synkar mot eventghost har skrivit till det med texten:
Street 1
Utetemperatur: {{eg.globals.outtemp213}} °C
Dock så kommer bara texten upp men inga faktiskt data.
Hi!
Glad to hear that someone is using the code 🙂
1) Can you post your complete phyton script for the event?
2) Until the event has been triggered, the values will be blank. Have you, in Eventghost, seen that the Macro was triggered?
3) remove the # at the end of the phytonscript so it says:
print outtemp213
This will show the value in the left side of Eventghost every time it is triggered. Good for troubleshooting.
4) Good luck! and feel free to comment again if it's not working!
Beklagar det sega svaret har haft fullt upp med andra saker.
1. Hittar sensorn i Telldus center har id 230 och model 1A2D.
2. I eventghost så updateras värden med jämna mellanrum, ibland ofta och ibland inte lika ofta det står. "TellStickDuo.oregon.1A2D.230.Temperature: '23.5|2012-10-15 22:44:03'"
So far så good..
3.Mitt Python script är följande:
p = eg.event.payload
p = p.split(‘|')
outtemp230 = p[0]
eg.globals.outtemp230 = outtemp230
skriva ut outtemp230
importera datetime
Nu = datetime.datetime.now()
outtemp230time = now.strftime(“%Y-% m-% d% H:%M”)
eg.globals.outtemp230time = outtemp230time
4. När har skrivit sciptet och trycker och får jag upp varningen:
Error compiling script.
Traceback (most recent call last):
SyntaxError: invalid syntax (10, line 2)
5. Det är där det inte fungerar, har följt din guide och skulle jag kunna få upp detta på hemsidan så skulle det vara underbart att kunna övervaka inomhus tempen när man inte är hemma.
6. Texten på hemsidan:
Eventghost Web Gui
hemskärm
Min Street 1
Utetemperatur:{{eg.globals.outtemp230}} °C
Tacksam om du kan lösa detta!
How to add online data from GöteborgEnergi:
1) add Timer plugin
2) set up timer
not excellent solution:
2a) Create Macro: Timer: Start new or control running timer
Start New or control running timer
Set it to: every minute
Name it: EveryMinuteTrigger
2b) Manually start the macro (sorry)
3) Create a Macro based on the trigger:
Timer.EveryMinuteTrigger
4) Add phyton script to the Macro::
import urllib2
from xml.dom.minidom import parseString
file = urllib2.urlopen('http://www.goteborgenergi.se/Lib/EnergyView/Rss.ashx?MeasureId=2755&Type=Current&Images=False')
data = file.read()
file.close()
dom = parseString(data)
xmlTag = dom.getElementsByTagName('description')[1].toxml()
xmlData=xmlTag.replace('','').replace('','')
# print xmlTag
# print xmlData
eg.globals.GbgEnergiLight = xmlData
5) Create a similar Macro based on the every minute trigger and add phyton script:
import urllib2
from xml.dom.minidom import parseString
file = urllib2.urlopen('http://www.goteborgenergi.se/Lib/EnergyView/Rss.ashx?MeasureId=2732&Type=Current&Images=False')
data = file.read()
file.close()
dom = parseString(data)
xmlTag = dom.getElementsByTagName('description')[1].toxml()
xmlData=xmlTag.replace('','').replace('','')
# print xmlTag
# print xmlData
eg.globals.GbgEnergiWind = xmlData
6) Add to HTML:
Ljusinstrålning: {{eg.globals.GbgEnergiLight}}
Vindstyrka: {{eg.globals.GbgEnergiWind}}
Jag måste bara få säga att jag gillar verkligen detta 🙂
Jag använder mig av ditt gui och jag är extremt nöjd.
Sedan så passar jag på att tacka Zupermik för inlägget om att få in tempen på sidan, underbart.
Thank you!
Hej igen.
Om man vill lära sig att skriva phyton skript till eventghost, vart hittar man någon bra information om det ?
Vet du om någon bra sajt ?
Tack på förhand
Eventghosts forum är en bra start. Har för mig att de har några enkla exempel.
Hi,
Trying to post another solution but post is never visible at the site. Suggestions?
Part1::
Greetings!
Want to show temperature more graphical?
Download RGraph from http://www.rgraph.net/
Read the information regering usage etc.
Place the extracted files in a subfolder to jour webroot (eg. C:\WebServerRoot\RGraph)
In your html add the code below.
Enjoy!
//
//
//
//
//
//
upload of code sample failed,
sorry guys
Hej igen.
Detta med snygg graf var ju väldigt intressant
Kan du inte dela ut koden på något annat sätt ?
Tack på förhand
Suggestions? I tried to html encode, but the bits would not upload... I suppose the site engine read them as it's code and block them as hack attempts 🙁
Part1:
<script src="js/script-and-config.js"></script>
<script src="/RGraph/libraries/RGraph.common.core.js" ></script>
<script src="/RGraph/libraries/RGraph.common.effects.js" ></script>
<script src="/RGraph/libraries/RGraph.common.dynamic.js" ></script>
<script src="/RGraph/libraries/RGraph.gauge.js" ></script>
<script>
window.onload = function ()
Part3:
</head>
<body>
<div class="one-third">
<div style="text-align: center">
<canvas id="cvs" width="250" height="250">[No canvas support]</canvas>
</div>
</div>
see part 2 below 🙂
Good luck with cut & paste 🙂
This is just a simple test - can be erased by moderator!
== CODE===
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.7.2.min.js">
</script>
Part2:
{
var gauge = new RGraph.Gauge('cvs', -20, 30, {{eg.globals.outtemp123}});
gauge.Set('chart.colors.ranges', [[-20, 0, '#A0A0FF'], [0, 20, 'yellow'], [20, 30, '#FF8080']]);
gauge.Set('chart.centerpin.color', '#666');
gauge.Set('chart.title.top', 'Ute');
gauge.Set('chart.title.top.size', '22');
gauge.Set('chart.title.top.font', 'Impact');
gauge.Set('chart.title.top.color', 'white');
gauge.Set('chart.title.bottom.size', '14');
gauge.Set('chart.title.bottom.font', 'Impact');
gauge.Set('chart.title.bottom.color', '#ccc');
gauge.Set('chart.title.bottom', '°C');
gauge.Set('chart.title.bottom.pos', 0.4);
gauge.Set('chart.background.color', 'black');
gauge.Set('chart.background.gradient', true);
gauge.Set('chart.centerpin.color', '#666');
gauge.Set('chart.needle.colors', [RGraph.RadialGradient(gauge, 125, 125, 0, 125, 125, 25, 'transparent', 'white'),
RGraph.RadialGradient(gauge, 125, 125, 0, 125, 125, 25, 'transparent', '#d66')]);
gauge.Set('chart.needle.size', [null, 50]);
gauge.Set('chart.text.color', 'white');
gauge.Set('chart.tickmarks.big.color', 'white');
gauge.Set('chart.tickmarks.medium.color', 'white');
gauge.Set('chart.tickmarks.small.color', 'white');
gauge.Set('chart.border.outer', '#666');
gauge.Set('chart.border.inner', '#333');
}
</script>
How to add weather info at the bottom of your page...
(Inspired by other Sebastian Nilsson project)
Add the following code before footer:
The last br is to create space for the mobile experience
and the code: (new try)
<center><img src=http://www.yr.no/sted/Your Country/Your Län/Your Town/avansert_meteogram.png></center>
<center><br></center>
<center><br></center>
<center><br></center>
<center><br></center>
How to find the url... Browse YR.No for your city and
replace
"time_for_time.html"
to
"avansert_meteogram.png"
at the end of the URL
Hej.
Tack för dina instruktioner 🙂
Jag har nu testat detta, men det enda jag får fram är png bilden från YR 🙁
Jag är inte så jätte hemma på html, jag har nog testat allt.
Inte finns det en möjlighet att du kan sätta ihop dina delar till en html kod som det ska se ut ?
Sen så ska jag nog kunna trolla fram resten.
Tack så mycket för din hjälp
Hi Kenneth,
All I can offer is:
send your code, zipped, to zupermik (at) gmail (dot) com
and I'll try to help you out (one time offer only 😉 ) and I will compare it to my stuff......
My code includes a lot of other stuff which will be confusing for you if I send it.
I'll help you on a best effort basis, no guaranties, and limited to my availability...
OK?
Update here on your respond as the mailbox is not monitored.
Note: no graph could mean that there is no data... confusing but true... 1:st thing to verify
Paste the code at http://pastebin.com/ if it does not show correctly in the comments. You are also free to fork the code on github if that would be easier.
And thank you for improving the code 🙂
Hi all,
saw that my comment was translated if you are using Swedish (at the top). Using English will give correct comments.
Hej,
Såg att mina kommentarer blev fel om man satt svenska (inställning i toppen på denna sida). om ni väljer engelska kommer kommentarerna att vara med riktiga.
Jag har satt upp en webbserver i EventGhost med hjälp av dina instruktioner och filer och har fått det att funka hyfsat. Skitkul verkligen! 🙂 Jag kan nu tända och släcka lampor och visa temperatur i min Androidtelefon och i mina datorer i det lokala nätverket. Men det jag inte riktigt begriper är hur slidern för dimmern funkar. Hur skickar man ett argument (payload eller suffix, jag är inte helt säker på terminologin) till dimmern?
Jag har gått en högskolekurs i C-programmering, men det är längesen... I Python är jag nybörjare. Html kan jag nästan inte alls. Tror du att du kan förklara så att en sådan som jag begriper? 🙂
Du behöver använda ett python-skript. https://bitbucket.org/sebnil/eventghost-web-gui/src/c2ed6abe2dd9d793f17ed9df605f557f4de45f54/my_eventghost_file.xml?at=default
Se rad 1606
Eventuellt också rad 1670
Hi! Thanks for sharing!
Some questions:
1) What about the plugin for Spotify? Downloadable or home built by you?
2) "TCP." just input from webserver or something else?
3) USB_UIRT... does it work well?? I'm about to buy one.
Again thanks for sharing!
/Zupermik
1. Downloadable. Found it in eventghost forum.
2. Just a prefix for the events in eventghost.
3. Yes.
/Seb
@Benjamin:
In your code I read:
Nu = datetime.datetime.now()
outtemp230time = now.strftime(“%Y-% m-% d% H:%M”)
I suppose language at the site puzzles us. Please send your code to "zupermik (at) gmail.com" and I will try to help you
Nu in your code should be now.
I suggest that you only use the first 5 lines of the code and see if they work. the last lines in the script is only there if you want to have a timestamp of the values.
@Benjamin, did you get it to work? I did not see any mail from you...
Jag såg nu att du hade skrivit har skickat ett mejl till din adress, skriv igen om det inte kom fram.
It arrived and I sent you a reply
Hej
Jag har förmodligen samma problem som Benjamin. Hur löste det sig? Kan någon hjälpa mej? Så här ser mitt script ut.
--
p = eg.event.payload
p = p.split(‘|’)
outtemp11 = p[0]
eg.globals.outtemp11 = outtemp11
print outtemp11
--
aOch i eventghost får jag detta felet.
Error compiling script.
Traceback (most recent call last):
SyntaxError: invalid syntax (142, line 2)
på rad två, kör du med vanliga enkelfnuttar där? (skift och knappen till höger om ä)
Det var ett tag sen någon skickade in trevliga exempel på vad ni gjort. Man är ju nyfiken på vad man missat 😉
Hello,
I was wondering if you know of a way to send commands to multiple eventghosts? I have two eventghost servers and would like to issue a command to both when I click a web button. I'm also wondering if you know how to set the system volume depending on the position of the volume slider? I can't quite figure out how to use the volume sliders to adjust my systems volume.
Thanks,
Mike
Yes it is possible to issue a command to multiple servers. Just edit the js to send requests to another server. Another ajax request.
About the slider. I think i have an example of how to do that. Just look at the code. But you will need to add another python script in eventghost to parse the slider value. It is a bit tricky but it can be done.
Regards,
Sebastian
Hello,
Thanks for the reply. I'm glad to know it's at least possible. I know very little about python and HTML, but I think I'll figure it out if I just read it a bit more. If you have any tips on where to start, I would appreciate it. I'm more concerned about getting two servers up than the volume slider.
Thanks,
Mike