Start a new topic

POI List Panel

I have build an app in Flutter with Wikitude and on the POI Browser screen  I would like to include a panel that will open from the right side and will contain the POI that are displayed on the radar and once you select a poi from the side panel to be the currently selected poi and present the arrow as well.

How I could add this? 


Dear Eva,


I have already read those and I implemented the AR browsing of POI's.

But what I would like to have is a side list from the right (given that range is on left) where all the pois that are in the range are listed there and when one is selected from the list is marked as selected and the blue arrow appears to guide the user to find the poi. 

Hello,


I have implemented the Poi list that I was asking on the above request.

But if the list is long the items are overflow from the table and I cannot put a scrollview to compact them on the parent div.

Do you have any idea on how to implement this, because I have tried many solutions and nothing seems to work.

Also given that I have to close and rebuild the app on every change this takes ages.


The div tree view follows similar making as the radar.


<div id="panelPoiList">
<div class="header">
<button class="customButton" id="closePanelPoiListButton" onclick="World.closeAndReleasePanel()">Close</button>
<h3 id="listTitle" class="headerTitle">Details</h3>
</div>
<div class="content">
<table id="poiListTable" class="poiTable">

</table>
</div>
</div>

On the nativesdetailscreen.js I an creating the tbody and the row / data for each entry.


showList: function showListFn() {
World.closeAndReleasePanel();

document.getElementById("closePanelRangeButton").innerHTML = (language == 'el') ? "Κλείσε" : "Close";
document.getElementById("listTitle").innerHTML = (language == 'el') ? "Λίστα σημείων" : "Pois List";

var table = document.getElementById("poiListTable");

table.innerHTML = "";

var tbody = document.createElement("tbody");
tbody.setAttribute("id", "poiListTableBody");


for (var i = 0; i < World.markerList.length; i++) {

if (World.markerList[i].distanceToUser < World.getMaxDistance()) {
var row = document.createElement("tr");
var rowData = document.createElement("td");
rowData.innerHTML = language == "el" ? World.markerList[i].poiData.title : World.markerList[i].poiData.title_en;
rowData.setAttribute("id", "tableDataRow");
row.setAttribute("onclick", "World.selectedPoi("+i+");");
row.appendChild(rowData);
tbody.appendChild(row);
}

}

table.appendChild(tbody);

document.getElementById("panelPoiList").style.visibility = "visible";
},


Hi,


I don't see the CSS here, but the div that contains the scrollable content should have its overflow property set to scroll or auto. (https://www.w3schools.com/cssref/pr_pos_overflow.asp)


You should be able to use placeholder divs for your rows, open the .html in your browser of choice and work on your UI there, instead of rebuilding the project every time. Once the UI fits your purpose, you can just replace the placeholders with the actual data and build the Flutter project.


This topic seems to be about the structuring of HTML elements, rather than the usage of our SDK. In a case like this, you will probably find more insightful guidance in forums focused on web development.


- Damian

Hi Damian,

I have already overflow:auto on the css for the table but still doesn't work.

I will check what other options I can have in order to implement this.


Thank you.

Login or Signup to post a comment