I'm just starting to create a controller for use with Airconsole. I'd like it to be somewhat complicated and will be using Angular to create different pages.
In Unity, I can drag in a controller.html file. However, I've been getting resource not found errors when I try to access say controller.js or controller.css. How can I upload multliple files to the Airconsole host? Is there a general pattern used by other games?
So far I'm considering
hosting my app separately and just redirecting to my separate web page. This seems to give errors in the emulator though.
Compiling the entire app into just one HTML file.. Not sure how to get these entirely into one file. When I run ng build I get a smaller dist compiled file, but it still consists of several smaller files. Will try dragging that into Unity and trying again. But dragging the entire Angular project inside Unity felt like a really bad idea..
Link to files hosted on separate pages but still have the uploaded HTML file do something.. But not sure how much I need to do here vs how much I can move to other files that I host.
You can create your controller using controller.html with Angular (1?!), have different pages (e.g. via ng-include and the angular routing module) and upload everything to AirConsole (developers).
By using ng-include you can have multiple .html views you dynamically load into the controller.html.
I once wrote an example app for AirConsole and Angular:
https://github.com/francois-n-dream/airconsole-angular-phaser
Just think of it as if you would make a (mobile) website which in addition uses the AirConsole API for device communication.
My basic "how to include other files" question was answered well by another question: How to include js and css.
For the more generic question of working with Angular, I still haven't quite figured it out. But what I'm doing at the moment:
I have an Angular project outside of Unity. I run ng build to compile everything into a folder dist. Then two options work:
Deploy the dist folder to static file hosting and change index.html's relative links to point to the separately hosted files with <base href="https://cloudfilehosting/airconsole-host/">
OR
Copy the dist folder into Unity's Assets/WebGLTemplates/AirConsole folder.
Related
Having solely developed Android applications I have decided to try crossplatform development, so far Flutter has been a much more pleasant experience than Xamarin however, I have now run into a roadblock.
I want to give users the ability to read ePub files downloaded from my server. I came across this Flutter package but it is not clear to me how to display the ePub inside a container to the user - https://pub.dartlang.org/packages/epub
I cannot find any examples/tutorials other than the one provided on the example page (which has a Image package conflict. I fixed this conflict by changing the package import line to 'import package:image/image.dart' as image) then all references to it in the main method to image.Image. This might be another issue to resolve another day when it comes to adding custom placeholders for missing images.
I cannot share my ePub files but I have tested with the one found on the github repository here https://github.com/orthros/dart-epub/blob/dev/test/hittelOnGoldMines.epub
Thank you
The only resource that I found was https://github.com/pycampers/flutter_pdf_viewer, but for now it is just for Android.
Another aproach is to load a webview and load the pdf using some JS framework.
In my web app i use datejs now i am building a mobile app with ionic and i wanted to use the same datejs but i realised that the total size of my app more than doubled when i included datejs.
So i looked into the datejs folder and i realised that even for the build there are a whole lot of files apart from the date.min.js, now i assume it is these files that are making my app bulky (from 2.6MB to 6.3MB), i would like to take them out by i do not know if the main date.min.js file is dependent on them.
Here is a screenshot of the datejs folder structure:
Inside the build folder:
And inside the production folder:
As you can see for a build there appear to be so many files, my main reason for using datejs and not the date filter in angularjs was because i tried performing an operation that kept on given me the date as "undefined" when i used the angularjs date filter no matter what i did, however when i switched to using datejs that issue was resolved.
The date.min.js is not dependent on the country specific files. You only require date.min.js.
Hope this helps.
I made a custom html file for my Unity web project. Though after building my project, it opens the default pre-made one. Is there a way to make Unity open my own html file instead of the default one?
You're looking for the Web Player Templates manual page.
In your Assets folder, create a folder named WebPlayerTemplates, and put your template in there. You'll need an HTML file. To help make this slightly easier, Unity will look in that HTML for certain tokens that it can replace with data from the project.
For example, one such tag is %UNITY_WEB_PATH%, which will be replaced with the path to your built project file.
Some tags include:
UNITY_WEB_NAME Name of the webplayer.
UNITY_WIDTH UNITY_HEIGHT Onscreen width and height of the player in
pixels.
UNITY_WEB_PATH Local path to the webplayer file.
UNITY_UNITYOBJECT_URL In the usual case where the page will download
UnityObject2.js from the Unity’s website (ie, the Offline Deployment
option is disabled), this tag will provide the download URL.
UNITY_UNITYOBJECT_DEPENDENCIES The UnityObject2.js have dependencies
and this tag will be replaced with the needed dependencies for it to
work properly.
In every deployment I've seen, the WebPlayer plugin is is launched via JavaScript, by instantiating a UnityObject2 and calling its initPlugin method:
var u = new UnityObject2();
u.initPlugin(jQuery("#unityPlayer")[0], "Example.unity3d");
The above assumes that you have a div with id #unityPlayer, and that Example.unity3d is a valid path to your Unity build file.
In practice, though, I recommend working from Unity's generated HTML files; they include some failsafes for cases where the WebPlayer plugin isn't installed or fails to load. The manual page linked above also has HTML source examples which include some of those special tags.
UnityObject2 does have some advanced features, which are also documented in the manual. If your game needs to communicate with the outer web page, that is also possible.
I am developing an application for a client where a requirement is that a series of complex (multi-file, JS, CSS, etc), websites must be presented offline, without any web connection required at all.
So I have all of the HTML content folders, and can add them into my XCode project... but now I need to show them.
The UIWebView is fine when you just have one HTML file... but the relative paths for the JS and CSS do not translate over.
What is the best way to do this. I've seen a couple of potential choices. One way is to run a super basic web server locally, dump all the files into /documents (or thereabouts) and serve it from there... the second is to somehow make UIWebView re-interpret the paths so that they point to the right place locally... which I am not sure if it's possible but I've seen it alluded to.
Seems like a lot of people just cover loading a single UIWebView page, and not so much discussing how to deal with CSS/JS dependencies.
Anyone have any bright ideas, links, etc?
Thanks
I think that if you add your HTML/CSS/JS tree to your Xcode project and select "Create folder references for any added folder" (instead of "Recursively create groups for any added folders"), then your bundle will contain the HTML/CSS/JS folder hierarchy (instead of the flattened-out list of all files). This would preserve relative paths.
As to the "reinterpreting" point, you can define
– webView:shouldStartLoadWithRequest:navigationType:
in your UIWebViewDelegate to intercept any attempt at loading any file. There you can change the url on the fly.
Also, have a look at this interesting article by Rob Napier: Drop-in offline caching for UIWebView.
How can I add third party images to be be used in the Phonegap Framework in Xcode?
I have a few images to include.
The linking to the various websites work but the images are not showing, it is just a question mark.
<li>Google<img src="googlelogo.png"/>
Please help. Thank you :)
I'm assuming that you want to refer to an image that you include with your PhoneGap project. Just make sure any images you want to reference are included inside the www folder of your project.
Think of the www folder like you would a directory on a server somewhere. Your index.html page sits on the root, and you can create any number of sub-directories you'd like... just as you would on a regular server.
<li>Google<img src="googlelogo.png"/>
The above code suggests you have a file at: www/googlelogo.png
<li>Google<img src="myImages/googlelogo.png"/>
The above code suggests you have a file at: www/myImages/googlelogo.png