Merge remote-tracking branch 'remotes/origin/maint/henne' into maint/lp
This commit is contained in:
Lucas Pleß
commit
6b41c9cb92
|
|
@ -12,6 +12,7 @@
|
|||
<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-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/underscore.js" />"></script>
|
||||
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
||||
|
|
@ -26,45 +27,8 @@
|
|||
</head>
|
||||
<body>
|
||||
<h1>CTDO Raumsteuerung</h1>
|
||||
|
||||
<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 id="container">
|
||||
<div id="room-tabs">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,6 +44,20 @@
|
|||
</div>
|
||||
{{/each}}
|
||||
</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">
|
||||
{{#each devices}}
|
||||
<option name="{{deviceId}}">{{deviceName}}</option>
|
||||
|
|
@ -91,6 +69,15 @@
|
|||
<button>Buzzern</button>
|
||||
</div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
* Main Javascript file
|
||||
*/
|
||||
|
||||
var events = new EventTarget();
|
||||
var roomDevices = [];
|
||||
var roomDeviceViews = [];
|
||||
Workspace = Backbone.Router.extend({
|
||||
routes:{
|
||||
"":"home",
|
||||
|
|
@ -13,17 +15,35 @@ Workspace = Backbone.Router.extend({
|
|||
|
||||
},
|
||||
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();
|
||||
|
||||
},
|
||||
show_room: function(id) {
|
||||
this.home();
|
||||
window.roomTabsId = id;
|
||||
function roomsLoadedHandlerTabSelect() {
|
||||
$('#room-tabs').tabs('select', id);
|
||||
events.removeListener("roomsLoaded", roomsLoadedHandlerTabSelect)
|
||||
}
|
||||
events.addListener("roomsLoaded", roomsLoadedHandlerTabSelect);
|
||||
|
||||
}
|
||||
});
|
||||
$(document).ready(function() {
|
||||
|
||||
window.rooms = new Rooms();
|
||||
window.roomsView = new RoomsView({collection: rooms});
|
||||
window.devices = new Devices();
|
||||
window.devicesView = new DevicesView({collection: devices});
|
||||
|
||||
window.App = new Workspace();
|
||||
Backbone.history.start()
|
||||
|
|
|
|||
|
|
@ -4,4 +4,9 @@
|
|||
model: Room,
|
||||
url: '/resources/json/rooms.json'
|
||||
});
|
||||
window.Device = Backbone.Model.extend({});
|
||||
|
||||
window.RoomDevices = Backbone.Collection.extend({
|
||||
model: Device
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -3,12 +3,54 @@ window.RoomsView = Backbone.View.extend({
|
|||
this.collection.bind('reset', this.render, this);
|
||||
},
|
||||
render: function() {
|
||||
$('#room-tabs').tabs('destroy');
|
||||
this.template = Handlebars.compile($("#room-tabs-template").html());
|
||||
var rooms = {'rooms': this.collection.toJSON()};
|
||||
$('#room-tabs').html(this.template(rooms)).tabs();
|
||||
if(typeof(window.roomTabsId) != "undefined") {
|
||||
$('#room-tabs').tabs('select', window.roomTabsId);
|
||||
}
|
||||
$('#room-tabs').html(this.template(rooms)).tabs({
|
||||
select: function(event, ui) {
|
||||
//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;
|
||||
}
|
||||
});
|
||||
window.DevicesView = Backbone.View.extend({
|
||||
initialize: function() {
|
||||
this.collection.bind('reset', this.render, this);
|
||||
},
|
||||
render: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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