Please have a look at the below code.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>
<script>
if (annyang) {
// Let's define our first command. First the text we expect, and then the function it should call
var commands = {
'hello': function() {
alert("Hello!");
}
};
// Add our commands to annyang
annyang.addCommands(commands);
// Start listening. You can call this here, or attach this call to an event, button, etc.
// annyang.start();
}
</script>
</head>
<body>
<div>TODO write content</div>
<button onclick="annyang.start();">Start</button>
</body>
</html>
The JavaScript code sends the data to a external server and get the response. The imported JS file can be found from here - https://github.com/TalAter/annyang
My question is, how can I view the "response" which I get from the server?
To see the results returned in the console, turn on debug mode by adding this:
annyang.debug();
Alternatively, to capture all recognized text in a function, simply add a catch-all function
annyang.addCommands({
'*transcript': function(transcript) {
console.log(transcript);
}
});
P.S. I think you want to uncomment your start() command.
Related
I want to build a live Pythonn compiler similar to those at w3schools for Python, for some examples on my blog. I tried different approaches, and would like to hear different oppinions, but as of yesterday I'm trying to implement it using PyScript.
The documentation I found for PyScript doesn't help me a lot, as it seems like I can't understand it, or doing something wrong.
Here's the code that I'm trying to implement:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<textarea id="area1" rows="15">something</textarea>
<button onclick="myFunction()">Click me</button>
<py-script id="demo">
print("Hello, world!")
</py-script>
<py-terminal></py-terminal>
<script>
function myFunction() {
var text1 = document.getElementById('area1').value;
document.getElementById("demo").innerHTML = text1;
}
</script>
</body>
</html>
It just prints the content of the textarea above the terminal, without executing the code and printing the output, inside the terminal, as I imagined.
I'm expecting to make this functinal, and I tried a few things, but unsuccessfully.
I also tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<textarea id="area1" rows="15">print("something")</textarea>
<script>
let text1 = document.getElementById('area1').value;
</script>
<py-script>
def print_to_page(x):
exec(x)
</py-script>
<button py-click="print_to_page(text1)" id="print">Run!</button>
</body>
</html>
But I'm not sure how to pass the variable from JS to PyScript.
This 'Answer' is meant to help in addressing:
"I tried different approaches, and would like to hear different oppinions [sic],"
You may want to check out this post:
https://twitter.com/jtpio/status/1523660682708668416 May 2022
"The #SymPy Online Shell is now powered by the #pyodide stack and JupyterLiteš”
You can try the latest SymPy release directly in your browser, without installing anything, by visiting the following URL:
https://sympy.org/en/shell.html
Many thanks to Ivan Savov for leading this effort!"
Something like that may integrate well with your blog. You can hack around on it and hopefully put together what you need combined with that example and the documentation.
Related resources:
'Embedding the REPL on another website' section in the JupyterLite documentation
Embedding Jupyter Everywhere - Easily embed a console, a notebook, or a fully-fledged IDE on any web page.
Alternative approaches:
JupyterBook and MyST-NB seems to be moving along this route. For example see the Render option the left side there.
I'm not sure all the pieces are together but you can imagine with the JupyterLite/pyodide stuff it soon will be set for blogs.) Quarto may be heading that way, too.
See also Make Jupyter notebook executable in html format
Based on your description and the second example, it looks like you want to have a textarea where the user types in Python code, and run button that executes that entered code when clicked. If I've misunderstood your goal, you can disregard this answer.
The way to bring JavaScript objects/variables into Python is using Pyodide's import js syntax, which treats the JavaScript global namespace like a Python module. Here's a version very similar to your second example, which imports JavaScript's document object and uses that to extract the value of the textarea:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Writing to the page</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<textarea id="area1" rows="15">print("something")</textarea>
<py-script>
from js import document
def runTextInTag(id):
src = document.getElementById(id).value
exec(src)
</py-script>
<button py-click="runTextInTag('area1')" id="run">Run!</button>
</body>
To address your first example, which changes the innerHTML of the py-script tag itself: A <py-script> tag executes its contained code exactly once, when the custom element is attached to the DOM. This happens shortly after PyScript initializes and the custom HTML element <py-script> is defined, or when you add an additional <py-script> tag to the page.So, in your first example, setting the innerHTML/innerTEXT of a <py-script> tag does not cause that code to be executed again.
You could create a new <py-script> tag with the appropriate innerText and add it to the DOM, at which point its code would be executed, but I think the above method is cleaner for most purposes.
What I want to do is use JavaScript (or some other client-side way) to listen for events occurring outside the web page without server-side help. It might look like this:
// tester.js
cses = new ClientSideEventSource("JSEventSource.js");
cses.onmessage = function(event){
// do something
}
// JSEventSource.js
CSES_return("CSES has been run!");
// note how this is client-side
The problem here is that this is all imaginary because those functions (sadly) don't exist. AJAX calls to JS files don't work. Here is an example of it's usage:
function getNotifications()
{
var cses = new ClientSideEventSource("JSEventSource.js");
cses.onmessage = function(event){alert(event.data)}
}
function sendNotification()
{
CSES_return("You have got a notification!");
// this does not give an error even if this is not used in CSES mode
// which is started with: new ClientSideEventSource("jsfile.js");
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta charset="UTF-8"/>
</head>
<body>
<button onclick="getNotifications()">Get Notifications</button>
<button onclick="sendNotification()">Send Notification</button>
</body>
</html>
<!-- You will get errors because ClientSideEventSource and CSES_return do not exist -->
That is basically a messaging system (with a certain message) that doesn't use any Server-Side code. Is there anything to replicate this?
This code works fine but I need to run this script on a html button means when the button is clicked then this function get executed!!!
async function example() {
let driver = await new Builder().forBrowser("chrome").build();
await driver.get("https://google.com");
}
example();
I tried this but not working,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Testing</title>
</head>
<body>
<script type="text/Javascript">
async function example()
{
const {Builder, By, Key, util} = require("selenium-webdriver")
let driver = new Builder().forBrowser("chrome").build();
driver.get("https://google.com");
driver.findElement(By.name("q")).sendKeys("Selenium",KEY.RETURN);
}
</script>
<button onClick="example()">Click me</button>
</body>
</html>
Error:
index.html Uncaught ReferenceError: example is not defined
at HTMLButtonElement.onclick
and, I also tried it with external js but it still not working
selenium-webdriver cannot run inside a web browser, the APIs it needs are not available.
You would need to rewrite the JS so it runs in Node.js.
If you wanted to access it from a web browser, then you would need to write a web service front end for it.
You could then access that web service from the browser with, for example, fetch.
I wanna get the count of words in the textarea and make changes to my users account based on the number of words. For example: a person writes 1000 words and its credibility goes up in the account
(I use Django)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "wordcount",
toolbar: "wordcount"
});
I Use this But I got an error : TypeError: tinymce.activeEditor is null
var wordcount = tinymce.activeEditor.plugins.wordcount;
console.log(wordcount.body.getWordCount());
console.log(wordcount.body.getCharacterCount());
console.log(wordcount.body.getCharacterCountWithoutSpaces());
console.log(wordcount.selection.getWordCount());
console.log(wordcount.selection.getCharacterCount());
console.log(wordcount.selection.getCharacterCountWithoutSpaces());
**
</head>
<body myFunction()>
<form method="post">
<textarea id="mytextarea"></textarea>
</form>
</body>
</html>
enter code here
The API call tinymce.activeEditor only works when there is an "active" editor on the page. Depending on when you are running your code there may not be an "active" editor at that exact time.
When you first run tinymce.init({}) it takes TinyMCE some time to finish its initialization so until that happens there is no "active" editor. Without seeing running code it will be hard to tell you definitively why you are getting the error you reference but most often I see that when people try to interact with TinyMCE either...
before the editor has finished initializing
after the editor was removed from the page
I have added a JavaScript file into my existing project and referred that in the HTML file. The file structure is shown as its in the attachment. After I run the program, the output does not display what it is supposed to be.
Is there anything wrong with my file tree (how I am adding file into the project) or I am not referring the script the in the correct way?
Here is how my program looks like:
index:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="newjavascript.js" type="text/javascript"></script>
</head>
<body>
<p id="demo"></p>
</body>
</html>
.JS:
document.getElementById("demo").innerHTML = 7+9;
It seems to be everything is ok with your project structure and refererring to js file inside index.html. However, the demo paragraph does not display what you want because it can be just not loaded in the time when your newjavascript.js is executed. I think you can try to modify it in the following way:
window.onload = function () {
document.getElementById("demo").innerHTML = 7+9;
};
Using onload function of window object you wait until a page (including demo paragraph) is loaded - and after it change its content.