0phelia/js_flutter_communication.html

## js_flutter_communication.html
<!DOCTYPE html>
<head>
    <title>JS-Flutter Communication</title>
    <style>
        .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 20px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 12px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: #2196F3;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var myCheckbox = document.getElementById('myCheckbox');
            var myButton = document.getElementById('myButton');

            myCheckbox.addEventListener('change', function () {
                var checkboxValue = myCheckbox.checked;
                var message = `onCheckboxToggle:${checkboxValue}`;
                // console.log(message);
                UbilabsMapMessageHandler.postMessage(message);
            });
            myButton.addEventListener('click', function() {
                var message = `onButtonClick`;
                // console.log(message);
                UbilabsMapMessageHandler.postMessage(message);
            });
        });
    </script>
</head>

<body>
    <div id="main">

        <div>
            Send toggle value to Flutter
            <label class="switch">
                <input type="checkbox" id="myCheckbox">
                <span class="slider"></span>
            </label>
        </div>


        </br>
        </br>

        <button id="myButton">Send click message to Flutter</button>

    </div>
</body>

</html>
	<!DOCTYPE html>
	<head>
	<title>JS-Flutter Communication</title>
	<style>
	.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 20px;
	}

	.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	}

	.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	}

	.slider:before {
	position: absolute;
	content: "";
	height: 12px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	}

	input:checked + .slider {
	background-color: #2196F3;
	}

	input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
	}

	input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	}
	</style>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
	var myCheckbox = document.getElementById('myCheckbox');
	var myButton = document.getElementById('myButton');

	myCheckbox.addEventListener('change', function () {
	var checkboxValue = myCheckbox.checked;
	var message = `onCheckboxToggle:${checkboxValue}`;
	// console.log(message);
	UbilabsMapMessageHandler.postMessage(message);
	});
	myButton.addEventListener('click', function() {
	var message = `onButtonClick`;
	// console.log(message);
	UbilabsMapMessageHandler.postMessage(message);
	});
	});
	</script>
	</head>

	<body>
	<div id="main">

	<div>
	Send toggle value to Flutter
	<label class="switch">
	<input type="checkbox" id="myCheckbox">
	<span class="slider"></span>
	</label>
	</div>


	</br>
	</br>

	<button id="myButton">Send click message to Flutter</button>

	</div>
	</body>

	</html>