Html Requirements

Requirements For Use

  • Bootstrap V3.3.4 or higher
  • jQuery V1.12.1
  • webHMI library and license

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.webhmi-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="webhmi-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Message"></p>
            </div>
            <div class="modal-footer">
               <span class="webhmi-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 webhmi-btn-set btn1" data-var-name="MsgBox:MessageBox.Buttons1.CMD">
						<div class="webhmi-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Buttons1">Button 1</div>
                    </button>
                </span>
                <span class="webhmi-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 webhmi-btn-set btn2" data-var-name="MsgBox:MessageBox.Buttons2.CMD">
							<div class="webhmi-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');

        }
    }
    WEBHMI.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.webhmi-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="webhmi-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Message"></p>
            </div>
			<input class="webhmi-text-value add-margin" data-var-name="MsgBox:MessageBox.TextSnippets.UserString"></>
            <div class="modal-footer">
                <span class="webhmi-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 webhmi-btn-set btn1" data-var-name="MsgBox:MessageBox.Buttons1.CMD">
						<div class="webhmi-text-value" data-var-name="MsgBox:MessageBox.TextSnippets.Buttons1">Button 1</div>
                    </button>
                </span>
                <span class="webhmi-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 webhmi-btn-set btn2" data-var-name="MsgBox:MessageBox.Buttons2.CMD">
							<div class="webhmi-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');

        }
    }
    WEBHMI.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 webHMI. 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>
Made by Loupe