AR A-frame Hide div when marker active - html

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";
})

Related

How to correctly use <svg> tags with jquery in intellij?

So here I have CDN of both JQuery & jsbarcode -> jsbarcode info https://lindell.me/JsBarcode/
The output should show a barcode the the const "number" var.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
</head>
<body >
</div>
<script>
const number = '12345678';
$(document).ready(function(){
JsBarcode("#barcode", number, {
text: number.match(/.{1,4}/g).join(" "),
width: 2,
height: 50,
fontSize: 15,
});
});
</script>
<svg id="barcode"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</body>
</html>
You need to add the script tags for your libraries before the code that uses them. They can go within the <head> tag. Your code snippet becomes the following:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</head>
<body>
<script>
const number = '12345678';
$(document).ready(function(){
JsBarcode("#barcode", number, {
text: number.match(/.{1,4}/g).join(" "),
width: 2,
height: 50,
fontSize: 15,
});
});
</script>
<svg id="barcode"></svg>
</body>
</html>
(In the code snippet I provided I also cleaned up some errors in the HTML, like the </div> for a nonexistent div tag.)

Attempting to save an edited image to my local computer using AngularJS

I am looking to save an image to my computer, so far I have the code below which displays an image with text inserted above. I'm unsure of how to save the image to my local machine, could someone help point me in the direction.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div ng-app= "myapp" ng-controller = "connection">
Enter The Text :
<input type="text" ng-model= "Username" name="Username">
<button ng-click="submit(Username)" >Save</button><br><br>
<div class="container">
<img src="DHONI.jpg" >
<div class="centered">{{Username}}</div>
</div>
</div>
<script>
var App = angular.module("myapp",[])
App.controller ('connection',function ($scope){
$scope.submit= submit;
function submit(Username){
$scope.name = Username;
}
});
</script>
</body>
</html>
You can achieve this by using canvas.Please replace {BASE64IMAGE} with your image as base64.
run the code in local system.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<style>
.ctn {
position: relative;
}
.u-name {
position: absolute;
top: 50%;
left: 25%;
}
</style>
<script>
var App = angular.module("myapp", [])
App.controller('connection', function ($scope) {
$scope.submit = submit;
function submit(Username) {
$scope.name = Username;
var element = $("#ImageContent");
html2canvas(element, {
onrendered: function (canvas) {
console.log(canvas);
var imgageData = canvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#ImageDownload").attr("download", Username+".png").attr("href", newData);
document.getElementById('ImageDownload').click();
}
});
}
});
</script>
</head>
<body>
<div ng-app="myapp" ng-controller="connection">
<div class="container">
<form> <br> Enter The Text :
<input type="text" ng-model="Username" name="Username">
<button ng-click="submit(Username)" >Submit</button>
<br>
<div id="ImageContent">
<img src='data:image/jpeg;base64,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'/>
<div class="u-name">{{Username}}</div>
</div>
<a id="ImageDownload" href="" ></a>
</form>
</div>
</div>
<script>
</script>
</body>
</html>

About DIVs (Hiding and Showing not Java)

<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}

Exit URL on converted swf with swiffy

I tried to add an exit URL and metrics from doubleclick studio from a converted swf with swiffy to the HTML5 file.
Could anyone tell me what the most efficient way is to do this? What would the code look like in the HTML5 creative? Where in the code to add best? What tags to use?
The code swiffy generates looks like a mess to me.
<!doctype html>
<html>
<head>
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<link rel="stylesheet" type="text/css" href="exit.css">
<script src="exit.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy Output</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>
<script>
swiffyobject = {"as3":true,"frameRate":25,"frameCount":342,"backgroundColor":-1,"frameSize":{"ymin":0,"xmin":0,"ymax":1800,"xmax":19400},"fileSize":52767,"v":"7.3.0","internedStrings":["::::::6Y:","::::: <<shortend from here>>
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 970px; height: 90px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
This is an add-on / improvement to this answer.
So you will have a few files in your HTML5 folder ( that you'll package into a zip to upload to Doubleclick Studio at the end of the build process )
index.html
styles.css
backupimage ( *.gif / *.jpg )
ajax-loader.gif ( I use this as a placeholder when elements are still loading )
object.js ( where the converted Swiffy code will be )
script.js ( where the magic happens )
The backupimage is the image you should show just in case the Creative doesn't load, and the ajax-loader.gif is available widely online. So we'll focus on the other 4 files.
index.html
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>[ Creative Name ]</title>
<meta name="ad.size" content="width=300,height=250">
<link rel="stylesheet" type="text/css" href="styles.css" media="all">
<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<!-- Make sure that this is the most recent runtime.js from the Swiffy Conversion file -->
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>
<script src="object.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="swiffycontainer" class="loading"></div>
<div id="bg-exit"></div>
</body>
</html>
styles.css
* {
border:0;
padding:0;
margin:0;
}
body, html {
width:100%;
height:100%;
overflow:hidden;
background:#fff;
width:100%;
height:100%;
position:relative;
}
#bg-exit {
position:absolute;
z-index:999999;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
cursor: pointer;
}
#swiffycontainer {
position:absolute;
z-index:100;
width:100%;
height:100%;
overflow:hidden;
}
#swiffycontainer.loading {
background: url("ajax-loader.gif") center center no-repeat;
}
objects.js
Copy whatever the output from the swiffy conversion and paste into the {} as shown below
var swiffyobject = {
"as3":false,"frameRate":24,"frameCount":114,"backgroundColor":-1,"frameSize":{" .... blah blah blah blah }]
};
scripts.js
var stage;
var clickTag;
if (!Enabler.isInitialized()) {
Enabler.addEventListener(
studio.events.StudioEvent.INIT,
enablerInitialized
);
} else {
enablerInitialized();
}
function enablerInitialized() {
if (!Enabler.isVisible()) {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisible
);
} else {
adVisible();
}
}
function adVisible() {
document.getElementById('swiffycontainer').className = "";
document.getElementById('bg-exit').addEventListener('click', exitHandler, false);
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {});
stage.start();
}
function exitHandler(e) {
Enabler.exit('Exit');
}
Doing the above works for me and all of my creatives using the above code have been approved by Google's QA and are now being trafficked - so I'm pretty confident with my answer - although again, this is just an improvement from this answer.

Polymer not initializing Fabric.js on Google Chrome

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.