Image with dynamic position change

[xenium]

Hi,
In the example skin below, an image is displayed for each value according to each formula (no image is displayed for the first interval).
If no value is displayed, the other values occupy the position of the missing one,so that there is no free space between them.
I want the same thing to happen with the images.

I tried to add to IfMatchAction and IfNotMatchAction, HideMeter Image and ShowMeter Image but it does not work.

In the example below, the image must climb a position for Humidity
(Dewpoint is missing and for FeelsLike no image is displayed)

Thanks

Testdynamic image.zip

[eclectic-tech]

Hi,
In the example skin below, an image is displayed for each value according to each formula (no image is displayed for the first interval).
If no value is displayed, the other values occupy the position of the missing one,so that there is no free space between them.
I want the same thing to happen with the images.

I tried to add to IfMatchAction and IfNotMatchAction, HideMeter Image and ShowMeter Image but it does not work.

In the example below, the image must climb a position for Humidity
(Dewpoint is missing and for FeelsLike no image is displayed)

Thanks

Testdynamic image.zip

Let me start by saying "scrapping" a website for data is very unreliable; the skin will fail if the webmaster makes changes to the webpage code. This is not true for XML data sources, which is why most skins use Weather.com's XML data as the source.

That aside, I would suggest a standard approach to using the Webparser measure, to include just ONE parent measure and multiple child measures to obtain the parsed data. You had 4 separate webparser parent measures, all trying to collect collect the "City/Country Name", the "Feel Like" temp, the ""Dew Point", and the "Humidity" from the same site.

A better approach would be to have 1 parent measure (I created [MeasureConditions]) collect all of the data, and use StringIndex numbers to pull each of those 4 items. (Look at the posted code for how to achieve this)

Also since you are doing "IfMatch" tests on those values, when the skin is first loaded, those values do not exist yet, because the webparser has not returned any data. It would be better to set all of the child weather measures in a Measure Group (I used Group=Weather), and disable all of them, until the webparser has finish. Then have a FinishAction on the parent webparser measure to enable and update those measures. (Refer to the modified code below)

In order to have both the values and images for each data set hide/show based on the "IFMatch", they also should be in Meter Groups; (I used "Group=FeelsLike" | "Group=DewPoint" | "Group=Humidity"). Now you can hide/show all of the meters in the respective group, using group bang in your "IfMatch" tests. I changed the bangs in the "IfMatch" to hide the meter groups if the data was empty ^$, and to show the meter groups otherwise. To test the vertical shift of lines for missing data, reverse Hide/Show on one of the "IfMatch" bangs (that will hide the data and symbol if it is there instead of showing valid data).

The position of the image meters should be relative to the data, so I moved their location in the code to directly after the data meter and set their Y value 'r' so they would be on the same line.

So by using parent/child webparser measures and groups of measures and meters, you should be able to hide/show available data, and have the relative vertical positions spaced based on what is returned by the parent webparser.

I used your URL1 variable to collect all of the data. I see you also where looking at the 10 day page, which would need an expanded RegExp for the parent measure, but should work the same using more child measures.

Code: Select all

[Rainmeter]
Update=1000


[Variables]
UpdateRateSeconds=600
FontFace=Arial

URL=https://www.foreca.com/Canada/Quebec/Montreal?tenday
URL1=https://www.foreca.com/Canada/Quebec/Montreal


Color1=0,255,0
Color2=255,0,0

; ================================================

[MeasureConditions]
Measure=WebParser
URL=#URL1#
RegExp=(?siU).* <h1 class="entry-title">(.*)</h1>.*.*Feels Like:.*<strong>(.*)</strong>.*Dewpoint:.*<strong>(.*)</strong>.*Humidity:.*<strong>(.*)</strong>
FinishAction=[!EnableMeasureGroup Weather][!UpdateMeasureGroup Weather][!UpdateMeter *][!Redraw]


[MeasureName]
Measure=WebParser
Url=[MeasureConditions]
StringIndex=1


[MeasureFeelsLike]
Measure=WebParser
Url=[MeasureConditions]
StringIndex=2
Substitute="&deg;":""
IfMatch=^$
IfMatchAction=[!HideMeterGroup FeelsLike]
IfNotMatchAction=[!ShowMeterGroup FeelsLike]
Disabled=1
Group=Weather


[MeasureDewpoint]
Measure=WebParser
Url=[MeasureConditions]
StringIndex=3
Substitute="&deg;":""
IfMatch=^$
IfMatchAction=[!HideMeterGroup Dewpoint]
IfNotMatchAction=[!ShowMeterGroup Dewpoint]
Disabled=1
Group=Weather


[MeasureHumidity]
Measure=WebParser
Url=[MeasureConditions]
StringIndex=4
IfMatch=^$
IfMatchAction=[!HideMeterGroup Humidity]
IfNotMatchAction=[!ShowMeterGroup Humidity]
Disabled=1
Group=Weather


[MeasureColorFeelsLike]
Measure=Calc
Formula=(MeasureFeelsLike <= 10 ? 0 : (((MeasureFeelsLike >= 11) && (MeasureFeelsLike <= 25)) ? 1 : 2))
Disabled=1
Group=Weather


[MeasureColorDewpoint]
Measure=Calc
Formula=(MeasureDewpoint <= 10 ? 0 : (((MeasureDewpoint >= 11) && (MeasureDewpoint <= 25)) ? 1 : 2))
Disabled=1
Group=Weather


[MeasureColorHumidity]
Measure=Calc
Formula=(MeasureHumidity <= 25 ? 0 : (((MeasureHumidity >= 26) && (MeasureHumidity <= 65)) ? 1 : 2))
Disabled=1
Group=Weather


================================

[MeterName]
Meter=String
MeasureName=MeasureName
X=80
Y=19
W=270
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=Left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12


[MeterFeelsLike]
Meter=String
MeasureName=MeasureFeelsLike
X=80
Y=0R
W=270
H=30
FontSize=10
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=Left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
Group=FeelsLike

[MeterColorFeelsLike]
Meter=Image
ImageName=#@#image\[MeasureColorFeelsLike].png
X=220
Y=r
DynamicVariables=1
Group=FeelsLike


[MeterDewpoint]
Meter=String
MeasureName=MeasureDewpoint
X=80
Y=0R
W=270
H=30
FontSize=10
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=Left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
Group=DewPoint


[MeterColorDewpoint]
Meter=Image
ImageName=#@#image\[MeasureColorDewpoint].png
X=220
Y=r
DynamicVariables=1
Group=DewPoint


[MeterHumidity]
Meter=String
MeasureName=MeasureHumidity
X=80
Y=0R
W=270
H=30
FontSize=10
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=Left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
Group=Humidity


[MeterColorHumidity]
Meter=Image
ImageName=#@#image\[MeasureColorHumidity].png
X=220
Y=r
DynamicVariables=1
Group=Humidity


[MeterSymbol]
Meter=String
MeasureName=MeasureName
X=220
Y=19
W=270
H=30
FontColor=250,250,250,250
StringStyle=Normal
StringEffect=SHADOW
FontFace=arial
StringAlign=Left
FontEffectColor=0,0,0,80
AntiAlias=1
ClipString=1
FontSize=12
Text=Symbol

Hope this helps you toward your goal. Feel free to ask about what I posted...

[balala]

Beside eclectic-tech's reply, I'd add the followings (however I have to admit, I didn't read completely his reply - sorry if I resume some things):

I'd position the Image meters, same way as the String meters. This means I'd change the Y option of the [MeterColorDewpoint] and [MeterColorHumidity] meters to Y=0R (but this move a bit these meters - I hope this isn't a very big issue).

I'd add to the IfMatchAction / IfNotMatchAction options of the [MeasureFeelsLike], [MeasureDewpoint] and [MeasureHumidity] measures, the appropriate bangs to show / hide the Image meters:

Code: Select all

[MeasureFeelsLike]
...
IfMatch=^$
IfMatchAction=[!HideMeter "MeterFeelsLike"][!HideMeter "MeterColorFeelsLike"]
IfNotMatchAction=[!ShowMeter "MeterFeelsLike"][!ShowMeter "MeterColorFeelsLike"]

[MeasureDewpoint]
...
IfMatch=^$
IfMatchAction=[!HideMeter "MeterDewpoint"][!HideMeter "MeterColorDewpoint"]
IfNotMatchAction=[!ShowMeter "MeterDewpoint"][!ShowMeter "MeterColorDewpoint"]

[MeasureHumidity]
...
IfMatch=^$
IfMatchAction=[!HideMeter "MeterHumidity"][!HideMeter "MeterColorHumidity"]
IfNotMatchAction=[!ShowMeter "MeterHumidity"][!ShowMeter "MeterColorHumidity"]

[xenium]

Unfortunately both solutions do not work.
At the eclectic-tech solution, MeterColorHumidity appears on the same line as MeterHumidity, but all data (feelslike, dewpoint, humidity) are over one another.
At the Balala solution, MeterColorHumidity is not on the same line as MeterHumidity.

I will give some examples, as I would like them to be displayed:

1. All string meters are displayed.
Only images, ColorFeelsLike and ColorHumidity are displayed.

FL ................ColorFL.png

D

H.................ColorH.png


2.MeterDewpoint is not displayed.
Only the ColorHumidity image is displayed

FL

H.................ColorH.png

Because MeterDewpoint is not displayed, MeterHumidity climbs a position.
The ColorHumidity image also climbs a position on the same line as MeterHumidity (not on the first position !)

As a conclusion, always when displayed, each image meter must be on the same line as each string meter to which it corresponds.


If MeterHumidity climbs a position, and the ColorHumidity image climbs a position
If MeterHumidity climbs two positions, and the ColorHumidity image climbs two positions

[balala]

1. All string meters are displayed.
Only images, ColorFeelsLike and ColorHumidity are displayed.

FL ................ColorFL.png

D

H.................ColorH.png


2.MeterDewpoint is not displayed.
Only the ColorHumidity image is displayed

FL

H.................ColorH.png

Because MeterDewpoint is not displayed, MeterHumidity climbs a position.
The ColorHumidity image also climbs a position on the same line as MeterHumidity (not on the first position !)

I'm not sure I understood what should have to happen. Why in the first case the ColorFL.png image is shown, but in the second case it isn't? I mean that if in the second case, the FL String meter ([MeterFeelsLike]) is shown, why the appropriate image isn't, also, while in the first case both appears?
I probably would position the image meters relatively to the appropriate String meter, but first I should have to understand when a String meter should have to appear, and when the corresponding Image meter.

[xenium]

I'm not sure I understood what should have to happen. Why in the first case the ColorFL.png image is shown, but in the second case it isn't? I mean that if in the second case, the FL String meter ([MeterFeelsLike]) is shown, why the appropriate image isn't, also, while in the first case both appears?
I probably would position the image meters relatively to the appropriate String meter, but first I should have to understand when a String meter should have to appear, and when the corresponding Image meter.

Each image appears or does not appear according to the formula (MeasureColorFeelsLike, MeasureColorDewpoint, MeasureColorHumidity).

If the displayed value is below 11 for FeelsLike and Dewpoint, and for Humidity below 26, no image is displayed

[balala]

Each image appears or does not appear according to the formula (MeasureColorFeelsLike, MeasureColorDewpoint, MeasureColorHumidity).

If the displayed value is below 11 for FeelsLike and Dewpoint, and for Humidity below 26, no image is displayed

Ok, I see.
Replace the Y options of the [MeterColorFeelsLike], [MeterColorDewpoint] and [MeterColorHumidity] meters, as it follows:

Code: Select all

[MeterColorFeelsLike]
...
Y=[MeterFeelsLike:Y]
...

[MeterColorDewpoint]
..
Y=[MeterDewpoint:Y]
...

[MeterColorHumidity]
...
Y=[MeterHumidity:Y]
...

This options are positioning the meters in the same vertical position as the appropriate String meters.

[jsmorley]

Ok, I see.
Replace the Y options of the [MeterColorFeelsLike], [MeterColorDewpoint] and [MeterColorHumidity] meters, as it follows:

Code: Select all

[MeterColorFeelsLike]
...
Y=[MeterFeelsLike:Y]
...

[MeterColorDewpoint]
..
Y=[MeterDewpoint:Y]
...

[MeterColorHumidity]
...
Y=[MeterHumidity:Y]
...

This options are positioning the meters in the same vertical position as the appropriate String meters.

Do be sure to use DynamicVariables=1 on meters using [SectionVariables].

[xenium]

Ok, I see.
Replace the Y options of the [MeterColorFeelsLike], [MeterColorDewpoint] and [MeterColorHumidity] meters, as it follows:

Code: Select all

[MeterColorFeelsLike]
...
Y=[MeterFeelsLike:Y]
...

[MeterColorDewpoint]
..
Y=[MeterDewpoint:Y]
...

[MeterColorHumidity]
...
Y=[MeterHumidity:Y]
...

This options are positioning the meters in the same vertical position as the appropriate String meters.

It works!
Thank you very ,very much !

Do be sure to use DynamicVariables=1 on meters using [SectionVariables].

Of course!
Thank you

[eclectic-tech]

Are you sure you used all of my posted code?
Running it on my system works exactly as you requested...

tdimage.png

The images are on the same line as the data values and will move vertically when any of them are not available.