new waterfall UI

IQTLabs · Mar 8, 2024 · 81fcc5b · 81fcc5b
1 parent 43c41f1
commit 81fcc5b
Show file tree

Hide file tree

Showing 10 changed files with 648 additions and 150 deletions.
diff --git a/.gitignore b/.gitignore
@@ -141,3 +141,4 @@ tests/gamutrf_test_dir/*.tar*
 *.DS_Store
 
 \#*
+*.swp
diff --git a/docker/Dockerfile.waterfall b/docker/Dockerfile.waterfall
@@ -3,6 +3,12 @@ FROM ubuntu:22.04 as installer
 ENV DEBIAN_FRONTEND noninteractive
 ENV PATH="${PATH}:/root/.local/bin"
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]
+# hadolint ignore=DL3008
+RUN apt-get update && \
+    apt install -y ca-certificates curl gnupg
+RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
+RUN echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
+RUN apt-get update && apt-get install --no-install-recommends -y -q nodejs
 RUN apt-get update && apt-get install --no-install-recommends -y -q \
     ca-certificates \
     curl \
@@ -15,6 +21,13 @@ RUN apt-get update && apt-get install --no-install-recommends -y -q \
     python3-pip && \
     curl -sSL https://install.python-poetry.org | python3 - --version 1.7.1 && \
     poetry config virtualenvs.create false
+WORKDIR /root
+RUN git clone https://github.com/twbs/bootstrap
+RUN git clone https://github.com/jquery/jquery
+WORKDIR /root/bootstrap
+RUN npm install [email protected]
+WORKDIR /root/jquery
+RUN npm install [email protected]
 WORKDIR /gamutrflib
 COPY gamutrflib /gamutrflib/
 RUN poetry install --no-interaction --no-ansi --no-dev
@@ -36,4 +49,6 @@ COPY --from=installer /root/.local /root/.local
 COPY --from=installer /usr/local /usr/local
 COPY --from=installer /gamutrflib /gamutrflib
 COPY --from=installer /gamutrfwaterfall /gamutrfwaterfall
+COPY --from=installer /root/bootstrap/dist/css/bootstrap.min.css /gamutrfwaterfall/gamutrfwaterfall/static
+COPY --from=installer /root/jquery/node_modules/jquery/dist/jquery.min.js /gamutrfwaterfall/gamutrfwaterfall/static
 CMD ["gamutrf-waterfall", "--help"]
diff --git a/gamutrfwaterfall/gamutrfwaterfall/static/styles/gamutrf.css b/gamutrfwaterfall/gamutrfwaterfall/static/styles/gamutrf.css
@@ -0,0 +1,56 @@
+#waterfall {
+    margin-top: -20px;
+}
+
+.content_container {
+    display: flex;  /*sets form and image next to each other*/
+    /*border-radius: 2%;
+    padding: 5%;*/
+}
+
+.scanner_args_form {
+    padding: 10px;
+    margin: 10px;
+}
+
+.logo_name {
+    color: white;
+}
+
+body {
+    background: #1e1e1e;
+    color: #cdcdcd;
+}
+
+/* Style the tab */
+.nav_bar {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+  /* Style the buttons inside the tab */
+.nav_bar button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+/* Change background color of buttons on hover */
+.nav_bar button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.nav_bar button.active {
+    background-color: #ccc;
+}
+
+/* .nav-link.active {
+  --bs-nav-pills-link-active-bg: #140047;
+} */
diff --git a/gamutrfwaterfall/gamutrfwaterfall/templates/base.html b/gamutrfwaterfall/gamutrfwaterfall/templates/base.html
@@ -0,0 +1,40 @@
+<html>
+    <head>
+	{% block head %}
+	<title>{% block title %}GamutRF{% endblock title %}</title>
+	<link rel="stylesheet" href="/static/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="/static/styles/gamutrf.css">
+	<script src="/static/jquery.min.js"></script>
+	{% endblock head %}
+    </head>
+    <body>
+	<div class="container">
+	    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
+	      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none ms-2">
+		<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-broadcast-pin me-2" viewBox="0 0 16 16">
+		    <path d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8"/>
+		</svg>
+		<span class="fs-4 logo_name">GamutRF</span>
+	      </a>
+
+	      <ul class="nav nav-pills me-2">
+		<li class="nav-item"><a id="waterfall_link" href="{{ url_for('serve_waterfall_page') }}" class="nav-link" aria-current="page">Waterfall</a></li>
+		<li class="nav-item"><a id="predictions_link" href="{{ url_for('serve_predictions_page') }}" class="nav-link">Predictions</a></li>
+	      </ul>
+	     </header>
+	</div>
+	<!-- <div class="nav_bar">
+	    <button id="waterfall_button" class="tablinks" onclick="location.href='{{ url_for('serve_waterfall_page') }}';">Waterfall</button>
+	    <button id="predictions_button" class="tablinks" onclick="location.href='{{ url_for('serve_predictions_page') }}';">Predictions</button>
+	</div> -->
+	{% block body %}
+	{% endblock body %}
+	<div id="footer">
+	    {% block footer %}
+	    <img class="mx-auto d-block" width="5%" src="{{ url_for('static', filename='images/iqt_white_logo.png') }}" />
+	    {% endblock %}
+	</div>
+	{% block script %}
+	{% endblock script %}
+    </body>
+</html>
diff --git a/gamutrfwaterfall/gamutrfwaterfall/templates/predictions.html b/gamutrfwaterfall/gamutrfwaterfall/templates/predictions.html
@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+{% block body %}
+    <div class="content_container d-flex align-items-center justify-content-center">
+	<div id="predictions">
+	</div>
+    </div>
+{% endblock body %}
+{% block script %}
+    <script>
+	document.getElementById("predictions_link").className += " active";
+	$(document).ready(function(){
+	    setInterval(refreshFunction, 3000);
+	});
+
+	function refreshFunction(){
+
+	    d = new Date();
+	    $("#predictions").load("{{ url_for('serve_predictions_content') }}");
+
+	}
+    </script>
+{% endblock script %}
diff --git a/gamutrfwaterfall/gamutrfwaterfall/templates/waterfall.html b/gamutrfwaterfall/gamutrfwaterfall/templates/waterfall.html
@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% block body %}
+    <div class="content_container">
+	<img id="waterfall" src="" />
+	<div class="scanner_args_form">
+	    <form action = "{{ url_for('config_form') }}" method = "post">
+		<p>Freq start:</p>
+		<p><input type="number" step="1" pattern="\d+" name="freq_start" value="{{ config_vars['freq_start']|int }}"/></p>
+		<p>Freq end:</p>
+		<p><input type="number" step="1" pattern="\d+" name="freq_end" value="{{ config_vars['freq_end']|int }}"/></p>
+		<p>Gain:</p>
+		<p><input type="number" step="1" pattern="\d+" name="igain" value="{{ config_vars['igain']|int }}"/></p>
+		<p>Tune overlap:</p>
+		<p><input type = "text" name="tuneoverlap" value="{{ config_vars['tuneoverlap'] }}"/></p>
+		<p>Tune step (# of FFTs):</p>
+		<p><input type="number" step="1" pattern="\d+" name="tune_step_fft" value="{{ config_vars['tune_step_fft']|int }}"/></p>
+		<p>Sweep seconds:</p>
+		<p><input type="number" step="1" pattern="\d+" name="sweep_sec" value="{{ config_vars['sweep_sec']|int }}"/></p>
+
+		<p><button name="reset" type="submit" value="reset">Reset</button></p>
+	    </form>
+	</div>
+    </div>
+{% endblock body %}
+{% block script %}
+    <script>
+	document.getElementById("waterfall_link").className += " active";
+	$(document).ready(function(){
+	    setInterval(refreshFunction, 1000);
+	});
+
+	function refreshFunction(){
+
+	    d = new Date();
+	    $("#waterfall").attr("src", "{{ url_for('serve_waterfall_img') }}?"+d.getTime());
+
+	}
+    </script>
+{% endblock script %}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -141,3 +141,4 @@ tests/gamutrf_test_dir/.tar
		*.DS_Store

		\#*
		*.swp