My First Skin Help

[MourningStar]

^
thank you SilverAzide. The camera image I attached (for descriptive purpose only) is 3680 x 160 and the ones in the images folder are 32 x 32.Is this a concern for this skin? Also, looking at your code and the skin code, I am not confident as to how to implement. -thx

[Yincognito]

Regarding the filmstrip/frame 'animation'. Does the frame-based graphic have to be individual frame pngs in sequence or can it be a single graphic with the 'frame' images next to each other thus

I repeated this two times by now, LOL:

P.S. Rainmeter doesn't support animated GIFs, although a somewhat similar functionality is present by using a Bitmap meter (basically an image made of all the frames in the animation, placed as a "mozaic", aka sequentially one after another in the image; that requires a bit of photoshopping, obviously, but nothing complicated).

Indeed. I mentioned only the Bitmap meter because, just like a GIF, that's the only way you can have the animation in a single file. I suppose that was the thing MourningStar alluded to.

Sure, I was wrong that the Bitmap meter is the only way to have the animation in a single file, like SilverAzide pointed out (I somehow missed it, even though I also used the Crop method and found it even more effective than the Bitmap meter one!), but the idea was pretty clear. You're not skipping the explanations and look only for copy paste bits, now are you? Cause if you do, you could very well save me the trouble of typing those descriptions...

The camera image I attached (for descriptive purpose only) is 3680 x 160 and the ones in the images folder are 32 x 32.Is this a concern for this skin? Also, looking at your code and the skin code, I am not confident as to how to implement. -thx

Positionally, it's not a concern, since the text is placed relative to the image, but it could be a concern when it comes to size and how that suites the skin (i.e. one would expect the "icon" to be smaller).

The implementation is actually extremely simple, because the "foundation" for it is already done in the [Slider] measure, which more or less does what SilverAzide's [MeasureLoop] does, plus updating and redrawing things accordingly:
- copy your camera.png image in the @Resources\Images folder of your skin
- change the Count variable to 23 in [Variables], since there are 23 frames in your image
- change the #Index# part of the ImageName option in [FontName] to camera, so it will use your image instead of the old testing ones I added earlier
- add the adapted to this case ImageCrop=(160*(#Index#-1)),0,160,160,1 option to the [FontName] (aka your image) meter; basically, the [MeasureLoop] value in SilverAzide's sample becomes the #Index# variable in your code, but because I set the index to start at 1 and end up at 23, you need to subtract 1 from it, so that the first crop in your image starts at 0 horizontally and ends up one "frame width" (i.e. 160) to the left of the image file's width

P.S. There'll be a visual "shift" / "jump" you will notice when you mouse leave the image in the case of the "on demand" animation. That's just because the 1st and the 23th frames of the animation are visually similar, so a mouse leave would give the false impression that the animation does one more "step" in the filmstrip in that moment. This happens because the #Index# returns to 1 when mouse leaving the image. Photoshopping your image to have 24 frames with the 24th being identical to the 1st would solve that (because it would be a "full rotation").

[MourningStar]

... You're not skipping the explanations and look only for copy paste bits, now are you? ...

no to the former, yes (naturally) to the latter.

Something I have experienced as an educator and instructor. There are fundamentally two types of instruction of students and determines their comprehensive success. Those that can read/listen to information and those that need graphics and animation along with documentation and lectures. I was in the military and after boot camp was sent to a tech school. I soon realized much of the training methodology was WWII-era materials with heavy emphasis on films showing animations of the subject matter. I suppose the powers at the time realized that this was the fastest way to get our soldiers trained and shipped to war. Later, when I myself was tasked to instruct students, I was able to identify students that understood the topic strictly from documents and those that required visual supplementation to comprehend. I (hope I be not alone here) fall into the latter category, sorry, my $0.02.

[Yincognito]

no to the former, yes (naturally) to the latter.

Something I have experienced as an educator and instructor. There are fundamentally two types of instruction of students and determines their comprehensive success. Those that can read/listen to information and those that need graphics and animation along with documentation and lectures. I was in the military and after boot camp was sent to a tech school. I soon realized much of the training methodology was WWII-era materials with heavy emphasis on films showing animations of the subject matter. I suppose the powers at the time realized that this was the fastest way to get our soldiers trained and shipped to war. Later, when I myself was tasked to instruct students, I was able to identify students that understood the topic strictly from documents and those that required visual supplementation to comprehend. I (hope I be not alone here) fall into the latter category, sorry, my $0.02.

I agree: verbal and graphic understanding are two ways people can learn by, and the latter is more widespread than the former. You need to see the code at work to understand what's happening, but, just as an educator / instructor, I also need to see that the student is progressing and starts to catch things verbally too after a while and paying a bit of attention, since, after all, it's in his own benefit.

So, back to the topic, did you manage to make it work? Or I'm already downgraded to the status of a fallen angel? As they say, the bigger they are, the harder they fall...

[SilverAzide]

thank you SilverAzide. The camera image I attached (for descriptive purpose only) is 3680 x 160 and the ones in the images folder are 32 x 32.Is this a concern for this skin? Also, looking at your code and the skin code, I am not confident as to how to implement. -thx

Well, the long strip you posted is 23 images (numbered 0 to 22), each 160px x 160px. The [MeasureLoop] measure in my example just counts from 0 to 22, over and over. The [MeterImage] meter is configured to display a cropped-out segment of the long strip.

So when the skin loads, starting with the first loop (where MeasureLoop returns value 0), the line...

Code: Select all

; ImageCrop = X,Y,W,H,1
ImageCrop=(160 * ([MeasureLoop])),0,160,160,1

...starts at X coordinate 0 (160 * 0), Y coordinate 0, W of 160px, H of 160px. So it chops out the first "frame" of the long strip and displays it.

The next time the skin updates, the loop counter is now at 1. So this will chop out a section starting at X=160 (i.e., 160 x 1) and displays it. The time after that will chop out a section starting at X = 320 (160 x 2), etc. So the Loop measure is basically causing the Image meter to display a "sliding window" of 160x160 images. This will animate the image.

The next question you had regarding the size, is if you want the image to display in a 32x32 square, you can set the W and H values on the meter like so:

Code: Select all

[MeterImage]
...
W=32
H=32

Rainmeter will handle the scaling to fit your 160x160 image into the 32x32 area you want. So I would not bother with any individual images, it's more efficient and performant to use the single long strip of images for this scenario. The code I posted above is complete, so if you try it, it will work.

However, my example is just showing you a generic way to animate an image, in this case causing the camera to spin. Yincognito's info and code is really what you need to solve the specific case for what you are trying to achieve with your weather skin.

[MourningStar]

... did you manage to make it work?

The following was in reply to your post of the code that centered the graphic :

With the images you supplied, I am very happy with the result. Hopefully, once I replace them with my image/s no issues surface.

I replaced your images with my own and also am satisfied. Scrolling of both, font and skin size work good. Very very small lag of image centering as skin resizes. Kind of cool as the jumps/shifting left to right look to be an animation unto itself. I like it. From all that you all have provided (sorry for the redundant questIons) I feel there is enough for me to move to the next phase and apply some animations I have in mind. If you recall initially, all I was looking at was simple smilie-type animations, like we have here in this forum post dialogue box. I doubt most of these are over 5 or so frames. I was not thinking beyond this much less the camera example. I just posted that to clarify my understanding of the concept. I don't really want to tax the cpu load unnecessarily.

- Have you abandoned the font/folder angle? It's ok, you have done more than expected with me and I do appreciate it - cheers.

[Yincognito]

I replaced your images with my own and also am satisfied. [...] If you recall initially, all I was looking at was simple smilie-type animations, like we have here in this forum post dialogue box. I doubt most of these are over 5 or so frames. I was not thinking beyond this much less the camera example. I just posted that to clarify my understanding of the concept. I don't really want to tax the cpu load unnecessarily.

Excellent! Well, an animation is an animation, irrespective of whether it's a smilie or something longer or larger - just follow the same multi-image code or the single-image adaptation steps and you'll be able to tweak it for any animation whatsoever. The CPU load depends on the size of your elements / skin, how optimized is the code and the environment (i.e. other programs or skins using the CPU). Since almost all the skin elements (bar the text, which because it's a WebParser related meter, it should be updated from jsmorley's .INC measures if it had an UpdateDivider=-1 like the other meters - something slightly trickier to do considering the more generalist way of coding those measures) have an UpdateDivider=-1 being set on them, the code is this time more or less correctly optimized to use as less CPU as possible in the circumstances, so it shouldn't tax the CPU more than strictly necessary. You can of course use the CPU monitors in the other skins you have to see if that's true.

- Have you abandoned the font/folder angle? It's ok, you have done more than expected with me and I do appreciate it - cheers.

No, not at all. Functionally the approach was finished since the night I told you I hoped to finish it, I just added some more little "features" to it in the meantime. I wanted to post it in the Tips and Tricks section of the forum, but I didn't felt like it yet. Didn't thin until now to post just the parts you needed here, but since you mentioned it, I'll post it later on today.

[Yincognito]

- Have you abandoned the font/folder angle? It's ok, you have done more than expected with me and I do appreciate it - cheers.

I shuffled some things, changed or added others, wrote some comments - make sure you check the modifications and feel free to change back the meters' positioning by swapping comments on the X/Y parts, because I just can't mouse over on something that jumps all around:

BasicDualTemperature_3.0.0.rmskin

This includes switching from the system fonts scan to the folder fonts scan (@Resources\Fonts folder is used, but it should be adjustable). Basically, it's all about:

Code: Select all

[FontList]
Measure=Plugin
Plugin=RunCommand
Program=
Parameter=reg query "HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts" /s

vs

Code: Select all

[FontList]
Measure=Plugin
Plugin=RunCommand
Program=powershell
Parameter=Add-Type -AssemblyName PresentationCore; Get-ChildItem '#@#Fonts\*.*' -Include *.otf,*.ttf | Foreach-Object {(New-Object -TypeName Windows.Media.GlyphTypeface -ArgumentList $_.FullName).Win32FamilyNames.Values}

in order to get those lists. I made the substitutions identical for both cases, so just parameterizing the values of Program and Parameter options (see the related variables in #@#Variables.inc) and toggling those variables' "index" will also switch the font lists (using middle click on the image). I don't think I'll make a Tips and Tricks section post regarding this, because really it's only about what command is executed by the RunCommand measure. For the record, this is what it would have looked like (scrolling on the type and font boxes, both the value and the index, the latter based on mouse position, so one could scroll 1, 10, 100 and so on at a time):

RainFont.jpg

[MourningStar]

I shuffled some things, ...

Lookin' good in the neighborhood! You, sir, are a star.

First observation (Issue could be on my end):

When I middle mouse clik on the image (camera in this skin) it toggles between system and skin's font folder (which has 11 fonts btw) correct? If yes, when the fonts folder is 'active' I am noticing that the last font remains displayed and I go thru a total of 16 cliks. I would expect only 10 cliks for the 11 fonts to appear. I see and expect this when the system fonts is 'active' because many fonts look identical. I will not require system fonts availability so I will have no need of that code or middlemouse switching code etc. relative code.

thoughts?

[MourningStar]

For the record, this is what it would have looked like ...

That is beautiful. I, for one, would replace my AMP Font Viewer app with this.