control widget sketches

control-widget-sketches.markdown

control widget sketches

A Pen by jake on CodePen.

License.

index.html

<link rel="stylesheet" type="text/css" href="https://unpkg.com/semantic-ui@2.3.1/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/semantic-ui@2.3.1/dist/semantic.min.js"></script>
<style>
  body,
  html {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .container {
    padding: 20px;
  }

  .control-widget {
    width: 300px;
    float: left;
    margin: 0 20px 0 0 !important;
  }
</style>

<div class="container">
  <div class="control-widget">
    <div class="ui segments">
      <div class="ui segment" style="width: fit-content;">
        <h2>TEMPCTRL-0001</h2>
        <div style="text-align: center">
          <div class="ui statistic">
            <div class="value">42.0</div>
          </div>
          <br>
        </div>
        <div class="ui form">
          <div class="field">
            <label for="set_point_1">Set Point 1</label>
            <input id="set_point_1" type="number" />
          </div>
          <div class="field">
            <label for="hysteresis_1">Hysteresis 1</label>
            <input id="hysteresis_1" type="number" />
          </div>
          <div class="field">
            <label for="set_point_2">Set Point 2</label>
            <input id="set_point_2" type="number" />
          </div>
          <div class="field">
            <label for="hysteresis_2">Hysteresis 2</label>
            <input id="hysteresis_2" type="number" />
          </div>
          <button class="ui primary button">Apply</button>
          <button class="ui button">Reset</button>
        </div>
      </div>
      <div class="ui segment">
        <p><b>last sent:</b> 2021-01-01T00:00:00</p>
        <p><b>last received:</b> 2021-01-01T00:00:00</p>
      </div>
      <div class="ui segment">
        <span class="ui label">
          temp1
        </span>
        <span class="ui label">
          NY-PLC1-01-01
        </span>
      </div>
    </div>
  </div>

  <div class="control-widget">
    <div class="ui segments">
      <div class="ui segment" style="width: fit-content;">
        <h2>LIGHTBNK-0002</h2>
        <div style="text-align: center">
          <div class="ui statistic">
            <div class="value">OFF</div>
          </div>
        </div>
        <br>
        <div class="ui form">
          <div class="inline field">
            <div class="ui toggle checkbox">
              <input id="forced_on" type="checkbox" tabindex="0" class="hidden" checked>
              <label>Force on</label>
            </div>
          </div>
          <div class="field">
            <label for="schedule">Schedule</label>
            <input id="schedule" type="time" />
          </div>
          <div class="field">
            <label for="duration">Duration</label>
            <input id="duration" type="number" />
          </div>
          <button class="ui primary button">Apply</button>
          <button class="ui button">Reset</button>
        </div>
      </div>
      <div class="ui segment">
        <p><b>last sent:</b> 2021-01-01T00:00:00</p>
        <p><b>last received:</b> 2021-01-01T00:00:00</p>
      </div>
      <div class="ui segment">
        <span class="ui label">
          lights1
        </span>
        <span class="ui label">
          NY-PLC1-01-01
        </span>
      </div>
    </div>
  </div>
</div>

script.js

$(document).ready(() => {
  $(".ui .checkbox").checkbox();
})