Howto:Creating a custom waypointlist pendant using Canvas: Difference between revisions

Jump to navigation Jump to search
m (→‎Canvas Code (proof-of-concept): 5 minutes of hacking ...)
 
Line 59: Line 59:


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
# for faster testing, let's use a vector with dummy data to be shown matching the columns of the hard-coded widget:
var dummyData = [
{target: 0, latitude:0, longitude:0, ETA:0},
];
var (width,height) = (320,160);
var (width,height) = (320,160);
var title = 'pui2canvas - waypointlist demo';
var title = 'pui2canvas - waypointlist demo';
Line 101: Line 108:
var addTable = func(scrollContent, list) {
var addTable = func(scrollContent, list) {


for (var i=1;i<=5;i+=1) {
var dummyData = [
var label = canvas.gui.widgets.Label.new(scrollContent, canvas.style, {wordWrap: 0});  
{target:'foo1', latitude:'lat1', longitude:'lon1', eta:'eta1'},
label.setImage("Textures/Splash"~i~".png");
{target:'foo2', latitude:'lat2', longitude:'lon2', eta:'eta2'},
label.setFixedSize(256,256);
{target:'foo3', latitude:'lat3', longitude:'lon3', eta:'eta3'},
list.addItem(label);
{target:'foo4', latitude:'lat4', longitude:'lon4', eta:'eta4'},
}
{target:'foo5', latitude:'lat', longitude:'lon', eta:'eta'},
{target:'foo6', latitude:'lat', longitude:'lon', eta:'eta'},
{target:'foo7', latitude:'lat', longitude:'lon', eta:'eta'},
{target:'foo8', latitude:'lat', longitude:'lon', eta:'eta'},
{target:'foo9', latitude:'lat', longitude:'lon', eta:'eta'},
{target:'foo10', latitude:'lat', longitude:'lon', eta:'eta'},
 
];
 
 
foreach(var wpt; dummyData) {
var newRow = canvas.HBoxLayout.new();
var targetBtn = canvas.gui.widgets.Button.new(scrollContent, canvas.style, {wordWrap:0})
.setText(wpt.target)
.setFixedSize(75, 25);
var latitudeBtn = canvas.gui.widgets.Button.new(scrollContent, canvas.style, {wordWrap:0})
.setText(wpt.latitude)
.setFixedSize(75, 25);
var longitudeBtn =  canvas.gui.widgets.Button.new(scrollContent, canvas.style, {wordWrap:0})
.setText(wpt.longitude)
.setFixedSize(75, 25);
var ETABtn = canvas.gui.widgets.Button.new(scrollContent, canvas.style, {wordWrap:0})
.setText(wpt.eta)
.setFixedSize(75, 25);
newRow.addItem(targetBtn);
newRow.addItem( latitudeBtn );
newRow.addItem( longitudeBtn );
newRow.addItem( ETABtn );
 
list.addItem( newRow );
 
 
} # foreach waypoint
 


}
} # addTable()




addTable(scrollContent, list);
addTable(scrollContent, list);




Navigation menu