pure-robotic-view

A pure javascript robotic-view lib.

Usage

Import script

<script src="//cdn.jsdelivr.net/npm/[email protected]/robotic-arm-view.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/robotic-palm-view.min.js"></script>

<!-- or use follow script -->
<!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/robotic-arm-view.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/robotic-palm-view.js"></script> -->

<script type="text/javascript">
    // register robotic-palm change event and get callback
    window.addEventListener("palmValueChange", function (data) {
        console.log("palmValue==>", data.detail)
    });
    // register robotic-arm change event and get callback
    window.addEventListener("jointValueChange", function (data) {
        console.log("jointValue==>", data.detail)
    });
</script>

Create UI

• create robotic view

  Attention: robotic-arm-view and robotic-palm-view id cannot be changed, otherwise program cannot recognize

<div class="demo">
   <div id="robotic-arm-view"></div>
   <div id="robotic-palm-view"></div>
</div>

• css style

.demo {
  display: grid;
  grid-template-columns: 50% 50%;
  text-align: center;
}

Attributes

• robotic-arm-view

roboticArmParms = {
  canvasWidth: 350,
  canvasHeight: 400,
  leverWidth: 15,
  leverColor: "black",
  jonitColor: "brown",
  baseColor: "black",
  textColor: "black",
  endColor: "aqua",
  jointRadius: 10,
  baseRadius: 40,
  ikSolution: "right",
  fontStyle: "15px Arial",
  withLabel: true,
  limit: true,
}

you can modify the properties of the above fields and then use function drawArmView() to make it effect. Example：

<script type="text/javascript">
    roboticArmParms.baseColor = "green";
    drawArmView();
</script>

• robotic-palm-view

roboticPalmParms = {
  canvasWidth: 300,
  canvasHeight: 350,
  leverColor: "black",
  jointColor: "brown",
  endColor: "aqua",
  middleLeverWidth: 20,
  leverWidth: 15,
  jointRadius: 10,
  withLabel: true,
  textColor: "black",
  fontStyle: "15px Arial"
}

you can modify the properties of the above fields and then use function drawPalmView() to make it effect.

Vue and React support

We also support Vue and React. Vue user can check it out here，and react user can check it out here