/*! ********************************************************************************************************************************************************** */
<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>