Commit fc5a1932 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Readme updated, Makefile improved

parent dcec33e0
......@@ -8,8 +8,13 @@
SRC_FOLDER=./src
DIST_FOLDER=./dist
TEST_FOLDER=./test
NM_FOLDER=./node_modules
IMG_FOLDER=$(SRC_FOLDER)/img
# Binaries
BROWSERIFY=$(NM_FOLDER)/browserify/bin/cmd.js
WATCHIFY=$(NM_FOLDER)/watchify/bin/cmd.js
# Vector images
IMG_FTV := $(wildcard $(IMG_FOLDER)/features-vector/*.svg)
IMG_UIV := $(wildcard $(IMG_FOLDER)/ui-vector/*.svg)
......@@ -84,38 +89,38 @@ coreprepare:
cp node_modules/font-awesome/fonts/* $(DIST_FOLDER)/fonts/
corebundlejs:
browserify $(SRC_FOLDER)/js/OLU.js --debug --s OLU > $(JS_OUT)
$(BROWSERIFY) $(SRC_FOLDER)/js/OLU.js --debug --s OLU > $(JS_OUT)
corebundlecss:
npm-css $(SRC_FOLDER)/css/OLU.css > $(CSS_OUT)
$(NM_FOLDER)/npm-css/bin/npm-css $(SRC_FOLDER)/css/OLU.css > $(CSS_OUT)
sed -i 's#images/#img/#g;s#../fonts/#fonts/#g;s#./edit-in-osm.png#img/edit-in-osm_custom.png#g' $(CSS_OUT)
sed -i 's#arrow-left.svg#img/arrow-left.svg#g;s#arrow-up-white.svg#img/arrow-up-white.svg#g;s#pano.svg#img/pano.svg#g;s#pano-icon.svg#img/pano-icon.svg#g;s#pointer-wheat.svg#img/pointer-wheat.svg#g;s#pointer-white.svg#img/pointer-white.svg#g;s#stepper-left.svg#img/stepper-left.svg#g;s#stepper-play.svg#img/stepper-play.svg#g;s#stepper-right.svg#img/stepper-right.svg#g;s#stepper-stop.svg#img/stepper-stop.svg#g;s#stepper-stop-small.svg#img/stepper-stop-small.svg#g;s#turn.svg#img/turn.svg#g;s#turn-around.svg#img/turn-around.svg#g' $(CSS_OUT)
coreminifyjs:
uglifyjs $(JS_OUT) -c > $(JS_MIN_OUT)
$(NM_FOLDER)/uglify-js/bin/uglifyjs $(JS_OUT) -c > $(JS_MIN_OUT)
coreminifycss:
uglifycss --ugly-comments $(CSS_OUT) > $(CSS_MIN_OUT)
$(NM_FOLDER)/uglifycss/uglifycss --ugly-comments $(CSS_OUT) > $(CSS_MIN_OUT)
corebundleminifyjs:
browserify $(SRC_FOLDER)/js/OLU.js --s OLU | uglifyjs -c > $(JS_MIN_OUT)
$(BROWSERIFY) $(SRC_FOLDER)/js/OLU.js --s OLU | uglifyjs -c > $(JS_MIN_OUT)
# Test
test: testcorejs testcoreviews
testcorejs:
browserify --debug $(TEST_FILES) > $(TEST_OUT)
$(BROWSERIFY) --debug $(TEST_FILES) > $(TEST_OUT)
testcoreviews:
for i in $(TEST_VIEWS); do browserify --debug $(TEST_FOLDER)/js/view/$$i > $(TEST_FOLDER)/View_$$i.bundle.js; done
for i in $(TEST_VIEWS); do $(BROWSERIFY) --debug $(TEST_FOLDER)/js/view/$$i > $(TEST_FOLDER)/View_$$i.bundle.js; done
# Watch for changes
watch:
watchify $(SRC_FOLDER)/js/OLU.js --debug --s OLU -o $(JS_OUT) -v
$(WATCHIFY) $(SRC_FOLDER)/js/OLU.js --debug --s OLU -o $(JS_OUT) -v
watchtest:
watchify --debug $(TEST_FILES) -o $(TEST_OUT) -v
$(WATCHIFY) --debug $(TEST_FILES) -o $(TEST_OUT) -v
watchview:
watchify --debug $(TEST_FOLDER)/js/view/$(name)Test.js -o $(TEST_FOLDER)/View_$(name)Test.js.bundle.js -v
$(WATCHIFY) --debug $(TEST_FOLDER)/js/view/$(name)Test.js -o $(TEST_FOLDER)/View_$(name)Test.js.bundle.js -v
# Clean
......
OpenLevelUp!
============
![OpenLevelUp! logo](http://openlevelup.net/img/logo.jpg)
![OpenLevelUp! logo](./src/img/ui-vector/logo.svg)
Read-me
-------
......@@ -11,7 +11,7 @@ It allows you to see inside buildings, level by level through your web browser.
The data is retrieved from OpenStreetMap using [Overpass API](http://wiki.openstreetmap.org/wiki/Overpass_API).
For more details about the project, how to contribute on indoor in OpenStreetMap, and some use cases, see [OpenLevelUp on OSM wiki](https://wiki.openstreetmap.org/wiki/OpenLevelUp).
A live demo is available at [openlevelup.net](http://openlevelup.net/).
A live demo is available at [openlevelup.net](http://openlevelup.net/). For development version (maybe unstable), see [dev.openlevelup.net](http://dev.openlevelup.net/).
Examples of well-mapped areas
......@@ -34,9 +34,8 @@ Build
### Compiling
If you want to build OpenLevelUp! by yourself, you can do the following (but it's not necessary for install, as a build is already available in **dist/** folder):
If you want to build OpenLevelUp! by yourself, you can do the following (but it's not necessary for install, as a build is already available in **dist.zip**):
```
npm install browserify npm-css watchify uglifyify uglifycss -g
npm install
make
```
......@@ -46,12 +45,48 @@ When this is done, OpenLevelUp! is ready in **dist/** folder.
Installation
------------
If you want to install your own OpenLevelUp! instance, just upload the content of the **dist/** folder after build in your own FTP or web server. That's all.
If you want to install your own OpenLevelUp! instance, just upload the content of the **dist/** folder after build (or of **dist.zip**) in your own FTP or web server. That's all.
Using
-----
Integrating OpenLevelUp in your own website is easy, just do in your HTML page:
```
<head>
...
<!-- CSS import -->
<link rel="stylesheet" href="OLU.min.css" />
<style>
#openlevelup {
width: 100%;
height: 500px;
}
</style>
...
</head>
<body>
<!-- Container div -->
<div id="openlevelup"></div>
<!-- JS import -->
<script src="OLU.js"></script>
<!--script src="OLU.min.js"></script-->
<!-- Init code -->
<script>
var myOlu = OLU.init(
"openlevelup", //The div ID
"basic", //The mode, between "basic" and "advanced"
{} //The configuration, optional
);
</script>
</body>
```
### Configuration
If you want to change some parameters, such as the Overpass API server or the available tile servers,
just edit the **conf/config.json** file. You can also change the objects style by editing **conf/style.json** file.
Contribute
......@@ -64,7 +99,7 @@ which contains all labels used in the interface and their translations.
License
-------
Copyright 2015 Adrien PAVIE
Copyright 2015-2016 Adrien PAVIE
See LICENSE for complete AGPL3 license.
......
/*
* This file is part of OpenLevelUp!.
*
* OpenLevelUp! is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* OpenLevelUp! is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with OpenLevelUp!. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* OpenLevelUp!
* Web viewer for indoor mapping (based on OpenStreetMap data).
* Author: Adrien PAVIE
*
* Style for all pages
*/
/**********
* Global *
**********/
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: Arial;
color: #222;
}
p {
line-height: 1.4em;
}
a {
color: #007BFE;
text-decoration: none;
}
a:hover {
color: #51A5FE;
}
h1 {
margin: 10px 0;
}
.clear {
clear: both;
margin: 0;
padding: 0;
}
.center {
text-align: center;
}
a.help {
font-weight: normal;
cursor: help;
text-decoration: underline;
text-decoration-style: dotted;
}
.hidden {
display: none;
}
/*******
* Map *
*******/
#map {
height: 100%;
}
/**********
* Header *
**********/
#logo-link {
cursor: pointer;
}
#logo-link img {
margin-top: 15px;
}
/***********
* Sidebar *
***********/
/* Tabs */
.sidebar-tabs {
background-color: #81ADFF;
}
.sidebar-tabs > ul > li > a > img, h1.sidebar-header .sidebar-close img {
height: 24px;
margin: 8px;
}
.sidebar-tabs > ul > li.level {
text-align: center;
cursor: pointer;
}
.sidebar-tabs > ul > li.disabled img {
filter: invert(40%);
-moz-filter: grayscale(40%);
}
.sidebar-tabs > ul > li:hover {
background-color: #B8D1FF;
}
/* Level control */
#level-control {
text-align: center;
position: absolute;
top: 3px;
right: 0px;
left: 0px;
}
#level-control select {
width: 100%;
max-width: 100%;
}
/* Content */
.sidebar-content {
background-color: #E1EBFF;
color: #444;
}
h1.sidebar-header img {
height: 32px;
vertical-align: middle;
}
/*******************
* Sidebar content *
*******************/
/* Home sidebar */
#settings.active {
height: 100%;
width: 100%;
display: table;
}
header, footer, #home > div {
display: table-row;
text-align: center;
}
#settings > div {
height: 100%;
}
/* Settings sidebar */
#settings {
padding-left: 10px;
}
#settings ul {
list-style: none;
list-style-type: none;
padding-left: 10px;
text-align: left;
}
#icon-star, #icon-export {
height: 16px;
vertical-align: middle;
cursor: pointer;
}
/* Room list sidebar */
#roomlist {
padding-left: 10px;
padding-right: 10px;
}
#rooms {
color: #333;
display: table;
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
#rooms a {
color: #007BFE;
text-decoration: none;
}
#rooms a:hover {
color: #51A5FE;
}
/* Level row */
.lvl-row {
display: table-row;
}
.lvl-name, .lvl-rooms {
display: table-cell;
}
.lvl-name {
vertical-align: top;
border-right: 1px solid #2A75FF;
font-weight: bold;
}
.lvl-rooms {
vertical-align: middle;
width: 100%;
}
.lvl-rooms ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.lvl-rooms li {
text-align: left;
padding-bottom: 2px;
}
.lvl-rooms li img {
vertical-align: middle;
}
/* Search field */
.input-max {
display: table;
}
.input-max .text {
display: table-cell;
width: 100%;
}
.input-max .text input {
width: 100%;
}
/* Notes pane */
#notes textarea {
width: 100%;
}
#notes .buttons {
display: table;
width: 100%;
}
#notes .buttons button {
display: table-cell;
width: 50%;
}
/* Routing tab */
.routing-destinations {
display: table;
width: 100%;
margin-top: 5px;
border-collapse: separate;
border-spacing: 10px;
}
.routing-destination {
display: table-row;
}
.routing-destination > div {
display: table-cell;
text-align: center;
}
#routing-start, #routing-end {
width: 70%;
text-align: left;
}
#rtg-marker-start, #rtg-marker-end {
cursor: pointer;
z-index: 1000;
}
.routing-destination > div img {
height: 24px;
vertical-align: middle;
}
.routing-buttons button {
float: right;
}
.routing-instructions {
margin-top: 15px;
padding: 10px;
background-color: white;
}
.routing-instructions-general {
font-size: 70%;
margin-bottom: 5px;
color: #777;
}
.rtg-instr-title {
color: black;
}
.routing-instruction {
border-top: 1px solid #ccc;
padding: 5px 0;
}
.routing-instr-img img {
vertical-align: middle;
height: 16px;
}
.routing-instr-ref {
font-weight: bold;
font-size: 80%;
}
.routing-instr-txt {
font-size: 80%;
}
.routing-instr-time {
float: right;
font-size: 70%;
color: #777;
}
/*******************
* Leaflet pop-ups *
*******************/
/* Popup titles */
.popup {
font-weight: bold;
margin: 0;
}
h1.popup {
font-size: 105%;
text-align: center;
}
h1.popup img {
vertical-align: middle;
}
h1.popup img.icon {
width: 24px;
}
h2.popup {
font-size: 100%;
}
/* Popup footer */
.popup-footer {
margin: 5px 0 0 0;
text-align: center;
}
.popup-footer img {
height: 24px;
padding: 0 5px;
}
/****************
* Infobox area *
****************/
#infobox-list {
list-style: none;
padding: 0;
margin: 0;
}
#infobox-list li {
padding: 5px;
margin-top: 5px;
}
#infobox-list li.info {
background-color: #D2E6FF;
color: #2A86FF;
}
#infobox-list li.alert {
background-color: #FEFFAA;
color: #FF862F;
}
#infobox-list li.error {
background-color: #FFD9D9;
color: #FF2A2A;
}
/************************
* Images overlay panel *
************************/
.control-window-wide {
width: 80%;
height: 80%;
overflow: hidden;
}
.control-window-wide .content {
position: absolute;
bottom: 0;
top: 58px;
right: 0;
left: 0;
}
#op-images-tabs-content {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 40px;
}
#op-images-status {
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 30px;
padding: 0;
}
#op-images-tabs-links a {
display: inline-block;
text-decoration: none;
text-align: center;
color: white;
padding: 5px 10px;
margin: 5px;
background: #777;
width: 32px;
}
#op-images-tabs-links a img {
height: 24px;
}
#op-images-tabs-links a.selected {
background: #555;
z-index: 101;
}
#op-images-tabs-content > div {
width: 100%;
height: 100%;
}
/* Spherical images tab */
#tab-spheric {
display: table;
}
#spherical-content {
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: black;
position: absolute;
right: 0;
left: 0;
top: 0;