Combining all the HYPE support documents so I can use in FileMaker

1

I am looking for a way to use FileMaker and Hype in a deeper integration with no external dependencies, and I have been playing with the idea. Not related this question directly is the fact that I have made an HTML based nav system with no external dependencies (I am building the Just In Time version of tailwind css and inserting that into a FileMaker field, and I then use that CSS to build up a calculation that makes a FileMaker file. This integration has re-animated an old concept that has yet to come to fruition - I love Hype and FileMaker - and have always wanted to make these two tools work together. I have hosted solutions, but I don't want to use a hosted solution embedded in FileMaker to provide any UI or support for obvious reasons...

My current plan is to take the files in the resource folder of the hype project - which includes the hypethin.js, a jqueryfile, a jQuery.ui file, the project specific js associated with the hype document we exported into the folder, and the .htc file - and create a series of FileMaker calculations (we have a character limit, so it means that the source files would become a series of calculated fields concatenated in FileMaker as a new calc.)
The new calculation will drive a web object in filemaker, allowing one to play around with passing data back and forth between the WebObject that holds all those references and the hype file itself.

This inquiry, with expertise required in FileMaker and Hype - is an exciting proposition. Any information that anyone has can support. I would be satisfied, as a starting point, to get a hype animation to show up in my FileMaker interface without any need to host it.

2

ok! so the cool thing is, I have this working. I am able to use a consistent and constant object in filemaker which is a text field, and I got around the character limit, and I am building it perfectly with a couple of nested includes in the FileMaker. Vector graphics originating in HYPE work well because they do not rely on external resources. I have found this area which is the references to external items. I would like to do a conversion, which I have working in FileMaker to the extent of dropping the png or jpg resource and it transforms into a base64 resource - and now I want to locate the places where those resources live in the output from Hype, and switch the values from them to the base64 encoded text so I can keep everything wrapped in FileMaker. any ideas on the best way to handle that?

c = new window["HYPE_754" + c](f, g, {
"1": {p: 1, n: "beach_house_2x.jpg", g: "6", o: true, t: "@2x"},
"-2": {n: "blank.gif"},
"-1": {n: "PIE.htc"},
"0": {p: 1, n: "beach_house.jpg", g: "6", o: true, t: "@1x"}
},
-- the beach house jpgs should be encoded as base64, I need to make the swap somehow.

3

Hype Reactive Content or Hype Data Magic both can assign data including base encoded images. If you want to do it without external libraries use the Ressources hook/event:

As seen in Hype ImageBaseEncoder (Hype Resource / Image Extension)

1 Like
4

Interesting, I would have to rework the flow to this: the sources get dropped into FileMaker, then converted, then imported into the hype vile, then the animation occurs (which is the opposite of what I built so far, but I think maybe superior). This could be a way, way smarter approach because it means that eventually I could have a library of FileMaker graphic resources that I can swop out. Very intriguing, will run some tests and see where this goes! Thank you!

5 

function HypeResourceLoad(hypeDocument, element, event) {
    switch(event.url) {
        // Check if the URL is test.jpg
        case "test.jpg":
            // Return Base64 encoding of a 1x1 transparent PNG
            return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/xW8cE4AAAAASUVORK5CYII=";
        
        // Add more cases for other specific URLs if needed
        // case "anotherFile.jpg":
        //     return someOtherValue;

        default:
            // No return, to leave as is
            break;
    }
}

if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({type: "HypeResourceLoad", callback: HypeResourceLoad});

Most basic setup using the hook. The filename is the key and The return is the base and included image.

1 Like
6

Basic example :point_up_2:

1 Like