EnglishSvenska

Ny mycket renare version

eventghost_webserver_optimization_3

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.

Gå till Demo

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:

  1. Rensade bort all seg kod från jQuery Mobile. Less is more!
  2. Endast 4 http request per sidvisning. Toksnabba sidvisningar är resultatet.
  3. Ingen onödig javascript. Tog bort ganska mycket av min egen kod.
  4. 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:

Instruktioner för hemmaserver, tellstick, nexa och ir-sändare

[Uppdaterad 2012-02-13. Ny version som är mycket enklare att konfigurera]
[Uppdaterad 2012-04-01. Nytt gränssnitt är snabbare.]

Klicka här för att gå till en demo.

eventghost_webserver_optimization_2 eventghost_webserver_optimization_3

Många har bett mig göra en mer detailjerad beskrivning av hur jag satt upp min hemautomation så här kommer den.

Materiel:

Installation

  • Koppla upp dator
  • Koppla in tellstick och installera tillsammans med Telldust mjukvara
  • Installera alla nexa-brytare du vill använda
  • Sätt ir-sändaren så att den når det du vill styra. Lägg dit ir-repeterare om signalen inte når hela hemmet.

Testa tellstick

  1. Öppna Telldus Center
  2. Lägg till en enhet genom att klicka på Ny.
  3. Välj enhet.
  4. Lär upp.
  5. Det fungerar när du kan släcka och tända lampor genom att klicka på de små ikonerna.

Eventghost

  1. Installera http://www.eventghost.org/
  2. Jag har för mig att du inte behöver ett plugin för att köra tellstick och usb-uirt. Det ska bara fungera.
  3. Testa dig fram till hur eventghost fungerar. Jag tänker inte förklara det i detalj men mekron är en kombination av händelser. I varje makro behöver man ha actions vilka bestämmer när ett makro ska köras. Exempelvis kanske man vill köra ett visst makro som tänder en lampa när en knapp på fjärrkontrollen trycks (läses från ir-mottagaren). Makron kan placeras i mappar.

Webbservrar

Nu till det lite svårare nämligen webbserver. Jag rekommenderade tidigare "dynamic web server" men denna har blivit gammal och fungerar inte lika bra som den vanliga webbservern i Eventghost. Se till att du har senaste versionen av Eventghost för att också ha den senaste versionen av webbserver-plugin.

  1. Du lägger till webbservern som en plugin i Eventghost. Autostart->Lägg till plugin->Webserver,
  2. Ställ in en port och en dokumentrot. Porten valde jag till 8080. Dokumentroten "C:UsersSebastianDocumentsEventghost webserver" men båda dessa kan givetvis vara annorlunda.
  3. Lägg all min kod i dokumentroten ( "C:UsersSebastianDocumentsEventghost webserver" i mitt fall). Koden får du från https://bitbucket.org/sebnil/eventghost-web-gui/get/tip.zip.
  4. Navigera till http://localhost:8080/index.html för att se att det fungerar. Om det fungerar så ser du gränssnittet. Testa i olika webbläsare eftersom det finns risk för att det ser lite dåligt ut i Internet Explorer. Om du inte får igång webbservern så börja felsök i Eventghost. Testa annan port och annan dokumentrot. Skype ligger på port 80 vilket kan ge problem om du valde den porten.
  5. Testa att du kan skicka kommandon till eventghost genom att skriva localhost:8080/?foo=bar. Om det syns till vänster i Log i Eventghost så är det ok.
  6. Testa att klicka på knappar i gränssnittet på http://localhost:8080 får att se om de registrerar i Eventghost. Om du kör Chrome kan du högerklicka och trycka Granska komponent, välja Nätverk och se om det skickas några kommandon till eventghosts webbserver.

Den stora förändringen med den nya versionen är att man inte behöver ställa in lika mycket för att få servern att fungera. Om du har senaste versionen av Eventghost och senaste versionen av min kod ska det räcka med att köra webbserver i Eventghost (och inte som det var tidigare då man även behövde köra en php-server i Wamp).

Gör gränssnittet personligt

Jag antar nu att du fått igång mitt gränssnitt och att det ligger uppe på din webbserver. Konfigurationen jag gjort ligger i /js/script-and-config.js. Ändra i denna endast om du känner att du vill fixa något i bakomliggande teknik.

/index.html är huvudsidan. De andra sidorna ligger under i samma dokumentrot. Grundläggande kunskap i html är nödvändig men du kanske klarar dig på att redigera filerna och testa dig fram. Den action som skickas till Eventghost bestäms av data-action=x. Det borde vara allt. Som sagt, testa dig fram och se vad som fungerar och blir bra. Det är så jag gjorde.

Komma åt hemautomation utifrån (över internet)

Om du gjort alla steg innan detta så är du egentligen klar men det kan finnas vissa saker kvar att göra om du vill komma åt webbservern utifrån (alltså att styra hemautomationen när du inte är hemma). Jag går inte igenom detta detaljerat eftersom det skiljer sig från system till system. Några saker att komma ihåg är dock:

  1. Ta reda på extern ip från exempelvis mittip.nu
  2. [Frivilligt] Fixa ett domännamn kopplat till ditt ipnummer. De flesta har dynamiskt ip som byter och därför behöver man en tjänst som uppdaterar regelbundet exempelvis http://www.no-ip.com/. Istället för att koppla upp sig mot något som http://213.100.33.42 så får du http://hem.zapto.org eller http://hem.servehttp.com. Lättare att komma ihåg helt enkelt.
  3. Gör en port forward i routern.
  4. Öppna brandväggen i operativet + eventuella övriga brandväggar.
  5. Glöm inte bort att lägga in skydd från att andra kommer åt din hemautomation!

Det vore kul att se vad ni lyckas göra med min mjukvara och hur den modifieras så lägg gärna en kommentar och berätta vad du gjort. Projektet ligger som öppen källkod på https://bitbucket.org/sebnil/eventghost-web-gui/overview. Lycka till!

New better version

[Update 2012-02-13]

I have updated the code to run better on Eventghost web server. 

New screen shot:

eventghost_web_gui_html5

android_tablet_eventghost

Some screens [old]:

eventghosteventghost2eventghost3eventghost4eventghost5

Video (in Swedish):

http://www.youtube.com/watch?v=UGinP0FXSVA

Instructions:

  1. Put the files on your Eventghost web server. Make sure that you run the latest Eventghost since the earlier versions of the web server does not work very good. 
  2. /js/config.js is for configuring jquery mobile. You can probably keep it as it is.
  3. /index.html is the start page. The rest of the pages are in /docs/controls. 
  4. Visit the web server in your browser. If new actions appear when you click on buttons in the gui then it works. 

For more detailed instructions (in swedish) visit http://sebastiannilsson.com/open-source/eventghost-web-gui/101-instruktioner-foer-hemmaserver-tellstick-nexa-och-ir-saendare

Latest source code can be grabbed from Bitbucket . Or just click here to get the zip.

Performance improvements

Performance improvements have been made. Some of these are:

  • Updated jQuery Mobile to latest version
  • Better javascript for events
  • Faster ajax calls
  • Cache manifest
  • + bug fixes

For example, it is now possible to navigate XBMC with much less lag.

Visit project on Bitbucket to download code

My Eventghost xml file

Sliders for volume and light

I have updated Eventghost Web Gui with sliders for sound volume and light. 

This is still a little buggy but works quite well on my phone. Test it and leave a comment describing how it works for you!

Visit project on Bitbucket to download code

eventghoast_dynamic_web_server_variable_1eventghoast_dynamic_web_server_variable_2

Eventghost Web Gui

[Updated. See http://sebastiannilsson.com/open-source/eventghost-web-gui for new version]

This a Web gui for Eventghost built in jQuery Mobile. It uses an ajax function to call Eventghost events to avoid sending multiple requests on page refresh. You will need the web server plugin to get this working.

Building your own gui is quite easy even if you do not know that much html. Just copy the example and modify it. Events are set by the title attribute. An ajax function handles sending events so you don't have to. Style your gui with the jQuery api. I have only tested this on Android but since it is built with jQuery Mobile I think it will work excellent on Iphone and Ipad aswell. 

Most of the text in the example is in Swedish since it is the configuration I use myself. The example is just to demonstrate how to build a gui and you have to modify it to suit your Eventghost configuration.

Visit project on Bitbucket to download code

Some images:

eventghost_web_gui_starteventghost_web_gui_tveventghost_web_gui_tv_optionseventghost_web_gui_lightseventghost_web_gui_xbmc

On my HTC Desire (Android):

eventghost_web_server_1eventghost_web_server_2eventghost_web_server_3eventghost_web_server_4