DISTRHO
/
DPF
mirror of https://github.com/DISTRHO/DPF
1
0
Fork 0
Code Releases 0 Activity
Browse Source

Generate proper wasm standalone with cmake, cleanup 

Signed-off-by: falkTX <falktx@falktx.com>
pull/506/head
falkTX 6 months ago
parent
d465c51d4b
commit
64c9378e14
Signed by: falkTX <falktx@falktx.com> GPG Key ID: CDBAA37ABC74FBA0
3 changed files with 221 additions and 6 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      Makefile.plugins.mk
  2. +23
    -5
      cmake/DPF-plugin.cmake
  3. +197
    -0
      utils/emscripten.html.in

+ 1
- 1
Makefile.plugins.mk View File

@@ -144,7 +144,7 @@ JACK_FLAGS += -sUSE_SDL=2
JACK_LIBS += -sUSE_SDL=2 JACK_LIBS += -sUSE_SDL=2
JACK_LIBS += -sMAIN_MODULE -ldl JACK_LIBS += -sMAIN_MODULE -ldl


ifneq ($(FILE_BROWSER_DISABLED),true)
ifeq ($(USE_FILE_BROWSER),true)
JACK_LIBS += -sEXPORTED_RUNTIME_METHODS=FS,cwrap JACK_LIBS += -sEXPORTED_RUNTIME_METHODS=FS,cwrap
endif endif




+ 23
- 5
cmake/DPF-plugin.cmake View File

@@ -237,7 +237,11 @@ function(dpf_add_plugin NAME)
### ###
foreach(_target ${_dpf_plugin_TARGETS}) foreach(_target ${_dpf_plugin_TARGETS})
if(_target STREQUAL "jack") if(_target STREQUAL "jack")
dpf__build_jack("${NAME}" "${_dgl_has_ui}" "${_dpf_plugin_FORCE_NATIVE_AUDIO_FALLBACK}" "${_dpf_plugin_SKIP_NATIVE_AUDIO_FALLBACK}")
dpf__build_jack("${NAME}"
"${_dgl_has_ui}"
"${_dpf_plugin_FORCE_NATIVE_AUDIO_FALLBACK}"
"${_dpf_plugin_SKIP_NATIVE_AUDIO_FALLBACK}"
"${_dpf_plugin_USE_FILE_BROWSER}")
elseif(_target STREQUAL "ladspa") elseif(_target STREQUAL "ladspa")
dpf__build_ladspa("${NAME}") dpf__build_ladspa("${NAME}")
elseif(_target STREQUAL "dssi") elseif(_target STREQUAL "dssi")
@@ -352,8 +356,15 @@ function(dpf_add_executable NAME)
dpf__add_executable("${NAME}" ${_no_srcs}) dpf__add_executable("${NAME}" ${_no_srcs})
target_include_directories("${NAME}" PUBLIC "${DPF_ROOT_DIR}/distrho") target_include_directories("${NAME}" PUBLIC "${DPF_ROOT_DIR}/distrho")


if(EMSCRIPTEN)
target_link_options("${NAME}" PRIVATE -sMAIN_MODULE)
endif()

if(_dpf_plugin_USE_FILE_BROWSER) if(_dpf_plugin_USE_FILE_BROWSER)
target_compile_definitions("${NAME}" PUBLIC "DGL_USE_FILE_BROWSER") target_compile_definitions("${NAME}" PUBLIC "DGL_USE_FILE_BROWSER")
if(EMSCRIPTEN)
target_link_options("${NAME}" PRIVATE -sEXPORTED_RUNTIME_METHODS=FS,cwrap)
endif()
endif() endif()


if(_dpf_plugin_USE_WEB_VIEW) if(_dpf_plugin_USE_WEB_VIEW)
@@ -393,7 +404,7 @@ endfunction()
# #
# Add build rules for a JACK/Standalone program. # Add build rules for a JACK/Standalone program.
# #
function(dpf__build_jack NAME HAS_UI FORCE_NATIVE_AUDIO_FALLBACK SKIP_NATIVE_AUDIO_FALLBACK)
function(dpf__build_jack NAME HAS_UI FORCE_NATIVE_AUDIO_FALLBACK SKIP_NATIVE_AUDIO_FALLBACK USE_FILE_BROWSER)
dpf__create_dummy_source_list(_no_srcs) dpf__create_dummy_source_list(_no_srcs)


dpf__add_executable("${NAME}-jack" ${_no_srcs}) dpf__add_executable("${NAME}-jack" ${_no_srcs})
@@ -404,6 +415,15 @@ function(dpf__build_jack NAME HAS_UI FORCE_NATIVE_AUDIO_FALLBACK SKIP_NATIVE_AUD
RUNTIME_OUTPUT_DIRECTORY "${PROJECT_BINARY_DIR}/bin/$<0:>" RUNTIME_OUTPUT_DIRECTORY "${PROJECT_BINARY_DIR}/bin/$<0:>"
OUTPUT_NAME "${NAME}") OUTPUT_NAME "${NAME}")


if(EMSCRIPTEN)
configure_file("${DPF_ROOT_DIR}/utils/emscripten.html.in"
"${PROJECT_BINARY_DIR}/bin/${NAME}.html" @ONLY)
target_link_options("${NAME}-jack"
PRIVATE
-sMAIN_MODULE
$<$<BOOL:${USE_FILE_BROWSER}>:-sEXPORTED_RUNTIME_METHODS=FS,cwrap>)
endif()

if(NOT FORCE_NATIVE_AUDIO_FALLBACK) if(NOT FORCE_NATIVE_AUDIO_FALLBACK)
target_compile_definitions("${NAME}" PUBLIC "HAVE_JACK") target_compile_definitions("${NAME}" PUBLIC "HAVE_JACK")
target_compile_definitions("${NAME}-jack" PRIVATE "HAVE_GETTIMEOFDAY") target_compile_definitions("${NAME}-jack" PRIVATE "HAVE_GETTIMEOFDAY")
@@ -1536,9 +1556,7 @@ endfunction()
function(dpf__add_executable NAME) function(dpf__add_executable NAME)
add_executable("${NAME}" ${ARGN}) add_executable("${NAME}" ${ARGN})
dpf__set_target_defaults("${NAME}") dpf__set_target_defaults("${NAME}")
if(EMSCRIPTEN)
set_property(TARGET "${NAME}" PROPERTY SUFFIX ".html")
elseif(MINGW)
if(MINGW)
target_link_libraries("${NAME}" PRIVATE "-static") target_link_libraries("${NAME}" PRIVATE "-static")
endif() endif()
endfunction() endfunction()


+ 197
- 0
utils/emscripten.html.in View File

@@ -0,0 +1,197 @@
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="@NAME@" />
<meta name="theme-color" content="#111111">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" user-scalable="no">
<title>@NAME@</title>
<style>
html {
background-color: #111111;
color: #eee;
overflow: hidden;
}
body, canvas {
padding: 0;
margin: 0;
}

#canvas_file_open {
display: none;
}

#canvas_wrapper {
--device-pixel-ratio: 1;
display: none;
image-rendering: pixelated;
image-rendering: crisp-edges;
position: fixed;
transform-origin: 0 0 0;
transform: scale(calc(1 / var(--device-pixel-ratio)));
width: 100vw;
height: 100vh;
}

#error {
background: rgba(0,0,0,0.75);
display: none;
position: fixed;
padding: 0.5em;
left: 0;
right: 0;
width: 100%;
z-index: 2;
}

.emscripten {
display: block;
margin-left: auto;
margin-right: auto;
padding-right: 0;
text-align: center;
}

.spinner {
height: 50px;
width: 50px;
margin: 0px auto;
margin-top: 100px;
-webkit-animation: rotation .8s linear infinite;
-moz-animation: rotation .8s linear infinite;
-o-animation: rotation .8s linear infinite;
animation: rotation 0.8s linear infinite;
border-left: 10px solid rgb(0,150,240);
border-right: 10px solid rgb(0,150,240);
border-bottom: 10px solid rgb(0,150,240);
border-top: 10px solid rgb(100,0,200);
border-radius: 100%;
background-color: rgb(200,100,250);
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

</style>
</head>
<body>
<figure style="overflow:visible;" id="spinner">
<div class="spinner"></div>
<center style="margin-top:0.5em"><strong>@NAME@</strong></center>
</figure>
<div class="emscripten" id="error"></div>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
</div>
<div id="canvas_wrapper">
<input type="file" id="canvas_file_open" ></input>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
</div>

<script type='text/javascript'>
'use strict';

var wasmErrors = [];
var errorElement = document.getElementById('error');
var statusElement = document.getElementById('status');
var progressElement = document.getElementById('progress');
var spinnerElement = document.getElementById('spinner');

if (typeof(WebAssembly) === "undefined") {
wasmErrors.push('WebAssembly unsupported');
} else {
if (!WebAssembly.validate(new Uint8Array([0,97,115,109,1,0,0,0,2,8,1,1,97,1,98,3,127,1,6,6,1,127,1,65,0,11,7,5,1,1,97,3,1]))) {
wasmErrors.push('Importable/Exportable mutable globals unsupported');
}
}

if (wasmErrors.length !== 0) {
errorElement.innerHTML = 'Cannot start @NAME@:<br>' + wasmErrors.join('<br>') + '<br><br>Perhaps try a different browser?';
errorElement.style.display = 'block';
statusElement.style.display = 'none';
progressElement.style.display = 'none';
spinnerElement.style.display = 'none';
} else {
var canvasWrapper = document.getElementById('canvas_wrapper');

var Module = {
preRun: [],
postRun: function() {
statusElement.style.display = 'none';
progressElement.style.display = 'none';
spinnerElement.style.display = 'none';
canvasWrapper.style.display = 'block';
window.dispatchEvent(new Event('resize'));
},
canvas: (function() {
var canvas = document.getElementById('canvas');

// As a default initial behavior, pop up an alert when webgl context is lost. To make your
// application robust, you may want to override this behavior before shipping!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

return canvas;
})(),
setStatus: function(text) {
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
if (text === Module.setStatus.last.text) return;
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var now = Date.now();
if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
Module.setStatus.last.time = now;
Module.setStatus.last.text = text;
if (m) {
text = m[1];
progressElement.value = parseInt(m[2])*100;
progressElement.max = parseInt(m[4])*100;
progressElement.hidden = false;
spinnerElement.hidden = false;
} else {
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
if (!text) spinnerElement.hidden = true;
}
statusElement.innerHTML = text;
},
totalDependencies: 0,
monitorRunDependencies: function(left) {
this.totalDependencies = Math.max(this.totalDependencies, left);
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
}
};
Module.setStatus('Downloading...');
window.onerror = function(err) {
errorElement.innerHTML = 'Exception thrown:<br>' + err
errorElement.style.display = 'block';
spinnerElement.style.display = 'none';
Module.setStatus = function(text) {
if (text) console.error('[post-exception status] ' + text);
};
};

var jsModuleScript = document.createElement('script');
jsModuleScript.setAttribute('async', true);
jsModuleScript.setAttribute('src', "@NAME@.js");
jsModuleScript.setAttribute('type','text/javascript');
document.head.appendChild(jsModuleScript);
}
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save