It is currently August 10th, 2020, 4:21 pm

Webserver Temp & Humidity Local Network

Help with creating, editing & fixing problems with skins
itskamel
Posts: 7
Joined: July 25th, 2020, 10:26 pm

Webserver Temp & Humidity Local Network

Post by itskamel »

I have created 2 webpages that display the temp and humidity from esp8266. I would love to see these on the desktop. both have local ip.

eg temp 1 displays on 192.168.1.35 or "rack-temp.local.lan"

the thread i found the person is uloading their temp to thingspeak, mine is completly local.
mak_kawa
Posts: 774
Joined: December 30th, 2015, 9:47 am

Re: Webserver Temp & Humidity Local Network

Post by mak_kawa »

Hi itskamel

I tried to access my router setting page with local ip as http://192.168.1.xxx/home_bridge.htm from the RainRegExp, and it is successful. So, you can access the web server with local ip from WebParser measure? Like as;

Code: Select all

Measure=WebParser
URL=http(s?)://192.168.1.35/(target page)
RegExp=(?siU).* --- as you like
Or... as you are the creator of that web page, you certainly have the html files in your local PC (and you edit it)? If so, you can access and parse the local file from WebParser using File://(file path) protocol in URL= option.
itskamel
Posts: 7
Joined: July 25th, 2020, 10:26 pm

Re: Webserver Temp & Humidity Local Network

Post by itskamel »

mak_kawa wrote: July 25th, 2020, 11:46 pm Hi itskamel

I tried to access my router setting page with local ip as http://192.168.1.xxx/home_bridge.htm from the RainRegExp, and it is successful. So, you can access the web server with local ip from WebParser measure? Like as;

Code: Select all

Measure=WebParser
URL=http(s?)://192.168.1.35/(target page)
RegExp=(?siU).* --- as you like
Or... as you are the creator of that web page, you certainly have the html files in your local PC (and you edit it)? If so, you can access and parse the local file from WebParser using File://(file path) protocol in URL= option.
ok so i am not sure what you mean i will have to have a look around. so i need to create a new file and add this in with the link to my file? I usually only edit the ones that are premade if that makes sense. Thank you for responding.
itskamel
Posts: 7
Joined: July 25th, 2020, 10:26 pm

Re: Webserver Temp & Humidity Local Network

Post by itskamel »

below is what i have, but nothing shows up on the screen.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Metadata]
Name=
Author=
Information=
Version=
License=

[MeasureSite]
Measure=WebParser
URL=http://192.168.1.35
RegExp=(?siU)<h1>(.*)</h1>.*<h2>(.*)</h2>$

[MeasureTemp]
Measure=WebParser
URL=[MeasureSite]
StringIndex=1

[MeasureHum]
Measure=WebParser
URL=[MeasureSite]
StringIndex=2

[MeterTemp]
Meter=String
MeasureName=MeasureTemp
FontSize=12
FontColor=255,255,255,255
AntiAlias=1

[MeterHum]
Meter=String
MeasureName=MeasureHum
FontSize=12
FontColor=255,255,255,255
AntiAlias=1
x=100
y=100
Last edited by balala on July 26th, 2020, 6:17 am, edited 1 time in total.
Reason: Please use <code> tags whenever are posting code snippets. It's the </> button.
User avatar
balala
Rainmeter Sage
Posts: 11192
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Webserver Temp & Humidity Local Network

Post by balala »

What esp8266 is?
It is extremely hard for anyone to help, if we don't have access to your source (practically close to impossible?). However if you want to access a local resource, you can do it either as mak_kawa said, with the URL=file://C:\Whatever.html option into the parent WebParser measure, or I suppose through its URL (even if that's a local address - for instance URL=http://192.168.1.35).You have to extract the required information through a properly written RegExp option and show them up on some String meters (probably).
So, let's start with the beginning: first please post the html code of the site you want to extract the information from.
itskamel
Posts: 7
Joined: July 25th, 2020, 10:26 pm

Re: Webserver Temp & Humidity Local Network

Post by itskamel »

balala wrote: July 26th, 2020, 6:28 am What esp8266 is?
It is extremely hard for anyone to help, if we don't have access to your source (practically close to impossible?). However if you want to access a local resource, you can do it either as mak_kawa said, with the URL=file://C:\Whatever.html option into the parent WebParser measure, or I suppose through its URL (even if that's a local address - for instance URL=http://192.168.1.35).You have to extract the required information through a properly written RegExp option and show them up on some String meters (probably).
So, let's start with the beginning: first please post the html code of the site you want to extract the information from.
here is the source code from the page.

Code: Select all

<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>Rack Temp</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">25.50</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">48.00</span>
    <sup class="units">%</sup>
  </p>
</body>
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>
</html>
Last edited by balala on July 26th, 2020, 1:51 pm, edited 1 time in total.
Reason: Please use <code> tags whenever are posting code snippets. It's the </> button.
User avatar
balala
Rainmeter Sage
Posts: 11192
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Webserver Temp & Humidity Local Network

Post by balala »

itskamel wrote: July 26th, 2020, 1:09 pm here is the source code from the page.
First attempt:

Code: Select all

[Rainmeter]
DynamicWindowSize=1

[Variables]

[MeasureTempCapture]
Measure=WebParser
URL=http://192.168.1.35
RegExp=(?siU)<span class="dht-labels">Temperature</span>.*<span id="temperature">(.*)</span>.*<sup class="units">(.*)</sup>.*<span class="dht-labels">Humidity</span>.*<span id="humidity">(.*)</span>.*<sup class="units">(.*)</sup>
DynamicVariables=1
UpdateRate=600

[MeasureTemp]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=1

[MeasureTempUnit]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=2
DecodeCharacterReference=1

[MeasureHumidity]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=3

[MeasureHumidityUnit]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=4

[MeterTempHum]
Meter=STRING
MeasureName=MeasureTemp
MeasureName2=MeasureTempUnit
MeasureName3=MeasureHumidity
MeasureName4=MeasureHumidityUnit
X=0
Y=0
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFT
AntiAlias=1
Text=Temp: %1%2#CRLF#Humidity: %3%4
What I am not entirely sure about is the URL option of the [MeasureTempCapture] measure. Please check.
itskamel
Posts: 7
Joined: July 25th, 2020, 10:26 pm

Re: Webserver Temp & Humidity Local Network

Post by itskamel »

balala wrote: July 26th, 2020, 2:03 pm First attempt:

Code: Select all

[Rainmeter]
DynamicWindowSize=1

[Variables]

[MeasureTempCapture]
Measure=WebParser
URL=http://192.168.1.35
RegExp=(?siU)<span class="dht-labels">Temperature</span>.*<span id="temperature">(.*)</span>.*<sup class="units">(.*)</sup>.*<span class="dht-labels">Humidity</span>.*<span id="humidity">(.*)</span>.*<sup class="units">(.*)</sup>
DynamicVariables=1
UpdateRate=600

[MeasureTemp]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=1

[MeasureTempUnit]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=2
DecodeCharacterReference=1

[MeasureHumidity]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=3

[MeasureHumidityUnit]
Measure=WebParser
URL=[MeasureTempCapture]
StringIndex=4

[MeterTempHum]
Meter=STRING
MeasureName=MeasureTemp
MeasureName2=MeasureTempUnit
MeasureName3=MeasureHumidity
MeasureName4=MeasureHumidityUnit
X=0
Y=0
Padding=15,5,15,5
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
SolidColor=0,0,0,150
FontSize=8
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LEFT
AntiAlias=1
Text=Temp: %1%2#CRLF#Humidity: %3%4
What I am not entirely sure about is the URL option of the [MeasureTempCapture] measure. Please check.

:) thank you that works, i now have something on my desktop. I think I can work off of this.
User avatar
balala
Rainmeter Sage
Posts: 11192
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Webserver Temp & Humidity Local Network

Post by balala »

itskamel wrote: July 26th, 2020, 2:16 pm :) thank you that works, i now have something on my desktop. I think I can work off of this.
Alright, I'm glad. The skin has definitely to be improved / redesigned, but if at least it does work, you can work on it. Feel free to come back if any further questions arise.
itskamel
Posts: 7
Joined: July 25th, 2020, 10:26 pm

Re: Webserver Temp & Humidity Local Network

Post by itskamel »

balala wrote: July 26th, 2020, 3:54 pm Alright, I'm glad. The skin has definitely to be improved / redesigned, but if at least it does work, you can work on it. Feel free to come back if any further questions arise.
i figured out how to add another temp. and name them but it looks very dull how can i make a clean border of some sort and also the boxes can be the same size. i will post a picture to show what i am talking about. on the left is my temp and humididy but you can see the boxes are not the same size. i am possibly looking do do something clean like on the right. And even though i have duplicated them i have them pointing to differnt ip address but they seem to be looking at one temp.Image