Skip to content

Instantly share code, notes, and snippets.

@fisherds

fisherds/index.html

Created February 14, 2022 04:23
Show Gist options
  • Save fisherds/890675f79d93688938362a956dd7c026 to your computer and use it in GitHub Desktop.
Save fisherds/890675f79d93688938362a956dd7c026 to your computer and use it in GitHub Desktop.
Download ZIP
HTML code for the Pi Simulator
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="styles/bootstrap-material-design.min.css">
<link rel="stylesheet" href="styles/main.css">
<title>Pi Simulator</title>
</head>
<body>
<nav class="navbar navbar-dark fixed-top">
<a class="navbar-brand" href="#">Pi Simulator</a>
</nav>
<div id="mainPage" class="container page-container">
<div class="card">
<div class="card-header">
<div class="row justify-content-center">
<div class="col-11 col-sm-5">
<div class="sectionHeading">Get Values</div>
</div>
<div class="col-11 col-sm-6 text-right">
<button id="getStatusButton" type="button" class="btn btn-outline-primary">Get Status</button>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">This sections shows the current values of the 3 LEDs, 3 servo motors angles, and the
pushbutton state.
</p>
<div class="row justify-content-center">
<div class="col-6 col-sm-3">
<div class="output-label">LED States</div>
<div class="output-grid">
<div><b style="color: darkred">Red</b></div>
<div id="redValue">On</div>
<div><b style="color: #dacc12">Yellow</b></div>
<div id="yellowValue">On</div>
<div><b style="color: darkgreen">Green</b></div>
<div id="greenValue">On</div>
</div>
<br>
</div>
<div class="col-6 col-sm-3">
<div class="output-label">Servos Angles</div>
<div class="output-grid">
<div><b style="color: #0b0b5f">Joint 1</b></div>
<div id="joint1Value">0</div>
<div><b style="color: #0b0b5f">Joint 2</b></div>
<div id="joint2Value">0</div>
<div><b style="color: #0b0b5f">Joint 3</b></div>
<div id="joint3Value">0</div>
</div>
</div>
<div class="col-12 col-sm-3">
<div class="output-label">Pushbutton</div>
<div class="output-grid">
<div><b>Value</b></div>
<div id="pushbuttonValue">High</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="row justify-content-center">
<div class="col-11 col-sm-5">
<div class="sectionHeading">Set Values</div>
</div>
<div class="col-11 col-sm-6 text-right">
<button id="setServosButton" type="button" class="btn btn-outline-primary">Update Servos</button>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">This sections allows you to set the current state for the 3 LEDs and 3 servo motors angles.
</p>
<div class="row justify-content-center">
<div class="col-5">
<div class="output-label">LED States</div>
<div class="">
<div class="row btn-group btn-group-toggle w-100" data-toggle="buttons">
<label id="redOnButton" class="col-12 col-md-6 btn btn-secondary">
<input type="radio" name="redOptions" id="redOnInput" autocomplete="off">Red On
</label>
<label id="redOffButton" class="col-12 col-md-6 btn btn-secondary active">
<input type="radio" name="redOptions" id="redOffInput" autocomplete="off" checked>Red Off
</label>
</div>
</div>
<div>
<div class="row btn-group btn-group-toggle w-100" data-toggle="buttons">
<label id="yellowOnButton" class="col-12 col-md-6 btn btn-secondary">
<input type="radio" name="yellowOptions" id="yellowOnInput" autocomplete="off">Yellow On
</label>
<label id="yellowOffButton" class="col-12 col-md-6 btn btn-secondary active">
<input type="radio" name="yellowOptions" id="yellowOffInput" autocomplete="off" checked>Yellow Off
</label>
</div>
</div>
<div>
<div class="row btn-group btn-group-toggle w-100" data-toggle="buttons">
<label id="greenOnButton" class="col-12 col-md-6 btn btn-secondary">
<input type="radio" name="greenOptions" id="greenOnInput" autocomplete="off">Green On
</label>
<label id="greenOffButton" class="col-12 col-md-6 btn btn-secondary active">
<input type="radio" name="greenOptions" id="greenOffInput" autocomplete="off" checked>Green Off
</label>
</div>
</div>
<br>
</div>
<div class="col-5">
<div class="output-label">Servos Angles</div>
<div class="row justify-content-center">
<div class="py-5 py-md-4 col-7 form-group">
<label for="joint1Input" class="">Joint 1</label>
<input type="number" class="form-control" id="joint1Input">
</div>
<div class="py-5 py-md-4 col-7 form-group">
<label for="joint2Input" class="">Joint 2</label>
<input type="number" class="form-control" id="joint2Input">
</div>
<div class="py-5 py-md-4 col-7 form-group">
<label for="joint3Input" class="">Joint 3</label>
<input type="number" class="form-control" id="joint3Input">
</div>
</div>
</div>
</div>
</div>
</div>
<br><br><br>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/popper.js"></script>
<script src="scripts/bootstrap-material-design.js"></script>
<script>
$("body").bootstrapMaterialDesign();
</script>
<script src="scripts/main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment