How to render openFrameworks app to host on browser - javascript

I'm new to both openFrameworks and this compiler called Emscripten.
After struggling for a few days, I was able to compile my openFrameworks/C++ code into js but Emscripten gives me an html file with a lot of junk included (For example, there is a header and footer -
http://openframeworks.cc/setup/emscripten/)
I'm trying to host the video/animation itself like it is on this page (http://www.syedrezaali.com/#/great-scott/) but I have no idea how to go about it. Can anyone help me out?
Thank you

If you follow OF's guidelines Emscripten generates not only the html file but also some other files (I think it's 4 files in total). You need to copy all of those into your site, then link to the html file.
Notice that while developing you can use
emrun --browser chrome bin/yourSample.html
To open the file, but you cannot just open the .html file (not sure why). See this guidelines as well, which are linked in the OF tutorial.
Update
I haven't tested this, but it looks like OF loads a site template. See this makefile for emscripten, you may specify your own via PROJECT_EMSCRIPTEN_TEMPLATE or you could just change the template OF uses.

Related

PWA not finding javascript files in directories

I'm trying for a while now to create a PWA in Oracle APEX by following some instructions on http://vmorneau.me/apex-pwa-part4/, but I'm having no luck in certain parts.
I've installed the demo to test it and see what's wrong, but I'm having the same issues with the demo app, namely some important files not being detected/found when I run it. I thought I had configured something wrong previously, but this time it was supposed to work properly.
Example, I have the app.js inside the js directory in Apex:
When I run the app, I get these messages:
I tried checking the file path the same way I tried to see if the manifest.json file was in the proper root folder, and it couldn't be found:
This looks like a common problem I see on the forums, that doesn't relate to the PWA concept. You'll probably find the same thing if you tried to refer to static files loaded into the workspace.
See Morten's example regarding a fixing the configuration
https://ora-00001.blogspot.com/2016/12/apex-plugin-files-and-404-not-found-in-ords.html
Or placed your files in the middle tier, using /i/ (or preferrably a custom location /c/)

Including node libraries (unirest) in a chrome extension

I'd like to make requests to the twinword text classification api, however I can see that it's designed to be used with unirest in node.js. Would it be possible to do this inside a chrome extension? If so, how might I go about doing it? I'm pretty inexperienced when it comes to API calls - if there are any examples of chrome extensions which have done something similar, I'd love to take a look.
Thanks for any help!
You cant use node modules in chrome extension directly because your script file must be a single .js without any import or require but there is a way.
you can use webpack to generate a single js file of your code
webpack looks to your code and when sees a require goes to the file and puts the code in a js file i have a template for chrome extension in my github :
Chrome-Extension-Template

Bundle.js ReactJS file beautify

I've build a project with pure reactJS using create-react-app and I successfully uploaded the app to my server but unfortunately I've lost my laptop and all of my data :( but my project working on the site my question is:
Is it possible to get my project back again to development mode through existing files?
You may be able to use https://github.com/1egoman/debundle to un-bundle the index.js file (in the case of create-react-app, Webpack is the bundler). If the bundled file was built in production mode, you may need to use something like https://www.npmjs.com/package/unuglify-js to get it back in somewhat readable order.
Sorry to point you to libraries which may or may not work, but the truth is that you may be better starting from scratch--the real knowledge in your mind, not in the source code. You may be able to throw in some improvements the second time around... look at the bright side!
solution in here: Can I use a sourcemap and bundle file to retrieve original react code
THIS IS 90% fix.
Publish the APP so you can access it through browser (e.g. NETLIFY, can publish by accessing your Git repo) -> open the published project in the browser -> then inside the browser press ctrl + shift + i (chrome and pc).
This gives you access to developer tools.
Find: SOURCES TAB
on left hand side you will see folder structure -> click into STATIC
Now you can see all CONTENT inside JS files and CSS by clicking on them.
You can now either copy and paste them into you IDE or download them by right clicking them and Save As.

Eclipse JSDT autocomplete not working

I've done research and see this is a recognized issue. I guess my question will be: Is there a solution in Eclipse Mars or in Neon? Another plugin for JavaScript Content Assist?
I'm running Eclipse Mars and have a project with Java and JavaScript (uses ScriptEngineManager). JavaDoc/AutoComplete is working in Java but not in JS files. It Was working but then just stopped. I've restarted, rebooted, refreshed, rebuilt. No joy. The error reported is :
An exception occurred while getting the JSDoc. See log for details.
(in the log: ) file.js [in [in ...Workspace\.metadata\.plugins\org.eclipse.wst.jsdt.core\libraries\system.js]] does not exist
I deleted and re-defined the workspace. No joy. Mouseover the keyword Array and it does show system.jsArray with ECMA info. But mouseover String and it shows src/docs/jsString. "src/docs" is a path in my project.
I'm thinking it's just looking in the wrong place for the docs but I don't know where to set that. I've read that there is a bug where auto complete only works within a file. This seems to be consistent where it's still looking within the current file for the definition of everything.
I can get String to refer back to system.jsString if I add an invalid function. But if I fix the function it goes back to looking in my src/docs. Go figure.
Maybe the project structure is wrong (this is FOSS I got from Github). In the root of the project there are src/foo folders with packages and .java source, a reference to the JRE System Library, a couple .jars, and another src folder with src/docs/java with .java files and src/docs/js with .js files. Do I need to change the folder type of src or do something else to it so that it's recognized as a code folder? Right now it's in the project explorer with a common "folder" icon, not like one of the package source folders.
Do I need Neon? Do I need another IDE?
This suggestion to update the .project didn't help.
I'm going to try the package "Eclipse IDE for JavaScript and Web Developers" but I dont know if that will help with this Java/JS hybrid project. I'm also going to try Atom.
Thanks.

How to use PDF.js to load file included in web app (not from "file:" URL?

I want to be able to show PDF files within my Chrome app using PDF.js but the documentation is non-existent. I've been unable to find any simple examples or tutorials that show the code to load a PDF from a relative URL, show the page, and navigate through the PDF. They have very complex examples where 95% of the code does other things and it's very difficult to parse these and find the relevant functions. I would like to:
Include the relevant code in my app (is this the "pdf.js" created by "node make generic" and nothing else? Or do i need to include other JS files as well?)
Be able to show PDF files that are inside my myapp.crx file
Does pdf.js require "LocalStorage"? Will localStorage continue to be allowed in Chrome extensions/apps or is it deprecated?
Can someone tell me if #2 is possible and how to find some example code or documentation on the proper classes/functions to call and files to include/build?
node make generic outputs to the build/generic directory. This directory contains two subdirectories, "build" and "web".
"build" contains "pdf.js", which is the actual PDF engine.
"web" contains a viewer, similar to the one at http://mozilla.github.io/pdf.js/web/viewer.html.
After copying both of those previous directories to your app, you should be able to load the PDF file using chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf
PDF.js does not require localStorage.It's used if available for persisting settings such as scroll position, but if unavailable, PDF.just continues to work without it.
There is one significant issue though: PDF.js loads the localization files using synchronous XMLHttpRequest. This is not allowed in a Chrome app. You could solve this issue by serializing all files in the locales, put it in a single JavaScript file, load this in viewer.html, and simplify l10n.js to read the translations from the file I just described.
Just to clarify: normally you should be able to access a file baked into your CRX by providing a relative or absolute path to it within the CRX's internal directory structure, e.g.:
'myfiles/pdfs/example.pdf'
With PDF.js, I guess that's what "path-to-file.pdf" should be in Rob's answer above, verbatim.

Categories