Micrio.Client/index.html at main · Q42/Micrio.Client · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>

<head>
	<title>6.0 Micrio dev</title>
	<meta name="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="UTF-8">
	<meta name="google" value="notranslate">
	<meta name="mobile-web-app-capable" content="yes">

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,800;1,300;1,400;1,500;1,600;1,800&display=swap" rel="stylesheet">

	<!-- Use this for local development -->
	<script type="module" src="./src/ts/main.ts"></script>

	<!-- Use this to test the compiled version -->
	<!-- <script src="./dist/micrio.min.js" defer></script> -->

	<!-- Use a production version -->
	<!-- <script src="https://r2.micr.io/micrio-5.5.6.min.js" defer></script> -->

	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			background: #222;
			height: 100%;
			font-family: Raleway, sans-serif;
		}
	</style>

	<script>
	</script>

</head>

<body>
	<!-- DEMO IDs
		Basic test image: dzzLm
		Omni image: QgjdoCK / HvoNSNV (has markers)
		Omni image with layers: VVxoPCb / GPjAGL
		360 tour: ZnaHJK / WkdtYs / OJqMYL / EaouKa / fmxpBY
		Embedded video: SUeqOX
		Serial multi-image tour: ojvqWXd / JXflr
		360 hi-res: mLOarF
		360 poppenhuis: uLNEVz  / mqmDZU / sXvgoH
	-->
	<!-- <micr-io id="evFgTjE" laxng="nl" daxta-zoomlimit="4" daxta-router="hash" data-embexds-inside-gl daxta-path="http://localhost:6100/r2/" daxta-force-path data-embxeds-inside-gl="true" data-sxkipmeta daxta-cluster-markers></micr-io> -->
	<!-- <micr-io id="jnpEgY" daxta-embeds-inside-gl data-path="http://localhost:6100/r2/" data-force-path daxta-embeds-inside-gl="true" dxata-skipmeta daxta-cluster-markers></micr-io> -->
	<!-- <micr-io id="cjhjTWD" lang="nl" xid="external/micrio/blabla" data-watermark-opacity="0.2"></micr-io> -->
	<!-- <micr-io xxid="blabla" id="https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json"></micr-io> -->
	<!-- <micr-io id="https://iiif.io/api/image/3.0/example/reference/59d09e6773341f28ea166e9f3c1e674f-gallica_ark_12148_bpt6k1526005v_f18"></micr-io> -->
	 <!-- multi image marker CVWjwhk / very small pBjaEqs-->
	  <!-- Staedel-->
	<!-- <micr-io id="zUtxLtj" lang="de-DE" daxta-skipmeta datxa-ui="false"></micr-io> -->

	<micr-io id="dzzLm" daxta-coverlimit daxta-embeds-inside-gl="false"></micr-io>
	 <!-- <micr-io data-gallery="yOeffA.1777985778" data-path="https://eu.micr.io/" data-fullscreen data-gallery-sort="name"></micr-io> -->

	<!-- <micr-io id="RKLaNjM"></micr-io> -->

	<!-- Crystal bridges pBErzZO / nGZqTNo -->
	<!-- OgjEZme -->
	<!--<micr-io id="https://iiif.micr.io/dzzLm/info.json" daxta-normalize-dpr="false" xid="external/micrio/blabla" data-skipmeta="true"></micr-io>-->

	<!-- Grids
	 	Vermeer grid PiYMF.1673513256 https://micrio.rijksmuseum.nl/g/PiYMF.1673513256.mdp
	 -->
	<!-- <micr-io data-grid="PiYMF.1673513256" data-path="https://micrio.rijksmuseum.nl/"></micr-io> -->

	<!-- Test image with all types of markers -->
	<!-- <micr-io id="vsmQN" lang="nl" data-camspeed="4" data-path="https://micrio.vangoghmuseum.nl/micrio/"></micr-io> -->

	<!-- Demo swipeable gallery -->
	<!-- <micr-io data-gallery="xnRwQ,985,1200,,p;esgZB,960,1280,;pRiMP,960,1280," data-path="https://micrio.vangoghmuseum.nl/micrio/"></micr-io> -->

	<script>
		window.micrio = document.querySelector('micr-io');

		// Override the default settings by setting the `.defaultSettings` property
		// on a <micr-io> HTML element
		micrio.defaultSettings = {

		};

		//0.016063, 0.047832, 0.982716, 0.965598

		// Listen to opened marker hooks
		micrio.addEventListener('click', e => {
			//console.log('Opened marker', e.detail);
			//console.log(micrio.$current.camera.getCoo(e.clientX,e.clientY));
		});

		// Put any pre-info init hooks here
		micrio.addEventListener('pre-info', e => {
			// At this point, you can manipulate the image settings for instance
			// before it gets picked up by the Micrio initialization process.
			//console.log(e.detail.settings)
		});

		// Put any pre-data init hooks here
		micrio.addEventListener('pre-data', e => {
			// Same as `pre-info` hook, but this is for the image data / content.
		});

	</script>
</body>

</html>