An update, for those curious:
I started prioritizing the "focus" feature that existed in @nader.chinichian original view.
(Ignore the choppiness, its the gif)
None of the embedded views on this page are aware they are wrapped inside the tool, so it doesn't require modifying existing views.
I do provide a perspective parameter to each one though, incase someone wanted to change visible content based off the current state.
The view builds everything out with one parameter called viewStates which is an array of the configured instances you want to visualize.
Here is the example shown above:
Example Parameters
[
{
"labels": [
{
"positions": {
"flat": {
"height": "10%",
"left": "45%",
"top": "10%",
"width": "15%",
"zIndex": 1
},
"perspective": {
"height": "10%",
"left": "20%",
"top": "20%",
"width": "15%",
"zIndex": 1
}
},
"text": "Top Example"
},
{
"positions": {
"flat": {
"height": "10%",
"left": "45%",
"top": "80%",
"width": "15%",
"zIndex": 1
},
"perspective": {
"height": "10%",
"left": "35%",
"top": "45%",
"width": "15%",
"zIndex": 1
}
},
"viewParams": {
"text": "Example View Label"
},
"viewPath": "TestLabel"
}
],
"name": "Floor Layout",
"outline": "blue",
"perspective": true,
"positions": {
"flat": {
"height": "60%",
"left": "17.2413793103%",
"top": "19.9546485261%",
"width": "60%",
"zIndex": 0
},
"perspective": {
"height": "30%",
"left": "19.4252873563%",
"top": "17.4603174603%",
"width": "30%",
"zIndex": 0
}
},
"viewParams": {},
"viewPath": "ExampleLayout"
},
{
"labels": [
{
"positions": {
"flat": {
"height": "10%",
"left": "45%",
"top": "10%",
"width": "15%",
"zIndex": 1
},
"perspective": {
"height": "10%",
"left": "60%",
"top": "60%",
"width": "15%",
"zIndex": 1
}
},
"text": "Bottom Example"
}
],
"name": "Floor Layout",
"outline": "red",
"perspective": true,
"positions": {
"flat": {
"height": "60%",
"left": "17.2413793103%",
"top": "19.9546485261%",
"width": "60%",
"zIndex": 0
},
"perspective": {
"height": "30%",
"left": "59.4252873563%",
"top": "60%",
"width": "30%",
"zIndex": 0
}
},
"viewParams": {},
"viewPath": "ExampleLayout"
}
]
Each instance takes the following parameters:
Instance Properties
| Param |
Example Value |
Description |
name |
"Floor Layout" |
So its easier to see which item you are looking at. The name isn't shown anywhere at this time |
outline |
"blue" |
The outline color to add to the nested view group if enableOutlines is true on the parent. This is for development mostly |
perspective |
true |
Whether or not to show this instance in the isomorphic state |
positions |
{ "flat": { "height": "60%", "left": "10%", "top": "20%", "width": "60%", "zIndex": 0 }, "perspective": { "height": "30%", "left": "20%", "top": "20%", "width": "30%", "zIndex": 0 } } |
The positions to use for the nested view group. The flat and perspective keys are used to determine which position to use based on the current state. |
viewPath |
"MyFolder/MyView" |
The path to the main view to use for the nested view group. |
viewParams |
{ "text": "Example View Label" } |
The parameters to pass to the nested view groups main view. |
labels |
[ { "positions": { "flat": { "height": "10%", "left": "45%", "top": "10%", "width": "15%", "zIndex": 1 }, "perspective": { "height": "10%", "left": "20%", "top": "20%", "width": "15%", "zIndex": 1 } }, "text": "Top Example" } ] |
An array of labels to add to the nested view group. Each label take will automatically trigger the focus for the view group when clicked. |
Label Properties
| Param |
Example Value |
Description |
text |
"Top Example" |
The text to display on the label, this does not work if viewPath is not None |
style |
{ "fontSize": "20px", "color": "red" } |
An override to the labels default styling, this does not work if viewPath is set to None |
positions |
{ "flat": { "height": "10%", "left": "45%", "top": "10%", "width": "15%", "zIndex": 1 }, "perspective": { "height": "10%", "left": "20%", "top": "20%", "width": "15%", "zIndex": 1 } } |
The positions to use for the label. The flat and perspective keys are used to determine which position to use based on the current state. |
viewPath |
"MyFolder/MyView" |
The path to a possible embedded view to use for the label. |
viewParams |
{ "text": "Example View Label" } |
The parameters to pass to the label view. |
I will put this on the exchange and Github when I am done, just have not done so yet.
The next things I want to implement:
- The stacking feature that exists in @nader.chinichian original view
- A version of this that allows positioning with my original click-to-drag method, currently I did these ones by manually typing the positions
- Control over the desired aspect ratio, currently everything is locked into a 16:9 aspect ratio
I am open to ideas and feedback!
