i know you did not ask for this :), but working with svg-path revealing dash/gap would allow to work without any interval-methods to control the progress of the timeline.
You are overwriting your myGetPercent … my first guess at a glance. This is a perfect use case for Hype StableSymbol. I’ll try to post a fix without it, though.
This is much easier… don't use a global approach but initialize on SymbolLoad instead. getPercent.hype.zip (20,5 KB)
This is much to simple for Hype StableSymbol. That would be needed if you want to create a reusable API (like changing the bar dynamically or other stuff like that) for the Symbol across scenes.
@ktewes also when you only want a bar to scale you can use setElementProperty with a time on width. Then you don't even need your interval as seElementProperty does it for you. The approach of controlling the animation makes sense when you want to create fancy animations that have to stop at a certain progression that would be too much to micromanage by controlling every element property individually OR if you just like using the visual approach more
Yes, and the function now is truly symbol-based meaning initialized from within the symbol. So, you can duplicate the symbol as often as you want and reuse it in many scenes. Although, without Stable Symbol you can't store values in the symbolInstance across scenes or across function calls used in the symbol as hypeDocument.getSymbolInstanceById always gives you a fresh copy of the symbol API hence destroying anything you stored in there. Hope, this makes clear where Hype StableSymbol comes in.
Thanks a lot Gerd and Max. Great stuff. Max’ approach indeed looks a little bit easier to me @MaxZieb Yes, I had the idea with setElementProperty, too. But what about eg. donuts/pies?
Here is an inverse version of your idea. It uses the width of a “hidden” element we can control using setElementProperty to drive the progression of the symbols Main Timeline. It offers the following values:
data-percent (of main timeline) defaults to 100% if not provided
data-duration (for animation) defaults to 1 second
Gumroad only requires an email so this is all you need to download free files. So, I am moving my examples there and if some people value my examples I’ll put more effort into them with tutorials etc. as an paid upsell!
Thanks again, this is exactly what my intension was, when I started this little project for me this morning - having a standalone symbol which allows me to create charts on a dynamic basis - perfect!
And - yes, I think you should make use of platforms like Gumroad - you´re investing a lot of time and work (I assume… ) in creating solutions, especially in your extensions project. Yep! Go ahead!!
Thank you for the encouragement, I produce a lot but fail to create tutorials and good example files. Maybe the commercial route will help in doing that. My thinking would be… most extensions are and stay under MIT and reside on GitHub, examples files are on a donation basis or small pay if they are complex and tutorials (video etc.) an upsell. It reflects the production value and the philosophy of keeping it free to use but still would be an encouragement on producing material for beginners or people unfamiliar with the concepts. Although if it helps commercially, I'd appreciate a kickback in any case.
There actually is. The problem is that the runtime doesn't offer it as a "string" preset but there is a hidden feature to pass in a function into the easing function.
Here is also a version that offers an alternative based on a timingTimeline dataset value allowing for manual setup of the duration and easing in the editor. It's still flexible as each timeline can be defined in the symbol and addressed by the dataset. Download here but I'll update/merge it to one version in the template ZIP with a single function on Gumroad later. HypeSymbolProgress_timelineVersion.hype.zip (35,0 KB)
I would like to use this bar chart solution in my digital signage. I'm using mysql and php. How can I change the percvalue number by way of a simple webform that can be managed by a non-technical person? safetyPercent.zip (152.7 KB)
The duplication of the symbol and the code is two fold, my artist has the bars changing color from left to right (the final slide will have 15 bars of varying amount of green) and the duplicate javascript is me working under the assumption that if I can figure out a way to get the data values out of my database to control the length of the various bars, I'll simply use individual scripts, one for each bar. I've found a few methods on the Web for bring in database values using php into a javascript script, but I've been unsuccessful in getting those to work within Hype.