iPhone Integration - as a free give-away

All about the standard Meteobridge devices based on mobile routers from TP-Link, D-Link, ASUS

Moderator: Mattk

Post Reply
User avatar
admin
Platinum Boarder
Platinum Boarder
Posts: 7874
Joined: Mon Oct 01, 2007 10:51 pm

iPhone Integration - as a free give-away

Post by admin »

iPhone Integration (which is technically speaking making use of a small fraction of "Meteoplug Cloud Graphing") has been added to Meteobridge as a free give-away service. This service is offered on a best effort base, which means you can make use of it without subscribing to Meteoplug, unless it will hit paying Meteoplug users in terms of performance. We 'll see how far it goes....

Preparing your iPhone for Viewing your weather is done in a few simple steps.
  1. On "weather networks" page you find a new weather network named "Meteoplug Cloud Graphing". Select this service with a suitable upload interval for regular and live uploads.
  2. Select "Imperial" option when you prefer non-metric units.
  3. Press "Save" to store and activate your selection.
  4. When your iPhone has a QR code reader app installed, click onto the "iPhone QR" icon next to the live update interval field.
  5. A new window or browser tab will open which displays a QR code, which represents a URL. Scan that code with your QR code reader app and browse with Safari browser to the decoded URL. If you don't have a QR code reader, click onto the non-QR iPhone icon and mail the called URL to your iPhone to pick it up there and browse to it with Safari.
  6. Store URL from Safari onto your iPhone's home screen. It will appear with a Meteobridge icon on your iPhone's desktop, looking like an app.
  7. Leave Safari, click onto Meteobridge icon on home screen to start Safari again. This time Safari will start in full-screen mode.
  8. Now you can select from different views. Portrait view shows current data and todays and yesterdays min/max values in a tabular format. When you turn iPhone right into landscape, you will see a line chart for today and yesterday on temperature and wind and when you scroll down you can also see pressure and rain. When your turn iPhone left into landscape, you will see a dashboard with dials and gauges which updates up to every 10 seconds (the other views are loaded once when called, they will not update in the browser).
Remark: It needs a first upload before data can be received/displayed. So you have to wait a few minutes before data appears for the first time.

Attached you find some example screens from an iPhone 5. I hope you enjoy this add-on. Needless to say, that you are also welcome to test Meteoplug and to design more individual graphs with it. May be you like it :lol:
iphone-p-imp.png
iphone-p-imp.png (76.54 KiB) Viewed 10597 times
iphone-lr1-imp.png
iphone-lr1-imp.png (59.49 KiB) Viewed 10597 times
iphone-lr2-imp.png
iphone-lr2-imp.png (51.72 KiB) Viewed 10597 times
iphone-ll-imp.png
iphone-ll-imp.png (123.9 KiB) Viewed 10597 times
Top
kalen
Junior Boarder
Junior Boarder
Posts: 27
Joined: Thu Jul 25, 2013 11:20 am

Re: iPhone Integration - as a free give-away

Post by kalen »

This is amazing!!!! However, I have got as far as it displaying the screen, but no data is showing?
Edit: Working now!

What is the difference between meteocloud and meteocloud (live)?
Top
User avatar
admin
Platinum Boarder
Platinum Boarder
Posts: 7874
Joined: Mon Oct 01, 2007 10:51 pm

Re: iPhone Integration - as a free give-away

Post by admin »

1) Regular upload transfers every single data received from the weather station (wind speeds down to every 2-3 seconds when the station delivers that fast). Data is bundled into chunks and the regular upload interval defines how often these chunks are uploaded to the server.

2) Live uploads do upload much more often, but not every single piece of weather data is used, just the recent values are taken into account. This data is just stored temporarily on the Meteoplug server and has the single purpose to feed nicely fast updating gauges and dials displays. All other graphing is based on the complete raw data (see 1), which is stored permanently (when you go for a Meteoplug subscription) on the server.

It needs a first regular upload to have the service reporting data, so it might take 10 minutes when you start using it for the first time.
Top
Bushman
Junior Boarder
Junior Boarder
Posts: 35
Joined: Fri Jun 21, 2013 9:34 pm

Re: iPhone Integration - as a free give-away

Post by Bushman »

Android version????
Top
User avatar
admin
Platinum Boarder
Platinum Boarder
Posts: 7874
Joined: Mon Oct 01, 2007 10:51 pm

Re: iPhone Integration - as a free give-away

Post by admin »

I don't have one (and my daughter will never give me her android) :mrgreen:
Is there someone around with Android html/javascript/css experience?

I guess it will only need this html adapted (mainly device orientation and viewport sizing).

Code: Select all

<!DOCTYPE html>
<html manifest="iphone">
<head>
    <meta name="viewport" id="viewport" content="user-scalable=no, width=device-width, initial-scale=0.79, maximum-scale=0.79" />
    <meta name="viewport" content="user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="http://www.meteoplug.com/iphone-icon-150.png" />
    <style media="screen, mobile" type="text/css" charset="utf-8">
      * {
        margin:0;
        padding:0;
      }
      body {
        background: #000;
        overflow:hidden;
        margin:0;
        padding:0;
      }
      #landscape {
        position: absolute;
        top: 0;
        left: 0;
        width: 960;
        height: 640;
        background:#000;
        z-index: 1
      }
      #landscape2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 960;
        height: 640;
        background:#000;
        z-index: 2
      }
      #portrait {
        position:absolute;
        top: 0;
        left: 0;
        width: 640;
        height: 960;
        background:#000;
        color: #ffffff;
        z-index: 3
      }
      #tab {
        font-family: verdana,arial,sans-serif;
        font-size:9pt;
        color: #A9D0F5;
        border-spacing: 14px 9px;
      }
      td {
        background: #000;
        margin: 5px;
        vertical-align: top;
      }
      tr {
      }
      h1 {
        font-size: 28pt;
        font-weight: bold;
        text-align: left;
      }
      h2 {
        font-size: 22pt;
        font-weight: bold;
        text-align: left;
      }
      h3 {
        font-size: 12pt;
        font-weight: bold;
        text-align: left;
        color: #BDBDBD;
      }
      h4 {
        font-size: 9pt;
        font-weight: normal;
        text-align: left;
        color: #BDBDBD;
      }
</style>
</head>
<script>
  function readDeviceOrientation() {
    var iphone4 = (window.screen.height == (960 / 2));
    var iphone5 = (window.screen.height == (1136 / 2));
    if ((window.orientation) == 90) {  // landscape
        document.getElementById('portrait').style.visibility="hidden";
        document.getElementById('landscape').style.visibility="visible";
        document.getElementById('landscape2').style.visibility="hidden";
        if (iphone5)
        {
          document.getElementById('viewport').setAttribute('content',
                'width=960, height=640, initial-scale=0.93, maximum-scale=0.93');
        } else {                                  
          document.getElementById('viewport').setAttribute('content',
                'width=960, height=640, initial-scale=0.79, maximum-scale=0.79');
        }                             
        document.getElementById('portrait').style.zIndex=0;
        document.getElementById('landscape').style.zIndex=10;
        document.getElementById('landscape2').style.zIndex=0;
    } else {                                  
      if ((window.orientation) == -90) {  // landscape2
          document.getElementById('portrait').style.visibility="hidden";
          document.getElementById('landscape2').style.visibility="visible";
          document.getElementById('landscape').style.visibility="hidden";
          if (iphone5)
          {
            document.getElementById('viewport').setAttribute('content',
                    'width=960, height=640, initial-scale=1.0, maximum-scale=1.0');
          } else {                                  
            document.getElementById('viewport').setAttribute('content',
                    'width=960, height=640, initial-scale=0.85, maximum-scale=0.85');
          }                             
          document.getElementById('portrait').style.zIndex=0;
          document.getElementById('landscape2').style.zIndex=10;
          document.getElementById('landscape').style.zIndex=0;
      } else {                                    // portrait
          document.getElementById('portrait').style.visibility="visible";
          document.getElementById('landscape').style.visibility="hidden";
          document.getElementById('landscape2').style.visibility="hidden";
          if (iphone5)
          {
            document.getElementById('viewport').setAttribute('content',
                    'width=960, height=640, initial-scale=1.0, maximum-scale=1.0');
          } else {                                  
            document.getElementById('viewport').setAttribute('content',
                    'width=960, height=640, initial-scale=0.85, maximum-scale=0.85');
          }                             
          document.getElementById('portrait').style.zIndex=10;
          document.getElementById('landscape').style.zIndex=0;
          document.getElementById('landscape2').style.zIndex=0;
      }
    }
  }
  window.onorientationchange = readDeviceOrientation;
</script>
<body>
<div id="portrait">
  <div id="head">
    <font style="font-weight:normal; font-family: verdana,arial,sans-serif; color: #BDBDBD; font-size: 8pt;">    data from [actual_min5_misc_uploadlocaltime]    © smartbedded UG</font>
  </div>
  <table id="tab">
  <tr id="tab">
    <td id="tab">Temperat. [°F]<BR><h1><font style="color: #FE642E;">[actual_min5_th0_temp_1_1.8_32:--]</font></h1></td>
    <td id="tab">Today [°F]<BR><h3>[actual_day1_th0_tempmax_1_1.8_32:--] <font style="font-weight:normal; font-size: 8pt;">[actual_day1_th0_tempmaxtime_11_5:]</font></h3><h3>[actual_day1_th0_tempmin_1_1.8_32:--] <font style="font-weight:normal; font-size: 8pt;">[actual_day1_th0_tempmintime_11_5:]</font></h3></td>
    <td id="tab">Yesterday<BR><h3>[-1D_day1_th0_tempmax_1_1.8_32:--] <font style="font-weight:normal; font-size: 8pt;">[-1D_day1_th0_tempmaxtime_11_5:]</font></h3><h3>[-1D_day1_th0_tempmin_1_1.8_32:--] <font style="font-weight:normal; font-size: 8pt;">[-1D_day1_th0_tempmintime_11_5:]</font></h3></td>
  </tr>
  <tr id="tab">
    <td id="tab">Humidity [%]<BR><h1><font style="color: #01DF3A;">[actual_min5_th0_hum_1:--]</font></h1></td>
    <td id="tab">Today [%]<BR><h3>[actual_day1_th0_hummax_0:--] <font style="font-weight:normal; font-size: 8pt;">[actual_day1_th0_hummaxtime_11_5:]</font></h3><h3>[actual_day1_th0_hummin_0:--] <font style="font-weight:normal; font-size: 8pt;">[actual_day1_th0_tempmintime_11_5:]</font></h3></td>
    <td id="tab">Yesterday<BR><h3>[-1D_day1_th0_hummax_0:--] <font style="font-weight:normal; font-size: 8pt;">[-1D_day1_th0_hummaxtime_11_5:]</font></h3><h3>[-1D_day1_th0_hummin_0:--] <font style="font-weight:normal; font-size: 8pt;">[-1D_day1_th0_hummintime_11_5:]</font></h3></td>
  </tr>
  <tr id="tab">
    <td id="tab">Pressure [inHg]<BR><h2><font style="color: #BE81F7;">[actual_min5_thb0_seapress_2_0.02952:--]</font></h2></td>
    <td id="tab">Today [inHg]<BR><h3>[actual_day1_thb0_seapressmax_2_0.02952:--] <font style="font-weight:normal; font-size: 8pt;">[actual_day1_thb0_pressmaxtime_11_5:]</font></h3><h3>[actual_day1_thb0_seapressmin_2_0.02952:--] <font style="font-weight:normal; font-size: 8pt;">[actual_day1_thb0_pressmintime_11_5:]</font></h3></td>
    <td id="tab">Yesterday<BR><h3>[-1D_day1_thb0_seapressmax_2_0.02952:--] <font style="font-weight:normal; font-size: 8pt;">[-1D_day1_thb0_pressmaxtime_11_5:]</font></h3><h3>[-1D_day1_thb0_seapressmin_2_0.02952:--] <font style="font-weight:normal; font-size: 8pt;">[-1D_day1_thb0_pressmintime_11_5:]</font></h3></td>
  </tr>
  <tr id="tab">
    <td id="tab">Wind [mph]<BR><h1><font style="color: #ffffff;">[actual_min5_wind0_wind_0_2.237:--]</font><font style="font-size: 12pt; color: #ffffff;">[actual_min5_wind0_maindirtext:]</font></h1></td>
    <td id="tab">Today [mph]<BR><h3>[actual_day1_wind0_gustmax_0_2.237:--] <font style="font-weight:normal; font-size: 8pt;">[actual_day1_wind0_gustmaxtime_11_5:]</font></h3><h3>[actual_day1_wind0_highdirtext:]</h3></td>
    <td id="tab">Yesterday<BR><h3>[-1D_day1_wind0_gustmax_0_2.237:--] <font style="font-weight:normal; font-size: 8pt;">[-1D_day1_wind0_gustmaxtime_11_5:]</font></h3><h3>[-1D_day1_wind0_highdirtext:]</h3></td>
  </tr>
  <tr id="tab">
    <td id="tab">Windchill [°F]<BR><h2><font style="color: #FE642E;">[actual_min5_wind0_chill_1_1.8_32:--]</font></h2></td>
    <td id="tab">Heatindex [°F]<BR><h2><font style="color: #FE642E;">[actual_min5_th0_heat_1_1.8_32:--]</font></h2></td>
    <td id="tab">Dewpoint [°F]<BR><h2><font style="color: #FE642E;">[actual_min5_th0_dew_1_1.8_32:--]</font></h2></td>
  </tr>
  <tr id="tab">
    <td id="tab">Rain [in/h]<BR><h2>[actual_min5_rain0_rate_2_0.0394:--]</h2></td>
    <td id="tab">Today [in]<BR><h2><font style="color: #BDBDBD;">[actual_day1_rain0_total_2_0.0394:--]</font></h2></td>
    <td id="tab">Yesterday<BR><h2><font style="color: #BDBDBD;">[-1D_day1_rain0_total_2_0.0394:--]</font></h2></td>
  </tr>
  <tr id="tab">
    <td id="tab">UV Index [uvi]<BR><h3><font style="color: #D7DF01;">[actual_min5_uv0_uvi_1:--]</font></h3></td>
    <td id="tab">Today [uvi]<BR><h3>[actual_day1_uv0_uvimax_1:--] </h3><h4>[actual_day1_uv0_uvimaxtime_11_5:]</h4></td>
    <td id="tab">Yesterday<BR><h3>[-1D_day1_uv0_uvimax_1:--] </h3><h4>[-1D_day1_uv0_uvimaxtime_11_5:]</h4></td>
  </tr>
  <tr id="tab">
    <td id="tab">Solar [W/qm]<BR><h3><font style="color: #D7DF01;">[actual_min5_sol0_rad_0:--]</font></h3></td>
    <td id="tab">Today [uvi]<BR><h3>[actual_day1_sol0_radmax_0:--] </h3><h4>[actual_day1_sol0_radmaxtime_11_5:]</h4></td>
    <td id="tab">Yesterday<BR><h3>[-1D_day1_sol0_solmax_0:--] </h3><h4>[-1D_day1_sol0_radmaxtime_11_5:]</h4></td>
  </tr>
  </table>
</div>
<div id="landscape">
<iframe seamless="seamless" frameborder="0" src="http://www.meteoplug.com/cgi-bin/meteochart.cgi?draw=[drawtoken_*instruments-black-imp]&engine=js"></iframe> 
</div>
<div id="landscape2">
<iframe seamless="seamless" frameborder="0" src="http://www.meteoplug.com/cgi-bin/meteochart.cgi?draw=[drawtoken_*iphone-tw-2d-imp]&engine=gp"></iframe> 
<br /><br />
<iframe seamless="seamless" frameborder="0" src="http://www.meteoplug.com/cgi-bin/meteochart.cgi?draw=[drawtoken_*iphone-pr-2d-imp]&engine=gp"></iframe> 
</div>
</body>
<script>
  readDeviceOrientation();
</script>
</html>
Top
RickNY
Junior Boarder
Junior Boarder
Posts: 30
Joined: Tue Aug 13, 2013 9:11 pm

Re: iPhone Integration - as a free give-away

Post by RickNY »

I don't know if you noticed, but the (F) scale is wrong..At least on the graph.. I was going to upload a pic, but your post shows it too.
Top
User avatar
admin
Platinum Boarder
Platinum Boarder
Posts: 7874
Joined: Mon Oct 01, 2007 10:51 pm

Re: iPhone Integration - as a free give-away

Post by admin »

Thanks for spotting this. The offset for Fahrenheit conversion was wrong. Please try angain.
Top
RickNY
Junior Boarder
Junior Boarder
Posts: 30
Joined: Tue Aug 13, 2013 9:11 pm

Re: iPhone Integration - as a free give-away

Post by RickNY »

admin wrote:Thanks for spotting this. The offset for Fahrenheit conversion was wrong. Please try angain.
Looks good now :)
Top
kalen
Junior Boarder
Junior Boarder
Posts: 27
Joined: Thu Jul 25, 2013 11:20 am

Re: iPhone Integration - as a free give-away

Post by kalen »

How do I view the graphs? All I can see is the instruments picture (last one of the post above). If I scroll down or to the side, it is just a black screen.
I have tried both landscape and portrait
Top
RickNY
Junior Boarder
Junior Boarder
Posts: 30
Joined: Tue Aug 13, 2013 9:11 pm

Re: iPhone Integration - as a free give-away

Post by RickNY »

Portrait mode: current data
Rotate right to landscape: Graphs
Rotate left to landscape: Instruments

The graphs are scrollable
Top
kalen
Junior Boarder
Junior Boarder
Posts: 27
Joined: Thu Jul 25, 2013 11:20 am

Re: iPhone Integration - as a free give-away

Post by kalen »

Ah cheers, :oops: :oops: :oops: :oops:

I must have been rotating it one way.
Top
dstanowick
Fresh Boarder
Fresh Boarder
Posts: 4
Joined: Sat Apr 13, 2013 3:41 pm

Re: iPhone Integration - as a free give-away

Post by dstanowick »

I've been very happy with the stability of the Meteobridge since I started using it a few months ago. By chance I happened out to the website today to see what was new and I was impressed with the iPhone capability. You guys are very impressive. Nice improvement!
Top
rvbruch
Fresh Boarder
Fresh Boarder
Posts: 19
Joined: Sat Jan 18, 2014 2:38 pm

Re: iPhone Integration - as a free give-away

Post by rvbruch »

Hi !

Is this still functioning ?

Meteobridge reports :
Meteoplug Cloud: 2014-01-18 12:40:54 Success!
Meteoplug Cloud (Live): Keine Live-Übertragung zur Cloud (no live-report to cloud) The Live-Interval is set to 60sec. The other one is 10min

And which browser can create the QR-Code ? I´ve tried IE, Opera and Firefox. I use Ver 2.1, OS is Win8 (on this PC here)

Regards
Reiner
Top
User avatar
admin
Platinum Boarder
Platinum Boarder
Posts: 7874
Joined: Mon Oct 01, 2007 10:51 pm

Re: iPhone Integration - as a free give-away

Post by admin »

There has been a bug I fixed yesterday evening. Please reboot your Meteobridge to get the most recent code and try again.
Top
rvbruch
Fresh Boarder
Fresh Boarder
Posts: 19
Joined: Sat Jan 18, 2014 2:38 pm

Re: iPhone Integration - as a free give-away

Post by rvbruch »

That looks good now.

Thanks.
Reiner
Top
Post Reply

Return to “Meteobridge Discussion”