/
index.html
136 lines (133 loc) · 7.91 KB
/
index.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE HTML>
<html>
<head>
<title> Sniffypedia </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/sniffypedia.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<link rel="stylesheet" href="style/bubble.css">
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/sniffypedia.js"></script>
<script type="text/javascript" src="js/bubble.js"></script>
<script type="text/javascript" src="js/cormorant.js"></script>
<script type="text/javascript" src="js/cuttlefish.js"></script>
<script type="text/javascript" src="js/visualisation.js"></script>
<!-- Metadata, the non-Schema/JSON-LD way. Inefficiencies. Yuck! -->
<meta name="description" content="An open, collaborative repository of radio-identifiable (sniffable) things, represented as structured data.">
<meta itemprop="name" content="Sniffypedia">
<meta itemprop="description" content="An open, collaborative repository of radio-identifiable (sniffable) things, represented as structured data.">
<meta itemprop="image" content="images/social-share.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@reelyActive">
<meta name="twitter:title" content="Sniffypedia">
<meta name="twitter:description" content="An open, collaborative repository of radio-identifiable (sniffable) things, represented as structured data.">
<meta name="twitter:creator" content="@reelyActive">
<meta name="twitter:image:src" content="images/social-share.png">
<meta property="og:title" content="Sniffypedia" />
<meta property="og:url" content="http://sniffypedia.org" />
<meta property="og:image" content="images/social-share.png" />
<meta property="og:description" content="An open, collaborative repository of radio-identifiable (sniffable) things, represented as structured data." />
<meta property="og:site_name" content="Sniffypedia" />
<!-- Metadata, the Schema/JSON-LD way. Yay! -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Dataset",
"name": "Sniffypedia",
"url": "https://sniffypedia.org/",
"creator": "http://www.reelyactive.com",
"image": "https://sniffypedia.org/images/social-share.png"
}
</script>
</head>
<body ng-app="sniffypedia">
<div ng-controller="InteractionCtrl" class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1 class="text-center"> Sniffypedia </h1>
<p class="lead text-center"> An open, collaborative repository of radio-identifiable, or "sniffable", things, represented as structured data. </p>
<p class="text-justify"> There are billions of radio-identifiable "things" on our planet today, and there are billions more produced each year. Many of these will <i>actively</i> emit an identifiable radio signal (<i>Active</i> RFID such as Bluetooth Low Energy advertise mode). And even more will <i>passively</i> reflect an identifiable radio signal when excited by a reader (<i>Passive</i> RFID such as RAIN). </p>
<p class="text-justify"> The Sniffypedia project allows anyone to contribute information about the these "things" and their associated identifiers, not unlike <b>a phone book for the Internet of Things</b>. Every "thing" is represented as structured data in the form of machine-readable Schema.org and JSON-LD as championed by the major search engines, and includes a human-readable HTML representation. In future, we would expect product manufacturers to host such representations on their own servers at which point Sniffypedia would instead point to their URL. </p>
<hr>
<h3> Search by identifier: </h3>
<div class="center-block">
<div class="btn-group" uib-dropdown>
<button id="select-protocol" type="button"
class="btn btn-default" uib-dropdown-toggle>
{{protocol}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="select-protocol">
<li role="menuitem" ng-repeat="(key, value) in index">
<a ng-click="$parent.protocol = key"> {{key}} </a>
</li>
</ul>
</div>
<div class="btn-group" uib-dropdown>
<button id="select-identifier" type="button"
class="btn btn-default" uib-dropdown-toggle>
{{identifier}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="select-identifier">
<li role="menuitem"
ng-repeat="(key, value) in index[protocol]">
<a ng-click="$parent.identifier = key"> {{key}} </a>
</li>
</ul>
</div>
<div class="btn-group" uib-dropdown>
<button id="select-value" type="button"
class="btn btn-default" uib-dropdown-toggle>
{{value}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="select-value">
<li role="menuitem"
ng-repeat="(key, value) in index[protocol][identifier]">
<a ng-click="$parent.value = key;
updateStory(index[protocol][identifier][key])">
{{key}}
</a>
</li>
</ul>
</div>
</div>
<h3> Search by name: </h3>
<input type="text" class="form-control"
placeholder="Start typing the name of some thing"
uib-typeahead="thing for thing in things | filter:$viewValue |
limitTo:8" ng-model="nameQuery"
typeahead-on-select="updateStory($item)">
<hr>
<div class="well text-center"
ng-show="selectedUrl">
<a class="lead" ng-href="{{selectedUrl}}" target="_blank">
{{selectedUrl}} </a>
</div>
<p> The Sniffypedia source is available <a href="https://github.com/reelyactive/sniffypedia" target="_blank">via GitHub</a> and the index is available <a href="https://www.npmjs.com/package/sniffypedia" target="_blank">via npmjs</a>. </p>
<p class="text-center">
<a href="contribute" class="btn btn-default">Contribute</a>
<a href="about" class="btn btn-primary">About</a>
</p>
</div>
<div class="col-md-6 bubble-background">
<div class="bubble-container">
<bubble ng-if="story" json="story" size="240px" toggle="false">
</bubble>
</div>
</div>
</div>
</div>
<footer class="footer">
<small> This Sniffypedia is made available under the Open Database License: http://opendatacommons.org/licenses/odbl/1.0/. Any rights in individual contents of the database are licensed under Creative Commons Attribution-ShareAlike 4.0 International: https://creativecommons.org/licenses/by-sa/4.0/ </small>
</footer>
<!-- Privacy-first web analytics with Cloudflare -->
<script defer src='https://static.cloudflareinsights.com/beacon.min.js'
data-cf-beacon='{"token": "c5291e68db1d4ba9862affb85120a8b4"}'>
</script>
</body>
</html>