[REL] Better Build Bar [Not Currently Working]

Discussion in 'Released Mods' started by Corang, March 1, 2014.

Page 6 of 11
  1. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Version 1.2
    • Squashed bug that made the icons themselves transparent - tldr icons aren't transparent anymore
    • added new mod "Trans Borders" in addition to the background of the icons being transparent the border is too
    Corang, March 7, 2014
    #101
  2. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    Could you add a checkbox to the settings menu to toggle between the small and normal sizes? I honestly don't like the smaller one because it slows me down in selecting the thing to build so it would be helpful to have a transparent yet normal sized build bar.
    LavaSnake, March 8, 2014
    #102
  3. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    I don't know about a checkbox but do you think it will be a good idea to put in a slider bar to change the size of the icons, anywhere between 50% to 100%?
    Corang, March 8, 2014
    #103
  4. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    that idea = EPIC
    LavaSnake, March 8, 2014
    #104
  5. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    If I get a chance this weekend I will look into it
    Corang, March 8, 2014
    #105
  6. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    ok, thanks!
    LavaSnake, March 8, 2014
    #106
  7. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    As I don't completely understand the examples in the Settings manager thread, can you give me a working code bit for a slider?
    Corang, March 9, 2014
    #107
  8. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    this is as far as I got before I got confused:
    Code:
    model.addSetting_Slider("Icon Size", "cBBB_Size", "UI",
    Corang, March 9, 2014
    #108
  9. tatsujb

    tatsujb Post Master General

    Messages:
    12,902
    Likes Received:
    5,385
    tatsujb, March 9, 2014
    #109
  10. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Okay so I think I know what is causing but I have no idea how to fix it and still have my mod work:

    The way BBB works is it appends <link id='cBBCSS' href='' rel='stylesheet' type='text/css'> to the <head> it then takes the value from the settings page and uses that value in an if statment. Depending on what the value is for the if statment it edits the href element in the <link> appended to the <head> to pick from 4 different css documents. I beleive this is where the problem lies because it is not loading the css like the "no blackscreens" mod says to. If you didn't understand anything I just said but you understand javascript here is the main js file:
    Code:
    initialSettingValue("cBBB_Trans", 0);

$('head').append( "<link id='cBBCSS' href='' rel='stylesheet' type='text/css'>" );

var CBB = decode(localStorage.settings).cBBB_Trans;
console.log("cBBB: Loaded, cBBB_Trans = " + CBB);

if (CBB === "Transparency On")
    {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, .7)');
    $("#cBBCSS").prop('href', 'corBetterBuildBar.css')
    }
else if (CBB === "Transparency Off")
    {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, 1)');
    $("#cBBCSS").prop('href', 'corBetterBuildBar.css')
    }
else if (CBB === "Icons Only")
    {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background', 'none');
    $("#cBBCSS").prop('href', 'corBetterBuildBarMini.css')
    }
else if (CBB === "No Borders")
    {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, .7)');
    $("#cBBCSS").prop('href', 'corBetterBuildBarMiniWithBG.css')
    }
else if (CBB === "Trans Borders")
    {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('background-color', 'rgba(13, 13, 13, .7)');
    $("#cBBCSS").prop('href', 'corBetterBuildBarWithTransBorder.css')
    }
    Corang, March 9, 2014
    #110
  11. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    It looks like you are very knowledgeable with respect to js and css, etc. Think you could help me out? (refer to previous post)
    Corang, March 9, 2014
    #111
  12. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Just don't do that. There is a loadCss method that is used by all other mods, that is fixed by no blackscreens.
    If you want to load different CSS based on some if statements do the if statements and call something like loadCSS('coui://ui/mods/yourmoddir/yourcss.css');

    The method loadCSS is by the way defined in PA\media\ui\alpha\shared\js\common.js
    That file is shadowed by no blackscreens.
    cola_colin, March 9, 2014
    #112
  13. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    so instead of
    Code:
    $('head').append( "<link id='cBBCSS' href='' rel='stylesheet' type='text/css'>" );
    and
    Code:
    $("#cBBCSS").prop('href', 'corBetterBuildBar.css')
    I should do
    Code:
    loadCSS('coui://ui/alpha/live_game/corBetterBuildBar.css');
    ?
    Corang, March 9, 2014
    #113
  14. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Yes
    cola_colin, March 9, 2014
    #114
  15. wondible

    wondible Post Master General

    Messages:
    3,315
    Likes Received:
    2,089
    The standard (at least in regular web development) way to do this kind of thing is to load all the styles in one file and change a class on the top level element of interest to select which ones become active.
    wondible, March 9, 2014
    #115
  16. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    So basicly you just need to copy your code from the drop down setting item and use it for the slider. This should help:
    For settings js file:
    Code:
    model.addSetting_Slider("Build bar scale:", "cBBB_Size", "UI", 50, 100, 75, "Better Build Bar");
    This will save a value between 50%-100% and have a default of 75%.

    For main js file:
    Code:
    initialSettingValue("cBBB_Size", 75);
var CBB_Size = decode(localStorage.settings).cBBB_Size;
console.log("CBB_Size= " + CBB_Size);
    LavaSnake, March 9, 2014
    #116
  17. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Okay so I have a problem again, how do I use a variable in a jquery css edit? for some reason this isn't working
    Code:
    var CBB_Size = decode(localStorage.settings).cBBB_Size;
console.log("CBB_Size= " + CBB_Size + "%");

var c_Size_w = CBB_Size * 0.01 * 62;
var c_Size_h = CBB_Size * 0.01 * 56;

(function () {
$(".div_build_item > div").css('height', c_Size_h + 'px').css('width', c_Size_w + 'px');
})();
    Corang, March 9, 2014
    #117
  18. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    Take the px out and it should work.
    LavaSnake, March 10, 2014
    #118
  19. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Figured it out pushing to PAMM now
    Corang, March 10, 2014
    #119
  20. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Update notes:

    - Fixed blackscreen issues
    - requires blackscreenfix
    - icon size adjustable 50% to 100%
    Corang, March 10, 2014
    #120
    LavaSnake likes this.
Page 6 of 11

Share This Page