diverse fortschritte, page für crashtest
This commit is contained in:
Hendrik Fellerhoff
parent
1921417667
commit
8248804ac7
|
|
@ -12,6 +12,7 @@
|
||||||
<link type="text/css" href="<c:url value="/resources/css/smoothness/jquery-ui-1.8.18.custom.css"/>" rel="stylesheet" />
|
<link type="text/css" href="<c:url value="/resources/css/smoothness/jquery-ui-1.8.18.custom.css"/>" rel="stylesheet" />
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>
|
||||||
|
<script type="text/javascript" src="<c:url value="/resources/js/events.class.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/underscore.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/underscore.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
||||||
|
|
@ -26,45 +27,8 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>CTDO Raumsteuerung</h1>
|
<h1>CTDO Raumsteuerung</h1>
|
||||||
|
<div id="container">
|
||||||
<div id="room-tabs">
|
<div id="room-tabs">
|
||||||
<ul>
|
|
||||||
<li><a href="#tabs-1">Global</a></li>
|
|
||||||
<li><a href="#tabs-2">Raum 1</a></li>
|
|
||||||
</ul>
|
|
||||||
<div id="tabs-1">
|
|
||||||
</div>
|
|
||||||
<div id="tabs-2">
|
|
||||||
<div id="v-tabs" class="inner-tabs-container">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#v-tabs-1">Licht</a></li>
|
|
||||||
<li><a href="#v-tabs-2">Musik</a></li>
|
|
||||||
<li><a href="#v-tabs-3">Lampel</a></li>
|
|
||||||
</ul>
|
|
||||||
<div id="v-tabs-1">
|
|
||||||
<div id="colorpicker-raum1"></div>
|
|
||||||
<select multiple="multiple" id="par56select">
|
|
||||||
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div id="v-tabs-2">
|
|
||||||
<label for="slider1">Lautstärke Raum 1:</label><div id="slider1" class="slider"></div>
|
|
||||||
</div>
|
|
||||||
<div id="v-tabs-3">
|
|
||||||
<div class="lampel">
|
|
||||||
<span class="circle red" title="click to toggle"></span>
|
|
||||||
<span class="circle yellow" title="click to toggle"></span>
|
|
||||||
<span class="circle green" title="click to toggle"></span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="switch">
|
|
||||||
Raumlicht:<br />
|
|
||||||
<input type="radio" name="raum-1-licht">An <input type="radio" name="raum-1-licht" checked="checked">Aus
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -80,6 +44,20 @@
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</script>
|
</script>
|
||||||
|
<script type="text/x-handlebars-template" id="room-vertical-tabs-template">
|
||||||
|
<div id="room{{roomId}}-vertical-tabs" class="ui-tabs-vertical">
|
||||||
|
<ul>
|
||||||
|
{{#each types}}
|
||||||
|
<li><a href="#room{{roomId}}-vertical-tabs-{{id}}">{{typeName}}</a></li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
|
{{#each types}}
|
||||||
|
<div id="room{{roomId}}-vertical-tabs-{{id}}">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
<script type="text/x-handlebars-template" id="par56-options-template">
|
<script type="text/x-handlebars-template" id="par56-options-template">
|
||||||
{{#each devices}}
|
{{#each devices}}
|
||||||
<option name="{{deviceId}}">{{deviceName}}</option>
|
<option name="{{deviceId}}">{{deviceName}}</option>
|
||||||
|
|
@ -91,6 +69,15 @@
|
||||||
<button>Buzzern</button>
|
<button>Buzzern</button>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
<script type="text/x-handlebars-template" id="lampel-template">
|
||||||
|
|
||||||
|
<div class="lampel">
|
||||||
|
<span class="circle red" title="click to toggle"></span>
|
||||||
|
<span class="circle yellow" title="click to toggle"></span>
|
||||||
|
<span class="circle green" title="click to toggle"></span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
<script type="text/x-handlebars-template">
|
<script type="text/x-handlebars-template">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
|
||||||
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<title>WebSockets</title>
|
||||||
|
|
||||||
|
<link type="text/css" href="<c:url value="/resources/css/screen.css"/>" rel="stylesheet"/>
|
||||||
|
<link type="text/css" href="<c:url value="/resources/css/styles.css"/>" rel="stylesheet"/>
|
||||||
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.7.1.min.js" />"></script>
|
||||||
|
<script type="text/javascript" src="<c:url value="/resources/js/main.js" />"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function sendData(data) {
|
||||||
|
var time = Math.round(new Date().getTime() / 1000);
|
||||||
|
data = {"timeStamp":time, "updates":data};
|
||||||
|
$.ajax({
|
||||||
|
type:'POST',
|
||||||
|
url:"/control/devices",
|
||||||
|
contentType:"application/json",
|
||||||
|
dataType:"json",
|
||||||
|
data:JSON.stringify(data)
|
||||||
|
});
|
||||||
|
console.log(data);
|
||||||
|
console.log(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
$('#par56 .pink').click(function () {
|
||||||
|
data = [
|
||||||
|
{"deviceId":0, "options":{"red":255, "green":0, "blue":40}},
|
||||||
|
{"deviceId":1, "options":{"red":255, "green":0, "blue":40}},
|
||||||
|
{"deviceId":2, "options":{"red":255, "green":0, "blue":40}},
|
||||||
|
{"deviceId":3, "options":{"red":255, "green":0, "blue":40}}
|
||||||
|
];
|
||||||
|
sendData(data);
|
||||||
|
});
|
||||||
|
$('#par56 .gruen').click(function () {
|
||||||
|
data = [
|
||||||
|
{"deviceId":0, "options":{"red":0, "green":255, "blue":0}},
|
||||||
|
{"deviceId":1, "options":{"red":0, "green":255, "blue":0}},
|
||||||
|
{"deviceId":2, "options":{"red":0, "green":255, "blue":0}},
|
||||||
|
{"deviceId":3, "options":{"red":0, "green":255, "blue":0}}
|
||||||
|
];
|
||||||
|
sendData(data);
|
||||||
|
});
|
||||||
|
$('#par56 .rot').click(function () {
|
||||||
|
data = [
|
||||||
|
{"deviceId":0, "options":{"red":255, "green":0, "blue":0}},
|
||||||
|
{"deviceId":1, "options":{"red":255, "green":0, "blue":0}},
|
||||||
|
{"deviceId":2, "options":{"red":255, "green":0, "blue":0}},
|
||||||
|
{"deviceId":3, "options":{"red":255, "green":0, "blue":0}}
|
||||||
|
];
|
||||||
|
sendData(data);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>CTDO Raumsteuerung</h1>
|
||||||
|
|
||||||
|
<p id="par56">Par56: <br>
|
||||||
|
<button class="pink">Pink</button>
|
||||||
|
<button class="gruen">Grün</button>
|
||||||
|
<button class="rot">Rot</button>
|
||||||
|
</p>
|
||||||
|
<p id="lampel">Lampel:<br>
|
||||||
|
<button class="rota">Rot (an)</button>
|
||||||
|
<button class="gelba">Gelb (an)</button>
|
||||||
|
<button class="gruena">Grün (an)</button>
|
||||||
|
<button class="roto">Rot (aus)</button>
|
||||||
|
<button class="gelbo">Gelb (aus)</button>
|
||||||
|
<button class="grueno">Grün (aus)</button>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
//Copyright (c) 2010 Nicholas C. Zakas. All rights reserved.
|
||||||
|
//MIT License
|
||||||
|
|
||||||
|
function EventTarget(){
|
||||||
|
this._listeners = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
EventTarget.prototype = {
|
||||||
|
|
||||||
|
constructor: EventTarget,
|
||||||
|
|
||||||
|
addListener: function(type, listener){
|
||||||
|
if (typeof this._listeners[type] == "undefined"){
|
||||||
|
this._listeners[type] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
this._listeners[type].push(listener);
|
||||||
|
},
|
||||||
|
|
||||||
|
fire: function(event){
|
||||||
|
if (typeof event == "string"){
|
||||||
|
event = { type: event };
|
||||||
|
}
|
||||||
|
if (!event.target){
|
||||||
|
event.target = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!event.type){ //falsy
|
||||||
|
throw new Error("Event object missing 'type' property.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._listeners[event.type] instanceof Array){
|
||||||
|
var listeners = this._listeners[event.type];
|
||||||
|
for (var i=0, len=listeners.length; i < len; i++){
|
||||||
|
listeners[i].call(this, event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
removeListener: function(type, listener){
|
||||||
|
if (this._listeners[type] instanceof Array){
|
||||||
|
var listeners = this._listeners[type];
|
||||||
|
for (var i=0, len=listeners.length; i < len; i++){
|
||||||
|
if (listeners[i] === listener){
|
||||||
|
listeners.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -5,7 +5,9 @@
|
||||||
* Time: 00:51
|
* Time: 00:51
|
||||||
* Main Javascript file
|
* Main Javascript file
|
||||||
*/
|
*/
|
||||||
|
var events = new EventTarget();
|
||||||
|
var roomDevices = [];
|
||||||
|
var roomDeviceViews = [];
|
||||||
Workspace = Backbone.Router.extend({
|
Workspace = Backbone.Router.extend({
|
||||||
routes:{
|
routes:{
|
||||||
"":"home",
|
"":"home",
|
||||||
|
|
@ -13,11 +15,27 @@ Workspace = Backbone.Router.extend({
|
||||||
|
|
||||||
},
|
},
|
||||||
home: function() {
|
home: function() {
|
||||||
|
function roomsLoadedHandler() {
|
||||||
|
rooms.each(function(room) {
|
||||||
|
var id = room.get('roomId');
|
||||||
|
roomDevices[id] = new RoomDevices();
|
||||||
|
roomDevices[id].url = '/resources/json/room' + id + '.json';
|
||||||
|
roomDevices[id].fetch();
|
||||||
|
});
|
||||||
|
events.removeListener("roomsLoaded", roomsLoadedHandler);
|
||||||
|
}
|
||||||
|
events.addListener("roomsLoaded", roomsLoadedHandler);
|
||||||
rooms.fetch();
|
rooms.fetch();
|
||||||
|
|
||||||
},
|
},
|
||||||
show_room: function(id) {
|
show_room: function(id) {
|
||||||
this.home();
|
this.home();
|
||||||
window.roomTabsId = id;
|
function roomsLoadedHandlerTabSelect() {
|
||||||
|
$('#room-tabs').tabs('select', id);
|
||||||
|
events.removeListener("roomsLoaded", roomsLoadedHandlerTabSelect)
|
||||||
|
}
|
||||||
|
events.addListener("roomsLoaded", roomsLoadedHandlerTabSelect);
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,8 @@
|
||||||
model: Room,
|
model: Room,
|
||||||
url: '/resources/json/rooms.json'
|
url: '/resources/json/rooms.json'
|
||||||
});
|
});
|
||||||
|
window.Device = Backbone.Model.extend({});
|
||||||
|
window.RoomDevices = Backbone.Collection.extend({
|
||||||
|
model: Device
|
||||||
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
@ -3,12 +3,46 @@ window.RoomsView = Backbone.View.extend({
|
||||||
this.collection.bind('reset', this.render, this);
|
this.collection.bind('reset', this.render, this);
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
|
$('#room-tabs').tabs('destroy');
|
||||||
this.template = Handlebars.compile($("#room-tabs-template").html());
|
this.template = Handlebars.compile($("#room-tabs-template").html());
|
||||||
var rooms = {'rooms': this.collection.toJSON()};
|
var rooms = {'rooms': this.collection.toJSON()};
|
||||||
$('#room-tabs').html(this.template(rooms)).tabs();
|
$('#room-tabs').html(this.template(rooms)).tabs({
|
||||||
if(typeof(window.roomTabsId) != "undefined") {
|
select: function(event, ui) {
|
||||||
$('#room-tabs').tabs('select', window.roomTabsId);
|
//set hashtag?
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
events.fire("roomsLoaded");
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.LampelView = Backbone.View.extend({
|
||||||
|
initialize: function() {
|
||||||
|
this.collection.bind('reset', this.render, this);
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
events.fire("lampelLoaded");
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.BuzzerView = Backbone.View.extend({
|
||||||
|
initialize: function() {
|
||||||
|
this.collection.bind('reset', this.render, this);
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
events.fire("buzzerLoaded");
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.Par56View = Backbone.View.extend({
|
||||||
|
initialize: function() {
|
||||||
|
this.collection.bind('reset', this.render, this);
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
events.fire("par56Loaded");
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"type":"Buzzer",
|
||||||
|
"deviceId":0,
|
||||||
|
"deviceName":"Buzzer",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"state":0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"startAddress":1,
|
||||||
|
"type":"Par56Spot",
|
||||||
|
"deviceId":0,
|
||||||
|
"deviceName":"Par56 Lampe 1",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"red":0,
|
||||||
|
"green":0,
|
||||||
|
"blue":0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startAddress":6,
|
||||||
|
"type":"Par56Spot",
|
||||||
|
"deviceId":1,
|
||||||
|
"deviceName":"Par56 Lampe 2",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"red":0,
|
||||||
|
"green":0,
|
||||||
|
"blue":0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startAddress":11,
|
||||||
|
"type":"Par56Spot",
|
||||||
|
"deviceId":2,
|
||||||
|
"deviceName":"Par56 Lampe 3",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"red":0,
|
||||||
|
"green":0,
|
||||||
|
"blue":0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startAddress":16,
|
||||||
|
"type":"Par56Spot",
|
||||||
|
"deviceId":3,
|
||||||
|
"deviceName":"Par56 Lampe 5",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"red":0,
|
||||||
|
"green":0,
|
||||||
|
"blue":0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startAddress":21,
|
||||||
|
"type":"Strobe1500",
|
||||||
|
"deviceId":4,
|
||||||
|
"deviceName":"Stroboskop 1",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"mode":0,
|
||||||
|
"speed":0,
|
||||||
|
"intensity":0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"startAddress":508,
|
||||||
|
"type":"Par56Spot",
|
||||||
|
"deviceId":5,
|
||||||
|
"deviceName":"Par56 Lampe 5",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"red":0,
|
||||||
|
"green":0,
|
||||||
|
"blue":0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type":"Lampel",
|
||||||
|
"deviceId":6,
|
||||||
|
"deviceName":"Lampel",
|
||||||
|
"picture":null,
|
||||||
|
"options": {
|
||||||
|
"red":0,
|
||||||
|
"green":0,
|
||||||
|
"blue":0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
Loading…
Reference in New Issue