Html Requirements

Requirements For Use

Bootstrap V3.3.4 or higher
jQuery V1.12.1
Loupe UX library

Code Examples

The following examples will show a method for setting up the popup in html.

MessageBox

This example shows how to create a popup with message box functionality.

<!-- Modal -->
<style>
    .msg-btn-hidden {visibility: hidden;}
    .msg-btn-visible {visibility: visible;}
    #ModalPopUpdiv.lux-text-value {min-width: 1px;}
</style>

<div class="modal fade" id="ModalPopUp" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <span data-var-name="MsgBox:MessageBox.Layer.Active"></span>
        <div class="modal-content">
            <div class="modal-body">
                <p class="lux-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Message"></p>
            </div>
            <div class="modal-footer">
               <span class="lux-led" data-var-name="MsgBox:MessageBox.Buttons1.StatusDP" data-set-value="1" data-reset-value="0"
                    data-led-true="msg-btn-hidden" data-led-false="msg-btn-visible">
					<button type="button" class="btn btn-default lux-btn-set btn1" data-var-name="MsgBox:MessageBox.Buttons1.CMD">
						<div class="lux-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Buttons1">Button 1</div>
                    </button>
                </span>
                <span class="lux-led" data-var-name="MsgBox:MessageBox.Buttons2.StatusDP" data-set-value="1" data-reset-value="0"
                    data-led-true="msg-btn-hidden" data-led-false="msg-btn-visible">
						<button type="button" class="btn btn-default lux-btn-set btn2" data-var-name="MsgBox:MessageBox.Buttons2.CMD">
							<div class="lux-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Buttons2">Button 2</div>
                        </button>
                </span>
            </div>
        </div>
    </div>
</div>
<!-- Modal End -->

<script>
    var modalpop-up= function () {
        if (machine["MsgBox:MessageBox"] === undefined || machine["Msgox:MessageBox"].Layer === undefined) {
            return;
        } else if (machine["MsgBox:MessageBox"].Layer.Active && !$('#ModalPopUp').hasClass('in')) {
            $('#ModalPopUp').modal({
                backdrop: 'static',
                keyboard: false
            });
        } else if (!machine["MsgBox:MessageBox"].Layer.Active && $('#ModalPopUp').hasClass('in')) {
            $('#ModalPopUp').modal('hide');

        }
    }
    LUX.on({ 'update-hmi': modalpop-up});
</script>

Prompt

The difference between this code snippet and the one above is the user input field.


<!-- Modal -->
<style>
    .msg-btn-hidden {visibility: hidden;}
    .msg-btn-visible {visibility: visible;}
	.add-margin {margin: 25px;}
    #ModalPopUpdiv.lux-text-value {min-width: 1px;}
</style>

<div class="modal fade" id="ModalPopUp" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <span data-var-name="MsgBox:MessageBox.Layer.Active"></span>
        <div class="modal-content">
            <div class="modal-body">
                <p class="lux-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Message"></p>
            </div>
			<input class="lux-text-value add-margin" data-var-name="MsgBox:MessageBox.TextSnippets.UserString"></>
            <div class="modal-footer">
                <span class="lux-led" data-var-name="MsgBox:MessageBox.Buttons1.StatusDP" data-set-value="1" data-reset-value="0"
                    data-led-true="msg-btn-hidden" data-led-false="msg-btn-visible">
					<button type="button" class="btn btn-default lux-btn-set btn1" data-var-name="MsgBox:MessageBox.Buttons1.CMD">
						<div class="lux-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Buttons1">Button 1</div>
                    </button>
                </span>
                <span class="lux-led" data-var-name="MsgBox:MessageBox.Buttons2.StatusDP" data-set-value="1" data-reset-value="0"
                    data-led-true="msg-btn-hidden" data-led-false="msg-btn-visible">
						<button type="button" class="btn btn-default lux-btn-set btn2" data-var-name="MsgBox:MessageBox.Buttons2.CMD">
							<div class="lux-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Buttons2">Button 2</div>
                        </button>
                </span>
            </div>
        </div>
    </div>
</div>
<!-- Modal End -->

<script>
    var modalpop-up= function () {
        if (machine["MsgBox:MessageBox"] === undefined || machine["MsgBox:MessageBox"].Layer === undefined) {
            return;
        } else if (machine["MsgBox:MessageBox"].Layer.Active && !$('#ModalPopUp').hasClass('in')) {
            $('#ModalPopUp').modal({
                backdrop: 'static',
                keyboard: false
            });
        } else if (!machine["MsgBox:MessageBox"].Layer.Active && $('#ModalPopUp').hasClass('in')) {
            $('#ModalPopUp').modal('hide');

        }
    }
    LUX.on({ 'update-hmi': modalpop-up});
</script>

index.html

When adding the code above to the HMI, there are two options. The first, add the code directly into the body of the HTML page. Second option is to make the above code a standalone HTML file and use the data-include functionality from Loupe UX. See below for an example. Data-include uses the relative path based on the current file structure of the HMI application.

//place the following code anywhere inside of the body of the html file used for the HMI.
<div data-include="views/msgBox.html"></div>