React -> add select option divs for choice model & simple fixes / upgrades
parent
c63663b38e
commit
4a0a6d088c
|
|
@ -20,23 +20,22 @@ const ProgressBar = () => {
|
|||
{
|
||||
typeof percents === 'number'
|
||||
? 'Progress: ' + percents + '%'
|
||||
: percents === 'render_success' || percents === 'Ready to work. Get params'
|
||||
? percents
|
||||
: ''
|
||||
: percents
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
{
|
||||
typeof percents === 'number'
|
||||
!isNaN(percents)
|
||||
&& percents.toString().indexOf('.') != -1
|
||||
? <div
|
||||
className='progerss_bar_progress'
|
||||
style={ { width: percents + '%', height: '100%' } }
|
||||
className='progress_bar_progress'
|
||||
style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }
|
||||
>
|
||||
</div>
|
||||
: percents === 'render success'
|
||||
? <div
|
||||
className='progerss_bar_progress'
|
||||
style={ { width: '100%', height: '100%' } }
|
||||
className='progress_bar_progress'
|
||||
style={ { width: '100%', height: '100%', backgroundColor: 'green' } }
|
||||
>
|
||||
</div>
|
||||
: <></>
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ const DownloadFilesListInputGenerator = ({
|
|||
* Text input generator, example:
|
||||
* @param {
|
||||
* {
|
||||
* type: 'drop-box',
|
||||
* type: 'chice-listing',
|
||||
* name: 'name',
|
||||
* values: list,
|
||||
* ref: React.createRef()
|
||||
|
|
@ -249,30 +249,40 @@ const ChoiceListingGenerator = ({
|
|||
input, info
|
||||
}) => {
|
||||
|
||||
const __handleRef = ( item ) => {
|
||||
const __handleRef = ( event ) => {
|
||||
event.preventDefault()
|
||||
input.ref.current = {
|
||||
value: item
|
||||
value: event.target.value
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id={input.name + info.action + info.endpoint + 'DropBox'}
|
||||
id={input.name + info.action + info.endpoint + 'ChoiceListing'}
|
||||
>
|
||||
{input.name + ':'}
|
||||
<select
|
||||
onChange={ (event) => __handleRef( event ) }
|
||||
>
|
||||
<option
|
||||
value={ '--Select-Model--' }
|
||||
>
|
||||
--Select-Model--
|
||||
</option>
|
||||
{
|
||||
input.values.map( (item) => {
|
||||
return (
|
||||
<div
|
||||
<option
|
||||
key={ item }
|
||||
onClick={ () => __handleRef( item ) }
|
||||
value={ item }
|
||||
>
|
||||
{ item }
|
||||
</div>
|
||||
{ item.replace('.blend', '') }
|
||||
</option>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -482,7 +492,7 @@ const VectorInputGenerator = ({
|
|||
unit={ '' }
|
||||
min={input.min[key]}
|
||||
max={input.max[key]}
|
||||
defaultValue={input.min[key]}
|
||||
defaultValue={ input.min[key] > 0 ? input.min[key] : 0 }
|
||||
step={0.1}
|
||||
reference={input.refDict[key]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const RenderAllForm = () => {
|
|||
button_value: 'Render All Sets'
|
||||
},
|
||||
{
|
||||
type: 'chice-listing',
|
||||
type: 'choice-listing',
|
||||
name: 'Models',
|
||||
values: models_list,
|
||||
ref: choiceListing
|
||||
|
|
@ -71,8 +71,8 @@ const RenderAllForm = () => {
|
|||
|
||||
const bodyComparer = ( refs ) => {
|
||||
return {
|
||||
// fileName: refs[0].current.value,
|
||||
fileName: 'testHand',
|
||||
fileName: refs[0].current.value.replace('.blend', ''),
|
||||
// fileName: 'testHand',
|
||||
resolutionX: refs[1].current.value,
|
||||
resolutionY: refs[2].current.value,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const RenderSingleImageForm = () => {
|
|||
button_value: 'Render Single Image'
|
||||
},
|
||||
{
|
||||
type: 'chice-listing',
|
||||
type: 'choice-listing',
|
||||
name: 'Models',
|
||||
values: models_list,
|
||||
ref: choiceListing
|
||||
|
|
@ -107,12 +107,26 @@ const RenderSingleImageForm = () => {
|
|||
}
|
||||
)
|
||||
|
||||
const bodyComparer = ( refs ) => {
|
||||
|
||||
return {
|
||||
fileName: refs[0].current.value.replace('.blend', ''),
|
||||
// fileName: 'testHand',
|
||||
rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
|
||||
cameraID: refs[2].current.value,
|
||||
nameSeries: 0,
|
||||
resolutionX: refs[3].current.value,
|
||||
resolutionY: refs[4].current.value
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AbstractWebsocket
|
||||
addressWS={ '/single/image/' }
|
||||
inputList={ inputList }
|
||||
refList={ refList }
|
||||
bodyComparer={ bodyComparer }
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const RenderSingleSetForm = () => {
|
|||
button_value: 'Render Single Set'
|
||||
},
|
||||
{
|
||||
type: 'chice-listing',
|
||||
type: 'choice-listing',
|
||||
name: 'Models',
|
||||
values: models_list,
|
||||
ref: choiceListing
|
||||
|
|
@ -109,8 +109,8 @@ const RenderSingleSetForm = () => {
|
|||
|
||||
const bodyComparer = ( refs ) => {
|
||||
return {
|
||||
// fileName: refs[0].current.value,
|
||||
fileName: 'testHand',
|
||||
fileName: refs[0].current.value.replace('.blend', ''),
|
||||
// fileName: 'testHand',
|
||||
setID: refs[1].current.value,
|
||||
cameraID: refs[2].current.value,
|
||||
resolutionX: refs[3].current.value,
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ const RenderVectorSingleImageForm = () => {
|
|||
button_value: 'Render Single Image'
|
||||
},
|
||||
{
|
||||
type: 'chice-listing',
|
||||
type: 'choice-listing',
|
||||
name: 'Models',
|
||||
values: models_list,
|
||||
ref: choiceListing
|
||||
|
|
@ -419,8 +419,8 @@ const RenderVectorSingleImageForm = () => {
|
|||
)
|
||||
|
||||
return {
|
||||
// fileName: refs[0].current.value,
|
||||
fileName: 'testHand',
|
||||
fileName: refs[0].current.value.replace('.blend', ''),
|
||||
// fileName: 'testHand',
|
||||
rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
|
||||
cameraID: refs[2].current.value,
|
||||
nameSeries: 0,
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ const RenderVectorSingleSetForm = () => {
|
|||
button_value: 'Render Single Set'
|
||||
},
|
||||
{
|
||||
type: 'chice-listing',
|
||||
type: 'choice-listing',
|
||||
name: 'Models',
|
||||
values: models_list,
|
||||
ref: choiceListing
|
||||
|
|
@ -419,8 +419,8 @@ const RenderVectorSingleSetForm = () => {
|
|||
)
|
||||
|
||||
return {
|
||||
// fileName: refs[0].current.value,
|
||||
fileName: 'testHand',
|
||||
fileName: refs[0].current.value.replace('.blend', ''),
|
||||
// fileName: 'testHand',
|
||||
angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
|
||||
cameraID: refs[2].current.value,
|
||||
resolutionX: refs[3].current.value,
|
||||
|
|
|
|||
|
|
@ -41,10 +41,18 @@ const renderWebsocketSlice = createSlice(
|
|||
...state.messages,
|
||||
action.payload.message
|
||||
]
|
||||
state.percents = action.payload.message.info
|
||||
if (
|
||||
(
|
||||
!isNaN(action.payload.message.info)
|
||||
&& action.payload.message.info.toString().indexOf('.') != -1
|
||||
) || action.payload.message.info === 'render success'
|
||||
) {
|
||||
state.percents = action.payload.message.info
|
||||
}
|
||||
},
|
||||
resetMessages(state) {
|
||||
state.messages = []
|
||||
state.percents = ''
|
||||
},
|
||||
disconnect(state) {
|
||||
state.web_socket_address = ''
|
||||
|
|
|
|||
|
|
@ -190,6 +190,18 @@ body {
|
|||
button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: rgba(22,28,29,1);
|
||||
color: rgba(0,128,0,1);
|
||||
border: 2px solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.float_form_connect {
|
||||
|
|
|
|||
Loading…
Reference in New Issue