Commit 56000688 authored by Shockfire's avatar Shockfire
Browse files

Separate Debugging and Getting Started tutorials

parent b9dfa3dd
## Setup
## Getting Started
The Web UI files are located in the mods\ui\web folder in your ElDewrito install. The dew:// protocol is mounted here. Create a new directory inside the screens folder and place all of your screen files in there. Your main HTML page should be named index.html.
Your screen itself will be loaded into its own iframe that fills the page. It is your responsibility to ensure that your screen contents are displayed at the correct position. Make sure that your screen correctly responds to the window being resized.
You always need to import dew.js:
```
<script type="text/javascript" src="dew://lib/dew.js"></script>
```
Optionally, feel free to use local jQuery as well:
```
<script type="text/javascript" src="dew://lib/jquery-2.2.1.min.js"></script>
```
## screens.json
screens.json lists all of the screens to load. You must add your screen to it in order to be able to use it. Each screen has the following structure:
* `id` - A unique ID string to assign to the screen.
* `url` - The screen's URL. This is not required as long as you set `var` instead.
* `var` - If `url` is not set, the name of a console variable to get the screen URL from (e.g. "Game.MenuURL").
* `fallbackUrl` - A URL to use if the main URL can't be accessed. This should always point to a dew:// URL.
* `captureInput` - Set this to `true` to make your screen capture game input. Use `false` to create an overlay.
* `zIndex` - Screens with larger `zIndex` values will be displayed on top.
For example, this is what the console screen definition looks like:
```
{
"id": "console",
"url": "dew://screens/console/",
"captureInput": true,
"zIndex": 10
}
```
See [Getting Started](tutorial-GettingStarted.html).
## Debugging
ElDewrito provides a special web debugging mode which you can use to debug screens.
It is activated by default in debug builds, and you can activate it in release builds by passing the `-webdebug` command-line argument to eldorado.exe.
When web debugging mode is active, the following features are enabled:
* CEF log verbosity is turned on.
* The CEF remote debugger will listen on port 8884.
* Pressing F5 will reload all screens.
* Pressing F6 will reload the screen layer completely (intended for editing internal files).
* Pressing F7 will open Chrome and point it to the remote debugger.
See [Debugging](tutorial-Debugging.html).
## Detecting when your screen is shown or hidden
......
ElDewrito provides a special web debugging mode which you can use to debug screens.
It is activated by default in debug builds, and you can activate it in release builds by passing the `-webdebug` command-line argument to eldorado.exe.
When web debugging mode is active, the following features are enabled:
* CEF log verbosity is turned on.
* The CEF remote debugger will listen on port 8884.
* Pressing F5 will reload all screens.
* Pressing F6 will reload the screen layer completely (intended for editing internal files).
* Pressing F7 will open Chrome and point it to the remote debugger.
\ No newline at end of file
## Setup
The Web UI files are located in the mods\ui\web folder in your ElDewrito install. The dew:// protocol is mounted here. Create a new directory inside the screens folder and place all of your screen files in there. Your main HTML page should be named index.html.
Your screen itself will be loaded into its own iframe that fills the page. It is your responsibility to ensure that your screen contents are displayed at the correct position. Make sure that your screen correctly responds to the window being resized.
You always need to import dew.js:
```
<script type="text/javascript" src="dew://lib/dew.js"></script>
```
Optionally, feel free to use local jQuery as well:
```
<script type="text/javascript" src="dew://lib/jquery-2.2.1.min.js"></script>
```
## screens.json
screens.json lists all of the screens to load. You must add your screen to it in order to be able to use it. Each screen has the following structure:
* `id` - A unique ID string to assign to the screen.
* `url` - The screen's URL. This is not required as long as you set `var` instead.
* `var` - If `url` is not set, the name of a console variable to get the screen URL from (e.g. "Game.MenuURL").
* `fallbackUrl` - A URL to use if the main URL can't be accessed. This should always point to a dew:// URL.
* `captureInput` - Set this to `true` to make your screen capture game input. Use `false` to create an overlay.
* `zIndex` - Screens with larger `zIndex` values will be displayed on top.
For example, this is what the console screen definition looks like:
```
{
"id": "console",
"url": "dew://screens/console/",
"captureInput": true,
"zIndex": 10
}
```
\ No newline at end of file
{
"GettingStarted": {
"title": "Getting Started"
},
"CommonTasks": {
"title": "Common Tasks"
},
"Debugging": {
"title": "Debugging"
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment