I know there is a lot of information here but I haven't solved my problem. I want to use sliders on a scene to indicate values in a series of questions. I then want to represent the same values on another scene but have them radiating out into sections/wedges within a circle (probably about 10 or 12 in total). This would mean that the sliders on the radial representation will need to be shorter to fit - essentially I just want the motion path to be shorter but the sliding element to remain the same size.
I've tried persistent symbols and tried scaling the symbols which reduces the element size as well and haven't found a way to keep the element size the same but shorten the length of the motion path. I'm just trying to find what works before committing to the file so attached file is just experimenting.
My first though would be that you could invert the scale so that the knob remains the same size. For example, if the entire symbol was scaled 50%, then you'd perform an opposite scale of 200% on the knob.
I was hoping that this would work with the Symbol Override Extension, but it appears that persistent symbols are not handled with it (paging @MarkHunte).
You could do this manually in a little bit of code instead. If you give the "Ellipse2" in "Symbol D" a Unique Element ID of "ellipseD" via the Identity Inspector, you could use this code On Scene Load to change the scale:
If you wanted to get fancy, you could probably base the scale on a parent element, and even use a global HypeSymbolLoad event to always run it. If your needs are more advanced and you are familiar with code, it might even just be easier to get the value of the timeline and save it as a global and transfer it to other elements. But these might be overkill .
And add this function to the top of the extension.
if('symbolOverride' in window === false) window['symbolOverride'] = (function() {
//---> new function
function symbolOverride_extensionSceneLoad(hypeDocument, element, event) {
console.log('symbolOverride_extensionSceneLoad')
var slides = [...element.querySelectorAll('.slide')];
for (let i = 0; i < slides.length; i++) {
var slide_ = hypeDocument.getSymbolInstanceById( slides[i].id)
symbolOverride_extension(hypeDocument, slide_.element(), event)
}
}
All symbols have been give the class name slide
If I can figure out a way to simply find all the Symbols on a scene ( without hard coding ), then that would be cool ( any ideas.. like symbols getting new class names. symb_standard and sym_persistent via the Hype API )
Also note anything I do here will have its pros and cons.
So although a scene load version sounds good in general, for the extension, the symbol would always be reset on scene load.
Thanks for your help. Unfortunately I’m not a JavaScripter so most of it is over my head. In the example you posted, the line element has been shortened but it’s actually the motion path I want shortened - in the example I would want the red circle to finish at the end of the line, however it continues past the end of the line and seems to have the same length as in the first scene.
It certainly seems more difficult than I had hoped so I may have to rethink things. Thanks again.
I’m trying to make a web page that will provide an easy input for something currently in paper form. Currently the user has 12 attributes on which a performance is based and is scored by marking along a line - no numerical value is given but line is in 4 sections. On the next page the same attributes are represented as radial lines in a circle or wheel, where the highest values are represented at the centre and lowest at the outer edges, with the 4 sections shaded to easily see which attributes need to be worked on. It is essentially the same data represented in a different format. I can manage the sliders on the first page and hoped that their values could be represented on the second page by using persistent symbols which do keep the values and can be rotated but the paths of the sliders will be too long to fit in the circle model, i.e they will form the radius.
In fact they don’t need to be animated on the circle model, just represent the same relative position on the line (e.g 1/4 way along etc).
In the mean time, using the extension (Extensively )
I came up with this.
When I say Extensively. There is a lot of data attribs, to rotate, top, left of text and scale.
But it does mean no real coding. Just setup and working out what needs to do what.
And you can easily see what each element is meant to do at a glance. So long as you name the data attributes in a way that tells you what its for and element it acts on.
Scene 1,
data attribs set as resets. ( A bonus in resetting persistent symbols - which is now possible due to extension running on scene load )
Wow thanks for that. I will definitely try to work through your example. I've attached screenshots of the 2 pages - sorry for the redaction but I'm not at liberty to share the details. Nevertheless I hope this gives the idea.
First have a look at the extension quick start so you understand the setup.
The main diff with this extension version is it runs on scene load instead of symbol load. Hence the resets if you go back to seen 1.
Thanks so much. That looks like it’s exactly what I wanted. I’m not sure about the resets though - I had a quick look on Firefox before heading to work and the values seemed to stay constant moving backwards and forwards between scenes. I will have a good look over the weekend. Thanks again, this is great.
This is the correct . On scene 2 I do not change anything to the ellipses, apart from scale.
So they remain where they should be going back and forth.
They changes are to the other elements. Like the text, markers (opacity), line scale, rotation..
So what I mean by reset, is:
These are persistent Symbols.
Normally if you make a change to a Persistent Symbol on one scene and then go to look at it on another scene, the changes will persist.
In the example we make changes to the Persistent Symbols on scene 2 to get their elements to change scale, rotation and so on.
So we need to reset/change them back to how they should look on scene 1 when we go back to scene 1.
( we actually make changes on scene 1 first, since we use attributes to set the base line visuals )
This was not possible with the extension before by the way , the extension normally only runs once when a symbol loaded.
But now, this version of extension runs on Scene load we can run the extension each time.
Thanks Mark that is almost exactly what I want. I'm still just trying to figure things out, infrequently dabbling with Hype and not being a JavaScripter but just experimenting until things "seem" to work. I never would have figured this out by myself.
The highest values (to the right on the first page) need to be in the centre on the circle rather than the periphery. I've tried changing the rotation values in both the extension (Identity panel) and the rotation (Metrics panel) but just messed it up, sometimes having the whole symbol disappear from the layout. Can you give me a tip as to the best way to achieve this?
Thanks in anticipation. Hopefully I can follow the logic from there.
Hey that could also work and I think I could manage that without help. I was sort of locked into the thought that the two different presentations needed to be in separate scenes as it's a paper based idea on two separate pages, but there is no reason that the beginning state (i.e. after adjustments, before "Going Polar") and the end state could not be printed separately.
Thanks so much Max. There is so much help on this forum when you need it and always more than one way to achieve the desired results with Hype. In another life I would love to be spending my working days with this app.
I want to mark 2 separate solutions to my problem but looks like I can only mark 1, however so between your post Post 13 and Max Zieb's post Post 18 I have 2 different but excellent solutions. Thanks so much.
.
)
.