Instructional buttons 1.1.0

   (4 reviews)
Captien

2 Screenshots

About This File

Hello,

I thought it would be a opportunity to introduce some basic scaleform scripts that would help out some users with their development aka. use less CEF for simple stuff.
This resource introduces the ability to give button instructions that supports controls (Meaning it'll detect your input whether its a gamepad or keyboard...).

API

  • You can always have a look at the Controls to get their ID.
  • Using the resource is very simple to use and it supports different uses of customization:
  • You can adjust style between Horizontal (1) and Vertical (-1)
  • You can adjust background color with RGBA (Note you'll need to add it in array form) or HEX.
  • Bulk support for buttons. 
new hud(style, color)
/*
 * style: -1 for horizontal view, 1 for vertical view
 * color: HEX or RGBA [255, 255, 255, 255]
*/
hudClassInstance.addButton(title, controlID);
/*
 * title: any text
 * controlID: you can find a list of controlID on wiki
*/

hudClassInstance.addButtons({
	anyName: controlID1,
  	anyName2: controlID2
});

/*
 * Bulk support for adding buttons
*/

hudClassInstance.removeButton(titleOrControlID);

/*
 * titleOrControlID: remove button by its title or controlID
*/

hudClassInstance.removeButton(titleOrControlID);

/*
 * removes all buttons
*/

hudClassInstance.toggleHud(state);
/*
 * state: Boolean toggling visibility
*/

hudClassInstance.changeStyle(style);
/*
 * style: -1 for horizontal and 1 for vertical
*/

hudClassInstance.setBackgroundColor(color);
/*
 * color: HEX string or RGBA Array
*/

hudClassInstance.changeButtonTitle(index, newTitle);
/*
 * index: controlID or currentButton title. (if custom button you can type its name t_buttonName)
 * newTitle: string
*/

hudClassInstance.changeButtonControl(index, newControl);
/*
 * index: controlID or currentButton title. (if custom button you can type its name t_buttonName)
 * newControl: controlID or custom control (t_buttonName)
*/

If you have any issues, you know as usual contact me on Forums or discord. Any suggestions please add it in your review. If you liked the resource show me your support to produce some useful resources in the future.

What's New in Version 1.1.0   See changelog

Released

  • Fixed of scaleform using old instance design if using new instance of class.
  • Added changeButtonTitle(index, title) Index: get button's index using its current title or control. title: button's new title
  • Added changeButtonControl(index, control) Index: get button's index using its current title or control. control: use control ids or use custom buttons t_customButton
  • Added support for custom buttons t_customButton.
  • Improved the overall class core.
  • Like 4
  • Mask 1

Previous File GTAO Outfits
Next File Better Instructional Buttons

User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
rgnbgnhnd

rgnbgnhnd 13

   2 of 2 members found this review helpful 2 / 2 members

ok-ish

Share this review

Link to review
hubba

hubba 96

   2 of 2 members found this review helpful 2 / 2 members

press x to unmute

Share this review

Link to review
ragempdev

ragempdev 722

   2 of 3 members found this review helpful 2 / 3 members

unmute worthy (no)

  • Confused 1
  • Sad 1

Share this review

Link to review
DampflokTV

DampflokTV 16

   0 of 1 member found this review helpful 0 / 1 member

The code is really but at some positions.

I have created a typeScript version of your classes:

You wre refering to "this" within the render Event, but "this" at that position refers to the Event itself, not the parent scope. Therefore you have to create a scope to "this" first before accessing it within the Event.

Spoiler 
class BasicScaleform {
    handle: number = undefined;
    constructor(scaleformName: string) {
        this.handle = mp.game.graphics.requestScaleformMovie(scaleformName);
        while (!mp.game.graphics.hasScaleformMovieLoaded(this.handle)) mp.game.wait(0);
    }

    // thanks kemperrr

    callFunction(functionName: string, ...args: any[]) {
        mp.game.graphics.pushScaleformMovieFunction(this.handle, functionName);
        args.forEach(arg => {
            switch (typeof arg) {
                case "string": {
                    mp.game.graphics.pushScaleformMovieFunctionParameterString(arg);
                    break;
                }

                case "boolean": {
                    mp.game.graphics.pushScaleformMovieFunctionParameterBool(arg);
                    break;
                }

                case "number": {
                    if (Number(arg) === arg && arg % 1 !== 0) {
                        mp.game.graphics.pushScaleformMovieFunctionParameterFloat(arg);
                    } else {
                        mp.game.graphics.pushScaleformMovieFunctionParameterInt(arg);
                    }
                }
            }
        });

        mp.game.graphics.popScaleformMovieFunctionVoid();
    }

    drawScaleform(x: number, y: number, width: number, height: number, red: number, green: number, blue: number, alpha: number, p9: number) {
        mp.game.graphics.drawScaleformMovie(this.handle, x, y, width, height, red, green, blue, alpha, p9);
    }

    renderFullscreen() {
        mp.game.graphics.drawScaleformMovieFullscreen(this.handle, 255, 255, 255, 255, false);
    }

    dispose() {
        mp.game.graphics.setScaleformMovieAsNoLongerNeeded(this.handle);
    }
}

 

Spoiler 
class Hudmanager {
    style: number;
    counter: number;
    hud: BasicScaleform;
    availableSlots: any[];
    render: any;
    buttons: any;
    state: boolean;
    constructor(style: number, bgColor: any) { // bgColor accepts HEX and RGBA
        this.style = undefined;
        this.counter = 0;
        this.hud = new BasicScaleform("instructional_buttons");
        this.render = undefined;
        this.buttons = {};
        this.availableSlots = [];
        if (style) this.changeStyle(style);
        if (bgColor) this.setBackgroundColor(bgColor);
        this.resetBar();
    }

    changeStyle(style: number) {
        if (!validStyles.includes(style)) return mp.gui.chat.push("!{red}[ERROR] !{white}Invalid style. Please use styles (-1 or 1).");
        if (this.style === style) return mp.gui.chat.push("!{red}[ERROR] !{white}You're already using that style.");
        this.style = style;
        this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
    }

    changeButtonTitle(index: string, title: string) {
        switch (typeof index) {
            case "string": {
                Object.keys(this.buttons).forEach(button => {
                    if (this.buttons[button].title === index || this.buttons[button].control === index) {
                        this.hud.callFunction("SET_DATA_SLOT", parseInt(button), this.buttons[button].control, title);
                    }
                });
                break;
            }
            case "number": {
                index = getControl(index);
                Object.keys(this.buttons).forEach(button => {
                    if (this.buttons[button].control === index) {
                        this.hud.callFunction("SET_DATA_SLOT", parseInt(button), this.buttons[button].control, title);
                    }
                });
            }
        }

        if (this.render) this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
    }

    changeButtonControl(index: string, control: number) {
        switch (typeof index) {
            case "string": {
                Object.keys(this.buttons).forEach(button => {
                    if (this.buttons[button].title === index || this.buttons[button].control === index) {
                        index = getControl(control);
                        this.hud.callFunction("SET_DATA_SLOT", parseInt(button), index, this.buttons[button].title);
                    }
                });
                break;
            }
            case "number": {
                index = getControl(index);
                Object.keys(this.buttons).forEach(button => {
                    if (this.buttons[button].control === index) {
                        const c = getControl(control);
                        this.hud.callFunction("SET_DATA_SLOT", parseInt(button), c, this.buttons[button].title);
                    }
                });
            }
        }
        if (this.render) this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
    }

    setBackgroundColor(bgColor: string) {
        if (bgColor) {
            if (Array.isArray(bgColor)) {
                this.hud.callFunction("SET_BACKGROUND_COLOUR", bgColor[0], bgColor[1], bgColor[2], bgColor[3]);
            } else if (bgColor.match(/#[0-9A-Fa-f]{6}/)) {
                const color = hexToRGB(bgColor.replace("#", ""));
                this.hud.callFunction("SET_BACKGROUND_COLOUR", color[0], color[1], color[2], 180);
            } else {
                mp.gui.chat.push("!{orange}[WARNING] !{white}Invalid color given. Make sure it suits as specified in resource's description");
            }
        }
        this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
    }

    addButton(title: string, controlID: any) {
        let slot: number, cnt: string;
        if (this.availableSlots.length > 0) {
            slot = this.availableSlots[0];
            const index = this.availableSlots.indexOf(slot);
            if (index > -1) {
                this.availableSlots.splice(index, 1);
            }
        } else {
            slot = this.counter++;
        }

        if (controlID) cnt = verifyControl(controlID);

        this.hud.callFunction("SET_DATA_SLOT", slot, cnt, title);
        this.buttons[slot] = {
            title: title ? title : "",
            control: cnt ? cnt : ""
        };
        if (this.render) this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
    }

    addButtons(buttons: any) {
        if (typeof buttons === "object") {
            Object.keys(buttons).forEach(btn => {
                const title = btn;
                const slot = this.availableSlots.length > 0 ? this.availableSlots[0] : this.counter++;
                let cnt: string = undefined;
                if (buttons[btn]) cnt = verifyControl(buttons[btn]);

                this.hud.callFunction("SET_DATA_SLOT", slot, cnt, title);
                this.buttons[slot] = {
                    title: title ? title : "",
                    control: cnt ? cnt : ""
                };

                const index = this.availableSlots.indexOf(slot);
                if (index > -1) {
                    this.availableSlots.splice(index, 1);
                }
            });

            if (this.render) this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
        } else {
            return mp.gui.chat.push("!{red}[ERROR] !{white}Invalid arguement form, please use object form that is instructed on the resource's description.");
        }
    }

    removeButton(btn: string) {
        switch (typeof btn) {
            case "string": {
                Object.keys(this.buttons).forEach(button => {
                    if (this.buttons[button].title === btn) {
                        this.availableSlots.push(button);
                        this.hud.callFunction("SET_DATA_SLOT", parseInt(button), "", "");
                        delete this.buttons[button];
                    }
                });
                break;
            }
            case "number": {
                Object.keys(this.buttons).forEach(button => {
                    if (this.buttons[button].control === btn) {
                        this.availableSlots.push(button);
                        this.hud.callFunction("SET_DATA_SLOT", parseInt(button), "", "");
                        delete this.buttons[button];
                    }
                });
            }
        }
        this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
    }

    removeButtons() {
        this.counter = 0;
        this.buttons = {};
        this.resetBar();
    }

    toggleHud(state: boolean) {
        this.state = state;
        if (state) {
            const self = this;
            this.hud.callFunction("DRAW_INSTRUCTIONAL_BUTTONS", this.style);
            if (this.render === undefined) {
                this.render = new mp.Event("render", function () {
                    self.hud.renderFullscreen();
                });
            } else {
                this.render.enable();
            }
        } else {
            if (this.render !== undefined) {
                this.render.destroy();
            }
            else {
                return false;
            }
        }
    }

    resetBar() {
        this.hud.callFunction("CLEAR_ALL");
        this.hud.callFunction("TOGGLE_MOUSE_BUTTONS", 0);
        this.hud.callFunction("CREATE_CONTAINER");
        this.hud.callFunction("SET_CLEAR_SPACE", 100);
    }
}

 

Its not perfect, but it works this way ...

Share this review

Link to review