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".
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 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>
I started working on a large project that uses extensive number of vuex getters. The problem is, that large amount of them rely to be called in specific order or at specific time to have correct data from other getters. Looks like vue dev tools is trying to access those values, calling the getters not in expected order so some values are not correct and the app is throwing errors. Because of this I cannot use the dev tools and cannot find a simple way around it.
Here is simple snippet reproducing the issue.
This code will run just fine, but once you open dev tools, it tries to access the getter selselectedPrice which returns error until we have some data.
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vuex#3.1.1/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in goodThings" :key="item.title">{{ item.title }}</li>
</ul>
{{totalPrice}}
</div>
<script>
const getSomeRandomData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
title: 'fasfasf',
price: 20
},
{
title: 'asgfasgasg',
price: 30
},
{
title: 'asgasgasg',
price: 40
}
])
}, 1000)
})
}
const store = new Vuex.Store({
state: {
selectedItem: undefined,
warehouse: []
},
actions: {
fetchData: async function ({ commit }) {
const response = await getSomeRandomData()
commit("SET_WAREHOUSE", response)
}
},
mutations: {
SET_WAREHOUSE: (state, payload) => {
state.warehouse = [...payload]
}
},
getters: {
selselectedPrice: (state) => {
return state.warehouse[state.selectedItem].price
},
goodThings: (state) => {
return state.warehouse
},
totalPrice: (state) => {
return state.warehouse.reduce((a, item) => a+item.price, 0)
}
}
})
Vue.use(Vuex)
let app = new Vue({
el: '#app',
store,
created() {
this.$store.dispatch('fetchData')
},
computed: {
goodThings() {
return this.$store.getters.goodThings
},
totalPrice() {
return this.$store.getters.totalPrice
}
}
})
</script>
</body>
</html>
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>