Skip to content

Commit d148bf1

Browse files
taisukeftaisukef
committed
add kyotoishibumimap
1 parent 3041d31 commit d148bf1

File tree

5 files changed

+469
-334
lines changed

5 files changed

+469
-334
lines changed

‎samples/ar.html

+176-176
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,176 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8"/>
5-
<title>colorsight - WebMegane</title>
6-
<meta property="og:image" content="color.jpg">
7-
<link rel="apple-touch-icon" href="color.jpg"/>
8-
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"/>
9-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
10-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
11-
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
12-
<script src="fukuno.js"></script>
13-
<script>"use strict";
14-
15-
window.onload = function() {
16-
startAR()
17-
/*
18-
window.onload = function() {
19-
var map = initMap('mapid')
20-
map.setZoom(4)
21-
map.panTo([ 35.943560,136.188917 ]) // 鯖江駅
22-
// map.panTo([ 35.944571, 136.186228 ]) // Hana道場
23-
// map.addIcon(35.943560, 136.188917, "鯖江駅")
24-
map.addIcon(35.944571, 136.186228 , "<a href=http://hanadojo.com/ target=_blank>Hana道場</a>", "icon-hanadojo.png", 64)
25-
// map.addIcon(35.944571, 136.186228 , function() { window.open("http://hanadojo.com/", "_blank") }, "icon-hanadojo.png", 64)
26-
}
27-
*/
28-
}
29-
30-
const startAR = function(callback) {
31-
const USE_CAMERA_FRONT = false;
32-
// var videoop = USE_CAMERA_FRONT ? true : { facingMode : { exact : "environment" } };
33-
// var videoop = USE_CAMERA_FRONT ? true : { facingMode : { ideal : "environment" } };
34-
var videoop = USE_CAMERA_FRONT ? true : {
35-
facingMode : { ideal : "environment" },
36-
width: { min: 640, ideal: 1920 },
37-
height: { min: 480, ideal: 1080 }
38-
// width: { min: 640, ideal: 1280, max: 1920 },
39-
// height: { min: 480, ideal: 720, max: 1080 }
40-
};
41-
const medias = { audio: false, video: videoop };
42-
43-
// dump(navigator.mediaDevices.getSupportedConstraints());
44-
45-
navigator.getUserMedia(medias, function(stream) {
46-
video.srcObject = stream;
47-
},
48-
function(err) {
49-
alert(err);
50-
}
51-
);
52-
53-
54-
55-
var g = canvas.getContext("2d");
56-
var cnt = 0;
57-
// color
58-
var sum = [ 0, 0, 0 ];
59-
var ncol = 0;
60-
61-
var img = new Image()
62-
img.src = "ar-test.png"
63-
64-
var draw = function() {
65-
const cw = window.innerWidth * window.devicePixelRatio;
66-
const ch = window.innerHeight * window.devicePixelRatio;
67-
canvas.width = cw;
68-
canvas.height = ch;
69-
70-
const vw = video.videoWidth;
71-
const vh = video.videoHeight;
72-
const cw2 = cw // / 2;
73-
const caspect = ch / cw2;
74-
const vaspect = vh / vw;
75-
76-
const fitwidth = caspect < vaspect; // auto fit screen
77-
//const fitwidth = true; // force fit width
78-
//const fitwidth = false; // force fit height
79-
80-
var pos = [];
81-
if (fitwidth) {
82-
const vh2 = vw * caspect;
83-
if (vh2 > vh) {
84-
const cy = (vh2 - vh) / 2 / (vw / cw2);
85-
const ch2 = cw2 * vaspect;
86-
g.drawImage(video, 0, 0, vw, vh, 0, cy, cw2, ch2);
87-
//g.drawImage(video, 0, 0, vw, vh, cw2, cy, cw2, ch2);
88-
pos = [ 0, cy, cw2, ch2, cw2, cy, cw2, ch2 ];
89-
} else {
90-
const vy = (vh - vh2) / 2;
91-
g.drawImage(video, 0, vy, vw, vh2, 0, 0, cw2, ch);
92-
//g.drawImage(video, 0, vy, vw, vh2, cw2, 0, cw2, ch);
93-
pos = [ 0, 0, cw2, ch, cw2, 0, cw2, ch ];
94-
}
95-
} else {
96-
const vw2 = vh / caspect;
97-
if (vw2 > vw) {
98-
const cx = (vw2 - vw) / 2 / (vh / ch);
99-
const cw3 = ch / vaspect;
100-
g.drawImage(video, 0, 0, vw, vh, cx, 0, cw3, ch);
101-
//g.drawImage(video, 0, 0, vw, vh, cw2 + cx, 0, cw3, ch);
102-
pos = [ cx, 0, cw3, ch, cw2 + cx, 0, cw3, ch ];
103-
} else {
104-
const vx = (vw - vw2) / 2;
105-
g.drawImage(video, vx, 0, vw2, vh, 0, 0, cw2, ch);
106-
//g.drawImage(video, vx, 0, vw2, vh, cw2, 0, cw2, ch);
107-
pos = [ 0, 0, cw2, ch, cw2, 0, cw2, ch ];
108-
}
109-
}
110-
111-
var drawText = function(s, x, y) {
112-
for (var i = 0; i < 8; i += 4) {
113-
g.strokeText(s, pos[i] + x * pos[i + 2], pos[i + 1] + y * pos[i + 3]);
114-
g.fillText(s, pos[i] + x * pos[i + 2], pos[i + 1] + y * pos[i + 3]);
115-
}
116-
};
117-
var fillRect = function(x, y, w, h) {
118-
for (var i = 0; i < 8; i += 4) {
119-
g.fillRect(pos[i] + x * pos[i + 2], pos[i + 1] + y * pos[i + 3], w * pos[i + 2], h * pos[i + 3]);
120-
}
121-
};
122-
123-
124-
var ox = pos[0] + pos[2] / 2;
125-
var oy = pos[1] + pos[3] / 2;
126-
127-
g.drawImage(img, ox - img.width / 2, oy - img.height / 2)
128-
129-
cnt++;
130-
requestAnimationFrame(draw);
131-
};
132-
draw();
133-
134-
canvas.onmousedown = function() {
135-
history.back()
136-
//canvas.style.display = "none"
137-
//video.srcObject = null
138-
}
139-
};
140-
141-
</script>
142-
<style>
143-
body {
144-
margin: 0;
145-
background-color: black;
146-
}
147-
#video {
148-
display: block;
149-
width: 100%;
150-
transform: scale(0.01);
151-
}
152-
#canvas {
153-
z-index: 3;
154-
display: block;
155-
position: absolute;
156-
top: 0;
157-
left: 0;
158-
width: 100%;
159-
height: 100%;
160-
}
161-
#debug {
162-
position: absolute;
163-
top: 0;
164-
left: 0;
165-
background-color: rgb(1, 1, 1, 0.5);
166-
z-index: 2;
167-
color: white;
168-
}
169-
</style>
170-
</head>
171-
<body>
172-
<canvas id="canvas"></canvas>
173-
<video id="video" autoplay playsinline></video>
174-
<div id=debug></div>
175-
</body>
176-
</html>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>colorsight - WebMegane</title>
6+
<meta property="og:image" content="color.jpg">
7+
<link rel="apple-touch-icon" href="color.jpg"/>
8+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"/>
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
10+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
11+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
12+
<script src="fukuno.js"></script>
13+
<script>"use strict";
14+
15+
window.onload = function() {
16+
startAR()
17+
/*
18+
window.onload = function() {
19+
var map = initMap('mapid')
20+
map.setZoom(4)
21+
map.panTo([ 35.943560,136.188917 ]) // 鯖江駅
22+
// map.panTo([ 35.944571, 136.186228 ]) // Hana道場
23+
// map.addIcon(35.943560, 136.188917, "鯖江駅")
24+
map.addIcon(35.944571, 136.186228 , "<a href=http://hanadojo.com/ target=_blank>Hana道場</a>", "icon-hanadojo.png", 64)
25+
// map.addIcon(35.944571, 136.186228 , function() { window.open("http://hanadojo.com/", "_blank") }, "icon-hanadojo.png", 64)
26+
}
27+
*/
28+
}
29+
30+
const startAR = function(callback) {
31+
const USE_CAMERA_FRONT = false;
32+
// var videoop = USE_CAMERA_FRONT ? true : { facingMode : { exact : "environment" } };
33+
// var videoop = USE_CAMERA_FRONT ? true : { facingMode : { ideal : "environment" } };
34+
var videoop = USE_CAMERA_FRONT ? true : {
35+
facingMode : { ideal : "environment" },
36+
width: { min: 640, ideal: 1920 },
37+
height: { min: 480, ideal: 1080 }
38+
// width: { min: 640, ideal: 1280, max: 1920 },
39+
// height: { min: 480, ideal: 720, max: 1080 }
40+
};
41+
const medias = { audio: false, video: videoop };
42+
43+
// dump(navigator.mediaDevices.getSupportedConstraints());
44+
45+
navigator.getUserMedia(medias, function(stream) {
46+
video.srcObject = stream;
47+
},
48+
function(err) {
49+
alert(err);
50+
}
51+
);
52+
53+
54+
55+
var g = canvas.getContext("2d");
56+
var cnt = 0;
57+
// color
58+
var sum = [ 0, 0, 0 ];
59+
var ncol = 0;
60+
61+
var img = new Image()
62+
img.src = "ar-test.png"
63+
64+
var draw = function() {
65+
const cw = window.innerWidth * window.devicePixelRatio;
66+
const ch = window.innerHeight * window.devicePixelRatio;
67+
canvas.width = cw;
68+
canvas.height = ch;
69+
70+
const vw = video.videoWidth;
71+
const vh = video.videoHeight;
72+
const cw2 = cw // / 2;
73+
const caspect = ch / cw2;
74+
const vaspect = vh / vw;
75+
76+
const fitwidth = caspect < vaspect; // auto fit screen
77+
//const fitwidth = true; // force fit width
78+
//const fitwidth = false; // force fit height
79+
80+
var pos = [];
81+
if (fitwidth) {
82+
const vh2 = vw * caspect;
83+
if (vh2 > vh) {
84+
const cy = (vh2 - vh) / 2 / (vw / cw2);
85+
const ch2 = cw2 * vaspect;
86+
g.drawImage(video, 0, 0, vw, vh, 0, cy, cw2, ch2);
87+
//g.drawImage(video, 0, 0, vw, vh, cw2, cy, cw2, ch2);
88+
pos = [ 0, cy, cw2, ch2, cw2, cy, cw2, ch2 ];
89+
} else {
90+
const vy = (vh - vh2) / 2;
91+
g.drawImage(video, 0, vy, vw, vh2, 0, 0, cw2, ch);
92+
//g.drawImage(video, 0, vy, vw, vh2, cw2, 0, cw2, ch);
93+
pos = [ 0, 0, cw2, ch, cw2, 0, cw2, ch ];
94+
}
95+
} else {
96+
const vw2 = vh / caspect;
97+
if (vw2 > vw) {
98+
const cx = (vw2 - vw) / 2 / (vh / ch);
99+
const cw3 = ch / vaspect;
100+
g.drawImage(video, 0, 0, vw, vh, cx, 0, cw3, ch);
101+
//g.drawImage(video, 0, 0, vw, vh, cw2 + cx, 0, cw3, ch);
102+
pos = [ cx, 0, cw3, ch, cw2 + cx, 0, cw3, ch ];
103+
} else {
104+
const vx = (vw - vw2) / 2;
105+
g.drawImage(video, vx, 0, vw2, vh, 0, 0, cw2, ch);
106+
//g.drawImage(video, vx, 0, vw2, vh, cw2, 0, cw2, ch);
107+
pos = [ 0, 0, cw2, ch, cw2, 0, cw2, ch ];
108+
}
109+
}
110+
111+
var drawText = function(s, x, y) {
112+
for (var i = 0; i < 8; i += 4) {
113+
g.strokeText(s, pos[i] + x * pos[i + 2], pos[i + 1] + y * pos[i + 3]);
114+
g.fillText(s, pos[i] + x * pos[i + 2], pos[i + 1] + y * pos[i + 3]);
115+
}
116+
};
117+
var fillRect = function(x, y, w, h) {
118+
for (var i = 0; i < 8; i += 4) {
119+
g.fillRect(pos[i] + x * pos[i + 2], pos[i + 1] + y * pos[i + 3], w * pos[i + 2], h * pos[i + 3]);
120+
}
121+
};
122+
123+
124+
var ox = pos[0] + pos[2] / 2;
125+
var oy = pos[1] + pos[3] / 2;
126+
127+
g.drawImage(img, ox - img.width / 2, oy - img.height / 2)
128+
129+
cnt++;
130+
requestAnimationFrame(draw);
131+
};
132+
draw();
133+
134+
canvas.onmousedown = function() {
135+
history.back()
136+
//canvas.style.display = "none"
137+
//video.srcObject = null
138+
}
139+
};
140+
141+
</script>
142+
<style>
143+
body {
144+
margin: 0;
145+
background-color: black;
146+
}
147+
#video {
148+
display: block;
149+
width: 100%;
150+
transform: scale(0.01);
151+
}
152+
#canvas {
153+
z-index: 3;
154+
display: block;
155+
position: absolute;
156+
top: 0;
157+
left: 0;
158+
width: 100%;
159+
height: 100%;
160+
}
161+
#debug {
162+
position: absolute;
163+
top: 0;
164+
left: 0;
165+
background-color: rgb(1, 1, 1, 0.5);
166+
z-index: 2;
167+
color: white;
168+
}
169+
</style>
170+
</head>
171+
<body>
172+
<canvas id="canvas"></canvas>
173+
<video id="video" autoplay playsinline></video>
174+
<div id=debug></div>
175+
</body>
176+
</html>

‎samples/icon-illustya-moses_jikkai.png

7.92 KB
Loading

0 commit comments

Comments
 (0)