Hello all,
Thanks for the Opacity feature. Great idea.
What I would like even more is to be able to set that opacity based on conditions and set the opacity level (0 to 100) using dynamic data.
Here’s an example:
In my golf App, I record where the user hits is Drives accuracy for each golf hole (5 possible values: Too Strong, Too Short, On Target, Right or Left).
When the user plays a same golf course regularly, this data is averaged for each hole., rendenring a number between 0 and 100 for each possible values as listed above.
Then, when the golfer plays a game, I show a graphic like this one below:
The five dark purple squares (shapes) are for the five possible values.
I would like to change the opacity of each square based on a dynamically calculated value.
So, if my calculated values would be for example: Too Strong=10, Right=60, Too Short = 0, Left = 20 and On target = 10, I would have the resulting graphic like the one below:
You can’t insert the opacity dynamically. Instead you insert one shape with 5 conditionals and change the opacity for each. Then you change this shape to a reusable element and copy and paste the shape in the five spots you need.
Thanks @ezduriez
That is not what I would like to do.
See, the value of the opacity is calculated on every golf hole the player has played.
I do this for my calculation:
Count the number of holes where the Direction of a Drive Hit is Too Strong.
Divive that value by the number of recorded number of times this golf hole has been played.
For example: I have played that save golf hole, at the same golf course 10 times.
I have hit too Strong 3 times on that hole. That gives me .3 (or 30 %).
Then, dynamically, I would like to set the Opacity for the Shape I called TooStrong to 30%.
I Luke’s solution, but something that just popped into my head, would you be able to just set the opacity on the colour, if all you have is a coloured square you could just do dynamic colour hex value, and you don’t have to do any CSS override.
hex takes opacity value #000000 = black. #00000050 = black at 50%
So you could have an option that is your colour, then do append… and do whatever you want on that to have it dynamically change your opacity value based on some calculation you’re doing for the hole thingy.
Using a dynamic HEX code can work very similarly, the issue with this method is that its probably not quite as clean. For instance, it means managing the HEX codes which are not always easy to gauge the color palette or tone. Where as with the opacity, we know that its color/background is already set on the element whether its via a style, dynamic or static custom style.
Good point though and a nice alternative method. As usual with Bubble, one way to do many things…
It was just something that popped into my head, so you’re most likely right that it’s not an optimal idea. I just saw the white background in the example above, so figured hex opacity vs. the CSS opacity attribute wouldn’t be much of an issue in this case.
You wouldn’t have to manage the hex code at all I reckon. If you have an option set with your hex value, which is probably preferred anyway if you’re not using the new fancy style tab (which is pretty bad), then you do “option_set’s_hex_value:append:calculated_value”. so you only have one hex value stored as an option set, and when you update that in your option set, it will magically work, making it very easy to work with.
HOWEVER, you’ll still have a difference in opacity between bubble element opacity and hex opacity, but on white… it’s a meh
You can create a database for the opacity codes. Insert this data code from 0% til 100% by hand just once with the corresponding opacity code listed in the link below. Add an average field for the user.
Hmm, should be functional for any branch, whether its test or live. Have you got the !important at the end of each property, so that it can override the default set by Bubble? Might be worth trying rather than on an HTML element level, but rather the page level, though this depends if you are using a reusable element to handle.
If not post back here the setup or PM the app I’m happy to double-check your setup.
Thanks @luke2
I moved the HTML at the page level.
What I did (see more images below for setup), is I have 5 input fields to calculate the percentages of OnTarget, TooStrong, Right, TooShort, Left for the ball direction the user enters. I show those fields on the screen now for testing purposes.
You can see here that I have 50% for both Right and Left values. So the expectation would be that the shapes show an opacity of 50% and what I see is they show at 100%.
So I’m not quite sure, as you didn’t attach fully the shape elements, but does each shape element have the relevant id e.g. overshot1
Additionally, for the inputs values that are used in the HTML, these values need to be rendered as the right number format e.g. 0.1 (outputs 10% opacity) or 0.5
You may need to factor in a division mechanism.
Hopefully this helps in identifying the issue, if not, maybe you can PM me the frontend page to view and I can check the source code.
