We are working on a Raspberry Pi project that works to remote launch a model rocket. The detonator is a website that displays a large, read "launch" button, which will prompt the raspberry pi to run a Python script that controls a GPIO pin that is connected to a relay board. The issue that I am having is when input the HTML code, the page turns up blank.
Can someone let me know what I'm doing wrong?
I have Apache downloaded to host the website - have placed the html file in the /var/www/html folder and have also attempted to overwrite the code within the index.html file that was already in the folder. Additionally, I have placed the html file in my "rocket" folder which houses the Python script. None of these options have worked.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Launch Rocket</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
var button = webiopi().createGPIOButton(17, "Launch");
$("#controls").append(button);
webiopi().refreshGPIO(true);
});
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 1280px;
height: 720px;
font-size: 100pt;
font-weight: bold;
color: white;
}
#gpio17.LOW {
background-color: Red;
}
#gpio17.HIGH {
background-color: Black;
}
</style>
</head>
<body>
<div id="controls" align="center"></div>
</body>
</html>
all attempts have resulted in a blank page.
Based on the tutorial provided by #weegee, I realized that my issue was that I had been missing some of the configuration setup.
Tutorial: https://webiopi.trouch.com/Tutorial_Basis.html#testing
I was missing the pathway to the HTML file in my /etc/webiopi/ config, and as a result the Pi was not responding the way it should.
Related
enter image description hereBelow my code runs fine, but when I preview the html file in browser, none of the styling shows up. When I inspect the element in Chrome dev tools, it shows that it is still trying to just access "style.css" instead of the path I wrote in. I cleared browser cache, I closed and reopened the page, refreshed it, saved the file and closed IDE, etc. What am I doing wrong?
body {
background: -webkit-linear-gradient(-45deg,#FFFED4,#FFEEFF)
}
h1, p, h3{
font-family: Arial;
color: black;
}
h1 {
font-size: 60px;
text-align: center;
}
p {
font-size: 25px;
text-align: center;
}
img {
display: block;
margin-left:auto;
margin-right: auto;
width: 50%;
}
h3 {
font-size: 25px;
font-family: Helvetica;
position: relative;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>We Apologize</title>
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<link rel="icon" type="image/gif/png" href="./resources/img/Brighton-McFarlane13.png">
</head>
<body>
<main>
<h1>We apologize</h1>
<p>The site is under construction right now, but we are doing our best to bring it to life! Check back in a few weeks to see the final product!</p>
<img src="https://i.imgur.com/YjMR0E6.jpg">
</main>
<article>
<p>Soon this site will be a portfolio, shop, and forum for the Brighton McFarlane YouTube Channel!</p>
<img src=./resources/img/Brighton-McFarlane12.png>
<h3>Thanks for stopping by!</h3>
</article>
</body>
<html>
sounds like an issue with your relative path. I cannot see how your file directory is set up but try href="resources/css/style.css"
if it still doesn't work you need to move up a folder.
href="../resources/css/style.css"
hope this helps!
Well turns out I'm an idiot and updated the file path of the html file and Atom didn't automatically update where the file was located, it created some sort of imaginary copy of it. I saved the file to the proper folder and it is working now.
If the resources folder is in the root of your site/folder structure, remove the . before the slash.
<link rel="stylesheet" type="text/css" href="/resources/css/style.css">
What does "./" (dot slash) refer to in terms of an HTML file path location?
/ means the root of the site;
./ means the current directory;
../ means the parent of the current directory.
First of all I checked already this, this, this, this, this, this and this. And they don't seem to be a duplicate of my problem exactly.
I have a web app, generated by Google Script. In my Code.gs, inside my doGet(e) function, I have a routing mechanism for handling different webpages, which I simplified below in a if else statement block. The doGet(e) returns different pages based on the URL, meaning, if the URL ends in ?v=page1 it returns page1.html, if it ends in ?v=about it returns about.html, and so on. It all works fine if I type the whole thing in the Address URL space in the browser.
Now, my home.html has a menu with hyperlinks for those pages. The pages open fine if I click on the links, as long as the default target is _top.
Now, my problem is: I put an iframe below the menu so all the pages would open in the same home. They failed with error below:
Load denied by X-Frame-Options: “SAMEORIGIN” from
“https://script.google.com/macros/s/AKfycbz80HBBQPcs-sYm9CsVNT7iyeBQjySR1FXN0TmgjKc/dev?v=page1”,
site does not permit cross-origin framing from
“https://n-72ap4753yyujkagtmqc7xoskf2cznnrfk23rzbq-0lu-script.googleusercontent.com/blank”.
I figured the reason would be the app was not published yet, so I publish the app and started returning page1.html with .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL). Now the error is:
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin
provided
(‘https://n-72ap4753yyujkagtmqc7xoskf2cznnrfk23rzbq-0lu-script.googleusercontent.com’)
does not match the recipient window’s origin
(‘https://script.google.com’).
The error seems to be related to the page hitting another address in googleusercontent.com and that could be causing the issue?
The home page:
As you can see below in my home.html, there are 3 links:
iframes opens the wikipedia article about HTML/Iframes in the iframe of my home.html, just fine.
Page1 should open my page1.html in my home.html iframe section, but that is where the error takes place.
about open the about.html as another page, on _top of everything, so it works fine. But as soon as the iframe issue is solved I will change the target for that one to open in the iframe as well.
My files are as below:
Code.gs:
function doGet(e) {
Logger.log(e.parameters.v);
if (e.parameters.v == "page1") {
return HtmlService.createTemplateFromFile("page1").evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
} else if (e.parameters.v == "about") {
return HtmlService.createTemplateFromFile("about").evaluate();
} else
return HtmlService.createTemplateFromFile("home").evaluate();
}
home.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
#nav-wrapper {
background-color: bisque;
padding: 8px;
}
#img-logo {
height: 2%;
width: 2%
}
#nav {
display: inline-block;
list-style-type: none;
}
#nav > li {
display: inline-block;
padding: 0 24px 0 0;
}
#nav > li > a {
padding: 8px;
text-decoration: none;
outline: 0;
}
#nav > li > a:link, a:visited {
color: DarkSlateGray;
}
#nav > li > a:hover {
background-color: GoldenRod;
border-radius: 8px;
box-shadow: 4px 4px grey;
}
#iframePages {
width: 100%;
height: 800px;
overflow: scroll;
border: none;
}
</style>
</head>
<body>
<?
var url = ScriptApp.getService().getUrl();
var imgLogo = "https://png2.cleanpng.com/sh/e2fa53a06dccb65dbd183cfa6b13c455/L0KzQYm3VsIzN5dmj5H0aYP2gLBuTgRpbV5rfd9qbHWwcsPoif4ucKZyedC2YoLkebA0kP9tgZh0hp9xdX3kfn7vhfFlNaF0hOtwb37kfH75ifZtcZ9sRadrMnTkRoPsWPJkQJI2RqU8OEa3Q4q4UcUzQWg2UKU6OEW6Qoe1kP5o/kisspng-the-female-brain-human-brain-polygon-human-head-polygonal-rifling-5b2da62e8bc8a1.3386439115297183185726.png";
?>
<script>
var url=<?= url ?>;
console.log(url);
</script>
<nav>
<div id="nav-wrapper">
<img id="img-logo" src="<?= imgLogo ?>">
<ul id="nav">
<li>IFrames</li>
<li>Page1</li>
<li>About</li>
</ul>
</div>
</nav>
<iframe id="iframePages" name="iframePages"></iframe>
</body>
</html>
page1.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Page 1</h1>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>About</h1>
</body>
</html>
the URL:
https://script.google.com/macros/s/AKfycbxBBaGG_rZl1jAuNqDzL8O9un7bfn9Qm_cfA_nAjMxE1w-dl2U/exec
Error image:
Error in the console. Frame on the left hand side is empty.
Please keep in mind this is a simplified version of my full app which is providing the same behavior so I could share.
Can anyone please shed some light on this?
I have tried this iFrame to display Word files:
<!DOCTYPE html>
<html>
<head>
<style>
.doc {
width: 100%;
height: 700px;
}
</style>
</head>
<body>
<iframe class="doc" src="https://docs.google.com/gview?url=http://writing.engr.psu.edu/workbooks/formal_report_template.doc&embedded=true"></iframe>
</body>
</html>
This works fine for files online.
How do I do the same with files in my localhost?
You can't do that.
You need to host it somewhere for Google Docs to load it from.
I'm trying to debug a chrome extension, but the debugging tutorial doesn't work for me. When I click inspect popup the debug window opens, and instantly closes itself.
I've also tried opening the window for the extension, right clicking it, and selecting "inspect element," but with the same result.
Here is the HTML file. I removed the javascript file, just to make sure that couldn't be causing the issue.
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="popup.js"></script>-->
</head>
<body>
<img id="kitty-pic" src="http://www.tehcute.com/pics/201109/kitten-bouquet-big.jpg" />
<img id="puppy-pic" src="https://c2.staticflickr.com/6/5347/7147821499_52ba051aaa_z.jpg" />
</body>
</html>
I needed to close and reopen chrome for extension development mode to actually be activated.
I want to use an external .CSS file.
When I load a page in chrome I see only the Html part. The CSS part seems to be ignored.
So I go to inspect element and look at the sources tab an there are 2 files. When I open the html and CSS file it looks nice. But the page is still not rendered the way it should be.
Only when a edit something in the CSS file,the page gets re-rendered and everything looks fine.
When I save the html and css file together in a local folder and open the html in a browser everything looks fine too.
this is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>server</title>
<link href="server.css" rel="Stylesheet" type="text/css">
</head>
<body>
<ul class="navbar">
<li class="navbar">Assignment</li>
<li class="navbar">Solution</li>
<li class="navbar">Logout</li>
</ul>
<H1>server</H1>
</body>
</html>
And this is server.css file:
body {background-color: #efefef;}
ul.navbar {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
ul.navbar li.navbar {
display: inline;
}
ul.navbar li.navbar a.navbar {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
ul.navbar li.navbar a:hover {
color: #000;
background-color: #fff;
}
I tried searching for tornado CSS external files and found tips on using a static directory but while both files do show up as source in the element inspection I do not think anything is wrong with the tornado script.
Edit -- I set aside my stubbornness and tried the "static" approach. This works fine. So I guess that writing out a .css file is different from delivering a static .css file. There seems to be some HTML interpretation going on but I would still like to here what goes wrong and why. -- tidE
These are the handlers I use:
class CSSHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.write(file("html/server.css").read())
class MainHandler(BaseHandler):
#tornado.web.authenticated
def get(self):
self.render('html/assignment.html', title="server")
But again this part works. I can GET /assignment and I can GET /server.css. When I include the css part in a style tag inside the header of the html file everything works fine too. But this is not what I want to do. I want to provide some basic css stuff in one file for several html pages.
You need to set an appropriate content-type header for all non-html pages. self.set_header('Content-Type', 'text/css').
Also consider using StaticFileHandler (just set the static_path keyword argument to the Application constructor) instead of serving static js/css files yourself. It will take care of the content-type and other headers for you and improve cacheability.