iobroker.chromecast
Version:
ioBroker chromecast Adapter
131 lines (108 loc) • 15.1 kB
HTML
<!--
ioBroker.chromecast Widget-Set
version: "1.3.4"
Copyright 10.2015-2016 Vegetto<iobroker@angelnu.com>
-->
<!-- here you can include so many css as you want -->
<link rel="stylesheet" href="widgets/chromecast/css/style.css" />
<!-- here you can include so many js-files as you want -->
<script type="text/javascript" src="widgets/chromecast/js/chromecast.js"></script>
<!-- the full description of format in data-vis-attrs can be found here:
https://github.com/ioBroker/ioBroker.vis/blob/master/www/js/visEditInspect.js#L39
----------------------------------------------------------
Mandatory XML attributes:
id="tplChromecastWIDGETNAME"
type="text/ejs"
class="vis-tpl"
"type" and "class" are always the same. "id" is unique and must start with "tplSETNAME" and ends with widget name. Use camel-case for it.
----------------------------------------------------------
data-vis-attrs - divided with semicolon the list of attributes, like attr1/id;attr2/color
Full format of one attribute is: attr_name(start-end)[default_value]/type,idFilter/onChangeFunc
attr_name - the name of the attribute, e.g. "myID"
start-end - creates automatically attributes from attr_namestart to attr_nameend, like "myID(1-3)" creates myID1, myID2, myID3
default_value - by creation of widget this attribute will be filled with this value, e.g. "myID[#001122]/color"
type - some predefined types have edit helpers, else it will be shown as text field
Type format:
id - Object ID Dialog
checkbox
image - image
number,min,max,step - non-float number. min,max,step are optional
color - color picker
views - Name of the view
effect - jquery UI show/hide effects
eff_opt - additional option to effect slide (up, down, left, right)
fontName - Font name
slider,min,max,step - Default step is ((max - min) / 100)
select,value1,value2,... - dropdown select
nselect,value1,value2,... - same as select, but without translation of items
style,fileFilter,nameFilter,attrFilter
custom,functionName,options,... - custom editor - functionName is starting from vis.binds.[widgetset.funct]. E.g. custom/timeAndWeather.editWeather,short
group.name - define new or old group. All following attributes belongs to new group till new group.xyz
group.name/byindex - like group, but all following attributes will be grouped by ID. Like group.windows/byindex;slide(1-4)/id;slide_type(1-4)/select,open,closed Following groups will be created Windows1(slide1,slide_type1), Windows2(slide2,slide_type2), Windows3(slide3,slide_type3), Windows4(slide4,slide_type4)
text - dialog box with text editor
html - dialog box with html editor
If type is "id", you can define filter for "Select ID Dialog", like "myID/id,level.temperature".
Additionally you can define callback(onChangeFunc), which will be called if this attribute was changed by user for different purposes: validate entry, fill other attributes, ...
You can define additional data-vis-attrs line: data-vis-attrs0, data-vis-attrs1. Anyway data-vis-attrs must be there. You may not skip numbers.
E.g. in "data-vis-attrs="A;" data-vis-attrs1="B" attribute B will be not parsed.
--------------------------------------------------------
data-vis-type
Help information for user. Used for search.
You can define more than one type divided by comma.
There are following common types, but you can use your own specific types:
ctrl - widget that can write some Object IDs
val - widget that shows some information from Object IDs
static - widget do not read information from Object IDs or URL
button - button widget
dimmer - dimmer widget
weather - weather widget
...
--------------------------------------------------------
data-vis-set
Name of the widget set. Must be equal to the name of this HTML file
--------------------------------------------------------
data-vis-prev
Html code used as preview of this widget. If widget is complex you can just use image as preview:
data-vis-prev='<img src="widgets/hqwidgets/img/prev/Prev_tplChromecastShowInstance.png"></img>'
Of course the image must exist.
--------------------------------------------------------
data-vis-name
Readable name of widget shown in vis editor.
--------------------------------------------------------
data-vis-beta="true"
Shows "BETA" symbol in vis editor by preview
--------------------------------------------------------
data-vis-update-style="true"
Call redraw of widget if some of the CSS styles in editor for this widget was changed
You can read about Magic tags here: http://canjs.com/guides/EJS.html
Following magic are exist:
<% %> - execute javascript
<%== %> - place unescaped result to HTML document
<%== %> - place escaped result to HTML document
You can do "if" conditions and "for" cycles.
-->
<script id="tplChromecastDevice"
type="text/ejs"
class="vis-tpl"
data-vis-prev='<div id="prev_tplChromecastDevice" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="overflow: visible; width: 340px; height: 210px; left: 17px; top: 13px; position: absolute;" > <select class="chromecastDeviceSelector"><option value="1" class="chromecastDeviceSelectorValue">audio-all</option><option value="2" class="chromecastDeviceSelectorValue">audio-bedroom</option><option value="3" class="chromecastDeviceSelectorValue">audio-guestroom</option><option value="4" class="chromecastDeviceSelectorValue">audio-kids</option><option value="5" class="chromecastDeviceSelectorValue">audio-kitchen</option><option value="6" class="chromecastDeviceSelectorValue">audio-livingroom</option><option value="7" class="chromecastDeviceSelectorValue">audio-playroom</option><option value="8" class="chromecastDeviceSelectorValue">audio-workroom</option><option value="9" class="chromecastDeviceSelectorValue">video-kitchen</option></select><div class="chromecastDevice_1 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName"></span></p><p><span class="chromecastPlayerDescription"></span></p><p>Status: <span class="chromecastPlayerState">STOP</span></p><p>Playing URL: <span class="chromecastPlayerURL">Unknown</span></p><p>Title: <span class="chromecastMetadataTitle">Unknown</span></p></div><div class="chromecastDevice_2 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName">Default Media Receiver</span></p><p><span class="chromecastPlayerDescription">Now Casting: Anime - Decisive Battle</span></p><p>Status: <span class="chromecastPlayerState">STOP</span></p><p>Playing URL: <span class="chromecastPlayerURL">Unknown</span></p><p>Title: <span class="chromecastMetadataTitle">Unknown</span></p></div><div class="chromecastDevice_3 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName">TuneIn Pro</span></p><p><span class="chromecastPlayerDescription">Ready to play</span></p><p>Status: <span class="chromecastPlayerState">STOP</span></p><p>Playing URL: <span class="chromecastPlayerURL">Unknown</span></p><p>Title: <span class="chromecastMetadataTitle">Unknown</span></p></div><div class="chromecastDevice_4 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName">Default Media Receiver</span></p><p><span class="chromecastPlayerDescription">Now Casting: http://edge.live.mp3.mdn.newmedia.nacamar.net/ps-dieneue_rock/livestream_hi.mp3</span></p><p>Status: <span class="chromecastPlayerState">STOP</span></p><p>Playing URL: <span class="chromecastPlayerURL">Unknown</span></p><p>Title: <span class="chromecastMetadataTitle">THE ALL-AMERICAN REJECTS - GIVES YOU HELL</span></p></div><div class="chromecastDevice_5 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName">TuneIn Pro</span></p><p><span class="chromecastPlayerDescription">Ready to play</span></p><p>Status: <span class="chromecastPlayerState">STOP</span></p><p>Playing URL: <span class="chromecastPlayerURL">Unknown</span></p><p>Title: <span class="chromecastMetadataTitle">Unknown</span></p></div><div class="chromecastDevice_6 chromecastDevice_div" style="display: block;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName">Default Media Receiver</span></p><p><span class="chromecastPlayerDescription">Now Casting: FOOLS GARDEN - LEMON TREE</span></p><p>Status: <span class="chromecastPlayerState">PLAYING</span></p><p>Playing URL: <span class="chromecastPlayerURL">http://edge.live.mp3.mdn.newmedia.nacamar.net/ps-dieneue_rock/livestream_hi.mp3</span></p><p>Title: <span class="chromecastMetadataTitle">THE ALL-AMERICAN REJECTS - GIVES YOU HELL</span></p></div><div class="chromecastDevice_7 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName">Default Media Receiver</span></p><p><span class="chromecastPlayerDescription">Now Casting: MANOWAR - KINGDOM COME</span></p><p>Status: <span class="chromecastPlayerState">PLAYING</span></p><p>Playing URL: <span class="chromecastPlayerURL">http://edge.live.mp3.mdn.newmedia.nacamar.net/ps-dieneue_rock/livestream_hi.mp3</span></p><p>Title: <span class="chromecastMetadataTitle">THE ALL-AMERICAN REJECTS - GIVES YOU HELL</span></p></div><div class="chromecastDevice_8 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName"></span></p><p><span class="chromecastPlayerDescription"></span></p><p>Status: <span class="chromecastPlayerState">STOP</span></p><p>Playing URL: <span class="chromecastPlayerURL">Unknown</span></p><p>Title: <span class="chromecastMetadataTitle">Unknown</span></p></div><div class="chromecastDevice_9 chromecastDevice_div" style="display: none;"><p><input class="chromecastConnected" type="checkbox">Connected</p><p><input class="chromecastVolume" type="range" min="0" max="100">Volume</p><p><input class="chromecastMuted" type="checkbox">Muted</p><p><input class="chromecastPlaying" type="checkbox">Playing</p><p><input class="chromecastPaused" type="checkbox">Paused</p><p>url2play: </p><form><input class="chromecastUrl2play" type="url"></form><p></p><p><span class="chromecastDisplayName">Backdrop</span></p><p><span class="chromecastPlayerDescription"></span></p><p>Status: <span class="chromecastPlayerState">STOP</span></p><p>Playing URL: <span class="chromecastPlayerURL">Unknown</span></p><p>Title: <span class="chromecastMetadataTitle">Unknown</span></p></div></div></div>'
data-vis-attrs="nDevs[1]/number,1; selDev[1]/number,1,nDevs;"
data-vis-attrs0="oid_dev_(1-nDevs)/id,device/oid_changed;"
data-vis-attrs1="group.device/byindex;"
data-vis-attrs2="oid_connected_(1-nDevs)/id/oid_changed;"
data-vis-attrs3="oid_volume_(1-nDevs)/id/oid_changed;"
data-vis-attrs4="oid_muted_(1-nDevs)/id/oid_changed;"
data-vis-attrs5="oid_playing_(1-nDevs)/id/oid_changed;"
data-vis-attrs6="oid_paused_(1-nDevs)/id/oid_changed;"
data-vis-attrs7="oid_url2play_(1-nDevs)/id/oid_changed;"
data-vis-attrs8="oid_playerState_(1-nDevs)/id/oid_changed;"
data-vis-attrs9="oid_title_(1-nDevs)/id/oid_changed;"
data-vis-attrs10="oid_url_(1-nDevs)/id/oid_changed;"
data-vis-attrs11="oid_displayName_(1-nDevs)/id/oid_changed;"
data-vis-attrs11="oid_statusText_(1-nDevs)/id/oid_changed;"
data-vis-set="chromecast"
data-vis-type="ctr,val,button"
data-vis-name="Chomecast dev">
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 230px; height: 210px" id="<%= this.data.attr('wid') %>" >
<% vis.binds.chromecast.ChromecastDevice.init(this.data.wid, this.view, this.data, this.style); %>
</div>
</script>