I have a backyard koi/goldfish pond I like to monitor. I have a raspberry pi doing the monitoring and sending to my website. I am trying to get the csv data to load into my index.html file. I do not need to keep the data. I have index 3 created the parses the data and puts in a table. I am having a hard time understand how to add a variable to a csv field and put that variable in the html file.
<!DOCTYPE html>
<body bgcolor="000000">
<center>
<p style="color:White; font-size:50px; font-family:Couier;">Pond Temperature & Camera<br></p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30%;
padding: 1px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="row">
<div class="column" style="background-color:#000000; color:white;">
<h2>Bio Falls Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Stream Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Waterfall Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Deep End Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Skimmer Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Outside Air Temperature</h2>
<p> ° F</p>
</div>
</div>
<img id="jpeg_0" width="800" height="600">
<script type="text/javascript">
var camera_0 = {
addEvent: function(elem, event, func ){
if (typeof (window.event) != 'undefined')
{elem.attachEvent('on' + event, func);}
else
{elem.addEventListener(event, func, false);}
},
initCamera: function(jpeg, serverUrl, token, id, interval){
this.addEvent(jpeg, 'load', function(){setTimeout(function() {camera_0.showJpegFrame(jpeg, serverUrl, token, id);}, interval);});
this.showJpegFrame(jpeg, serverUrl, token, id);
},
showJpegFrame: function(jpeg, serverUrl, token, id){
jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
}
}
camera_0.initCamera(jpeg_0, "http://100.6.115.166:8100", "4fbbf273-1691-428d-bd09-6b625aeafe0f", 0, 40);
</script>
</center>
```
```
<!DOCTYPE html>
<html>
<head>
<title>Pond Temperature & Camera</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<META HTTP-EQUIV="refresh" CONTENT="15">
<h1 align="center">Pond Temperature & Camera</h1>
<br />
<br />
<div id="pond_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.ajax({
url:"pond_temp.csv",
dataType:"text",
success:function(data)
{
var pond_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<pond_data.length; count++)
{
var cell_data = pond_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#pond_table').html(table_data);
}
});
});
</script>
```
First probe temp is 66.4
Second probe temp is 66.2
Third probe temp is 65.4
Fourth probe temp is 66.5
Fifth probe temp is 65.5
```
After looking at your code some more, and looking at your post again, the code below is an attempt at helping you get to what you are trying to do, here.
Some of the main changes to note are in the HTML part where you have the "° F" parts. In order to let your program know where to put the temperature data in the HTML, I added some id tags with names that match the various temperatures.
Taking the first temperature for example, the changed HTML looks like this:
<div class="column" style="background-color:#000000; color:white;">
<h2>Bio Falls Temperature</h2>
<p id="bio_falls_temp"></p>
</div>
Another major area of change is in the $(document).ready(function(){ ... }); part of your code. I've added comments throughout that section to help explain what is happening there. Basically, the code is looping through your incoming data file based on the assumption that the data looks like your data example (with an extra temperature at the end) like this:
68.9 68.8 68.9 69.3 70.1 80.1
If your data file is actually delimited with commas instead of spaces, just make sure to change this line in the example code below:
let pond_data_parts = pond_data[i].split(' ');
to this:
let pond_data_parts = pond_data[i].split(',');
The new/adjusted code loops through each line of the data file and then loops through each of the temperature data items in a row of data. If you have multiple lines of data in your data file, this code approach loops through each line and I think the last row of data in your data file is what would show up last (and then stay) in your HTML temperature "table".
Finally, another part of the new code to note is the part where the temperature data values are actually placed in the HTML temperature "table". This is especially done with the following lines of code inside of the related loops:
// Find element in HTML where temperature data will be placed
let item = document.querySelector('#' + pond_data_var_names[j]);
// Put temperature data in HTML along with "° F" part
item.innerHTML = pond_data_parts[j] + ' ° F';
The actual id values that are selected with the document.querySelector() are listed earlier in the code:
let pond_data_var_names = [
'bio_falls_temp',
'stream_temp',
'waterfall_temp',
'deep_end_temp',
'skimmer_temp',
'outside_air_temp'
];
These are each looped through and the resulting temperature data is set in the HTML temperature "table" with this line:
item.innerHTML = pond_data_parts[j] + ' ° F';
If the temperatures are not showing up in the right spots in your HTML temperature "table", you might need to rearrange the order of the items in pond_data_var_names area. I just took a simple approach for this code example and assumed that your data values from the data file go left to right, starting at Bio Falls Temperature, then Stream Temperature, then Waterfall Temperature, then Deep End Temperature, then Skimmer Temperature, and then Outside Air Temperature.
In addition to the additions/changes I went over, I also rearranged some of your HTML so that there is a consolidated <head></head> section and combined some of the code from both of your example HTML files in your original post for this code. Also formatted the code in general, but you can change that if need be.
Here is what the result of my code attempt looks like based on your code:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30%;
padding: 1px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body bgcolor="000000">
<center>
<p style="color:White; font-size:50px; font-family:Couier;">Pond Temperature & Camera<br></p>
<div class="row">
<div class="column" style="background-color:#000000; color:white;">
<h2>Bio Falls Temperature</h2>
<p id="bio_falls_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Stream Temperature</h2>
<p id="stream_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Waterfall Temperature</h2>
<p id="waterfall_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Deep End Temperature</h2>
<p id="deep_end_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Skimmer Temperature</h2>
<p id="skimmer_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Outside Air Temperature</h2>
<p id="outside_air_temp"></p>
</div>
</div>
<img id="jpeg_0" width="800" height="600">
<script type="text/javascript">
var camera_0 = {
addEvent: function(elem, event, func ) {
if (typeof (window.event) != 'undefined') {
elem.attachEvent('on' + event, func);
} else {
elem.addEventListener(event, func, false);
}
},
initCamera: function(jpeg, serverUrl, token, id, interval) {
this.addEvent(jpeg, 'load', function() {
setTimeout(function() {
camera_0.showJpegFrame(jpeg, serverUrl, token, id);
}, interval);
});
this.showJpegFrame(jpeg, serverUrl, token, id);
},
showJpegFrame: function(jpeg, serverUrl, token, id) {
jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
}
}
camera_0.initCamera(jpeg_0, "http://100.6.115.166:8100", "4fbbf273-1691-428d-bd09-6b625aeafe0f", 0, 40);
// These items are used later to specify where data should be put in HTML
let pond_data_var_names = [
'bio_falls_temp',
'stream_temp',
'waterfall_temp',
'deep_end_temp',
'skimmer_temp',
'outside_air_temp'
];
$(document).ready(function(){
$.ajax({
url: "pond_temp.csv",
dataType: "text",
success: function(data) {
// Split data file line by line
let pond_data = data.split(/\r?\n|\r/);
// Remove empty row if found
if (pond_data[pond_data.length-1] == "") {
pond_data.pop();
}
// Loop through lines from data file
for (let i = 0; i < pond_data.length; ++i) {
// Split up line of data using space as delimiter
let pond_data_parts = pond_data[i].split(' ');
// Loop through each item from line of data
for (let j = 0; j < pond_data_parts.length; ++j) {
// Find element in HTML where temperature data will be placed
let item = document.querySelector('#' + pond_data_var_names[j]);
// Put temperature data in HTML along with "° F" part
item.innerHTML = pond_data_parts[j] + ' ° F';
}
}
}
});
});
</script>
</center>
</body>
</html>
I used a test pond_temp.csv file with the following data that you gave as an example (adding 80.1 at the end to fill the remaining HTML temperature "table" cell):
68.9 68.8 68.9 69.3 70.1 80.1
Here is what the output looks like on my side:
I hope this helps with your project!
Update:
In order to refresh the incoming pond data temperatures, you could potentially use the setInterval() method which should run every "n" milliseconds.
If you would like to refresh the data every 5 seconds, for example, here is what the end part of the earlier code example could look like:
function getPondDataAndDisplay() {
$.ajax({
url: "pond_temp.csv",
dataType: "text",
success: function(data) {
// Split data file line by line
let pond_data = data.split(/\r?\n|\r/);
// Remove empty row if found
if (pond_data[pond_data.length-1] == "") {
pond_data.pop();
}
// Loop through lines from data file
for (let i = 0; i < pond_data.length; ++i) {
// Split up line of data using space as delimiter
let pond_data_parts = pond_data[i].split(' ');
// Loop through each item from line of data
for (let j = 0; j < pond_data_parts.length; ++j) {
// Find element in HTML where temperature data will be placed
let item = document.querySelector('#' + pond_data_var_names[j]);
// Put temperature data in HTML along with "° F" part
item.innerHTML = pond_data_parts[j] + ' ° F';
}
}
}
});
}
// ref: https://developer.mozilla.org/en-US/docs/Web/API
// /WindowOrWorkerGlobalScope/setInterval
let pondDataInterval = window.setInterval(getPondDataAndDisplay, 5000);
I took the ajax part of the earlier code and placed it in its own function called getPondDataAndDisplay(). Then, you can use window.setInterval(getPondDataAndDisplay, 5000); to call the new function and run it every 5 seconds.
Also, I removed the $(document).ready(function(){ ... }); part that had surrounded the ajax part of the code, as well, for this example.
Note: Something to keep in mind with your incoming data file, though, is that it might get to be a large file after a while (with all the pond temperature data collected over time). It might be a good idea to make a copy of the data file on your own (saving it to another location), and then to clear out the incoming data file at some point in order to keep the file data somewhat small.
Related
I am trying to render a PDF document within my Flask application. For this, I am using the following HTML template:
<!DOCTYPE html>
<html>
<head>
<style>
#page {
margin:0
}
h1 {
color:white;
}
.header{
background: #0a0045;
height: 250px;
}
.center {
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align:center;
}
</style>
</head>
<body>
<div class="header">
<div class="center">
<h1>Name</h1>
</div>
</div>
</body>
</html>
I keep getting white margins at the top and right/left of my header section:
Is there a way to remove them?
Edit:
Below is the code used to generate the PDF file using WeasyPrint in my Flask app:
def generate_pdf(id):
element = Element.query.filter_by(id=id).first()
attri_dict = get_element_attri_dict_for_tpl(element)
html = render_template('element.html', attri_dict=attri_dict)
pdf = HTML(string=html).write_pdf()
destin_loc = app.config['ELEMENTS_FOLDER']
timestamp = dt.datetime.now().strftime('%Y%m%d%H%M%S')
file_name = '_'.join(['new_element', timestamp])
path_to_new_file = destin_loc + '/%s.pdf' % file_name
f = open(path_to_new_file, 'wb')
f.write(pdf)
filename = return_latest_element_path()
return send_from_directory(directory=app.config['ELEMENTS_FOLDER'],
filename=filename,
as_attachment=True)
Maybe you forgot " ; " or/and " mm ",
it works:
#page {
size: A4; /* Change from the default size of A4 */
margin: 0mm; /* Set margin on each page */
}
The weasyprint uses 3 sources of css, one of them is default user agent stylesheet
(https://doc.courtbouillon.org/weasyprint/stable/api_reference.html#supported-features)
That defines:
body {
display: block;
margin: 8px;
}
make sure to override that margin on tag and you will loose the margin.
Application is receiving data in real time (checked using alert) while to display it on the card, it gives error Internal Server Error
Same Code is running well as an independent html page but not in flask python web app.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Cosmos DB Change Feed</title>
<style>
.fade-enter-active {
transition: all 1.5s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
Welcome new
<div class="container" id="app">
<div class="row">
<div v-for="flight in flights" class="col-md-6 col-lg-4 col-xl-3" style="margin: 16px 0px;">
<div class="card">
<div class="card-body">
<h4 class="card-title">{{ flight.from }} <i class="fas fa-plane"></i> {{ flight.to }}</h4>
<transition name="fade" mode="out-in">
<h4 class="card-subtitle mb-2" :key="flight.price">${{ flight.price }}</h4>
</transition>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/#aspnet/signalr#1.0.2/dist/browser/signalr.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const apiBaseUrl = 'http://localhost:7071'
const axiosConfig = {}
const data = {
flights: []
}
const app = new Vue({
el: '#app',
data: data
})
getFlights().then(function (flights) {
flights.forEach(flightUpdated)
}).then(getConnectionInfo).then(function (info) {
let accessToken = info.accessToken
const options = {
accessTokenFactory: function () {
if (accessToken) {
const _accessToken = accessToken
accessToken = null
return _accessToken
} else {
return getConnectionInfo().then(function (info) {
return info.accessToken
})
}
}
}
const connection = new signalR.HubConnectionBuilder()
.withUrl(info.url, options)
.build()
connection.on('flightUpdated', flightUpdated)
connection.onclose(function () {
console.log('disconnected')
setTimeout(function () { startConnection(connection) }, 2000)
})
startConnection(connection)
}).catch(console.error)
function startConnection(connection) {
console.log('connecting...')
connection.start()
.then(function () { console.log('connected!') })
.catch(function (err) {
console.error(err)
setTimeout(function () { startConnection(connection) }, 2000)
})
}
function getFlights() {
return axios.post(`${apiBaseUrl}/api/GetFlights`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}
function getConnectionInfo() {
return axios.post(`${apiBaseUrl}/api/SignalRInfo`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}
function flightUpdated(updatedFlight) {
const flight = data.flights.find(f => (f.to === updatedFlight.to && f.from === updatedFlight.from))
//const flight = data.flights.find(f =>f.id === updatedFlight.id)
if (flight) {
// alert(updatedFlight.price);
//Vue.set(flight, 'from', updatedFlight.from)
// Vue.set(flight, 'to', updatedFlight.to)
Vue.set(flight, 'price', updatedFlight.price)
} else {
// alert(updatedFlight.price);
data.flights.push(updatedFlight)
}
}
</script>
</body>
</html>
Expected Result is flight details (from, to , price) in the card format. I believe it is due to {{flight.to}} syntax, I don't know how to replace it.
If the application is giving an internal server error, you're probably running it in production mode.
On your development machine,
If you're using app.run to the app, change
app.run()
to
app.run(debug=True)
However, if you're using
flask run
Then, depending on your system, you'll need to add an environment variable, information about it is very nicely explained with other configurations.
Flask Environment Configuration
When you enable the debug mode, the inbuilt debugger will tell you exactly where it ran into a problem.
i want to use a textarea whenever the Python input() function is run in Skulpt. The default is to use an alert box - i want to use a textarea instead.
i've tried to get this working, but nothing happens when i try this example:
https://github.com/skulpt/skulpt/issues/685
everything else works fine as i want it. please help! :D
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/debugger.js" type="text/javascript"></script>
<script src="js/skulpt.min.js" type="text/javascript"></script>
<script src="js/skulpt-stdlib.js" type="text/javascript"></script>
<title>i dont like the alert boxes</title>
<style type="text/css" media="screen">
#source{
position: relative;
width: 500px;
height: 300px;
}
#console{
position: relative;
width: 500px;
height: 100px;
overflow: scroll;
}
body{
background-color: whitesmoke;
}
#turtleCanvas{
position: relative;
border: 1px;
border-color: firebrick;
border-collapse: collapse;
border-style: solid;
width: 500px;
}
</style>
<script src="js/brython/brython.js" type="text/javascript"></script>
</head>
<body onload="brython()">
<script type="text/javascript">
function outf(text) {
var mypre = document.getElementById("console");
mypre.innerHTML = mypre.innerHTML + text;
}
function builtinRead(x) {
if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
throw "File not found: '" + x + "'";
return Sk.builtinFiles["files"][x];
}
function runit() {
var editor = ace.edit("source");
var code = editor.getValue();
document.getElementById("hiddenCode").innerHTML = code;
var prog = document.getElementById("hiddenCode").value;
var mypre = document.getElementById("console");
mypre.innerHTML = '';
Sk.pre = "console";
Sk.configure({output:outf, read:builtinRead});
(Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'turtleCanvas';
var myPromise = Sk.misceval.asyncToPromise(function() {
return Sk.importMainWithBody("<stdin>", false, prog, true);
});
myPromise.then(function(mod) {
console.log('success');
},
function(err) {
console.log(err.toString());
});
}
</script>
<textarea id="hiddenCode" style="display:none;"></textarea><br />
<div id="source">import turtle
myName = input("who r u?")
print(myName)
t = turtle.Turtle()
t.forward(100)</div>
<button type="button" onclick="runit()">Run</button>
<textarea id="programInputField">some input lines</textarea>
<pre id="console">output</pre>
<div id="turtleCanvas"></div>
<script src="js/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var window1 = ace.edit("source");
var window2 = ace.edit("console");
window1.setTheme("ace/theme/textmate");
window2.setTheme("ace/theme/twilight");
window1.getSession().setMode("ace/mode/python");
</script>
</body>
Never mind!!!! This worked perfectly, just had to change the id of my text area, otherwise i just copied and pasted it and commented out my own sk.configure line..... brilliant, thankyou whoever you are!!!!!!! :D :D :D :D
Wait for an event to occur within a function in Javascript for Skulpt
As I'm developing one chat bot for booking bus tickets I get request from user manually and returned response based on user request from API I did almost but I have doubt while passing returned data from Python to JavaScript using my IP address. Please anyone help me.
Here is my py:
import requests,json
import requests, json
from flask import render_template
import os
import time
from flask import render_template, Flask, request
from chatterbot.trainers import ListTrainer
from chatterbot import ChatBot
# # import win32api
#
# win32api.MessageBox(0, 'hello', 'title')
app = Flask(__name__)
#app.route('/',methods=['GET','POST'])
def map():
return render_template("sara.html")
#app.route('/run',methods=['GET','POST'])
def main():
print("run")
url = 'http://webapi.i2space.co.in/Buses/Sources'
payload = {'some': 'data'}
headers = {'consumerkey': 'D0106432CD19C98E0E8267EDFE9E3DF0', 'consumersecret': '43DEC493EBAE756BF7A2312F55FE5132'}
r = requests.get(url, data=json.dumps(payload), headers=headers)
print(r.text)
# response_data = r.json()
response_data = json.loads(r.text)
# print(type(response_data))
# s=(response_data[0]['Name'])
# print(s)
sorceid=request.args.get('sid')
print(sorceid)
l=''
for a in response_data:
print("hello")
print(a)
print(a['Name'])
if (sorceid==a['Name']):
l=a['Id']
print(l)
break
else:
print("no")
# list={"iden":l}
# print(list)
return render_template("sara.html",l=l)
if __name__ == '__main__':
app.run(host='192.168.1.80')
Here is my JavaScript:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<h1> HERE COMES!!!</h1>
{{ l }}
<div class="w3-container w3-teal" align="center" style="width: 50%">
<span>Bus-Bot</span>
</div>
<div class="w3-container" align="center" style="width: 50%">
<div id="chatbox">
<p class="botText"> Bus-Bot:<span>Hi! I'm Bus-Bot.</span></p>
</div>
<div id="userInput">
<input id="textInput" type="text" name="msg">
<input id="buttonInput" type="submit" value="submit" >
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<div id="Chatid" class="container">'+
'<p class="userText" >ME:<span>' + rawText + '</span></p>'+'</div>';
$("#chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("run", { msg: rawText }).done(function (data) {
alert(data);
var sou=data.l;
alert(sou);
alert(lol);
var botHtml = '<div id="botcon" class="container darker">'+'<p class="botText">Bus-Bot:<span>' + sou + '</span></p>'+'</div>';
console.log(botHtml);
$("#botcon").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if(e.which == 13) {
getBotResponse();
}
});$("#lolInput").keypress(function(e) {
if(e.which == 13) {
alert('weldone');
getBotResponse();
}
});
$("#buttonInput").click(function() {
getBotResponse();
})
</script>
<style>
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
/* Darker chat container */
.darker {
border-color: #ccc;
background-color: #ddd;
}
/* Clear floats */
.container::after {
content: "";
clear: both;
display: table;
}
/* Style images */
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
/* Style the right image */
.container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
/* Style time text */
.time-right {
float: right;
color: #aaa;
}
/* Style time text */
.time-left {
float: left;
color: #999;
}
</style>
</div>
</div>
</body>
</html>
From Python I returned response using variable name "l" but I don't know how to pass this variable to JavaScript I want to get my response below to this line
var botHtml = '<div id="botcon" class="container darker">'+'<p class="botText">Bus-Bot:<span>' + sou + '</span></p>'+'</div>';
The render_template function from Flask doesn't pass any variable from one language to the other. It just replaces strings inside the html-template that it finds with a variable that you handover to it. With
return render_template("sara.html",l=l)
you are telling the program to take the sara.html template and insert your variable l anywhere where it finds {{ l }} in the template. You should see it in the actual HTML that you are sending to the client. because you are inserting it under your heading:
<h1> HERE COMES!!!</h1>
{{ l }}
It is really more helpful if you are using it to render pure HTML and not JavaScript. Of cause you can also replace things inside your JavaScript but that is really not a sensible way to do client-server communication. If you want communication between your client and server you should think about a different architecture.
Doing the get call
url = 'http://webapi.i2space.co.in/Buses/Sources'
payload = {'some': 'data'}
headers = {'consumerkey': 'D0106432CD19C98E0E8267EDFE9E3DF0', 'consumersecret': '43DEC493EBAE756BF7A2312F55FE5132'}
r = requests.get(url, data=json.dumps(payload), headers=headers)
inside your server is probably better kept in your client-side Javascript.
I'm trying to scrap a website and I've got COOKIE_ENABLED set to true, however sometimes I get the following response from the request:
Where the corresponding response html is:
<html>
<head><base href="http://www.yad2.co.il/Nadlan/sales_info.php?NadlanID=4b3746939d3ab7d5be7c38efab70f0b59e0">
<title></title>
<meta http-equiv="Expires" content="28FEB2002" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<script type="text/javascript">
function addFields(formObj) { } function redirect(commitType) { var cookieenabled = false; if (navigator.cookieEnabled) { if (navigator.cookieEnabled==true) { var exdate=new Date(); exdate.setDate(exdate.getDate()+1); document.cookie="PRID=" +escape(genPid())+";path=/; expires="+exdate.toGMTString()+"; domain=.yad2.co.il"; cookieenabled=(document.cookie.indexOf("PRID")!=-1)? true : false; } } if (cookieenabled) { if (commitType=="reload") window.location.reload(true); else { var oFrm = document.createElement("form"); var oEnvlp = document.getElementById("frmPlsHldr"); oFrm.method = "post"; addFields(oFrm); oEnvlp.appendChild (oFrm); oFrm.submit(); } } else { var oJSCookieMSGObj = document.getElementById('JSCookieMSG'); oJSCookieMSGObj.style.display = 'block'; } }
</script>
</head>
<body style="background-color:white">
<div style='display:none' id='sbbhscc'></div><script type="text/javascript">sbbvscc='%3c%73%65%6c%65%63%74%20%69%64%3d"%73%62%62%5f%45%75%68%51%50%49%58%72"%20%73%74%79%6c%65%3d"%64%69%73%70%6c%61%79%3a%6e%6f%6e%65"%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%79%44%51%76%4f%27%3e%73%48%42%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%53%45%4c%45%43%54%45%44%20%20%76%61%6c%75%65%3d%27%4c%6f%79%74%27%3e%79%68%71%6e%4f%4b%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%49%43%46%62%71%45%27%3e%63%66%45%67%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%57%62%56%69%27%3e%75%58%77%44%4b%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%75%4b%76%57%4c%27%3e%47%6b%48%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%52%4c%54%4a%27%3e%77%44%55%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%5a%44%71%27%3e%4e%78%49%3c%2f%6f%70%74%69%6f%6e%3e%3c%2f%73%65%6c%65%63%74%3e%3c%66%6f%72%6d%20%69%64%3d"%73%62%62%5f%6e%4c%73%52%7a"%20%6d%65%74%68%6f%64%3d"%70%6f%73%74"%20%73%74%79%6c%65%3d"%64%69%73%70%6c%61%79%3a%6e%6f%6e%65"%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%4a%42%77%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%57%5a%4a%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%70%42%72%73%6e%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%47%46%70%41%4d%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%6b%77%74%79%61%7a%42%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%45%67%42%46%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%4c%64%72%62%68%4d%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%43%48%45%43%4b%45%44%20%20%76%61%6c%75%65%3d%27%56%72%57%78%49%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%6c%65%41%76%78%53%27%2f%3e%3c%2f%66%6f%72%6d%3e'; sbbgscc='%66%75%6e%63%74%69%6f%6e%20%73%62%62%5f%46%67%75%28%29%20%7b%20%20%73%62%62%4f%62%6a%20%3d%20%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%42%79%49%64%28%27%73%62%62%5f%45%75%68%51%50%49%58%72%27%29%3b%20%73%62%62%4f%62%6a%2e%6f%70%74%69%6f%6e%73%5b%32%5d%2e%73%65%6c%65%63%74%65%64%20%3d%20%74%72%75%65%3b%20%72%65%74%75%72%6e%20%73%62%62%4f%62%6a%2e%6f%70%74%69%6f%6e%73%5b%73%62%62%4f%62%6a%2e%73%65%6c%65%63%74%65%64%49%6e%64%65%78%5d%2e%74%65%78%74%2e%73%75%62%73%74%72%28%32%2c%31%29%3b%20%7d%66%75%6e%63%74%69%6f%6e%20%73%62%62%5f%73%76%77%65%28%29%20%7b%20%66%75%6e%63%74%69%6f%6e%20%73%62%62%5f%74%69%78%47%6d%41%28%6f%62%6a%41%72%72%29%20%7b%20%76%61%72%20%74%73%3d%27%27%3b%20%66%6f%72%20%28%69%3d%30%3b%20%69%3c%6f%62%6a%41%72%72%2e%6c%65%6e%67%74%68%3b%20%69%2b%2b%29%20%7b%69%66%20%28%6f%62%6a%41%72%72%5b%69%5d%2e%63%68%65%63%6b%65%64%20%3d%3d%20%74%72%75%65%29%20%74%73%20%2b%3d%6f%62%6a%41%72%72%5b%69%5d%2e%76%61%6c%75%65%3b%7d%20%72%65%74%75%72%6e%20%74%73%3b%7d%20%73%62%62%4f%62%6a%20%3d%20%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%73%42%79%4e%61%6d%65%28%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%29%3b%20%73%62%62%46%72%6d%3d%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%42%79%49%64%28%27%73%62%62%5f%6e%4c%73%52%7a%27%29%3b%20%73%62%62%4f%62%6a%5b%31%5d%2e%63%68%65%63%6b%65%64%20%3d%20%74%72%75%65%3b%20%78%3d%73%62%62%5f%74%69%78%47%6d%41%28%73%62%62%46%72%6d%2e%73%62%62%5f%64%42%4b%78%54%59%4f%66%29%3b%20%72%65%74%75%72%6e%20%78%2e%73%75%62%73%74%72%28%35%2c%31%29%3b%20%7d; function genPid() {return %73%62%62%5f%46%67%75%28%29+%73%62%62%5f%73%76%77%65%28%29; }';</script><div id='sbbfrcc' style='position: absolute; top: -10px; left: 30px; font-size:1px'></div>
<div id='JSCookieMSG' style="display:none"><big><b>Server Notice:</b></big><br/>
Please activate browser cookies to view this site.
<br/><br/>
Incident Id: 585436913aa5b
</div>
<div id='JSOffMSG'><noscript><big><b>Server Notice:</b></big><br/>
Please activate javascript to view this site.
<br/><br/>
Incident Id: 585436913aa5b
</noscript></div>
<div id='frmPlsHldr'></div>
<script type="text/javascript">
oJSOffMSG = document.getElementById('JSOffMSG'); oJSOffMSG.style.display = 'none'; try{ y=unescape(sbbvscc.replace(/^<\!\-\-\s*|\s*\-\->$/g,'')); document.getElementById('sbbhscc').innerHTML=y; x=unescape(sbbgscc.replace(/^<\!\-\-\s*|\s*\-\->$/g,'')); } catch(e){ x='function genPid() {return "jser"; }'; } document.write ('<'+'script type="text/javascri'+'pt">'+x+' redirect("reload");</'+'script>');
</script>
</body>
</html>
This seems to happen on and off and I have no idea what's going on.
Has anyone come across something similar?