Ask Question
0
I have just installed the atom editor along with the p5 manager package using The Coding Train’s videos. I am trying to use Atom-live-server to view my code. However, when I hit “Start Server”, it opens up a new tab, with the server name, and doesn’t show any of what my code is supposed to do. Activating Javascript console ju
00%20AM Screen Shot 2019-06-20 at 10.54.00 AM.jpg 2173×1134 241 KB st shows the following message: p5.sound.js:211 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio (anonymous) # p5.sound.js:211 p5.sound.js:4247 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio Tone.Context # p5.sound.js:4247 (index):53 Live reload enabled.
![40%20AM|466x313]
My sketch.js code is:
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(255,255,255);
console.log(“HELLO”);
print(“HELLO”); }
My index.html code is:
robby1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>robby1</title>
<script src="sketch.js"></script>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.dom.js"></script>
<script src="libraries/p5.sound.js"></script>
<link rel="shortcut icon" href="">
<style>
body {
margin:0;
padding:0;
overflow: hidden;
}
canvas {
margin:auto;
}
</style>
</head>
<body>
</body>
</html>
To clarify, I am using chrome on a macOS mojave. I am unfamiliar with html, but know p5.js.
Related
Following the getting started with FAST element guide here, I don't understand why the value of the attribute is not changing whenever I use the element in.
Even when following the guide completely by basically copying and pasting the sample code, I can't make it work.
Based on the code and markup below, I would expect that the h3 element has the value of test and not default.
Anybody who has same issue, or know what I might be doing wrong?
Btw, I'm using esbuild to bundle, transpile and serve the files.
import { FASTElement, customElement, attr, html } from "#microsoft/fast-element";
const template = html`
<div class="header">
<h3>My name is: ${x => x.greeting}</h3>
</div>
<div class="name-tag-body">
<slot>Default slot</slot>
</div>
`;
#customElement({
name: 'name-tag',
template: template
})
export class NameTag extends FASTElement {
#attr greeting: string = "default";
greetingChanged() {
console.log("greeting changed:", this.greeting);
}
connectedCallback() {
super.connectedCallback();
console.log("connectedCallback");
}
} }
}
<!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>
</head>
<body>
<name-tag greeting="something"></name-tag>
</body>
</html>
The solution is to have the target property of the tsconfig.json file set to something other than ESNext. ES2016 works fine.
I've got an idea to run Flutter app on WebOS. I've downloaded the latest WebOS sdk and a Simulator (as they already deprecated the Emulator)
I've created a simple Hello World app that simply uses HTML and it ran just fine on the Simulator. Then I decided to add a logic for running Flutter app to it. So now the compiled app structure is like this
The content of the index.html is as follows
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="flutter_iz_tube_tv">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>IZ Tube TV</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '3924677883';
</script>
<script src="flutter.js" defer></script>
<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
And here is the content of appinfo.json
{
"id": "com.example",
"version": "0.0.1",
"vendor": "Test TV",
"type": "web",
"main": "index.html",
"title": "tv_app",
"icon": "icon.png",
"largeIcon": "largeIcon.png"
}
This app runs fine in browser if I use a web server.
But the problem starts when I load it on a WebOS Simulator using App button on RCU.
I just cannot run. And the problem is, obviously, because it uses a simple file: protocol instead of running an http server.
I've googled a lot and haven't found a solution to this.
Does anyone know how to run an app like this in simulator?
I've found out it's impossible to do in a Simulator. But there is a workaround. We can add a redirection to the "head" part of index.html file like this (https://webostv.developer.lge.com/develop/app-developer-guide/hosted-web-app/):
<meta http-equiv="refresh" content="0;url=http://0.0.0.0:8080/index.html">
Thus effectively redirecting it to the remote app. And WebOS can display a Flutter app
I have seen posts such as
Cypress - run test in iframe for how to handle iframes in Cypress. But I am using the old and outdated frames, which is what a legacy system (that I have to test) uses.
I have checked Github -Cypress iframes which is recommended by Cypress, but haven't found an answer for plain old frames. Using the solution for iframe, hasn't worked.
The problem is the same as with an iframe where, when trying to select an element using
cy.get('input').type('test');
you receive an AssertionError stating:
Timed out retrying after 4000ms: Expected to find element: input, but never found it.
Any advice is appreciated.
I don't have any experience with <frame>, but testing on this source
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example page</title>
</head>
<frameset cols="150,*">
<frame src="example_a.html">
<frame src="example_b.html">
<noframes>
<body>
<p>Alternate content</p>
</body>
</noframes>
</frameset>
</html>
example_b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="robots" content="noindex">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Example page</title>
</head>
<body>
<input />
</body>
</html>
this test works
cy.visit('http://127.0.0.1:5500/index.html') // served from vscode
cy.get('frame')
.eq(1) // 2nd frame
.then($frame => $frame[0].contentWindow) // it's window
.its('document.body')
.within(() => { // sets cy.root() to 2nd frame body
cy.get('input')
.type('something')
.invoke('val')
.should('eq', 'something')
})
If you've got more complicated stuff to do, you can try visiting the frame's source, for example this makes the frame content the top window
cy.visit('http://127.0.0.1:5500/example_b.html')
cy.get('input')
.type('something')
.invoke('val')
.should('eq', 'something')
You can try something like this:
cy.get('#iframeSelector')
.then(($iframe) => {
const $body = $iframe.contents().find('body')
cy.wrap($body)
.find('input')
.type('test')
});
I have an image at the URL http://192.168.1.53/html/cam.jpg (from a Raspberry Pi) and this image is changing very fast (it is from a camera).
So I want to have some JavaScript on a website that will reload this image every second for example.
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pi Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<style>
img,body {
padding: 0px;
margin: 0px;
}
</style>
<img id="img" src="http://192.168.1.53/html/cam.jpg">
<img id="img1" src="http://192.168.1.53/html/cam.jpg">
<script src="script.js"></script>
</body>
</html>
And my script:
function update() {
window.alert("aa");
document.getElementById("img").src = "http://192.168.1.53/html/cam.jpg";
document.getElementById("img1").src = "http://192.168.1.53/html/cam.jpg";
setTimeout(update, 1000);
}
setTimeout(update, 1000);
alert is working, but the image is not changing :/ (I have 2 images (they are the same))
The problem is that the image src is not altered so the image is not reloaded.
You need to convince the browser that the image is new. A good trick is to append a timestamp to the url so that it is always considered new.
function update() {
var source = 'http://192.168.1.53/html/cam.jpg',
timestamp = (new Date()).getTime(),
newUrl = source + '?_=' + timestamp;
document.getElementById("img").src = newUrl;
document.getElementById("img1").src = newUrl;
setTimeout(update, 1000);
}
My Goal is to use the Intel XDK Barcode scanner using the front camera on the iPhone or iPad.
Please help
I currently have the simple code snippet
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
</style>
<script src='intelxdk.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
//intel.xdk.device.scanBarcode();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
document.addEventListener("intel.xdk.device.barcode.scan", barcodeScanned, false);
function barcodeScanned(evt) {
intel.xdk.notification.beep(1);
if (evt.type == "intel.xdk.device.barcode.scan") {
if (evt.success == true) {
var url = evt.codedata;
//intel.xdk.device.showRemoteSite(url, 264, 0,56, 48)
alert(evt.codedata);
} else {
//scan cancelled
}
}
}
$(document).ready(function(){
$("#scanBtn").click(function(){
intel.xdk.device.scanBarcode();
});
});
</script>
</head>
<body>
Scan Now
</body>
</html>
The XDK does not currently support the use of the front camera. Such options will be possible when we are able to support the use of standard Cordova plugins.
Sorry, but I cannot comment on when new features will become available, Intel does not allow public disclosure of roadmaps and schedules.