Drawing canvas Widget with Hype for ibook


I need some help to modify a Canvas widget made with hype.

I found a canvas widget made with hype on hype dock :

I really like the widget, but I would like to customize the interface. I would like to remove the selection of brush thickness to have it fixed. I would like also to remove choices of colors and only keep two colors.

Could anyone one guide me on how to modify the widget ?

1 Like

This was created by the talented @h_classen

You can simply hide the brush thickness element to lock that down. Similarly, for limiting colors, you can remove any you don’t want using the visibility tool. (Click the eyeball when an element is selected).


1 Like

Hello Daniel.

Thank a lot for the quick update. I will try that tomorrow. Can i ask one more question ?
I downloaded the zip folder provided, but i am not sure which file i should open when in hype.

Should i look for a file with a specific expansion ?

You would open the .hype file to edit it in Hype.

ha ha -> this is pretty much nice :slight_smile:

1 Like

Hello Daniel

How are you ?

I managed to hide the component i do not want display but now I am struggling to change the picture. How do i replace the bus picture by any picture? which kind of format or extension should the picture be ?

Thank a lot in advance for your time and support



I agree with Daniel, you are truly talented. The canvas is awesome, thank a lot for sharing this.

You could use really any format for this, but a JPG or PNG should be fine. You would need to replace this image:

You could either delete that image, or replace the image in the resource library with an image of your choosing. Here's how to replace a resource: Tumult Hype Documentation

Searching for 'freda' will show this image in the resources library:


I swapped this picture with a .png of my own and it doesn’t work for me??? Not sure if something else needs to be changed? When I put the original picture back, it works. I’ve even renamed my picture to “freda” and it still doesn’t work.

Looking at the document, freda.png isn’t actually used. While the element name is “freda” in fact the resource you need to swap is bus.png.


That was it! Thanks again so much!

1 Like

Next issue. Sorry. I tried to move this project into my own. I tried creating it as a Symbol and copying files. None of which worked. I’ve gotten closer with copying but seem to be missing files/settings. Is there a better way to combine projects like from templates? Thanks!

I would embed the whole Project AS iframe …

What is an “AS Frame”? LOL!

Possibly “as an iFrame” was the intended phrasing…:thinking:

1 Like

An iframe (HTML Widget) may be the easiest method. Typically you could select the top-level group and choose ‘New Symbol from Selection’ and copy/paste this to a different document, but it will only capture assets directly used by Hype elements. Thus if some arbitrary javascript code is referencing an asset it won’t know about that nor copy it.

I forgot to mention that I tried the Widget already. However, I tried it again and when run in Safari, none of the functionality came across. None of these options appear to capture all of the functions.59%20AM

Export the hypefile as Folder.

Import the export by chosing widget and connect it to the exports url.

For the Gallery-functionality please be aware of the php-file serverside

To clarify a bit more, you will not want to use the Dashboard/iBooks Author Widget, but instead use a regular “Folder…” export for the entire document. You can then upload it, and there will be a URL associated with this.

In the other Hype document, choose the ‘Insert > HTML Widget’ menu and in the Element Inspector set this to use a Specified URL with that of the first export.

1 Like

Thank you everyone for your help! I’ve spent too much time on this only to find that it uses a server-side connection. I need it to work offline. I wish there were more free Widget sites like Bookry.com. Does anyone know of any others? Thanks again for your help!