Staff Badge Generator (Improved)

Status
Not open for further replies.

sumo

The end is nigh.
Jan 18, 2014
143
102
A couple weeks ago, I created a staff badge generator and intended to release it on a host, but there were complications. So, today I'm simply releasing the source code, and people like @wslgh and @Syntus have offered to host it. Here's your chance!

The source code can be found in the attached files.

You must be registered for see images attach

You must be registered for see images attach

You must be registered for see images attach

Step 1: You simply add an empty template to the bg_img folder
You must be registered for see images attach

An empty template should look like this:
You must be registered for see images attach


Step 2: Define the new template in the CSS folder, which is located at public/css/app.css.
You must be registered for see images attach

The .okay parent class is so that javaScript knows what to capture. Your new badge type must be a child of this class. The top and left attributes are simply the alignment of the custom text on the badge. If a badge is a different size, you will need to reconfigure this. It's only trial and error, nothing difficult.

Step 3: Making the new type selectable
You'd head on over to index.php and scroll down until you reach the canvas. You are looking for this piece of code:
You must be registered for see images attach

If you are adding a new badge template, you must copy and paste one of those, then edit it to your new badge type name.

Step 4: Whilst still in index.php, you'll scroll down until you reach this section:
You must be registered for see images attach

Here, you will simply add a new option for each new template.

Go to the index.php source code, and find this line:
You must be registered for see images attach

And change it to
Code:
<input pattern="[A-Za-z]{5}" onkeyup="this.value = this.value.toUpperCase();" required title="Must be 5 letters." id="textbox" type="text" name="name" placeholder="Habbo"/>
This will force all text to become uppercase before the user hits preview, avoiding this issue.

(Note to any hosters: I just noticed that there's a typo on the generator. "usuable" should, of course, be "usable". I typed that up within 5 seconds and didn't check for speed errors.)
(Note to any hosters: you may want to periodically empty out the output folder or create a better system for how badges are generated)

Once again, feel free to edit and host this as you wish. There are many ways that this tool can be improved.
 

Attachments

  • staff_badge_generator_v2.zip
    357.1 KB · Views: 723
Last edited:

Hypothesis

Programmer
Jan 6, 2019
524
361
Great release, i'm sure a lot of people will find this useful! Personally, creating a staff badge takes max like 5 minutes, but understandable, people these days are lazy.
 

Platinum

Hello!
Sep 2, 2012
295
281
Amazing release, greatly appreciate that you decided to share it rather than keeping it for yourself. Good job! :up:
 

sumo

The end is nigh.
Jan 18, 2014
143
102
Cheers for the release, I'll make sure to host this
No problem! It definitely needs more templates as well, I’ve made the explanation pretty thorough on how to add them if you have any badges you wanna add.
 

Moron

wes#5860
Mar 25, 2014
61
36
you can find this hosted. I will be buying a domain shortly and moving everything over. Letter A, B and O aren't working for some reason - I'll have that fixed shortly.

For those of you who want to know the current link, it's: - not the best, I'm aware, but I'll have that updated by end of play tonight on a proper domain.
 

sumo

The end is nigh.
Jan 18, 2014
143
102
you can find this hosted. I will be buying a domain shortly and moving everything over. Letter A, B and O aren't working for some reason - I'll have that fixed shortly.

For those of you who want to know the current link, it's: - not the best, I'm aware, but I'll have that updated by end of play tonight on a proper domain.
The reason why letters aren't working is because of the file name. If the file name is "A.png" and you type "Habbo" into the text box, it's not working, only "H" will show up. But if you type "HABBO" it works. This wasn't an issue for me on localhost, so I'm not really sure what's going on.

A quick (yet improper) fix you could use until you find out what's actually wrong is simply copy/pasting each file but making it lower-cased in the new variant.

Problem could also be the host you're using.
 

Moron

wes#5860
Mar 25, 2014
61
36
The reason why letters aren't working is because of the file name. If the file name is "A.png" and you type "Habbo" into the text box, it's not working, only "H" will show up. But if you type "HABBO" it works. This wasn't an issue for me on localhost, so I'm not really sure what's going on.

A quick (yet improper) fix you could use until you find out what's actually wrong is simply copy/pasting each file but making it lower-cased in the new variant.

Problem could also be the host you're using.

It's weird - it's only the letter A, B and O.
Post automatically merged:

@sumo - I felt your work deserved a proper domain.

I've uploaded now to - but now looking at it I can't get the word cabbage out of my head.

I'm thinking of including habbo imagers and more.
 

sumo

The end is nigh.
Jan 18, 2014
143
102
It's weird - it's only the letter A, B and O.
Post automatically merged:

@sumo - I felt your work deserved a proper domain.

I've uploaded now to - but now looking at it I can't get the word cabbage out of my head.

I'm thinking of including habbo imagers and more.
It's happening for all lowercase letters for me on that domain, but not on localhost.
 

sumo

The end is nigh.
Jan 18, 2014
143
102
It's weird - it's only the letter A, B and O.
Post automatically merged:

@sumo - I felt your work deserved a proper domain.

I've uploaded now to - but now looking at it I can't get the word cabbage out of my head.

I'm thinking of including habbo imagers and more.
I've found a better/more permanent fix.
Go to the index.php source code, and find this line:
You must be registered for see images attach

And change it to
Code:
<input pattern="[A-Za-z]{5}" onkeyup="this.value = this.value.toUpperCase();" required title="Must be 5 letters." id="textbox" type="text" name="name" placeholder="Habbo"/>
This will force all text to become uppercase before the user hits preview, avoiding this issue.
 

Killuaryuk

New Member
Nov 11, 2015
13
7
Thanks guys, it's awesome! This FIX save me. Thanks sumo
I've found a better/more permanent fix.
Go to the index.php source code, and find this line:
You must be registered for see images attach

And change it to
Code:
<input pattern="[A-Za-z]{5}" onkeyup="this.value = this.value.toUpperCase();" required title="Must be 5 letters." id="textbox" type="text" name="name" placeholder="Habbo"/>
This will force all text to become uppercase before the user hits preview, avoiding this issue.
 

Elephantastic

New Member
Aug 22, 2019
10
4
Typically I found this AFTER making my own badge! Haha
This is really good, I think many will find it super useful. :)
 
Status
Not open for further replies.

Users who are viewing this thread

Top