A few small workflow requests

Hello great people at tumult!

Although hype is the best thing ever made, there are a few things that could improve my workflow.

  1. Subscript and subscript in typography. Adding sub> and sup> tags in the inner HTML is really tedious. Subscript and superscript buttons would be great. I am sure anyone producing educational content for maths, physics or chemistry may agree. :slightly_smiling_face:

  2. Also in typography, could vertically align options be included along with the horizontal buttons. I know there are workarounds but again these are workflow requests.

  3. I would love the elements in the timeline to be sorted/filtered in different ways other than front/back order. To be able to filter by element type would be very helpful as finding an element in a long list can be very time consuming when there are a lot of elements.

  4. This one’s not workflow but would be amazing - joining and anchoring elements in physics as shown in matter js to more easily produce springs and pendulums.

[ tick ] Nice to Have
[ ] Important
[ ] Can't use Hype without it

Thanks for the great requests! I've added your feedback as +1s to the items on our todo list. Of specific note we are planning to make typography improvements to Hype soon.

As a workaround, Hype v4 does expose access to the underlying matter.js physics engine, which has constraints. I found some threads from the v4 beta days I've made public that appear to have some examples on how to get this working, if you are familiar with JavaScript:

@Photics may have more information on this as well.

1 Like

When you do get to the point of updating the typography features, it would be great if you can have type as outline and the ability to increase the stroke width. I know all of this can be accomplished with css styles now. On a similar topic, I wanted to ask if there’s a way to add css styles into the generated script by way of first adding css in the head in hype, I know it sounds weird but my workflow is around the idea of using the generated script. Perhaps a custom export script tweak?

Good call - I can't make promises but I have moved this request to the next milestone.

To clarify, you basically don't want the "head html" to be in the source .html head, but get injected when the Hype document loads and be stored in the *_hype_generated_script.js file?

Basically the approach I would take would be to make an On Prepare For Display event on the first scene that gets triggered once and makes an element via the document.createElement() method that gets inserted into the head. Hype actually uses this technique to attach a CSS Reset and also include fonts in cases where they weren't found in the head, but there's sadly not any way to hook into it or get Hype to utilize it for other means.

An Export Script may be workable but probably a pain to do. You'd pretty much need to parse the .html file to extract what is in the head, and then have some sort of template substitution where you carefully perform a string replacement in the *_hype_generated_script.js file. I'm not sure I recommend this method; it is more of a "well, anything is possible with export scripts" approach.

Typically the solution to this problem is to simply include your Hype animation in an iframe, so it can contain all the head information.

I did see @MaxZieb just came out with this helper:

I haven't looked into how it works, but it sounds like it might fit your needs?

It does just what is requested although I don't condemn the idea of including stuff in the JavaScript file. One can include additional JS and CSS through JS all into one file. I wish this would become part of Hype 5 as I am actually doing this from time to time using export scripts and manually to minimize requests.

1 Like

Max why wait for hype 5, you could have said hype 4.5? However, if there is a way to add to my current export script that I use below, well then theres really no need to have it as official request is there? Though I bet someone would find it useful.

FlatAssets.hype-export.py.zip (1.9 KB)

@jonathan What Im looking to do is have the export script see if theres anything I added as a style to the head and then add it to the generated script. I know you mentioned this

Sorry but iframes is not an option.

We haven't announced the version number for the next release :slight_smile:.

This isn't something we would develop for an export script (any script parsing is bound to be fragile and the better solution is in Hype), but the basic flow is how I would do it. That said, it sounds like from the other thread the AddToHead method is what you are going with.

I'm curious why?