I have the following PyScript + HTML example and I get the following error:
/lib/python3.10/site-packages/pyodide/__init__.py:74: FutureWarning: pyodide.create_proxy has been moved to pyodide.ffi.create_proxy Accessing it through the pyodide module is deprecated. warn(
How I can suppress/remove the warning?
Why I get this error even when I use:
from pyodide.ffi import create_proxy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PyScript Pyodide Warning</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<h1>PyScript - Pyodide Warnning</h1>
<input id="inp-cheese" type="text" placeholder="Want cheese? y|n">
<input id="inp-bacon" type="text" placeholder="Want bacon? y|n">
<input id="inp-mashrooms" type="text" placeholder="Want mashrooms? y|n">
<input id="inp-paper" type="text" placeholder="Want paper? y|n">
<button id="btn2" class="button-14" role="button">Go</button>
<py-script>
from pyodide.ffi import create_proxy
from js import document
def on_btn2_click(event):
global cheese
global bacon
global mashrooms
global paper
input_cheese = Element("inp-cheese")
input_bacon = Element("inp-bacon")
input_mashrooms = Element("inp-mashrooms")
input_paper = Element("inp-paper")
cheese = input_cheese.value
bacon = input_bacon.value
mashrooms = input_mashrooms.value
paper = input_paper.value
button2 = document.querySelector("#btn2")
button2.addEventListener("click", create_proxy(on_btn2_click))
</py-script>
<py-repl id="my-repl-23nov22-0931" auto-generate="true">
if cheese == 'y':
print("+ Cheese")
if bacon == 'y':
print("+ Bacon")
if mashrooms == 'y':
print("+ Mashrooms")
if paper == 'y':
print("+ Paper")
print("_____")
</py-repl>
</body>
</html>
This issue was fixed in pyscript#867 and the fix should be included in the next release.
Otherwise, you could try to disable all warnings altogether,
import warnings
warnings.filterwarnings("ignore")
but I'm not sure it would be called early enough in the <py-script> tag.
The other solution is to build the latest pyscript version, which includes the fix, and use that.
Related
Here is the problem. Sorry for stupid question.
I read how to connect this library to my project.
I use vs-code. First, i need to install npm in my project with command npm install sweetalert2 in vs-code terminal. I did that.
Next i need to add reference to sweetalert2.min.js and sweetalert2.min.css in <head>.
And call the function.
Swal.fire({
title: 'Error!',
text: 'Do you want to continue',
icon: 'error',
confirmButtonText: 'Cool'
})
I also make button with onclick function but this not work. I click button and nothing. No modal window.
Here is my code. Help to see my problem. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap" rel="stylesheet">
<script src="/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="/node_modules/sweetalert2/dist/sweetalert2.min.css">
<script>
function CBR_XML_Daily_Ru(rates) {
function trend(current, previous) {
if (current > previous) return ' ▲';
if (current < previous) return ' ▼';
return '';
}
var USDrate = rates.Valute.USD.Value.toFixed(4).replace('.', ',');
var USD = document.getElementById('USD');
USD.innerHTML = USD.innerHTML.replace('00,0000', USDrate);
USD.innerHTML += trend(rates.Valute.USD.Value, rates.Valute.USD.Previous);
var EURrate = rates.Valute.EUR.Value.toFixed(4).replace('.', ',');
var EUR = document.getElementById('EUR');
EUR.innerHTML = EUR.innerHTML.replace('00,0000', EURrate);
EUR.innerHTML += trend(rates.Valute.EUR.Value, rates.Valute.EUR.Previous);
}
</script>
<link rel="dns-prefetch" href="https://www.cbr-xml-daily.ru/">
<script src="https://www.cbr-xml-daily.ru/daily_jsonp.js" async></script>
</head>
<body>
<button onclick="functi()">Тест Sweetalert</button>
<div class="container-message">
<div class="mainInfo">
<h1>Что день грядующий нам готовит ? Богатство или бедность? <span class="usd-color">$</span></h1>
<div id="USD">Доллар США $ — 00,0000 руб.</div>
<div id="EUR">Евро € — 00,0000 руб.</div>
</div>
</div>
<script>
function functi() {
Swal.fire({
title: 'Error!',
text: 'Do you want to continue',
icon: 'error',
confirmButtonText: 'Cool'
})
}
</script>
</body>
</html>
And also attach chrome-console log console
So, i find solution.
I use cdn url from documentation <script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>.
But this not work.
I change this url in head to <script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
And it works!
I am trying to use import in the script I loaded in HTML, but the error occurs:
Uncaught ReferenceError: require is not defined.
I am trying to order my code with classes in typescript. Does that mean everything I write for the renderer process in vscode extensions has to be in one js file?
New to extension programming, any help appreciated.
Here is how I build HTML:
webviewPanel.webview.html = getHtmlTemplate(webviewPanel, this.context);
and my HTML looks like:
export function getHtmlTemplate(webviewPanel: vscode.WebviewPanel, context: vscode.ExtensionContext) : string {
const scriptUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'out', 'main.js'));
const styleResetUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'media', 'reset.css'));
const styleVSCodeUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'media', 'vscode.css'));
const styleMainUri = webviewPanel.webview.asWebviewUri(vscode.Uri.joinPath(
context.extensionUri, 'media', 'style.css'));
// Use a nonce to whitelist which scripts can be run
const nonce = getNonce();
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
Use a content security policy to only allow loading images from https or from our extension directory,
and only allow scripts that have a specific nonce.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webviewPanel.webview.cspSource}; style-src ${webviewPanel.webview.cspSource}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${styleResetUri}" rel="stylesheet" />
<link href="${styleVSCodeUri}" rel="stylesheet" />
<link href="${styleMainUri}" rel="stylesheet" />
<title>Cat Scratch</title>
</head>
<body>
<div class="container">
<div class="split left">
<h1>Story Editor</h1>
</div>
<div class="split right">
<h1>Story Blueprint</h1>
<div class="nodes">
<div class="add-button">
<button>Create Node</button>
</div>
</div>
<canvas id = "_canvas"></canvas>
</div>
</div>
<script nonce="${nonce}"> var exports = {}; </script>
<script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`;
}
I am writing main.ts which will be compile into main.js, and I would like to use import in main.ts
I just learned how to create and append items. I wanted to practice using a button to submit the text to be appended. It works, however, the page seems to refresh right afterwards and removes the text from the list. What am I doing wrong?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="ToDo.css">
</head>
<body>
<h1>To Do:</h1>
<ul>
<li class="todo">Create another todo.</li>
</ul>
<form>
<input type="text" placeholder="Add another item!">
<button onclick="output()">Add</button>
</form>
<script src="ToDo.js"></script>
</body>
</html>
JS:
let ul = document.querySelector('ul');
newItem = document.querySelector('input');
function output() {
let item = newItem.value;
let newTodo = document.createElement('li');
newTodo.innerText = item;
newTodo.classList.add('todo');
ul.append(newTodo);
}
Your button is submitting the form which is causing the page to refresh. Buttons are made to be type submit by default.
It looks like you don't actually need the form so you could either remove it or set the type on the button:
<button type="button" onclick="output()">Add</button>
<ion-slide-box>
<ion-slide ng-repeat="imageUrl in item.images">
<img ng-src="{{imageUrl}}" />
</ion-slide>
</ion-slide-box>
and my Controller:
$scope.changeItem = function(differentItem) {
$scope.item = differentItem;
//$scope.$apply();
$ionicSlideBoxDelegate.update();
};
Whenever the changeItem() button is clicked, it changes $scope.item which i use in ng-repeat(in slide-box).
My problem here is that $ionicSlideBoxDelegate.update(); doesn't update and set the pager index to 0 with the new number of images of the selected item even though the $scope.item changes.
edit: Indeed, this seems like a known issue, as noted on the official Ionic forum. However, I made the example work as you can see here. Things I've changed are the following:
I updated the ionic to version 1.0.1 (you can see the links from http://code.ionicframework.com/)
used the $ionicSlideBoxDelegate.slide(0); because it otherwise fails again if you click the button when on the last image
used the $ionicSlideBoxDelegate.update() as you were trying, but inside the $timeout since (as you will read on forum) it could be that the items are not yet rendered when you call the update() method on $ionicSlideBoxDelegate;
Updated code, here for reference:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $http, $ionicSlideBoxDelegate, $timeout) {
$scope.item = {};
$scope.item.images = [
'http://lorempixel.com/400/200/',
'http://lorempixel.com/400/300/',
'http://lorempixel.com/400/400/',
];
$scope.changeImages = function(){
$ionicSlideBoxDelegate.slide(0);
$scope.item.images = [
'http://lorempixel.com/200/200/',
'http://lorempixel.com/300/300/'
];
$timeout(function(){
$ionicSlideBoxDelegate.update();
}, 500);
};
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-slide-box show-pager="true">
<ion-slide ng-repeat="imageUrl in item.images track by $index">
<img ng-src="{{imageUrl}}" />
<button class="button" ng-click="changeImages()">change imgs</button>
</ion-slide>
</ion-slide-box>
</body>
</html>
--edit end--
I made a test project on CodePen, and as you can see, changing the images on the item object updates accordingly.
So, without seeing the rest of your code, we can't help. You can make a similar CodePen example with your code, so that we can see immediately what may be wrong with it.
Code pasted here for reference:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $http) {
$scope.item = {};
$scope.item.images = [
'http://lorempixel.com/400/200/',
'http://lorempixel.com/400/300/',
'http://lorempixel.com/400/400/',
];
$scope.changeImages = function(){
$scope.item.images = [
'http://lorempixel.com/200/200/',
'http://lorempixel.com/300/300/',
'http://lorempixel.com/500/400/',
];
};
});
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.25/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.25/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar title="myTitle"></ion-header-bar>
<ion-pane class="has-header" padding="true">
<h2>You can't see me</h2>
</ion-pane>
</body>
</html>
I'm trying to implement step two of the Recipe Box Facebook app tutorial. I have followed the instructions in step one to set up my app on Facebook and have uploaded the code pasted below to my server as per the instructions in step two of the tutorial. When I load the web page and click the add-to-timeline link I get a Facebook error stating:
Given URL is not allowed by the Application configuration.
Any insight would be greatly appreciated.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<head/>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'328617653826422', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Stuffed Cookies"
src="http://example.com/cookie.jpg"
width="550"/>
</p>
</body>
</html>
In your app settings, be sure that domain you specify is the same domain as where this code lives. Also in the example code, their <head> tag looked like <head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">. Also you appear to be missing the og: tags in your head section as well.
Here's the example code I just downloaded from their site, did I grab the wrong link? Or are you basing yours on old example code?
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head prefix="og: http://ogp.me/ns# og_recipebox: http://ogp.me/ns/apps/YOUR_NAMESPACEx#">
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="og:type" content="YOUR_NAMESPACE:recipe" />
<meta property="og:title" content="Oreo Stuffed Cookies" />
<meta property="og:image" content="http://YOUR_URL/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://YOUR_URL/cookie.html">
<script type="text/javascript">
function postCook()
{
FB.api('/me/YOUR_NAMESPACE:cook&recipe=http://YOUR_URL/cookie.html','post', function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>>
<h3>
<font size="30" face="verdana" color="grey">Stuffed Cookies
</font>
</h3>
<p>
<img title="Oreo Stuffed Cookies" src="http://YOUR_URL/cookie.jpg" width="550"/><br />
</p>
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>
</body>
</html>