I haven't done any development in a long time and I'm looking to start from scratch on a project turning my raspberry pi into a Spotify remote. I have a pi 4 using the latest raspberry pi OS. I have installed apache and got to my webpage. I see my button displayed but can't seem to see any logs when I press the button. I don't know if it's my chrome settings or my code. Any insight?
<!DOCTYPE html>
<html>
<head>
<title>Spotify Web Playback SDK Quick Start</title>
</head>
<body>
<h1>Spotify Web Playback SDK Quick Start</h1>
<button id="togglePlay">Toggle Play</button>
<script>
document.getElementById('togglePlay').addEventListener('click', console.log('togglePlay Pressed'));
</script>
</body>
</html>
I've changed chrome console settings to enable "Log XMLHttpRequests", "Show timestamps" and "Preserve log upon navigation" I am seeing the "togglePlay Pressed" in the log when the page loads up but not seeing the button presses in the chrome console when I actually press. I don't want the function to run just by loading the page either can someone help a beginner out?
content-scripts.js:1 INS: content-ads.js loaded: http://192.168.1.80/
12:42:29.561 Navigated to http://192.168.1.80/
12:42:29.572 content-scripts.js:1 TSS: content-tss.js loaded: http://192.168.1.80/
12:42:29.573 content-scripts.js:1 INS: content-blocked-items.js loaded: http://192.168.1.80/
12:42:29.579 (index):10 togglePlay Pressed
12:42:29.581 content-scripts.js:1 CONTENT_SHELL: Page allowed. Skipping shell injection blocks
12:42:29.581 content-scripts.js:1 GET TAB ID RESPONSE: {tabId: 558604399}
12:42:29.583 content-scripts.js:1 TSS: excluded result: {excluded: true}
12:42:29.584 content-scripts.js:1 TSS: Excluding content tss (trigger: send-mesage)
Correct way to write event listener -
<script>
document.getElementById('togglePlay').addEventListener('click', () => {
console.log('Your Message');
});
</script>
Related
I have an device connected over "/dev/ttyUSB0" to my RaspberryPi. In Chromium I want to set it on "Remote" with a python-serial script:
import serial
ser = serial.Serial()
ser.baudrate = 9600
ser.port = "/dev/ttyUSB0"
ser.open()
ser.write("REM".encode("utf-8"))
ser.close()
this executes on a HTML ButtonClick Event compared with some js code:
function goPython() {
$.ajax({
url: "serial.py",
context: document.body
}).done(function) {
alert('finished python script');;
});
}
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="click" onclick="goPython()">GO!</button>
</body>
It runs on my Chromium Browser at the RasPi and says:
finished python script
But the device, sadly isnt in Remote Access. Anybody got a hint? Since I had very positive experiences at StackOverflow I wanted to post it here. Thanks a lot people!
I've been using javascript and paperscript to make a test program and have an interesting problem. I got this error message: Uncaught ReferenceError: veiw is not defined, I realised that I had mis-spelled view and corrected it in my code. But for some reason the error message persised, I've restarted my computer and used ctrl+f to search for 'veiw' in my files, but still the error message persists.
Here is my current code:
console.log("Hi");
view.onFrame = function(event){
project.importSVG('.../mario.svg');
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./scripts/paper-full.js"></script>
<script type="text/paperscript" src="./scripts/script.js" canvas="myCanvas"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
</canvas>
</body>
</html>
And I don't know if this is relevant but there seems to be a file generated by paper js each time the webpage is loaded called VM followed by a number.
document.__paperscript__ = function(paper,project,setup,clear,paper) {var module = { exports: {} }; veiw.onFrame = function(event){
project.importSVG('.../mario.svg');
};
//paper.setup(htmlCanvas);
//paper.project.clear();
//paper.project.importSVG('mario.svg');
return module.exports;
}
As you can see both the type and a few comments that have since been removed from the source file are still here. But I have saved the file and reloaded the page (using the url:http://localhost:8000/html.html with python's http.server running the server).
I am clueless as to what is causing this, and I can't find a reference to veiw anywhere in any of my files. Please help me. I'm being haunted by a typo I made a week ago. It won't go away.
I figured it out. And I'm posting this so other people don't have the same problem. This occurs because chrome, which I am using saved webpages so they load faster, so when you change your code... it recognises that it is the same page and doesn't load the new stuff. This can be fixed by going to your chrome history chrome://history/ and clicking 'clear browsing data' then click 'advanced' select 'cached images and files' and unselect everything else, then just set the time at the top so that you don't delete too many things you don't want to.
NOTE:
Doing this wont delete any important data, the only reason not to select 'Time range: ALL TIME' is so that webpages load faster, which is the reason this data is stored in the first place.
Here is the folder structure for my node.js project:
MySampleApp\
MySampleApp\Package.json
MySampleApp\Server.js
MySampleApp\public:
index.html - Invoked when server.js starts and shows "Click Me" button
fetchprocess.js - check button click and then show in DocumentElementID
user1.ps1 - runs Get-Process command to fetch processes
fetchprocess.js:
console.log('Client-side code running');
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
console.log('button was clicked');
document.getElementById('counter').innerHTML = "ClickedNow";
var ps = new shell({
executionPolicy: 'bypass',
noProfile: true
});
app.get("/", function (req, res) {
ps.addCommand("./user.ps1", [ {
name: 'guid', value: req.params.guid
} ])
ps.invoke().then(output => {
res.end(output); // This is to show the output in web browser
})
})
});
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<p id="counter">Loading button click data.</p>
<button id="myButton">Click me!</button>
</body>
<script src="fetchprocess.js"></script>
</html>
My objective is to execute "user1.ps1" when someone clicks on the "ClickMe" button and then show the data in HTML Div (Counter). When I try to run above code it throws an error that require is not defined in fetchprocess.js file.
Image:
I will have several scripts under the public folder that will be executed when someone clicks on other buttons on the web app. What is the best folder structure for such project.
Thank you very much
TL; DR; There is no way you can execute Node.js code in a browser.
Looks like you messaged up with libraries. You are trying to execute some Node.js code in the browser.
<script src="fetchprocess.js"></script>
Here you are loading the script in the browser. The truth is that Browser JS code does not have access to the platform things like PowerShell and it is not Node.js at all. If you need to execute Node.js code use Node.js executable.
UPD:
The workaround may be the following.
Spin up HTTP server locally with Node.js
Add an endpoint that runs the PS script once it receives a request.
On-click send AJAX request to your server.
But it worth noticing that it will work only on the machine where the Node.js server is running. Because it is not possible to run PowerShell from a browser.
After downloading all the lecture videos and other resources of a course,I wanted to make a course page for myself for easy access.
And I want the video open in VLC Player.
I tried the following code:
<html>
<script type="text/javascript" language="javascript">
function RunFile()
{
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("vlc -vvv F:/Vishnu.mp4", 2, false);
}
</script>
<button onclick="RunFile()">Click Me!</button>
</html>
Here I took a test video file Vishnu.mp4 in F: and tried opening it using an HTA page with the above mentioned code.
The problem is that the VLC Player opens but the file doesn't play.No error message is displayed.
After coming across this related question,I tried the Exec method.
But the same problem persists.VLC Player opens but the file doesn't play.And no error message are displayed.
I'm clueless about what went wrong.As per my understanding after reading this & this, the strCommand argument of the Run & Exec method must be the same string I would otherwise give in the command line to accomplish the task.
By the way,in case it's required:
1.My OS is Windows 7 Enterprise Ed
2.VLC Player version is 2.0.6 Twoflower
Any help is appreciated.
I tried embedding VLC player in the page.The file opens in the embedded player but keyboard shortcuts & other features like fast fwd,speeding up the video,equalizer etc don't work.
Is there any way to open the file in VLC Player.
Thanks for reading.
Make sure that vlc is added to the system path variables by running the video directly from the Command Processor: C:\>vlc -vvv F:/Vishnu.mp4
Or only: C:\>vlc to try to launch VLC itself.
I don't have vlc added to system path, but then I used vlc's full path.
The following ran on my Windows 7 PC:
<html>
<script type="text/javascript" language="javascript">
function RunFile()
{
WshShell = new ActiveXObject("WScript.Shell");
the_file = '"C:/\Program Files/\VideoLAN/\VLC/\vlc.exe" -vvv "file:///D:/Green BAK/Video/Kurzweil-1.mp4"';
alert(the_file);
WshShell.Run(the_file, 2, false);
}
</script>
<button onclick="RunFile()">Click Me!</button>
</html>
I'm trying to add social media share/like buttons to a web page, the share functionality is working but I'm finding that no image or description is being scraped from the page.
I have been setting open graph meta tags but that doesn't have any affect, I've raised the issue with LinkedIn but haven't had any correspondence back from them:
https://developer.linkedin.com/forum/share-button-not-reading-open-graph-metatags
I'm using the HTML5 doctype and html opener tag with appropriate namespaces and the JSESSIONID cookie is not being set:
<%#page contentType="text/html" pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Article">
Here's the implementation of the button:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-url="<%=shortUrl%>"></script>
<script type="text/javascript" language="javascript">
document.getElementById("fands-include-photo").setAttribute("value", "false");
$( window ).ready( function() {
$( '.IN-widget' ).click( function() {
_gaq.push( [ '_trackSocial', 'LinkedIn', 'Share', '<%=shortUrl%>' ] );
});
});
</script>
I have tried calling undocumented methods from the LinkedIn plugin API like IN.init() and IN.parse() but that doesn't seem to make any difference.
Looking at the console in Firebug there are no javascript errors or warnings...
I've created a test page to demonstrate the problem:
http://www.claytonutz.com/publications/testSocialMedia.jsp
Any help is much appreciated, thanks in advance!
Chris.
It is likely that the data is cached from a previous share of this page. The cache is flushed on a periodic basis, but there is (unfortunately) no way for you to force us to flush the cache for you.
That's a known limitation and is on the feature request list.