node-red-contrib-oled
Version:
Node-Red node for controlling OLED displays
689 lines (634 loc) • 19.2 kB
HTML
/*! ********************************************************************************************************************************************************** */
<script type='text/javascript'>
RED.nodes.registerType('oled-config', {
category: 'config',
defaults: {
name: {
value: '',
require: false
},
width: {
value: 128,
type: 'number',
require: true
},
height: {
value: 64,
type: 'number',
require: true
},
address: {
value: 0x3c,
type: 'number',
require: true
}
},
label: function() {
return this.name || 'OLED' + this.address;
}
})
</script>
<script type='text/x-red' data-template-name='oled-config'>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-config-input-name'/>
</div>
<div class='form-row'>
<label for='node-config-input-address'><i class='fa'></i> Bus Address</label>
<input type='text' id='node-config-input-address' />
</div>
<div class='form-row'>
<label for='node-config-input-width'><i class='fa'></i> Width</label>
<input type='text' id='node-config-input-width' />
</div>
<div class='form-row'>
<label for='node-config-input-height'><i class='fa'></i> Height</label>
<input type='text' id='node-config-input-height' />
</div>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Battery', {
category: 'oled',
color: '#3FADB5',
icon: 'OledBattery.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function () {
return this.name || "Battery";
}
})
</script>
<script type='text/x-red' data-template-name='Battery'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Battery">
<p>Draws a battery display (w:19, h:9)</p>
<p>Payload should contain coordinates of the start pixels and the battery charge percentage</p>
<p>the treasholds are <10,10-40,40-70,70-100</p>
<p>abscissa: <b>msg.payload.x</b></p>
<p>ordinate: <b>msg.payload.y</b></p>
<p>percentage: <b>msg.payload.p</b></p>
<p>Example: <b>{"x":1,"y":1,"p":25}</b></p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Bluetooth', {
category: 'oled',
color: '#3FADB5',
icon: 'OledBluetooth.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function () {
return this.name || "Bluetooth";
}
})
</script>
<script type='text/x-red' data-template-name='Bluetooth'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Bluetooth">
<p>Draws a Bluetooth logo (w:8, h:10)</p>
<p>Payload should contain coordinates of the start Bluetooth logo</p>
<p>abscissa: <b>msg.payload.x</b></p>
<p>ordinate: <b>msg.payload.y</b></p>
<p>Example: <b>{"x":1,"y":1}</b></p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Clear', {
category: 'oled',
color: '#3FADB5',
icon: 'OledClear.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function() {
return this.name || "Clear";
}
})
</script>
<script type='text/x-red' data-template-name='Clear'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Clear">
<p>Clears the Oled display</p>
<p>Payload should be set to <b>true</b> to enable the node</p>
<p>If pixels are inverted, set all pixels to 1</p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Dimmed', {
category: 'oled',
color: '#3FADB5',
icon: 'OledDim.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function() {
return this.name || "Dimmed";
}
})
</script>
<script type='text/x-red' data-template-name='Dimmed'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Dimmed">
<p>Changes contrast of the Oled display</p>
<p>Payload should be set to <b>true</b> to reduce contrast and to <b>false</b> to turn back to bright</p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('FillRectangle', {
category: 'oled',
color: '#3FADB5',
icon: 'OledRectangle.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function () {
return this.name || "FillRectangle";
}
})
</script>
<script type='text/x-red' data-template-name='FillRectangle'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="FillRectangle">
<p>Draws a filled rectangle </p>
<p>Payload should contain coordinates of the start pixel, the width, the height and the color</p>
<p>if color is set to <b>0</b> the rectangle will turn off</p>
<p>abscissa: <b>msg.payload.x</b></p>
<p>ordinate: <b>msg.payload.y</b></p>
<p>width: <b>msg.payload.w</b></p>
<p>height: <b>msg.payload.h</b></p>
<p>color: <b>msg.payload.color</b></p>
<p>Example: <b>{"x":1,"y":1,"w":10,"h":20,"color":1}</b></p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Invertion', {
category: 'oled',
color: '#3FADB5',
icon: 'OledInvert.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function() {
return this.name || "Invertion";
}
})
</script>
<script type='text/x-red' data-template-name='Invertion'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Invertion">
<p>Inverts all pixels color values</p>
<p>Payload should be set to <b>true</b> to invert and to <b>false</b> to reverse</p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Image', {
category: 'oled',
color: '#3FADB5',
icon: 'OledImage.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function () {
return this.name || "Image";
}
})
</script>
<script type='text/x-red' data-template-name='Image'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Image">
<p>Draws a png image.</p>
<p>Payload should contain the path to png file, its coordinates and clear display before displaying the image.</p>
<p>image: <b>msg.payload.image</b></p>
<p>abscissa: <b>msg.payload.x</b></p>
<p>ordinate: <b>msg.payload.y</b></p>
<p>clear: <b>msg.payload.clear</b></p>
<p>animated: <b>msg.payload.animated</b></p>
<p>reset: <b>msg.payload.reset</b></p>
<p>Example: <b>{"image": "./OledImage.png", "x":1, "y":1 , "clear":true , "animated":true}</b></p>
<p>the <b>x</b>, <b>y</b>, <b>clear</b>, <b>animated</b> and <b>reset</b> parameters are optional.</p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Line', {
category: 'oled',
color: '#3FADB5',
icon: 'OledLine.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function () {
return this.name || "Line";
}
})
</script>
<script type='text/x-red' data-template-name='Line'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Line">
<p>Draws a line</p>
<p>Payload should contain coordinates of the start pixel, the end pixel and the color</p>
<p>if color is set to <b>0</b> the line will turn off</p>
<p>start abscissa: <b>msg.payload.x0</b></p>
<p>start ordinate: <b>msg.payload.y0</b></p>
<p>end abscissa: <b>msg.payload.x1</b></p>
<p>end ordinate: <b>msg.payload.y1</b></p>
<p>color: <b>msg.payload.color</b></p>
<p>Example: <b>{"x0":1,"y0":1,"x1":30,"y1":30,"color":1}</b></p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Pixel', {
category: 'oled',
color: '#3FADB5',
icon: 'OledPixel.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function () {
return this.name || "Pixel";
}
})
</script>
<script type='text/x-red' data-template-name='Pixel'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Pixel">
<p>Displays specific pixel(s)</p>
<p>Payload should contain coordinates of the pixel(s) and the color</p>
<p>each pixel must be define like <b>[abscissa,ordinate,color]</b></p>
<p>if color is set to <b>0</b> the pixel will turn off</p>
<p>Example:</p>
<p>One pixel:<b>msg.payload=[1,1,1]</b></p>
<p>Several pixels: <b>msg.payload=[[1,1,1],[24,32,0],...]</b></p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Scroll', {
category: 'oled',
color: '#3FADB5',
icon: 'OledScroll.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function() {
return this.name || "Scroll";
}
})
</script>
<script type='text/x-red' data-template-name='Scroll'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Scroll">
<p>Scrolls the display</p>
<p>Payload should contain direction, start position and stop position.</p>
<p>direction: <b>msg.payload.direction</b></p>
<p>start: <b>msg.payload.start</b></p>
<p>stop: <b>msg.payload.stop</b></p>
<p>Example: <b>{"direction":"left","start":0,"stop":128}</b></p>
<p>If you want to disable it, you must pass the boolean <b>false</b> value as parameter.</p>
<p>Possible values for scroll direction are <b>"left"</b> <b>"right"</b> <b>"left_diagonal"</b> <b>"right_diagonal"</b> .</p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('String', {
category: 'oled',
color: '#3FADB5',
icon: 'OledString.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function () {
return this.name || "String";
}
})
</script>
<script type='text/x-red' data-template-name='String'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="String">
<p>Writes the inlet string with multiple of font 5x7</p>
<p>Payload should contain the font size (multiple of the original one in 5x7), coordinates where the string starts, and the text itself</p>
<p>size: <b>msg.payload.size</b></p>
<p>abscissa: <b>msg.payload.x</b></p>
<p>ordinate: <b>msg.payload.y</b></p>
<p>string: <b>msg.payload.text</b></p>
<p>Example: <b>{"size":2,"x":1,"y":1,"text":"Oled"}</b></p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Turn-on', {
category: 'oled',
color: '#3FADB5',
icon: 'OledTurnOn.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function() {
return this.name || "Turn On";
}
})
</script>
<script type='text/x-red' data-template-name='Turn-on'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Turn-on">
<p>Turns on the Oled display</p>
<p>Payload should be set to <b>true</b> to enable the node</p>
<p>All previous display will be restore</p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Turn-off', {
category: 'oled',
color: '#3FADB5',
icon: 'OledTurnOff.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function() {
return this.name || "Turn Off";
}
})
</script>
<script type='text/x-red' data-template-name='Turn-off'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Turn-off">
<p>Turns off the Oled display</p>
<p>Payload should be set to <b>true</b> to enable the node</p>
<p>All previous display will be store</p>
</script>
/*!
**********************************************************************************************************************************************************
*/
<script type='text/javascript'>
RED.nodes.registerType('Wifi', {
category: 'oled',
color: '#3FADB5',
icon: 'OledWifi.png',
defaults: {
name: {
value: '',
required: false
},
display: {
type: 'oled-config'
}
},
inputs: 1,
outputs: 0,
label: function() {
return this.name || "Wifi";
}
})
</script>
<script type='text/x-red' data-template-name='Wifi'>
<div class='form-row'>
<label for='node-config-input-display'><i class='fa'></i> Display</label>
<input type='text' id='node-input-display'/>
</div>
<div class='form-row'>
<label for='node-config-input-name'><i class='fa fa-tag'></i> Name</label>
<input type='text' id='node-input-name'/>
</div>
</script>
<script type="text/x-red" data-help-name="Wifi">
<p>Draws a wifi display (w:19, h:9)</p>
<p>Payload should contain coordinates of the start pixels and the wifi power reception</p>
<p>the treasholds are <10,10-40,40-70,70-100</p>
<p>abscissa: <b>msg.payload.x</b></p>
<p>ordinate: <b>msg.payload.y</b></p>
<p>percentage: <b>msg.payload.p</b></p>
<p>Example: <b>{"x":1,"y":1,"p":25}</b></p>
</script>