Я создаю свое первое django приложение. Я хочу в интерактивном режиме показать некоторые сюжеты. вот ссылка для моего приложения (размещенного на pythonanywhere): https://physics.pythonanywhere.com
Я создал слайдер в своем доме. html
<!DOCTYPE html>
<html>
<head>
<h1><p><font style="font-family:verdana;">Unit Intensity Plots</font></h1>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
width: 35%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body>
{% autoescape off %}
{{ plot_div }}
{% endautoescape %}
<p><font style="font-family:verdana;size=5">     Angle Range Slider</font></p>
<div class="slidecontainer">
<input type="range" min="0" max="360" value="0" class="slider" id="myRange">
<p><font style="font-family:verdana;"> Value: <span id="demo"></span>°</p>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</body>
</html>
Теперь я хочу использовать этот ползунок для изменения диапазона оси X при перемещении ползунка. Для этого мне нужно получить значение slider в моем django -views.py в качестве переменной. Что мне именно нужно, так это здесь https://physics.pythonanywhere.com/about Это в основном сюжетный слайдер. Код для этого ниже в about.views.py. Я попытался добавить это в мой home.views.py, но это не сработало, как я думал (я не знаю, испортил ли я или почему, но у меня произошла ошибка памяти на моем django сервере). Поэтому я переключился на html слайдер. Вот ниже мой views.py
views.py
from django.shortcuts import render
from plotly.offline import plot
import plotly.graph_objs as go
import math as m
import numpy as np
def home(request):
x = np.linspace(0, 360, 361)
# Initialize figure
fig = go.Figure()
# Add Traces
# Polarizer 3
fig.add_trace(
go.Scatter(x=x,
y=(2 + 2 * np.sin(2 * x * m.pi / 180) + 2 * pow(np.sin(x * m.pi / 180), 2)) / (4 * m.sqrt(2)),
name="P3 Plot",
visible=False,
line=dict(color="#d62728")))
# Polarizer 4
fig.add_trace(
go.Scatter(x=x,
y=(1 + 2 * np.sin(x * m.pi / 180) * np.cos(x * m.pi / 180)) / 2,
name="P4 Plot",
visible=False,
line=dict(color="#33CFA5")))
# Quarter Wave Plate
fig.add_trace(
go.Scatter(x=x,
y=pow(np.cos(x * m.pi / 180), 2),
name="QWP Plot",
visible=False,
line=dict(color="#1f77b4")))
# Half Wave Plate 1
fig.add_trace(
go.Scatter(x=x,
y=pow(np.cos(x * 2 * m.pi / 180), 2),
name="HWP Detector A Plot",
visible=False,
line=dict(color="#bcbd22")))
# Half Wave Plate 2
fig.add_trace(
go.Scatter(x=x,
y=pow(np.sin(x * 2 * m.pi / 180), 2),
name="HWP Detector B Plot",
visible=False,
line=dict(color="#7f7f7f")))
# Main Polarizer 1
fig.add_trace(
go.Scatter(x=x,
y=pow(np.cos(x * m.pi / 180), 2),
name="P Detector A Plot",
visible=False,
line=dict(color="#9467bd")))
# Main Polarizer 2
fig.add_trace(
go.Scatter(x=x,
y=pow(np.sin(x * m.pi / 180), 2),
name="P Detector B Plot",
visible=False,
line=dict(color="#ff7f0e")))
fig.update_layout(xaxis={'title': 'Angle (Degrees)'},
yaxis={'title': 'Unit Intensity (W/m^2)'},
updatemenus=[
dict(
active=0,
buttons=list([
dict(label="None",
method="update",
args=[{"visible": [False, False, False, False, False, False, False]},
{"title": "Select any plot from drop down menu"}]),
dict(label="P3 Plot",
method="update",
args=[{"visible": [True, False, False, False, False, False, False]},
{"title": "Polarizer 3 vs Unit Intensity"}]),
dict(label="P4 Plot",
method="update",
args=[{"visible": [False, True, False, False, False, False, False]},
{"title": "Polarizer 4 vs Unit Intensity"}]),
dict(label="QWP Plot",
method="update",
args=[{"visible": [False, False, True, False, False, False, False]},
{"title": "QWP vs Unit Intensity"}]),
dict(label="HWP Plot",
method="update",
args=[{"visible": [False, False, False, True, True, False, False]},
{"title": "HWP vs Unit Intensity"}]),
dict(label="P Plot",
method="update",
args=[{"visible": [False, False, False, False, False, True, True]},
{"title": "Polarizer vs Unit Intensity"}]),
dict(label="All",
method="update",
args=[{"visible": [True, True, True, True, True, True, True]},
{"title": "Overlapped Plots"}])
]),
)
])
# Set title
fig.update_layout(title_text="Select any plot from drop down menu")
plot_div = plot(fig, auto_open=True, output_type='div')
return render(request, 'home.html', context={'plot_div': plot_div})
def about(request):
fig = go.Figure()
# Add traces, one for each slider step
for step in np.arange(0, 36.10, 0.10):
x = step * np.arange(0, 10.00, 0.01)
fig.add_trace(
go.Scatter(
visible=False,
line=dict(color="#00CED1", width=6),
name="? = " + str(step),
x=x,
y=(2 + 2 * np.sin(2 * x * m.pi / 180.00) + 2 * pow(np.sin(x * m.pi / 180.00), 2)) / (4 * m.sqrt(2))
))
# Make 10th trace visible
fig.data[360].visible = True
# Create and add slider
steps = []
for i in range(len(fig.data)):
step = dict(
method="restyle",
args=["visible", [False] * len(fig.data)],
)
step["args"][1][i] = True # Toggle i'th trace to "visible"
steps.append(step)
sliders = [dict(
active=360,
currentvalue={"prefix": "Frequency: "},
pad={"t": 50},
steps=steps
)]
fig.update_layout(
sliders=sliders
)
plot_div = plot(fig, auto_open=True, output_type='div')
return render(request, 'p3plot.html', context={'plot_div': plot_div})
Теперь, если есть какой-либо слайдер, который может работать в этом случае, мне подойдет или иным способом получить html значение слайдера в моем приложении django. (Я потратил недели только на создание этого простого приложения, так как это мой первый раз в программировании. Буду признателен за любые предложения, если таковые имеются).