I am trying to get a text entity to fall in a scene. dynamic-body works on other elements (sphere, cube, etc.) but not on a-text.
Here is my glitch:
https://glitch.com/edit/#!/ruby-stork
The automatic shape detection in dynamic-body doesn't handle text. You can apply a physics body shape manually instead.
<!DOCTYPE html>
<html>
<head>
<title>The text shall fall. - A-Frame</title>
<meta name="description" content="The text shall fall.">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v2.1.0/dist/aframe-physics-system.min.js"></script>
<script>
window.onload = () => {
const text = document.querySelector('a-text')
// Cannon boxes use 'halfExtents', side length / 2
const shape = new CANNON.Box(new CANNON.Vec3(0.5, 0.1, 0.5))
// body may or may not be ready when onload occurs
if (text.body) {
text.body.addShape(shape)
} else {
text.addEventListener('body-loaded', () => text.body.addShape(shape))
}
}
</script>
</head>
<body>
<a-scene>
<!-- "shape:none" to disable auto detection. Required if combining text and geometry in same entity tree -->
<a-text dynamic-body="shape:none" position="-1 2 -3" value="Cylinder falls, this does too." height="1.5" color="#FFC65D" ></a-text>
<a-cylinder dynamic-body position="1 5 -3" rotation="12 0 0" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane static-body position="0 0 -4" rotation="-90 0 0" width="14" height="14" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Try putting the text on a thin box.
<a-entity geometry="primitive: box; depth: 0.01" text="value: HEY" dynamic-body>
Related
I want to capture the elements inside a WebView in react native.
This is the html of the WebView
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossOrigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.4.1/dist/html2canvas.min.js" integrity="sha256-6H5VB5QyLldKH9oMFUmjxw2uWpPZETQXpCkBaDjquMs=" crossOrigin="anonymous"></script>
</head>
<body>
<div class="certificateDOM">
<div class="container-fluid">
<div class="row d-flex justify-content-center" id="certificateBlock">
<img
class="imageTemplate"
src="file:///android_asset/images/certificate1.png"
alt="certificate Image" />
<span class="certificateId"></span>
<span class="certificateName">is here by awarded the certification of achievement for the successfull completion of <b class='certificateBoldName'></b></span>
<span class="userName"></span>
<img class="certificateSign" src="file:///android_asset/images/authority1.png" alt="authority sign" />
</div>
</div>
</div>
</body>
</html>
This will look like this :
The student name and authority signature are absolutely positioned on the image (I have not included styles for these).
The image src is a 'file:///' url due to how android references the android assets.
This is the function which uses html2canvas to convert the element to a canvas:
const takeCertificateSnap = ()=>{
window.scrollTo(0, 0);
return html2canvas(document.querySelector('#certificateBlock'), {
allowTaint:true,
useCORS: true,
});
};
const getCertificateImageDataUrl = ()=>{
const canvasPromise = takeCertificateSnap();
canvasPromise.then((canvas) => {
const dataUrl = canvas.toDataURL();
const obj={
action:'getCertificateImageDataUrl',
data: {
dataUrl,
}
};
window.ReactNativeWebView.postMessage(JSON.stringify(obj));
}).catch((e) => {
const errmsg={
action:'error',
data: {
cause: 'html2canvas',
error: err.message,
}
};
window.ReactNativeWebView.postMessage(JSON.stringify(errmsg));
});
}
the image I am getting as a result of capturing the element as canvas and converting it to a dataUrl is this
Although the image is of same-origin, the image is not being rendered.
I saw couple of posts and included allowTaint and useCORS options, but it did not help.
Any help is appriciated.
I am trying to learn stencilJS, I am developing the component which has input field with auto focus.
I am calling component twice in index.html, I am getting into strange issue the second render component is taking autofocus of first render component.
And the components are not render on same order every time, the component which renders last it's input field will have the focus remaining will not get autofocus.
Attached code below, please help me to sort out.
index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<script type="module" src="/build/testing.esm.js"></script>
<script nomodule src="/build/testing.js"></script>
</head>
<body>
<search-input data-test-id="test-two" place-holder="Search" value=""></search-input>
<search-input data-test-id="test-three" place-holder="Search" value=""></search-input>
</body>
</html>
Search-plugin.tsx
import { Component, h, Prop, Event, EventEmitter } from '#stencil/core';
#Component({
tag: 'search-input',
styleUrl: 'search-input.css',
shadow: true,
})
export class SearchInput {
private searchInput: HTMLInputElement;
#Prop() value = "";
#Prop() dataTestId!: string;
#Prop() placeHolder: string = "Search";
#Event() clearSearch: EventEmitter;
#Event() searchRequest: EventEmitter;
protected componentDidLoad() {
this.searchInput.focus();
}
render() {
return (
<div data-test-id={this.dataTestId} class="items-center flex bg-white border-solid rounded-sm border-gray-300 box-border text-xl border-1 pl-15 pr-12 py-9">
<input
type="text"
ref={el => (this.searchInput = el as HTMLInputElement)}
data-test-id={`${this.dataTestId}-search-input`}
class="focus:outline-none border-0 flex-grow w-full pl-15"
value={this.value}
placeholder={this.placeHolder}
/>
</div>
);
}
}
Two elements - custom elements / web components or standard HTML elements - cannot have focus at the same time. But your code tries to do this - every search-input on the page will try to take focus when the Stencil lifecycle executes componentDidLoad - so that last one rendered by Stencil wins. The order of which is not predictable because Stencil is asynchronous.
If you only want one of the elements to have initial focus, add a property to the component to enable this. For example:
export class SearchInput {
...
#Prop() autoFocus: boolean = false;
...
componentDidLoad() {
if (this.autoFocus) {
this.searchInput.focus();
}
}
}
<search-input auto-focus data-test-id="test-two" place-holder="Search" value=""></search-input>
<search-input data-test-id="test-three" place-holder="Search" value=""></search-input>
I am trying to detect objects in an image using tensorflow js.
I followed the tutorial in here Tensorflow Object Detection with Tensorflow 2: Creating a custom model
So everything works fine in google collab and object detection works fine.
I get a saved_model, which I now would like to use on a browser.
So I convert the model using
tensorflowjs_converter --input_format=tf_saved_model --output_format=tfjs_graph_model --signature_name=serving_default --saved_model_tags=serve /content/inference_graph/saved_model /mobilenet/web_model
and then I download the same.
I am now trying to use this on the browser using the following html
<!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/#tensorflow/tfjs"> </script>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div>
<img id="test1" src="test/IMG_20181228_102636.jpg" width="300" height="300" />
<div id="test1_pred">WORKING</div>
</div>
</div>
<script>
async function predict() {
const model = await tf.loadGraphModel('http://localhost:8000/mobilenet/web_model/model.json');
const img = document.getElementById('test1');
const tfImg = tf.browser.fromPixels(img);
const smalImg = tf.image.resizeBilinear(tfImg, [300, 300]);
const resized = tf.cast(smalImg, 'int32');
const t4d = tf.tensor4d(Array.from(smalImg.dataSync()),[1,300,300,3]);
let predictions = await model.executeAsync(tf.cast(t4d, "int32"));
console.log(predictions);
}
setTimeout(function() {
predict();
}, 1000);
</script>
</body>
</html>
The error I get on console is
tfjs:17 Uncaught (in promise) Error: Error in matMul: inputs must have the same rank of at least 2, got ranks 5 and 2.
at xv (tfjs:17)
at matMul_ (tfjs:17)
at matMul__op (tfjs:17)
at tfjs:17
at tfjs:17
at tfjs:17
at t.e.scopedRun (tfjs:17)
at t.e.tidy (tfjs:17)
at $b (tfjs:17)
at tfjs:17
I am at loss as to what is the error here. It does seem like it is to do with the ranks in the matrices, but not sure what is causing the mismatch.
How should I resize my images so that it is acceptable to the model ?
I am also posting my model in the gist in here model.json
Any help would be appreciated
I have an issue with loading Leaflet map using Vue.js and Bulma tab components (via Buefy).
If map is placed inside tab then it does not load all tiles until browser window is resized.
If map is placed outside of Bulma tabs component then it loads without any issue.
Calling map.invalidateSize() seems to help, but to do it automatically when tab changes I have to call it using setTimeout and put very big delay, like 1sec - which is very ugly.
How to get this working without this invalidateSize workaround?
Example with the issue: https://codepen.io/alxxnder/pen/zyYxwd
Example without the issue: https://codepen.io/alxxnder/pen/LMYEjr
Code:
new Vue({
el: '#app',
data: {
map: null,
},
methods: {
invalidateSize: function() {
this.map.invalidateSize();
}
},
mounted() {
this.map = L.map('map').setView([38.63, -90.23], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
}
})
<!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>Leaflet Test</title>
<link rel="stylesheet" href="https://unpkg.com/buefy#0.7/dist/buefy.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css">
</head>
<body>
<div class="section">
<div class="container" id="app">
<b-tabs position="is-centered">
<b-tab-item label="Tab 1">
<div class="section">
Tab 1
<div class="map" id="map" style="height: 400px; width: 100%"></div>
<button class="button is-info" #click="invalidateSize()">invalidateSize</button>
</div>
</b-tab-item>
<b-tab-item label="Tab 2">
<div class="section">
Tab 2
</div>
</b-tab-item>
</b-tabs>
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2"></script>
<script src="https://unpkg.com/buefy#0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
</html>
As explained in Data-toggle tab does not download Leaflet map, the issue is caused by the fact that your map container does not have yet its full size when you initialize it. You may understand it more easily if your map had been in an initially hidden tab (e.g. in tab 2).
As for your initially active tab (i.e. tab 1), it is probable that Buefy / Bulma still takes some time to reveal the tab content.
Since there is no event when the tab transition completes, you have to wait for the transition duration before calling the invalidateSize method. In your case, 300ms seems to be fine.
Then you should also call it again when the user changes the tab (see Buefy tabs events), otherwise should the browser had changed size while your tab was hidden, the same issue would happen again.
Demo with maps in the 2 tabs:
new Vue({
el: '#app',
data: {
map: null,
map2: null,
tabMaps: []
},
methods: {
invalidateSize: function(tabIndex) {
setTimeout(() => {
if (typeof tabIndex === "number") {
this.tabMaps[tabIndex].invalidateSize();
} else {
// invalidate all maps
this.tabMaps.forEach(map => {
map.invalidateSize();
});
}
}, 300);
}
},
mounted() {
this.map = L.map('map').setView([38.63, -90.23], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
// map2 in tab2
this.map2 = L.map(this.$refs.map2).setView([38.63, -90.23], 12);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
this.map2
);
this.tabMaps.push(this.map); // 0
this.tabMaps.push(this.map2); // 1
this.invalidateSize();
}
})
<link rel="stylesheet" href="https://unpkg.com/buefy#0.7/dist/buefy.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css">
<div class="section">
<div class="container" id="app">
<b-tabs #change="invalidateSize" position="is-centered">
<b-tab-item label="Tab 1">
<div class="section">
Tab 1
<div class="map" id="map" style="height: 400px; width: 100%"></div>
<button class="button is-info" #click="invalidateSize()">invalidateSize</button>
</div>
</b-tab-item>
<b-tab-item label="Tab 2">
<div class="section">
Tab 2
<div class="map" ref="map2" style="height: 400px; width: 100%"></div>
</div>
</b-tab-item>
</b-tabs>
</div>
</div>
<script src="https://unpkg.com/vue#2"></script>
<script src="https://unpkg.com/buefy#0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
I'm pretty new on AMP, and I've built a few pages, so bear with me if I sound silly.
I have an input box, and I want to trigger some classes on other elements with focusing and blurring the input.
Here's an example code I have written for the input:
<input type="text" id="selectedFilter_SearchBox"
on="focus:AMP.setState({isFocued: true}),
focus:AMP.setState({isFocued: false})"/>
And here's what I have for the element I want to be triggered by focusing the input:
<div class="test" [class]="isFocued ? 'test focused' : 'test'">
.....
</div>
I should mention that these elements are pretty far from each other on DOM, so using CSS (+ and ~) is impossible.
Thanks
Currently, the focus event can be simulated by using tap event, but that only works for mouse and not the tab key.
Here is the reference Issue link
You can achieve your goal by css also Working Url
Code
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="you-link-or-same-page.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.test { display:none;}
#selectedFilter_SearchBox:focus + .test { display:block; }
</style>
</head>
<body>
<input type="text" id="selectedFilter_SearchBox" />
<p class="test">
Your content here .....
</p>
</body>
</html>