Personal toolbar button in Forge Viewer not appearing - javascript

I followed the tutorial to learn Autodesk Forge. I linked my BIM 360 account to the Forge Viewer. I would now like to add extensions to it and have a button on the toolbar that links to my extensions.
However when I follow the extension tutorial, nothing shows up. I also tried this one https://forge.autodesk.com/en/docs/viewer/v5/tutorials/toolbar-button/#before-you-begin and nothing appear.
I do not know what I am doing wrong since it seems to work if we follow the tutorial...
I am working on VS code
Right now, my code looks like this in the index.html file :
enter image description here
The rest is exactly like the tutorial except that I replaced "MyAwesomeExtension" with "PieChartExtension"

One thing to try will be to switch your var config3d to the following:
var config3d = {extensions: ['PieChartExtension']}
The reason might be, your syntax might be affecting and that is why the Viewer does not understand what to load. Did you check the console for any messaging?

Related

On the Wix Velo platform, is code placed in the "Page" area publicly visible?

According to this article, code that is put in the Page area specifically is publicly accessible. They even include this image to demonstrate:
I have not been able to see code that is entered here on the published version of the site. Here is an example where I published a blank page with a code in the onReady function:
https://steven0790.wixsite.com/my-site/blank
When I go to this page and inspect and search, I can't find the code. I would expect it to be in a <script> tag.
I have also tried looking through links in the code in case this is saved in a .js file or something like that.
Can anyone confirm whether or not this code really is accessible?
Check the Console instead of the Elements tab in the browser developer tools. It will let you know which JS file contains your code.
Look for a message that looks something like this:
Running the code for the HOME page. To debug this code in your browser's dev tools, open cnric.js.
You can then open that file in your browser developer tools and see the code.

Loading gif in page:failed to load resource Cordova

For some time I'm trying to develop my own app using cordova. The first page I created is the login. When the user clicks on the submit button I check the credentials by sending them using ajax. Meanwhile I want to display a loading animation,and I found how to do it:
$.mobile.loading('show')
It works..almost. It only shows a black circle on the middle of the screen. I checked the console only to find :
Failed to load resource
ajax-loader.gif (0,0)
I ran multiple test: I commented the security policy,copied the image in different folders,checked the spelling and finally created my own span with url(images/ajax-loader.gif) and ..it worked. Then I did the same thing with the original loader(I found its span in the DOM explorer) and added an inline style url(images/ajax-loader.gif)..it worked!
Finally I realised this:
It is like it tries to load the same image from two different sources. How can I fix it?
Other details:Jquery 2.0.0/Jquery-mobile 1.4.5
This is some weird behaviour still not explained-so ANYONE can post the correct reason/explanation for this- but I will post the fix.
I took a look at this post and thought to give it a try.
This is how the css looks like(I edited it in debug mode so it should be overridden) :background: url(.././images/ajax-loader.gif)
Now it works but the question IS still active.

Loading sourcemaps and debugging in Safari?

We ran into an error that only occurs on Safari browsers, so I dusted off my OSX partition on my Macbook and am trying to debug it but I can't find out how to see the original source code and set a breakpoint.
My main file is main.d7f60b0631c7822cabf3.bundle.js and the last line of the file is this, which points to the sourcemap file which does exist because I can type in the url and get it, and it works in firefox and chrome:
//# sourceMappingURL=main.d7f60b0631c7822cabf3.bundle.js.map
In Firefox I can go to the debugger tab in dev tools and under sources I see my original source file webpack:///src/app/app.component.ts and I can open it and set a breakpoint.
In Chrome dev tools I go to the 'Sources' tab and do the same thing navigating a tree to webpack:// - . - src - app - app.component.ts.
Is there a way to achieve the same thing in Safari? From memory since I"m writing this on Windows I can't see any files in the debug tab, just a list of breakpoints. In the resources tab I can see the bundle and an arrow that looks like I should be able to expand it, but clicking on that arrow does turn it from right to down like it is expanded but nothing is displayed. Other files like jquery do seem to have the original source under them when expanded...
I had the same question, and found the answer in another posting here:
How do I toggle source mapping in Safari 7?
(short version, in the debugger, command-click on whatever symbol you want to look at, and it should jump to the original source. For reference, I'm working with TypeScript compiled to JavaScript)
The author points to this documentation:
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW4
In the process, I also noticed that in the Resources tab in the Safari debugger, it shows the foo.js with a turner next to it, which expands to show the original foo.ts file (and I assume with a more complex source, it might expand to show multiple sources if they get concatenated together?)
Personal opinion: I think the turner is a great solution to this problem... odd that the debugger defaults to showing the "compiled"/"transpiled" source rather than the stuff one is logically wanting to debug.
First be patient while the browser processes all the source maps.
Whenever that finishes, you should be able to search for any original source file by entering the name of that file into the input field located at the bottom of the pane with the placeholder "Filter". It's a pretty counterintuitive UX IMO. Hope this helps someone!
Screenshot:

Programmatically "open in Adobe Reader" from JavaScript

The iOS safari browser has a handy option that appears whenever you open a PDF page in the browser
If you have Adobe Reader installed, a button will appear that says:
Open in "Adobe Reader"...
However, if you open up the PDF document where the HUD (address bar, etc) is hidden, like in a phone gap application, or a quick and dirty "Add to Home Screen app" using the following meta:
<meta name="apple-mobile-web-app-capable" content="yes" />
then, obviously, the button will not appear.
I want to still open the PDF document in Adobe Reader. Does anyone know a way to do this programmatically?
I want to include jsPDF in a phonegap application, and save the results, and this would be the easiest way to do that.
Thanks in advance!
With some fantastic help from Vince Parsons (and others), I've solved this problem.
Using a PhoneGap Plugin, you can create / expose a JavaScript call, which is then processed in Objective-c.
Here's the two lines you need (yes, only two lines!), and a subsequent explanation:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,100,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
Explanation
Your input will be the file location.
In my case it's inside the app sandbox, so it looks something like:
/var/mobile/Applications/B16-HU83-GU1D-1D3NT1F13R/Documents/DocumentToExport.pdf
If you want to use an external URL, you can (with adjustments), but for my purposes it was internal.
So, with my file location as an input (let's call my input variable myDocumentPath), you just need to declare a document controller:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
this creates a UIDocumentInteractionController using the interactionControllerWithURL method, which needs an NSURL variable.
We create that NSURL variable using the fileURLWithPath method, passing it our myDocumentPath.
The next line calls presentOpenInMenuFromRect Which takes a rectangle and a viewport:
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,0,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
the rectangle is created at position 0,0 with a width and height of 0,0 (GCRectMake(0,0,1,1))
and the viewport is taken from the PhoneGap application: UIApplication.sharedApplication.keyWindow
I'm reeling with joy and amazement that this only took two lines of code to fix. Granted, there's not a way to do it with JavaScript only, but it's still pretty elegant, and works great.
You can open your PDF using PhoneGap InAppBrowser(http://docs.phonegap.com/en/2.5.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser) if the PDF is opend from the server using a URL or if its from local device, you can use the PDFViewer plugin: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/PDFViewer.
Bothways the native default PDF reader will be used to open the PDF.
I really searched for an ready-to-use solution and gave up at one point. There are a few old repositories on GitHub and some articles building on the two lines of the green marked answer - but nothing works satisfying for me.
That's why i forked the cordova-plugin-file-opener2 to change the iOS behavior and this works perfect for me. To allow also parallel usage of the forked plugin, i've renamed it creatively to cordova-plugin-file-opener3. It provides the same features as version 2.0.1 of the forked plugin except that on iOS the "Open In"-Dialog is shown.
The change to the plugin was trivial. Just replaced one method call and did some renaming. Don't know why it was so hard to find a working solution - but maybe that i didn't search the right way.
You can find the repository here:
https://github.com/napolitano/cordova-plugin-file-opener3
Feel free to use it.

Tumblr JS Embed CSS/HTML Tags for Styling?

I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!

Categories

Resources