Results 1 to 9 of 9
  1. #1
    Administrator HigH_HawK's Avatar
    Join Date
    2006-03-15
    Location
    UK / GER
    Posts
    1,375

    Idee bf1stats.com Graphics coding

    A place to post your questions and your code snippets for the graphics coding for bf1stats.com

  2. #2
    Administrator HigH_HawK's Avatar
    Join Date
    2006-03-15
    Location
    UK / GER
    Posts
    1,375

    Re: bf1stats.com Graphics coding

    I'll begin with some stuff I've got in my signature:

    /** Favkit **/
    Code:
    // Fav. kit
    var score2kit = {
        Assault: pd.kits[0].stat.score,
        Medic: pd.kits[1].stat.score,
        Support: pd.kits[2].stat.score,
        Scout: pd.kits[3].stat.score,
        Pilot: pd.kits[4].stat.score,
        Tanker: pd.kits[5].stat.score,
        Cavalry: pd.kits[6].stat.score,
        Elite: pd.kits[7].stat.score
    };
      
      
    var favkit = 'Assault';
    var favkitscore = 0;
    for (var kit in score2kit) {
        if (score2kit[kit] <= favkitscore) continue;
        favkitscore = score2kit[kit];
        favkit = kit;
    }
    
    /* Text output of the Favkit */
    // xxx and yyy has to amended to fit into the right place in your signature
    // and must be numeric (only numbers/digits)
    text({x:xxx, y:yyy, text:favkit});
    
    /* In case you want to add kit image */
    // In this example I've got a wide image with all the kit icons and an empty space
    // in case the kit cannot be read for some reason
    // So I define two more variables kit_sx and kit_sy (kit_sx for wide and kit_sy for high images) 
    
    var kit_sx = 0;
    var kit_sy = 0;
    
    if (favkit == 'Assault') { kit_sx = 0; kit_sy = 0; }
    else if (favkit == 'Medic') { kit_sx = 17; kit_sy = 0; }
    else if (favkit == 'Support') { kit_sx = 34; kit_sy = 0; }
    else if (favkit == 'Scout') { kit_sx = 51; kit_sy = 0; }
    else if (favkit == 'Pilot') { kit_sx = 68; kit_sy = 0; }
    else if (favkit == 'Tanker') { kit_sx = 85; kit_sy = 0; }
    else if (favkit == 'Cavalry') { kit_sx = 102; kit_sy = 0; }
    else if (favkit == 'Elite') { kit_sx = 119; kit_sy = 0; }
    else { kit_sx = 136; kit_sy = 0; }
    
    /* Image output of the favkit */
    // xxx and yyy has to amended to fit into the right place in your signature
    // and must be numeric (only numbers/digits)
    image({file:'path_to_kits_image', x:xxx, y:yyy, w:17, h:17, sx:kit_sx, sy:kit_sy, sw:17, sh:17});
    This is the image I'm using for the favkit:

    Click image for larger version

Name:	bf1kits_small.png
Views:	46
Size:	8.8 KB
ID:	22695
    Last edited by HigH_HawK; 2018-02-20 at 17:43.

  3. #3
    Administrator HigH_HawK's Avatar
    Join Date
    2006-03-15
    Location
    UK / GER
    Posts
    1,375

    Re: bf1stats.com Graphics coding

    /** Platform **/
    Code:
    // Platform (PC,360,PS3,XONE,PS4)
    // BF1 only available on PC,XONE,PS4
    var platform=pd.player.plat;
    var platLabels={
      pc:'PC',
      xone:'XBOX ONE',
      ps4:'Playstation 4'
    };
    
    /* Text output of Platform */
    // Since platform only shows the shortcut of the platform
    // we convert it to the regular output
    // xxx and yyy has to be amended to fit into the right place in your signature
    // and must be numeric (only numbers/digits)
    text({x:xxx, y:yyy, text:platLabels[platform]});
    
    /* In case you want to add platform image */
    // In this example I've got a high image with all the platform icons and an empty space
    // in case the platform cannot be read for some reason
    // So I define two more variables plat_sx and plat_sy (plat_sx for wide and plat_sy for high images)
      
    var plat_sx = 0;
    var plat_sy = 0;
      
    if (platform == 'pc') { plat_sx = 0; plat_sy = 0; }
    else if (platform == 'xone') { plat_sx = 0; plat_sy = 36; }
    else if (platform == 'ps4') { plat_sx = 0; plat_sy = 48; }
    else { plat_sx = 0; plat_sy = 60; }
    
    /* Image output of the platform */
    // xxx and yyy has to be amended to fit into the right place in your signature
    // and must be numeric (only numbers/digits)
    image({file:'path_to_platform_image', x:xxx, y:yyy, w:40, h:12, sx:plat_sx, sy:plat_sy, sw:40, sh:12});
    These are the images I'm using (taken from 1ApRiL's website):

    Black:
    Name:  platform_icons_black.png
Views: 391
Size:  20.2 KB

    White:
    Name:  platform_icons_white.png
Views: 389
Size:  20.2 KB
    Last edited by HigH_HawK; 2018-02-21 at 22:18.

  4. #4
    New User
    Join Date
    2017-10-09
    Location
    Sydney
    Posts
    25

    Re: BATTLEFIELD 1 Announcement

    I to have been trying to work on a circular progress bar and for the life of I cannot get it going I have gone through every page of p-stats that show the progress bar with no luck and editable banners to view.

    Can anyone help out with that code? Circular progress bar.


    Thank you in advance.

  5. #5
    Administrator 1ApRiL's Avatar
    Join Date
    2011-02-12
    Location
    Waiblingen, Germany
    Posts
    1,524
    BFBC2 PC
    1ApRiL
    NFS World
    1APRIL
    BF2
    1ApRiL
    BF3 PC
    1ApRiL

    Re: bf1stats.com Graphics coding

    There is currently no way to draw arcs. http://bf1stats.com/docs/DHFGRS_docs.txt
    You can only try to create images and insert them with a rotation. One image with a complete ring and another with the ring only representing 5% or so. And then insert and rotate the partly ring as often as needed to show the desired percentage.
    Admin of bfhstats.com / bf4stats.com / bf3stats.com | Twitter

  6. #6
    New User
    Join Date
    2017-10-09
    Location
    Sydney
    Posts
    25

    Re: bf1stats.com Graphics coding

    Hi ApRiL,

    Thank you for your reply, and I have gone through that text file inside out.

    However, I think only one person has been able to do this & this is why I cannot make it happen.

    http://g.bf1stats.com/O4HEekZF/pc/ak_trickedyou.png

    http://g.bf1stats.com/O4HEekZF/pc/AK_Stealthy_A.png

    As you can see the this appears to be working unless I'm missing something.
    Last edited by SYD_Stealthy; 2018-02-25 at 08:36.

  7. #7
    Administrator 1ApRiL's Avatar
    Join Date
    2011-02-12
    Location
    Waiblingen, Germany
    Posts
    1,524
    BFBC2 PC
    1ApRiL
    NFS World
    1APRIL
    BF2
    1ApRiL
    BF3 PC
    1ApRiL

    Re: bf1stats.com Graphics coding

    The creator of that graphic, created a large png file that contains about 30 rings with different progress.
    In the graphics code just the ring of the png is inserted, that shows the correct amount of progress.
    Admin of bfhstats.com / bf4stats.com / bf3stats.com | Twitter

  8. #8
    Administrator HigH_HawK's Avatar
    Join Date
    2006-03-15
    Location
    UK / GER
    Posts
    1,375

    Re: bf1stats.com Graphics coding

    I just sat down and created something little, regarding the circle progress bar. It's a very simple design and some simple coding, which could be amended with the required photoshop and coding skills.

    Code:
    // Define all required variables
    var vRelProg;
    var progText;
    var rankNr = pd.player.rank.nr;
    var rankNext = pd.player.rank.next;
    
    var prog_sx = 0;
    var prog_sy = 0;
    
    // Check Rank number and Rank next before contiuning
    if ( rankNr == 140 || rankNext == null ){
    	vRelProg = 0;
    }else{
    	vRelProg = pd.player.rank.next.relProg;
    }
    
    // Create the sx and sy axes to show the right image at the right time
    if (vRelProg == 100){ prog_sx = 273; prog_sy = 182; } // 100%
    else if(vRelProg >= 90 && vRelProg < 100){ prog_sx = 182; prog_sy = 182; } // 90%
    else if(vRelProg >= 80 && vRelProg < 90){ prog_sx = 91; prog_sy = 182; } // 80%
    else if(vRelProg >= 70 && vRelProg < 80){ prog_sx = 0; prog_sy = 182; } // 70%
    else if(vRelProg >= 60 && vRelProg < 70){ prog_sx = 273; prog_sy = 91; } // 60%
    else if(vRelProg >= 50 && vRelProg < 60){ prog_sx = 182; prog_sy = 91; } // 50%
    else if(vRelProg >= 40 && vRelProg < 50){ prog_sx = 91; prog_sy = 91; } // 40%
    else if(vRelProg >= 30 && vRelProg < 40){ prog_sx = 0; prog_sy = 91; } // 30%
    else if(vRelProg >= 20 && vRelProg < 30){ prog_sx = 273; prog_sy = 0; } // 20%
    else if(vRelProg >= 10 && vRelProg < 20){ prog_sx = 182; prog_sy = 0; } // 10%
    else if(vRelProg >= 0 && vRelProg < 10){ prog_sx = 91; prog_sy = 0; } // 0%
    else{ prog_sx = 0; prog_sy = 0; }
    
    // If you want a relProg text output without the decimal
    // uncomment the following line
    //vRelProg = vRelProg.toFixed(0);
    
    // In case we want to add the vRelProg as text
    if (vRelProg == 0) {prog_text='';} else {prog_text=vRelProg+'%';}
      
    // Image output of the circle progress bar
    // only the x and y axis should be changed if the provided image is being used
    image({x:0, y:0, file:'0orkNp8D80j4W9C9tT/circle_progressbar_out.png', w:91, h:91, sw:91, sh:91, sx:prog_sx, sy:prog_sy});
    
    // Text output of vRelProg
    // x and y axis can be changed as you like
    text({x:30, y:75, text:prog_text, color:'000000', size:12});
    Here is the image I created:
    Click image for larger version

Name:	circle_progressbar_out.png
Views:	46
Size:	28.0 KB
ID:	22698
    Last edited by HigH_HawK; 2018-03-01 at 20:20. Reason: Added vRelProg.toFixed(0) for text output

  9. #9
    New User
    Join Date
    2017-10-09
    Location
    Sydney
    Posts
    25

    Re: bf1stats.com Graphics coding

    wow Thank you 1ApRiL,
    Bloody awesome High_hawk,

    Thank you, I will look into this coding & also making some images for that code.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
P-STATS NETWORK FORUM LOGIN CREATE ACCOUNT