Showing more info on weather skins

[TallShultzy]

I'm having problems with the slide in/out functions in this test skin. When hovering over the "tomorrow" day the text changes to red and the Humidity line slides in and out. I can't get it to line up with the existing Humidity line. The added code is between lines 59-108 and the "MouseOverAction"s are at 547. Any help much appreciated.

[eclectic-tech]

Why not use the same format as the MeterHumidityLabel and MeterHumidity as the style for the contained meters; just change the X, Y, and color values. I adjusted the 'slide' values and replaced your [MeterString] with modified 'Humidity' meters.

slider.gif

Replace the [MeterSlideInOut] section and add the modified 'Humidity' meter sections.

Code: Select all

...

[MeasureSlideInOut]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Reset | Wait 10 | Repeat SlideIn, 30, 11
SlideIn=[!SetVariable OffSet "(Clamp(#OffSet#-15,-15,150))"]#U#
ActionList2=Repeat SlideOut, 30, 11  | Wait 1 | Reset
SlideOut=[!SetVariable OffSet "(Clamp(#OffSet#-15,-165,-15))"]#U#
Reset=[!SetVariable OffSet 150]#U#
IgnoreWarnings=1
DynamicVariables=1

[MeterHumidityLabel_S]
Meter=String
Group=Meters
X=(#Offset#+10)
Y=90
W=160
H=17
FontFace=#TextFont#
FontSize=11
FontWeight=400
FontColor=255,0,0,255
AntiAlias=1
ClipString=1
Text=#Humidity#
DynamicVariables=1
Container=MeterContainer

[MeterHumidity_S]
Meter=String
Group=Meters
MeasureName=@CurrentHumidity
X=(#Offset#+149)
Y=0r
W=160
H=17
FontFace=#TextFont#
FontSize=11
FontWeight=400
FontColor=255,0,0,255
StringAlign=Right
AntiAlias=1
ClipString=1
Text=%1%
DynamicVariables=1
Container=MeterContainer

; [MeterString]
; Meter=String
; X=#OffSet#-10
; Y=90
; FontSize=11
; FontColor=255,0,0,255
; SolidColor=0,0,0,1
; FontWeight=950
; FontFace=#TextFont#
; AntiAlias=1
; MeasureName=@CurrentHumidity
; Text=#Humidity#    %1%
; DynamicVariables=1
; Container=MeterContainer

...

[TallShultzy]

Thanks eclectic-tech, most helpful. One issue that's puzzling me, the "H" and half of the "u" in "Humidity" in red is missing. Is it because its outside the container and how do I change it?

[eclectic-tech]

Thanks eclectic-tech, most helpful. One issue that's puzzling me, the "H" and half of the "u" in "Humidity" in red is missing. Is it because its outside the container and how do I change it?

Oops!

I did a "quick fix" and should have looked closer...

I needed to change the container to match the background dimensions.
This required changing the initial position offset to 165, increasing the slide repeats by 1 more action, and clamping the slide at zero.
The sliding Humidity meter X values were then adjusted for the new container; actually they match the original 'Humidity'' meter's X values, and all that was needed was to add the #Offset# to those values.

Here are updated container meter, slider measure, and humidity meters.

Code: Select all

...

[MeterContainerVisible]
Meter=Shape
Shape=Rectangle 0.5,0.5,169,206,12 | Fill Color #BackgroundColor# | StrokeWidth 1.5 | Stroke Color #FrameColor#
X=0
W=170
H=213
MouseOverAction=[!ShowMeter MeterContainer]

[MeterContainer]
Meter=Shape
; Meters used as a container will not be drawn. They are used as a "mask".
; Create a copy of them, as above, to make them visible.
Shape=Rectangle 0.5,0.5,169,206,12 | Fill Color #BackgroundColor1# | StrokeWidth 1.5 | Stroke Color #FrameColor#
X=r
Y=r
W=170
H=213

[MeasureSlideInOut]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Reset | Wait 10 | Repeat SlideIn, 30, 12
SlideIn=[!SetVariable OffSet "(Clamp(#OffSet#-15,0,165))"]#U#
ActionList2=Repeat SlideOut, 30, 12  | Wait 1 | Reset
SlideOut=[!SetVariable OffSet "(Clamp(#OffSet#-15,-165,0))"]#U#
Reset=[!SetVariable OffSet 165]#U#
IgnoreWarnings=1
DynamicVariables=1

[MeterHumidityLabel_S]
Meter=String
Group=Meters
X=(#Offset#+15)
Y=90
W=160
H=17
FontFace=#TextFont#
FontSize=11
FontWeight=400
FontColor=255,0,0,255
AntiAlias=1
ClipString=1
Text=#Humidity#
DynamicVariables=1
Container=MeterContainer

[MeterHumidity_S]
Meter=String
Group=Meters
MeasureName=@CurrentHumidity
X=(#Offset#+154)
Y=0r
W=160
H=17
FontFace=#TextFont#
FontSize=11
FontWeight=400
FontColor=255,0,0,255
StringAlign=Right
AntiAlias=1
ClipString=1
Text=%1%
DynamicVariables=1
Container=MeterContainer

...

[TallShultzy]

JMorley, I've updated your weather skin to show further info when hovering over the "tomorrow" text. I've opted for the replacement method rather than slide-in/out.
I've only updated Humidity and Wind Speed as a test. Can you have a look to see if my coding could be improved then I'll update all the other info.

[jsmorley]

JMorley, I've updated your weather skin to show further info when hovering over the "tomorrow" text. I've opted for the replacement method rather than slide-in/out.
I've only updated Humidity and Wind Speed as a test. Can you have a look to see if my coding could be improved then I'll update all the other info.

Seems ok to me. I guess the only issue with the "replace" method is that there are items, like "Feels Like" and "Pressure / Change" that don't exist in any other context but "Current". Not a show-stopper, but just be aware that there is no "Feels Like" for "tomorrow".

[jsmorley]

If I was going to do this, and I'm not, I'd be tempted to:

1) Create a "container" that has meters for details, more than is displayed in the "Current" display initially. These meters are geared toward a "part of a day". I would have the container be the size of the entire skin, less the border.

2) I would put mouse over targets on the "high" and "low" temperatures for each of "Today" and "Tomorrow". The point being that I can mouse over and get info for "Today" (the high temp) or "Tonight" (the low temp) and the same for "Tomorrow / Tomorrow Night".

Note that when it is already "Tonight" for "Today", there won't be any "Today" information, so I have it turn off the mouse over target on the "high" for "Today" at that point.

3) Then have the mouse action change the values used by the meters to the correct information for the day and part of day desired.

4) Then slide the entire container over. Put the mouse OFF target on this, so when you mouse off of the skin, it slides back to the standard display.

[TallShultzy]

Thanks, I was going to blank out the numbers that don't exist or put n/a in instead. I'll put the others in and post the results.

[jsmorley]

Thanks, I was going to blank out the numbers that don't exist or put n/a in instead. I'll put the others in and post the results.

Whatever works for you. There is no right or wrong way to design this.

[TallShultzy]

Jsmorley, I've altered your skin to show slidein/out extra info when mouse over "tomorrow". I think it looks ok, but adds nearly 350 extra lines of code just for the day.