Issue
I'm new to web software programming and I'm facing a problem on how to update LED indicators on my Flask page.
I'm using an AJAX call to get the value of my python variable to my HTML. And I'm wondering if it's somehow possible to access the system_mode in AJAX call and put it in the if statement at the place of current_mode.
- I know that I can display system_mode value in my HTML page by <div id="system_mode>, but I don't know how to get the value to put it in my if-statement.
- I know that I can change the value of current_mode by using render_template in python code, but I don't want to refresh the webpage. That's why I have been using AJAX, as it updates the page continuously.
Python code:
mode = "startup"
@app.route('/update', methods = ['POST'])
def update():
return jsonify({
'system_mode': mode,
})
CSS code for one LED:
.led-green {
background-color: #94E185;
box-shadow: 0px 0px 4px 1px #94E185;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
margin-left: 10px;
border: 1px solid #78D965;
border-radius: 20px;
}
.led-gray {
background-color: #c4c4c4;
box-shadow: 0px 0px 4px 1px #bdbdbd;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
margin-left: 10px;
border: 1px solid #adadad;
border-radius: 20px;
}
HTML code:
!doctype html>
<html>
<head>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
>
<!-- Your file css -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='index.css') }}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
setInterval(function() {
$.ajax({
url: '/update',
type: 'POST',
success: function(response) {
console.log(response);
$("#system_mode").html(response["system_mode"]);
},
error: function(error) {
console.log(error);
}
})
}, 2000);
</script>
<div class="container my-5">
<div class="row">
<div class="col-sm-6 text-center my-3">
<h3>Status</h3>
<div class="row text-left my-3">
<div class="col">Startup</div>
<div class="col text-right">
{% if current_mode == "startup" %}
<div class="led-green"></div>
{% else %}
<div class="led-gray"></div>
{% endif %}
</div>
</div>
<div class="row text-left my-3">
<div class="col">Ready</div>
<div class="col text-right">
{% if current_mode == "ready" %}
<div class="led-green"></div>
{% else %}
<div class="led-gray"></div>
{% endif %}
</div>
</div>
<div class="row text-left my-3">
<div class="col">Warning</div>
<div class="col text-right">
{% if current_mode == "warning" %}
<div class="led-green"></div>
{% else %}
<div class="led-gray"></div>
{% endif %}
</div>
</div>
<div class="row text-left my-3">
<div class="col">Shutdown</div>
<div class="col text-right">
{% if current_mode == "shutdown" %}
<div class="led-green"></div>
{% else %}
<div class="led-gray"></div>
{% endif %}
</div>
</div>
<div class="row text-left my-3">
<div class="col">Sleeping</div>
<div class="col text-right">
{% if current_mode == "sleeping" %}
<div class="led-green"></div>
{% else %}
<div class="led-gray"></div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks for any help! :)
Solution
Quick and dirty method (you need to specify the id of the html elem):
<div class="container my-5">
<div class="row">
<div class="col-sm-6 text-center my-3">
<h3>Status</h3>
<div class="row text-left my-3">
<div class="col">Startup</div>
<div class="col text-right">
{% if current_mode == "startup" %}
<div id="startup_id" class="led-green"></div>
{% else %}
<div id="startup_id" class="led-gray"></div>
{% endif %}
</div>
</div>
<div class="row text-left my-3">
<div class="col">Ready</div>
<div class="col text-right">
{% if current_mode == "ready" %}
<div id="ready_id" class="led-green"></div>
{% else %}
<div id="ready_id" class="led-gray"></div>
{% endif %}
</div>
</div>
<!-- continue -->
</div>
</div>
</div>
<script>
setInterval(function(){
$.ajax({
url: '/update',
type: 'POST',
success: function(response) {
//parse your response to understand which html elements should be updated
system_mode = response["system_mode"];
//clear all html elem class with:
$("#startup_id").removeClass('led-green');
$("#startup_id").addClass('led-gray');
$("#ready_id").removeClass('led-green');
$("#ready_id").addClass('led-gray');
//continue...
if (system_mode == "startup") {
$("#startup_id").addClass('led-green');
} else if (system_mode == "ready"){
$("#ready_id").addClass('led-green');
} //continue...
},
error: function(error) {
console.log(error);
}
})}, 2000);
</script>
{% if current_mode %}
<div class="led-green"></div>
{% else %}
<div class="led-gray"></div>
{% endif %}
Answered By - Matteo Pasini
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.