diverse fortschritte, page für crashtest

This commit is contained in:
Hendrik Fellerhoff 2012-05-10 17:03:33 +02:00
parent 1921417667
commit 8248804ac7
8 changed files with 312 additions and 45 deletions

View File

@ -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="container">
<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>
@ -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>

View File

@ -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>

View File

@ -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;
}
}
}
}
};

View File

@ -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,11 +15,27 @@ 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() {

View File

@ -4,4 +4,8 @@
model: Room,
url: '/resources/json/rooms.json'
});
window.Device = Backbone.Model.extend({});
window.RoomDevices = Backbone.Collection.extend({
model: Device
});
})(jQuery);

View File

@ -3,12 +3,46 @@ 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;
}
});

View File

@ -0,0 +1,11 @@
[
{
"type":"Buzzer",
"deviceId":0,
"deviceName":"Buzzer",
"picture":null,
"options": {
"state":0
}
}
]

View File

@ -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
}
},
]