[英]Raspberry Pi Fask Server: Cannot find images in folder using AJAX AND broken id search
第一次使用樹莓派，linux，服務器的東西，所以請嘗試在101級別解釋
我正在嘗試制作一個通常在大廳中可以找到的屏幕來顯示公司幻燈片和天氣。 我能夠讓天氣正常工作，因為這是一個基本的下降。我遇到的主要問題是我試圖讓更新圖像變得像“將圖像放入文件夾，刷新頁面”一樣簡單。
我最初使用基本的 python 服務器設置來制作這個，它自動使用該位置的文件樹，但是當我將它復制到帶有 flask 的樹莓派 python 時，它不再確認文件夾。 項目在那里，但文件夾不起作用
我遇到的另一個問題是，在 startTime() function 執行之前，day 字段永遠不會建立，導致 null 引用“day”。 我已經用 window.onload 包圍了 function，但這甚至沒有讓它工作
任何幫助將不勝感激，謝謝。 我知道我在下面發布了很多代碼，我在損壞的部分旁邊放了評論
from flask import Flask
app = Flask(__name__)
@app.route("/")
def index():
return """
<!doctype html>
<html lang="en">
<head>
<!-- Made June 10th, 2020 by Collin Barker, 97Cweb -->
<!-- Must be run on server opened to index location. Use command prompt to get to file folder containing index. Then start up python server -->
<!-- python -m http.server -->
<!-- https://weatherwidget.io/ -->
<!-- dateTime from https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.scroll-div {
height:150px;
overflow-y: scroll;
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
display:block;
}
.carousel{
margin-top:25px;
}
.weatherwidget-io{
margin-top:25px;
}
.clock-container{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.daytime {
background-color:#87ceeb;
color:black;
}
.sunrise {
background-color:#ffca7c;
color:black;
}
.night {
background-color:#223344;
color:white;
}
#day{
font-size: 5em;
}
.logo{
margin-top:3.5%;
}
</style>
<title>Test</title>
</head>
<body>
<!-- Page stuff goes here -->
<main class="col-12 " role="main">
<div class="row ">
<div class="col-3">
<div class="clock-container">
<!--
<div id="day"></div> <!--affected box for broken date -->
<div id="month-year"></div>
-->
<div id="clock"></div>
</div>
<a class="weatherwidget-io" href="https://forecast7.com/en/42d31n83d04/windsor/" data-label_1="WINDSOR" data-label_2="WEATHER" data-days="3" data-theme="original" >WINDSOR WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<!-- https://surfing-waves.com/feed.htm -->
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0]="https://rss.cbc.ca/lineup/canada-windsor.xml"; rssfeed_url[1]="https://rss.cbc.ca/lineup/topstories.xml";
rssfeed_frame_width="350";
rssfeed_frame_height="260";
rssfeed_scroll="on";
rssfeed_scroll_step="6";
rssfeed_scroll_bar="off";
rssfeed_target="_blank";
rssfeed_font_size="12";
rssfeed_font_face="";
rssfeed_border="on";
rssfeed_css_url="https://feed.surfing-waves.com/css/style7.css";
rssfeed_title="on";
rssfeed_title_name="";
rssfeed_title_bgcolor="#3366ff";
rssfeed_title_color="#fff";
rssfeed_title_bgimage="";
rssfeed_footer="off";
rssfeed_footer_name="rss feed";
rssfeed_footer_bgcolor="#fff";
rssfeed_footer_color="#333";
rssfeed_footer_bgimage="";
rssfeed_item_title_length="100";
rssfeed_item_title_color="#666";
rssfeed_item_bgcolor="#fff";
rssfeed_item_bgimage="";
rssfeed_item_border_bottom="on";
rssfeed_item_source_icon="off";
rssfeed_item_date="off";
rssfeed_item_description="on";
rssfeed_item_description_length="175";
rssfeed_item_description_color="#666";
rssfeed_item_description_link_color="#333";
rssfeed_item_description_tag="off";
rssfeed_no_items="0";
rssfeed_cache = "a6be76d5cf7fb849474d6758a6f37935";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. -->
<div style="color:#ccc;font-size:10px; text-align:right; width:230px;">powered by <a href="https://surfing-waves.com" rel="noopener" target="_blank" style="color:#ccc;">Surfing Waves</a></div>
<!-- end sw-rss-feed code -->
</div>
<img class="logo d-block w-100" src="/static/logo.png" >
</div>
<div class="col-9">
<div class "carousel-holder">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="slide-container">
</div>
</div>
</div>
<div class="h1">Welcome to Comfort Inn South Windsor</div>
</div>
</div>
</main>
<!-- End of page stuff -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var folder = "static/slides/";
var href=window.location.href;
var pathArray=href.split('/');
var path="";
var activated=false;
for(i=0;i<pathArray.length-1;i++){
path+=pathArray[i];
path+="/";
};
path+=folder;
console.log(path);
$.ajax({ <!-- stuff breaks here, path does not exist according to execution in chrome-->
url : path,
async: false,
success: function (data) {
**$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpg|jpe?g|png|gif)$/) ) {
var output="<div class=\\"carousel-item";
if(!activated){
output+=" active";
activated=true;
}
output+="\\"> <img class=\\"d-block w-100\\" src=\\""+ path + val +"\\"></div>";
console.log(output);
$("#slide-container").append( output );**
}
});
}
});
});
</script>
<script type="text/javascript">
window.onload=function startTime() {
var today = new Date();
var y = today.getFullYear();
var mo = today.getMonth();
var d = today.getDate();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
mo=checkTime(mo+1);
m = checkTime(m);
s = checkTime(s);
document.getElementById('day').innerHTML = d; <!-- broken line that throws null exception-->
document.getElementById('month-year').innerHTML = mo + "/" + y;
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
<!-- Background color changing -->
<!-- https://codepen.io/jamesbarnett/pen/kdDBL -->
h=s;
if (h > 19 || h <= 6){
// If time is after 7PM or before 6AM, apply night theme to ‘body’
document.body.className = "night";
}
else if (h > 6 && h < 9){
// If time is between 6AM – 9AM sunrise theme to ‘body’
document.body.className = "sunrise";
}
else{
// Else use ‘day’ theme
document.body.className = "daytime";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>
"""
if __name__ == "__main__":
app.run(host='0.0.0.0',debug=True)
與 python -m http.server 一起使用的舊代碼
<!doctype html>
<html lang="en">
<head>
<!-- Made June 10th, 2020 by Collin Barker, 97Cweb -->
<!-- Must be run on server opened to index location. Use command prompt to get to file folder containing index. Then start up python server -->
<!-- python -m http.server -->
<!-- https://weatherwidget.io/ -->
<!-- dateTime from https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
var folder = "slides/";
var href=window.location.href;
var pathArray=href.split('/');
var path="";
var activated=false;
for(i=0;i<pathArray.length-1;i++){
path+=pathArray[i];
path+="/";
};
path+=folder;
console.log(path);
$.ajax({
url : path,
async: false,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpg|jpe?g|png|gif)$/) ) {
var output="<div class=\"carousel-item";
if(!activated){
output+=" active";
activated=true;
}
output+="\"> <img class=\"d-block w-100\" src=\""+ path + val +"\"></div>";
console.log(output);
$("#slide-container").append( output );
}
});
}
});
});
</script>
<script>
function startTime() {
var today = new Date();
var y = today.getFullYear();
var mo = today.getMonth();
var d = today.getDate();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
mo=checkTime(mo+1);
m = checkTime(m);
s = checkTime(s);
document.getElementById('day').innerHTML = d;
document.getElementById('month-year').innerHTML = mo + "/" + y;
document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
<!-- Background color changing -->
<!-- https://codepen.io/jamesbarnett/pen/kdDBL -->
h=s;
if (h > 19 || h <= 6){
// If time is after 7PM or before 6AM, apply night theme to ‘body’
document.body.className = "night";
}
else if (h > 6 && h < 9){
// If time is between 6AM – 9AM sunrise theme to ‘body’
document.body.className = "sunrise";
}
else{
// Else use ‘day’ theme
document.body.className = "daytime";
}
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<style>
.scroll-div {
height:150px;
overflow-y: scroll;
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
display:block;
}
.carousel{
margin-top:25px;
}
.weatherwidget-io{
margin-top:25px;
}
.clock-container{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.daytime {
background-color:#87ceeb;
color:black;
}
.sunrise {
background-color:#ffca7c;
color:black;
}
.night {
background-color:#223344;
color:white;
}
#day{
font-size: 5em;
}
.logo{
margin-top:3.5%;
}
</style>
<title>Test</title>
</head>
<body onload="startTime()">
<!-- Page stuff goes here -->
<main class="col-12 " role="main">
<div class="row ">
<div class="col-3">
<div class="clock-container">
<!--
<div id="day"></div>
<div id="month-year"></div>
-->
<div id="clock"></div>
</div>
<a class="weatherwidget-io" href="https://forecast7.com/en/42d31n83d04/windsor/" data-label_1="WINDSOR" data-label_2="WEATHER" data-days="3" data-theme="original" >WINDSOR WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<!-- https://surfing-waves.com/feed.htm -->
<!-- start sw-rss-feed code -->
<script type="text/javascript">
<!--
rssfeed_url = new Array();
rssfeed_url[0]="https://rss.cbc.ca/lineup/canada-windsor.xml"; rssfeed_url[1]="https://rss.cbc.ca/lineup/topstories.xml";
rssfeed_frame_width="350";
rssfeed_frame_height="260";
rssfeed_scroll="on";
rssfeed_scroll_step="6";
rssfeed_scroll_bar="off";
rssfeed_target="_blank";
rssfeed_font_size="12";
rssfeed_font_face="";
rssfeed_border="on";
rssfeed_css_url="https://feed.surfing-waves.com/css/style7.css";
rssfeed_title="on";
rssfeed_title_name="";
rssfeed_title_bgcolor="#3366ff";
rssfeed_title_color="#fff";
rssfeed_title_bgimage="";
rssfeed_footer="off";
rssfeed_footer_name="rss feed";
rssfeed_footer_bgcolor="#fff";
rssfeed_footer_color="#333";
rssfeed_footer_bgimage="";
rssfeed_item_title_length="100";
rssfeed_item_title_color="#666";
rssfeed_item_bgcolor="#fff";
rssfeed_item_bgimage="";
rssfeed_item_border_bottom="on";
rssfeed_item_source_icon="off";
rssfeed_item_date="off";
rssfeed_item_description="on";
rssfeed_item_description_length="175";
rssfeed_item_description_color="#666";
rssfeed_item_description_link_color="#333";
rssfeed_item_description_tag="off";
rssfeed_no_items="0";
rssfeed_cache = "a6be76d5cf7fb849474d6758a6f37935";
//-->
</script>
<script type="text/javascript" src="//feed.surfing-waves.com/js/rss-feed.js"></script>
<!-- The link below helps keep this service FREE, and helps other people find the SW widget. Please be cool and keep it! Thanks. -->
<div style="color:#ccc;font-size:10px; text-align:right; width:230px;">powered by <a href="https://surfing-waves.com" rel="noopener" target="_blank" style="color:#ccc;">Surfing Waves</a></div>
<!-- end sw-rss-feed code -->
</div>
<img class="logo d-block w-100" src="logo.png" >
</div>
<div class="col-9">
<div class "carousel-holder">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="slide-container">
</div>
</div>
</div>
<div class="h1">Welcome to Comfort Inn South Windsor</div>
</div>
</div>
</main>
<!-- End of page stuff -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
注意：不是技術答案
我能夠解決它並讓原始代碼再次工作。 我的 Pi 正在運行 python 2.7，因此獲得正確的命令來打開 python 測試服務器修復了舊的
獲取存儲圖像時，來自Raspberry Pi服務器的響應中斷
[英]Broken response from Raspberry Pi server when GETting stored images
從Pebble到Raspberry Pi Python服務器的Ajax http請求失敗
[英]Ajax http request from Pebble to Raspberry Pi Python server fails
如何使用html輸入標簽從用戶獲取圖像並將其存儲在樹莓派上的文件夾中
[英]How to get an image from a user and store it in a folder on a raspberry pi using the html input tag
我可以使用 chrome web 藍牙低能量 android 將來自樹莓派的圖像的 stream 發送到 android 嗎？
[英]Can I send a stream of images from a raspberry pi to android using chrome web bluetooth low energy API?
如何使用 fs.appendSyncFile 寫入文件（寫入樹莓派服務器）
[英]How can I write to a file using fs.appendSyncFile (writing to raspberry pi server)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.