Uploaded image for project: 'Help-Desk'
  1. Help-Desk
  2. HELP-6418

FIWARE.Question.Tech.Apps.ApplicationMashup.ComponentDevelopment.WhyMyWidgetDontWork

        Details

          Description

          Created question in FIWARE Q/A platform on 19-04-2016 at 10:04
          Please, ANSWER this question AT http://stackoverflow.com/questions/36712259/why-wont-my-widget-work-inside-of-wirecloud

          Question:
          Why wont my widget work inside of wirecloud?

          Description:
          I have made the following widget using nothing but html, css and js. This works just fine by itself when you search for keywords that ixist in our DB (such as peach or strawberry):

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>Search Seller widget</title>
          <meta name="viewport" content="width=device-width">
          <style>

          #mapCanvas

          { width: 550px; height: 600px; float: left; border-style: solid; color: #59C0DF; }

          #infoPanel

          { float: left; margin-left: 10px; }

          #infoPanel div

          { margin-bottom: 5px; }

          #tbl

          { border-collapse: collapse; }

          #tbl, td, th

          { border: 2px solid #70B8FF; padding: 5px; }

          th

          { font-style: bold; color: black; background-color: #59C0DF; }

          .btn {
          background: #3498db;
          background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
          background-image: -moz-linear-gradient(top, #3498db, #2980b9);
          background-image: -ms-linear-gradient(top, #3498db, #2980b9);
          background-image: -o-linear-gradient(top, #3498db, #2980b9);
          background-image: linear-gradient(to bottom, #3498db, #2980b9);
          -webkit-border-radius: 28;
          -moz-border-radius: 28;
          border-radius: 28px;
          font-family: Courier New;
          color: #ffffff;
          font-size: 20px;
          padding: 10px 20px 10px 20px;
          text-decoration: none;
          }

          .btn:hover {
          background: #3cb0fd;
          background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
          background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
          background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
          background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
          background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
          text-decoration: none;
          }

          .textbox

          { border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; height:25px; width: 120px; padding-left:10px; padding-right:10px; }

          </style>
          </head>
          <body onload="initialize(45.2671, 19.8335,0)"> <!-bgcolor="#E6E6FA"->

          <div id="top">

          <label>
          <input type="url" id="url" class="textbox" value="">
          </label>

          <label>
          <button id="get" class="btn">GET</button>
          </label>
          <label>City</label>
          <input type="text" id="City" class="textbox" value="" readonly>
          <label>Company</label>
          <input type="text" id="Company" class="textbox" value="" readonly>
          <label>Latitude</label>
          <input type="text" id="Lat" class="textbox" value="" readonly>
          <label>Longitude</label>
          <input type="text" id="Lon" class="textbox" value="" readonly>

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script src="http://maps.googleapis.com/maps/api/js"></script>
          </br>
          <div id="map" style="width:500px;height:380px; border-style: solid; border-color: #3498db; display: none;"></div>
          </div>

          <div>
          <a href="http://www.panonit.com" target="_blank"> <img src="PanonitLogo.png" alt="Logo" style="width:160px;height:75px; margin-top:15px" > </a>
          <a href="http://www.finish-project.eu/" target="_blank"> <img src="Cropped.png" alt="Logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a>
          <a href="http://ec.europa.eu/index_en.htm" target="_blank"> <img src="European.jpg" alt="Logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a>
          </div>

          <script>
          var obj;

          var cors_api_url = 'https://cors-anywhere.herokuapp.com/';
          function doCORSRequest(options, printResult) {
          var x = new XMLHttpRequest();
          x.open(options.method, cors_api_url + options.url);
          x.onload = x.onerror = function() {
          printResult(
          options.method + ' ' + options.url + '\n' +
          x.status + ' ' + x.statusText + '\n\n' +
          (x.responseText || '')
          );
          };
          x.send(options.data);
          }
          // Bind event
          (function() {
          var urlField = document.getElementById('url');
          var obj;

          document.getElementById('get').onclick = function(e) {
          var glat;
          var glon;
          e.preventDefault();
          doCORSRequest(

          { method: this.id = 'GET', url: 'trace.panonit.com/widgets/GetFieldCoordinates/' + urlField.value }

          , function printResult(result) {
          result = result.substring(result.length, result.indexOf('{'));
          obj = JSON.parse(result);

          var cityField = document.getElementById('City');
          cityField.value = obj.City;
          var company = document.getElementById('Company');
          company.value = obj.Company;
          var lat = document.getElementById('Lat');
          lat.value = obj.Lat;
          glat = lat.value;
          var lon = document.getElementById('Lon');
          lon.value = obj.Lon;
          glon = lon.value;
          if(obj.Lat==null || obj.Lon ==null)

          { //initialize(glat, glon); document.getElementById('City').value = "City not found"; document.getElementById('Company').value = "Company not found"; document.getElementById('Lat').value = "Latitude not found"; document.getElementById('Lon').value = "Longitude not found"; initialize(45.2671, 19.8335,0); }

          else

          { initialize(glat, glon,1); }

          });
          };
          })();

          function initialize(lat, lon, displayMarker) {
          document.getElementById('map').style.display = "";
          var mapProp =

          { center:new google.maps.LatLng(lat,lon), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }

          ;
          var map=new google.maps.Map(document.getElementById("map"),mapProp);
          if(displayMarker==1){
          var marker = new google.maps.Marker(

          { position: new google.maps.LatLng( lat,lon), animation: google.maps.Animation.DROP, map: map, title: 'Crop marker!' }

          );
          }

          }
          </script>
          </body>
          </html>

          When I convert it to a widget with the help of fispace's add on in eclipse and then proceed to upload it in fiware lab's or fispace's wirecloud thats when it shows an error missing api key. So I got google's api key and appended it like so:

          <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrI_BKBCPZfOCskNEH5B5wiJhuV1yKeI"></script>

          Yet still I end up with a grayed out map inside of wire-cloud.
          Can anyone help me solve this issue? Thank you.

            Activity

            Descending order - Click to sort in ascending order
            Transition Time In Source Status Execution Times Last Executer Last Execution Date
            Open Open In Progress In Progress
            		2h 59m 1 Backlog Manager 19/Apr/16 3:02 PM
            In Progress In Progress Closed Closed
            		3h 1 Backlog Manager 19/Apr/16 6:02 PM
            fla Fernando Lopez made changes -
            Fix Version/s 2021 [ 12600 ]
            aarranz Álvaro Arranz made changes -
            Summary FIWARE.Question.Tech.Apps.ApplicationMashup.Why wont my widget work inside of wirecloud? FIWARE.Question.Tech.Apps.ApplicationMashup.ComponentDevelopment.WhyMyWidgetDontWork
            backlogmanager Backlog Manager made changes -
            Summary [fiware-stackoverflow] Why wont my widget work inside of wirecloud? FIWARE.Question.Tech.Apps.ApplicationMashup.Why wont my widget work inside of wirecloud?
            HD-Node Unknown [ 10852 ]
            Hide
            Permalink
            backlogmanager Backlog Manager added a comment -

            2016-04-19 18:05|UPDATED status: transition Finish| # answers= 1, accepted answer= True

            Show
            backlogmanager Backlog Manager added a comment - 2016-04-19 18:05|UPDATED status: transition Finish| # answers= 1, accepted answer= True
            backlogmanager Backlog Manager made changes -
            Resolution Done [ 10000 ]
            Status In Progress [ 3 ] Closed [ 6 ]
            Hide
            Permalink
            backlogmanager Backlog Manager added a comment -

            2016-04-19 15:05|UPDATED status: transition Answer| # answers= 1, accepted answer= True

            Show
            backlogmanager Backlog Manager added a comment - 2016-04-19 15:05|UPDATED status: transition Answer| # answers= 1, accepted answer= True
            backlogmanager Backlog Manager made changes -
            Status Open [ 1 ] In Progress [ 3 ]
            backlogmanager Backlog Manager made changes -
            Assignee Álvaro Arranz [ aarranz ]
            backlogmanager Backlog Manager made changes -
            HD-Chapter Unknown [ 10845 ] Apps [ 10836 ]
            mev Manuel Escriche made changes -
            HD-Enabler Unknown [ 10910 ] Wirecloud [ 10857 ]
            backlogmanager Backlog Manager made changes -
            HD-Enabler Unknown [ 10910 ]
            HD-Chapter Unknown [ 10845 ]
            HD-Node Unknown [ 10852 ]
            backlogmanager Backlog Manager made changes -
            Field Original Value New Value
            Component/s FIWARE-TECH-HELP [ 10278 ]
            Hide
            Permalink
            backlogmanager Backlog Manager added a comment -

            2016-04-19 12:05|CREATED monitor | # answers= 0, accepted answer= False

            Show
            backlogmanager Backlog Manager added a comment - 2016-04-19 12:05|CREATED monitor | # answers= 0, accepted answer= False
            backlogmanager Backlog Manager created issue -

              People

              • Assignee:
                aarranz Álvaro Arranz
                Reporter:
                backlogmanager Backlog Manager
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: