Hi i am making a Robot control system, i want to control it through a website i have made. However, i cant find a way to link this up to python code to control the Raspberry pi GPIO.
The active version of my website is at www.awesomecoding.co.uk and here is the source code of the html:
<html>
<head>
<style type="text/css">
#commands{
text-align: center;
color: FF8300;
font-size: 100px;
}
.controllbox{
width: 610px;
margin: 0 auto;
}
#arrowUp{
text-align: center;
position: static;
}
#arrowRight{
text-align: right;
position: static;
margin-top: 0;
}
#arrowDown{
text-align: center;
position: static;
}
#arrowLeft{
text-align: left;
position: static;
margin-top: -200px;
}
#stop{
width: 120px;
height: auto;
margin: 0 auto;
margin-top: -65%;
margin-left: 34%;
text-align: center;
position: static;
}
</style>
</head>
<body>
<h1 id="commands">Controll Me!!</h1>
<div class="controllBox">
<div id="arrowUp"><img src="arrowUp.jpg" class="controll" id="button1"></div>
<div id="arrowRight"><img src="arrowRight.jpg" class="controll" id="button2"></div>
<div id="arrowLeft"><img src="arrowLeft.jpg" class="controll" id="button3"></div>
<div id="arrowDown"><img src="arrowDown.jpg" class="controll" id="button4"></div>
<div id="stop"><img src="stop.jpg" class="controll" id="button5"></div>
</div>
<script type="text/javascript">
document.getElementById('button1').onclick = function(){
document.getElementById('commands').innerHTML = 'Foward'
}
document.getElementById('button2').onclick = function(){
document.getElementById('commands').innerHTML = 'Right'
}
document.getElementById('button3').onclick = function(){
document.getElementById('commands').innerHTML = 'Left'
}
document.getElementById('button4').onclick = function(){
document.getElementById('commands').innerHTML = 'Backwards'
}
document.getElementById('button5').onclick = function(){
document.getElementById('commands').innerHTML = 'Stop'
}
</script>
</body>
I am looking to see if anyone knows of an easy yet lag free way to do this.
I thank you for and advice you can add towards this project i am doing.
the best and easy way is to use python flask framework at the back-end
Flask Doc,
Flask Tutorial
Pyscript is a new development project that will allow you to implement Python code directly into your HTML document.
First add the following into your <head> section like this:
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
Then just input these tags inside of your <head> or <body> tags.
<py-script>
Your code here
</py-script>
Hope this helps!
Related
I'm relatively new to coding websites and I had a question about positioning material and window shrinkage I hope anyone could answer!
I wanted to place an image, a message, and a password input around the center (It worked on my screen but for the code snippet below [you may have to scroll around to see anything], there is no space below the password line, so I'm obviously doing something wrong.. it's suppose to be dead-center of the screen).
However, I do not think I'm positioning my elements in the most efficient way. I'm also trying to take into consideration if the user shrinks their window, scroll bars are supposed to come up and the empty space is supposed to disappear (maybe like Twitter's login page: https://twitter.com/login).
For my code, when I shrink the window, there is still empty space and I believe that is bad UI?
So in summary, if anyone could give any tips on how to efficiently position words and images and possibly how to efficiently use css to consider window shrinking, I would appreciate it so much :) Any help is welcomed and thank you again!
.pretty {
text-align: center;
color: #00008b;
font-family: Lucida Console;
position: absolute;
top: 115%;
left: 39%;
}
.pwd {
text-align: center;
position: absolute;
top: 155%;
left: 38.5%;
}
.chatbubble {
height: 14%;
width: 6%;
position: absolute;
top: 102%;
left: 48.5%;
}
body {
background-color: #fff0f5;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.contain {
position: relative;
height: 200px;
}
html {
height: 100%;
}
<!DOCTYPE html>
<html>
<div id="wrapper">
<head>
<title> Log In </title>
<link href="loginstyle.css" type="text/css" rel="stylesheet">
<script language="JavaScript">
function showPass(form, e) {
e.preventDefault();
var pass = form.pwd.value;
var pass1 = "webdesign"
if (pass == pass1) {
window.location.href = 'https://www.google.com'
} else {
window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
}
}
</script>
</head>
<body>
<div class="contain">
<img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
<p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>
<form class="pwd center" onsubmit="showPass(this, event)">
Password: <input type="password" name="pwd" />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</div>
</html>
You use a wrapper around body and head, which is not valid. The wrapper has to be inside your body tag:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content, including wrappers, go here -->
</body>
</html>
Do not use absolute positioning (very few exceptions...) for responsive web design! There are several posibilities to center content horizontally and vertically - there are answers for that on SO. A modern one being the use of flexbox.
Use a max-width for your wrapper, not a fixed width! On small devices the fixed width will cause a scrolling area.
An efficient way for RWD is to start with mobile view and only minimal css styles. Most elements will flow and are responsive quite naturally. Add some styles to make images responsive and you are good to go for small devices.
Add a wrapper to give a maximum width for big screens. Start implementing additonal styles with media queries for arranging and modifying elements on devices with big viewports, Change font-sizes of sections and reposition things. Google for mobile first strategy.
html {
height: 100%;
}
body {
min-height: 100%;
background-color: #fff;
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
padding: 1rem;
max-width: 960px;
background-color: #fff0f5;
}
/* login section */
.login-section {
min-height: 100vh;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
text-align: center;
}
/* typo */
.pretty {
color: #00008b;
font-family: Lucida Console;
}
<!DOCTYPE html>
<html>
<head>
<title> Log In </title>
<link href="loginstyle.css" type="text/css" rel="stylesheet">
<script language="JavaScript">
function showPass(form, e) {
e.preventDefault();
var pass = form.pwd.value;
var pass1 = "webdesign"
if (pass == pass1) {
window.location.href = 'https://www.google.com'
} else {
window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
}
}
</script>
</head>
<body>
<div id="wrapper">
<main>
<section class="login-section">
<img class="chatbubble" src="https://via.placeholder.com/150" alt="Chat Bubble" />
<p class="pretty">Welcome to a digital photobook.<br>Please enter the password to continue:</p>
<form class="pwd" onsubmit="showPass(this, event)">
Password: <input type="password" name="pwd" />
<input type="submit" value="Log In" />
</form>
</section>
</main>
</div>
</body>
</html>
Never use manual percentage positioning, like left: 155%, etc. If you want to center stuff, use absolute positioning on a wrapper container and and then center-align inside elements with text-align: center. To center containers or images, etc, just give them display: inline-block property so they can flow to center.
Here is a modification of your css, you can see it in snipet as well:
.contain {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.pretty {
text-align: center;
color: #00008b;
font-family: Lucida Console;
}
.pwd {
text-align: center;
}
.chatbubble {
display: inline-block;
}
body {
background-color: #fff0f5;
}
html {
height: 100%;
}
<!DOCTYPE html>
<html>
<div id="wrapper">
<head>
<title> Log In </title>
<link href="loginstyle.css" type="text/css" rel="stylesheet">
<script language="JavaScript">
function showPass(form, e) {
e.preventDefault();
var pass = form.pwd.value;
var pass1 = "webdesign"
if (pass == pass1) {
window.location.href = 'https://www.google.com'
} else {
window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
}
}
</script>
</head>
<body>
<div class="contain">
<img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
<p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>
<form class="pwd center" onsubmit="showPass(this, event)">
Password: <input type="password" name="pwd" />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</div>
</html>
I am struggling with this so if anyone have done this before, I would be happy to get help, because I didn't find any solution. I did this first:
<html>
<head>
<title>Website</title>
<script type="text/javascript" language="javascript">
<!-- // Copyright 2016 Leave this copyright notice intact.
// The PCman Website Popup Window Creator
// http://www.thepcmanwebsite.com/
function enter() {
window.open('https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1345717502122893%26id%3D1345708592123784','','height=240,width=550,left=80%,top=10%');
}
-->
</script>
</head>
<body onload="enter()">
</body>
</html>
And it's working well, but I need little different solution like this iframe below, only to be displayed as pop up window .
<html>
<head>
</head>
<body>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</body>
</html>
I tried many different options like javascript functions but it seems I didn't find right one. So if any one knows how to display this iframe in pop up window or pop up box on loading of the site, I would appreciate that help.
What you want (I think) is something called a lightbox. For a long time you've needed a lot of javascript or some Jquery to do this, but CSS is the way of the future.
Here's how I would do what I think you're asking
lightBoxClose = function() {
document.querySelector(".lightbox").classList.add("closed");
}
body {
margin: 0;
background-color: #EBB;
}
.lightbox {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5)
}
.toolbarLB {
text-align: right;
padding: 3px;
}
.closeLB {
color: red;
cursor: pointer;
}
.lightbox .iframeContainer {
vertical-align: middle;
background: #CCC;
padding: 2px;
}
.lightbox.closed {
display: none;
}
<h1>My Webite</h1>
<h2>Wow isn't my website great</h2>
<p><strong>It just makes you want to close the lightbox so I can get it!</strong>
</p>
<p>A Link to google
</p>
<p>A Link to no where, but all the cool kids have multiple links</p>
<!-- the actual interesting bit -->
<div class="lightbox">
<div class="iframeContainer">
<div class="toolbarLB">
<span class="closeLB" onclick="lightBoxClose()">x</span>
</div>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true"></iframe>
</div>
</div>
I haven't really styled it much, you can use CSS to make it look however you want.
I hope this is what you were looking for.
Have your popup already showing on your website when users arrive.
Put this little script just above your popup <div>. Once users arrive, and the site fully loads, the popup will disappear.
<script type="text/javascript">
$(window).load(function(){ // on window finish load
$('#popup').css("display", "none"); // turn off the popup
});
</script>
<div id="popup" style="display: block;">
<img src="spinner.gif"> // simple loading spinner
</div>
Ensure that you have loaded the jQuery API in the <head> of your page for it to work!
You can of course adjust the CSS and change the div accordingly to how you would like it :)
lightBoxClose = function() {
document.querySelector(".lightbox").classList.add("closed");
}
body {
margin: 0;
background-color: #EBB;
}
.lightbox {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5)
}
.toolbarLB {
text-align: right;
padding: 3px;
}
.closeLB {
color: red;
cursor: pointer;
}
.lightbox .iframeContainer {
vertical-align: middle;
background: #CCC;
padding: 2px;
}
.lightbox.closed {
display: none;
}
<h1>My Webite</h1>
<h2>Wow isn't my website great</h2>
<p><strong>It just makes you want to close the lightbox so I can get it!</strong>
</p>
<p>A Link to google
</p>
<p>A Link to no where, but all the cool kids have multiple links</p>
<!-- the actual interesting bit -->
<div class="lightbox">
<div class="iframeContainer">
<div class="toolbarLB">
<span class="closeLB" onclick="lightBoxClose()">x</span>
</div>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D1346255332069110%26id%3D1345708592123784&width=500" width="500" height="287" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true"></iframe>
</div>
</div>
Hello I have one confusion in my head.
I'm trying to make a logic in JS when some one click on BUTTON then automatically lead to next page after 1s.
I tried to use onclick function but I'm getting error.
I included simple html and css in purpose of texting.
Can some one help me.
Also That logic must apply to any pages.
Cheers!
#btn {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
vertical-align: center;
}
#next {
position: relative;
width: 300px;
height: 80px;
content: 'Button';
background: blue;
border-radius: 9px;
color: white;
margin-top:50px;
}
#text {
margin:auto;
position: relative;
width: 80px;
height: 40px;
padding-top: 30px;
}
<<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn"><div id="text">Button</div></div>
<div id="next"><div id="text">next</div></div>
</body>
</html>
To go to a different page after 1 second you'll want to use a combination of setTimeout() and window.location and an onclick event on your button.
I am assuming you want to use the button next to make this happen.
First thing create a second html test page.
<html>
<body>
<h1>Page 2</h1>
</body>
</html>
and in the code you shared, after the closing </div> tag for id next add the following:
<!DOCTYPE html>
<html>
<head>
<title>!!!AAA!!!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="btn">
<div id="text">Button</div>
</div>
<div id="nextPage">
<button id="next" onclick="switchLocation(0)">next</button>
</div>
<script>
function switchLocation(counter) {
if (counter == 0) {
counter = 1;
setTimeout(function() {
switchLocation(counter);
}, 1000);
} else {
window.location = "page2.html";
}
}
</script>
</body>
</html>
I edited your code slightly. Removed the extra < on the first line and changed the "next" div to a button.
The question says it all. I'm trying to make the example under examples/hash/ in the page.js examples work the same way it does, only using the { hashbang: true } option, but no avail.
I've also tried setting <base href="/hash/">, but that seems to get into an infinite redirection. After that, removing page.base('/hash') seems to do the trick, but then the location bar displays http://localhost:4000/hash/#!/hash/ and the # and #subsection links stop working properly.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Hash</title>
<style>
body p {
color: #333;
font-family: verdana;
}
#sections p {
height: 500px;
margin: 30px;
padding: 30px;
line-height: 40px;
background-color: #eee;
border: 1px solid #ccb;
font-size: 30px;
}
#sections p a {
display: block;
float: right;
font-size: 14px;
}
</style>
<script src="/page.js"></script>
</head>
<body>
<h1 id="top">Hash</h1>
<ul>
<li>#</li>
<li>#subsection</li>
<li>section?name=tana</li>
<li>section?name=tana#subsection</li>
</ul>
<div id="sections">
<p><strong>A</strong>top</p>
<p><strong>B</strong>top</p>
<p id="subsection"><strong>C</strong>top</p>
</div>
<script>
page.base('/hash');
page('/:section', section);
page();
function section(ctx, next) {
console.log('path: ', ctx.path);
console.log('querystring: ', ctx.querystring);
console.log('hash: ', ctx.hash);
console.log(' ');
}
</script>
</body>
</html>
How can I do this ?
Thanks
I'm having the same problem and couldn't find a solution. What I ended up doing was use a hacky workaround.
You can push the correct version of your url using history.pushState if you don't have to support old browsers.
history.pushState('','',location.pathname + location.search);
This cosmetically fixes the problem, but deep linking to complex paths will require a bit more logic.
I'm trying to change the cursor to a custom image with a sound effect. My current problem is the cursor disappears but the replacement image does not show up, and the sound clip is not playing. What did I do wrong?
<head>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1152px;
height:864px;
z-index:2;
left:25px;
top:25px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function setCursor() {
oBoxInner.innerText=sInput.value;
oBoxInner.style.display='block';
oBox.style.cursor="crosshair.gif";
}
</SCRIPT>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML="<embed src=\""+gunshot.mp3+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body bgcolor="#000000">
<div id="apDiv1">
<span id="gunShot" onclick="playSound('gunshot.mp3');">
<a href="3.html" onmouseover="setCursor" onmouseclick="playSound('gunshot.mp3')"> <img src="score.gif" width="1152" height="864" alt="yep" />
</a></span>
</div>
</body>
Thank you for your help.
EDIT:
I'm using dreamweaver with both PC and Mac for multiple browser compatibility, mainly IE, Firefox, Chrome, and Safari. I was thinking the .gif might be part of the issue instead of .cur. The other cursor code I'm using is this:
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#test-area').mouseout(function(){
$('#mycursor').hide();
return false;
});
$('#test-area').mouseenter(function(){
$('#mycursor').show();
return false;
});
$('#test-area').mousemove(function(e){
$('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
});
});
</script>
<style type="text/css">
#test-area {
height: 1152px;
width:864px;
border: 3px dashed #CCCCCC;
background: #FFFFFF;
padding: 20px;
cursor: none;
top: 25px;
left: 25px;
z-index:1;
}
#mycursor {
cursor: none;
width: 100px;
height: 100px;
background: url(crosshairs.cur);
repeat: no-repeat;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10000;
}
</style>
</head>
<body bgcolor="#000000">
<div id="test-area">
Move mouse over this area.
</div>
<div id="mycursor">
</div>
</body>
you have a few errors in the code
oBox is not defined. oBox.style.cursor="crosshair.gif";
The cursor is best to be .cur
the embed tag i only think supports MIDI, and your referencing gunshot.mp3 in your oncick and trying to call reffrence to \""+gunshot.mp3+"\" in the src, should be soundfile
and you have document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML TWICE?
What browsers are you wanting to support the sound? Netscape, IE6, Chrome.. ect