I am trying to create a free drawing canvas using WebComponent, Polymer to be more precise. I have created a component, and the code is:
<polymer-element name="video-canvas" attributes="pad sourceVideo widthVideo heightVideo preloadVideo">
<template>
<div id= "content-container" >
<div class="canvas-container" >
<canvas id="c" height={{canvasHeight}} width={{canvasWidth}} style="border: 1px solid rgb(170, 170, 170); left: 10px; top: 10px; -moz-user-select: none; cursor: crosshair;"></canvas>
</div>
</div>
<style>
:host {
display: block;
}
#video{
margin-left: {{videoMargin}}px;
margin-top:{{canvasMarginTop}}px;
}
</style>
</template>
<script>
Polymer('video-canvas',{
width: '320',
height: '240',
src:'http://golovin.de/ba/parking.mp4',
padding:'3',
canvas:null,
domReady: function() {
this.canvas = this.__canvas = new fabric.Canvas("c", {
isDrawingMode: true
});
this.canvas.freeDrawingBrush.width = 10,
this.canvas.freeDrawingBrush.color = '#FF0000',
console.log(this.canvas)
}
});
</script>
</polymer-element>
This is the video-canvas.html component.
The index file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Canvas</title>
<!-- Importing Web Component's Polyfill -->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- Importing Custom Elements -->
<link rel="import" href="video-canvas.html">
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<!-- Using Custom Elements -->
<video-canvas id = "videoCanvas" pad="100" sourceVideo="http://golovin.de/ba/parking.mp4" widthVideo="640" heightVideo="300" preloadVideo="auto"></video-canvas>
</body>
</html>
My problem is that in Firefox 36.0.1 it works perfectly fine, but in Google Chrome 41.0.2272.101 it just does not work. I can see that the Fabric.js canvas is not initialized properly. I am sure there should be some stupid mistake of mine, but cannot figure it out. Or could it be some problem of Fabric.js?
The problem was solved when i changed this line:
this.canvas = this.__canvas = new fabric.Canvas("c", {
isDrawingMode: true
});
to:
this.canvas = this.__canvas = new fabric.Canvas(this.$.c, {
isDrawingMode: true
});
Now it works perfectly fine.
Related
There is a "scanning" graphic here that hides when you find the marker.
https://webxr.io/webar-playground/app/
How is that done? I have tried a bunch of different things with no luck. Maybe I am just not putting it in the correct place? Or need to call the action? Here is the last thing I tried:
'''
var m = document.querySelector("a-marker")
AFRAME.registerComponent('hide-on-scan', {
init: function () {
m.addEventListener("markerFound", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: none;");
})
m.addEventListener("markerLost", (e)=>{
document.getElementsByTagName("HeaderText")[0].setAttribute("style", "display: block;");
})
});
'''
I figured it out for those looking to do the same thing here's my HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style type="text/css">
#HeadText {
position: absolute;
top:0px;
left:50%;
z-index: 10000;
}
</style>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js">
</script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs='sourceType: webcam;'>
<div id="HeadText" style="visibility:visible;">
<h1>test</h1>
</div>
<a-marker preset='hiro'>
<a-box id="MyBox" position='0 0.5 0' material='opacity: 0.5;' color="red" ></a-box>
</a-marker>
<a-camera-static />
</a-scene>
</body>
<script src="assets/script.js"></script>
</html>
</head>
<body>
And here is the script.js:
var m = document.querySelector("a-marker")
m.addEventListener("markerFound", (e)=>{
console.log("found")
document.getElementById("HeadText").style.visibility = "hidden";
})
m.addEventListener("markerLost", (e)=>{
console.log("lost");
document.getElementById("HeadText").style.visibility = "visible";
})
I am trying out sample code provided by Google at https://www.polymer-project.org/1.0/start/first-element/intro.
This is what I have so far:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="/my_components/icon-toggle-demo.html" rel="import">
</head>
<body>
<icon-toggle-demo toggle-icon="star"></icon-toggle-demo>
</body>
</html>
icon-toggle-demo.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icons/iron-icons.html">
<link rel="import" href="icon-toggle.html">
<dom-module id="icon-toggle-demo">
<template>
<style>
:host {
font-family: sans-serif;
};
</style>
<h3>Statically-configured icon-toggles</h3>
<icon-toggle toggle-icon="star"></icon-toggle>
<icon-toggle toggle-icon="star" pressed></icon-toggle>
<h3>Data-bound icon-toggle</h3>
<!-- use a computed binding to generate the message -->
<div><span>[[message(isFav)]]</span></div>
<!-- curly brackets ({{}}} allow two-way binding -->
<icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>
</template>
<script>
Polymer({
is: "icon-toggle-demo",
message: function(fav) {
if (fav) {
return "You really like me!";
} else {
return "Do you like me?";
}
}
});
</script>
</dom-module>
icon-toggle.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html">
<dom-module id="icon-toggle">
<template>
<style>
/* local DOM styles go here */
:host {
display: inline-block;
}
iron-icon {
fill: rgba(0,0,0,0);
stroke: currentcolor;
}
:host([pressed]) iron-icon {
fill: currentcolor;
}
</style>
<!-- local DOM goes here -->
<!-- <span>Not much here yet.</span> -->
<!-- <iron-icon icon="polymer"> -->
<iron-icon icon="[[toggleIcon]]">
</iron-icon>
</template>
<script>
Polymer({
is: 'icon-toggle',
properties: {
toggleIcon: String,
pressed: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true
}
},
listeners: {
'tap': 'toggle'
},
toggle: function() {
this.pressed = !this.pressed;
}
});
</script>
</dom-module>
The code works fine in chrome but I get following error in FF:
TypeError: document.registerElement is not a function
I have already included the polyfill. Something else missing?
You're doing nothing wrong. The following line in your index.html file defaults to the newest version (v1.0.0-rc.1) of the webcomponents polyfill.
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
There appears to be a bug in the current version for Firefox. The same error can also be observed in the Plunker that is linked in the Polymer docs here. This will hopefully be fixed by the Polymer team.
To fix it for now, you can explicitly use an older version. For example.
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.24/webcomponents-lite.js"></script>
WebComponents v1.0.0+ should only be used with Polymer 2.0. Use version ^0.7.24 with Polymer 1.
This is a cross post from GitHub google-map issue #342, with more details and asking for help here.
I have a project where the Google Maps api-key is loaded with the user data through an ajax call, so I am using a dom-if waiting for the api-key to be available, as follow:
<template is="dom-if" if="[[mapikey]]" >
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers api-key="[[mapikey]]">
<google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>
</template>
That approach works fine, unless in addition to set the mapikey value, the script also does some importHref() calls to load user's custom code (that's my case).
When loading a fairly large import or just a few of them (as the jsbin below), the css associated with #map changes to position:relative and the map gets hidden with height=0
element.style {
position: relative;
overflow: hidden;
}
<style>…</style>
#map.google-map {
position: absolute; <-- overwritten by element.style relative above
top: 0;
right: 0;
bottom: 0;
left: 0;
}
This is the jsbin code, also copied below for easier review
And, this is a working Url for that code.
If you click TEST-API first, you'd get and see the map as expected.
However, if your click TEST-IMPORT first, you'd get the map, but hidden, due to the change in position for the #map. Inspect the element local-dummy > google-map > div id="map" to see the changed position in thet #map element.style
p.s. If I do the importHref() calls withiin a setTimeout() with 1000 ms, then the issue goes away, but that might fail depending on the imports.
This is the full jsbin code for reproducing this issue
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="paper-button/paper-button.html">
<dom-module id="local-dummy">
<style> google-map { height:600px; } </style>
<template>
<paper-button on-click="_testImport" >Test-Import</paper-button>
<paper-button on-click="_testApi" >Test-Api</paper-button>
<template is="dom-if" if="[[mapikey]]" >
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers api-key="[[mapikey]]">
<google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>
</template>
</template>
<script>
Polymer({
is: "local-dummy",
properties: {
mapikey: { notify:true }
},
_testImport: function(){
this.mapikey = "AIzaSyCib7-e6RE0e9rTDjQDjUKDLCSfKxZ3iQ4";
this.importHref("paper-material/paper-material.html",e=>console.log(e.type),e=>console.log(e.type));
this.importHref("firebase-element/firebase-collection.html",e=>console.log(e.type),e=>console.log(e.type));
this.importHref("firebase-element/firebase-document.html",e=>console.log(e.type),e=>console.log(e.type));
},
_testApi: function(){
this.mapikey = "AIzaSyCib7-e6RE0e9rTDjQDjUKDLCSfKxZ3iQ4";
}
});
</script>
</dom-module>
</head>
<body>
<local-dummy></local-dummy>
</body>
</html>
Thanks in advance for your support, Fausto
In that case since DOM is getting changed, map needs to be resized like this:
HTMLImports.whenReady(function () {
document.getElementById("map").style.height = "600px"; //ensure map container height
var map = document.querySelector('google-map');
map.resize();
});
Example
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="paper-button/paper-button.html">
<style>
</style>
<dom-module id="local-dummy">
<style>
google-map {
height: 600px;
}
</style>
<template>
<paper-button on-click="_testImport">Test-Import</paper-button>
<paper-button on-click="_testApi">Test-Api</paper-button>
<template is="dom-if" if="[[mapikey]]">
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
<google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>
</template>
</template>
<script>
Polymer({
is: "local-dummy",
properties: {
mapikey: { notify: true }
},
_testImport: function () {
this.mapikey = "--KEY GOES HERE--";
this.importHref("paper-material/paper-material.html", e => console.log(e.type), e => console.log(e.type));
this.importHref("firebase-element/firebase-collection.html", e => console.log(e.type), e => console.log(e.type));
this.importHref("firebase-element/firebase-document.html", e => console.log(e.type), e => console.log(e.type));
HTMLImports.whenReady(function () {
var map = document.querySelector('google-map');
document.getElementById("map").style.height = "600px";
map.resize();
console.log("resized");
});
},
_testApi: function () {
this.mapikey = "--KEY GOES HERE--";
}
});
</script>
</dom-module>
</head>
<body>
<local-dummy></local-dummy>
</body>
</html>
I want to show the variable state in tooltip of bootstrap, but its not getting the variable content its shows the variable name "Pump 2 {{pumpStatus2.helpText}}", and it should appear "Pump 2 On/Off" according the variable content, it works with the title when I mouse over the image.
<img class="pump" id="pump2" title="Pump 2 {{Status2.helpText}}"
ng-src="img/{{Status2.status}}" data-toggle="tooltip">
Have you considered adding ui.bootstrap as a dependency in your module? This will allow you to get bootstrap features through angular. Here is an example using a dynamic tooltip (uib-tooltip). More bootstrap examples can be found at: http://angular-ui.github.io/bootstrap/
angular.module('myApp', ['ui.bootstrap'])
.controller('MainController', function ($scope) {
var pump = {};
$scope.pump = pump;
pump.state="off";
pump.setState = function (state) {
pump.state = state;
}
});
.pump-image {
background: url('https://gauchedecombat.files.wordpress.com/2012/05/on-off.png') no-repeat;
height: 270px;
width: 262px;
}
.on {
background-position: 0 0;
}
.off {
background-position: -262px 0;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp" ng-controller="MainController as ctrl">
<input type="radio" ng-model="pump.state" value="off" />Off
<input type="radio" ng-model="pump.state" value="on" />On
<div uib-tooltip="Pump: {{pump.state}}" class="pump-image" ng-class="{on: pump.state === 'on', off: pump.state==='off'}" tooltip-placement="right"></div>
</div>
Here is a working sample: http://plnkr.co/edit/KNjxPZLFcUKS2M2fHj5G?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#2.0.0-alpha.45" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
<img ng-src="{{imgUrl}}" alt="Smiley face" title="Test String {{imgTitle}}" height="42" width="42">
</body>
</html>
JavaScript:
angular.module('app',[]);
angular.module('app').controller("MainCtrl",function($scope){
$scope.imgUrl = "http://b3.us.is.pp.ru/m/mink_blue/1/45377641oJC.jpg";
$scope.imgTitle = "Hello World!";
});
Is your app wired correctly? Please check the controller and the variables in scope. Or try to share a plunk.
Right now I have a canvas pop-up, but I want it to be separate from the window from which it is originated (it's stuck within the boundaries of the first window, I can only drag it within the first window).
Is there any way to do this?
You can open a new browser instance with: window.open(aURL,'name','width=400,height=400')
1. Create an html file for your popup
Put this code into popupTest.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
window{width:300px; height:150px; }
body{ background-color: ivory;}
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='14px verdana';
ctx.fillText('I am a popup canvas.',20,50);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
2. Open the popup (popupTest.html) in a new browser instance
Put this code into runPopup.html and open it:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var popupURL='popupTest.html';
function myPopup(url){
window.open(url,'myPopup','width=400,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes');
return false;
}
$('#pop').on('click',function(){
myPopup(popupURL);
return(false);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id=pop>Open Popup</button>
</body>
</html>
Note about opening your popup
This method requires the user to trigger the popup (eg button-click or anchor-click). If you want to programmatically trigger the popup you must be sure the user has any popup blocker turned off or else your popup will be blocked.