Using ChatGTP to answer Hype coding questions!
This thread is an instruction (experiment) to use ChatGTP to write (simple) code functions for Hype. To use this, register an account and visit https://chat.openai.com/chat 13 by Open AI.
Teaching ChatGTP the Tumult Hype API
Open a new chat ChatGTP session and first inform ChatGTP about the Tumult Hype API, as it doesn’t seem to know about it.
Copy and paste the following (click the small icon)
Learn the following API and acknowledge by only writing "The Tumult Hype 4 API has been loaded…":
${resourcesFolderName}
A substitution variable for the document's resources folder. Use this to reference documents added via the Resource Library.
For example, if you’ve added jquery-1.8.2.min.js to your document using the Resource Library, this one line will import jQuery 1.8.2 into your Hype document, allowing you to use jQuery when previewing your Hype document:
<script src="${resourcesFolderName}/jquery-1.8.2.min.js"></script>
hypeDocument.documentName()
Returns the name of the document. This value can be used in the global HYPE.documents[documentName].
hypeDocument.documentId()
Returns the id of the container div for the document. This value can be used with document.getElementById() to retrieve the container element itself.
hypeDocument.resourcesFolderURL()
Returns the string value for the the document’s resources folder URL. Use this to reference assets added via the Resource Library.
hypeDocument.functions()
Returns an array of all user-defined JavaScript functions in the Tumult Hype Document.
hypeDocument.customData
An object to put any user-defined data associated with the Tumult Hype Document.
hypeDocument.getElementById(id)
Searches the current document for the specified id (entered through the Identity inspector's "Unique Element ID") and returns the DOM HTML Element. This is similar to the typical 'document.getElementById', however the API version should be used instead as Tumult Hype may reassign ids in cases of collision.
hypeDocument.getElementProperty(element, propertyName)
Gets a property of an element based on the Hype runtime's knowledge.
The element argument must be a DOM element, generally obtained by the hypeDocument.getElementById() function.
Valid property names (quotes required):
'top'
'left'
'width'
'height'
'rotateZ'
'scaleX'
'scaleY'
'opacity'
'z-index'
'background-image'
Physics property names (pro only):
'physics-engine' - a Matter.js Engine object
'physics-body' - a Matter.js Body object
'physics-bounce'
'physics-friction'
'physics-air-drag'
'physics-density'
'physics-body-type' - Can be hypeDocument.kPhysicsBodyTypeDead, hypeDocument.kPhysicsBodyTypeStatic, or hypeDocument.kPhysicsBodyTypeDynamic
hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionNameOrMathEquationFunction)
Sets a property of an element in a manner compatible with the Hype runtime. If the optionalDuration is provided, it will perform a transition animation from the current value to the specified value.
The element argument must be a DOM element, generally obtained by the hypeDocument.getElementById() function.
Valid property names (quotes required):
'top'
'left'
'width'
'height'
'rotateZ'
'scaleX'
'scaleY'
'opacity'
'z-index'
'background-image'
Physics property names (pro only):
'physics-bounce'
'physics-friction'
'physics-air-drag'
'physics-density'
'physics-body-type' - Can be hypeDocument.kPhysicsBodyTypeDead, hypeDocument.kPhysicsBodyTypeStatic, or hypeDocument.kPhysicsBodyTypeDynamic
optionalDuration is given in seconds; the default value is 0.
optionalTimingFunctionNameOrMathEquationFunction will default to 'easeinout' if not provided. Valid timing function names (quotes required):
'easeinout'
'easein'
'easeout'
'linear'
A function with this structure can also be used:
function (t, start, dur) {
// return percent complete
}
hypeDocument.relayoutIfNecessary()
Explicitly tells the document to relayout all elements and groups for the current scene when using a flexible layout. Use if you have externally changed the bounding size of the main container.
hypeDocument.triggerCustomBehaviorNamed(customBehaviorName)
Informs any elements which have a custom behavior with customBehaviorName to run its actions.
hypeDocument.sceneNames()
Returns a list of all scenes in the document. Note: scene names are not enforced to be unique as they are specified by in the scene selector interface. If you are going to use the showSceneNamed() function, be sure that no two scenes have the same name!
hypeDocument.currentSceneName()
Returns the string value for the currently shown scene.
hypeDocument.currentSceneId()
Returns the id of the container div for the current scene. This value can be used with document.getElementId() to retrieve the container element itself.
hypeDocument.showSceneNamed(sceneName, optionalTransition, optionalDuration)
Changes to the specified scene. If the optionalTransition is not specified it will default to the instant transition.
Valid transition constants:
hypeDocument.kSceneTransitionInstant
hypeDocument.kSceneTransitionCrossfade
hypeDocument.kSceneTransitionSwap
hypeDocument.kSceneTransitionPushLeftToRight
hypeDocument.kSceneTransitionPushRightToLeft
hypeDocument.kSceneTransitionPushBottomToTop
hypeDocument.kSceneTransitionPushTopToBottom
optionalDuration is given in seconds; the default value is 1.1.
hypeDocument.showNextScene(optionalTransition, optionalDuration)
Shows the next scene, based on the order in the scene selector interface. If the optionalTransition is not specified it will default to the instant transition.
Valid transition constants:
hypeDocument.kSceneTransitionInstant
hypeDocument.kSceneTransitionCrossfade
hypeDocument.kSceneTransitionSwap
hypeDocument.kSceneTransitionPushLeftToRight
hypeDocument.kSceneTransitionPushRightToLeft
hypeDocument.kSceneTransitionPushBottomToTop
hypeDocument.kSceneTransitionPushTopToBottom
optionalDuration is given in seconds; the default value is 1.1.
hypeDocument.showPreviousScene(optionalTransition, optionalDuration)
Shows the previous scene, based on the order in the scene selector interface. If the optionalTransition is not specified it will default to the instant transition.
Valid transition constants:
hypeDocument.kSceneTransitionInstant
hypeDocument.kSceneTransitionCrossfade
hypeDocument.kSceneTransitionSwap
hypeDocument.kSceneTransitionPushLeftToRight
hypeDocument.kSceneTransitionPushRightToLeft
hypeDocument.kSceneTransitionPushBottomToTop
hypeDocument.kSceneTransitionPushTopToBottom
optionalDuration is given in seconds; the default value is 1.1.
hypeDocument.layoutsForSceneNamed(sceneName)
Returns a list of layout info for the given scene. Layout info is given as an object with the following keys:
'name'
'breakpoint'
'width'
'height'
hypeDocument.currentLayoutName()
Returns the string value for the name of the currently shown layout.
hypeDocument.showLayoutNamed(layoutName)
Changes instantly to the specified layout in the current scene. The layout may change back on a resize event, scene change, or relayoutIfNecessary() call.
In order to force specific layouts, use the HYPE_eventListeners infrastructure to listen to "HypeLayoutRequest" events and return a different layout name from the callback.
hypeDocument.startTimelineNamed(timelineName, direction)
Starts the specified timeline at the beginning for the current scene. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in any scene have the same name!
Direction to play timeline:
hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse
hypeDocument.pauseTimelineNamed(timelineName)
Pauses the specified timeline for the current scene. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in any scene have the same name!
hypeDocument.continueTimelineNamed(timelineName, direction, canRestartTimeline)
Continues the specified timeline where it left off for the current scene. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in any scene have the same name!
By default continue will not start the timeline over if it is at the end, to change this behavior pass true for canRestartTimeline.
Direction to play timeline:
hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse
hypeDocument.goToTimeInTimelineNamed(timeInSeconds, timelineName)
Jumps to a specific time in the specified timeline for the current scene. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in any scene have the same name!
hypeDocument.currentTimeInTimelineNamed(timelineName)
Returns the current time of the specified timeline in seconds.
hypeDocument.durationForTimelineNamed(timelineName)
Returns the duration of the specified timeline in seconds.
hypeDocument.currentDirectionForTimelineNamed(timelineName)
Returns the playback direction of the specified timeline.
Possible return values:
hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse
hypeDocument.isPlayingTimelineNamed(timelineName)
Returns true if the timeline is playing and false if it is not.
hypeDocument.getSymbolInstanceById(id)
Returns the symbolInstance for the symbol with the specified id.
The symbol instance can be used to control timelines in the symbol. See the Symbol Instances section for more information.
hypeDocument.getSymbolInstancesByName(symbolName)
Returns all symbolInstances with the specified name. A symbol's name can be found in the Symbol Library.
The symbol instance can be used to control timelines in the symbol. See the Symbol Instances section for more information.
symbolInstance.getSymbolInstancesByName(symbolName)
Returns all symbolInstances with the specified name that are children of symbolInstance.element(). A symbol's name can be found in the Symbol Library.
symbolInstance.symbolName()
Returns the name of the symbol.
symbolInstance.element()
Returns the element representing the symbol.
symbolInstance.startTimelineNamed(timelineName, direction)
Starts the specified timeline at the beginning for the symbol. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in the symbol have the same name!
Direction to play timeline:
hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse
symbolInstance.pauseTimelineNamed(timelineName)
Pauses the specified timeline for the symbol. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in the symbol have the same name!
symbolInstance.continueTimelineNamed(timelineName, direction, canRestartTimeline)
Continues the specified timeline where it left off for the symbol. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in the symbol have the same name!
By default continue will not start the timeline over if it is at the end, to change this behavior pass true for canRestartTimeline.
Direction to play timeline:
hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse
symbolInstance.goToTimeInTimelineNamed(timeInSeconds, timelineName)
Jumps to a specific time in the specified timeline for the symbol. Note: timelines are user-defined, so they are not enforced to be unique. If you are going to use this function, be sure that no two timelines in the symbol have the same name!
symbolInstance.currentTimeInTimelineNamed(timelineName)
Returns the current time of the specified timeline in seconds.
symbolInstance.durationForTimelineNamed(timelineName)
Returns the duration of the specified timeline in seconds.
symbolInstance.currentDirectionForTimelineNamed(timelineName)
Returns the playback direction of the specified timeline.
Possible return values:
hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse
symbolInstance.isPlayingTimelineNamed(timelineName)
Returns true if the timeline is playing and false if it is not.
event['hypeGesturePhase']
When receiving a callback for the "On Drag" event with the "Run JavaScript…" action the event object also offers information about whether the current drag gesture has just started or ended, was canceled, or the coordinates were updated. To get that state, access the hypeGesturePhase property in the event object:
hypeDocument.kHypeGesturePhaseStart
hypeDocument.kHypeGesturePhaseMove
hypeDocument.kHypeGesturePhaseEnd
hypeDocument.kHypeGesturePhaseCancel
event['hypeGestureXPosition']
Returns the current x position of a drag when using the "On Drag" event with the "Run JavaScript…" action.
event['hypeGestureYPosition']
Returns the current y position of a drag when using the "On Drag" event with the "Run JavaScript…" action.
Coding guidelines and instructions
We need to inform ChatGTP about best coding practice and that Hype functions are called and used in an interface…
Copy and paste the following
Acknowledge the following coding guidelines and information, by only saying "Coding guidelines acknowledged":
# Coding guidelines and best practice
## Format for responses
Always use the following Hype Function template to write (replace the comment):
function yourFunctionNameGoesHere(hypeDocument, element, event) {
// your code goes here
}
Try to use querySelector and querySelectorAll if possible
Make sure to limit queries to the Hype Scene by first fetching the Hype Scene element using:
var hypeSceneElm = document.getElementById(hypeDocument.currentSceneId())
If you fetch elements add "Elm" at the end of variables to identify them as such.
Important: If you create variables outside of the scope of the Hype Function store them in hypeDocument.customData
Important: Use modern JavaScript and assign variable using let and const
Important: Helper functions must be either declared inside the Hype Function scope before usage or added to the API (hypeDocument must be extended with them). It is not an option to add them to the global scope (window).
## Context of the code
Calling functions is done through the visual interface of Tumult Hype 4:
* by using Timeline Actions [keyframes on a timeline] to trigger them
* by setting them up in the Interaction Panel [On Mouse Click (Tap), On Mouse Down (Touch Start), On Mouse Up (Touch End), On Mouse Over, On Mouse Out, On Drag, On Enter Viewport, On Exit Viewport].
* by setting them up in the Document Panel [On Prepare For Display, On Scene Load, On Scene Unload, On Key Press, On Key Down, On Key Up,On Swipe Left,On Swipe Right, On Swipe Up, On Swipe Down]
* by creating a Custom Behavior Listener (simple text string behavior) to trigger them (works scene wide)
Important: When instructing a user describe (if necessary) where to place the function in the interface! Write code always in code blocks! And try to be smart about suggesting about the context.
If functions are linked to each other by a custom behavior and it is appropriate, instruct the user to register the subsequent function in the Scene Panel by creating the custom behavior name using "Add New Behavior".
## Addressing the user and comment style
When you are explaining talk directly to the user asking you questions (you). Remember to add your train of thought and in code blocks make sure to add comments to explain yourself as most Hype users are not very well versed in coding.
## Limit yourself to the official Hype API
Very import ONLY use hypeDocument functions, constants and objects from the following list!
Only use other functions in hypeDocument if explicitly told they exist (in cases the API has been extended).
### Place to store custom data and values (object)
hypeDocument.customData
### constants stored in the API
hypeDocument.kSceneTransitionInstant
hypeDocument.kSceneTransitionCrossfade
hypeDocument.kSceneTransitionSwap
hypeDocument.kSceneTransitionPushLeftToRight
hypeDocument.kSceneTransitionPushRightToLeft
hypeDocument.kSceneTransitionPushBottomToTop
hypeDocument.kSceneTransitionPushTopToBottom
hypeDocument.kHypeGesturePhaseStart
hypeDocument.kHypeGesturePhaseMove
hypeDocument.kHypeGesturePhaseEnd
hypeDocument.kHypeGesturePhaseCancel
hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse
### Hype API functions
hypeDocument.documentName
hypeDocument.documentId
hypeDocument.sceneNames
hypeDocument.currentSceneName
hypeDocument.currentSceneId
hypeDocument.layoutsForSceneNamed
hypeDocument.currentLayoutName
hypeDocument.showLayoutNamed
hypeDocument.showSceneNamed
hypeDocument.showNextScene
hypeDocument.showPreviousScene
hypeDocument.playTimelineNamed
hypeDocument.startTimelineNamed
hypeDocument.goToTimeInTimelineNamed
hypeDocument.pauseTimelineNamed
hypeDocument.continueTimelineNamed
hypeDocument.getElementById
hypeDocument.setElementProperty
hypeDocument.getElementProperty
hypeDocument.functions
hypeDocument.resourcesFolderURL
hypeDocument.relayoutIfNecessary
hypeDocument.currentTimeInTimelineNamed
hypeDocument.durationForTimelineNamed
hypeDocument.currentDirectionForTimelineNamed
hypeDocument.isPlayingTimelineNamed
hypeDocument.triggerCustomBehaviorNamed
hypeDocument.getSymbolInstanceById
hypeDocument.getSymbolInstancesByName
Prompting:
After that, you can prompt ChatGTP with your problems and ask for a solution. You can continue asking and don’t need to reload the API or guidelines as long as you don’t refresh the page.
Release notes for v1.0.0 (11. December 2022):
I wrote the API code for a playground test and limited it to the 4000 tokens allowed at the time. In ChatGPT we are dealing with a much more generous rolling 8000 token window. I will probably refine the API description to details (suggestions welcome). Furthermore, the guidelines are also older (GTP3) and the interface part was improvised for ChatGTP. Both could use some refinement as well…
Release notes for v1.0.1 (11. December 2022):
I am tweaking the best practice guidlines. Currently, they are stricly focused on Hype functions and not ment to produce code in Head HTML