s444430/AL-2020
1
0
Fork 0
forked from s444420/AL-2020
Code Releases Activity

Zmiany wprowadzone przez Wojtek Łukasik

Browse Source
This commit is contained in:
Tomek 2020-04-27 20:47:43 +02:00
parent 2240589b2d
commit 7f67325c93
13 changed files with 319 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -1,3 +1,2 @@
Repozytorium projektu z sztucznej inteligencji, temat "Inteligentny wózek widłowy". <br>
Zespół: 444420, 444428, 444430
Repozytorium projektu z sztucznej inteligencji, temat "Inteligentny wózek widłowy".

BIN
frontend/img/Down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 560 B

BIN
frontend/img/Left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 567 B

BIN
frontend/img/Right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 574 B

BIN
frontend/img/Up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 B

100
frontend/index.html
View File

@ -2,108 +2,18 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<title>Inteligentny wózek</title>
<link type="text/css" rel="stylesheet" href="styles.css">
<script type="text/javascript" src="script.js">
</script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body onload="start()">
<body>
<div class="container">
<div class="plansza">
<div class="row" id="row-0">
<div class="pole" id="0-0"> </div>
<div class="pole" id="0-1"> </div>
<div class="pole" id="0-2"> </div>
<div class="pole" id="0-3"> </div>
<div class="pole" id="0-4"> </div>
<div class="pole" id="0-5"> </div>
<div class="pole" id="0-6"> </div>
<div class="pole" id="0-7"> </div>
<div class="pole" id="0-8"> </div>
<div class="pole" id="0-9"> </div>
<div class="pole" id="0-10"> </div>
</div>
<div class="row" id="row-1">
<div class="pole" id="1-0"> </div>
<div class="pole" id="1-1"> </div>
<div class="pole" id="1-2"> </div>
<div class="pole" id="1-3"> </div>
<div class="pole" id="1-4"> </div>
<div class="pole" id="1-5"> </div>
<div class="pole" id="1-6"> </div>
<div class="pole" id="1-7"> </div>
<div class="pole" id="1-8"> </div>
<div class="pole" id="1-9"> </div>
<div class="pole" id="1-10"> </div>
</div>
<div class="row" id="row-2">
<div class="pole" id="2-0"> </div>
<div class="pole" id="2-1"> </div>
<div class="pole" id="2-2"> </div>
<div class="pole" id="2-3"> </div>
<div class="pole" id="2-4"> </div>
<div class="pole" id="2-5"> </div>
<div class="pole" id="2-6"> </div>
<div class="pole" id="2-7"> </div>
<div class="pole" id="2-8"> </div>
<div class="pole" id="2-9"> </div>
<div class="pole" id="2-10"> </div>
</div>
<div class="row" id="row-3">
<div class="pole" id="3-0"> </div>
<div class="pole" id="3-1"> </div>
<div class="pole" id="3-2"> </div>
<div class="pole" id="3-3"> </div>
<div class="pole" id="3-4"> </div>
<div class="pole" id="3-5"> </div>
<div class="pole" id="3-6"> </div>
<div class="pole" id="3-7"> </div>
<div class="pole" id="3-8"> </div>
<div class="pole" id="3-9"> </div>
<div class="pole" id="3-10"> </div>
</div>
<div class="row" id="row-4">
<div class="pole" id="4-0"> </div>
<div class="pole" id="4-1"> </div>
<div class="pole" id="4-2"> </div>
<div class="pole" id="4-3"> </div>
<div class="pole" id="4-4"> </div>
<div class="pole" id="4-5"> </div>
<div class="pole" id="4-6"> </div>
<div class="pole" id="4-7"> </div>
<div class="pole" id="4-8"> </div>
<div class="pole" id="4-9"> </div>
<div class="pole" id="4-10"> </div>
</div>
<div class="row" id="row-5">
<div class="pole" id="5-0"> </div>
<div class="pole" id="5-1"> </div>
<div class="pole" id="5-2"> </div>
<div class="pole" id="5-3"> </div>
<div class="pole" id="5-4"> </div>
<div class="pole" id="5-5"> </div>
<div class="pole" id="5-6"> </div>
<div class="pole" id="5-7"> </div>
<div class="pole" id="5-8"> </div>
<div class="pole" id="5-9"> </div>
<div class="pole" id="5-10"> </div>
</div>
<div class="row" id="row-6">
<div class="pole" id="6-0"> </div>
<div class="pole" id="6-1"> </div>
<div class="pole" id="6-2"> </div>
<div class="pole" id="6-3"> </div>
<div class="pole" id="6-4"> </div>
<div class="pole" id="6-5"> </div>
<div class="pole" id="6-6"> </div>
<div class="pole" id="6-7"> </div>
<div class="pole" id="6-8"> </div>
<div class="pole" id="6-9"> </div>
<div class="pole" id="6-10"> </div>
</div>
<div class="board" id="board">
</div>
</div>
<script type="module" src="./js/main.js"></script>
</body>
</html>

87
frontend/js/Agent.js Normal file
View File

@ -0,0 +1,87 @@
export default class Agent{
constructor(positionX, positionY, turn){
this.positionX = positionX;
this.positionY = positionY;
this.turn = turn;
}
getParams(){
let params = {};
positionX = this.positionX;
positionY = this.positionY;
turn = this.turn;
params = {positionX, positionY, turn};
return params;
}
goForward(){
if(this.turn == 'Up'){
this.positionY += 1;
}
else if(this.turn == 'Down'){
this.positionY -= 1;
}
else if(this.turn == 'Left'){
this.positionX -= 1;
}
else if(this.turn == 'Right'){
this.positionX += 1;
}
}
turnLeft(){
if(this.turn == 'Up'){
this.turn = 'Left';
}
else if(this.turn == 'Down'){
this.turn = 'Right';
}
else if(this.turn == 'Left'){
this.turn = 'Down';
}
else if(this.turn == 'Right'){
this.turn = 'Up'
}
}
turnRight(){
if(this.turn == 'Up'){
this.turn = 'Right';
}
else if(this.turn == 'Down'){
this.turn = 'Left';
}
else if(this.turn == 'Left'){
this.turn = 'Up';
}
else if(this.turn == 'Right'){
this.turn = 'Down'
}
}
showAgent(){
console.log(this.turn)
if(this.turn === "Up"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Up.png')";
}
else if(this.turn === "Down"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Down.png')";
}
else if(this.turn === "Right"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Right.png')";
}
else if(this.turn === "Left"){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Left.png')";
}
}
hideAgent(){
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "";
}
}

30
frontend/js/Board.js Normal file
View File

@ -0,0 +1,30 @@
import Field from './Field.js'
export function createBoard(rangeX, rangeY){
const board = [];
for(let y = 0; y < rangeY; y++){
const row = [];
for(let x = 0; x < rangeX; x++){
let field = new Field(x, y, false, false, 1);
row.push(field)
}
board.push(row)
}
return board
}
export function showBoard(board){
for(let y = board.length - 1; y >= 0 ; y--){
document.getElementById("board").innerHTML += "<div class='row' id='row-" + y + "'> </div>";
for(let x = 0; x < board[y].length; x++){
document.getElementById("row-" + y).innerHTML += "<div class='field' id=" + x + "-" + y + "> </div>"
}
}
}

22
frontend/js/Field.js Normal file
View File

@ -0,0 +1,22 @@
export default class Field{
constructor(x, y, isShelf, isOccupiedByAgent, costOfTravel){
this.xField = x;
this.yField = y;
this.isShelf = isShelf;
this.isOccupiedByAgent = isOccupiedByAgent;
this.costOfTravel = costOfTravel;
}
getParams(){
let params = {};
xField = this.xField;
yField = this.yField;
isShelf = this.isShelf;
isOccupiedByAgent = this.isOccupiedByAgent;
costOfTravel = this.costOfTravel;
params = {xField, yField, isShelf, isOccupiedByAgent, costOfTravel}
return params;
}
}

27
frontend/js/main.js Normal file
View File

@ -0,0 +1,27 @@
import * as Board from './Board.js'
import Agent from './Agent.js'
let board = Board.createBoard(10,10);
Board.showBoard(board);
let agent = new Agent(0,0, 'Right');
agent.showAgent();

125
frontend/js/script.js Normal file
View File

@ -0,0 +1,125 @@
// import Agent from './Agent.js'
// //Klasy
// class Field {
// constructor(x, y, isEmpty) {
// this.xField = x;
// this.yField = y;
// this.isFieldEmpty = isEmpty;
// }
// getCoordinates(){
// return this.xField + this.yField;
// }
// getStatus(){
// return this.isFieldEmpty;
// }
// }
// class Product {
// constructor(name, type, farcing, price) {
// this.name = name;
// this.type = type;
// this.farcing = farcing;
// this.price = price
// }
// }
// class Rack{
// constructor(noOfShelf, typOfProduct) {
// this.noOfShelf = noOfShelf;
// }
// addShelf(){
// this.noOfShelf = this.noOfShelf + 1;
// }
// isEmpty(){
// if (this.noOfShelf === 0){
// return true;
// }else {
// return false;
// }
// }
// }
// class Shelf {
// constructor(number) {
// this.number = number;
// }
// }
// //Objekty i zmienne
// var regaly = ['1-1', '1-3', '1-4', '1-6', '1-7', '1-9', '2-1', '2-9', '3-3', '3-4', '3-6', '3-7', '4-1', '4-9', '5-1', '5-3', '5-4', '5-6', '5-7', '5-9']
// const agent1 = new Agent(3, 0);
// //Funkcja uruchamiająca prace calego scriptu
// function start(){
// //ponumerujPola();
// pokolorujRegaly();
// umiescAgenta(agent1);
// droga(agent1);
// }
// //Funkcja kolorujaca miejsca na planszy gdzie znajduja sie regaly
// function pokolorujRegaly(){
// let x;
// for(x = 0; x < regaly.length; x++){
// document.getElementById(regaly[x]).className = 'regal';
// }
// }
// //Funkcja wyswietlajaca id pol
// function ponumerujPola(){
// let x,y
// for(x = 0; x < 7; x++){
// for(y = 0; y < 11; y++){
// id = x.toString() + "-" + y.toString();
// document.getElementById(id).innerHTML = id;
// }
// }
// }
// //Funkcja usuwająca agenta z pola, przed przemieszczeniem
// function usunAgenta(agent){
// document.getElementById(agent.getId()).style.backgroundImage = "none";
// }
// //Funckja wyswietlajaca agenta gdy ten zmieni polozenie
// function umiescAgenta(agent) {
// document.getElementById(agent.getId()).style.backgroundImage = "url('Agent.jpg')";
// }
// //Funkcja zmieniajaca polozenie agenta o 1 pole
// function przemieszczenie(side, time, agent){
// const lastPosition = agent.getId();
// setTimeout(function(){
// usunAgenta(agent)
// if(side == "left")
// agent.left();
// if(side == "right")
// agent.right();
// if(side == "up")
// agent.up();
// if(side == "down")
// agent.down();
// umiescAgenta(agent);
// }, time);
// }
// //Funkcja ktora ustala droge agenta do przebycia
// function droga(agent) {
// przemieszczenie("right", 1000, agent);
// przemieszczenie("right", 2000, agent);
// przemieszczenie("up", 3000, agent);
// przemieszczenie("right", 4000, agent);
// przemieszczenie("right", 5000, agent);
// przemieszczenie("right", 6000, agent);
// przemieszczenie("right", 7000, agent);
// przemieszczenie("right", 8000, agent);
// przemieszczenie("right", 9000, agent);
// }

150
frontend/script.js
View File

@ -1,150 +0,0 @@
//Klasy
class Agent {
constructor(x, y){
this.xField = x;
this.yField = y;
}
getId(){
return this.xField + "-" + this.yField;
}
right(){
this.yField++;
}
left(){
this.yField--;
}
up(){
this.xField--;
}
down(){
this.xField++;
}
}
class Field {
constructor(x, y, isEmpty) {
this.xField = x;
this.yField = y;
this.isFieldEmpty = isEmpty;
}
getCoordinates(){
return this.xField + this.yField;
}
getStatus(){
return this.isFieldEmpty;
}
}
class Product {
constructor(name, type, specs, price) {
this.name = name;
this.type = type;
this.specs = specs;
this.price = price
}
}
class Rack{
constructor(noOfShelf) {
this.noOfShelf = noOfShelf;
}
addShelf(){
this.noOfShelf = this.noOfShelf + 1;
}
isEmpty(){
if (this.noOfShelf === 0){
return true;
}else {
return false;
}
}
}
class Shelf {
constructor(number, typeOfProduct) {
this.number = number;
this.typeOfProduct = typeOfProduct;
}
}
//Objekty i zmienne
var regaly = ['1-1', '1-3', '1-4', '1-6', '1-7', '1-9', '2-1', '2-9', '3-3', '3-4', '3-6', '3-7', '4-1', '4-9', '5-1', '5-3', '5-4', '5-6', '5-7', '5-9']
const agent1 = new Agent(3, 0);
//Funkcja uruchamiająca prace calego scriptu
function start(){
//ponumerujPola();
pokolorujRegaly();
umiescAgenta(agent1);
droga(agent1);
}
//Funkcja kolorujaca miejsca na planszy gdzie znajduja sie regaly
function pokolorujRegaly(){
let x;
for(x = 0; x < regaly.length; x++){
document.getElementById(regaly[x]).className = 'regal';
}
}
//Funkcja wyswietlajaca id pol
function ponumerujPola(){
let x,y
for(x = 0; x < 7; x++){
for(y = 0; y < 11; y++){
id = x.toString() + "-" + y.toString();
document.getElementById(id).innerHTML = id;
}
}
}
//Funkcja usuwająca agenta z pola, przed przemieszczeniem
function usunAgenta(agent){
document.getElementById(agent.getId()).style.backgroundImage = "none";
}
//Funckja wyswietlajaca agenta gdy ten zmieni polozenie
function umiescAgenta(agent) {
document.getElementById(agent.getId()).style.backgroundImage = "url('Agent.jpg')";
}
//Funkcja zmieniajaca polozenie agenta o 1 pole
function przemieszczenie(side, time, agent){
const lastPosition = agent.getId();
setTimeout(function(){
usunAgenta(agent)
if(side == "left")
agent.left();
if(side == "right")
agent.right();
if(side == "up")
agent.up();
if(side == "down")
agent.down();
umiescAgenta(agent);
}, time);
}
//Funkcja ktora ustala droge agenta do przebycia
function droga(agent) {
przemieszczenie("right", 1000, agent);
przemieszczenie("right", 2000, agent);
przemieszczenie("up", 3000, agent);
przemieszczenie("right", 4000, agent);
przemieszczenie("right", 5000, agent);
przemieszczenie("right", 6000, agent);
przemieszczenie("right", 7000, agent);
przemieszczenie("right", 8000, agent);
przemieszczenie("right", 9000, agent);
}

35
frontend/styles.css
View File

@ -1,33 +1,39 @@
body {
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100%;
min-width: 1920px;
min-height: 1080px;
position: absolute;
background-color: grey;
background-color: rgb(37, 36, 36);
}
.plansza{
width: 1100px;
height:700px;
#board{
width: 700px;
height: 700px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: lightyellow;
background-color: white;
}
.row{
width: 1100px;
height: 100px;
width: 100%;
height: 70px;
display: flex;
flex-direction: row;
}
.pole{
height: 100px;
width: 100px;
background-color: lightyellow;
.field{
height: 70px;
width: 70px;
background-color: white;
background-image: none;
background-size: cover;
border-color: black;
@ -43,8 +49,8 @@
}
.regal{
height: 100px;
width: 100px;
height: 50px;
width: 50px;
color: lightyellow;
background-color: darkslategrey;
border-color: black;
@ -57,3 +63,4 @@
justify-content: center;
align-items: center;
}