Forum Academy Marketplace Showcase Pricing Features

[PLUGIN] - StarRating Advanced + Customization

Hi all,

I’ve released an advanced version of a Star Rating control plugin which I’ve rammed with useful calculations, states, actions, events etc that I could think of.

It’s more of a user experience rating control I suppose since you don’t have to display stars. It contains a lot of configurable options which allow you to control things like the number of stars, the ratings, star sizes, precision values, star spacing, colours, max rating values plus more.

It utilises SVG images to render the ratings which make it very quick to use and the images are customizable too, so it’s possible to use your own SVG images if you don’t want to use the standard stars for example.

Here’s an image of some customized ratings…

image

Or you could stick with the standard stars…

PLUGIN
Star Rating Advanced Plugin | Bubble

EDITOR
Paul-testing-4 | Bubble Editor

DEMO
https://paul-testing-4.bubbleapps.io/star_rating


Outlined below are all the options, states, descriptions etc.

ELEMENTS

Star Rating Advanced
This is the visual element dragged onto the page which contains the following field options.

  • Star width
    The width of each star, the width of a star is always equal to its height. Setting this value to 0 allows the star width to be auto calculated to fit the elements length. The elements height will also be adjusted to match the height of the stars.

  • Background fill color
    The background color for the un-rated part of a star.

  • Rated fill color
    The color for the rated part of a star.

  • Multi-color enable
    Enables star multi-color.

  • Start color
    Start star color when multi-color mode is enabled.

  • End color
    End star color when multi-color mode is enabled.

  • Number of stars
    Number of stars to use, to display the rating.

  • Rating
    Star rating, this value can be given in either percentage or number. You can use this to set a default rating when the element is initially displayed.

  • Max rating value
    The maximum value, you want the rating to end with.

  • Precision
    The precision value of the rating.

  • Steps (half/full)
    Rating will be displayed in steps of 0.5 (half) or 1 (full). To disable this, leave the field blank.

  • Spacing
    The amount of space between stars in pixels.

  • Right to Left
    Render the rating Right to Left.

  • Style
    Choose from a pre-set style of stars to display or select the Custom option where you can define your own star below in the Custom field. You can see these styles in the screenshots above.

  • Custom SVG
    Use this to define a custom shape to make up an image to display. The custom shape must be in the form of a SVG string and ideally have an aspect ratio of 1:1 so it displays correctly.
    Scroll down this page to see an example of how you can set your own shapes.


EXPOSED STATES

  • Star width
    Shows the width of each star.

  • Background fill color (hex)
    Shows the background color of the star (hex).

  • Rated fill color (hex)
    Shows the rated color of the star (hex).

  • Multi-color enable
    Shows if multi-color is enabled or not.

  • Start color (hex)
    Shows the start color when multi-color is enabled (hex).

  • End color (hex)
    Shows the end color when multi-color is enabled (hex).

  • Background fill color (rgb)
    Shows the background color of the star (rgb).

  • Rated fill color (rgb)
    Shows the rated color of the star (rgb).

  • Start color (rgb)
    Shows the start color when multi-color is enabled (rgb).

  • End color (rgb)
    Shows the end color when multi-color is enabled (rgb).

  • Number of stars
    Shows the number of stars displayed.

  • Rating max value
    Shows the maximum value for the rating to end with.

  • Rating precision
    Shows the precision of the rating.

  • Rating
    Shows the rating value of the star control.

  • Error
    Shows the last error that occurred.

  • Stars selected
    Shows the number of stars that have been selected.

  • Steps
    Shows the steps as half or full.

  • Spacing
    Shows the amount of space between the stars.

  • Right to Left
    Shows if the rating is rendered from Right to Left.


EVENTS

  • A Star Rating Advanced has errored
    Fired when an error as occurred.

  • A Star Rating Advanced has been set
    Fired when the rating has been set.

If you want more let me know.


ACTIONS

Set star width on a star rating
Changes the width of a star.
-Star width
The width of each star in pixels, the width of a star is always equal to its height. Setting this value to 0 allows the star width to be auto calculated to fit the elements length. The elements height will also be adjusted to match the height of the stars.
-Resize element
When this option is set to Yes, the elements width and height will be adjusted to fit.

Multi-color mode update on a star rating
Enables or disables multi-color mode.
-Enable
Set the value to Yes to enable multi-color mode. Set the value to No to disable it.
-Start color
Sets the Start star color.
-End color
Sets the End star color.

Set star colors on a star rating
Sets the background and rated star colors.
-Background fill color
The background color for the un-rated part of a star.
-Rated fill color
The color for the rated part of a star.

Set number of stars on a star rating
Set the number of stars to show.
-Number of stars
Number of stars to show.

Set max rating value on a star rating
Set the maximum value for the rating to end with.
-Max rating value
The maximum value, you want the rating to end with once the last star is selected.

Set precision of rating on a star rating
Set the precision value of the rating.
-Precision value
The precision value of the rating.

Set rating on a star rating
Set the rating value for the star control.
-Rating value
Star rating, this value can be given in either percentage or number. You can use this to load a default rating value which is set when the control is initially displayed.

Set steps on a star rating
Set the steps as half or full stars.
-Steps (half/full)
Rating will be displayed in steps of 0.5 (half) or 1 (full). To disable this, leave the field blank.

Set spacing on a star rating
Set the amount of space between stars.
-Spacing
The amount of space between stars in pixels.

Right to Left on a star rating
Render the rating Right to Left.
-Right to Left
Render the rating Right to Left.

Change color specific star on a star rating
Experimental action - By default, after the color has been changed on the ‘rated’ part of a star, it will always revert back to it’s original color when hovered again to maintain the rating functionality. However, if you change the color on the ‘un-rated’ part of a star (background fill), it will stay set to that color even when hovered.
-Star number
Enter the star number you want to change the color for. Note: Setting this number to a value higher than the amount of stars you have displayed, will target the first star.
-Star color (rated)
Choose a color for which you want the 'rated' part of a star to change to.
-Star color (un-rated)
Choose a color for which you want the 'un-rated' part of a star to change to.


CUSTOM STYLES

The custom styles section becomes in use when the style dropdown option has been set “Custom”.

image

The Custom SVG text field should contain an SVG string. For example, you could enter the value below which would generate a box with a tick inside it.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm11 17l-5-5.299 1.399-1.43 3.574 3.736 6.572-7.007 1.455 1.403-8 8.597z"/></svg>

image

The shapes in this website (https://iconmonstr.com/) fit well with this plugin. You should choose shapes that ideally have an aspect ratio of 1:1 so it displays correctly. Once you’ve found a shape, agree to the license and then click the <Embed.> button which gives you the code to paste straight into the Custom SVG field.

Hope you enjoy!
Paul

7 Likes

Nice resource! @pork1977gm

1 Like

Thanks!

@pork1977gm
Hi Paul,
Can you explain to me better how this plugin sources data? I’ve looked at your doc and test editor and see that in the test you have a somewhat unconventional setup with 7 groups in the in the same cell of the repeating group. I have the StarRating in a group within a repeating group. The repeating group’s type is an object in the database, and the group which houses the StarRating has a type of the object’s Rating, which is a number between 0 and 5. I cannot get the stars to display anything besides the default “rating” on the plugin.

Hi @taylar.ngo

So yes, that example of the different stars within that repeating group is a little strange!
What I did there was to put 7 star elements all into the 1 cell and make each one not visible to start with. Each element then has a condition on it to say only become visible when the current cell’s number is 1,2,3,4,5,6 or 7. The RG’s data source is a list of numbers but I could have probably done the same thing with the current cell’s index instead.

I did it like that just to give an example of the star rating element working within a repeating group.
Could you put up a few screenshots of how you have it configured? or perhaps I could take a look at how you have it setup through your editor? that would be best so I can see it.

I’ll fix it then.

Hello! Loving this plugin. However, is there anyway to lock the StarRating as a “display only” rating? There are instances in which I will set the rating and others where I just want to display the rating. Is there any option for this? @pork1977gm

Hi @gbenchanoch thank you! I shall take a look or you, I think I added in an option somewhere to make it read only, I assume that’s what you what you mean right? So the value can’t be changed. If not I can always add that or you could just put a non-clickable transparent shape over it. I’ll check it anyway.

1 Like

Thanks! I couldn’t find that option anywhere but if it exists that would be awesome. I try to avoid adding extra shapes as described.

No probs!
Update and you should now see this…

image

It disables all mouse events on the element.

Amazing thank you!

Your welcome, let us know if there’s anything else.

Hi! It seems that the star rating element is defaulting to a very tall element. I’m not sure why it’s doing this. Any thoughts?

This is the element in the UI builder:

This is the output:

EDIT:
Dang, I completely missed the setting for star width. As you can see, my stars are all different. To accomplish this, I am using “1 star” as an SVG with a max score of 10. This allows me to treat this one star as 5 stars with 1/2 step increments. However, it seems that the width of this “1 star” is automatically changing the height to match it. Is it possible to over-ride that setting? Sorry for all these requests but I appreciate the work you’ve done!

That’s ok. Can you show me the element settings you have and I will set it up the same and figure it out

I am setting the entire SVG as one star and splitting it into 10 pieces (Max rating value is 10). This give the illusion of half stars.

I then save it as rating/2 to get a max of 5 stars and when I display it back, I display rating *2.
This issue with this is that the starrating element automatically sets the height the height of “1 star” and since all 5 of my stars are this 1 star, it sets the height to the width of my element.

Let me know if this makes sense.

Ok I think I see what you’re doing here, the easiest option is for me to add another option in which allows you to specify whether you want the auto height/width to happen. Out of curiosity, what have you got the star width option set to? Having that set to 0 will make it auto calculate the height and width of the element but if you set it to something like 40, you may find that will fix your issue. Let me know anyway.

I had it set to 0 and I tried 40 but it just made the stars tiny. Thanks again for your help!

Ok, give us a bit and I’ll get back to you once I’ve added in the option. Sorry for the delay, been busy working on something else which I have to get finished first.

No rush! I appreciate you making these customizations!

Hey @gbenchanoch
Would you mind sending me over the custom SVG you have? I’ve added the option to disable the automatic height calculation but I just wanted to see how your SVG displays before I push the update. Make sure all is good.

Ok, do you want to try it now. You’ll see this option below to disable the automatic height setting of the element, I’m hoping it will fix it.

1 Like