Page History

Banner title image

TitleColour	white
TitleText	MYOSTAT
image	https://docs.myostat.ca/download/attachments/66881987/myostat-banner-image.png
Size	20px
Height	120px
backcolour	#4EA453
TitleSize	40px
Colour	white

DOCUMENTATION AND REFERENCE MATERIAL

HTML

<div id="card">
	<!-- Use it like any other HTML element --> 
	<model-viewer 	src="https://docs.myostat.ca/download/attachments/65143230/CM117L30webar.glb"
					poster="https://docs.myostat.ca/download/attachments/65143230/CM1.png"       
					auto-rotate
				  	camera-controls
					disable-zoom
				  	interaction-prompt="none"
				  	camera-orbit="45deg 55deg 100%"
				 	shadow-intensity="1"
					exposure="0.5"
					<!--style="background-color: #7DCEA0;"
				>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-C+RT3.12User+ManualGuide">CM1-C</a></h1>
        <span><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-C+RT3.12User+ManualGuide">24VDC Integrated Servos</a></span>
      </span>
	<span>
		<div class="tooltip">
			<span class="tooltiptext">Documentation</span>
      		<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-C+RT3.12User+ManualGuide">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/docs.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Software</span>
      		<a class="cc" href="http://www.myostat.ca/CoolMuscleSoftware">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/software.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Downloads</span>
      		<a class="cc" href="http://www.myostat.ca/CoolMuscleDrawings">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/file.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext" style="margin-left: -92px;">Support</span>
      		<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2" target="_blank">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/help.svg">
      		</a>
		</div>
	</span>
    </section>
</div>

HTML

<div id="card">
	<!-- Use it like any other HTML element --> 
	<model-viewer 	src="https://docs.myostat.ca/download/attachments/65143230/CM1E17L30webar.GLB"
					poster="https://docs.myostat.ca/download/attachments/65143230/CM1-T.png"
				  	auto-rotate
				  	camera-controls
					disable-zoom
				  	interaction-prompt="none"
				  	camera-orbit="45deg 55deg 100%"
				 	shadow-intensity="1"
					exposure="0.5"
					<!--style="background-color: #7DCEA0;"
					>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1-T+User+Guide">CM1-T</a></h1>
        <span>
			<a class="cc" href="https://docs.myostat.ca/pages/viewpage.action?pageId=55083026">EtherNet/IP</a>, 
			<a class="cc" href="https://docs.myostat.ca/pages/viewpage.action?pageId=55083241">TCP/UDP</a>, 
			<a class="cc" href="https://docs.myostat.ca/display/MYOS/Modbus-TCP">Modbus-TCP</a></span>
      </span>
	<span>
		<div class="tooltip">
			<span class="tooltiptext">Documentation</span>
      		<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1-T+User+Guide">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/docs.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Software</span>
      		<a class="cc" href="http://www.myostat.ca/CoolMuscleSoftware">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/software.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Downloads</span>
      		<a class="cc" href="https://docs.myostat.ca/display/MYOS/Datasheets+and+Downloads">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/file.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext" style="margin-left: -92px;">Support</span>
      		<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2" target="_blank">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/help.svg">
      		</a>
		</div>
	</span>
    </section>
    <section class="attribution">
      <span>
        <h1><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1-E+User+Guide">CM1-E</a></h1>
        <span><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1-E+User+Guide">EtherCAT</a></span>
      </span>
	<span>
		<div class="tooltip">
			<span class="tooltiptext">Documentation</span>
      		<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1-E+User+Guide">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/docs.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Software</span>
      		<a class="cc" href="https://docs.myostat.ca/display/MYOS/.Introduction+v2.0#id-.Introductionv2.0-MasterControllers">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/software.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Downloads</span>
      		<a class="cc" href="https://docs.myostat.ca/display/MYOS/Data+Sheets+and+MCAD">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/file.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext" style="margin-left: -92px;">Support</span>
      		<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2" target="_blank">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/help.svg">
      		</a>
		</div>
	</span>
    </section>
</div>

HTML

<div id="card">
	<!-- Use it like any other HTML element --> 
	<model-viewer 	src="https://docs.myostat.ca/download/attachments/65143230/CM260A40webar.GLB"
				 	poster="https://docs.myostat.ca/download/attachments/65143230/CM2.png" 
				  	auto-rotate
				  	camera-controls
					disable-zoom
				  	interaction-prompt="none"
				  	camera-orbit="45deg 55deg 100%"
				 	shadow-intensity="1"
					exposure="0.5"
					<!--style="background-color: #FAD7A0;"
					>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM2+-+User+Guides">CM2</a></h1>
        <span><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM2+-+User+Guides">120/240VAC Integrated Servos</a></span>
      </span>
	<span>
		<div class="tooltip">
			<span class="tooltiptext">Documentation</span>
      		<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM2+-+User+Guides">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/docs.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Software</span>
      		<a class="cc" href="http://www.myostat.ca/CoolMuscleSoftware">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/software.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Downloads</span>
      		<a class="cc" href="http://www.myostat.ca/CoolMuscleDrawings">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/file.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext" style="margin-left: -92px;">Support</span>
      		<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2" target="_blank">
        		<img src="https://docs.myostat.ca/download/attachments/65143230/help.svg">
      		</a>
		</div>
	</span>
    </section>
</div>

HTML

<div id="card">
	<!-- Use it like any other HTML element --> 
	<model-viewer 	src="https://docs.myostat.ca/download/attachments/65143230/CM317L50Awebar.GLB" 
				 	poster="https://docs.myostat.ca/download/attachments/65143230/CM3.png"
				  	auto-rotate
				  	camera-controls
					disable-zoom
				  	interaction-prompt="none"
				  	camera-orbit="225deg 55deg 100%"
				 	shadow-intensity="1"
					exposure="0.5"
					<!--style="background-color: #CD6155;"
					>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1><a class="cc" href="http://www.myostat.ca/documents/CM3%20Brochure%202021.pdf">CM3</a></h1>
        <span><a class="cc" href="http://www.myostat.ca/documents/CM3%20Brochure%202021.pdf">24V Integrated Servos</a></span>
      </span>
      </span>
		<span>
			<div class="tooltip">
				<span class="tooltiptext" style="margin-left: -92px;">Documentation</span>
      			<a class="cc" href="http://www.myostat.ca/documents/CM3%20Brochure%202021.pdfCoolMuscleDocuments">
        			<img src="https://docs.myostat.ca/download/attachments/65143230/docs.svg">
      			</a>
			</div>
		 	<div class="tooltip"> 
				<span class="tooltiptext" style="margin-left: -92px;">Brochure</span> 
				<a class="cc" href="http://www.myostat.ca/documents/CM3%20Brochure%202021.pdf"> 
				<img src="https://docs.myostat.ca/download/attachments/65143230/docs.svg">	
				</a> 		
			</div>
			<div class="tooltip"> 
			<span class="tooltiptext">Downloads</span> 
			<a class="cc" href="http://www.myostat.ca/CoolMuscleDrawings"> 
				<img src="https://docs.myostat.ca/download/attachments/65143230/file.svg"> </a> </div>     
			<div class="tooltip"> 
				<span class="tooltiptext" style="margin-left: -92px;">Support</span> 
				<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2" target="_blank"> 
					<img src="https://docs.myostat.ca/download/attachments/65143230/help.svg"> 
				</a> 
			</div>
		</span>
    </section>
</div>

HTML

<style>

body {
margin: 1em;
padding: 0;
font-family: Google Sans, Noto, Roboto, Helvetica Neue, sans-serif;
/*color: #244376;*/
color: black
}


#card {
margin: 3em auto;
display: flex;
flex-direction: column;
max-width: 400px;
min-height: 480px;
border-radius: 0px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
overflow: hidden;
}

model-viewer {
width: 100%;
height: 300px;
background-color: #D0D6CE;
--poster-color: #ffffff00;
}

.attribution {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 1em;
}

.attribution h1 {
margin: 0 0 0.25em;
}

.attribution img {
opacity: 0.5;
height: 2em;
}

.attribution .cc {
flex-shrink: 0; 
text-decoration: none; 
}


footer {
display: flex;
flex-direction: column;
max-width: 600px;
margin: auto;
text-align: center;
font-style: italic;
line-height: 1.5em;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* Generic Link effects for the entire page - includes sidebar */
a:link {
  color: black;
  /*background-color: transparent;*/
  text-decoration: none;
}

a:visited {
  /*color: #172B4D;*/
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: black;
  background-color: transparent;   
  text-decoration: none; 
}



</style>

<!-- Import model-viewer -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> 
<script nomodule="" src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

Cool Muscle User Guides

Versions Compared

Old Version 86

New Version Current

Key