Hi everyone!
First of all I would like to thank you guys for sharing this plugin! It was a lifesaver to say the least! With it i was able to use Mansory js to create a mansory photo gallery in a way i could never replicate using only UMG slate panels.
In fact this is the reason i need some help. I followed the documentation until the and i could ship a “WindowsNoEditor” for my gallery using Shipping Build. It works just fine for windows builds but when i try to package it for my mobile (a Xiaomi Pocophone F1) it shows a black screen and an Android Logo on the top left corner. These are the pictures from the windows build and the android one:
As you guys can see: I have a vertical box with a text block and the plugin’s browser component as children. For some reason the latter can’t render on mobile…
// HTML
</header>
<script src="./js/ue4-interface-script.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<head>
<link rel="stylesheet" type="text/css" href="./style/css.css">
</head>
<body>
<div class="grid">
</div>
</body>
<script>
ue4("start")
ue.interface.drawImages=function(config){
console.log("load")
console.log(config)
let folder = "./imgs/gallery/"
let grid = document.querySelector(".grid")
config.names.forEach(name =>{
let finalPath = folder + name
ue4("printFileName",finalPath,function(fixedAbsolutePath)
{
finalPath = fixedAbsolutePath
},2)
let newImg = document.createElement("img");
newImg.classList.add("grid-item")
newImg.src=finalPath
//console.log(finalPath)
newImg.setAttribute("id",name)
newImg.style.width= (config.width + "px")
grid.appendChild(newImg)
newImg.addEventListener("click", e =>{
ue4("click!",e.path[0].id)
})
})
ue4("Images created!", {}, function(updateMasonry)
{
var options =
{
/*columnWidth:5,*/
itemSelector: '.grid-item',
gutter:10,
horizontalOrder:true,
transitionDuration:'1.0',
originTop:true,
resize: true,
fitWidth: true
}
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, options)
},3)
}
function imgClick(e)
{
ue4("click!")
console.log(e.id)
}
</script>
//Css
.grid-item{
margin-bottom: 10px;
}
.grid {
margin: 0% auto;
}
body{
background-color: aliceblue;
}
//Interface Script
// create the global ue4(...) helper function
"object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue4=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n});
Thank you in advance!