I'm trying the Image Tracking example as explained here - https://github.com/AR-js-org/AR.js#get-started
I've replaced the image and video with my own and added the whole project in an Amazon S3 bucket.
When I run the html page, I get an error in the browser console "Error in loading marker on Worker 403".
I'm assuming this indicates that the NFT image is somehow not loading. There are no CORS errors, or any other unauthorized errors indicated in the console.
Things I've tried after going through some pages on stack overflow (but they didn't help)-
Initially the image I was using was very basic, so I changed to the Pinball image so that AR.js gets more descriptions.
Disabled my chrome extensions like Ad Blocker etc.
Can someone help me with what is wrong or missing for the NFT to load properly?
Here's my code -
<script
src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems -->
<a-nft
type="nft"
url="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/pinball.jpg"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/video1.mp4"
scale="5 5 5"
position="50 150 0"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
UPDATE:
I've changed my code to use an nft merker and a-video. But I'm still getting the same error. Here's the updated code:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems -->
<a-nft
type="nft"
url="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/peacock-nft/peacock"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-video
src="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/video1.mp4"
width="9"
height="9"
position="50 150 0"
>
</a-video>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
UPDATE2 - #Kalwalt's solution resolved my issue. Additionally, turns out the my old html file was still cached in Cloudfront. I had to invalidate that file so that the newer version is pulled from S3 bucket.
The NFT Natural Feature Tracking use "descriptors" to track a desired image. To accomplish this you need to create your own descriptors, that is a NFT marker, you have two choices:
with the online tool carnaux.github.io/NFT-Marker-Creator/ easier to do but slower
the nodejs app but you need to download or clone the repository
Follow the instructions in the Readme or my tutorial.
You are getting that error "Error in loading marker on Worker 403". because you are trying to use a jpg image as NFT marker and this is not allowed.
Moreover you are trying to load a video instead of a gltf model. If you want to load a video you should use <a-video> primitive. For the gltf supply a gltf model with extension .gltf or .glb.
The marker you are using is a .jpg image which is not what a-nft need. You need to make the NFT from your image using this Carnaux NFT Marker Creator (which takes time)
Or follow this docs for Node version AR.js NFT Marker Creator Docs
Edit: Also, you are using <a-entity gltf-model...> but with .mp4 (video).
gltf-model is for .gltf or .glb format (3D model). If you want to use video use a-video
Related
Tried to follow this manual, but it doesn't work: https://www.jetbrains.com/help/webstorm/markdown.html#css
Is it possible at all? Did somebody succeed in this task?
Yes, it's possible.
Download one of the markdown css files from https://github.com/sindresorhus/github-markdown-css/.
In the Markdown prefs, set the custom css to point to that file (URLs don't work).
Paste this into the "Add CSS rules:" field:
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
#media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
At the top of your markdown file, insert this (the blank line is important):
<div class="markdown-body">
At the bottom of your markdown file, insert this:
</div>
That's it!
Building icCube dashboards for different devices is handled via lay-outs. This works nice. But when it comes to desktop dashboards, there is a wide range of screen-sizes and resolutions and you can make only one desktop lay-out.
For example, I've a 15" laptop for on the read that is connected to a 27" monitor on my workbench if I'm in the office. On my monitor I've far more space to have more widgets then on my laptop screen. It would be nice to create separate lay-out for different screen-sizes / screen-resolutions or make a responsive dashboard.
I'm curious if there is a solutions to handle different screen-sizes / screen-resolutions.
We have not yet found a responsive layout that resolved our questions. We are open to ideas, but it's not simple to have a same dashboard that 'works' on both a 10'' and 27'' monitor.
For now you have a few options in icCube :
Create a fixed layout (it's one of the options we prefer)
Create a layout that scales with the size of the screen
Create a report with multiple layouts (this is for tablets, phones, printing). Not yet for different screen sizes.
And indeed you might create a set of different reports.
_hope it helps.
Simple dashboard grid layout
<div class="grid-container">
<header class="header"></header>
<aside class="sidenav"></aside>
<main class="main"></main>
<footer class="footer"></footer>
</div>
Need to apply CSS
/* Simple dashboard grid CSS */
/* Assign grid instructions to our parent grid container */
.grid-container {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 50px 1fr 50px;
grid-template-areas:
"sidenav header"
"sidenav main"
"sidenav footer";
height: 100vh;
}
/* Give every child element its grid name */
.header {
grid-area: header;
background-color: #648ca6;
}
.sidenav {
grid-area: sidenav;
background-color: #394263;
}
.main {
grid-area: main;
background-color: #8fd4d9;
}
.footer {
grid-area: footer;
background-color: #648ca6;
}
Create the styles and structure for our header and footer elements; grid-area declared previously
<style>
.header, .footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background-color: #648ca6;
}
</style>
<header class="header">
<div class="header__search">Search...</div>
<div class="header__avatar">Your face</div>
</header>
<footer class="footer">
<div class="footer__copyright">© 2019</div>
<div class="footer__signature">Sample</div>
</footer>
I was trying to build myself a portfolio site. When I thought I was about to finish building the basic template, the margin and media queries stuff totally drove me crazy.
Here is my temporarily hosted domain, www.kenlyxu.com/portfolio_new
I made the pages fit to whatever browser size by using
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
I'm trying to make 10px margin on all side and on every page so that I use this container.
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 100%;
width: 100%;
}
#workcontainer {
margin: 10px;
background-color: #f29e28;
width: 100%;
}
I hope the end result would be like orange background with white margins on all sides. When seeing my site on the desktop, the margin-right and margin-bottom not showing. They only show when I use width: 98.5%;
Also, the orange background color should expand according to the size of browser. On the iPhone 5 portrait view, the orange background does not extent the bottom part. I tried to use some standard media queries for it, but I don't know what values should I give to each of the mobile devices.
Try
Position:fixed;
in
# thethecontainer
now your code looks like
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 98%;
position:fixed;
width: 98.5%;
}
I have an issue building my sencha touch 2 app for production, using this command: "sencha app build production". I see following issue:
C:\xampp\htdocs\eiamobile\eiamobile\i>sencha app build production
[INFO] Deploying your application to C:\xampp\htdocs\eiamobile\eiamobile\i\build\production
[INFO] Copied sdk/sencha-touch.js
[INFO] Copied app.js
[ERROR] UNKNOWN, unknown error 'C:\xampp\htdocs\eiamobile\eiamobile\i\build\production\http:'
I see the ONLY if I use external JS (google geometry) file in app.json file:
"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
{
"path": "http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
]
ANY help will be appreciated
EDIT:
Adding my index.html file
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>eia-sencha</title>
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3&libraries=geometry"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Try to add "remote": true in app.json
http://mitchellsimoens.com/2012/07/sencha-touch-2/going-remote-with-sencha-command/
From Sencha Touch documentation
To use this component you must include an additional JavaScript file from Google:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
So, I guess you could try to load the API this way, which is actually how they do it in the map example that comes with the framework.
Also if google is undefined when your app starts, I guess you can load GM API asynchronously :
http://www.senchafiddle.com/#MhAME
Hope this helps
I am using 2 regions with 1 region display selector to create some tab functionality between regions. See the following as an example: http://apex.oracle.com/pls/apex/f?p=19914:30 I used the following to remove the 'Show All' button http://apexplained.wordpress.com/2012/07/16/hide-the-show-all-tab-in-a-region-selector/
Mine looks the same as the example above however it doesnt have the rounded corners on the region display selector.
I wondered how you can apply the rounded corners to the display selector, increase the font size and height of the region display selector?
I've tried style="" in the 'Region Attributes' of the Region display selector but no luck. When investigating my page in Firefox using Firebug the display selector is held in a DIV / in an UL list but i wouldnt know how to access those in the APEX builder.
The region display selector has rounded corners when using Chrome, but not in Internet Explorer.
Please could i have some help with my problem.
Oracle Version: Oracle version 10.2.0.4.0
Full APEX version: Application Express 4.1.1.00.23
Browser(s) and version(s) used: Internet Explorer 7 & 8
Theme: Simple Red
Template(s): The standard templates with the Simple Red theme.
Region/item type(s): 3 HTML pages each holding text box fields.
Thank you.
See example below of region display selector:
Example of region selector html from Simple Red theme
<div class="apex-rds-container">
<ul class="apex-rds" id="485041125812774413_RDS">
<li class="apex-rds-first">
<span>Show All</span>
</li>
<li class="apex-rds-selected">
<span>datepicker</span>
</li>
<li class="apex-rds-last">
<span>region 2</span>
</li>
</ul>
</div>
inspect style tab for
DIV
.apex-rds-container {
height: 40px;
margin: 0 0 9px;
}
UL
ul.apex-rds {
background: url("../images/bg-anchor-nc.gif") repeat-x scroll 0 0 transparent;
border: 1px solid #999999;
border-radius: 8px 8px 8px 8px;
box-shadow: 1px 2px 2px #AAAAAA;
float: left;
list-style-type: none;
margin: 0;
}
LI
ul.apex-rds li {
float: left;
list-style: none outside none;
}
A
ul.apex-rds li.apex-rds-first a {
border-left: 0 solid #000000;
}
ul.apex-rds li a {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #999999;
display: block;
height: 16px;
padding: 1px 10px 0;
text-decoration: none;
}
a {
color: #660000;
}
SPAN
ul.apex-rds li span {
color: #000000;
font-size: 11px;
}
So, this shows that a background image is used for the UL. This image's dimensions are 1x18px according to firebug. Hovering over an item will set a different background image, as will a current region selection.
So, if you want a larger selection, use a larger image. Increase the div height. Set the correct styles for current/non-current items.
To increase font size, alter the css for the SPAN.
Borders are done with border-radius: 8px 8px 8px 8px; which don't work in IE.
All css can be found in the theme css file in your apex_images folder: /i/themes/theme1/css/theme_4_0.css
Go to line 1316,
/* -------------------- Region Display Selector -------------------- */
You can find everything you need there.
Don't mess in that file though. If you will, make a backup. Work clean and override properly within a css of your own!