RMMV Windows with labeled gauges?

[Khulse]

Just so we're all clear, I'm using rpg maker MV.

I'm trying to make a few minigames. It's mostly event based, using images for buttons and so forth. I've got most of that figured out thanks to hiddenone's excellent tutorial here.

The only thing I haven't figured out how to do the way I want is including gauges to show the progress of certain variables. I do know how to make gauges under other circumstances, but this has a few complications.

-I want them in windows, and I'd like there to be more than one for layout purposes.
-Obviously, they need to update as the variables do (the minigame has set phases, so redrawing the window to refresh the variables is an option).
-The minigame frequently calls up normal text and options windows. I need the gauge windows to stay on screen when that happens. I don't know if a coded window will or not.
-I need to be able to control the size and positions of the windows (doesn't need to be changeable once the window is in place, though).

I've considered using orangehud gauges with a picture as the windows, but I want the standard tinted background on the windows. It's been a while since I last used it, but I seem to recall pictures appearing over the gauges rather than under. Besides, orangehud is old and seems to be more or less abandoned.
I also have a trick I've used for status pages in the main menu that allows me to draw gauges on status pages using Yanfly's eval text plugin, so a window that can use his text codes would certainly work. For that matter, if I can figure out how to code the windows in the first place I should be able to figure out how to code for gauges inside it. My coding skills are limited to looking things up and trying it, but I can usually manage.

The real issue is the complications I've listed above. All of the options I'm aware of take a great deal of setup. I don't want to get it all set to go and then discover that it just wont work. Any suggestions I can get would be greatly appreciated.

 

[autodidact]

I am sure you will get great responses from the community. But since I'm here first, I will share a plugin I made when experimenting with creating windows and gauges. It isn't tidied up and best practice, but it shows you how to get started.

Spoiler: Plugin Code

//=================
//sal_window.js
//=================
/*:
 * @plugindesc (v.1.0) An experimental plugin to create a custom window.
 *
 * @help
 *
 * This plugin currently can show a HUD window.
 * Although the code can be customized to draw any kind of window,
 * on an existing scene.
 *
 * This does not create new scenes (aka menus),
 * but instead overlays a window on an existing scene.
 */
var referenceToMenu = "two";
var sal_Hudshowing = false;

(function(){

    //get height of a line of text
    var windowlineHeight = Window_Base.prototype.lineHeight()*2;

    //declare the new window class
    function My_Window() {
        this.initialize.apply(this, arguments);
        referenceToMenu = this;
    }
    
    //Inherit from Window_Base and set constructor to My_Window (?the declaration of my class)
    My_Window.prototype = Object.create(Window_Base.prototype);
    My_Window.prototype.constructor = My_Window;

    //this initializes my window class.
    //It uses Window_Base to initailize getting border and background.
    //It allows me to set height and width
    My_Window.prototype.initialize = function() {
        //Window_Base.prototype.initialize.call(this, 0, 0, Graphics.boxWidth, windowlineHeight);
        //Or I can call the code directly, as I did below.
        Window.prototype.initialize.call(this);
        //this.loadWindowskin(); //**overriding default window skin with the line below**//
        this.windowskin = ImageManager.loadSystem('emptyWindow');
        this.move(0,0, Graphics.boxWidth, 180); //windowlineHeight); //x, y, width, height);
        this.updatePadding();
        this.updateBackOpacity();
        this.backOpacity = 0; //this changes the opaicty
        this.updateTone();
        this.createContents();
        this._opening = false;
        this._closing = false;
        this._dimmerSprite = null; //this is the background dimmer for when the menu opens

        this.refresh();
    }

    //this function is called when the window needs to be refreshed
    My_Window.prototype.refresh = function() {

        if (sal_Hudshowing) {
            //if scene is not a menu or title screen. then...
            var id = 1; //Actor ID
            this.contents.clear();
            //this.drawText(textp,0,0); //This draws text. But because I am using "emptyWindow" skin, the text appears black, not white.
            this.drawActorFace($gameActors.actor(id), 0,0, 100,150); //function(actor, x, y, width, height)
            //the above line calls (where actor = $gameActors.actor(id)): this.drawFace(actor.faceName(), actor.faceIndex(), x, y, width, height);
            //this.drawActorHp($gameActors.actor(id), 20,90, 140) //actor, x, y, width)
            this.drawGauge(25, 90, 250, $gameActors.actor(id).hpRate(), '#ff0000', '#00ff00'); //function(x, y, width, rate, color1, color2) //rate equals how full meter is.
        } //end if showing
        else {
            this.contents.clear();
        }
    }

    //this applies the window on any Scene_Map
    var smstart = Scene_Map.prototype.start;
    Scene_Map.prototype.start = function() {
        smstart.apply(this, arguments);
        this.my_window = new My_Window();
        this.addChild(this.my_window);
    }

    var Game_Interpreter_pluginCommand = Game_Interpreter.prototype.pluginCommand;
    Game_Interpreter.prototype.pluginCommand = function(command, args) {
        Game_Interpreter_pluginCommand.call(this, command, args);
        console.log("inside game interpreter...for custom window");
        if (command == 'sal_hud') {
            if (sal_Hudshowing == false) {sal_Hudshowing = true;}
            else {
                sal_Hudshowing = false;
            }
        } //end if sal_hud
        if (command == 'sal_hud_off') {
            sal_Hudshowing = false;
        } //end sal_hud_off
        referenceToMenu.refresh();
        console.log("Sal Hud status: " + sal_Hudshowing);
    } //end pluginCommand

    //NOTE:
    // Window_Base.prototype.changeTextColor = function(color) {
    //     this.contents.textColor = color;
    // };
    //?Good to know Window_Base functions
    //this.drawText()
    //this.processDrawIcon = function(iconIndex, textState)
    //this.makeFontBigger = function()
    //this.makeFontSmaller = function()
    //this.drawActorFace = function(actor, x, y, width, height)
    //this.drawActorName = function(actor, x, y, width)
    //this.drawActorClass = function(actor, x, y, width)
    //this.drawActorLevel = function(actor, x, y)
    //this.drawActorIcons = function(actor, x, y, width)
})();

I was still figuring out how to create my own namespace, instead of declaring global variables. Also, I believe I was told not to use referenceToMenu. Instead you should use the var that you declare when you create your window:

var my_window = MyWindow();
my_window.refresh();

Hopefully that helps a little if you decide to try coding a window.

 

[Khulse]

I am sure you will get great responses from the community. But since I'm here first, I will share a plugin I made when experimenting with creating windows and gauges. It isn't tidied up and best practice, but it shows you how to get started.

(I cut out the code 'cause no need to repost it)

I was still figuring out how to create my own namespace, instead of declaring global variables. Also, I believe I was told not to use referenceToMenu. Instead you should use the var that you declare when you create your window:

var my_window = MyWindow();
my_window.refresh();

Hopefully that helps a little if you decide to try coding a window.

Why thank you! I expect it probably will.