EnglishSvenska

This post is automatically translated to English by Google Translate.

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:




Posted in Eventghost Web Gui
43 Comments »Ny mycket renare version
  1. Zupermik says:

    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

    • Zupermik says:

      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}})

      • Benjamin says:

        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.

        • Zupermik says:

          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!

          • Benjamin says:

            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!

  2. Zupermik says:

    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}}

  3. Kenneth says:

    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.

  4. Zupermik says:

    Hi,

    Trying to post another solution but post is never visible at the site. Suggestions?

  5. Zupermik says:

    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!

  6. Zupermik says:

    //
    //
    //
    //
    //
    //

  7. Zupermik says:

    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>

  8. Zupermik says:

    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>

  9. Zupermik says:

    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

    • Zupermik says:

      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>

      • Zupermik says:

        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

        • Kenneth says:

          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

          • Zupermik says:

            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

        • sebnil says:

          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 🙂

          • Zupermik says:

            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.

  10. Fredrik Östman says:

    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? 🙂

  11. Zupermik says:

    @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.

  12. Surfan says:

    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)

  13. Zupermik says:

    Det var ett tag sen någon skickade in trevliga exempel på vad ni gjort. Man är ju nyfiken på vad man missat 😉

  14. Mike says:

    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

    • sebnil says:

      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

      • Mike says:

        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

1 Pings/Trackbacks for "Ny mycket renare version"
  1. [...] [Uppdaterad 2012-02-13. Ny version som är mycket enklare att konfigurera] [Uppdaterad 2012-04-01. Nytt gränssnitt är snabbare.] [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*