I tested the html file on my home computer before transferring it to the raspberry where it is working fine.
I also confirmed that the directory structure is correct on the raspberry.
The HTML file loads correctly on the raspberry with all the css implemented suggesting that the loading is successful but the Angular directives are not executed? I also tried a very simple example from the Angular website that also do not execute.
The HTML code is listed below:
Code: Select all
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>Main control UI</title>
<script src="jquery/external/angular.min.js"></script>
<script src="jquery/external/jquery.js"></script>
<link href="jquery/jquery-ui.css" rel="stylesheet">
<link href="MainView.css" rel="stylesheet">
<script src="jquery/jquery-ui.js"></script>
<script src="Mainview.js"></script>
<script>
$(document).ready(function($){
$( "#ButtonChassisForward" ).button();
$( "#ButtonChassisLeft" ).button();
$( "#ButtonChassisStop" ).button();
$( "#ButtonChassisRight" ).button();
$( "#ButtonChassisBackward" ).button();
$( "#ButtonChassisFaster" ).button();
$( "#ButtonChassisSlower" ).button();
$( "#radioset" ).buttonset();
$( "#MainTabs" ).tabs();
$( "#menu" ).menu();
$( "#selectmenu" ).selectmenu();
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
});
</script>
</head>
<body ng-app = "robotMovementController", ng-controller = "movementController">
<div id="MainTabs" style = "height: 500px;">
<ul>
<li><a href="#tabs-1">Controls</a></li>
<li><a href="#tabs-2">Navigation</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1" style = "height: 500px;">
<div id="RobotControls" >
<table id="ChassisControls">
<tr>
<td colspan="3">
<p id="SubHeading">Chassis controls</p>
</td>
</tr>
<tr>
<td></td>
<td>
<button id="ButtonChassisForward" ng-click = 'forwardClick()'>Forward</button>
</td>
<td></td>
</tr>
<tr>
<td>
<button id="ButtonChassisLeft" ng-click = 'leftClick()'>Left</button>
</td>
<td>
<p>
<label id="Speed0">{{Speed0}}</label>
<label id="Speed1">{{Speed1}}</label>
</p>
</td>
<td>
<button id="ButtonChassisRight" ng-click = 'rightClick()'>Right</button>
</td>
</tr>
<tr>
<td></td>
<td>
<button id="ButtonChassisBackward" ng-click = 'backwardClick()'>Backward</button>
</td>
<td></td>
</tr>
<tr>
<td>
<button id="ButtonChassisSlower" ng-click = 'slowerClick()'>Slower</button>
</td>
<td>
<button id="ButtonChassisStop" ng-click = 'stopClick()'>Stop</button>
</td>
<td>
<button id="ButtonChassisFaster" ng-click = 'fasterClick()'>Faster</button>
</td>
</table>
</div>
</div>
<div id="tabs-2" style = "height: 500px;">
<div id ="map-canvas" style = "position: relative; vertical-align: bottom; width: 500px; height: 400px; float:left;">
</div>
<div id="VideoUI">
<!-- <p>Video feedback</p>
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="320" height="240" id="vlc" events="True">
<param name="Src" value="http://10.0.0.20:8083/" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<embed pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin" progid="VideoLAN.VLCPlugin.2"
width="640"
height="480"
autoplay="yes"
target="http://10.0.0.20:8083/"
name="vlc">
</embed>
</object> -->
</div>
<table id = "RouteTable" >
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
<div id="tabs-3" style = "height: 400px;">
<button id="button">A button element</button>
<form style="margin-top: 1em;">
<div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
</div>
</div>
</body>
</html>