Первое использование Raspberry Pi, linux и серверного оборудования, поэтому, пожалуйста, попробуйте объяснить на уровне 101
Я пытаюсь сделать экран, который обычно находится в холлах, для показа корпоративных слайдов , и погода. Мне удалось заставить погоду работать нормально, так как это базовый c бросок. Основная проблема, с которой я столкнулся, заключается в том, что я пытаюсь сделать обновление изображений так же просто, как «Бросьте изображения в папку, refre sh page ".
Изначально я сделал это с помощью настройки сервера basi c python, который автоматически использует дерево файлов местоположения, но когда я скопировал его в raspberry pi python с flask, он больше не подтверждает папку. элементы есть, но папка не работает
Другая проблема, с которой я сталкиваюсь, заключается в том, что поле дня никогда не устанавливается до выполнения функции startTime (), что приводит к нулевой ссылке на «день». Я уже окружил функцию window.onload, но это даже не заставило ее работать
Любая помощь будет принята с благодарностью, спасибо. Я знаю, что опубликовал много кода ниже, я поставил комментарий рядом с поврежденными частями
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
