I'm unable to get a dojo example listed under dojo's official documentation to work.
When I run Dojo's demo from their web page, it works fine. But when I copy and paste the code (which appears below) and try to run it in ay web browser, I get an error. For multiple different web browsers, I get an error in my console log that says:
Error: Tried to register widget with id==borderContainerThree but that
id is already registered
This is frustrating because I can't figure out the difference that is causing my code to fail, but their code to work.
I've copied their code verbatim from the web page.
The example is given on the page:
http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html
and is titled:
"BorderContainer Inside A Dijit Template"
A similar question here (dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered) and here (Dojo - "Tried to register widget with id==centerPane but that id is already registered") said this might be because I'm calling parser.parse twice, but if I uncomment the parser.parse line,
the error disappears, but there is no content displayed on the web page.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dijit/layout/BorderContainer — The Dojo Toolkit - Reference Guide</title>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
<script type="text/javascript">
dojoConfig = {
async: true
};
</script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>
</head>
<body class="claro" >
My Test
<script type="text/javascript">
require([
"dojo/parser",
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"
], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
declare("MyDijit",
[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// Note: string would come from dojo/text! plugin in a 'proper' dijit
templateString: '<div style="width: 100%; height: 100%;">' +
'<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
' style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
'<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
'<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
' <div data-dojo-type="dijit/form/Button">A Button</div>' +
'</div>' +
'</div></div>'
});
parser.parse();
});
</script>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
<script type="dojo/on" data-dojo-event="click">
require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
// Create a new instance
var newdijit = new MyDijit({}, domConstruct.create('div'));
newdijit.placeAt(dom.byId('mydijitDestination'));
newdijit.startup();
});
</script>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
OUTER LEFT<br />
This is my content.<br />
There is much like it,<br />
but this is mine.<br />
My content is my best friend.<br />
It is my life.<br />
I must master it,<br />
as I must master my life.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
<div id="mydijitDestination" style="width: 100%; height: 100%"></div>
</div>
</div>
</body>
</html>
Any suggestions given as to what I'm doing wrong would be greatly appreciated.
The error indeed indicates that you're trying to create a widget with the same ID twice, either because you have two elements with the same ID, or because you are parsing the same markup twice.
I suggest commenting the line parser.parse() and by adding parseOnLoad: true to dojoConfig, for example:
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
The reason you won't see a thing when you comment the parsing line, is another issue. Most layout widgets in Dojo are generating their layout according to the space of the parent DOM node. This means you have to set the space of the widget by using CSS first, for example:
#borderContainerThree {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
If you do that, then everything should work fine, just as in this fiddle: http://jsfiddle.net/92NT4/
Related
I am developing an AR app using Reactjs and 'AR.js'.I created this react app using the 'create-react-app' npm package. And I am hosting it on firebase. But the problem is that when I try to run the app it is showing the following error.
> [error] Error loading KPM data: error reading data. [error] Error
> reading KPM data from /markerNFT_0.fset3 [error] ARToolKitJS(): Unable
> to set up NFT marker.
The camera loads but the marker show the following error on console. The NFT markers are fine I check with another app it worked fine.
Below Is My Source Code
NB:- Both the marker and the GLTF file actually getting downloaded. I checked it with the chrome dev tools network tab. They are fine. This to Script on index.html is for the Home.js
<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>
DOWNLOAD GLTF
DOWNLOAD NFT MARKER
Home.js
import React, { Component } from 'react';
import fire from "./config/fire";
class Home extends Component{
constructor(props)
{
super(props)
this.state={
}
}
logout(){
fire.auth().signOut();
}
render()
{
return(
<div>
<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;"
>
<a-nft
type="nft"
url="https://reactlogin3.web.app/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="https://reactlogin3.web.app/scene.gltf"
scale="5 5 5"
position="0 0 0"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</div>
)
}
}
export default Home;
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<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>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Just running barebones "material-components-web" and I can't get the input field to look like it's supposed to. JS interaction is working great. Theme looks good. But my field is getting cut off
index.html:
<html>
<head>
<link rel="stylesheet" href="bundle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
</head>
<body class="mdc-typography">
<h1 class="mdc-typography--headline1">Big header</h1>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
<!-- at the bottom of the page -->
<script src="bundle.js"></script>
</body>
</html>
app.scss:
#import "material-components-web/material-components-web";
app.js:
import * as mdc from 'material-components-web'
mdc.autoInit()
I have no other files pulling in. No other styles added. What could be happening?
That usually happens when .mdc-text-field__input has incorrect box-sizing (for example, inheriting parental .mdc-text-field's border-box). Please ensure that .mdc-text-field__input has initial box-sizing:
.mdc-text-field__input {
box-sizing: initial; // or content-box
}
The following worked for me: add the following to a custom style sheet.
.mdc-text-field {
width: -webkit-fill-available;
width: fill-available;
}
I have a strange issue that is happening on one of my projects (but not other projects) and I can't see anyone else having anything remotely similar. (I apologise in advance for lack of proper examples as this is actual company code).
The problem I have is in a .NET Core 2 project I am trying to use nodejs to create a PDF (like I have in a second project). However, the PDF only generates properly when the Visual Studio (2017) debugger is attached.
try
{
var result = await nodeServices.InvokeAsync<byte[]>(pdfSettings, viewWithAbsoluteLinks);
string invoicePath = _configuration.GetSection("AppSettings")["InvoicePath"];
string filename = Path.Combine(invoicePath, "invoice.pdf");
FileUtils.WriteToFile(filename, result);
return Json(new { success = true, size = result.Count(), viewAsHtml, viewWithAbsoluteLinks, environment, pdfSettings, result });
}
catch
{
return Json(new { success = false });
}
I am using jsrender with phantom-pdf, and when I attach the debugger in Visual Studio result is 69318. However, when I run without the debugger attached result = 66167 bytes.
To debug I returned the variable viewWithAbsoluteLinks so I could see if there was any difference, and in both cases that variable is the same.
viewWithAbsoluteLinks is:
<html>
<head>
<style>
.pdf-hidden {
display: none;
}
.pdf-visible {
display: block !important;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Invoice</title>
<link rel="stylesheet" href="http://localhost:10795/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost:10795/css/site.css">
<link rel="stylesheet" href="http://localhost:10795/css/site.theme.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
crossorigin="anonymous">
<link rel="stylesheet" href="http://localhost:10795/lib/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
<style>
body {
font-family: "DIN 2014 Light", 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #000;
}
</style>
</head>
<body>
<div class="pull-right" style="border: 1px solid #0f0">
<img src="http://localhost:10795/images/training-logo.png">
</div>
<div style="padding-top: 50px;">
<table style="width: 100%; border: 1px solid #000">
<tbody>
<tr>
<td style="border: 1px solid #f00"> Address </td>
<td> Invoice </td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"> window.JSREPORT_READY_TO_START = true; </script>
</body>
</html>
When the debugger is attached the text within the tags shows in the PDF. When the debugger is not attached the text does not appear. (The s have different colour borders - and the colours display properly)
I am assuming running when debugging is altering something, but I'm not sure what. I thought at first it was just that CSS was making the text white, but the file sizes suggest the text really isn't there.
Does anyone have any ideas what Visual Studio may be doing to make it work properly when the debugger is attached?
After struggling for a while I may have just solved the issue. Timing.
Event though the debugger was attached (no breakpoints, just attached) it's possible that this caused a small delay just long enough for the PDF to be generated.
A quick look on SO and I found this: How to set time delay in javascript
I added a delay of 1 second and it generated the PDF with text correctly without the debugger being attached.
I'm using the following code:
<html>
<body bgcolor="black">
<center>
<div style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div>
</center>
</html>
It works in Chrome but not in IE or Firefox. My goal with this is to overlay cover.png over declined.png so people cannot directly save the image, but instead save a transparent png. I prefer to do this without using external CSS. Thanks for your help. :)
The standard method in css is to use margin: 0 auto, so:
<div style="width: 1080px; height: 288px; margin: 0 auto; position: relative">
<img ... >
<img ... >
</div>
Note the addition of position: relative. Without that, your images would position themselves absolutely relative to the <body> element. Also note that these sorts of overlays are trivial to bypass by anyone with the slightest knowledge of HTML and/or access to basic browser developer tools.
-Avoid using old tags such as instead use CSS.
-Use appropriate DOCTYPE (example below shows doctype for html5)
-Always close your tags, your code does not have closing tags for body.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div><!-- end div main -->
</body>
</html>
CSS:
#main{
margin: 0 auto;
width:1080px;
height:288px;
}
I'm trying to set the size of a dijit.Dialog, but it seems limited to 600x400, no matter what size I set it. I've copied the code from dojocampus and the dialog appear, but when i set the size larger, it only shows 600x400. Using firebug and selecting items inside the dialog, I see that they are larger than the dialog, but don't show correctly. I set it up to scroll, but the bottom of the scrollbar is out of view. In firebug, I've check the maxSize from _Widget and it is set to infinity. Here is my code to set the dialog.
<div id="sized" dojoType="dijit.Dialog" title="My scrolling dialog">
<div style="width: 580px; height: 600px; overflow: scroll;">
Any suggestions for sizing the dialog box larger?
I just coded up a quick sample from scratch using dojo 1.4 and was able to set an arbitrarily large DBX size with no problems.
Without seeing your code it might be hard to find where your issue is stemming from but it does not seem to be an inherent limitation of the dojo toolkit. Perhaps you have some CSS rules that are inherited in a way you did not anticipate?
Perhaps you can use my sample below to compare with your use case and figure out what is different about your implementation.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
djConfig = {
parseOnLoad: true
};
google.load("dojo", "1.4");
google.setOnLoadCallback(function (){
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
});
</script>
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css";
</style>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" type="button">Show big Dialog
<script type="dojo/method" event="onClick" args="evt">
dijit.byId("bigdbx").show();
</script>
</button>
<div id="bigdbx" dojoType="dijit.Dialog" title="Big Dialog" width="900px">
<p style="width: 1100px; height: 800px;">Paragraph with really wide fixed size...</p>
</div>
</body>
</html>