Two feature requests: scrolling text boxes and image masks

Feature Requests
,
1

Hello. I am using Hype to create the UIs for an app I am working on. There are two small features I’d like to see added that would make life a lot easier for me:

  1. The ability to have a text box with a scroll bar. I would like to be able to include all of the tags for the variables that need to be included and indicate that the text should scroll rather than just having a block of text that flows over (or worse yet, under) other elements.
  2. The ability to apply a cropping mask to an image. An image that appears in one layout may need to be cropped differently in another layout.

Thank you!

2

You should be able to use the "Content Overflow" options in the "Metrics Inspector" to set up scrollbars

3

Perfect. Thank you. So now just #2 …

4

It's not really a crop, but would using the Element Inspector to add a background image work?

5

Not really … I basically want to be able to apply a mask to the same image in a layout so that it will demonstrate to the code monkeys (I mean that in the most affectionate way possible) that it needs to be the same information (a live map) but with a different shape.

When I used a background image I ended up with the background image and no map because to their way of thinking the box had no data … so now you see what I’m up against … :wink:

Thanks for the suggestion though!

6

Image mask using custom shapes would be a killer feature. I suspect the upcoming Adobe Animate will have this.

1 Like
7

For #2, you can do simple cropping by adding items to a group, setting that group to have its Content Overflow (in the Metrics Inspector) to hidden, and then adjusting the boundaries of the group.

This isn’t shape masking though; there is some CSS allowing this, but it isn’t widely supported and in testing I’ve found it to be relatively buggy in Safari. This is why the feature doesn’t yet exist in Hype!

8

I see your point. I would suggest that maybe you enable the masking and throw up an exception for browser compatibility. In my specific case (and I would imagine some others), I am using Hype for rapid UI design. Many of the “picture” elements end up being replaced with code by the programmers …

9

What about using the svg clip-path option? It’s the way I do all custom shape clip paths in hype except right now I need to code it myself. It seems to be the most reliable out of all the other ways. Though that would also require a tool like a pen that draws svg mask instead of creating it in illustrator and importing it.

10

I’ll be looking more into some of the SVG options for sure :slight_smile:.

2 Likes