Facebook Canvas with Unity Integration change unity config params - html

Hello i'm working on a facebook game using unity3D, in the past i could just add the html code with custom configuration into the facebook canvas, but now in the new sdk and integration with unity facebook directly loads the unity3d file, ignoring all my custom html code and custom configuration.
In the documentation says that i can add custom html code in unity by using the external calls, but that means that the html header and modifications will only appear after the game is loaded and runing, is there a way to have the html header while the game is loading.
and, how i can modify the default logoimage, progressbarimage, etc.
Here is the uinty configuration and the code i have on my html document that i want to apply on my facebook game.
var config = {
width: 1024,
height: 768,
backgroundcolor: "FFFFFF",
bordercolor: "383838",
textcolor: "FFFFFF",
logoimage: "Resources/loading.png",
progressbarimage: "Resources/Loading-Bar_Full.png",
progressframeimage: "Resources/Loading-Bar_Empty.png",
disableContextMenu: true,
params: { enableDebugging:"0" }
};
var u = new UnityObject2( { params: config } );
Html header WIP
<div id="header">
<span>-Beta Build- | </span> My Game <br/>
<img alt="Header!" src="Resources/WebHeader.png"/>
<div id="like">
<img alt="Like Us" src="Resources/WebLike.png"/>
</div>
<div id="store">
<img alt="Earn Credits" src="Resources/WebCredits.png"/>
</div>
<div id="gift">
<img alt="Send Gift" src="Resources/WebSendGift.png"/>
</div>
<div id="help">
<img alt="Help" src="Resources/WebHelp.png"/>
</div>
</div>
Thanks.

Related

The images are not showing up. I'm using express, EJS and bootstrap

I'm making a website and for some reason the images are not showing up on the browser. The ALT TEXT is appearing correctly but the images are not. Images have been placed in public/images...
The code is as:
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public\images\untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
try to use forward slash for image path instead of back slash
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public/images/untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
More examples: >>>
developer.mozilla.org/en-US/docs/Web/HTML/Element/img
w3schools.com/html/html_filepaths.asp
You need to set static folder path first for the express app in order to access static files using ejs or html. Here we will consider public folder as a static folder for our app.
Just copy the below line to the entrypoint of your app & then replace "./public" with your public folder path.
app.use(express.static("./public"));
Complete Example Code
const express = require("express");
const app = express();
app.use(express.static("./public"));
app.get("/", (req,res) => {
return res.send("welcome")
})
/* Start Server */
app.listen(5000, () => {
logger.info(`Success, service running on port 5000.`);
})
Also,
<img src="public\images\untitled.png" alt="an image"> will be replaced with <img src="/images/untitled.png" alt="an image">

Vue.JS and figures/captions

I'm working on my new website design and decided to incorporate Vue.JS which I know very little about but am learning as I redesign my website.
I am using a Vue app to load different pages on my site.
I am also using it to load the image gallery, so I have all my images placed into an array in the app and they load just fine into the HTML.
I decided to use figures and want to place a caption beneath each image.
What I'm trying to do is place the figcaption text in the vue app, as part of the image array and have it load each text that belongs with each image.
this is the code i have for the html:
<div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption> a caption </figcaption>
</figure>
</div>
the "a caption" is just a place taker right now so i can see what it looks like on the site but i want that replaced with the actual caption which would be set in the vue app which is below.
js:
<script>
const test = Vue.createApp({
data(){
return{
home: true,
gallery: false,
store: false,
about: false,
imgs: [
{ url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },
.... rest of the vue app code which is fine and works so not necessary to show.
Question: Can I do it this way and how do I access that 'caption' portion of text and put it into the html as text?
Simply use img.caption in the figure tag to display the caption content.
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption>{{ img.caption }}</figcaption>
</figure>
I think this works fine.
<div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
<figure>
<img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
<figcaption v-html=“caption”></figcaption>
</figure>
</div>
const test = Vue.createApp({
data(){
return{
home: true,
gallery: false,
store: false,
about: false,
caption:"<h1>hi</h1>",
imgs: [
{ url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },

HTML icons mapping based on data value

I am creating a weather web app based on API from openweather.com using Spring-Boot and Angular.
I am also using this weather-icons package.
In my HTML file weather icons are displayed like this:
<div class="jumbotron">
<i class="wi wi-snow" style="font-size: 8em;"></i>
<i id="description">{{weather.weatherID}}</i>
</div>
With the help of API I have also weather code value available in html.
Let's say I have a file weather.data with weather codes mapped to icon description like this:
601: snow
602: sleet
611: rain-mix
Is it possible to display certain icon in HTML based on value in data file?
What I want to do is something like:
<div class="jumbotron">
<i class="wi wi-{{weatherDescription}}" style="font-size: 8em;"></i>
</div>
You can get your data from weather.data in a scope variable.
It would be like:
In Controller:
$http.get(path of weather.data file, null, function(response){
$scope.weatherList = response; //do angular.fromJson if required
});
I hope you are getting a JSON object as :
$scope.weatherList = {
601: "snow",
602: "sleet",
611: "rain - mix"
}
If you are getting weather code from server side in weatherDescription, then you can use it like this on html :
In Html:
<div class="jumbotron">
<i class="wi wi-{{weatherList[weatherDescription]}}" style="font-size: 8em;"></i>
</div>
I hope this works for you.

Load view after data is loaded

I have some trouble. I am using this plugin "angular-masonry" (it's on Github) to dynamically build the grid on the page. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc
Here is my code:
<div class="container" style="width:80%">
<h1 style="text-align: center; margin-bottom: 40px">
Category: {{category.text}}
</h1>
<div>(masonry='' load-images="false")
<div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
<div>
<h3>(style='margin-left:30px')
Portal: {{portal.text}}
</h3>
<div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
<div class="claim_sections">
<claimforlist claim="claim"></claimforlist>
</div>
</div>
</div>
</div>
</div>
</div>
But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ
I think that view loads earlier than JSON data arrives.
Can anyone help and tell me how can I load view after the data has arrived? Or if you know another reason of such an issue, please reply.
Thanks in advance.
You can add a scope boolean variable with value set to false, and change the value to true on your http promise success.
Code sample:
function myController($scope, YourDataServer) {
$scope.dataLoadedSuccessfully = false;
yourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>
<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
<!-- data goes here -->
</div>

Prevent jQuery Mobile Page navigation (PhoneGap) IF

Using PhoneGap...
I would like to find a way to prevent the navigation for data-role='page', if the user has no network connection. I'm having a hard time finding any resources for this, am a few hours deep on google searching, although I could be using the wrong terms.
I want the user to only be able to navigate here if there is network connection:
<div data-role="page" id="Location">
<div data-role="header" data-theme="e">
Incid..
<h1>
Location</h1>
Use Current
</div>
<!-- /header -->
<div data-role="content">
<!--<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>-->
<div id="map_canvas">
</div>
</div>
Using this jQuery for pageshow:
$('#Location').live('pageshow', function (event, ui) {
try {
display();
}
catch (e) {
log(e);
alert(e);
}
});
I know I should be able to catch the network status using if(navigator.network.connection.type == 'none'), but I'm having difficulty stopping the Location page from showing.
Use $.mobile.changePage('#pageID') to change the page depending on if the user has a network connection or not.