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/6514299965143230/cm1t23s30dCM117L30webar.gltfglb" 
					ios-srcposter="https://docs.myostat.ca/download/attachments/6514299965143230/cm1t23s30dCM1.usdz"
png"       
					  auto-rotate
				  	camera-controls
					disable-zoom
				  	interaction-prompt="none"
				  	camera-orbit="0deg45deg 180deg55deg 100%"
				 	shadow-intensity="1"
					exposure="0.5"
					<!--style="background-color: #D6EAF8#7DCEA0;"
					>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1>CM1<h1><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1-C+User+Guide">CM1-C</a></h1>
        <span>24VDC Integrated Servos</span>
      </span>
	<span>
		<div <span><a class="tooltip">
			cc" href="https://docs.myostat.ca/display/MYOS/CM1-C+User+Guide">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/6514299965143230/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/6514299965143230/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/6514299965143230/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/6514299965143230/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/6514299965143230/cm1t23s30dCM1-T.gltfpng" 
				  	auto-rotate
				  	camera-controls
					  interaction-promptdisable-zoom
				  	interaction-prompt="none"
				  	camera-orbit="0deg45deg 180deg55deg 100%"
				 	shadow-intensity="1"
					exposure="0.5"
					<!--style="background-color: #7DCEA0;"
					>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1>CM1-T</h1>
        <span>24V Integrated EtherNet/IP, TCP/UPD, Modbus-TCP Servos</span>
<h1><a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1-T+User+Guide">CM1-T</a></h1>
        </span><span>
	<span>
		<div<a class="tooltip">
			<span class="tooltiptext">Documentation</span>
      cc" href="https://docs.myostat.ca/pages/viewpage.action?pageId=55083026">EtherNet/IP</a>, 
			<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-+RT3.12+Manual">
        		<img src="https:pages/viewpage.action?pageId=55083241">TCP/UDP</a>, 
			<a class="cc" href="https://docs.myostat.ca/download/attachments/65142999/docs.svg">display/MYOS/Modbus-TCP">Modbus-TCP</a></span>
      		</a>span>
		</div><span>
		<div class="tooltip">
			<span class="tooltiptext">Software<>Documentation</span>
      		<a class="cc" href="httphttps://wwwdocs.myostat.ca/CoolMuscleSoftware/display/MYOS/CM1-T+User+Guide">
        		<img src="https://docs.myostat.ca/download/attachments/6514299965143230/softwaredocs.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext">Downloads<>Software</span>
      		<a class="cc" href="http://www.myostat.ca/CoolMuscleDrawingsCoolMuscleSoftware">
        		<img src="https://docs.myostat.ca/download/attachments/6514299965143230/filesoftware.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext" style="margin-left: -92px;">Support<>Downloads</span>
      		<a class="cc" href="https://jiradocs.myostat.ca/servicedeskdisplay/customer/portal/2MYOS/Datasheets+and+Downloads">
        		<img src="https://docs.myostat.ca/download/attachments/6514299965143230/helpfile.svg">
      		</a>
		</div>
		</span>
    </section>
    <section <div class="attributiontooltip">
			<span      <span>
        <h1>CM1-E</h1>
        <span>24VDC Integrated EtherCAT Servos<class="tooltiptext" style="margin-left: -92px;">Support</span>
      </span>
	<span>
		<div<a class="tooltip">
			<span class="tooltiptext">Documentation</span>
      		<a class="cc" href="https://docscc" href="https://jira.myostat.ca/servicedesk/displaycustomer/MYOS/CM1+-+RT3.12+Manualportal/2" target="_blank">
        		<img src="https://docs.myostat.ca/download/attachments/6514299965143230/docshelp.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span</span>
    </section>
    <section class="tooltiptext">Software</span>
attribution">
      <span>
        		<a<h1><a class="cc" href="httphttps://wwwdocs.myostat.ca/CoolMuscleSoftware">display/MYOS/CM1-E+User+Guide">CM1-E</a></h1>
        		<img<span><a srcclass="https"cc" href="https://docs.myostat.ca/download/attachments/65142999/software.svg">display/MYOS/CM1-E+User+Guide">EtherCAT</a></span>
      		</a>span>
		</div><span>
		<div class="tooltip">
			<span class="tooltiptext">Downloads<>Documentation</span>
      		<a class="cc" href="httphttps://wwwdocs.myostat.ca/CoolMuscleDrawingsdisplay/MYOS/CM1-E+User+Guide">
        		<img src="https://docs.myostat.ca/download/attachments/6514299965143230/filedocs.svg">
      		</a>
		</div>
		<div class="tooltip">
			<span class="tooltiptext" style="margin-left: -92px;">Support</span>
      >Software</span>
      		<a class="cc" href="https://jiradocs.myostat.ca/servicedeskdisplay/customer/portal/2MYOS/.Introduction+v2.0#id-.Introductionv2.0-MasterControllers">
        		<img src="https://docs.myostat.ca/download/attachments/6514299965143230/helpsoftware.svg">
      		</a>
		</div>
	<		<div class="tooltip">
			<span class="tooltiptext">Downloads</span>
    </section>
</div>

HTML

<div id="card">
	<!-- Use it like any other HTML element --> 
	<model-viewer src  		<a class="cc" href="https://docs.myostat.ca/downloaddisplay/attachments/65142999/cm1t23s30d.gltf" 
				  auto-rotate
				  camera-controls
				  interaction-prompt="none"
				  camera-orbit="0deg 180deg 100%"
				 shadow-intensity="1"
				style="background-color: #FAD7A0;"
					>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1>CM2</h1>
        120/240VAC Integrated Servo Motor
      </span>
      <a class="cc" href="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/displayattachments/MYOS/CM1+-+RT3.12+Manual" target="_blank">
        <img src65143230/CM260A40webar.GLB"
				 	poster="https://docs.myostat.ca/download/attachments/6514299965143230/docsCM2.svgpng"> 
				      </a>
    </section>
</div>

HTML

<div id="card">
	<!-- Use it like any other HTML element --> 
	<model-viewer src="https://docs.myostat.ca/download/attachments/65142999/cm1t23s30d.gltf" 
				  auto-rotate
				  camera-controls
				  interaction-prompt="none"
				  camera-orbit="0deg 180deg 100%"
				 shadow-intensity="1"
					auto-rotate
				  	camera-controls
					disable-zoom
				  	interaction-prompt="none"
				  	camera-orbit="45deg 55deg 100%"
				 	shadow-intensity="1"
					exposure="0.5"
					<!--style="background-color: #CD6155#FAD7A0;"
					>
	</model-viewer>
    <section class="attribution">
      <span>
        <h1>CM3</h1>
        <span>By <a <h1><a class="cc" href="https://polydocs.googlemyostat.comca/display/view/dLHpzNdygsg" target="_blank">Poly<MYOS/CM2+-+User+Guides">CM2</a></span>h1>
      </span>
      <a<span><a class="cc" href="https://creativecommonsdocs.myostat.orgca/licensesdisplay/by/2.0/" target="_blank">
 MYOS/CM2+-+User+Guides">120/240VAC Integrated Servos</a></span>
      </span>
	<span>
		<div class="tooltip">
			<span class="tooltiptext">Documentation</span>
       <img src		<a class="cc" href="https://mirrorsdocs.creativecommonsmyostat.orgca/presskitdisplay/icons/cc.svgMYOS/CM2+-+User+Guides">
        		<img src="https://mirrorsdocs.creativecommonsmyostat.orgca/download/presskitattachments/icons65143230/bydocs.svg">
      		</a>
    		</section>
</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/CoolMuscleDocuments">
        			<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; 
}

HTML

<style>

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


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

model-viewer {
width: 100%;
height: 400px;
background-color: #70BCD1;
--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;
}
</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 71

New Version Current

Key