How To Use The Selection box while creating a plugin?

[Former Member]

I'm trying out some plugin creations and am stumped on how to use the selection box.

Let's say I added a selection box to my plugin.
For the "selection title" I name it "premade image", making the variable "premade_image".
I choose "Selection Box" for the "Option Type". Multiple Answers: No.
For the "Description": "If you would like to use one of the premade images, select which one you would like to use".
Name 1: White Lettering
Name 2: Black Lettering

The value of name 1 and name 2 I'm not sure of.
My guess is that is where the URL's to the premade images would go?

And then, how do I execute a code for this function?

Would I use an {if} statement?

Something like
var pm_image = proboards.plugin.get('plug_in_name').settings.premade_image;
if(pm_image.option[0].selected) {
execute code
}

I dunno! Maybe something like that??

How do I call on the selection box and check which selection has been made, and then execute a code based on which selection is made??

Thanks in advance for any help!

[Chris]

The Selection Box allows the user to select from a list of premade options as you've said but the format in which it returns data depends on whether you have it set to select multiple options or only one option at a time.



In the single answer mode it gives you the value of whatever was chosen. So if the user chose option2 then proboards.plugin.get('plug_in_name').settings.premade_image would return a string with the value of "answer2". If you however set multiple to yes then the user can select more than one answer so the values are returned in an array (e.g. ["answer1", "answer2"]). If the user selects no answer then the variable would be undefined or an empty string in single answer mode or an empty array in multiple answer mode. Keep this in mind since an empty array wouldn't evaluate to a boolean false like undefined or an empty string would.

Since you are however looking to get the user to select an image, "answer1" should actually be an URL to an image (e.g. "http://my.server.sux/sodontuseit.png") that you added as the value for that option when you created it. When your code gets back the url then you can do whatever it is you intended to do with that url. The presence of a value means something was chosen, the absence of one (is empty string, empty array or undefined) means nothing was chosen

A better control made specifically for selecting images however is the image select. It is pretty much the same as the all-purpose select but it shows the user the images from which to select thus giving a better and more accurate user experience. To use it go to the image tab of the plugin you are creating and upload (or link) to some images. Once that is done go back to your user interface tab and add the image selector then configure it by clicking the add more link and choosing which images from the image tab should be shown to the user

[Former Member]

Sept 19, 2014 15:01:41 GMT -8 Chris said:

A better control made specifically for selecting images however is the image select. It is pretty much the same as the all-purpose select but it shows the user the images from which to select thus giving a better and more accurate user experience. To use it go to the image tab of the plugin you are creating and upload (or link) to some images. Once that is done go back to your user interface tab and add the image selector then configure it by clicking the add more link and choosing which images from the image tab should be shown to the user

Thanks Chris!
So if I want to execute a code when a selection is made, how would I do it?



In this example below, I want to add the image that the user selects to the first td cell of the table. (id='q_image') .



<table><tr><td><img id='q_image'></td><tr></table>
       
   
This is what I have so far for the javascript part:
Obviously, the name of the plug in is "Question of the day".

<script>
   var img = proboards.plugin.get('question_of_the_day').settings.premade_images
       document.getElementById("q_image").src = img;  
</script>

Using the javascript code above doesn't work.

I know it's close to correct, but I'm missing something here.
What is it?

[Chris]

The code looks correct but what you posted sheds no light on the data behind the plugin, an url to the forum where that plugin is currently enabled would allow examination of that data. It could be (just an example since I haven't been shown anything regarding data) that you've set "default values" for the plugin in build mode expecting it to be reflected in settings which it won't until you export then re-import that plugin (that one catches me multiple times). If you want immediate settings change then you would need to exist build mode and use the plugin in the normal manner so you can save the settings you've chosen to the proboards server (default settings get saved directly to the PBP file not the server).

[Former Member]

Test Site

The plugin is called "Question of the week".

[Chris]

Try this


var img = proboards.plugin.get('question_of_the_day').settings.premade_images
document.getElementById("q_image").src = proboards.plugin.get('question_of_the_day').images[img[0]]


For some reason I was recalling it returning the URL of the image but it instead returns the image identifier so that extra step of then fetching the image url using the identifier is needed

SPOILER: Click to show

{
 "settings": {
   "question_url": "http://modkillahla.proboards.com/thread/28/eminem-rap-god",
   "question": "Is Eminem really \"Rap God\"?",
   "link_text": "",
   "custom_image": "",
   "premade_images": [
     "questionoftheweekblack"
   ]
 },
 "images": {
   "questionoftheweekwhite": "http://storage.proboards.com/3205167/i/87olSfN6Etj5TRGOSYkb.png",
   "questionoftheweekblack": "http://storage.proboards.com/3205167/i/igbXGTxVeL3DlIDknyTJ.png"
 }
}

[Former Member]

Sept 19, 2014 18:11:03 GMT -8 Chris said:

Try this


var img = proboards.plugin.get('question_of_the_day').settings.premade_images
document.getElementById("q_image").src = proboards.plugin.get('question_of_the_day').images[img[0]]


For some reason I was recalling it returning the URL of the image but it instead returns the image identifier so that extra step of then fetching the image url using the identifier is needed

SPOILER: Click to show

{
 "settings": {
   "question_url": "http://modkillahla.proboards.com/thread/28/eminem-rap-god",
   "question": "Is Eminem really \"Rap God\"?",
   "link_text": "",
   "custom_image": "",
   "premade_images": [
     "questionoftheweekblack"
   ]
 },
 "images": {
   "questionoftheweekwhite": "http://storage.proboards.com/3205167/i/87olSfN6Etj5TRGOSYkb.png",
   "questionoftheweekblack": "http://storage.proboards.com/3205167/i/igbXGTxVeL3DlIDknyTJ.png"
 }
}

Hey I appreciate that man!
I couldn't get it to work at first because it had question of the "day" for the path, when the path is actually question of the "week".
Lol, but I can see why ya made that mistake, because it seems like it should be called the question of the "day". I think I may even make some premade question of the "day" images also and rename the plugin something else that's more appropriate for both question of the day/week. Any suggestions?

But I don't like to just say "Cool, it works!" and move on without understanding.

So let me see if I understand what it happening here because I feel a bit confused. ... or unaware ...


var img = proboards.plugin.get('question_of_the_day').settings.premade_images
document.getElementById("q_image").src = proboards.plugin.get('question_of_the_day').images[img[0]]
To my understanding, this statement is commanding the browser to go to the plugins image page and pull the images.
And then go to the settings page and find the selection box "premade images", and see which one is selected.
Then enter that selected images url into the src of the element "q_image"

Now I personally don't feel like I am exactly right because I don't think you can command the browser to go to 2 different places in the same statement. (In this case; to the images page and then back to the settings page.)

I'm really not sure what is happening, but I feel like it is crucial that I understand this.
If you can find the patience, I would be highly appreciative if you could explain the above statements command.
Thanks.

[Former Member]

Sept 19, 2014 17:04:08 GMT -8 Chris said:

The code looks correct but what you posted sheds no light on the data behind the plugin, an url to the forum where that plugin is currently enabled would allow examination of that data. It could be (just an example since I haven't been shown anything regarding data) that you've set "default values" for the plugin in build mode expecting it to be reflected in settings which it won't until you export then re-import that plugin (that one catches me multiple times). If you want immediate settings change then you would need to exist

I'm trying to sink all of this in. Is this supposed to be "exit"?

[Chris]

Sept 19, 2014 23:45:22 GMT -8 game said:

Sept 19, 2014 18:11:03 GMT -8 Chris said:

Try this


var img = proboards.plugin.get('question_of_the_day').settings.premade_images
document.getElementById("q_image").src = proboards.plugin.get('question_of_the_day').images[img[0]]


For some reason I was recalling it returning the URL of the image but it instead returns the image identifier so that extra step of then fetching the image url using the identifier is needed

SPOILER: Click to show

{
 "settings": {
   "question_url": "http://modkillahla.proboards.com/thread/28/eminem-rap-god",
   "question": "Is Eminem really \"Rap God\"?",
   "link_text": "",
   "custom_image": "",
   "premade_images": [
     "questionoftheweekblack"
   ]
 },
 "images": {
   "questionoftheweekwhite": "http://storage.proboards.com/3205167/i/87olSfN6Etj5TRGOSYkb.png",
   "questionoftheweekblack": "http://storage.proboards.com/3205167/i/igbXGTxVeL3DlIDknyTJ.png"
 }
}

Hey I appreciate that man!
I couldn't get it to work at first because it had question of the "day" for the path, when the path is actually question of the "week".
Lol, but I can see why ya made that mistake, because it seems like it should be called the question of the "day". I think I may even make some premade question of the "day" images also and rename the plugin something else that's more appropriate for both question of the day/week. Any suggestions?

But I don't like to just say "Cool, it works!" and move on without understanding.

So let me see if I understand what it happening here because I feel a bit confused. ... or unaware ...


var img = proboards.plugin.get('question_of_the_day').settings.premade_images
document.getElementById("q_image").src = proboards.plugin.get('question_of_the_day').images[img[0]]
To my understanding, this statement is commanding the browser to go to the plugins image page and pull the images.
And then go to the settings page and find the selection box "premade images", and see which one is selected.
Then enter that selected images url into the src of the element "q_image"

Now I personally don't feel like I am exactly right because I don't think you can command the browser to go to 2 different places in the same statement. (In this case; to the images page and then back to the settings page.)

I'm really not sure what is happening, but I feel like it is crucial that I understand this.
If you can find the patience, I would be highly appreciative if you could explain the above statements command.
Thanks.

If you look at the spoiler you'll see I  posted the data that the plugin had associated with it at the time I  glanced at the forum just for reference. Examine that data and it should become clear what is happening.

{
 "settings": {
   "question_url": "http://modkillahla.proboards.com/thread/28/eminem-rap-god",
   "question": "Is Eminem really \"Rap God\"?",
   "link_text": "",
   "custom_image": "",
   "premade_images": [
     "questionoftheweekblack"
   ]
 },
 "images": {
   "questionoftheweekwhite": "http://storage.proboards.com/3205167/i/87olSfN6Etj5TRGOSYkb.png",
   "questionoftheweekblack": "http://storage.proboards.com/3205167/i/igbXGTxVeL3DlIDknyTJ.png"
 }
}

Under "settings" you find "premade_images" and whatever was chosen for that setting, in this case "questionoftheweekblack". The fact that "questionoftheweekblack" is inside an array tells me that the image control was set to accept multiple answers, if it was in single answer mode then it would simply be a string (i.e. "premade_images": "questionoftheweekblack" if it was single answer mode instead of "premade_images": ["questionoftheweekblack"]).

Now look a bit further down and you'll see "images" which contains the two images you added to the image tab. Each image has an ID associated with it ("questionoftheweekwhite" and "questionoftheweekblack") so take whatever was selected in "premade_images" and plug that into "images" and voila you've narrowed it down to a single, complete url that can then be used as the src for an image. You're telling the browser since "images" has more than one url I want the one with the ID of "questionoftheweekblack" and you get back "storage.proboards.com/3205167/i/igbXGTxVeL3DlIDknyTJ.png" as the response.

Sept 19, 2014 23:51:05 GMT -8 game said:

Sept 19, 2014 17:04:08 GMT -8 Chris said:

The code looks correct but what you posted sheds no light on the data behind the plugin, an url to the forum where that plugin is currently enabled would allow examination of that data. It could be (just an example since I haven't been shown anything regarding data) that you've set "default values" for the plugin in build mode expecting it to be reflected in settings which it won't until you export then re-import that plugin (that one catches me multiple times). If you want immediate settings change then you would need to exist

I'm trying to sink all of this in. Is this supposed to be "exit"?

That was a typoopoo, should be "exit build mode"

[Former Member]

Hmm, okay, surprisingly I understand almost completely.
Thanks.
But, how did you pull that data that you have in the spoiler?

[Chris]

JSON.stringify(proboards.plugin.get('question_of_the_week'),null,2)

[Former Member]

Sept 20, 2014 1:08:40 GMT -8 Chris said:

JSON.stringify(proboards.plugin.get('question_of_the_week'),null,2)

That's good stuff!
I think I may be using that a lot ...
What's the 2 for?

[Chris]

Sept 20, 2014 1:17:48 GMT -8 game said:

Sept 20, 2014 1:08:40 GMT -8 Chris said:

JSON.stringify(proboards.plugin.get('question_of_the_week'),null,2)

That's good stuff!
I think I may be using that a lot ...
What's the 2 for?

JSON.stringify

[Former Member]

Sept 19, 2014 23:45:22 GMT -8 game said:

Sept 19, 2014 18:11:03 GMT -8 Chris said:

Try this


var img = proboards.plugin.get('question_of_the_day').settings.premade_images
document.getElementById("q_image").src = proboards.plugin.get('question_of_the_day').images[img[0]]


For some reason I was recalling it returning the URL of the image but it instead returns the image identifier so that extra step of then fetching the image url using the identifier is needed

SPOILER: Click to show

{
 "settings": {
   "question_url": "http://modkillahla.proboards.com/thread/28/eminem-rap-god",
   "question": "Is Eminem really \"Rap God\"?",
   "link_text": "",
   "custom_image": "",
   "premade_images": [
     "questionoftheweekblack"
   ]
 },
 "images": {
   "questionoftheweekwhite": "http://storage.proboards.com/3205167/i/87olSfN6Etj5TRGOSYkb.png",
   "questionoftheweekblack": "http://storage.proboards.com/3205167/i/igbXGTxVeL3DlIDknyTJ.png"
 }
}

Hey I appreciate that man!
I couldn't get it to work at first because it had question of the "day" for the path, when the path is actually question of the "week".

I was just reading through this and noticed that this was actually my mistake. I changed the name of the plugin once throughout the course of this conversation. My apoplogies.