smashing: Several Widgets Not Rendered (?)

Hello,

After fresh install I’m unable to get display for a few widgets. Among those tested :

IFrame (provided out of the box)
dashing-map (additional widget)
dashing-trafficmap (additional widget)

For them I do not get anything on screen, just background.

On the other hand all widgets from dashboards examples (sample and sampletv) are working fine…

I searched during hours and I tested many things without result. Initially I was thinking that Google Maps API calls were the culprits but I finally discovered that IFrame has same issue.

The only success I had was with a NodeJS fork of Dashing which allowed me to get a map displayed, but I’d like to use the Ruby version.

I can see some demos on the web so I guess it should work.

Does anyone has same issue ? Any clue on how to fix this ?

I’m using :

$ lsb_release -a
No LSB modules are available.
Distributor ID: Debian
Description:    Debian GNU/Linux 8.6 (jessie)
Release:    8.6
Codename:   jessie

and :

$ ruby -v
ruby 2.1.5p273 (2014-11-13) [x86_64-linux-gnu]

Thanks Tom

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 25 (10 by maintainers)

Most upvoted comments

Finally I managed to get a very close to widget and acceptable (for me) solution ! For those who could be interested :

1. Create traffic map Create an HTML file calling traffic map, eg traffic.html, as stated here and set your coordinates, default zoom, etc… Note the API key to enter at the bottom :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Traffic layer</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: {lat: 48.92, lng: 2.45},
          disableDefaultUI: true,
          scrollwheel: false,
          disableDoubleClickZoom: true,
          draggable: false
        });

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap">
    </script>
  </body>
</html>

2. Make file accessible Very important, place this file into Smashing public folder, eg : ~/Smashing/public/traffic.html), as discussed here.

3. Create a dashboard with iframe widget calling local HTML file Here is a example. Note the “/” in front of traffic.html file :

<% content_for :title do %>Iframe and Widget Test<% end %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="3">
       <div id="iframeId1" data-view="Iframe" data-url="/traffic.html"></div>     
    </li>
  </ul>
</div>

4. Refresh Next step, to be done, will be to setup job for refresh…

This seems working with Firefox add-on disabled… The only drawback I found up to now is that zooming is still enabled despite values in HTML/Javascript.

Hope this helps ! Tom

gmaps_iframe

thomas-gt on Nov 17, 2016

I uploaded a simple dashboard containing 4 parts :

1 - Top Left Hand Corner : Iframe to duckduckgo.com website -> always working
2 - Top Right Hand Corner : Iframe to maps.google.com -> only works if Firefox Add-On (Ignore X-Frame-Options) is enabled
3 - Bottom Left Hand Corner : Iframe to google.fr/maps with coordinates and traffic layer -> -> only works if Firefox Add-On (Ignore X-Frame-Options) is enabled
4 - Bottom Right Hand Corner : trafficmap widget -> never worked for me, with or without Add-On enabled

dashboard_test.erb.txt

Of course for 2, 3 and 4 parts you need to install trafficmap widget and grab a free Google Maps API key.

Part 3 would be more or less interesting as workaround if I could manage some options (hide search box, prevent dragging and zooming…).

I also discovered that subject has been more or less discussed in original project : https://github.com/Shopify/dashing/issues/467 Seems mainly impact Google website.

Still unable to explain why it works/ed for many people… Moreover there are tons of tutorials on the web explainng how to easily embed google maps into iframe. Despite review of widget code which is quite simple I cannot understand why it fails.

I’m reviewing https://developers.google.com/maps/documentation/javascript/examples/layer-traffic as well…

Don’t mess up your whole week-end or spare time on that. It’s not so important 😉 Anyway thanks again for your help.

Tom

thomas-gt on Nov 16, 2016