JSFiddle - React, Tailwind, and code Playground

by Mike Marino

HTML

<script src="http://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.1.3/jsoneditor.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.1.3/jsoneditor.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<div data-role="controlgroup" data-type="horizontal">
    <input type="text" data-wrapper-class="controlgroup-textinput ui-btn ip_addr" value="10.155.59.160">
    <input type="button" value="Connect" class="connect">
</div>
<div data-role="collapsible">
     <h4>Settings</h4>

    <div class="main_container">
        <div id="jsoneditor" class="floated_box"></div>
        <div id="jsonviewer" class="floated_box"></div>
        <div style="clear: both;"></div>
    </div>
    <div>
        <fieldset data-role='controlgroup' data-type='horizontal'>
            <select class='selectConfig' data-native-menu='false'>
                <option>Select config:</option>
            </select>
            <input type="button" value="Get" class="selectConfigGet" disabled>
            <input type="button" value="Set" class="selectConfigSet" disabled>
        </fieldset>
    </div>
</div>
<div>
    <fieldset data-role='controlgroup' data-type='horizontal'>
        <input type="button" value="Start Measurement" class="startMeas">
        <input type="button" value="Stop Measurement" class="stopMeas">
        <input type="button" value="Get Status" class="getStatus">
    </fieldset>
</div>
<div data-role="collapsible" data-collapsed="false">
     <h4>Plot</h4> 
    <div id="plot" class="main_container">
        <div class='plot-base plot'></div>
        <div...

CSS

.main_container {
    width: 800px;
    //margin: 20px auto;
    //border: 2px solid #cccccc;
    padding: 5px;
}
.floated_box {
    float: left;
    width: 370px;
    height: 400px;
    border: 1px solid #990000;
    margin: 10px;
}
svg, canvas {
    position: absolute;
}
.axis text {
    font: 12px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.axis path {
    display: none;
}
.plot-base {
    float: left;
    border: 1px solid #990000;
    margin: 10px;
    width: 400px;
    height: 400px;
}
.legend {
    width: 50px;
}
.controlgroup-textinput {
    padding-top:.22em;
    padding-bottom:.22em;
}

JavaScript

var container = document.getElementById("jsoneditor");
var options = {
    mode: 'tree'
};
var editor = new JSONEditor($('#jsoneditor')[0], options);
var viewer = new JSONEditor($('#jsonviewer')[0], {
    mode: 'view'
});


// the WAMP connection to the Router
//
var connection;

$('.connect').on('click', connect);

function connect() {
    var wsuri = (document.location.protocol === "http:" ? "ws:" : "wss:") + "//" +
      $('.ip_addr').val() + ":8080/ws";
    console.log(wsuri);
    connection = new autobahn.Connection({
        url: wsuri,
        realm: "realm1"
    });

    // fired when connection is established and session attached
    //
    connection.onopen = function (session, details) {

        toastr.info("Connected");
        //
        var x = 0;
        var current_in_editor;
        var cmds = {
            Firmware: {
                get: "GetActualConfigurationOfFirmware",
                set: "ConfigureFirmware"
            },
            Simulation: {
                get: "GetActualConfigurationOfFirmwareSimulation",
                set: "ConfigureFirmwareSimulation"
            },
            Measurement: {
                get: "GetActualConfigurationOfMeasurement",
                set: "ConfigureMeasurement"
            },
            Hardware: {
                get: "GetActualHardwareSetup",
                set: "SetHardwareSetup"
            }
        };
        var sel_conf = $('.selectConfig').filter(":input");
        for (var k in cmds) {
            sel_conf.append($('<option/>').attr({
                value: k
            }).append(k).data(cmds[k]));
            sel_conf.val(k);
        }
        $('.selectConfigGet').button("option", "disabled", false);
        $('.startMeas').button("option", "disabled", false);
        sel_conf.selectmenu("refresh", true);
        $('.getStatus').on('click', function (ev) {
            session.call("GetCurrentStatus", []).then(

            function (res) {
                viewer.set(res);
     ...