You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
4.3 KiB
152 lines
4.3 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr" >
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title> Unicron03 </title>
|
||
|
|
<link href="projet.css" rel="stylesheet">
|
||
|
|
<link rel="icon" type="image/x-icon" href="EV.jpg" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js'></script>
|
||
|
|
<script src='https://codepen.io/ste-vg/pen/zBVaZw.js'></script>
|
||
|
|
<script id="rendered-js" >
|
||
|
|
var app = angular.module('app', ['ngAnimate']);
|
||
|
|
|
||
|
|
app.controller('mainCtrl', function ($scope) {
|
||
|
|
$scope.boxes = [{
|
||
|
|
name: 'RushOfLands',
|
||
|
|
image: 'RushOfLands.jpg' },{
|
||
|
|
|
||
|
|
name: 'Volta',
|
||
|
|
image: 'voiture.png' },{
|
||
|
|
|
||
|
|
name: 'MachineASous',
|
||
|
|
image: 'MachineASous.jpg' }];
|
||
|
|
|
||
|
|
|
||
|
|
$scope.selected = [];
|
||
|
|
$scope.selectBox = function (item, position) {
|
||
|
|
$scope.selected = [{
|
||
|
|
item: item,
|
||
|
|
position: position }];
|
||
|
|
|
||
|
|
$scope.$apply();
|
||
|
|
};
|
||
|
|
$scope.clearSelection = function () {
|
||
|
|
$scope.selected = [];
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
app.directive('box', function () {
|
||
|
|
return {
|
||
|
|
restrict: 'E',
|
||
|
|
scope: {},
|
||
|
|
bindToController: {
|
||
|
|
onSelect: "=",
|
||
|
|
item: "=" },
|
||
|
|
|
||
|
|
controllerAs: 'box',
|
||
|
|
controller: function () {
|
||
|
|
var box = this;
|
||
|
|
|
||
|
|
box.goFullscreen = function (e) {
|
||
|
|
box.onSelect(box.item, e.target.getBoundingClientRect());
|
||
|
|
};
|
||
|
|
},
|
||
|
|
link: function (scope, element) {
|
||
|
|
element.bind('click', scope.box.goFullscreen);
|
||
|
|
element.css({
|
||
|
|
'background-image': 'url(' + scope.box.item.image + ')' });
|
||
|
|
|
||
|
|
} };
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
app.directive('bigBox', function ($timeout) {
|
||
|
|
return {
|
||
|
|
restrict: 'AE',
|
||
|
|
scope: {},
|
||
|
|
bindToController: {
|
||
|
|
position: "=",
|
||
|
|
selected: "=",
|
||
|
|
onSelect: "=" },
|
||
|
|
|
||
|
|
controllerAs: 'box',
|
||
|
|
controller: function () {
|
||
|
|
var box = this;
|
||
|
|
},
|
||
|
|
link: function (scope, element) {
|
||
|
|
var css = {};
|
||
|
|
for (var key in scope.box.position) {
|
||
|
|
css[key] = scope.box.position[key] + 'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
element.css(css);
|
||
|
|
|
||
|
|
$timeout(function () {
|
||
|
|
element.css({
|
||
|
|
top: '50%',
|
||
|
|
left: '10%' });
|
||
|
|
|
||
|
|
element.addClass('image-out');
|
||
|
|
}, 200);
|
||
|
|
|
||
|
|
$timeout(function () {
|
||
|
|
element.css({
|
||
|
|
width: '80%',
|
||
|
|
height: '100%' });
|
||
|
|
|
||
|
|
}, 500);
|
||
|
|
|
||
|
|
$timeout(function () {
|
||
|
|
element.addClass('show');
|
||
|
|
}, 800);
|
||
|
|
} };
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl">
|
||
|
|
<div class="page">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid-item" ng-repeat="item in boxes">
|
||
|
|
<box class="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}"></box>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div>
|
||
|
|
<div class="scroller" ng-show="selected.length">
|
||
|
|
<a class="close-button" ng-click="clearSelection()">
|
||
|
|
<i class="material-icons" style="font-family: 'Lobster Two', cursive; padding-right: 20px">Back</i>
|
||
|
|
</a>
|
||
|
|
<h1>{{selected[0].item.name}}</h1>
|
||
|
|
<div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item">
|
||
|
|
<img ng-src="{{item.item.image}}" alt="" />
|
||
|
|
<div class="content">
|
||
|
|
<h2>Voiture autonome</h2>
|
||
|
|
<p>La voiture est composé d'une pyboard, de divers capteurs, de leds, d'un servo pour la direction et deux moteurs avec réducteur.</p>
|
||
|
|
<p>Elle se déplace de façon autonome en évitant les obstacles et en s'adaptant au milieu dans lequel elle évolue.</p>
|
||
|
|
<p>
|
||
|
|
Elle intégère aussi plusieurs contraintes :
|
||
|
|
<br>
|
||
|
|
• Si un obstacle est détecté la voiture ralenti de plus en plus jusqu’à l’arrêt complet;
|
||
|
|
<br>
|
||
|
|
• Si la voiture détecte une montée, elle accélére, si elle détecte une descente elle ralenti (avec allumage de deux leds différentes sur la carte pyboard);
|
||
|
|
<br>
|
||
|
|
• Si la voiture est dans le noir, une led s'allume;
|
||
|
|
<br>
|
||
|
|
• Si on appuie sur le bouton USR de la carte, le programme se mets en pause jusqu’à que le bouton soit rappuyer;
|
||
|
|
<br>
|
||
|
|
• Si la voiture est bloqué par un certain obstacle qu'elle ne détecte pas, elle repart automatiquement.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|