VisuDesign_Custom.prototype.addCreator('audio', {
create: function( element, path, flavour, type ) {
var $e = $(element);
var layout = $e.children('layout')[0];
var style = layout ? 'style="' + extractLayout( layout, type ) + '"' : '';
var ret_val = $('<div class="widget clearfix video" ' + style + '/>');
ret_val.setWidgetLayout($e);
if( $e.attr('flavour') ) flavour = $e.attr('flavour');// sub design choice
if( flavour ) ret_val.addClass( 'flavour_' + flavour );
ret_val.append( extractLabel( $e.find('label')[0] ) );
var autoplay = ($e.attr('autoplay') && $e.attr('autoplay')=='true') ? ' autoplay="autoplay"' : '';
var style = '';
if( $e.attr('width' ) ) style += 'width:' + $e.attr('width' ) + ';';
if( $e.attr('height') ) style += 'height:' + $e.attr('height') + ';';
if( style != '' ) style = 'style="' + style + '"';
var address = makeAddressList($e);
var actor = '<div class="actor"><audio src="' +$e.attr('src') + '" ' + style + autoplay + ' controls="controls" /></div>';
var $actor = $(actor).data( {
'address' : address,
/*'mapping' : $e.attr('mapping'),
'styling' : $e.attr('styling'),
'on_value' : $e.attr('on_value' ) || 1,
'off_value' : $e.attr('off_value') || 0,
'align' : $e.attr('align'),*/
'type' : 'audio',
'firstrun' : true
} );
for( var addr in address )
{
if( address[addr][1] & 1 ) $actor.bind( addr, this.update ); // only when read flag is set
}
ret_val.append( $(actor).data( {} ) );
return ret_val;
},
update: function(e,d) {
var element = $(this);
element.load()
var value = defaultUpdate( e, d, element );
// if not the first run
if (!element.data( 'firstrun' )){
if (value == true) {
alert('play');
} else {
alert('pause');
}
} else {
element.data( 'firstrun', false );
}
/*
var off = map( element.data( 'off_value' ), element.data('mapping') );
element.removeClass( value == off ? 'switchPressed' : 'switchUnpressed' );
element.addClass( value == off ? 'switchUnpressed' : 'switchPressed' );
*/
}
});
<page name="Test" visible="false"> <switch mapping="OnOff" styling="GreyYellow"> <label><icon name="audio_play" />Play</label> <address transform="DPT:1.001" mode="readwrite" variant="">11/2/6</address> </switch> <audio src="media\test.mp3"> <address transform="DPT:1.001" mode="read" variant="">11/2/6</address> </audio> </page>
/* audio.js (c) 2014 by Markus Damman
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation; either version 3 of the License, or (at your option)
* any later version.
*
* This program 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 General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
*/
basicdesign.addCreator('audio', {
create: function( element, path, flavour, type ) {
var $e = $(element);
// create the main structure
var ret_val = basicdesign.createDefaultWidget( 'audio', $e, path, flavour, type, this.update);
// and fill in widget specific data
ret_val.data( {
'src' : $e.attr('src'),
'id' : $e.attr('id'),
'width' : $e.attr('with'),
'height' : $e.attr('height'),
'autoplay': $e.attr('autoplay'),
'loop' : $e.attr('loop'),
'on_value' : $e.attr('on_value' ) || 1,
'off_value' : $e.attr('off_value') || 0
} );
var data = ret_val.data();
// create the actor
var style = '';
if( data.width ) style += 'width:' + data.width + ';';
if( data.height ) style += 'height:' + data.height + ';';
if( style != '' ) style = 'style="' + style + '"';
var autoplay = (data.autoplay == 'true') ? ' autoplay ' : '';
var loop = (data.loop == 'true') ? ' loop ' : '';
var $actor = $('<div class="actor"><audio id="' + $e.attr('id') + '" ' + autoplay + loop + ' controls> <source src="' +$e.attr('src') + '" > </audio> </div>');
ret_val.append( $actor );
// initially setting a value
basicdesign.defaultUpdate(undefined, undefined, ret_val, true);
return ret_val;
},
update: function(e,d) {
var element = $(this);
var actor = element.find('.actor');
var value = basicdesign.defaultUpdate( e, d, element, true );
var on = templateEngine.map( element.data( 'on_value' ), element.data('mapping') );
if (value == on){
var audioWidget = document.getElementById(element.data('id'));
if (audioWidget.paused == true)
audioWidget.play();
};
}
});
<xsd:element name="audio" type="audio" />
<xsd:complexType name="audio">
<xsd:sequence>
<xsd:element name="layout" type="layout" minOccurs="0" maxOccurs="1" />
<xsd:element name="label" type="label" maxOccurs="1" />
<xsd:element name="address" type="address" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
<xsd:attribute name="src" type="uri" use="required" />
<xsd:attribute name="id" type="xsd:string" use="required" />
<xsd:attribute name="on_value" type="xsd:string" use="optional" />
<xsd:attribute name="off_value" type="xsd:string" use="optional" />
<xsd:attribute name="width" type="dimension" />
<xsd:attribute name="height" type="dimension" />
<xsd:attribute name="volume" type="xsd:string" />
<xsd:attribute name="autoplay" type="xsd:string" />
<xsd:attribute name="loop" type="xsd:string" />
<xsd:attribute ref="flavour" use="optional" />
</xsd:complexType>
ScriptsToInclude.push( "structure/pure/audio.js" );
/* audio.js (c) 2014 by Markus Damman
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation; either version 3 of the License, or (at your option)
* any later version.
*
* This program 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 General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
*/
basicdesign.addCreator('audio', {
create: function( element, path, flavour, type ) {
var $e = $(element);
// create the main structure
var ret_val = basicdesign.createDefaultWidget( 'audio', $e, path, flavour, type, this.update);
// and fill in widget specific data
ret_val.data( {
'src' : $e.attr('src'),
'id' : $e.attr('id'),
'width' : $e.attr('with'),
'height' : $e.attr('height'),
'autoplay': $e.attr('autoplay'),
'loop' : $e.attr('loop'),
'threshold_value' : $e.attr('threshold_value' ) || 1
} );
var data = ret_val.data();
// create the actor
var style = '';
if( data.width ) style += 'width:' + data.width + ';';
if( data.height ) style += 'height:' + data.height + ';';
if( style != '' ) style = 'style="' + style + '"';
var autoplay = (data.autoplay == 'true') ? ' autoplay ' : '';
var loop = (data.loop == 'true') ? ' loop ' : '';
var $actor = $('<div class="actor"><audio id="' + $e.attr('id') + '" ' + autoplay + loop + ' controls> <source src="' +$e.attr('src') + '" > </audio> </div>');
ret_val.append( $actor );
// initially setting a value
basicdesign.defaultUpdate(undefined, undefined, ret_val, true);
return ret_val;
},
update: function(e,d) {
var element = $(this);
var actor = element.find('.actor');
var value = basicdesign.defaultUpdate( e, d, element, true );
var on = templateEngine.map( element.data( 'threshold_value' ), element.data('mapping') );
if (value >= on){
var audioWidget = document.getElementById(element.data('id'));
if (audioWidget.paused == true)
audioWidget.play();
};
}
});
<xsd:complexType name="audio">
<xsd:sequence>
<xsd:element name="layout" type="layout" minOccurs="0" maxOccurs="1" />
<xsd:element name="label" type="label" maxOccurs="1" />
<xsd:element name="address" type="address" minOccurs="0" maxOccurs="unbounded"/>
</xsd:sequence>
<xsd:attribute name="src" type="uri" use="required" />
<xsd:attribute name="id" type="xsd:string" use="required" />
<xsd:attribute name="threshold_value" type="xsd:string" use="optional" />
<xsd:attribute name="width" type="dimension" />
<xsd:attribute name="height" type="dimension" />
<xsd:attribute name="volume" type="xsd:string" />
<xsd:attribute name="autoplay" type="xsd:string" />
<xsd:attribute name="loop" type="xsd:string" />
<xsd:attribute ref="flavour" use="optional" />
</xsd:complexType>
/* audio.js (c) 2014 by Markus Damman
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation; either version 3 of the License, or (at your option)
* any later version.
*
* This program 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 General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
*/
basicdesign.addCreator('audio', {
create: function( element, path, flavour, type ) {
var $e = $(element);
// create the main structure
var ret_val = basicdesign.createDefaultWidget( 'audio', $e, path, flavour, type, this.update);
// and fill in widget specific data
ret_val.data( {
'src' : $e.attr('src'),
'id' : $e.attr('id'),
'width' : $e.attr('width'),
'height' : $e.attr('height'),
'autoplay': $e.attr('autoplay'),
'loop' : $e.attr('loop'),
'threshold_value' : $e.attr('threshold_value' ) || 1
} );
var data = ret_val.data();
// create the actor
var style = '';
if( data.width ) style += 'width:' + data.width + ';';
if( data.height ) style += 'height:' + data.height + ';';
if( style != '' ) style = 'style="' + style + '"';
var autoplay = (data.autoplay == 'true') ? ' autoplay ' : '';
var loop = (data.loop == 'true') ? ' loop ' : '';
var $actor = $('<div class="actor"><audio id="' + $e.attr('id') + '" ' + autoplay + loop + style + ' controls> <source src="' +$e.attr('src') + '" > </audio> </div>');
ret_val.append( $actor );
// initially setting a value
basicdesign.defaultUpdate(undefined, undefined, ret_val, true);
return ret_val;
},
update: function(e,d) {
var element = $(this);
var actor = element.find('.actor');
var value = basicdesign.defaultUpdate( e, d, element, true );
var on = templateEngine.map( element.data( 'threshold_value' ), element.data('mapping') );
if (value >= on){
var audioWidget = document.getElementById(element.data('id'));
if (audioWidget.paused == true)
audioWidget.play();
};
}
});
)
Kommentar