Initial commit
This commit is contained in:
138
widgets/template.html
Normal file
138
widgets/template.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
ioBroker.template Widget-Set
|
||||
|
||||
version: "0.5.0"
|
||||
|
||||
Copyright 10.2015-2016 @@Author@@<@@email@@>
|
||||
-->
|
||||
<!-- here you can include so many css as you want -->
|
||||
<link rel="stylesheet" href="widgets/template/css/style.css" />
|
||||
<!-- here you can include so many js-files as you want -->
|
||||
<script type="text/javascript" src="widgets/template/js/template.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="tplTemplateWIDGETNAME"
|
||||
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 html editor
|
||||
html - dialog box with html editor
|
||||
|
||||
If type is "id", you can define filer 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_tplTemplateShowInstance.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 tags are exist:
|
||||
<% %> - execute javascript
|
||||
<%= %> - place escaped result to HTML document
|
||||
<%== %> - place unescaped result to HTML document
|
||||
|
||||
You can do "if" conditions and "for" cycles.
|
||||
|
||||
-->
|
||||
<script id="tplTemplateShowInstance"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-prev='<div id="prev_tplMysetShowInstance" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="width: 280px; height: 159px;" > <div class="myset-class vis-widget-prev-body " style="padding:2px"> OID: hm-rpc.0.EEQ0006629.1.STATE<br> OID value: true<br> Color: <span style="color: rgb(128, 0, 0);">#800000</span><br> htmlText: <textarea readonly="" style="width:100%">asda</textarea></div>'
|
||||
data-vis-attrs="oid/id;myColor/color;htmlText/text;"
|
||||
data-vis-attrs0="group.extraTemplate;extraAttr"
|
||||
data-vis-set="template"
|
||||
data-vis-type="helper"
|
||||
data-vis-name="Show instance">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="width:230px; height:210px;" id="<%= this.data.attr('wid') %>" >
|
||||
<div class="template-class vis-widget-body <%== this.data.attr('class') %>" style="padding:2px" >
|
||||
OID: <%= this.data.attr('oid') %><br>
|
||||
OID value: <%== vis.states[this.data.attr('oid') + '.val'] %><br>
|
||||
Color: <span style="color: <%= this.data.attr('myColor') %>"><%= this.data.attr('myColor') %></span><br>
|
||||
extraAttr: <%== this.data.attr('extraAttr') %><br>
|
||||
Browser instance: <%= vis.instance %><br>
|
||||
htmlText: <textarea readonly style="width: calc(100% - 10px)"><%== this.data.attr('htmlText') %></textarea><br>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="tplTemplateHelper"
|
||||
type="text/ejs"
|
||||
class="vis-tpl"
|
||||
data-vis-prev='<div id="prev_tplTemplateHelper" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev " style="width: 280px; height: 159px;" > <div class="myset-class vis-widget-prev-body " style="padding:2px"> OID: hm-rpc.0.EEQ0006629.1.STATE<br> OID value: true<br> Color: <span style="color: rgb(128, 0, 0);">#800000</span><br> htmlText: <textarea readonly="" style="width:100%">asda</textarea></div>'
|
||||
data-vis-attrs="oid/id;myColor/color;htmlText/text;"
|
||||
data-vis-attrs0="group.extraTemplate;extraAttr"
|
||||
data-vis-set="template"
|
||||
data-vis-type="helper"
|
||||
data-vis-name="Helper">
|
||||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow:visible; width: 230px; height: 210px" id="<%= this.data.attr('wid') %>"><%
|
||||
vis.binds.template.createWidget(this.data.wid, this.view, this.data, this.style);
|
||||
%></div>
|
||||
</script>
|
||||
|
||||
|
||||
3
widgets/template/css/style.css
Normal file
3
widgets/template/css/style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.template-class {
|
||||
font-style: italic;
|
||||
}
|
||||
BIN
widgets/template/img/test.png
Normal file
BIN
widgets/template/img/test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
68
widgets/template/js/template.js
Normal file
68
widgets/template/js/template.js
Normal file
@@ -0,0 +1,68 @@
|
||||
/*
|
||||
ioBroker.template Widget-Set
|
||||
|
||||
version: "0.5.0"
|
||||
|
||||
Copyright 10.2015-2016 @@Author@@<@@email@@>
|
||||
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
// add translations for edit mode
|
||||
if (vis.editMode) {
|
||||
$.extend(true, systemDictionary, {
|
||||
"myColor": {"en": "myColor", "de": "mainColor", "ru": "Мой цвет"},
|
||||
"myColor_tooltip": {
|
||||
"en": "Description of\x0AmyColor",
|
||||
"de": "Beschreibung von\x0AmyColor",
|
||||
"ru": "Описание\x0AmyColor"
|
||||
},
|
||||
"htmlText": {"en": "htmlText", "de": "htmlText", "ru": "htmlText"},
|
||||
"group_extraMyset": {"en": "extraMyset", "de": "extraMyset", "ru": "extraMyset"},
|
||||
"extraAttr": {"en": "extraAttr", "de": "extraAttr", "ru": "extraAttr"}
|
||||
});
|
||||
}
|
||||
|
||||
// add translations for non-edit mode
|
||||
$.extend(true, systemDictionary, {
|
||||
"Instance": {"en": "Instance", "de": "Instanz", "ru": "Инстанция"}
|
||||
});
|
||||
|
||||
// this code can be placed directly in template.html
|
||||
vis.binds.template = {
|
||||
version: "0.5.0",
|
||||
showVersion: function () {
|
||||
if (vis.binds.template.version) {
|
||||
console.log('Version template: ' + vis.binds.template.version);
|
||||
vis.binds.template.version = null;
|
||||
}
|
||||
},
|
||||
createWidget: function (widgetID, view, data, style) {
|
||||
var $div = $('#' + widgetID);
|
||||
// if nothing found => wait
|
||||
if (!$div.length) {
|
||||
return setTimeout(function () {
|
||||
vis.binds.template.createWidget(widgetID, view, data, style);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
var text = '';
|
||||
text += 'OID: ' + data.oid + '</div><br>';
|
||||
text += 'OID value: <span class="myset-value">' + vis.states[data.oid + '.val'] + '</span><br>';
|
||||
text += 'Color: <span style="color: ' + data.myColor + '">' + data.myColor + '</span><br>';
|
||||
text += 'extraAttr: ' + data.extraAttr + '<br>';
|
||||
text += 'Browser instance: ' + vis.instance + '<br>';
|
||||
text += 'htmlText: <textarea readonly style="width:100%">' + (data.htmlText || '') + '</textarea><br>';
|
||||
|
||||
$('#' + widgetID).html(text);
|
||||
|
||||
// subscribe on updates of value
|
||||
if (data.oid) {
|
||||
vis.states.bind(data.oid + '.val', function (e, newVal, oldVal) {
|
||||
$div.find('.template-value').html(newVal);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
vis.binds.template.showVersion();
|
||||
Reference in New Issue
Block a user