ZEP Guidebook (EN)
  • Hello ZEP Script
  • ZEP Script
    • 💻ZEP Script Guide
      • ZEP Script Development Guide
        • JavaScript Development Tips
        • ZEP Script Deployment Guide
        • TypeScript Development Tips
      • Explore ZEP Script
        • Tutorials
          • Displaying a Message
          • Changing Avatar Image
          • Using HTML
          • Communicating with an External API
          • Creating a 2-Second Stun Effect
        • ZEP Script Example Code
          • Timer
          • Zombie Game
          • Paintman Game
          • Hangul Quiz Game
          • Avoid Poop Game
          • Boxing Game
          • Sidebar App
          • Race
      • ZEP Script FAQ
      • Appendix
        • ZEP Script Use Cases
        • Understanding Spaces and Maps
        • JavaScript Keycode List
        • Understanding Sprite Sheets
        • TileEffectType Detailed Explanation
        • What are Reference Coordinates?
        • Communicating with an External API
        • How to Use URL Query Strings
        • How to Change the Mobile Interaction Button
        • Grammar Available for Widgets
        • Object Interaction with ZEP Script
        • Object npcProperty
    • 📘ZEP Script API
      • API Summary
      • ScriptApp
        • Lifecycle
        • Field
        • Storage
        • Event Listeners
        • Callbacks
        • Methods
      • ScriptMap
        • Field
        • Methods
      • ScriptPlayer
        • Field
        • Methods
      • ScriptWidget
        • Field
        • Event Listeners
        • Methods
  • Others
    • Homepage
    • FAQ
    • Twitter
    • Discord
Powered by GitBook
On this page

Was this helpful?

  1. ZEP Script
  2. ZEP Script Guide
  3. Explore ZEP Script
  4. Tutorials

Using HTML

PreviousChanging Avatar ImageNextCommunicating with an External API

Last updated 2 years ago

Was this helpful?

  1. You can draw any shape of UI on the ZEP canvas. In ZEP, UI elements are expressed through HTML.

  2. You can bring an HTML file to a certain location using the App.showWidget()function. In this case, the file name, alignment, as well as width and height of the widget can be configured using arguments. Please refer to the page for more information on values for alignment.

  3. You can send the desired value to the HTML file using the sendMessage() method to the created variable.

  4. Write the HTML syntax as shown below (my.html) and then use addEventListener to receive the message sent from main.js.

  • main.js

//Set in advance the UI location values as variables
let position = 'middle';
let width = 400;
let height = 400;

// Create a tag called "state" using "my.html" and pass the value "hello"
let _widget = App.showWidget('my.html', position, width, height);
_widget.sendMessage({
	state: "hello",
}); 
  • my.html

<html>
<div id="test">-</div>
<script type="text/javascript">
		**window**.**addEventListener**('message', function(e) {
			// Since the sent tag value is "state", it is received in the form below
			var state = e.data.state; 
			// Apply this to "id test" above
			document.getElementById("test").innerText = state;
		})
</script>
</html>

Please Note

- For the tutorial, we recommend setting the app type to Installable App.

- The JSON file name must be “main.” Please create a new text file and name it “main.js.”

- If you do not know how to deploy an app, please refer to the .

💻
ScriptApp’s Methods
ZEP Script Deployment Guide