Skip to content

Commit

Permalink
Add doc about assets/app_settings/emscripten
Browse files Browse the repository at this point in the history
  • Loading branch information
pthom committed Dec 7, 2023
1 parent a8fc089 commit c118a47
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 49 deletions.
45 changes: 26 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ Anything in the assets/ folder located beside the app's CMakeLists will be embed
└── hello_globe.main.cpp
├── CMakeLists.txt
├── assets/
└── world.jpg
│ └── world.jpg
```
(even on iOS and emscripten).

Expand Down Expand Up @@ -224,19 +224,26 @@ Example:
```
assets/
├── app_settings/
│ ├── icon.png # If present, this will be used as the app icon.
│ │ # Tt should be a square image, of large size, e.g. 1024x1024.
│ │ # This works on macOS, iOS, windows, linux, and emscripten
│ │ # and it will automatically
│ │ # be converted to the correct format.
│ │
│ ├── apple/
│ │ ├── Info.plist # Will be used as the app Info.plist for iOS and macOS
│ │ │ # (if absent, HelloImGui will provide a default one)
│ │ │
│ │ ├── Info.ios.plist # (optional, used on iOS if present)
│ │ ├── Info.macos.plist # (optional, used on macOS if present)
│ │
│ ├── icon.png # If present, this will be used as the app icon.
│ │ # Tt should be a square image, of large size, at least 256x256.
│ │ # This works on macOS, iOS, windows, linux, and emscripten
│ │ # and it will automatically
│ │ # be converted to the correct format.
│ │
│ ├── apple/
│ │ ├── Info.plist # Will be used as the app Info.plist for iOS and macOS
│ │ │ # (if absent, HelloImGui will provide a default one)
│ │ │
│ │ ├── Info.ios.plist # (optional, used on iOS if present)
│ │ ├── Info.macos.plist # (optional, used on macOS if present)
│ │
│ └── emscripten/
│ ├── shell.emscripten.html # Emscripten shell file
│ │ # (this file will be cmake "configured"
│ │ # to add the name and favicon)
│ └── custom.js # Any custom file here will be deployed
│ # in the emscripten build folder

```
-------------------
Expand Down Expand Up @@ -523,12 +530,12 @@ For Android, create a folder named "android" beside the application 'CMakeLists.

```
├── android/ # android/ is where you customize the Android App
├── mipmap-source/
├── Readme.md
└── ic_launcher.png # an icon that helps creating the different sizes
└── res/ # anything in the res/ folder will be embedded as a resource
│ ├── mipmap-source/
├── Readme.md
└── ic_launcher.png # an icon that helps creating the different sizes
│ └── res/ # anything in the res/ folder will be embedded as a resource
│ ├── mipmap-hdpi/
│ │ └── ic_launcher.png # icons with different sizes
│ │ └── ic_launcher.png # icons with different sizes
│ ├── mipmap-.../
│ └── values/
│ ├── colors.xml
Expand Down
45 changes: 26 additions & 19 deletions README.src.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ Anything in the assets/ folder located beside the app's CMakeLists will be embed
└── hello_globe.main.cpp
├── CMakeLists.txt
├── assets/
└── world.jpg
│ └── world.jpg
```
(even on iOS and emscripten).

Expand Down Expand Up @@ -201,19 +201,26 @@ Example:
```
assets/
├── app_settings/
│ ├── icon.png # If present, this will be used as the app icon.
│ │ # Tt should be a square image, of large size, e.g. 1024x1024.
│ │ # This works on macOS, iOS, windows, linux, and emscripten
│ │ # and it will automatically
│ │ # be converted to the correct format.
│ │
│ ├── apple/
│ │ ├── Info.plist # Will be used as the app Info.plist for iOS and macOS
│ │ │ # (if absent, HelloImGui will provide a default one)
│ │ │
│ │ ├── Info.ios.plist # (optional, used on iOS if present)
│ │ ├── Info.macos.plist # (optional, used on macOS if present)
│ │
│ ├── icon.png # If present, this will be used as the app icon.
│ │ # Tt should be a square image, of large size, at least 256x256.
│ │ # This works on macOS, iOS, windows, linux, and emscripten
│ │ # and it will automatically
│ │ # be converted to the correct format.
│ │
│ ├── apple/
│ │ ├── Info.plist # Will be used as the app Info.plist for iOS and macOS
│ │ │ # (if absent, HelloImGui will provide a default one)
│ │ │
│ │ ├── Info.ios.plist # (optional, used on iOS if present)
│ │ ├── Info.macos.plist # (optional, used on macOS if present)
│ │
│ └── emscripten/
│ ├── shell.emscripten.html # Emscripten shell file
│ │ # (this file will be cmake "configured"
│ │ # to add the name and favicon)
│ └── custom.js # Any custom file here will be deployed
│ # in the emscripten build folder

```
-------------------
Expand Down Expand Up @@ -462,12 +469,12 @@ For Android, create a folder named "android" beside the application 'CMakeLists.

```
├── android/ # android/ is where you customize the Android App
├── mipmap-source/
├── Readme.md
└── ic_launcher.png # an icon that helps creating the different sizes
└── res/ # anything in the res/ folder will be embedded as a resource
│ ├── mipmap-source/
├── Readme.md
└── ic_launcher.png # an icon that helps creating the different sizes
│ └── res/ # anything in the res/ folder will be embedded as a resource
│ ├── mipmap-hdpi/
│ │ └── ic_launcher.png # icons with different sizes
│ │ └── ic_launcher.png # icons with different sizes
│ ├── mipmap-.../
│ └── values/
│ ├── colors.xml
Expand Down
30 changes: 19 additions & 11 deletions _example_integration/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,29 @@ The [CMakeLists.txt](CMakeLists.txt) file will download and build hello_imgui at


Anything in the assets/ folder located beside the app's CMakeLists will be bundled together with the app (for macOS, iOS, Android, Emscripten).
The files in assets/app_settings/ will be used to generate the app icon, and the app settings (for macOS, iOS, Android).
The files in assets/app_settings/ will be used to generate the app icon, and the app settings.

```
assets/
├── world.jpg # A custom asset
├── app_settings/ # Application settings
│ ├── icon.png # This will be the app icon, it should be square
│ │ # and at least 512x512. It will be converted
│ │ # to the right format, for each platform.
│ ├── apple/
│ │ └── Info.plist # macOS and iOS app settings
│ │ # (or Info.ios.plist + Info.macos.plist)
├── world.jpg # A custom asset
├── app_settings/ # Application settings
│ ├── icon.png # This will be the app icon, it should be square
│ │ # and at least 256x256. It will be converted
│ │ # to the right format, for each platform.
│ ├── apple/
│ │ └── Info.plist # macOS and iOS app settings
│ │ # (or Info.ios.plist + Info.macos.plist)
│ └── emscripten/
│ ├── shell.emscripten.html # Emscripten shell file
│ │ # (this file will be cmake "configured"
│ │ # to add the name and favicon)
│ └── custom.js # Any custom file here will be deployed
│ # in the emscripten build folder
├── fonts/
├── DroidSans.ttf # Default fonts
└── fontawesome-webfont.ttf # used by HelloImGui
│ ├── DroidSans.ttf # Default fonts
│ └── fontawesome-webfont.ttf # used by HelloImGui
```

### Standard usage
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// Any file in this directory will be copied to the app build directory
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!doctype html>
<html lang="en-us">
<head>
<link rel="icon" type="image/x-icon" href="@HELLO_IMGUI_FAVICON@">
<!--
You could include your own custom CSS and JS here, e.g.:
<script src="custom.js"></script>
Any file located in assets/app_settings/emscripten/ will be copied to the build directory.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>@HELLO_IMGUI_ICON_DISPLAY_NAME@</title>
<style>
body { margin: 0; background-color: black }
.emscripten {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
image-rendering: optimizeSpeed;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
</style>
</head>
<body>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
preRun: [],
postRun: [],
print: (function() {
return function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
console.log(text);
};
})(),
printErr: function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
console.error(text);
},
canvas: (function() {
var canvas = document.getElementById('canvas');
//canvas.addEventListener("webglcontextlost", function(e) { alert('FIXME: WebGL context lost, please reload the page'); e.preventDefault(); }, false);
return canvas;
})(),
setStatus: function(text) {
console.log("status: " + text);
},
monitorRunDependencies: function(left) {
// no run dependencies to log
}
};
window.onerror = function() {
console.log("onerror: " + event);
};
</script>
{{{ SCRIPT }}}
</body>
</html>

0 comments on commit c118a47

Please sign in to comment.