I wanna make a motion graph by using gsap in vue3. I met a question. here is an example below. object-type variable like tl return by data() is transform to Proxy by default. And it dose not work when I config it later. So I try to define a variable in setup() without using reactive(). And it works when I config it later.
Run this example, I find some differences exists between tl1(define in setup without reactive()) and tl2.target(define in data()). You can run it on CodePen.
Could someone tell me the reason why it dosen't work when it becomes proxy object?
<!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>
<div id="app" style="width: 5rem;height: 5rem;">
<button #click="moveOrigin">actionOrigin</button>
<button #click="moveProxy">actionProxy</button>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script>
const app = {
setup() {
const tl1 = gsap.timeline({ paused: true });
const flag = true;
return { tl1,flag };
},
data(){
const tl2 = gsap.timeline({ paused: true });
return {tl2};
},
methods: {
moveOrigin() {
console.log("tl1 Origin");
console.log(this.tl1);
if (this.flag) {
this.tl1.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl1.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl1.play();
},
moveProxy() {
console.log("tl2 Proxy");
console.log(this.tl2);
if (this.flag) {
this.tl2.to("button", { y: "+=2rem", duration: 1 });
} else {
this.tl2.to("button", { y: "-=2rem", duration: 1 });
}
this.flag = !this.flag;
this.tl2.play();
},
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
Related
I try to use the box2d-wasm package. I successfully run a program that prints a vector: https://plnkr.co/edit/6dTVT4HtFW4wf15H
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Since import maps are not yet supported by all browsers, it is
necessary to add the polyfill es-module-shims.js
Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation
-->
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"gl-matrix": "https://cdn.skypack.dev/gl-matrix#3.4.3",
"box2d": "https://8observer8.github.io/lib/box2d-wasm-2.4.1/box2d-wasm-2.4.1.min.js"
}
}
</script>
<script type="module">
import Box2DLib from "box2d";
let box2d;
function initBox2D() {
return new Promise(resolve => {
Box2DLib().then((re) => {
box2d = re;
resolve();
});
});
}
async function main() {
await initBox2D();
const vec = new box2d.b2Vec2(1, 2);
console.log(`vec = ${vec.x}, ${vec.y}`);
}
main();
</script>
</body>
</html>
I noticed that there is a b2Draw class:
console.log(box2d);
But how to use this constructor? I try to instantiate this class:
const debugDrawer = new box2d.b2Draw();
I have this error: cannot construct a b2Draw, no constructor in IDL.
I try to extend box2d.b2Draw like this:
async function main() {
await initBox2D();
const vec = new box2d.b2Vec2(1, 2);
console.log(`vec = ${vec.x}, ${vec.y}`);
class DebugDrawer extends box2d.b2Draw {
}
const debugDrawer = new DebugDrawer();
}
But I have the same error.
I found the solution in the official example: https://github.com/Birch-san/box2d-wasm/tree/master/demo/modern/public
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Since import maps are not yet supported by all browsers, it is
necessary to add the polyfill es-module-shims.js
Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation
-->
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"gl-matrix": "https://cdn.skypack.dev/gl-matrix#3.4.3",
"box2d": "https://8observer8.github.io/lib/box2d-wasm-2.4.1/box2d-wasm-2.4.1.min.js"
}
}
</script>
<script type="module">
import Box2DLib from "box2d";
let box2d;
function initBox2D() {
return new Promise(resolve => {
Box2DLib().then((re) => {
box2d = re;
resolve();
});
});
}
async function main() {
await initBox2D();
const {
b2Draw: { e_shapeBit },
b2Vec2,
JSDraw
} = box2d;
const vec = new b2Vec2(1, 2);
console.log(`vec = ${vec.x}, ${vec.y}`);
function makeDebugDrawer() {
const debugDrawer = Object.assign(new JSDraw(), {
DrawSegment(vert1_p, vert2_p, color_p) {},
DrawPolygon(vertices_p, vertexCount, color_p) {},
DrawSolidPolygon(vertices_p, vertexCount, color_p) {},
DrawCircle(center_p, radius, color_p) {},
DrawSolidCircle(center_p, radius, axis_p, color_p) {},
DrawTransform(transform_p) {},
DrawPoint(vertex_p, sizeMetres, color_p) {}
});
debugDrawer.SetFlags(e_shapeBit);
return debugDrawer;
}
const debudDrawer = makeDebugDrawer();
}
main();
</script>
</body>
</html>
I want to parse the ROS status inside my webpage, but I can't get my element by Id correctly.
Can you please tell me how can I parse my ROS status inside my HTML page correctly? thanks in advance.
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Something</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico"><script defer src="main.js"></script></head>
<body>
<div id="container"></div>
<div id="ros_status"></div>
</body>
</html>
main.js
import { Ros, Message, Topic, } from "roslib";
class ROSInterface {
constructor(container_id) {
this.container = document.getElementById(container_id, true);
console.log(this.container);
this.ros = new Ros({
url : 'ws://localhost:9090'
});
}
init() {
if (this.container in document) {
console.log(this.container);
this.ros.on('connection', function () {
this.container.innerHTML = "Connected";
});
this.ros.on('error', function (error) {
this.container.innerHTML = "Error";
});
this.ros.on('close', function () {
this.container.innerHTML = "Closed";
});
}
else {
console.log(document);
this.ros.on('connection', function () {
console.log("Connected");
});
this.ros.on('error', function (error) {
console.log("Error");
});
this.ros.on('close', function () {
console.log("Closed");
});
}
}
}
const ros_iface_ = new ROSInterface('ros_status');
ros_iface_.init();
I am unable to create a review in the sidebar. All the codes that are available are in typescript and I don't have any experience regarding that.
Here is my main extension.js code
const vscode = require("vscode");
const SideBarProvider = require("./sidebarProvider.js");
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
const sidebarProvider = new SideBarProvider(context.extensionUri);
context.subscriptions.push(
vscode.window.registerWebviewViewProvider("sidebar-view", sidebarProvider)
);
context.subscriptions.push();
}
// this method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate,
};
This is my sidebarProvider.js
const vscode = require("vscode");
class SideBarProvider extends vscode.WebviewViewProvider {
constructor(extensionUri) {
super();
this.extensionUri = extensionUri;
this.view;
}
resolveWebviewView(webviewView) {
this.webviewView = webviewView;
webviewView.webview.options = {
// Allow scripts in the webview
enableScripts: true,
};
webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
webviewView.webview.onDidReceiveMessage((data) => {
switch (data.type) {
case "onInfo": {
if (!data.value) {
return;
}
vscode.window.showInformationMessage(data.value);
break;
}
case "onError": {
if (!data.value) {
return;
}
vscode.window.showErrorMessage(data.value);
break;
}
}
});
}
revive(panel) {
this.view = panel;
}
_getHtmlForWebview(webview) {
const styleResetUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "reset.css")
);
const styleVSCodeUri = webview.asWebviewUri(
vscode.Uri.joinPath(this._extensionUri, "media", "vscode.css")
);
return `!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" />
<link href="${styleResetUri}" rel="stylesheet">
<link href="${styleVSCodeUri}" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div>Hello world</div>
</body>
</html>`;
}
}
module.exports = SideBarProvider;
And finally, in my package.json, I am registering my views
"contributes": {
"viewsContainers": {
"activitybar": [
{
"id": "testview-explorer",
"title": "Tazim Rahbar",
"icon": "./resources/testView.svg"
}
]
},
"views": {
"testview-explorer": [
{
"type": "webview",
"id": "sidebar-view",
"name": "Work",
"icon": "./resources/testView.svg",
"contextualTitle": "Work"
}
]
}
},
I am able to understand every part but am unable to figure out how to write a provider for "registerwebViewProvider".
I am following the example in "Creating a new OpenUI5 Component" from the OpenUI docs, and when I run my demo page I am getting an error in the Chrome console that reads:
Uncaught Error: The specified component controller 'my.components.button.Component' could not be found!
I can navigate to 'localhost:3000/components/button/Component.js' and see the contents of the JS file. So the file exists, so i guess i am not referencing it correctly in my code (or have an unfortunate typo somewhere). How should i be referencing the component?
My folder structure looks like this:
folder structure
webapp
components
button
Within the button folder I have Component.js and Component.json.
Component.js looks like this:
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("components.button.Component");
// new Component
sap.ui.core.UIComponent.extend("components.button.Component", {
metadata: {
properties: {
text: "string"
}
},
init: function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
}
});
components.button.Component.prototype.createContent = function () {
this.oButton = new sap.ui.commons.Button("btn");
return this.oButton;
};
components.button.Component.prototype.setText = function (sText) {
this.oButton.setText(sText);
this.setProperty("text", sText);
return this;
};
And Index.html looks like this:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Component Test</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"my": "./"
}' >
</script>
<script>
sap.ui.getCore().attachInit(function () {
var oComp1 = sap.ui.getCore().createComponent({
name: "my.components.button",
id: "Comp1",
settings: {text: "Hello World"}
});
// place this Ui Container with the Component inside into UI Area
oCompCont1.placeAt("target1");
var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
name: "my.components.button",
settings: {text: "Hello World again"}
});
oCompCont2.placeAt("target2");
});
</script>
</head>
<body class="sapUiBody">
<div id="target1"></div>
<div id="target2"></div>
</body>
</html>
The correct answer was provided by #deterministicFail in the comments to the original question. I am providing the updated/corrected code here for completeness
Corrected Component.js
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("components.button.Component");
sap.ui.core.UIComponent.extend("my.components.button.Component", {
metadata: {
properties: {
text: "string"
}
},
init: function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
}
});
my.components.button.Component.prototype.createContent = function () {
this.oButton = new sap.ui.commons.Button("btn");
return this.oButton;
};
my.components.button.Component.prototype.setText = function (sText) {
this.oButton.setText(sText);
this.setProperty("text", sText);
return this;
};
Corrected Index.html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Component Test</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"my": "./"
}' >
</script>
<script>
sap.ui.getCore().attachInit(function () {
jQuery.sap.registerModulePath("my.components.button", "components/button");
var oComp1 = sap.ui.getCore().createComponent({
name: "my.components.button",
id: "Comp1",
settings: {text: "Hello World"}
});
// Create a Ui container
var oCompCont1 = new sap.ui.core.ComponentContainer("CompCont1", {
component: oComp1
})
// place this Ui Container with the Component inside into UI Area
oCompCont1.placeAt("target1");
var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
name: "my.components.button",
settings: {text: "Hello World again"}
});
oCompCont2.placeAt("target2");
});
</script>
</head>
<body class="sapUiBody">
<div id="target1"></div>
<div id="target2"></div>
</body>
</html>
I want to design some slides by Javascript, and use the Reveal library and follow the template
https://github.com/hakimel/reveal.js/blob/master/index.html
and plan to embed a charts into the slides by echarts library and follow this demo
http://ecomfe.github.io/echarts/doc/start-en.html
I put these two library as follow directory without any change of echarts/reveal library.
|--echarts-2.2.0
|--reveal.js
\--mySlides.html
When I merged these two demo together, I got the "anonymous function" of "require.config". No idea how to debug it. Anyone can help it? Thanks.
Uncaught ReferenceError: Reveal is not defined
(anonymous function) mySlides.html:36
mySlides.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section id="page1" data-background="#ff0000">
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="echarts-2.2.0/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'echarts-2.2.0/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
myChart.setOption(option);
}
);
</script>
</section>
<section id="page2"><p>Page2</p></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: 'reveal.js/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
It looks like you're missing the requirejs file loader. Put this in the header of your file and let me know if that fixes it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.js"></script>