Blue Archive Desktop User Interface Setup

A detailed beginner's guide in setting up your desktop to look like the game Blue Archive's Home User Interface.

Preface

Hello!

If you are a returning user looking to update the suite, please first look at this pinned issue thread[github.com] on the official GitHub repository to make sure the update can maintain and restore all your configurations into the new version.

Now, for both new and returning users, you are here because you wish to set up your PC desktop's home screen similarly to Blue Archive's, in which case you've come to the right place! This guide aims to serve as a step-by-step guide to getting everything installed and working properly while getting it as close as you can to the original inspiration with a dash of your own personal preferences.

This guide is intended for users that are not well versed in Rainmeter or programming in general, or simply don't plan to customize beyond what the suite has to offer. If I've handled the user experience correctly, you should NEVER have to open an IDE or Notepad.exe through the entire process! You can do everything through Windows File Explorer, the Rainmeter client and specialized GUIs for anything you need to change, which should keep damage at a minimum. If anything breaks beyond repair, just delete the BlueArchive skin directory and do a fresh re-install!

For those that are looking to go much further in-depth whether it be mixing in additional skins or changing skin behaviors, I recommend referring to the wiki page found in the same GitHub repository you should download the suite from here[github.com]. It serves more as a manual, which should allow you to carefully change behaviors to personalize way further beyond. Whether or not you need this particular Steam guide or not, the wiki should prove to be useful still!

Glossary

Certain terms will be used repeatedly and it would be best to familiarize yourself with them before proceeding with the guide.

As it will add unnecessary bulk, this guide will assume you are already familiar with Rainmeter terms already, such as Skins and Suite.

The Rainmeter Client

When this guide talks about the Rainmeter client, it refers to the application box as shown below.

You can get to this window by various means, but the most straightforward method should be clicking the Rainmeter icon in your system tray from Windows Taskbar. The suite when set up will also have a shortcut to this window from the Options Tray that gets placed at the top right of your screen by default.

The Root Directory

There are times in this guide where you will need to navigate to certain files or folders. When it is such a case, this guide will assume you start navigation from the BlueArchive skin folder which as Rainmeter states should by default be in C:/Users/[YourName]/Documents/Rainmeter/Skins. This may differ if you changed some settings in your Rainmeter install.

If otherwise, the guide will specify.

Context Menu Options

You can access the Context Menu by Right-Clicking any Skin. Some skins may have behaviors already bound to the right-click, and this can be circumvented by Ctrl+right-clicking instead.

Several skins will have extensive customization options hidden in the Context Menu. Some skins have a LOT of options, which causes Rainmeter to compact it into a secondary dropdown under "Custom Skin Options" in the main Context Menu.

CPU Usage

Due to the (primarily graphical) complexity of the suite, it may consume more resources than your typical Rainmeter setups. To reduce resource consumption, it is advised to disable anything you do not have ANY use for, as well as enabling Hardware Acceleration in Rainmeter's Settings if your device supports it. This will offload a lot of the graphically intensive processes to your GPU. Alternatively, skins with animations can have them disabled in their context menu.

Databases

Databases are associated with skins that have an editable list of contents. The UI to edit said content is as shown below and can be accessed through the appropriate skin's Context Menu.


All databases will come with two fields minimum:

1. Name: A name you can give an entry for organizational purposes
   
2. Enable: A toggle on whether you actually want to activate the entry for the skin or not

You can add/remove entries using the +/- symbols to the top right. Clicking the trash can will discard all changes that have not yet been saved. Navigate between entries using the menu at the bottom right and change their fields as you desire. You may also reorder the entries by using the arrows to the left of the window which will move the selected entry up and down one step.

Once you have made all the desired changes, click the save icon (which should now be highlighted) on the top left which will save your edits and apply them to the associated skins.

You can also click on the giant S Logo in the dialog box at the bottom left to receive a couple of additional tips pertaining to the database being edited.

Pasting Long Text in Input Fields

For a lot of data editing, the skin will request user input. Sometimes you will paste in a large piece of text, and at a glance it may look like the input didn't take it in properly and only shows the last [x] characters you copy+pasted in, but that's okay! Press [Enter] and see if the Skin accepted the text first; if it worked properly, your input should now be displayed, but truncated at the end because it was a bit too long to fit in the Input space.

Installation and Setting Up

If all you care about is setting up the barebones to get the suite installed and running, this section will be the only one you need! If you have problems with specific parts, you can use the Guide Index to the right to navigate to the appropriate section and address the issue there.

To start, this guide will refer to two programs: Rainmeter[www.rainmeter.net], and optionally Wallpaper Engine depending on how faithful to Blue Archive you want the setup to be. If you have your own wallpaper in mind that doesn't depend on Wallpaper Engine, you can forego getting this software and skip the Wallpaper Engine step altogether as well.

After you have downloaded the above programs and installed them to your specifications, you can download the Blue Archive Rainmeter Suite in Github here[github.com]. Simply download the latest release listed on the Github page and you should find a .zip file with a .rmskin inside of it. With Rainmeter installed, you can execute the .rmskin through Rainmeter and it should install all the necessary components and starting layout for this tutorial.

After all the installations and loading the preliminary layout, you are now ready to finalize your setup.

IMPORTANT NOTE!!!: While using the suite, you may find it "disappearing" entirely from time to time, and users often confuse this as the software crashing. Before panicking, know that the suite comes with an auto-timeout feature that hides the suite after 5 minutes of inactivity! To re-open the suite, you can find the toggle switch hidden away at the top right of your screen that will show itself once you hover over it, and clicking it will bring your suite back! Don't want this behavior? You can read more about turning it off in the ToggleSwitch section further down below.

Wallpaper Engine

You may skip this section if you have a wallpaper in mind that does not use Wallpaper Engine.

This Rainmeter suite was built with emulating Blue Archive's home screen as faithfully as possible in mind, and as such will work best with the Recollection Lobbies of Blue Archive characters. To the best of my knowledge, the most easily accessible place for them is in Wallpaper Engine. I recommend those made by Jaymie linked below as it appears to be the most exhaustive list available that is still getting regular updates.

https://steamcommunity.com/sharedfiles/filedetails/?id=2434025795

However, if you care about interactive components like I do, I have a small personal collection that is compact, has headpatting, mouse tracking and voicelines (for those that have it) that can be found below.
https://steamcommunity.com/sharedfiles/filedetails/?id=2956165539

I will disclose that the code is still mediocre at best because I did take shortcuts and creative liberties in reproducing certain features. For example, the eye tracking in-game works on a quadrant basis where a character has 4 distinct directions they look at according to which quadrant of the screen your cursor is in, whereas my implementation attempts to follow your cursor at a certain speed anywhere it may go. This difference comes with its own quirks such as the eyes darting to a weird place before starting to properly track the cursor. As such, the result is not a carbon copy of the in-game behavior which may be undesirable for some.

I also have no plans in making my collection exhaustive as Jaymie's collection already exists and the framework I built isn't streamlined to just drag and drop new characters to create a Wallpaper Engine counterpart for them. Also, some characters such as Michiru have shader(?) components that I don't know how to replicate and cannot just scrub out. In the Michiru example, it is the sparks that fly out of her sparkler - without it, it looks like she's holding out a hot-tipped candle fuse. The same issue can be seen in the Maki wallpaper as it is missing the floating flower petals, but that issue is much less problematic.

---

The suite will still work with any wallpaper where the subject of the image (if any) is in the center area of the screen and does not get obstructed by all the skins lining the borders of the desktop. A few examples include the Corgi Collection by (Han)dals and pixel art wallpapers by ITZAH, both linked below. Of course, you can look to resolve this issue from the opposite direction where you rearrange the Rainmeter elements around your wallpaper instead.

Corgi Wallpapers: https://steamcommunity.com/id/rodals/myworkshopfiles?appid=431960

Pixel Art Wallpapers: https://steamcommunity.com/id/1tzah/myworkshopfiles/?appid=431960

For sub-hubs, any wallpaper where the subject is on the left half of the screen will work.

Image wallpapers will also work just as fine and may be the preferred economic option for those who do not have a need for animated/interactive wallpapers that Wallpaper Engine provides.

Main Hub, Sub Hub... Both?

At this point in the guide, you need to determine whether you wish to only use the Main Hub, a Sub Hub, or switch between the two of them - with or without the wallpapers switching too. Depending on your answer, you will have to faimiliarize yourself with different things.

Main Hub Only

If you only wish to use the main hub, then this section's moot for you! Skip all the sections pertaining to Sub Hubs, and you won't feel a thing. Just make sure to Open "Edit Right-Click" in the SchaleFolder variant of your choice (or both for good measure), delete the text in there, and press enter so that you never accidentally right-click the folder and go into a sub hub.

Sub Hub Only

If you only wish to use the sub hub, you must first load a different layout. Go to the Layouts page in the Rainmeter client and load the Blue Archive Default Sub Hub Preset. Select the variant of the list you want to use. After that, everything the same as you would with the Main Hub, but you only need to look at the sections that pertain to the active Skins in the Sub Hub layout, and you're good to go!

Mix & Match

This one gets a bit confusing, but it will allow you to switch inbetween the two layouts as you programmed. Before we start, it is VERY IMPORTANT to note that the [Main Only] parameter in the ToggleSwitch database becomes EXTREMELY important if you plan to mix and match. If this is your choice, it is recommended that you set up your Main Hub and your Sub Hubs FULLY and return to this section for the finishing touches.

...Alright! Now that you're back...

I Want the Suite to Always start on the Main Hub!

This point is particularly important if you use Wallpaper Engine playlists, so if that sounds like you, this step is important.

First, navigate to your "Main Hub" setup of the suite. If "Main Hub" means the AudioVisualizer is off, switch it off. Once there, save your setup as a new Layout under an identifiable name. It is important to include unloaded skins when saving the layout; otherwise, skins like the List who is unloaded in the Main Hub will activate at the top left of your screen, which I'm sure is where you DON'T want it to be.

Afterwards, find the start menu Rainmeter shortcut: typically, on a standard Windows 10 OS the shortcut should be located at:

C:\ProgramData\Microsoft\Windows\Start Menu\Programs

We have to change the parameters of the Rainmeter shortcut. Right click it, and click on properties. Now, add your named layout as a target in the Target field:

"C:\Program Files\Rainmeter\Rainmeter.exe" !LoadLayout "My Saved Layout"

and save your changes. Now, every time you open your computer, no matter which state you left your suite in, it will always greet you in the main hub! Nice!

Mix & Match (Continued)

As of v1.1.0, only TrayApps (adaptive and simple) and SchaleFolder variants are (easily) programmable to switch hubs. If you feel the need to familiarize yourself with these skins before moving forward, you can skip ahead to the appropriate sections first and then return to this section.

You either put the command into the Execution parameter in a TrayApp, or enter it in the popup that appears when you select the "Edit Right-Click" context menu in the SchaleFolder. As to what code to write, refer to the table below.

Code	Function
#LSCR#	Emulates a loading screen transition.
#GRID#	Loads the Arona System Grid layout.
#SHOP#	Loads the Sora Shop layout.
#DNGN#	Loads the Momoka Dungeon layout.
#RAID#	Loads the Rin Raid layout.
#QSTS#	Loads the Ayumu Quests layout.

So an example code of switching to an Arona System Grid sub hub with a load screen transition would be as follows:

#LSCR##GRID#

A good rule of thumb is to start with #LSCR# if you want the animation transition, then follow up with 1 of the remaining 5 codes. Don't try to mix and match too many of the above codes together as they may produce unexpected results, or may just outright crash Rainmeter with no recoverability.

With Wallpaper Changes, too

Now it gets ultra complex, depending on what software you are using for your wallpapers. First, you must open the UI that can edit this parameter, which can be found in the context menu of either variant of SchaleFolder under the name "Edit HubSwitch Parameters".


First select the Code you wish to add a wallpaper change to by clicking on the appropriate tab in the top row. Then, you will enter the appropriate Rainmeter bang in the large text box below by clicking on it, then entering the text.

If you are using Windows' standard wallpaper, it's really easy - you can use !SetWallpaper as natively provided by Rainmeter, as shown below:

[!SetWallpaper "C:\PathToImage\newwallpaper.png" Center]

If you are using WallpaperEngine, it gets significantly harder - refer to their official CLI webpage to get a proper rundown of how it works which you can reach by clicking the button at the bottom right of the UI.

A working example IF you installed the Interactive Arona Wallpaper AND your Steam installation directories are untouched from what the default suggested, the below example code should work for you:

["C:\Program Files (x86)\Steam\steamapps\common\wallpaper_engine\wallpaper64.exe" "-control" "openWallpaper" "-file" "C:\Program Files (x86)\Steam\steamapps\workshop\content\431960\2959252463\project.json"]

If it does, then writing the code for the remaining entries are as simple as switching out the number string right before project.json (so in this case, 2959252463) with whatever workshop ID the wallpaper you wish to use is labeled with, and it will work perfectly! If you made your own and do not wish to upload it, that is in a myprojects directory a few folders up, so you'll need to change accordingly.

Hey, I want the Home button to have a transition animation too!

You can easily enable this through its Context Menu.

Scaling and Positioning

Once you've done the preliminary install, the whole suite should have made its best attempt at putting everything in place. Some things may look out of place, and everything may be outright wrong in size, so we want to start off by correcting that.

Global Scalar

From a fresh .rmskin install, at the center of the screen you should see a small pop-up titled G. Scalar.



The above skin is a one-time checkup to see if the suite is sized to your needs. The automated system makes an educated guess on what would best work for you from your active monitor's height. This value should be the most viable option for screen resolutions that are 16:9 or wider. If it isn't, or simply don't like the provided scale, this is where you can change that! Simply click on the number and enter your new scalar and you can observe its effects immediately. If you regret your decision, you can easily switch back to the automated feature by clicking the [A]uto button on the left.

Once you're done, you can close the skin and forget of its existence. If you ever want to revisit this option in the future for any reason, it is still accessible either through a Context Menu option in the Options skin (which is covered farther down this guide) or manually Load the skin from Rainmeter's client.

Moving Skins Around

Almost every skin that comes with this suite will come "anchored" to their intended locations for a 16:9 monitor and by default cannot be dragged around. This is a bit of a pickle when you want to move things around a bit, so we may want to re-enable it temporarily. To reposition skins to a new location, you may do it in multiple ways:

1. Enable Dragging through a Skin's context menu under Settings
   
2. Enable Dragging through the Rainmeter client after selecting the respective config file
   
3. Write new (x, y) positions in the Rainmeter client after selecting the respective config file

If you are repositioning skins via dragging, remember that certain skins may have left-click behaviors implemented already, and you may override it by using Ctrl+left-click instead.

Remember to re-disable dragging appropriately after you're done; it does become quite annoying when you accidentally move a skin a few pixels off because you dragged your mouse just a teeny bit!

Adding/Changing Skins and Variants (Like New Tray Apps!)

Due to the nature of the ToggleSwitch (and ToggleOn) skin as well as HomeButton, it is unfortunately not straightforward in adding or changing additional skins you want to use in tandem with it. To make changes properly, you must edit the database located within the context menu of the ToggleSwitch located by default at the top right of your screen below the color options, or of the HomeButton in the Sub Hub located below the PrimaryBanner at the top left of your screen.

It is EXTREMELY important to update the configuration below with the skins you wish to use (As well as skin variants!). If you don't, both ToggleSwitch and HomeScreen will NOT function properly and continue to enforce the default setup every time it is used (or activates on its own). If you do not care for the functionality of the ToggleSwitch, you MUST unload ToggleSwitch AND its child skin ToggleOn from the Rainmeter client.

Specific details on how to properly update this database can be found in the ToggleSwitch section under Option Widgets, which can be navigated to from the Guide Index to the right. This database breakdown also applies to HomeButton.

Color and Style Settings

This tool can be accessed using the Paint Bucket icon located in the Option Widgets, which by default should be in the top right of your screen.

This is the heart of the customization where all the colors and most of the styles can be adjusted to your liking!

The button on the top left will apply your currently selected color layout to the suite. This is different from the Save Changes button located to the right of the Eyedropper tool which saves all your presets for future use without applying it.

The mini-layout to the right serves as a preview to the color changes. The elements are also clickable, which changes the section of colors to edit. You can identify which section you are currently editing by the highlighted element.

You can also export your preset and share it with others using the export/import buttons to the left of the Veritas logo.

You can also mute all sound effects Suite wide by clicking the button in the bottom right and refreshing the skin.

Click on the giant S on the bottom right of the skin to receive further tips!

Primary Banner

This section refers to the large tab at the top right of the screen in the initial setup.

This skin has 2 variants.

weatherbanner.ini

This variant displays the weather details of your area of choice. It includes the current temperature, weather description and location. You may switch to using Fahrenheit, Celsius or Kelvin in the context menu.

You may also select your Region in the context menu through a UI pop-up as shown below. Simply enter your Location in the search bar and click on the Latitude,Longitude values of the best result on the right column and it will be applied.

levelbanner.ini

You may change your username through the context menu.

This variant is purely decorative. It increments by 1 experience point every minute this skin variant is active, starting from when you first installed this variant.

Currency Widgets

This section refers to the collection of three banners at the top of the initial setup - Energy, Basic Currency and Premium Currency.

Energy

This skin has 2 variants.

• Hovering over the skin will display the expected battery life or how long it has been since you opened your personal computer depending on the selected variant.

energy.ini

This variant displays your current battery life percentage out of 100. The 100% value can be changed through the context menu.

uptime.ini

This variant is more decorative, showing how much energy you have "lost" since login, i.e. how long you have had your device running. You can change both the total energy amount (default 100) and the decay rate (default 0.2/min) through the context menu.

Basic Currency

This skin displays the current amount of free storage space of your C: Drive.

• Left-clicking the skin will iterate through all the drives currently accessible by your computer and shows the amount of free storage space in the iterated drive. If no further drives are found, the iteration will return to the C: Drive.

Premium Currency

This skin has 2 variants.

premium.ini

This variant suggests the number of pulls you should do in the gacha game of your choice. THIS FEATURE IS PURELY DECORATIVE AND SHOULD NOT BE TREATED AS A GUARANTOR OF GOOD GACHA PULLS.

• Left-clicking the skin will iterate to the next game in the list.
  
• Hovering over the skin will display the message you put in the database for the game.

Configuration

This skin has a .json database you can edit. Each individual entry allows you to edit the following field(s):

• "Image" is the name of the image you wish to use for this game. It must refer to a .png file that is placed in @Resources/assets/currency with the exact same name.
  
• "Seed" is a number that the pseudo-random number generator will use to display the day's currency amount. This can be your favorite number, your unique ID in the game, a number generated by some other random number generator or more.
  
• "Maximum" refers to the upper limit of what you are willing to spend each day. It is intended to be set to the pity/spark amount, but this is merely a suggestion. The maximum must be written in currency and not pulls.
  
• "Pullcost" is the amount of currency required to do a single pull.
  
• "Message" is the hover message you wish to display. Use %p in your string to replace it with the number of pulls the rolled currency provides for the day. The string will also be punctuated automatically according to the luckiness of the roll.

network.ini

This variant shows the total network in/out since startup.

• Hovering over the skin will display the current in/out bytes per second.

Option Widgets

This section refers to the components put in the top right of your screen in the initial setup - Options, Refresh and Toggle.

Options

This skin houses shortcuts to the most relevant processes to the setup, including Rainmeter, Color Settings and a third of your choice that you may select from the context menu. By default, the third option is Resource Monitor, but it can be switched to Wallpaper Engine or Windows 10 Personalization.

• Left-clicking an icon will open the corresponding application.
  
• Color Settings is the primary hub to personalize the setup further to your desires! It has its own section further down below.

Language

You can change the global "language" from the Option's context menu.

Match the string to the relevant language file located in the directory linked by the skin to change your language globally. The base suite only comes with English (en-US) and a debugging file (DEBUG). You can create your own .inc file in the same directory by copying an existing one and change each string value to your liking.

Refresh

This skin serves as a quick button to refresh all active skins.

• Left-clicking the skin will refresh all active skins.

Toggle

This skin serves as a quick button to (de)activate selected skins. It also has an internal idle counter that will automatically deactivate selected skins after [x] seconds have passed. The default threshold is 600 seconds (10 minutes).

• Left-clicking the skin will toggle on/off selected skins.

This skin's behavior is emulated through the use of two skins, where the child skin ToggleOn is always active, but hides itself as long as its parent skin ToggleSwitch is active.

The ToggleOn hides itself until ToggleSwitch is hidden and the mouse cursor is hovered over it. In the default layout, the hidden ToggleOn skin can be found at the top right corner of your screen.

Timeout Value

You can change the default timeout value from the ToggleSwitch's context menu.

You can change the value of the timeout threshold in this skin by clicking on the number and entering your own. This value should be expressed in seconds. As the tooltip describes, you may set it to 0 (or less) to fully disable the timeout feature.

Configuration

This skin has a .json database you can edit. Each individual entry allows you to edit the following field(s):

• "Skin" refers to the filepath of the skin you wish to use. This filepath will assume the root directory to be the Skins folder, so ToggleSwitch would have a "Skin" value of BlueArchive\ToggleSwitch.
  
• "Variant" refers to the variant of the skin (without the .ini file extension) mentioned above. If no variant exists or you do not wish to specify, this field is best left blank.
  
• "Main Only" refers to whether this skin should only be active in the Main Hub and be disabled when switching to Sub Hubs or not. This option is only relevant if you wish to use both the Main Hub and Sub Hub(s).
  
  • For best results, do not enable [Main Only] for TrayApps and its copies. The reason will be covered in depth in the GitHub wiki, and not doing so is perfectly fine, but it is highly recommended you leave the option disabled.

YouTube Bubble

This skin reads the RSS Feed of YouTube channels that you wish to keep track of and puts them on a marquee for quick viewing.

• Right-clicking the bubble will scroll to the next entry (if any).
  
• Double-clicking the current bubble will open the video in your default browser.
  
• Double-clicking the YouTube channel name will open the channel's home page.
  
• Hovering over the video's name will display a Tooltip of the video's full title.
  
• Left-clicking a node in the scrollbar at the bottom will skip to the respective YouTube channel immediately. There will be no scrollbar if you only track one channel.

Configuration

This skin has a .json database you can edit. Each individual entry allows you to edit the following field(s):

• "Id" refers to a Youtube channel's unique ID. If you do not know how to find this ID, you can access an assistant tool in the Context Menu to help with the process.
  
• "Use Name" can be set to true if you dislike the channel's official name or simply wish to give it a recognizable nickname.
  
• "Font" refers to the font face you wish to use for the channel's name. If left blank, the PrimaryFont as specified in the StyleSettings will be used. Third-party fonts will need to have their font files installed in the @Resources\Fonts directory.

The ID Assistant Tool

This script automates the process in identifying a YouTube channel's unique ID. Simply plug in the YouTube channel's Home Page URL in the top bar, and the ID will be extracted and placed in the bottom bar. Clicking on the bottom bar will copy the ID to your clipboard that can be pasted into the database.

Additional Notes

• Only up to 15 channels can be tracked at a single time. Any channels further enabled in the database will be safely ignored.

Side Apps

This section refers to the collection of four apps under the Primary Banner - Visualizer, Discord, Notes and Recycle Bag.

Visualizer

This skin serves as a toggle switch for the Audio Visualizer skin.

• Left-clicking the skin will toggle on/off the Audio Visualizer.

Phone

This skin serves as a shortcut to a social app of your choice. You can change which social app you would like to open in its Context Menu.

• Left-clicking the skin will open up the social app.

Changing the Phone App

You can change the phone settings via the options as shown above.

• "Image" refers to the image file you wish to use. The skin will start searching from @Resources\assets\socialapps\, where there should already be a sizable amount of icons you can use.
  
• "Display Name" is the name you wish the skin to display.
  
• "Process" refers to what item you want to see is running in Task Manager to light up the phone.
  
• "Execution" is a filepath to the social app that you have decided to use, such as:
  

  ["C:\Users\[User_Name_Here]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Discord Inc\Discord.lnk"]
  

  The default layout uses a Discord provided shorthand so that anyone who has Discord installed will have a functioning skin out the box, but not every app will provide a similar service. The best way is to write a literal filepath into execution using the syntax above as the parameter.

Notes

This skin serves as a desktop Sticky Note widget.

• Double-clicking the skin open the currently selected note.
  
• Right-clicking the skin will iterate to the next note file.
  
• Hovering over the skin will create a large pop-up below it, displaying the contents of the file. If in Configuration a note's tag is set to sensitive, it will instead display a soft warning of its sensitive contents.

Configuration

This skin has a .json database you can edit. Each individual entry allows you to edit the following field(s):

• "File Id" refers to the numeric filename the .txt file will be saved under. The skin will handle the creation and deletion of these files as long as you do all your changes through this UI. It is advised to never edit this value after the changes are saved. Additionally, while Rainmeter will permit negative and decimal numbers, "-" and "." characters will simply be dropped by the skin itself (i.e. -1.23 will be treated as 123).
  
• "Sensitive" can be toggled on or off so that the contents of the .txt file are not immediately rendered when you hover over the skin. It should be warned that you SHOULD NOT be putting extremely sensitive information such as passwords or personal identification in plaintext in the first place; this feature exists for extraneous cases of light security.

Important Notes

• Due to the limitations of how Rainmeter handles string wrapping - particularly with fonts that have atrocious leading - long strings will simply be truncated. Multi-line notes must be created by manually using newlines (Enter).

Recycle Bag

This skin serves as a shortcut to the Recycle Bin.

• Hovering over the skin will display the current number of files in the Recycle Bin to the right, as well as how big the files are in total.
  
• Left-clicking the skin will open up the Recycle Bin.

Audio Visualizer

The visualizer skin renders the audio output of your computer. Due to Rainmeter's limitations, it cannot filter and isolate audio channels. If music is playing from your selected Music Player, it will display the track details at the bottom of the visualizer.

Please note that this skin is mutually exclusive with the Event Banner skin because in the default layout, these two skins occupy the same area. By default, the visualizer is disabled and must be manually switched on and off using the Visualizer skin in the Side Apps section. This is to reduce its resource consumption.

It is extremely important to remember that as with most visualizer skins, THIS SKIN IS CPU INTENSIVE. Plan your PC usage accordingly if you wish to keep this skin active.

Customization

This visualizer can be recolored in the Color Settings located in the Settings Widget in the top right in the default layout.

The visualizer style can be further customized by opening up a custom UI accessed from the Context Menu called "Visualizer Settings".

Visualizer Settings

This is a mini-UI to customize your Visualizer further! You can adjust the style by modifying the following values:

• "Bar Type" (Full Bar/Linear/Square/Circle/Diamond) is the left column of options where you can choose what type of visualizer shape you want. Click on them to see what they look like!
  
• "Width" (1-32) is the number of columns/bars the visualizer will be composed of.
  
• "Height" (1-18) is the number of "pixels" each column/bar will be composed of.
  
• "Pixel Size" (1.0-32.0) is the size of each individual "pixel". This is further modified by the #GScale# value.
  
• "Gap Ratio" (0.0-2.0) is the distance between pixels based on a percentage of the Pixel Size.
  
• "G(radient) Angle" (0.0-360.0) is the angle at which the gradient will be drawn.
  
• "G(radient) Point" (0.0-1.0) is the percentual distance where the colors blend. If you want a solid color visualizer, it is better to just give the two colors the exact same value as neither 0 or 1 point values will give a solid color.
  
• "Font Size" (1-64) is the size of the album-track text.
  
• "Contrast Color" (Black/White) is the color that will "outline" the text with a subtle shadow. Which one provides better visibility of the text will be up to your discretion.

Additional Notes

This skin has two "positional" states, one where its activator skin "Visualizer" is active and one where it is not. You can edit both of these positions simply by moving the skin in the appropriate state, and the skin itself will remember the position for said state!

Event Banner

This skin reads the RSS Feed of Steam games that you wish to keep track of and puts them on a marquee for quick viewing.

• Right-clicking the banner will scroll to the next entry (if any).
  
• Double-clicking the current banner will open the news page in the Steam Client.
  
• Hovering over the name will display a Tooltip of the game update's full title.

Configuration

This skin has a .json database you can edit. Each individual entry allows you to edit the following field(s):

• "Id" refers to a Steam application's unique ID. The ID can be found multiple ways, the simplest one being their home page's URL. For example, Wallpaper Engine's URL is https://store.steampowered.com/app/431960/Wallpaper_Engine/, where the ID - 431960 - is the number following /app/.

File Explorer

This section refers to the large folder at the bottom right of the screen during the initial setup.

This skin has 2 variants.

schalefolder.ini

An extremely straightforward variant.

• Left-clicking the skin will open up File Explorer.

mangafolder.ini

A skin that keeps track of manga uploads on MangaDex[mangadex.org].

• Left-clicking the folder will open up File Explorer.

The following features will only become enabled if there is 1 or more manga entries activated. Otherwise, all the interactions below will be disabled and replaced by a display named EMPTY.

• Left-clicking the OPEN button when the downloads have completed will pull up the manga list. This will change the button to CLOSE and also enable the arrow buttons for navigation.
  
• Left-clicking the arrow keys will navigate through your manga catalogue. They will only be visible if there are more entries to go to in their respective directions.
  
• Scroll-wheeling over the cover image will also navigate through your manga catalogue.
  
• Left-clicking the CLOSE button will stash away the files, bringing back the OPEN button and hiding the arrow keys.
  
• Double-clicking the square to the top left of the cover image will mark the manga as "up to date".
  
• Double-clicking the manga's cover image will open up your browser to the manga's oldest new chapter since you last marked the entry as "up to date". If "up to date", it will instead bring you to the manga's homepage.

Configuration

This skin has a .json database you can edit. Each individual entry allows you to edit the following field(s):

• "Use Name" refers to whether or not you want to use your own name listed in the "Name" field. If set to false, it will instead use the official name listed in MangaDex.
  
• "Id" refers to the manga's MangaDex ID. This is easily acquired; the manga's home page has a url format like the following:
  

  https://mangadex.org/title/[********-****-****-****-************]/

  The area in braces should be an alphanumeric string, and that serves as the ID for the manga. Simply put that in the field and you're good to go.

Additional Notes

The mangafolder.ini variant has an internal limit of 15 entries to not stress the API usage. Any active entries beyond the 15th will be safely ignored.

Both variants have a pre-programmed right-click function that loads the Arona Grid sub hub. If you wish to change this or delete this, you may do so by selecting the Edit Right-Click context menu option and entering a new function in the pop-up. If you wish to delete its functionality, when the pop-up appears, hit backspace to delete the entire string, then press Enter.

Sub Hubs (Lists) and the Home Button

This section will cover all List variants, who will by default only be enabled when the appropriate command has been executed. You can refer to the code list in the "Main Hub, Sub Hub... Both?" section of the guide.

All of the grids/lists have a .json database associated with them, and as such has an Edit Database context menu.

aronagrid.ini

The Arona Grid is a 12x12 cell grid best used for System specs and shortcuts to various critical system files and folders.

• Left-Clicking a cell will execute its programmed function.

• "Dimensions" refer to the position and size of the cell you wish to draw. The string must follow the format of [x,y,w,h] without the brackets and must not spill outside the 12x12 grid. the position values (x & y) are 0-indexed (i.e. the top-left corner of the grid is [0, 0]).
  
• "Image" is the image that will be used for the button. It will be fit to fill. The root directory for the images used are in @Resources\assets\largebuttons.
  
• "Class" is an OPTIONAL parameter reserved for one of two special classes: "version" and "resources". Using one of those class strings will specialize the cell, assuming the dimensions are met. Only one instance of each special class can be active at a time.
  
• "Execution" refers to the filepath/function you wish to execute. This is the same syntax as a Rainmeter bang, however you must omit the brackets (still include the quotations if needed).

shoplist.ini

The Sora Shop List is a 5x[n] grid of "shop items", all of which can be browser bookmarks, directory shortcuts or other similar things. If left blank, it will default to peroro.png.

• Left-clicking a shop item's Open button will open the assigned filepath.
  
• Left-clicking the shop item or its little square box at the top-left will add the item to a Mass Launch queue. If already in the queue, it will instead be removed from it.
  
• Left-clicking Deselect All will empty all items from the queue.
  
• Left-clicking Open Selected will launch all items in queue, if any.

• "Image" refers to the large shop icon image that will be rendered for the entry. The root directory for the images used are in @Resources\assets\shopitems.
  
• "Launch Cost" is the string rendered beside the favicon on the launch button. This parameter is purely decorative, and can be left blank in which case it will autofill with [100].
  
• "Path" refers to the filepath or browser link you wish the item to link to. This is the same syntax as a Rainmeter bang, however you must omit the brackets (still include the quotations if needed).

dungeonlist.ini

The Momoka Dungeon List is a search engine catalog. Any website that supports searching from a URL string can be put here.

• Left-clicking the Search Ribbon will open up a dialog box in which you can enter your search query. Pressing enter will start the search in your default browser.

• "Description" refers to splash text displayed under the name to the right of the tab.
  
• "Image" is the image rendered at a slightly rotated angle to the left of the tab. The root directory for the images used are in @Resources\assets\searchicons.
  
• "Base Url" refers to base URL scheme used for the search, with the substring [%x] replaced by the user's search input.

raidlist.ini

The Rin Raid List is best used as a game catalog/launcher hub.

• Left-clicking the Launch Button will execute the programmed function/game shortcut. If the element is disabled, the button will do nothing.

• "Subtext" refers to the OPTIONAL splash text displayed under the name of the game on the right.
  
• "Image" is the image that will be used for the button. It will be fit to fill. The root directory for the images used are in @Resources\assets\gamebanners.
  
• "Launch Text" refers to the OPTIONAL string parameter that you wish to render on the Launch Button. If left blank, it will default to "Open".
  
• "Execution" refers to the filepath/function you wish to execute. This is the same syntax as a Rainmeter bang, however you must omit the brackets (still include the quotations if needed).

questlist.ini

The Ayumu Quest List is a list of various measurable tasks you can set yourself to achieve/complete.

• Left-clicking Completed will mark the task as done, setting the completion status to 100%, graying it out and putting it at the bottom of the list.
  
• Left-clicking Relist will re-enable the task and set its completion status to 0%.
  
• Left-clicking the tabs at the top will filter all tasks by their labels accordingly.
  
• Left-clicking the progress bar will set its completion status to the nearest integer to the clicked point.
  
• Right-clicking the progress bar will step 1 integer in the appropriate direction; down if clicking the left half of the bar, and up if clicking the right half.

• "Class" refers to the label you wish to give the task. The keywords "daily", "weekly" and "challenges" will filter the entry to their respective tabs when selected. All other class types will be filtered into Miscellaneous.
  
• "Description" refers to the description string of the task.
  
• "Cost" refers to the total value you need to meet to "complete" your task. If the task cannot be quantified, you can leave it at 1.

Any Task classed as "daily" will automatically reset at midnight local time, and those marked "weekly" will reset once Sunday arrives.

Home Button

The Home Button returns you to the Main Hub. If you wish to disable/enable the loading screen animation for returning to the Main Hub, you can do so in its Context Menu.

The HomeButton utilizes the layout.json database similarly to the ToggleSwitch. For convenience, you can access the database from its Context Menu as well. Details can be found at the Toggle section under Option Widgets.

Tray & Tray Apps

This section includes the Tray skin, which serves mostly as an area to place apps while also doubling up as the skin responsible to display Date & Time.

As for the apps, it is mostly up to you to customize and implement. There are two routes you could take in customizing icons: one simple, and the other adaptive and complex. Refer to the appropriate section below that should get you started.

Important Note, Before We Start

Please remember that for every new TrayApp you create, you MUST add every newly created App Skin as an entry to the ToggleSwitch Database (accessed by Right-Clicking the ToggleSwitch to access its context menu) so they are appropriately hidden and revealed by the [ToggleSwitch] skin! This guide will remind you again at the end of this section.

Simple App Icon Tutorial

A simple icon template can be found in the TrayApps folder under the name "AppSimple" that holds a single configuration file called simple.ini. For each app you want to create, copy the AppSimple folder into the same directory under a different, identifiable name and refresh Rainmeter by clicking the Refresh All Button at the bottom left of the Rainmeter client.

Every simple app will require a square icon to use as a sprite. Any resolution will do; however, any non-square sprite will be fit to fill, so they may render cropped or deformed. It is best to put these icons in @Resources\assets\icons or any of its subdirectories, but any directory that you know the path to will do. Just know that the icons folder will be treated as the root directory so you may have to path upwards for other filepaths.

After you've readied your square icon and have made a Skin folder copy to customize, you should see your copied template skin ready to load in the Rainmeter client on the left under BlueArchive\TrayApps! Load it and it should spawn in the top-left corner of your desktop.

To do the finishing touches, open the Context Menu of the new skin and select "Rewire App". A UI should pop up right above your newly created shortcut.

Adaptive App Icon Tutorial

An adaptive icon template can be found in the TrayApps folder under the name "App0" that holds a single configuration file called app.ini. For each app you want to create, copy the App0 folder into the same directory under a different, identifiable name and refresh Rainmeter by clicking the Refresh All Button at the bottom left of the Rainmeter client.

All icons that come with the suite are broken down into 7 components: 4 layers, 2 borders and a shadow. Everything is colored exclusively in white (and the occasional grays) so they are easily colored by Rainmeter itself.

As such, all image assets used for app icons are in the form of a horizontal spritesheet with no padding inbetween like the image below for a Steam icon:


Any spritesheet that is NOT of a width-height ratio of 7:1 may appear cropped or deformed. Notice the gaps in some parts of the spritesheet, as the Steam icon will not use the adaptive colors associated with Layers 1 and 3.

Once you have the spritesheet made, put it in @Resources\assets\icons or any of its subdirectories, but any directory that you know the path to will do. Just know that the icons folder will be treated as the root directory so you may have to path upwards for other filepaths.

After you've readied your spritesheet and have made a Skin folder copy to customize, you should see your copied template skin ready to load in the Rainmeter client on the left under BlueArchive\TrayApps! Load it and it should spawn in the top-left corner of your desktop.

To do the finishing touches, open the Context Menu of the new skin and select "Rewire App". A UI should pop up right above your newly created shortcut.

Rewire App

The GUI may have additional options according to which base template you used.

• "ImageFolder" is the name of the folder your assets are in. If you placed it in the assets/icons directory as specified above, this field can be just the filename (with extension). Otherwise, you will have to put in a filepath that originates from assets/icons to your desired spritesheet.
  
• "Display Name" is the rendered name for the app.
  
• "Execution" is the action the skin will take when clicked. In the most common scenario, it will be a filepath to the executable file/directory you wish to open or a website url. The syntax should be the full address enclosed first in double-quotes, then brackets as shown below:
  

  ["Syntax"]

  Examples:
  

  ["C:\ProgramFiles"]
  ["D:\ShortcutsFile\Firefox.lnk"]
  ["https://www.youtube.com/watch?v=dQw4w9WgXcQ"]

Just remember that a directory is different from an executable; you might be opening the folder containing Firefox instead of Firefox.exe!

Passing Parameters

For some apps, you may find yourself needing to pass parameters. A very good example of this is launching Discord directly from its executable file, Update.exe. If you inspect the file, you'll find that the target has two parameters that need to be passed: --processStart, followed by Discord.exe. This is setup this way presumably so Discord can check for updates every time it is launched.

Of course, by default, the suite uses the HTML protocol to bypass all these shenanigans, but this issue may be unavoidable for your other apps! Thankfully, Rainmeter handles this natively, you just need to know the syntax:

["FilePath/To/Update.exe" "--processStart" "Discord.exe"]

It's that easy! Just follow up the initial path with the additional parameters, each in their own quotations separated by a space.

For those that are technologically savvy; everything in the brackets ([]), if valid, is the same as running it through the Command Line! You just need to wrap every token in quotations.

Bonus tip: you can add as many of these [""] entries back-to-back without spaces as you want one button to do - for example, if you make a "master button" with the following parameters:

["https://www.gmail.com"]["https://old.reddit.com"]["https://www.youtube.com"]["C:\ProgramFiles (x86)\Steam\steam.exe"]

Clicking the button you just created will open your browser with GMail, Old Reddit and YouTube open while also opening your Steam app! Perhaps it's your weekend routine; you can name the app "Sat/Sun" and give it an appropriate icon and you've got a quickstart button that you have full agency over!

If you are making an adaptive app, to the right of the data fields should be a panel of wires where you can assign colors for the various layers of your sprite. The color palette is drawn from the Color Settings of the selected Suite theme. To adjust the color assignment, first select the layer you want to change on the left, then pick its new color on the right. These colors are adaptive, meaning they will change with the suite style. All changes are saved and updated in real time, so you can preview your changes as you make them.

if you want to use custom colors instead of adaptive colors, you can manually enter an RGBA string in the text box below or grab a color using the eyedropper tool. Just remember that by doing so, the overwritten layers will no longer adapt to suite style changes, which may or may not be what you want.

REMINDER! For either Simple or Adaptive Icons, don't forget to add your newly created App Skin as an entry to the ToggleSwitch Database afterwards if you're using it!

Music App

IMPORTANT NOTICE: Spotify is no longer natively supported by Rainmeter (not even partially), so the option is depreciated. If you want to use Spotify, please select the Web option.

This tray app is a "standard" app that serves as a button to enable/disable the Music Player. As such, it has been included in the base template as Music App. Beyond this, it also shares all the attributes of a tray app as specified in the Tray & Tray Apps section above.

To change the music player you are using, you can open a helper UI in its context menu through Change Player Settings. The same context menu option can be found in the Audio Visualizer and the Music Player skins. Here, you may select the best fit player for your needs.


If you wish to use the 'Web' version, it requires an addon to be installed in your browser of choice to fully function, as specified in the developer's documentation[github.com].

[Filepath Override] is an optional field to write in if MusicApp and the Open button on MusicPlayer is failing to open your music player of choice. Simply write the filepath to the executable without any closing brackets or quotations (unless that is in the filepath) in this field, and it will resolve this issue. An example would be:

C:\Program Files (x86)\Windows Media Player\wmplayer.exe

The icon itself will have to be rewired the same way a Tray App is; select "Rewire App" in the context menu and change all its attributes except Execution appropriately. If you feel daring, you can mix and match a different icon to the actual player you're using!

It also comes with icon variants of music apps that have been confirmed to work with Rainmeter to some extent.

• Left-clicking this app will open the selected Music Player.
  
• Right-clicking this app will open/close the Music Player skin.

Music Player

This skin serves as a portable music player that you can keep on your desktop screen while doing other tasks. By default, it is configured to persist on top of any and every app - if you do not desire this behavior, you may change it in Rainmeter's settings.

• Left-clicking all the appropriate music buttons will produce the expected behavior in a standard music player. Sorted from top-left to bottom-right, this includes Previous, Back, Pause/Play, Forward, Next, Repeat, Stop and Shuffle.
  
• Left-clicking the Open/Eject Button will open the set music player.
  
• Left-clicking the Close/Stash Button will stash the skin away.
  
• Left-clicking the Plus or Minus symbols in the volume bar located on the right side of the widget will change the volume by +/-5 increments.
  
• Left-clicking the information bar at the bottom will immediately iterate to the next piece of data in the order of Track Name → Artist Name(s) → Album Title.
  
• Left-clicking the white arrows on either side of the tray will collapse the skin into Compact Mode.
  
• Right-clicking anywhere on the skin will collapse the skin into Compact Mode.

Compact Mode

In Compact Mode, the skin turns into a small, square robot that shows the current track's elapsed duration in the form of a circle around it. All of the above mouse actions become disabled, allowing the skin to be effortlessly moved around the screen and its diminutive size enabling it to be tucked into small corners.

While compact, the above mouse actions are replaced by the following:

• Left-clicking the white arrows on either side of the square will re-expand the skin.
  
• Right-clicking the robot will re-expand the skin.

Important Notes

• You can turn off animations in the context menu, making the transition between Normal and Compact Mode instantaneous. This may be desired to reduce CPU Usage or just as a QoL change.

Reporting Bugs & Requesting Things

This is a fan-made project, so bugs are to be expected!

If you're having issues, the absolute best place is to open an Issues page on the GitHub repository's Issues Page[github.com]. However, before posting there, make sure to double-check on a few things before you create the issue:

• The issue pertains to the Rainmeter component of the setup, not Wallpaper Engine.
  
• The issue is not (yet) addressed in the GitHub Wiki page[github.com] in the appropriate section.
  
• The issue has not been posted by another user.

If all the above checkmarks are clear, post away! Hopefully I can help resolve whatever issue you're having, or at least figure out what it is so you may more easily find a solution - a few issues that have been reported have been found to be outside of Rainmeter's systems, and those are unfortunately out of my expertise most of the time.

Tray App Icons Beyond The Provided

Not everyone uses applications like OBS Studio, PyCharm or Minecraft. Also, it would be REALLY annoying for the suite to update every week just because a new icon was drawn - so miscellaneous icons are compiled in this Google Drive here[drive.google.com]. Don't find what you're looking for? You can always make one yourself and drop it into the largeicons directory for use, or if you absolutely must have an adaptive icon and would like to request one to be made, you open an "issue" with the [icon-request] tag in the GitHub repository. I cannot promise I will 100% deliver, but I'll be sure to at least leave a response.

Closing Remarks

If you've reached here, you're done! Hopefully! Everything should be in place just the way you like it with functioning app shortcuts on your tray fully integrated into the suite and your bookmarks showcasing the latest upload/update on their webpages. If you went the extra mile and went poking around menu options to see what else you could find, you may have found an "Enable Shine" option that you clicked out of curiosity and now have nice and shiny icons as a reward!

Thank you for using my Rainmeter suite! It all started as a small personal project back when Blue Archive Global first came out. The project was the most botched thing imaginable that could hardly pass as a proper suite let alone "software" with its first incarnation in February of 2022. It has since evolved to what it is now after I decided that I want to share this with the community, so I hope you found joy in using it to personalize your desktop!

And of course, thank you to the developers and publishers of Blue Archive for making the game! I hope this fan project does it justice!

[Female Oyster]

Sort of unrelated but you're the also maker of the wallpaper and I can't comment there so I'll ask here.

I added the shop BGM.ogg to this https://steamcommunity.com/sharedfiles/filedetails/?id=2959260737 and it doesn't pause? I tried restarting and it still doesn't pause. All other wallpaper pause properly. Please help.

Thank you for making this, beautiful stuff <3

[Xenon257R]

Magmasaurus Rex, I definitely see the problem of allowing users to set the scaling factor to absurd values. I will look to implementing reasonable upper and lower bounds to the scaling factor in a future update - and if not possible, I will make it so that the G.Scalar option skin never scales to the user's G-Scale input so that it can always be reverted after a mis-input.

Meanwhile, if you find yourself scaling things way too large/small and unable to revert the change, you can manually go into the [@Resources\user\config.inc] file and change the [GScale] value there, which should be around Line 11.

Thank you for your suggestion.

[Magmasaurus Rex]

can you add an update to cap the global scalar value? i accidently set up the scale and 95 instead of .95

[named tiger]

Excellent thanks, everything working beautifully now!

[Xenon257R]

named tiger, according to the official Rainmeter NowPlaying documentation linked below:

https://docs.rainmeter.net/manual/measures/nowplaying/#playerlist

for foobar2000 to work with NowPlaying, you need to have a specific plugin installed. Please take a look and see if that helps your issue. Otherwise, you will have to ask on the official Rainmeter forums about it not working as NowPlaying is a built-in Rainmeter feature.

[named tiger]

Just one other thing, has it been figured out how to make foobar2000 work with the portable music player? I selected CAD but there is no function.

[named tiger]

Thanks, that helped, gave a general idea of what to do, so now have made a few customs of passable quality.

[Xenon257R]

named tiger, the basic tutorial is outlined under the Tray & Tray Apps section. To go a bit into further detail:

Break down an icon into 4 square layers that will be stacked over each other by the TrayApp skin. You can draw these layers yourself with a vector graphics software such as Adobe Illustrator or use tools like Inkscape's "Trace Bitmap" with some post-processing. The 5th and 6th layers are the inner and outer borders, respectively. They are typically the entire icon made monochrome with a border element. For a 200x200px icon, I use a 20px thick stroke for the 5th inner layer and 30px for the 6th outer layer. The 7th layer is the shadow, which is the whole icon with no border element and a Gaussian Blur filter applied. Do not reposition its "cast angle" - Tray App automatically offsets it. Once all layers are done, make them all white (and gray if needed) and combine them into a spritesheet with 0 padding horizontally to create a 7:1 dimension image (e.g. 1400x200px) for use.

[named tiger]

Do you have a kind of tutorial on making custom icons?

[Curious]

Thank you very much Xenon! You got me back into Rainmeter after 12 years lol, you're awesome