doc: Embed WASM code in doxygen

This commit is contained in:
Peter Hartmann 2024-11-18 16:35:15 +01:00
parent c332ddaead
commit 08102e4488
5 changed files with 149 additions and 3 deletions

View File

@ -278,7 +278,9 @@ ALIASES = "accessors=\par Access functions:^^" \
"states=\par States:^^" \ "states=\par States:^^" \
"skinlet=\par Default Skinlet:^^" \ "skinlet=\par Default Skinlet:^^" \
"aspect=\par Aspect^^" \ "aspect=\par Aspect^^" \
"saqt=\sa ^^" "embedWasm=<div> <div id=\"qtspinner\"> <div id=\"qtstatus\"></div> </div> <div id=\"qt-wasm-screen\"> </div> </div> <a href=\"javascript:docSampleInit()\">Run the code!</a>"
# Set the OPTIMIZE_OUTPUT_FOR_C tag to YES if your project consists of C sources # Set the OPTIMIZE_OUTPUT_FOR_C tag to YES if your project consists of C sources
# only. Doxygen will then generate output that is more tailored for C. For # only. Doxygen will then generate output that is more tailored for C. For
@ -1313,7 +1315,7 @@ HTML_FILE_EXTENSION = .html
# of the possible markers and block names see the documentation. # of the possible markers and block names see the documentation.
# This tag requires that the tag GENERATE_HTML is set to YES. # This tag requires that the tag GENERATE_HTML is set to YES.
HTML_HEADER = HTML_HEADER = api/header.html
# The HTML_FOOTER tag can be used to specify a user-defined HTML footer for each # The HTML_FOOTER tag can be used to specify a user-defined HTML footer for each
# generated HTML page. If the tag is left blank doxygen will generate a standard # generated HTML page. If the tag is left blank doxygen will generate a standard
@ -1323,7 +1325,7 @@ HTML_HEADER =
# that doxygen normally uses. # that doxygen normally uses.
# This tag requires that the tag GENERATE_HTML is set to YES. # This tag requires that the tag GENERATE_HTML is set to YES.
HTML_FOOTER = HTML_FOOTER = api/footer.html
# The HTML_STYLESHEET tag can be used to specify a user-defined cascading style # The HTML_STYLESHEET tag can be used to specify a user-defined cascading style
# sheet that is used by each HTML page. It can be used to fine-tune the look of # sheet that is used by each HTML page. It can be used to fine-tune the look of

17
doc/api/footer.html Normal file
View File

@ -0,0 +1,17 @@
<!-- HTML footer for doxygen 1.9.8-->
<!-- start footer part -->
<!--BEGIN GENERATE_TREEVIEW-->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
<ul>
$navpath
<li class="footer">$generatedby <a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion </li>
</ul>
</div>
<!--END GENERATE_TREEVIEW-->
<!--BEGIN !GENERATE_TREEVIEW-->
<hr class="footer"/><address class="footer"><small>
$generatedby&#160;<a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion
</small></address>
<!--END !GENERATE_TREEVIEW-->
</body>
</html>

123
doc/api/header.html Normal file
View File

@ -0,0 +1,123 @@
<!-- HTML header for doxygen 1.9.8-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="$langISO">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<meta name="generator" content="Doxygen $doxygenversion"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--BEGIN PROJECT_NAME--><title>$projectname: $title</title><!--END PROJECT_NAME-->
<!--BEGIN !PROJECT_NAME--><title>$title</title><!--END !PROJECT_NAME-->
<link href="$relpath^tabs.css" rel="stylesheet" type="text/css"/>
<!--BEGIN DISABLE_INDEX-->
<!--BEGIN FULL_SIDEBAR-->
<script type="text/javascript">var page_layout=1;</script>
<!--END FULL_SIDEBAR-->
<!--END DISABLE_INDEX-->
<script type="text/javascript" src="$relpath^jquery.js"></script>
<script type="text/javascript" src="$relpath^dynsections.js"></script>
<!-- QSkinny WASM code -->
<script type="text/javascript">
async function docSampleInit()
{
const spinner = document.querySelector('#qtspinner');
const screen = document.querySelector('#qt-wasm-screen');
const status = document.querySelector('#qtstatus');
const showUi = (ui) => {
[spinner, screen].forEach(element => element.style.display = 'none');
if (screen === ui)
{
screen.style.position = 'default';
screen.style.width = '500px';
screen.style.height = '300px';
}
ui.style.display = 'block';
}
try {
showUi(spinner);
status.innerHTML = 'Loading...';
const instance = await qtLoad({
qt: {
onLoaded: () => showUi(screen),
onExit: exitData =>
{
status.innerHTML = 'Application exit';
status.innerHTML +=
exitData.code !== undefined ? ` with code ` : '';
status.innerHTML +=
exitData.text !== undefined ? ` ()` : '';
showUi(spinner);
},
entryFunction: window.createQtAppInstance,
containerElements: [screen],
}
});
} catch (e) {
console.error(e);
console.error(e.stack);
}
}
</script>
<script src="iotdashboard.js"></script>
<script type="text/javascript" src="qtloader.js"></script>
<!-- end QSkinny WASM code -->
$treeview
$search
$mathjax
$darkmode
<link href="$relpath^$stylesheet" rel="stylesheet" type="text/css" />
$extrastylesheet
</head>
<body>
<!--BEGIN DISABLE_INDEX-->
<!--BEGIN FULL_SIDEBAR-->
<div id="side-nav" class="ui-resizable side-nav-resizable"><!-- do not remove this div, it is closed by doxygen! -->
<!--END FULL_SIDEBAR-->
<!--END DISABLE_INDEX-->
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<!--BEGIN TITLEAREA-->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr id="projectrow">
<!--BEGIN PROJECT_LOGO-->
<td id="projectlogo"><img alt="Logo" src="$relpath^$projectlogo"/></td>
<!--END PROJECT_LOGO-->
<!--BEGIN PROJECT_NAME-->
<td id="projectalign">
<div id="projectname">$projectname<!--BEGIN PROJECT_NUMBER--><span id="projectnumber">&#160;$projectnumber</span><!--END PROJECT_NUMBER-->
</div>
<!--BEGIN PROJECT_BRIEF--><div id="projectbrief">$projectbrief</div><!--END PROJECT_BRIEF-->
</td>
<!--END PROJECT_NAME-->
<!--BEGIN !PROJECT_NAME-->
<!--BEGIN PROJECT_BRIEF-->
<td>
<div id="projectbrief">$projectbrief</div>
</td>
<!--END PROJECT_BRIEF-->
<!--END !PROJECT_NAME-->
<!--BEGIN DISABLE_INDEX-->
<!--BEGIN SEARCHENGINE-->
<!--BEGIN !FULL_SIDEBAR-->
<td>$searchbox</td>
<!--END !FULL_SIDEBAR-->
<!--END SEARCHENGINE-->
<!--END DISABLE_INDEX-->
</tr>
<!--BEGIN SEARCHENGINE-->
<!--BEGIN FULL_SIDEBAR-->
<tr><td colspan="2">$searchbox</td></tr>
<!--END FULL_SIDEBAR-->
<!--END SEARCHENGINE-->
</tbody>
</table>
</div>
<!--END TITLEAREA-->
<!-- end header part -->

View File

@ -1,6 +1,8 @@
/*! /*!
\class QskLinearBox QskLinearBox.h \class QskLinearBox QskLinearBox.h
\embedWasm
\brief Layout stringing items in rows and columns \brief Layout stringing items in rows and columns
QskLinearBox organizes layout items in vertical or horizontal order QskLinearBox organizes layout items in vertical or horizontal order

View File

@ -1,6 +1,8 @@
/*! /*!
\class QskSpinBox QskSpinBox.h \class QskSpinBox QskSpinBox.h
\embedWasm
\brief A control to edit, increment and decrement number values \brief A control to edit, increment and decrement number values
QskSpinBox allows the user to choose a value by: QskSpinBox allows the user to choose a value by: