blob: 8e5d06931328af4a52c230ea4f83eddf59300e25 [file] [log] [blame]
<!DOCTYPE html><html lang="en-us" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Source Themes Academic 4.8.0">
<meta name="author" content="Fraunhofer FOKUS">
<meta name="description" content="">
<link rel="alternate" hreflang="en-us" href="https://staging.eclipse.org/mosaic/docs/visualization/">
<meta name="theme-color" content="#68145C">
<script src="/mosaic/js/mathjax-config.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css" integrity="sha512-MCWBwPSput2UWNwyznVFLbD2iUc1e5VsdD1zahsWVzkDSUzyHhMZ4kCS3wgYSRm0mU+glwD/Q9lSJrDPwbUL2A==" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.min.css" integrity="sha512-ZYg+hQvLlM0W9C3P6vTpes5LmJ66G2EsroxDNzwD6qiulckldb29eD9I672HL2X+LH5nRhY1sQqZLJGB+aUUPg==" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha512-H9jrZiiopUdsLpg94A333EfumgUBpO9MdbxStdeITo+KEIMaNfHNvwyjjDJb+ERPaRS6DpyRlKbvPUasNItRyw==" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-light.min.css" crossorigin="anonymous" title="hl-light">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-light.min.css" crossorigin="anonymous" title="hl-dark" disabled>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" integrity="sha512-TmDwFLhg3UA4ZG0Eb4MIyT1O1Mb+Oww5kFG0uHqXsdbyZz9DcvYQhKpGgNkamAI6h2lGGZq2X8ftOJvF/XjTUg==" crossorigin="anonymous" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.0/es5/tex-chtml.min.js" integrity="sha512-uwL1UtpYdWra2iqJlAW8Ts0s9Os6IxWLDJDF/BnWdhDmT7DEMFba3GPsFwmV3QiTNcUyl2GB5vsgycB/MOvo9g==" crossorigin="anonymous" async></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i%7CRoboto+Mono&display=swap">
<link rel="stylesheet" href="/mosaic/css/academic.css">
<link rel="alternate" href="/mosaic/docs/visualization/index.xml" type="application/rss+xml" title="Eclipse MOSAIC – A Multi-Domain and Multi-Scale Simulation Framework for Connected and Automated Mobility">
<link rel="manifest" href="/mosaic/index.webmanifest">
<link rel="icon" type="image/png" href="/mosaic/images/icon_hu6bdfb97c7e23190c70e41ca0e15a9fce_30436_32x32_fill_lanczos_center_2.png">
<link rel="apple-touch-icon" type="image/png" href="/mosaic/images/icon_hu6bdfb97c7e23190c70e41ca0e15a9fce_30436_192x192_fill_lanczos_center_2.png">
<link rel="canonical" href="https://staging.eclipse.org/mosaic/docs/visualization/">
<meta property="twitter:card" content="summary">
<meta property="og:site_name" content="Eclipse MOSAIC – A Multi-Domain and Multi-Scale Simulation Framework for Connected and Automated Mobility">
<meta property="og:url" content="https://staging.eclipse.org/mosaic/docs/visualization/">
<meta property="og:title" content="WebSocket Visualizer | Eclipse MOSAIC – A Multi-Domain and Multi-Scale Simulation Framework for Connected and Automated Mobility">
<meta property="og:description" content=""><meta property="og:image" content="https://staging.eclipse.org/mosaic/images/logo.svg">
<meta property="twitter:image" content="https://staging.eclipse.org/mosaic/images/logo.svg"><meta property="og:locale" content="en-us">
<meta property="og:updated_time" content="2019-05-05T00:00:00&#43;01:00">
<title>WebSocket Visualizer | Eclipse MOSAIC – A Multi-Domain and Multi-Scale Simulation Framework for Connected and Automated Mobility</title>
</head>
<body id="top" data-spy="scroll" data-offset="70" data-target="#TableOfContents" class=" page-mosaic page-docs page-visualization ">
<aside class="search-results" id="search">
<div class="container">
<section class="search-header">
<div class="row no-gutters justify-content-between mb-3">
<div class="col-10 col-md-3">
<div class="logo" style="background-image: url(/mosaic/img/logos/mosaic/EclipseMOSAIC-Logo-RGB-positiv.svg)"></div>
</div>
<div class="col-2 col-md-4 col-search-close">
<a class="js-search" href="#"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
</div>
</div>
<div id="search-box">
<input name="q" id="search-query" placeholder="Search..." autocapitalize="off"
autocomplete="off" autocorrect="off" spellcheck="false" type="search">
</div>
</section>
<section class="section-search-results">
<div id="search-hits">
</div>
</section>
</div>
</aside>
<nav class="navbar navbar-expand-lg navbar-light compensate-for-scrollbar" id="navbar-main">
<div class="container">
<div class="d-none d-lg-inline-flex">
<a style="visibility:visible;" class="navbar-brand" href="/mosaic/"><img src="/mosaic/images/logo.svg" alt="Eclipse MOSAIC – A Multi-Domain and Multi-Scale Simulation Framework for Connected and Automated Mobility"></a>
</div>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-content-mobile" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars"></i></span>
</button>
<div class="navbar-brand-mobile-wrapper d-inline-flex d-lg-none">
<a class="navbar-brand" href="/mosaic/"><img src="/mosaic/images/logo.svg" alt="Eclipse MOSAIC – A Multi-Domain and Multi-Scale Simulation Framework for Connected and Automated Mobility"></a>
</div>
<div id="navbar-content" class="navbar-collapse main-menu-item collapse justify-content-start">
<ul class="navbar-nav d-md-inline-flex">
<li class="nav-item">
<a class="nav-link " href="/mosaic/about/"><span>About</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/news/"><span>News</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/mosaic/docs/"><span>Documentation</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/tutorials/"><span>Tutorials</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/download/"><span>Download</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/community/"><span>Community</span></a>
</li>
</ul>
</div>
<ul class="nav-icons navbar-nav flex-row ml-auto d-flex pl-md-2">
<li class="nav-item">
<a class="nav-link js-search" href="#" aria-label="Search"><i class="fas fa-search" aria-hidden="true"></i></a>
</li>
<li class="nav-item ">
<a href="https://github.com/eclipse/mosaic" target="blank">
<i class="fab fa-github" aria-hidden="true"></i>
</a>
</li>
</ul>
<div id="navbar-content-mobile" class="navbar-collapse main-menu-item collapse justify-content-start d-lg-none">
<ul class="navbar-nav d-inline-flex">
<li class="nav-item">
<a class="nav-link " href="/mosaic/about/"><span>About</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/news/"><span>News</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/mosaic/docs/"><span>Documentation</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/tutorials/"><span>Tutorials</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/download/"><span>Download</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/mosaic/community/"><span>Community</span></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="docs container">
<div class="row flex-xl-nowrap">
<div class="docs-sidebar col-12 col-md-3 col-xl-3">
<div class="docs-version">
<a class="" data-bs-toggle="tooltip" data-bs-placement="bottom" title="The documentation corresponds to the latest version of Eclipse MOSAIC 21.1-SNAPSHOT." href="https://github.com/eclipse/mosaic">
<i class="fab fa-github"></i>&nbsp;Eclipse MOSAIC 21.1-SNAPSHOT
</a>
</div>
<form class="docs-search d-flex align-items-center">
<button class="btn docs-toggle d-md-none p-0 mr-3" type="button" data-bs-toggle="collapse" data-bs-target="#docs-nav" aria-controls="docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
<span><i class="fas fa-bars"></i></span>
</button>
<input name="q" type="search" class="form-control" placeholder="Search..." autocomplete="off">
</form>
<nav class="collapse docs-links" id="docs-nav">
<div class="docs-toc-item">
<a class="docs-toc-link" href="/mosaic/docs/getting_started/">Getting Started</a>
<ul class="nav docs-sidenav">
<li >
<a href="/mosaic/docs/getting_started/">Download</a>
</li>
<li >
<a href="/mosaic/docs/getting_started/run_mosaic/">Run Eclipse MOSAIC</a>
</li>
<li >
<a href="/mosaic/docs/getting_started/results/">Simulation Results</a>
</li>
</ul>
</div>
<div class="docs-toc-item active">
<a class="docs-toc-link" href="/mosaic/docs/visualization/">Visualization</a>
<ul class="nav docs-sidenav">
<li class="active">
<a href="/mosaic/docs/visualization/">WebSocket Visualizer</a>
</li>
<li >
<a href="/mosaic/docs/visualization/filevis/">File Output</a>
</li>
<li >
<a href="/mosaic/docs/visualization/statistics/">Statistics Output</a>
</li>
<li >
<a href="/mosaic/docs/visualization/itef/">ITEF</a>
</li>
<li >
<a href="/mosaic/docs/visualization/phabmap/">PHABMap</a>
</li>
</ul>
</div>
<div class="docs-toc-item">
<a class="docs-toc-link" href="/mosaic/docs/simulators/">Simulators</a>
<ul class="nav docs-sidenav">
<li >
<a href="/mosaic/docs/simulators/">Overview</a>
</li>
<li >
<a href="/mosaic/docs/simulators/application_simulator/">Application - Simulator</a>
</li>
<li >
<a href="/mosaic/docs/simulators/application_mapping/">Application - Mapping</a>
</li>
<li >
<a href="/mosaic/docs/simulators/traffic_simulator_sumo/">Traffic - Eclipse SUMO</a>
</li>
<li >
<a href="/mosaic/docs/simulators/network_simulator_omnetpp/">Network - OMNeT&#43;&#43;</a>
</li>
<li >
<a href="/mosaic/docs/simulators/network_simulator_ns3/">Network - ns-3</a>
</li>
<li >
<a href="/mosaic/docs/simulators/network_simulator_sns/">Network - SNS</a>
</li>
<li >
<a href="/mosaic/docs/simulators/network_simulator_cell/">Network - Cell</a>
</li>
<li >
<a href="/mosaic/docs/simulators/environment_simulator/">Environment Simulator</a>
</li>
<li >
<a href="/mosaic/docs/simulators/battery_simulator/">Battery Simulator</a>
</li>
<li >
<a href="/mosaic/docs/simulators/vms_simulator/">VMS Simulator</a>
</li>
</ul>
</div>
<div class="docs-toc-item">
<a class="docs-toc-link" href="/mosaic/docs/building_scenarios/">Building Scenarios</a>
<ul class="nav docs-sidenav">
<li >
<a href="/mosaic/docs/building_scenarios/">Simulation Scenarios</a>
</li>
<li >
<a href="/mosaic/docs/building_scenarios/scenario_convert/">Scenario Convert</a>
</li>
<li >
<a href="/mosaic/docs/building_scenarios/scenario_configuration/">Additional Scenario Configuration</a>
</li>
</ul>
</div>
<div class="docs-toc-item">
<a class="docs-toc-link" href="/mosaic/docs/develop_applications/">Create Applications</a>
<ul class="nav docs-sidenav">
<li >
<a href="/mosaic/docs/develop_applications/">Basics</a>
</li>
<li >
<a href="/mosaic/docs/develop_applications/communication/">V2X Communication</a>
</li>
<li >
<a href="/mosaic/docs/develop_applications/event_scheduler/">Event Scheduling</a>
</li>
<li >
<a href="/mosaic/docs/develop_applications/road_traffic/">Scenario Database</a>
</li>
</ul>
</div>
<div class="docs-toc-item">
<a class="docs-toc-link" href="/mosaic/docs/mosaic_configuration/">MOSAIC Configuration</a>
<ul class="nav docs-sidenav">
<li >
<a href="/mosaic/docs/mosaic_configuration/">Configuration Files</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/scenario_config/">Scenario Configuration</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/mapping_ambassador_config/">Mapping Configuration</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/environment_config/">Environment Configuration</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/sns_config/">SNS Configuration</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/cell_config/">Cell Basic Configuration</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/cell_network_config/">Cell Network Configuration</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/cell_region_config/">Cell Region Configuration</a>
</li>
<li >
<a href="/mosaic/docs/mosaic_configuration/sumo_config/">SUMO Configuration</a>
</li>
</ul>
</div>
<div class="docs-toc-item">
<a class="docs-toc-link" href="/mosaic/docs/extending_mosaic/">Extending Eclipse MOSAIC</a>
<ul class="nav docs-sidenav">
<li >
<a href="/mosaic/docs/extending_mosaic/">Core Concepts</a>
</li>
<li >
<a href="/mosaic/docs/extending_mosaic/simulator_coupling/">Simulator Coupling</a>
</li>
<li >
<a href="/mosaic/docs/extending_mosaic/interactions/">Interactions</a>
</li>
<li >
<a href="/mosaic/docs/extending_mosaic/application_ambassador_details/">Application Ambassador</a>
</li>
<li >
<a href="/mosaic/docs/extending_mosaic/sumo_ambassador_details/">Sumo Ambassador</a>
</li>
<li >
<a href="/mosaic/docs/extending_mosaic/omnetpp_details/">OMNeT&#43;&#43; Federate</a>
</li>
<li >
<a href="/mosaic/docs/extending_mosaic/delay_models/">Delay Models</a>
</li>
</ul>
</div>
<div class="docs-toc-item">
<a class="docs-toc-link" href="/mosaic/docs/api_docs/">API Documentation</a>
<ul class="nav docs-sidenav">
<li >
<a href="/mosaic/docs/api_docs/">Javadoc</a>
</li>
</ul>
</div>
<div class="nav-bottom">
<img src="/mosaic/img/logos/mosaic/EclipseMOSAIC-Medallion-RGB-single-navy.svg">
</div>
</nav>
</div>
<style>
@media (min-width:1140px) {
.docs-sidebar {
flex: 0 1 320px;
}
.docs-toc {
flex: 0 1 280px;
}
main.docs-content.no-docs-toc {
padding-bottom: 0 !important;
max-width: calc(100% - 320px) !important;
flex: 0 1 calc(100% - 320px);
width: 100%;
}
main.docs-content {
padding-bottom: 0 !important;
max-width: calc(100% - 600px) !important;
flex: 0 1 calc(100% - 600px);
width: 100%;
}
}
@media (max-width: 770px) {
main.docs-content {
max-width: 100% !important;
width: 100%;
}
}
@media (min-width: 771px) and(max-width: 1139px) {
main.docs-content.no-docs-toc {
padding-bottom: 0 !important;
max-width: calc(100% - 320px) !important;
width: 100%;
}
}
</style>
<main class="docs-content col-12 col-md-9 no-docs-toc col-xl-9 py-md-3 pl-md-4" role="main">
<article class="article">
<div class="docs-article-container">
<h1>WebSocket Visualizer</h1>
<div class="article-style">
<p>To get a simple and instant impression of a simulation or to get an idea of how fast it runs or where a
simulation is located, the WebSocket Visualizer was created. It runs in the browser and shows an OpenLayers Map
with markers, indicating the positions of all vehicles, as well as overall the simulation progresses.</p>
<figure id="figure-red-vehicles-are-sending-messages-and-green-vehicles-are-receiving-messages-at-that-specific-point-of-time-in-the-simulation">
<a data-fancybox="" href="images/mosaicwebsocketvisualizer.png" data-caption="Red vehicles are sending messages and green vehicles are receiving messages at that specific point of time in the simulation.">
<img src="images/mosaicwebsocketvisualizer.png" alt="" >
</a>
<figcaption data-pre="Figure " data-post=":" class="numbered">
Red vehicles are sending messages and green vehicles are receiving messages at that specific point of time in the simulation.
</figcaption>
</figure>
<p>To start the visualization, simply open the <code>tools/web/visualizer.html</code> in your browser. As soon as
the page has finished loading all of its content, it starts trying to connect to the WebSocket created by
the Eclipse MOSAIC simulation. The WebSocket is also enabled by default for the tutorial scenario Barnim. For
more details see the file <code>Barnim/output/output_config.xml</code>.</p>
<pre><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;configuration&gt;
&lt;output id=&quot;websocket&quot; enabled=&quot;true&quot; loader=&quot;org.eclipse.mosaic.fed.output.generator.websocket.WebsocketVisualizerLoader&quot;&gt;
&lt;synchronized&gt;true&lt;/synchronized&gt;
&lt;port&gt;46587&lt;/port&gt;
&lt;subscriptions&gt;
&lt;subscription id=&quot;VehicleUpdates&quot; enabled=&quot;true&quot;/&gt;
&lt;subscription id=&quot;V2xMessageReception&quot; enabled=&quot;true&quot;/&gt;
&lt;subscription id=&quot;V2xMessageTransmission&quot; enabled=&quot;true&quot;/&gt;
&lt;subscription id=&quot;VehicleRegistration&quot; enabled=&quot;true&quot;/&gt;
&lt;subscription id=&quot;RsuRegistration&quot; enabled=&quot;true&quot;/&gt;
&lt;subscription id=&quot;TrafficLightRegistration&quot; enabled=&quot;true&quot;/&gt;
&lt;/subscriptions&gt;
&lt;/output&gt;
&lt;/configuration&gt;
</code></pre>
<p>As soon, as the simulation is
running, you should see vehicle markers moving around and indicating if they are sending V2X messages
(green) or receiving V2X message (red).</p>
<p>The status bar at the bottom of the page indicates the current connection/simulation state. There are
four possible states:</p>
<ul>
<li><strong>Connecting</strong> - Trying to connect to the WebSocket opened by Eclipse MOSAIC.</li>
<li><strong>Simulating</strong> - Periodically fetching simulation data and updating markers accordingly.</li>
<li><strong>Simulation finished</strong> - The simulation has finished.</li>
<li><strong>Error</strong> - An error occurred. Either there was a problem caused by the WebSocket itself, or a timeout
occurred while trying to connect to the WebSocket.</li>
</ul>
<p>After the simulation has finished, you can click on the reconnect button and then run the simulation again.
You can also start the visualization at each simulation run, using the command line parameter <code>-v</code>. In that case,
Eclipse MOSAIC will automatically open the <code>tools/web/visualizer.html</code> in your default browser once the simulation
starts.</p>
<div class="alert alert-warning">
<div>
<p>By default, the WebSocket Visualizer does not work on Microsoft Edge.
UWP (UniversalWindows Platform) apps onWindows 10 do not have direct network access
but are subject to a network isolation for security reasons, preventing localhost loopback
by default. WhileMicrosoft Edge itself does allow localhost access, it treats localhost as an
Internet site, which leads to restrictions e.g. for IPC over IP. To prevent this, an exception
for Edgemust be added to the network isolation via the following command in an elevated
command prompt:</p>
<pre><code class="language-Windows">CheckNetIsolation LoopbackExempt -a -n=&quot;Microsoft.MicrosoftEdge_8wekyb3d8bbwe&quot;
</code></pre>
</div>
</div>
</div>
<div class="article-widget">
<div class="post-nav prev-next-pages col-12">
<div class="row">
<div class="post-nav-item col-6">
</div>
<div class="post-nav-item col-6 align-self-end">
<div class="meta-nav">Next</div>
<a href="/mosaic/docs/visualization/filevis/" rel="prev">File Output Generator</a>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="row">
<div class="col-sm-4 mb-3 mb-md-0">
<b>Eclipse MOSAIC</b>
<ul>
<li>
<a href="/mosaic/download/" title="Download Eclipse MOSAIC" >
Download Eclipse MOSAIC
</a>
</li>
<li>
<a href="/mosaic/docs/" title="Documentation" >
Documentation
</a>
</li>
<li>
<a href="/mosaic/tutorials/" title="Tutorials" >
Tutorials
</a>
</li>
<li>
<a href="/mosaic/community/#projects" title="Projects" >
Projects
</a>
</li>
<li>
<a href="/mosaic/publications/" title="Publications" >
Publications
</a>
</li>
</ul>
</div>
<div class="col-sm-4 mb-3 mb-md-0">
<b>Community</b>
<ul>
<li>
<a href="/mosaic/community/" title="Eclipse MOSAIC Community" >
Eclipse MOSAIC Community
</a>
</li>
<li>
<a href="/mosaic/contribution/" title="How to contribute" >
How to contribute
</a>
</li>
<li>
<a href="https://github.com/eclipse/mosaic" title="Github" target="_blank" rel="noopener">
Github
</a>
</li>
<li>
<a href="/mosaic/get_in_contact/" title="Contact &amp; Mailing list" >
Contact & Mailing list
</a>
</li>
</ul>
</div>
<div class="col-sm-4 mb-3 mb-md-0">
<b>Eclipse Foundation</b>
<ul>
<li>
<a href="https://www.eclipse.org/" title="About Eclipse Foundation" target="_blank" rel="noopener">
About Eclipse Foundation
</a>
</li>
<li>
<a href="https://www.eclipse.org/legal/privacy.php" title="Privacy Policy" target="_blank" rel="noopener">
Privacy Policy
</a>
</li>
<li>
<a href="https://www.eclipse.org/legal/termsofuse.php" title="Website terms of use" target="_blank" rel="noopener">
Website terms of use
</a>
</li>
<li>
<a href="https://www.eclipse.org/legal/copyright.php" title="Copyright" target="_blank" rel="noopener">
Copyright
</a>
</li>
<li>
<a href="https://www.eclipse.org/legal" title="Legal" target="_blank" rel="noopener">
Legal
</a>
</li>
</ul>
</div>
</div>
<div class="row justify-content-center mt-3 position-relative">
<p class="powered-by text-center font-italic mb-0 pb-0">
Powered by the
<a href="https://sourcethemes.com/academic/" target="_blank" rel="noopener">Academic theme</a> for
<a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a>.
<br>
Header image &#169; fanjianhua/ iStock
</p>
</div>
</footer>
</article>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js" integrity="sha512-BmM0/BQlqh02wuK5Gz9yrbe7VyIVwOzD1o40yi1IsTjriX/NGF37NyXHfmFzIlMmoSIBXgqDiG1VNU6kB5dBbA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js" integrity="sha512-S5PZ9GxJZO16tT9r3WJp/Safn31eu8uWrzglMahDT4dsmgqWonRY9grk3j+3tfuPr9WJNsfooOR7Gi7HL5W2jw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha512-Zq2BOxyhvnRFXu0+WE6ojpZLOU2jdnqbrM1hmVdGzyeCa1DgM3X5Q4A/Is9xA1IkbUeDd7755dNNI/PzSf2Pew==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha512-uURl+ZXMBrF4AwGaWmEetzrd+J5/8NRkWAvJx5sbPSSuOb0bZLqf+tOzniObO00BjHa/dD7gub9oCGMLPQHtQA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.8/mermaid.min.js" integrity="sha512-1tS1YUns336Mtxl+vkaLcADPwE1CPNVy3WEf7nrI7DGMMb6/FAVBgL2IzAWVBkB6vVuK94s2zVoiXcw1QZ9S1g==" crossorigin="anonymous" title="mermaid"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js" integrity="sha512-1LdB3V708w6G4QRl7NsVdTr7MDibyRXr9stQZ+EGjEE0ZPMZkA//ir7kCWmFyxdAJNIRXdR/ZeJmCV0boyiCXw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/java.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/shell.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/languages/dos.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin="anonymous"></script>
<script>const code_highlighting = true;</script>
<script>const isSiteThemeDark = false;</script>
<script>
const search_config = {"indexURI":"/mosaic/index.json","minLength":1,"threshold":0.3};
const i18n = {"no_results":"No results found","placeholder":"Search...","results":"results found"};
const content_type = {
'post': "Posts",
'project': "Projects",
'publication' : "Publications",
'talk' : "Talks"
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.1/anchor.min.js" integrity="sha512-aZotBPy6dqn8yVaLJwSrkJ+QxuxV695A4dgodAMvTU5JyNi5mhrr+LeaD3GSS+lx1SMFKNs0tu5ZMJEgNZQP2Q==" crossorigin="anonymous"></script>
<script>
anchors.add();
</script>
<script id="search-hit-fuse-template" type="text/x-template">
<div class="search-hit" id="summary-{{key}}">
<div class="search-hit-content">
<div class="search-hit-name">
<a href="{{relpermalink}}">{{title}}</a>
<div class="article-metadata search-hit-type">{{type}}</div>
<p class="search-hit-description">{{snippet}}</p>
</div>
</div>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.1/fuse.min.js" integrity="sha512-o38bmzBGX+hD3JHWUFCDA09btWaqrNmoJ3RXLlrysA7PP01Kgs4UlE4MhelE1v5dJR3+cxlR4qQlotsW7jKsnw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js" integrity="sha512-mhbv5DqBMgrWL+32MmsDOt/OAvqr/cHimk6B8y/bx/xS88MVkYGPiVv2ixKVrkywF2qHplNRUvFsAHUdxZ3Krg==" crossorigin="anonymous"></script>
<script type="application/javascript" src="/mosaic/js/academic.min.0992ad8b8d033c3858bb90b03966346a.js"></script>
<script type="application/javascript" src="/mosaic/js/mosaic-wg-cards.js"></script>
<script type="application/javascript" src="/mosaic/js/mosaic-docs.js"></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new window.bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Cite</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<pre><code class="tex hljs"></code></pre>
</div>
<div class="modal-footer">
<a class="btn btn-outline-primary my-1 js-copy-cite" href="#" target="_blank">
<i class="fas fa-copy"></i> Copy
</a>
<a class="btn btn-outline-primary my-1 js-download-cite" href="#" target="_blank">
<i class="fas fa-download"></i> Download
</a>
<div id="modal-error"></div>
</div>
</div>
</div>
</div>
</body>
</html>