HSMAdvisor Help Topics > Integration

FSWizard is designed on a web-first architecture, enabling seamless integration across various device types and platforms.

The following instructions detail the steps necessary to incorporate the FSWizard Widget (FSWidget) into your web or mobile application.

Adding FSWidget as an IFrame

Code

The code above will produce the following result:

Additional parameters

You can send additional query parameters to FSWidget to change the way it looks and operates:

injectCSSLink
Injects an URL to a custom CSS file
injectCSSText
Injects a custom CSS directly without the need for the file
numericKeyboard = true

Displays numeric keyboard for numeric input types within the iframe

All query parameters must be URL encoded

Here is a sample that sets the default widget text color to red:

Code

Theme CSS Variables

To simplify theming the app you can use the following CSS variables:

Code:DEFAULT LIGHT THEME

:root {

--tm-body-color: #000;

--tm-body-background: white;

--tm-body-link: #2196f3;

--tm-body-margin: 0;

--tm-body-padding: 0;

--tm-body-font-size: 1.4rem;

--tm-page-header-background: #039be5;

--tm-page-header-color: #FFF;

--tm-page-subheader-background: #009688;

--tm-page-subheader-color: #FFF;

--tm-table-background: white;

--tm-table-background-alt: #f4f4f4;

--tm-table-background-selected: #AECEAF;

--tm-table-border: 1px solid #dcedf6;

--tm-table-color: #333;

--tm-table-header-background: #009688;

--tm-table-header-color: #fff;

--tm-canvas-text-color: #000;

--tm-canvas-background: #FFF;

--tm-canvas-point-color: #F00;

--tm-canvas-geometry-color: #00F;

--tm-gauges-button-font-size: 0.8em;

--tm-gauges-button-label-color:#d1dbe0;

--tm-gauges-button-value-color:#FFF;

--tm-gauges-button-value-font-size:1.25em;

--tm-gauges-button-unit-color:#d1dbe0;

--tm-gauges-button-arrow-color: white;

--tm-gauges-button-arrow-font-size: 0.75em;

--tm-tab-border: 1px solid #CCCCCC;

--tm-tab-background: #FFF;

--tm-tab-button-padding: 0.75em;

--tm-tab-button-background: #dbdbdb url('../img/gray_header_inv.png');

--tm-tab-button-border-radius: 0;

--tm-tab-button-border: 1px solid #CCCCCC;

--tm-tab-button-color: #222222;

--tm-tab-button-font-weight: bold;

--tm-tab-button-font-size: 1.25em;

--tm-tab-button-collapsed-background: #fafafa url('../img/light_header.png');

--tm-tab-button-collapsed-border: 1px solid #CCCCCC;

--tm-tab-button-collapsed-color: #8a8a8a;

--tm-tab-content-background: white;

--tm-tab-content-padding: 0px 5px ;

--tm-tab-content-border: 1px solid #CCCCCC;

--tm-tab-content-border-radius: 0;

--tm-input-font-size: 1.25em;

--tm-input-height: 2em;

--tm-input-padding: 0 0.25em 0 0.25em;

--tm-input-border-radius: 0;

--tm-input-border: 1px solid #dcdcdc;

--tm-input-background: white;

--tm-input-color: black;

--tm-input-icon-color: black;

--tm-input-default-background: #6FEB6F;

--tm-input-default-color: black;

--tm-input-editing-color: white;

--tm-input-editing-background: white;

--tm-input-selected-color: white;

--tm-input-selected-background: #296fff;

--tm-input-disabled-color: black;

--tm-input-disabled-background: lightgray;

--tm-range-background: #ccc;

--tm-range-height: 5px;

--tm-range-border-radius: 3px;

--tm-range-shadow: 0px 0px 2px 0px black;

--tm-range-margin: 10px 5px;

--tm-range-slider-background: #03A9F4;

--tm-range-slider-height: 20px;

--tm-range-slider-width: 20px;

--tm-range-slider-border-radius: 30px;

--tm-range-slider-shadow: 0px 0px 2px 0px black;

--tm-button-primary-background: #03a9f4;

--tm-checkbox-checked-background: var(--tm-input-background) url("../img/check.png") left top no-repeat;

--tm-input-focus-shadow: 0 0 5px rgba(81, 203, 238, 1);

--tm-input-focus-border: 1px solid rgba(81, 203, 238, 1);

--tm-fieldgroup-margin: 0.25em;

--tm-fieldgroup-padding: 0.25em 0;

--tm-fieldgroup-background: white;

--tm-fieldgroup-odd-background: whitesmoke;

--tm-fieldgroup-error-color: red;

--tm-dropdown-text-align: left;

--tm-dropdown-padding: 0 30px 0 0.25em;

--tm-dropdown-font-size: 1.25em;

--tm-dropdown-border-radius: 0;

--tm-dropdown-border: 1px solid #9cccf2;

--tm-dropdown-background: white;

--tm-dropdown-color: black;

--tm-dropdown-icon: url(../img/icon_downarrow.png);

--tm-dropdown-icon-width: 30px;

--tm-dropdown-icon-color: #5bd3ff;

--tm-material-dropdown-border: 1px solid #CCCCCC;

--tm-material-dropdown-padding: 0.75em;

--tm-material-dropdown-font-size: 1.25em;

--tm-toggle-slider-color: rgb(3, 155, 229);

--tm-toggle-background: rgb(255, 255, 255);

--tm-toggle-color: black;

--tm-toggle-selected-color:white;

--tm-toggle-border: 1px solid #dcdcdc;

--tm-toggle-border-radius: 0;

}

Code:DARK THEME

:root {

--tm-body-color: #DDD;

--tm-body-background: #222;

--tm-body-link: #2196f3;

--tm-body-margin: 0;

--tm-body-padding: 0;

--tm-body-font-size: 1.4rem;

--tm-action-color: #607d8b;

--tm-page-header-background: #333;

--tm-page-header-color: #FFF;

--tm-page-subheader-background: #333;

--tm-page-subheader-color: #FFF;

--tm-table-background: #333;

--tm-table-background-alt: #444;

--tm-table-background-selected: #AECEAF;

--tm-table-border: 1px solid #525252;

--tm-table-color: #EEE;

--tm-table-header-background: #252525;

--tm-table-header-color: #fff;

--tm-canvas-text-color: #FFF;

--tm-canvas-background: #222;

--tm-canvas-point-color: #F00;

--tm-canvas-geometry-color: rgb(187, 187, 255);

--tm-gauges-button-font-size: 0.8em;

--tm-gauges-button-label-color: #d1dbe0;

--tm-gauges-button-value-color: #FFF;

--tm-gauges-button-value-font-size: 1.25em;

--tm-gauges-button-unit-color: #d1dbe0;

--tm-gauges-button-arrow-color: white;

--tm-gauges-button-arrow-font-size: 0.75em;

--tm-tab-border: 1px solid #666666;

--tm-tab-background: #222;

--tm-tab-button-padding: 0.75em;

--tm-tab-button-background: #333;

--tm-tab-button-border-radius: 0;

--tm-tab-button-border: none;

--tm-tab-button-color: #DDD;

--tm-tab-button-font-weight: bold;

--tm-tab-button-font-size: 1.25em;

--tm-tab-button-collapsed-background: #444;

--tm-tab-button-collapsed-border: none;

--tm-tab-button-collapsed-color: #8a8a8a;

--tm-tab-content-background: #222;

--tm-tab-content-padding: 0px 5px;

--tm-tab-content-border: none;

--tm-tab-content-border-radius: 0;

--tm-input-font-size: 1.25em;

--tm-input-height: 2em;

--tm-input-padding: 0 0.25em 0 0.25em;

--tm-input-border-radius: 0;

--tm-input-border: none;

--tm-input-background: #111;

--tm-input-color: #e7e7e7;

--tm-input-icon-color: #FFF;

--tm-input-default-background: #3a893a;

--tm-input-default-color: #dcdcdc;

--tm-input-editing-color: white;

--tm-input-editing-background: white;

--tm-input-selected-color: white;

--tm-input-selected-background: #296fff;

--tm-input-disabled-color: black;

--tm-input-disabled-background: #817e7e;

--tm-range-background: #ccc;

--tm-range-height: 5px;

--tm-range-border-radius: 3px;

--tm-range-shadow: 0px 0px 2px 0px black;

--tm-range-margin: 10px 5px;

--tm-range-slider-background: var(--tm-action-color);

--tm-range-slider-height: 20px;

--tm-range-slider-width: 20px;

--tm-range-slider-border-radius: 30px;

--tm-range-slider-shadow: 0px 0px 2px 0px black;

--tm-button-primary-background: var(--tm-action-color);

--tm-input-focus-shadow: 0 0 5px rgba(81, 203, 238, 1);

--tm-input-focus-border: 1px solid rgba(81, 203, 238, 1);

--tm-checkbox-checked-background: var(--tm-input-background) url("../img/check.png") left top no-repeat;

--tm-fieldgroup-margin: 0.25em;

--tm-fieldgroup-padding: 0.25em 0;

--tm-fieldgroup-background: transparent;

--tm-fieldgroup-odd-background: #2a2a2a;

--tm-fieldgroup-error-color: red;

--tm-dropdown-text-align: left;

--tm-dropdown-padding: 0 30px 0 0.25em;

--tm-dropdown-font-size: 1.25em;

--tm-dropdown-border-radius: 0;

--tm-dropdown-border: 1px solid #9cccf2;

--tm-dropdown-background: white;

--tm-dropdown-color: black;

--tm-dropdown-icon: url(../img/icon_downarrow.png);

--tm-dropdown-icon-width: 30px;

--tm-dropdown-icon-color: #5bd3ff;

--tm-material-dropdown-border: none;

--tm-material-dropdown-padding: 0.75em;

--tm-material-dropdown-font-size: 1.25em;

--tm-toggle-slider-color: var(--tm-action-color);

--tm-toggle-background: rgb(255, 255, 255);

--tm-toggle-color: black;

--tm-toggle-selected-color: white;

--tm-toggle-border: 1px solid #dcdcdc;

--tm-toggle-border-radius: 0;

}

To be continued....

Tags:fswizard widget

Speed And Feed Calculator for Professional CNC Programmers and Machinists

FSWizard Widget

Adding FSWidget as an IFrame

Additional parameters

Theme CSS Variables