Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/feature/multiPageSelect'
Browse files Browse the repository at this point in the history 
# Conflicts:
#	example/HMI/app/views/main.handlebars
  • Loading branch information
AndrewMusser committed Nov 29, 2023
2 parents 222bd49 + 25ceeec commit 3442664
Show file tree
Hide file tree
Showing 10 changed files with 292 additions and 472 deletions.
121 changes: 68 additions & 53 deletions example/HMI/app/views/main.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
{{!-- pass a partial into another partials parameters --}}
Custom User Controls:
<br/>
{{> 'button-label'
label=(Partial "custom-icon" img="app/assets/wireframe.png")
data-var-name='tmplitTest:tmplit.SetButton'
class='lux-hide'
<br />
{{> 'button-label'
label=(Partial "custom-icon" img="app/assets/wireframe.png")
data-var-name='tmplitTest:tmplit.SetButton'
class='lux-hide'
}}

{{> 'button-icon'
img="app/assets/wireframe.png"
data-var-name='tmplitTest:tmplit.SetButton'
class='lux-hide'
{{> 'button-icon'
img="app/assets/wireframe.png"
data-var-name='tmplitTest:tmplit.SetButton'
class='lux-hide'
}}

{{> 'icon'
img="app/assets/wireframe.png"
data-var-name='tmplitTest:tmplit.SetButton'
class='lux-btn-set lux-hide'
{{> 'icon'
img="app/assets/wireframe.png"
data-var-name='tmplitTest:tmplit.SetButton'
class='lux-btn-set lux-hide'
}}



<div>
Button
<br/>
<br />
{{tmplit 'Button' 'SetButton' buttonType='set' data-var-name='tmplitTest:tmplit.SetButton'}}
{{tmplit 'Button' 'ToggleButton' buttonType='toggle' data-var-name='tmplitTest:tmplit.ToggleButton'}}
{{tmplit 'Button' 'MomentaryButton' buttonType='momentary' data-var-name='tmplitTest:tmplit.MomentaryButton'}}
Expand Down Expand Up @@ -69,30 +69,30 @@ Custom User Controls:
<div>
Columns
{{#tmplit 'Columns' 'label' maxColumns=2}}
<div style="text-align:center">Column 1 Header</div>
<div style="text-align:center">Column 2 Header</div>
{{tmplit 'Numeric' 'Contents 1' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 2' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 3' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 4' data-var-name='tmplitTest:tmplit.NumericOutput'}}
<div style="text-align:center">Column 1 Header</div>
<div style="text-align:center">Column 2 Header</div>
{{tmplit 'Numeric' 'Contents 1' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 2' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 3' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 4' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{/tmplit}}
{{#tmplit 'Columns' maxColumns=2}}
<div style="text-align:center">Column 1 Header</div>
<div style="text-align:center">Column 2 Header</div>
{{tmplit 'Numeric' 'Contents 1' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 2' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 3' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 4' data-var-name='tmplitTest:tmplit.NumericOutput'}}
<div style="text-align:center">Column 1 Header</div>
<div style="text-align:center">Column 2 Header</div>
{{tmplit 'Numeric' 'Contents 1' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 2' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 3' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{tmplit 'Numeric' 'Contents 4' data-var-name='tmplitTest:tmplit.NumericOutput'}}
{{/tmplit}}
</div>

<div>
ColumnsBs
{{#tmplit 'ColumnsBs' maxColumns=2}}
{{tmplit 'Led' "Input1"}}
{{tmplit 'Led' "Input2"}}
{{tmplit 'Led' "Input3"}}
{{tmplit 'Led' "Input4"}}
{{tmplit 'Led' "Input1"}}
{{tmplit 'Led' "Input2"}}
{{tmplit 'Led' "Input3"}}
{{tmplit 'Led' "Input4"}}
{{/tmplit}}
</div>

Expand All @@ -106,24 +106,24 @@ Custom User Controls:
<div>
Dropdown
{{#tmplit 'Dropdown' data-var-name='tmplitTest:tmplit.Dropdown'}}
<dropdown>
<div class="option">Option 1</div>
<div class="option">Option 2</div>
</dropdown>
<dropdown>
<div class="option">Option 1</div>
<div class="option">Option 2</div>
</dropdown>
{{/tmplit}}
</div>

<div>
<div>
DropdownTable
{{#tmplit 'DropdownTable' data-var-name='tmplitTest:tmplit.DropdownTable_INT' data-var-name-field='tmplitTest:tmplit.DropdownTable_STRING'}}
<options>
<div>Option many :1</div>
<div>Option many :2</div>
<div>Option many :3</div>
<div>Option many :4</div>
</options>
<options>
<div>Option many :1</div>
<div>Option many :2</div>
<div>Option many :3</div>
<div>Option many :4</div>
</options>
{{/tmplit}}
</div>
</div>

<!-- not sure how to demo this one
don't worry about this one could be broken -->
Expand All @@ -144,12 +144,27 @@ don't worry about this one could be broken -->
<div>
MultiSelect
{{#tmplit 'MultiSelect' maxColumns=10 data-var-name="tmplitTest:tmplit.MultiSelect_INT" data-var-name-field="tmplitTest:tmplit.MultiSelect_STRING"}}
<options>
<div>Option many :1</div>
<div>Option many :2</div>
<div>Option many :3</div>
<div>Option many :4</div>
</options>
<options>
<div>Option many :1</div>
<div>Option many :2</div>
<div>Option many :3</div>
<div>Option many :4</div>
</options>
{{/tmplit}}
</div>

<div>
Multi Page Select
{{#tmplit 'MultiSelect' maxColumns=10 data-var-name="tmplitTest:tmplit.MultiSelect_INT" data-var-name-field="tmplitTest:tmplit.MultiSelect_STRING"}}
<options>
{{tmplit 'PageSelect' 'Page 1: json' ctx='{"msg":"hello"}' dom="container1" template="page1"}}
{{tmplit 'PageSelect' 'Page 2: javascript' ctx='this.innerHTML' dom="container1" template="page2"}}
{{tmplit 'PageSelect' 'Page 3: string' ctx='Hello' dom="container1" template="page2"}}
{{tmplit 'PageSelect' 'Page 4: function' ctx='()=>{return "Answer: " + (3.0 +2.0) }' dom="container1" template="page2"}}
{{tmplit 'PageSelect' 'Page 5: number' ctx=3 dom="container1" template="page2"}}
{{tmplit 'PageSelect' 'Page 6: object' ctx=(obj '{"msg":"hello"}') dom="container1" template="page1"}}
{{tmplit 'PageSelect' 'Page 7: none' dom="container1" template="page2"}}
</options>
{{/tmplit}}
</div>

Expand All @@ -158,10 +173,10 @@ don't worry about this -->
<div>
LabeledList
{{#tmplit 'LabeledList' 'Test'}}
<div>list item 1</div>
<div>list item 2</div>
<div>list item 3</div>
<div>list item 4</div>
<div>list item 1</div>
<div>list item 2</div>
<div>list item 3</div>
<div>list item 4</div>
{{/tmplit}}
</div>

Expand Down Expand Up @@ -195,4 +210,4 @@ DirectoryBrowserWindow
{{tmplit 'DirectoryBrowserWindow' data-var-name='tmplitTest:f.in.cwd' data-var-name-files='tmplitTest:Directory' data-var-name-willopen='tmplitTest:f.in.refresh' style='height:300px'}}

RobotScene
{{tmplit 'RobotScene' robotFile='./@loupeteam/tmplits-robotscene/Robot.glb' style="width:300px; height:300px" onrender="tmplit_test_UpdateScene" lightColor='0xCC6666' lightIntensity='1.5'}}
{{tmplit 'RobotScene' robotFile='./@loupeteam/tmplits-robotscene/Robot.glb' style="width:300px; height:300px" onrender="tmplit_test_UpdateScene" lightColor='0xCC6666' lightIntensity='1.5'}}
75 changes: 1 addition & 74 deletions src/tmplits/tmplits-globalclasses/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,4 @@
This is a template gizmo

Use this template by running:
```
lpm install tmplits-gizmo
```
then modify it for your needs.

Settings up the template:

This gizmo can be installed using NPM install and will get loaded by the tmplit system
the important parts are a
- library.handlebars - this is your template
- loader.js - js file that will run after loading the templates. This can do work to instantiate things or contain function tmplits
- Package.json that includes a name with the prefix
- @loupeteam/tmplit-[your tmplits name]
- Version number
- Link to repo the repo (the local one or tmplits, this is important because it is how the package gets it's access rights)
```json
{
"name": "@loupeteam/tmplits-[TmplitName]",
"version": "x.x.x",
"repository": {
"type": "git",
"url": "git+https://github.com/loupeteam/tmplits.git"
},
}
```

The entire page template will be loaded with the name [your tmplit name] and any tmplits inside scripts will also be available

Usage:


```json
//Application Package.json
{
{
"name": "@loupeteam/tmplit-template",
"version": "0.0.2",
...
"dependencies": {
"@loupeteam/tmplits": "0.0.2",
"@loupeteam/tmplits-gizmo": "0.0.1",
}
}
}
``````

```json
//Gizmo Package.json
{
"name": "@loupeteam/tmplits-gizmo",
"version": "0.0.1",
}
``````

```handlebars
<!--library.handlebars-->
<div>Hello World<div>
```

```javascript
//loader.js
console.log("Loaded gizmo!")
function TmplitCustomTmplit( ... ){
...
}
```
```handlebars
<!--main.handlebars-->
{{> gizmo}}
{{W CustomTmplit}}
```
This directory contains the global classes for the tmplits project. These classes are used by the tmplits to support global functionality for specific behaviors.

## Licensing

Expand Down
Loading

0 comments on commit 3442664

Please sign in to comment.