How to Configure Heroku to host files using gzip compression

I am trying to deploy a node.js app on heroku , which is serving unity webGL exported game to clients. After Unity3d 5+ release , WebGL exports by Unity uses gzip compression by default .

Well ,

heroku server [Node.js] dont serves gzip compressed files , which is causing my Game to throw error in console on load , main unity loading window wont update (just blank) till files dont get completely download & a slight delay while browser manually decompresses it.

These are the file types Unity WebGL Export provides = || . datagz || . jsgz || . memgz ||

So what i need is , a way to configure heroku node.js server for serving the gzip compression .

1 Answers

Answers 1

It doesn't look like you are having issues serving gzipped files. The messages in the console could be a separate issue altogether.

What is more likely is that your node app is not serving the right folder or files. If you can provide a list of files that is in your build folder (I assume that this is where Unity places its files), I can take a look.

Also, do review your Heroku configuration, namely the command used by the web process. If it is npm start or something, then look at the script it points to (see in your package.json file), and see if it is serving files out of the build folder.

Read More

AngularJS-Ionic : create a swipeable horizonatlview which will update vertical view

I want to create a UI for Android and iOS using angularjs and ionic. View is as below:

Explanation: In this view I want to have a horizontal strip (1 to 8 date displayed currently but it will be swipeable from day 1 of the month to last day of month) containing dates. This strip will be swipeable left and right. Each day will have some data which will be displayed in vertical list view. When user will swipe left or right on horizontal strip at the same time vertical data will update. Vertical list view will show data only of dates displayed in horizontal strip.

I am not sure how I can do it. Any pointer e.g. library/sample code etc will be really appreciated.

Thanks

1 Answers

Answers 1

i would recommend swiper , i used it before and i find it simple and easy to work with : http://idangero.us/swiper/ , http://idangero.us/swiper/get-started/

documentation : http://idangero.us/swiper/api/

Swiper is also a default slider component in Ionic Framework

quick overview :

you can configure it to display x slides at a time, and the one in the middle will always have the swiper-slide-active class, you have an event slideChange that's fired when the swiper-slide-active is changed, you can put in that whatever function you want ( maybe an ajax one to fetch the day's data ) it's just fired a bit too early so you need to wrap it in setTimeout of 1ms

i made a basic example according to you layout and here's a fiddle that you can play with and change it to your needs :

https://jsfiddle.net/o9u0qenk/15/ ( updated for the weeks ) https://jsfiddle.net/o9u0qenk/22/ ( updated for real time )

EDIT

to display the data in a range of 7 days, centeredSlides: true is removed so swiper-slide-active becomes the first slide on the left, so that's your startDate, add 6 to get the endDate

Edit 2

for tracking the days in real time, you can use the event sliderMove to detect whether the slider is moving and do some stuff while it does, and you can store the offsetLeft of each slide in an Array and loop through it when the user is swiping and comparing the values with the current offset of the swiper, then break when match not to continue through the loop

edited snippet :

var content = document.getElementById('content');  	  var currenOffset; // swiper's offset  var childOffset; // slide's offset  	  var startIndex;   var endIndex;  	  var slides = document.getElementsByClassName('swiper-slide');  var slidesOffsets = [];      var swiper = new Swiper('.swiper-container', {    slidesPerView: 7,    spaceBetween: 10,          on: {      init: function () {        setTimeout(function(){          var startDay = document.getElementsByClassName('swiper-slide-active')[0].innerHTML;          var endDay = parseInt(startDay) + 6 ;                      content.innerHTML = '<div> Showing data for days ' + startDay + ' to ' + endDay + '</div>';        }, 1);      }    }  });  	  swiper.on('slideChange', function () {    setTimeout(function(){      var startDay = document.getElementsByClassName('swiper-slide-active')[0].innerHTML;      var endDay = parseInt(startDay) + 6 ;      content.innerHTML = '<div> Showing data for days ' + startDay + ' to ' + endDay + '</div>';    }, 1);  });      for(var i =0; i < slides.length; i++){    slidesOffsets.push((slides[i].offsetLeft * -1) + 10);  }  	  swiper.on('sliderMove', function(e){    currentOffset = this.translate;  		    for(var i=0; i<slides.length; i++){      if( slidesOffsets[i] <= currentOffset){				        startIndex = i ;        break;      }    }  		    endIndex = startIndex + 6;    content.innerHTML = '<div> Showing data for days ' + startIndex + ' to ' + endIndex +  '</div>';		  });

html, body {    position: relative;    height: 100%;  }  body {    background: #eee;    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;    font-size: 14px;    color:#000;    margin: 0;    padding: 0;  }  .swiper-container {    width: 100%;    height: 80px;  }  .swiper-slide {    text-align: center;    font-size: 18px;    background: #fff;    /* Center slide text vertically */    display: -webkit-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-box-pack: center;    -ms-flex-pack: center;    -webkit-justify-content: center;    justify-content: center;    -webkit-box-align: center;    -ms-flex-align: center;    -webkit-align-items: center;    align-items: center;  }    #content{    width: 100%;  	height: calc(100% - 80px);		  }  #content div{			    margin: auto;  	text-align: center;  	padding-top: 50px;  	font-size: 30px;  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js"></script>  <div class="swiper-container">      <div class="swiper-wrapper">        <div class="swiper-slide">1</div>        <div class="swiper-slide">2</div>        <div class="swiper-slide">3</div>        <div class="swiper-slide">4</div>        <div class="swiper-slide">5</div>        <div class="swiper-slide">6</div>        <div class="swiper-slide">7</div>        <div class="swiper-slide">8</div>        <div class="swiper-slide">9</div>        <div class="swiper-slide">10</div>        <div class="swiper-slide">11</div>        <div class="swiper-slide">12</div>        <div class="swiper-slide">13</div>        <div class="swiper-slide">14</div>        <div class="swiper-slide">15</div>        <div class="swiper-slide">16</div>        <div class="swiper-slide">17</div>        <div class="swiper-slide">18</div>        <div class="swiper-slide">19</div>        <div class="swiper-slide">20</div>        <div class="swiper-slide">21</div>        <div class="swiper-slide">22</div>        <div class="swiper-slide">23</div>        <div class="swiper-slide">24</div>        <div class="swiper-slide">25</div>        <div class="swiper-slide">26</div>        <div class="swiper-slide">27</div>        <div class="swiper-slide">28</div>        <div class="swiper-slide">29</div>        <div class="swiper-slide">30</div>      </div>      <!-- Add Pagination -->      <div class="swiper-pagination"></div>    </div>  	  	<div id="content">    	</div>

i hope this helps and good luck.

Read More

Detect whether touch was Apple Pencil or finger in webview (react native)

In safari mobile, touches can be classified as Apple Pencil vs other (finger/ mouse) using:

event.touches[0].touchType === 'stylus' //pencil event.touches[0].touchType !== 'stylus' //other 

However all events received in a react native webview (both for Apple Pencil and using a finger) are receiving:

touchType === 'direct' //inside webview, both pencil and other 

How can I detect a touch with the Apple Pencil inside a webview?

Apparently event.touches[0] > 0 is another possibility but this is also being set to 0 for both types in webview.

(Not sure if this is an issue with react native or a built-in limitation of webviews).

Related:

• UIView do not react on Apple Pencil
• Javascript touch event: distinguishing finger vs. Apple Pencil

0 Answers

Read More

How can I scrape text and images from a random web page?

I need a way to visually represent a random web page on the internet.

Let's say for example this web page.

Currently, these are the standard assets I can use:

• Favicon: Too small, too abstract.
• Title: Very specific but poor visual aesthetics.
• URL: Nobody cares to read.
• Icon: Too abstract.
• Thumbnail: Hard to get, too ugly (many elements crammed in a small space).

I need to visually represent a random website in a way that is very meaningful and inviting for others to click on it.

I need something like what Facebook does when you share a link:

It scraps the link for images and then creates a beautiful meaningful tile which is inviting to click on.

Any way I can scrape the images and text from websites? I'm primarily interested in a Objective-C/JavaScript combo but anything will do and will be selected as an approved answer.

Edit: Re-wrote the post and changed the title.

3 Answers

Answers 1

Websites will often provide meta information for user friendly social media sharing, such as Open Graph protocol tags. In fact, in your own example, the reddit page has Open Graph tags which make up the information in the Link Preview (look for meta tags with og: properties).

A fallback approach would be to implement site specific parsing code for most popular websites that don't already conform to a standardized format or to try and generically guess what the most prominent content on a given website is (for example, biggest image above the fold, first few sentences of the first paragraph, text in heading elements etc).

Problem with the former approach is that you you have to maintain the parsers as those websites change and evolve and with the latter that you simply cannot reliably predict what's important on a page and you can't expect to always find what you're looking for either (images for the thumbnail, for example).

Since you will never be able to generate meaningful previews for a 100% of the websites, it boils down to a simple question. What's an acceptable rate of successful link previews? If it's close to what you can get parsing standard meta information, I'd stick with that and save myself a lot of headache. If not, alternatively to the libraries shared above, you can also have a look at paid services/APIs which will likely cover more use cases than you could on your own.

Answers 2

This is what the OpenGraph standard is for. For instance, if you go to the Reddit post in the example, you can view the page information provided by HTML <meta /> tags (all the ones with names starting with 'og'):

However, it is not possible for you to get the data from inside a web browser; CORS prevents the request to the URL. In fact, what Facebook seems to do is send the URL to their servers and have them perform a request to get the required information, and sending it back.

Answers 3

You can develop your own Link Preview plugin or use existing third party available plugins.

Posting example here is not possible. But i can URL of popular Link Preview plugins. Which may free or paid.

• Link Preview

• jQuery Preview:

You can check your url demo here , Which gives response in JSON and Raw Data You can use API also.

Hope it helps.

Read More

Trigger anime.js animation when element enters viewport

I'm trying to run an anime.js when an image or element enters the viewport, but i cant seem to get it working. Im trying it with waypoints.js

This is what I have so far, its the 'this' part im having troubles with i think.

$('img').waypoint(function() {         var CSStransforms = anime({           targets: this,           translateX: 250,           scale: 2,           rotate: '1turn'           });             }, {                 offset: '100%'             }); 

2 Answers

Answers 1

You need to target the elements with this.element instead, Here's a working example:

CodePen Demo

Per your question, you would modify it to the following:

jQuery(document).ready(function(){     $('img').waypoint(function() {         var CSStransforms = anime({             targets: this.element,             translateX: 250,             scale: 2,             rotate: '1turn'         });     }, {             offset: '100%'     }); }); 

Answers 2

You need to change the

targets : this to targets: this.element

Read More

[React-Native][IOS]How to dynamic set Debug server host for device setting like Android

My mac-os using Wifi and when i move to other place my ip change and i always rebuild app for testing. Rebuild app is annoying.

• How can i set Development Server IP Address in IOS after build and run on Physical Device?

on Android, i can set Development Server in Dev Menu, Dev Settings, Debug server host for device setting but nowhere found in IOS.

2 Answers

Answers 1

I use this tool to solve the problem.

https://www.npmjs.com/package/http-server

http-server -p 8081 -P Http://{host}:{port} 

and use Xcode run app project.

Answers 2

Why couldn't you have a UIViewController with a UITextField that contains the URL or IP you want to use and a UIButton on it that saves and updates this, then store the result in UserDefaults and pull from that for a URL every time?

There are also other options like Firebase Remote Config, which I would use instead of the above if you have many variables you'd want to configure on the fly like this.

If you're just trying to swap the IP/port as you move to a new network, I'd still just store it in UserDefaults and make a page to update it, though.

Read More

Align different plot shapes

Background:

I have a kind of Gantt chart, composed of horizontal segments with different events marked by symbols of different shapes. I want the symbols to have exactly the same height as the segment (potential topic for next question!), and symbols should be center aligned within each segment.

Issue:

The problem is that different shapes seem to have different alignment. In my small example, shape 0, 3, 4, 5 are center aligned (four first symbols from left). In contrast, the circle and the two triangles are offset.

d1 <- data.frame(x = -1, xend = 7, y = 1, yend = 1) d2 <- data.frame(x = 0:6, y = 1)  library(ggplot2) ggplot(data = d1, aes(x = x, y = y)) +   geom_segment(aes(xend = xend, yend = yend), size = 8, color = "grey80") +   geom_segment(aes(xend = xend, yend = yend), color = "red") +   geom_point(data = d2, shape = c(0, 3, 4, 5, 1, 2, 6), size = 8) +   theme_void() 

Zoom in on PDF output:

---

I have also desperately tried a geom_text equivalent with unicode symbols. However, the alignment is now even harder to fathom.

geom_text(data = d2,           label = c("\u25A1", "\uFF0B","\u2715","\u25C7", "\u25CB", "\u25B3", "\u25BD"),           size = 8, vjust = "center")  

---

No obvious hints in ?geom_point, ?aes_linetype_size_shape or ?pch. I have googled "r plot align center justify symbol shape pch" - have I missed any keywords?

---

Question: How can I align different shapes without hardcoding?

3 Answers

Answers 1

It's not really an answer, but didn't fit in a comment.

To me, the circle isn't worse than the square, and looking at all first 26 symbols (pch = 0:25), it seems that (theoretically, not sure about various devices) only the triangles wouldn't fit your purpose.
I think it's generally reasonable that the point they represent sits at their mass center, because that's where the eye would expect it with the most common use cases of such symbols.

Proof for the mass center is here: https://github.com/wch/r-source/blob/91dda45a5e4e418d0efed17db858736a973d4996/src/main/engine.c

void GESymbol(...

case 2: /* S triangle - point up */         xc = RADIUS * GSTR_0;         r = toDeviceHeight(TRC0 * xc, GE_INCHES, dd);         yc = toDeviceHeight(TRC2 * xc, GE_INCHES, dd);         xc = toDeviceWidth(TRC1 * xc, GE_INCHES, dd);         xx[0] = x; yy[0] = y+r;         xx[1] = x+xc; yy[1] = y-yc;         xx[2] = x-xc; yy[2] = y-yc;         gc->fill = R_TRANWHITE;         GEPolygon(3, xx, yy, gc, dd);         break; 

So you could of course modify the source here to say:

yy[0] = y + (r+yc)/2;

yy[1] = y - (r+yc)/2;

yy[2] = y - (r+yc)/2;

Answers 2

I have a feeling that this problem doesn't have a solution (at least not one that is reasonably feasible). The issue itself seems to be rooted in grid which is what ggplot2 is built upon. For example:

library(grid) grid.newpage() vp <- viewport() pushViewport(vp) grid.rect(x = 0.5 , y = 0.5 , width= 1 , height = 0.14) grid.points(x = 0.1 , y = 0.5, pch = 0 ,size = unit(1,"in")) grid.points(x = 0.3 , y = 0.5, pch = 24 ,size = unit(1,"in")) grid.points(x = 0.5 , y = 0.5, pch = 25  ,size = unit(1,"in")) 

Because of this I think it is highly unlikely that there will be any ggplot2 options that will fix it. As RolandASc points out I think your best bet is to modify the source data to adjust for the offset of the symbols though I believe this in practice is very risky and personally wouldn't advise doing it.

Answers 3

You have four options:

1. Write (/adapt) a new R graphics device that centres points as you require – you could have a look at gridSVG for instance

2. Get R-core to accept a modification of the underlying drawing routine (they may be open to a non-breaking new option to centre the points if you have a good use case to present)

3. Create a new geom at ggplot2 level wrapping geom_point with a hard-coded offset to undo the optical offset in the engine

4. Create a new geom that does not rely on those shapes but draws polygons of your own design

Read More