add prototype of icon picker
|
|
@ -9,9 +9,10 @@ server {
|
|||
server {
|
||||
listen 1314;
|
||||
server_name HambiMap;
|
||||
root /home/bernhardt/Entwicklung/HambiMap;
|
||||
location /leaflet/ {
|
||||
root /home/bernhardt/Entwicklung/HambiMap;
|
||||
autoindex on;
|
||||
}
|
||||
location /fontawesome/ {
|
||||
}
|
||||
location / {
|
||||
root /home/bernhardt/Entwicklung/HambiMap/sketch/html;
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 928 KiB |
|
After Width: | Height: | Size: 887 KiB |
|
After Width: | Height: | Size: 916 KiB |
|
After Width: | Height: | Size: 854 KiB |
|
After Width: | Height: | Size: 827 KiB |
|
After Width: | Height: | Size: 842 KiB |
|
After Width: | Height: | Size: 738 KiB |
|
After Width: | Height: | Size: 721 KiB |
|
After Width: | Height: | Size: 725 KiB |
|
After Width: | Height: | Size: 827 KiB |
|
After Width: | Height: | Size: 785 KiB |
|
After Width: | Height: | Size: 791 KiB |
|
After Width: | Height: | Size: 694 KiB |
|
After Width: | Height: | Size: 676 KiB |
|
After Width: | Height: | Size: 681 KiB |
|
After Width: | Height: | Size: 630 KiB |
|
After Width: | Height: | Size: 611 KiB |
|
After Width: | Height: | Size: 615 KiB |
|
After Width: | Height: | Size: 748 KiB |
|
After Width: | Height: | Size: 692 KiB |
|
After Width: | Height: | Size: 695 KiB |
|
After Width: | Height: | Size: 682 KiB |
|
After Width: | Height: | Size: 622 KiB |
|
After Width: | Height: | Size: 626 KiB |
|
After Width: | Height: | Size: 604 KiB |
|
After Width: | Height: | Size: 552 KiB |
|
After Width: | Height: | Size: 554 KiB |
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="w3.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link href="fontawesome/5.3.1/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<div id='iconpicker' style='width:200px;'>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const iconpicker = document.getElementById('iconpicker');
|
||||
const icon = [0,0,0];
|
||||
const icons = [['buche','eiche','fichte'],['gesund','krank','tot'],['portaledge','kuppel','haus']];
|
||||
|
||||
iconpicker.innerHTML=`
|
||||
<div class='w3-container w3-row'>
|
||||
<div class='w3-col s2 m2 l2'>
|
||||
<div class='w3-row'><button id='species_left' onclick='rotate(0,-1)'><i class="fa fa-caret-left"></i></button></div>
|
||||
<div class='w3-row'><button id='state_left' onclick='rotate(1,-1)'><i class="fa fa-caret-left"></i></button></div>
|
||||
<div class='w3-row'><button id='plattform_left' onclick='rotate(2,-1)'><i class="fa fa-caret-left"></i></button></div>
|
||||
</div>
|
||||
<div class='w3-col s8 m8 l8'>
|
||||
<img id='icon' src='images/${icons[0][0]}_${icons[1][0]}_${icons[2][0]}.png' width='90%'/>
|
||||
</div>
|
||||
<div class='w3-col s2 m2 l2'>
|
||||
<div class='w3-row'><button id='species_right' onclick='rotate(0,1)'><i class="fa fa-caret-right"></i></button></div>
|
||||
<div class='w3-row'><button id='state_right' onclick='rotate(1,1)'><i class="fa fa-caret-right"></i></button></div>
|
||||
<div class='w3-row'><button id='plattform_right' onclick='rotate(2,1)'><i class="fa fa-caret-right"></i></button></div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const icon_elem = document.getElementById('icon');
|
||||
|
||||
function rotate(pos,dir){
|
||||
icon[pos] += dir;
|
||||
if (icon[pos]<0) icon[pos]=icons[pos].length-1;
|
||||
if (icon[pos]>=icons[pos].length) icon[pos]=0;
|
||||
const image = 'images/'+icons[0][icon[0]]+'_'+icons[1][icon[1]]+'_'+icons[2][icon[2]]+'.png';
|
||||
icon_elem.src=image;
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||