Menu
▾
▴
[Openautomation-svn] SF.net SVN: openautomation:[695] CometVisu/trunk/visu
|
From: <j-...@us...> - 2012-02-11 19:40:28
|
Revision: 695
http://openautomation.svn.sourceforge.net/openautomation/?rev=695&view=rev
Author: j-n-k
Date: 2012-02-11 19:40:21 +0000 (Sat, 11 Feb 2012)
Log Message:
-----------
Modified colspan (see discussion in KNX-UF):
- a column has a width of 8.33333%
- all widgetcontainer have a colspanX-class, where X is the number of columns
- if no colspan-attribute is set for the widget, colspan0 is uses
- colspan-classes are defined in design/textglobal.css
- each design defines a default widget width colspan0
- pure, discreet, sicreet_sand, alaska: width: 49.99998%
- alaska_slim, discreet_slim: 33.33332%
- pitchblack: 8.33333%
Modified Paths:
--------------
CometVisu/trunk/visu/designs/alaska/basic.css
CometVisu/trunk/visu/designs/alaska_slim/basic.css
CometVisu/trunk/visu/designs/discreet/basic.css
CometVisu/trunk/visu/designs/discreet_sand/basic.css
CometVisu/trunk/visu/designs/discreet_slim/basic.css
CometVisu/trunk/visu/designs/pitchblack/basic.css
CometVisu/trunk/visu/designs/pure/basic.css
CometVisu/trunk/visu/designs/structure_custom.js
CometVisu/trunk/visu/designs/structure_pure.js
CometVisu/trunk/visu/lib/templateengine.js
Added Paths:
-----------
CometVisu/trunk/visu/designs/textglobal.css
Modified: CometVisu/trunk/visu/designs/alaska/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/alaska/basic.css 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/alaska/basic.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -87,8 +87,11 @@
text-decoration: none;
}
+.colspan0 { /* multiple of 8.33333% ! */
+ width: 49.9998%;
+}
+
.widget_container {
- width: 50%;
float: left;
}
Modified: CometVisu/trunk/visu/designs/alaska_slim/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/alaska_slim/basic.css 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/alaska_slim/basic.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -82,8 +82,11 @@
text-decoration: none;
}
+.colspan0 { /* multiple of 8.33333% ! */
+ width: 33.33332%;
+}
+
.widget_container {
- width: 33%;
float: left;
}
Modified: CometVisu/trunk/visu/designs/discreet/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/discreet/basic.css 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/discreet/basic.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -81,9 +81,12 @@
vertical-align: middle;
}
+.colspan0 { /* multiple of 8.33333% ! */
+ width: 49.9998%;
+}
+
.widget_container {
- width: 50%;
- float: left;
+ float: left;
}
.widget_container .widget_container {
Modified: CometVisu/trunk/visu/designs/discreet_sand/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/discreet_sand/basic.css 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/discreet_sand/basic.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -74,8 +74,11 @@
vertical-align: middle;
}
+.colspan0 { /* multiple of 8.33333% ! */
+ width: 49.9998%;
+}
+
.widget_container {
- width: 50%;
float: left;
}
Modified: CometVisu/trunk/visu/designs/discreet_slim/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/discreet_slim/basic.css 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/discreet_slim/basic.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -74,8 +74,11 @@
vertical-align: middle;
}
+.colspan0 { /* multiple of 8.33333% ! */
+ width: 33.33332%;
+}
+
.widget_container {
- width: 33%;
float: left;
}
Modified: CometVisu/trunk/visu/designs/pitchblack/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/pitchblack/basic.css 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/pitchblack/basic.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -241,10 +241,13 @@
vertical-align: middle;
}
-.widget_container {
+.colspan0 { /* multiple of 8.33333% ! */
width: 8.33333%;
}
+.widget_container {
+}
+
.widget_container .widget_container, .link > div, .link a , .switchPressed,
.switchUnpressed, * html>body .clearfix, .info > div, .actor .value , .text>div{
width: 100%;
Modified: CometVisu/trunk/visu/designs/pure/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/pure/basic.css 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/pure/basic.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -62,9 +62,12 @@
vertical-align: middle;
}
+.colspan0 { /* multiple of 8.33333% ! */
+ width: 49.9998%;
+}
+
.widget_container {
- width: 50%;
- float: left;
+ float: left;
}
.widget_container .widget_container {
Modified: CometVisu/trunk/visu/designs/structure_custom.js
===================================================================
--- CometVisu/trunk/visu/designs/structure_custom.js 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/structure_custom.js 2012-02-11 19:40:21 UTC (rev 695)
@@ -42,18 +42,17 @@
*/
VisuDesign_Custom.prototype.addCreator("designtoggle", {
create: function( page, path ) {
-
- var ret_val = $('<div class="widget clearfix" />');
- ret_val.addClass( 'switch' );
- var label = '<div class="label">' + page.textContent + '</div>';
+ var $p = $(page);
+ var ret_val = $('<div class="widget clearfix switch" />');
+ ret_val.setWidgetLayout($p).makeWidgetLabel($p);
var actor = '<div class="actor switchUnpressed">';
- var value = $('link[href*="designs"]').attr('href').split('/')[1];
+ var value = $('link[href*="basic.css"]').attr('href').split('/')[1];
actor += '<div class="value">' + value + '</div>';
actor += '</div>';
- ret_val.append(label).append($(actor)
+ ret_val.append($(actor)
.data({
- 'mapping' : $(page).attr('mapping'),
- 'styling' : $(page).attr('styling'),
+ 'mapping' : $p.attr('mapping'),
+ 'styling' : $p.attr('styling'),
'value' : value,
'type' : 'toggle'
})
Modified: CometVisu/trunk/visu/designs/structure_pure.js
===================================================================
--- CometVisu/trunk/visu/designs/structure_pure.js 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/designs/structure_pure.js 2012-02-11 19:40:21 UTC (rev 695)
@@ -55,7 +55,7 @@
*/
$.fn.setWidgetLayout = function(page) {
- this.data('colspanClass', colspanClass(page.attr('colspan') || 1));
+ this.data('colspanClass', 'colspan'+(page.attr('colspan') || '0'));
if (page.attr('rowspan')) {
this.data('rowspanClass', rowspanClass(page.attr('rowspan') || 1));
this.addClass(innerRowspanClass(page.attr('rowspan') || 1));
@@ -796,133 +796,6 @@
content: false
});
- this.addCreator("imagetrigger", {
- create: function( page, path ) {
- var $p = $(page);
- var ret_val = $('<div class="widget clearfix image" />');
- ret_val.setWidgetLayout($p);
- ret_val.addClass ('imagetrigger');
- var value = $p.attr('value') ? $p.attr('value') : 0;
- var labelElement = $p.find('label')[0];
- ret_val.append( labelElement ? '<div class="label">' + labelElement.textContent + '</div>' : '' );
- var address = {};
- $p.find('address').each( function(){
- var src = this.textContent;
- ga_list.push( src )
- address[ '_' + src ] = [
- this.getAttribute('transform'), {
- 'readonly' : this.getAttribute('readonly'),
- 'writeonly' : this.getAttribute('writeonly')
- }
- ];
- //[ transform, readonly=='true', writeonly=='true' ];
- });
- var style = ' style=" ';
- style += $p.attr('width' ) ? 'width:' + $p.attr('width' ) + ';' : 'width: 100%;';
- style += $p.attr('height' ) ? 'height:' + $p.attr('height' ) + ';"' : '"';
-
- var actor = '<div class="actor">';
- /*
- if ( $p.attr('type')=='bitmask' )
- for (var i = 0; i <= 7; i++)
- actor += '<img src="" ' + style + ' class="image" />';
- else
- */
- if ( $p.attr('type')=='show' )
- actor += '<img src="' + $p.attr('src') + '.' + $p.attr('suffix') + '" ' + style + ' />';
- else
- actor += '<img src="" ' + style + ' />';
- actor += '</div>';
- /*
- var map = $p.attr('mapping');
- if( mappings[map] && mappings[map][value] )
- actor += '<div class="value">' + mappings[map][value] + '</div>';
- else
- actor += '<div class="value">' + value + '</div>'; //no value if no mapping
- */
- actor += '</div>';
- var refresh = $p.attr('refresh') ? $p.attr('refresh')*1000 : 0;
- var $actor = $(actor).data( {
- 'address': address,
- 'refresh': refresh,
- 'src': $p.attr('src'),
- 'suffix': $p.attr('suffix'),
- 'type': $p.attr('type'),
- 'mapping': map,
- 'sendValue': $p.attr('sendValue') || ""
- } )
- .each(setupRefreshAction) // abuse "each" to call in context... refresh is broken with select right now
- .bind( 'click', this.action );
- for( var addr in address ) {
- $actor.bind( addr, this.update );
- }
- ret_val.append( $actor );
- return ret_val;
- },
- update: function(e,d) {
- var data = $(this).data();
- if ( data.address[e.type][1].writeonly == "true")
- return; // skip writeonly FIXME: writeonly shouldnt bind to update at all
- var val = transformDecode(data.address[e.type][0], d);
- if (data.type == "show")
- if (val == 0)
- $(this).children().hide();
- else
- $(this).children().attr("src", data.src + '.' + data.suffix ).show();
- else if (data.type == "select")
- if (val == 0)
- $(this).children().hide();
- else
- $(this).children().attr("src", data.src + val + '.' + data.suffix ).show();
- /*
- else if (data.type == "bitmask")
- if (val == 0) { //hide all
- $(this).children().remove(); //.hide()
- } else {
- for (var i = 0; i <= 7; i++) {
- var mask = Math.pow(2,i);
- if ((mask & val) == mask) { //show
- $(this).children().append('<img src="' + data.src + mask + '.' + data.suffix + '" />');
- }
- }
- }
- */
-
- //FIXME: add value if mapping exists
- //FIXME: get image name from mapping
- //FIXME: add bitmask for multiple images
- //FIXME: add SVG-magics
- },
- action: function() {
- var data = $(this).data();
- sendValue = data.sendValue;
- for( var addr in data.address ) {
- if( data.address[addr][1].readonly == "true" )
- continue; // skip read only
- if( data.sendValue == "" )
- continue; // skip empty
- visu.write( addr.substr(1), transformEncode( data.address[addr][0], sendValue ) );
- }
- },
- attributes: {
- src: { type: 'uri' , required: true },
- width: { type: 'string' , required: false },
- height: { type: 'string' , required: false },
- refresh: { type: 'numeric', required: false },
- colspan: { type: 'numeric', required: false },
- rowspan: { type: 'numeric', required: false },
- sendValue: { type: 'numeric', required: false },
- type: { type: 'list' , required: true, list: {'show': 'show', 'select': 'select' /* , 'bitmask': 'bitmask' */ } },
- mapping: { type: 'mapping', required: false },
- suffix: { type: 'list' , required: false, list: {'png': '.png', 'jpg': '.jpg', 'gif': '.gif', 'svg': '.svg', 'bmp': '.bmp'} }
- },
- elements: {
- label: { type: 'string', required: false, multi: false },
- address: { type: 'address', required: true, multi: true }
- },
- content: false
- });
-
this.addCreator('video', {
create: function( page, path ) {
var $p = $(page);
Added: CometVisu/trunk/visu/designs/textglobal.css
===================================================================
--- CometVisu/trunk/visu/designs/textglobal.css (rev 0)
+++ CometVisu/trunk/visu/designs/textglobal.css 2012-02-11 19:40:21 UTC (rev 695)
@@ -0,0 +1,60 @@
+/*
+ * global CSS declarations for all designs
+ */
+
+/*
+ * colspans, each design needs to define a colspan0
+ * class, this class is the default widget size
+ */
+
+.colspan1 {
+ width: 8.33333%;
+}
+
+.colspan2 {
+ width: 16.66666%;
+}
+
+.colspan3 {
+ width: 24.99999%;
+}
+
+.colspan4 {
+ width: 33.33332%;
+}
+
+.colspan5 {
+ width: 41.66665%;
+}
+
+.colspan6 {
+ width: 49.99998%;
+}
+
+.colspan7 {
+ width: 58.33331%;
+}
+
+.colspan8 {
+ width: 66.66664%;
+}
+
+.colspan9 {
+ width: 74.99997%;
+}
+
+.colspan10 {
+ width: 83.33330%;
+}
+
+.colspan11 {
+ width: 91.66663%;
+}
+
+.colspan12 {
+ width: 99.99996%;
+}
+
+
+
+
Property changes on: CometVisu/trunk/visu/designs/textglobal.css
___________________________________________________________________
Added: svn:executable
+ *
Modified: CometVisu/trunk/visu/lib/templateengine.js
===================================================================
--- CometVisu/trunk/visu/lib/templateengine.js 2012-02-11 13:18:38 UTC (rev 694)
+++ CometVisu/trunk/visu/lib/templateengine.js 2012-02-11 19:40:21 UTC (rev 695)
@@ -153,7 +153,7 @@
// append css style
$('head').append('<style>.rowspan' + rowspan + ' { height: ' + rowspan*Math.round(singleHeight) + 'px; overflow:hidden;} </style>').data(className, 1);
- }
+ }
return className;
}
@@ -175,48 +175,13 @@
$('#calcinnerrowspan').remove();
// append css style
- $('head').append('<style>.innerrowspan' + rowspan + ' { height: ' + innerHeight + 'px;} </style>').data(className, 1);
+ $('head').append('<style>.innerrowspan' + rowspan + ' { height: ' + innerHeight + 'px;} </style>').data(className, 1);
}
return className;
}
-function colspanClass(colspan) {
- var className = 'colspan'+ colspan;
-
- if ( !$('head').data(className) ) {
- var singleWidth=0;
-
- // loop over all stylesheets and classes and find .widget_container
- $.each(document.styleSheets, function(idx, sheet) {
- if (sheet.href ? (sheet.href.search(/basic.css/) > 0) : false) {
- $.each(sheet.cssRules, function(idx, cssclass) {
- if (cssclass.selectorText=='.widget_container') {
- singleWidth = parseFloat((cssclass.style.width).match(/[0-9.]*/)[0]);
- return;
- }
- });
- }
- if (singleWidth > 0) { // match already found
- return;
- }
- });
-
- var totalWidth = singleWidth * colspan;
-
- if (totalWidth>100) { // check if totalWidth is <=100
- alert('colspan="'+colspan+'" leads to width:' + totalWidth +
- '% which is >100% and not allowed. Corrected to 100%');
- totalWidth=100;
- }
-
- $('head').append('<style>.colspan' + colspan + ' { width: ' +
- totalWidth + '%; overflow:hidden;} </style>').data(className, 1);
- }
-
- return className;
-}
function parseXML(xml) {
// erst mal den Cache für AJAX-Requests wieder aktivieren
$.ajaxSetup({cache: true});
@@ -243,7 +208,7 @@
selectDesign();
}
-
+ $( 'head' ).append( '<link rel="stylesheet" type="text/css" href="designs/textglobal.css" />' );
$( 'head' ).append( '<link rel="stylesheet" type="text/css" href="designs/' + clientDesign + '/basic.css" />' );
$( 'head' ).append( '<link rel="stylesheet" type="text/css" href="designs/' + clientDesign + '/mobile.css" media="only screen and (max-device-width: 480px)" />' );
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
