diff --git a/src/components/forms/abstractWebsocket.js b/src/components/forms/abstractWebsocket.js index d1bad59..f5f05d4 100644 --- a/src/components/forms/abstractWebsocket.js +++ b/src/components/forms/abstractWebsocket.js @@ -1,15 +1,46 @@ import React, { useState, useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' -import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' -import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' +import { renderWebsocketSelector } from '../../redux/slices/renderWebsocketSlice' +import { connect, saveMessage, resetMessages, disconnect } from '../../redux/slices/renderWebsocketSlice' -import FormGenerator from '../formGenerator' +import FormGenerator from './formGenerator' -const AbstractWebsocket = ({ addressWS, inputList, refList }) => { +const ProgressBar = () => { - let web_socket = null + const { + percents, + connect + } = useSelector( renderWebsocketSelector ) + + return ( +
+
+ { + typeof percents === 'number' + ? 'Progress: ' + percents + '%' + : percents + } +
+
+ { + typeof percents === 'number' + ?
+
+ :
+
+ } +
+
+ ) + +} + + +const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => { + + const [web_socket, setWebsocket] = useState(null) const dispatch = useDispatch() @@ -36,43 +67,39 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { ) } - console.log('connect') } const handleSendMessage = ( refs ) => { + + let body = bodyComparer( refs ) - let rotate_conv = refs[2].current.value / 62 // on backend 0.1 - 6.2 value - - let body = { - // fileName: refs[0].current.value, - fileName: 'testHand', - setID: refs[1].current.value, - rotate: rotate_conv, - nameSeries: 0, // index render picture in set (useless on the front & disable) - cameraID: refs[3].current.value, - resolutionX: refs[4].current.value, - resolutionY: refs[5].current.value - } console.log( body ) try { - - web_socket.onopen = (event) => { - - web_socket.send( - JSON.stringify( - body - ) - ) - } + dispatch( + saveMessage( + { + message: { info: 0 } // start + } + ) + ) + + web_socket.send( + JSON.stringify( + body + ) + ) } catch (error) { + web_socket.close() dispatch( disconnect() ) + setWebsocket(null) console.log(error) + } } @@ -90,31 +117,42 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { console.log(error) } } else if ( address !== '' && room_uuid !== '' ) { - + dispatch( + disconnect() + ) } + setWebsocket(null) + console.log('disconnect') } - if ( web_socket !== null && connected === true && address !== '' ) { - web_socket.onmessage = (event) => { - console.log( event.data ) - dispatch( - saveMessage( - { - message: JSON.parse( event.data ) - } - ) - ) - } - } - useEffect( () => { if ( web_socket_address !== '' && web_socket === null ) { - web_socket = new WebSocket( web_socket_address ) + + console.log( 'connect' ) + + setWebsocket(new WebSocket( web_socket_address )) + } + + if ( web_socket !== null ) { + + web_socket.onmessage = (event) => { + console.log( event.data ) + if ( messages[ messages.length - 1 ] !== JSON.parse( event.data ) ) { + dispatch( + saveMessage( + { + message: JSON.parse( event.data ) + } + ) + ) + } + } + } } @@ -127,6 +165,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { refList={ refList } action={ handleSendMessage } /> + { connected ? @@ -138,24 +177,54 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { Connect } +
{ messages.map( (item) => { return ( - <> -
- { item.info } -
-
- { item.details } -
-
- { item.group } -
- +
+ <> + { + Object.keys(item).map( (key) => { + + if ( key == 'details' ) { + return ( + <> + { + Object.keys(item[key]).map( (keyTwo) => { + return ( +
+ { ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' } +
+ ) + } + ) + } + + ) + } else if ( key === 'image' ) { + return ( + + ) + } else { + return ( + <> + { key + ': ' + item[key] + ' ' } + + ) + } + } + ) + } + +
) } ) } +
) } diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index b889a6f..cc1eefe 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -93,6 +93,14 @@ export const FormGenerator = ({ key={key} /> ) + } else if (input.type === 'vector') { + return ( + + ) } }) } @@ -223,7 +231,7 @@ const DownloadFilesListInputGenerator = ({ * { * type: 'drop-box', * name: 'name', - * values: [ 'string' ], + * values: list, * ref: React.createRef() * } } input - basic text input * @param { @@ -371,6 +379,7 @@ const RangeInputGenerator = ({ name={name} min={input.min} max={input.max} + defaultValue={input.min} step={input.step} ref={input.ref} type='range' @@ -380,4 +389,108 @@ const RangeInputGenerator = ({ ) } +const RangeGenerator = ({ + key, + label, + labelStyle, + valueStyle, + style, + name, + unit, + min, + max, + defaultValue, + step, + reference +}) => { + + const [value, setValue] = useState(0) + + return ( + <> +
+ { label + ': ' } +
+ setValue( event.target.value ) } + /> +
+ { value + ' ' + unit } +
+ + ) + +} + +/** + * Text input generator, example: + * @param { + * { + * type: 'vector', + * name: 'name', + * refDict: + * { + * x: React.createRef(), + * y: React.createRef(), + * z: React.createRef() + * } + * } } input - basic text input + * @param { + * { + * type: 'info', + * action: 'Update' + * endpoint: 'Album' + * } } info - information about form + */ +const VectorInputGenerator = ({ + input, info +}) => { + + const [value, setValue] = useState(0) + + return ( +
+
+ { input.name } +
+ { + Object.keys(input.refDict).map( (key) => { + + let name = input.name + key + info.action + info.endpoint + 'Input' + return ( +
+ +
+ ) + } + ) + } +
+ ) +} + + export default FormGenerator \ No newline at end of file diff --git a/src/components/forms/render_websocket/renderAll.js b/src/components/forms/render_websocket/renderAll.js index e69de29..2b6929f 100644 --- a/src/components/forms/render_websocket/renderAll.js +++ b/src/components/forms/render_websocket/renderAll.js @@ -0,0 +1,93 @@ +import React, { useEffect } from 'react' +import { useSelector, useDispatch } from 'react-redux' + +import { userAuthSelector } from '../../../redux/slices/userAuthSlice' +import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' + +import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' + +import AbstractWebsocket from '../abstractWebsocket' + + +const RenderAllForm = () => { + + const dispatch = useDispatch() + + const choiceListing = React.createRef() + const resolutionXRange = React.createRef() + const resolutionYRange = React.createRef() + + const { models_list } = useSelector( modelCrudSelector ) + const { user, token } = useSelector( userAuthSelector ) + + let refList = [ + choiceListing, + resolutionXRange, + resolutionYRange, + ] + + let inputList = [ + { + type: 'info', + action: 'Async', + endpint: 'render/async/all', + button_value: 'Render All Sets' + }, + { + type: 'chice-listing', + name: 'Models', + values: models_list, + ref: choiceListing + }, + { + type: 'range', + name: 'Resolution X', + min: 600, + max: 4096, + step: 10, + unit: 'px', + ref: resolutionXRange + }, + { + type: 'range', + name: 'Resolution Y', + min: 300, + max: 3112, + step: 10, + unit: 'px', + ref: resolutionYRange + }, + ] + + useEffect( + () => { + + if ( models_list.length === 0 && user.id > 0 && token !== '' ) { + dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) ) + } + + } + ) + + const bodyComparer = ( refs ) => { + return { + // fileName: refs[0].current.value, + fileName: 'testHand', + resolutionX: refs[1].current.value, + resolutionY: refs[2].current.value, + } + } + + return ( + <> + + + ) +} + +export default RenderAllForm \ No newline at end of file diff --git a/src/components/forms/render_websocket/renderSingleSet.js b/src/components/forms/render_websocket/renderSingleSet.js index e69de29..ff95594 100644 --- a/src/components/forms/render_websocket/renderSingleSet.js +++ b/src/components/forms/render_websocket/renderSingleSet.js @@ -0,0 +1,134 @@ +import React, { useEffect } from 'react' +import { useSelector, useDispatch } from 'react-redux' + +import { userAuthSelector } from '../../../redux/slices/userAuthSlice' +import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' + +import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' + +import AbstractWebsocket from '../abstractWebsocket' + + +const RenderSingleSetForm = () => { + + const dispatch = useDispatch() + + const choiceListing = React.createRef() + const setIdRange = React.createRef() + const cameraIdRange = React.createRef() + const resolutionXRange = React.createRef() + const resolutionYRange = React.createRef() + const angleRange = React.createRef() + + const { models_list } = useSelector( modelCrudSelector ) + const { user, token } = useSelector( userAuthSelector ) + + let refList = [ + choiceListing, + setIdRange, + cameraIdRange, + resolutionXRange, + resolutionYRange, + angleRange + ] + + let inputList = [ + { + type: 'info', + action: 'Async', + endpint: 'render/async/single/set', + button_value: 'Render Single Set' + }, + { + type: 'chice-listing', + name: 'Models', + values: models_list, + ref: choiceListing + }, + { + type: 'range', + name: 'Set ID', + min: 0, + max: 87, + step: 1, + unit: 'set', + ref: setIdRange + }, + { + type: 'range', + name: 'Camera ID', + min: 0, + max: 1, + step: 1, + unit: 'camera index', + ref: cameraIdRange + }, + { + type: 'range', + name: 'Resolution X', + min: 600, + max: 4096, + step: 10, + unit: 'px', + ref: resolutionXRange + }, + { + type: 'range', + name: 'Resolution Y', + min: 300, + max: 3112, + step: 10, + unit: 'px', + ref: resolutionYRange + }, + { + type: 'range', + name: 'Rotate', + min: 1, + max: 360, + step: 1, + unit: 'deg', + ref: angleRange + }, + ] + + let blocker = false + + useEffect( + () => { + + if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) { + dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) ) + if ( models_list.length === 0 ) { + blocker = true + } + } + + } + ) + + const bodyComparer = ( refs ) => { + return { + // fileName: refs[0].current.value, + fileName: 'testHand', + setID: refs[1].current.value, + cameraID: refs[2].current.value, + resolutionX: refs[3].current.value, + resolutionY: refs[4].current.value, + angle: refs[5].current.value / 62, // on backend 0.1 - 6.2 value + } + } + + return ( + <> + + + ) +} + +export default RenderSingleSetForm \ No newline at end of file diff --git a/src/components/forms/render_websocket/renderVectorImage.js b/src/components/forms/render_websocket/renderVectorImage.js index e69de29..8e3144e 100644 --- a/src/components/forms/render_websocket/renderVectorImage.js +++ b/src/components/forms/render_websocket/renderVectorImage.js @@ -0,0 +1,445 @@ +import React, { useEffect } from 'react' +import { useSelector, useDispatch } from 'react-redux' + +import { userAuthSelector } from '../../../redux/slices/userAuthSlice' +import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' + +import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' + +import AbstractWebsocket from '../abstractWebsocket' + + +const refVectorGenerator = () => { + return { + x: React.createRef(), + y: React.createRef(), + z: React.createRef(), + } +} + + +const RenderVectorSingleImageForm = () => { + + const dispatch = useDispatch() + + const choiceListing = React.createRef() + const rotateRange = React.createRef() + const cameraIdRange = React.createRef() + const resolutionXRange = React.createRef() + const resolutionYRange = React.createRef() + + // const IK_nadgarstek = refVectorGenerator() + // const IK_joint3_R = refVectorGenerator() + // const IK_joint4_R = refVectorGenerator() + // const IK_joint5_R = refVectorGenerator() + // const IK_joint6_R = refVectorGenerator() + const IK_maly_1_R = refVectorGenerator() + const IK_maly_2_R = refVectorGenerator() + const IK_maly_3_R = refVectorGenerator() + const IK_serdeczny_1_R = refVectorGenerator() + const IK_serdeczny_2_R = refVectorGenerator() + const IK_serdeczny_3_R = refVectorGenerator() + const IK_srodkowy_1_R = refVectorGenerator() + const IK_srodkowy_2_R = refVectorGenerator() + const IK_srodkowy_3_R = refVectorGenerator() + const IK_wskazujacy_1_R = refVectorGenerator() + const IK_wskazujacy_2_R = refVectorGenerator() + const IK_wskazujacy_3_R = refVectorGenerator() + const IK_kciuk_0_R = refVectorGenerator() + const IK_kciuk_1_R = refVectorGenerator() + const IK_kciuk_2_R = refVectorGenerator() + + + const { models_list } = useSelector( modelCrudSelector ) + const { user, token } = useSelector( userAuthSelector ) + + let refList = [ + choiceListing, + rotateRange, + cameraIdRange, + resolutionXRange, + resolutionYRange, + { + // IK_nadgarstek: IK_nadgarstek, + // IK_joint3_R: IK_joint3_R, + // IK_joint4_R: IK_joint4_R, + // IK_joint5_R: IK_joint5_R, + // IK_joint6_R: IK_joint6_R, + IK_maly_1_R: IK_maly_1_R, + IK_maly_2_R: IK_maly_2_R, + IK_maly_3_R: IK_maly_3_R, + IK_serdeczny_1_R: IK_serdeczny_1_R, + IK_serdeczny_2_R: IK_serdeczny_2_R, + IK_serdeczny_3_R: IK_serdeczny_3_R, + IK_srodkowy_1_R: IK_srodkowy_1_R, + IK_srodkowy_2_R: IK_srodkowy_2_R, + IK_srodkowy_3_R: IK_srodkowy_3_R, + IK_wskazujacy_1_R: IK_wskazujacy_1_R, + IK_wskazujacy_2_R: IK_wskazujacy_2_R, + IK_wskazujacy_3_R: IK_wskazujacy_3_R, + IK_kciuk_0_R: IK_kciuk_0_R, + IK_kciuk_1_R: IK_kciuk_1_R, + IK_kciuk_2_R: IK_kciuk_2_R, + } + ] + + const fingers_max = { + x: 10, + y: 10, + z: 10 + } + const fingers_min = { + x: -0.7, + y: -0.7, + z: -0.7 + } + + const validate_fingers = { + thumb: { + max:{ + part_0: { + y: 0.5, + x: 0.5, + z: 0.6 + }, + part_1: { + y: 0, + x: 0, + z: 0.7, + }, + part_2: { + y: 0, + x: 0, + z: 0.7, + } + }, + min: { + part_0: { + y: -0.3, + x: 0, + z: -0.3, + }, + part_1: { + y: -0.1, + x: 0, + z: 0, + }, + part_2: { + y: 0, + x: 0, + z: -0.4, + } + } + }, + others: { + max: { + part_1: { + y: 0.2, + x: 0, + z: 0.7 + }, + part_2: { + y: 0, + x: 0, + z: 1.6 + }, + part_3: { + y: 0, + x: 0, + z: 0.7 + } + }, + min: { + part_1: { + y: -0.3, + x: 0, + z: -0.3 + }, + part_2: { + y: 0, + x: 0, + z: 0 + }, + part_3: { + y: 0, + x: 0, + z: 0 + } + } + } + + } + + let inputList = [ + { + type: 'info', + action: 'Async', + endpint: 'render/async/single/image', + button_value: 'Render Single Image' + }, + { + type: 'chice-listing', + name: 'Models', + values: models_list, + ref: choiceListing + }, + { + type: 'range', + name: 'Rotate', + min: 1, + max: 360, + step: 1, + unit: 'deg', + ref: rotateRange + }, + { + type: 'range', + name: 'Camera ID', + min: 0, + max: 1, + step: 1, + unit: 'camera index', + ref: cameraIdRange + }, + { + type: 'range', + name: 'Resolution X', + min: 600, + max: 4096, + step: 10, + unit: 'px', + ref: resolutionXRange + }, + { + type: 'range', + name: 'Resolution Y', + min: 300, + max: 3112, + step: 10, + unit: 'px', + ref: resolutionYRange + }, + // { + // type: 'vector', + // name: 'Wirst (experimental)', + // native: 'Nadgarstek', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_nadgarstek, + // }, + // { + // type: 'vector', + // name: 'Litte Finger Joint 3 (experimental)', + // native: 'Mały Palec Joint 3', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint3_R, + // }, + // { + // type: 'vector', + // name: 'Ring Finger Joint 4 (experimental)', + // native: 'Serdeczny Palec Joint 4', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint4_R, + // }, + // { + // type: 'vector', + // name: 'Middle Finger Joint 5 (experimental)', + // native: 'Środkowy Palec Joint 5', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint5_R, + // }, + // { + // type: 'vector', + // name: 'Index Finger Joint 6 (experimental)', + // native: 'Wskazujący Palec Joint 6', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint6_R, + // }, + { + type: 'vector', + name: 'Litte Finger 1', + native: 'Mały 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_maly_1_R, + }, + { + type: 'vector', + name: 'Litte Finger 2', + native: 'Mały 2', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_maly_2_R, + }, + { + type: 'vector', + name: 'Litte Finger 3', + native: 'Mały 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_maly_3_R, + }, + { + type: 'vector', + name: 'Ring Finger 1', + native: 'Serdeczny 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_serdeczny_1_R, + }, + { + type: 'vector', + name: 'Ring Finger 2', + native: 'Serdeczny 2', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_serdeczny_2_R, + }, + { + type: 'vector', + name: 'Ring Finger 3', + native: 'Serdeczny 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_serdeczny_3_R, + }, + { + type: 'vector', + name: 'Middle Finger 1', + native: 'Środkowy 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_srodkowy_1_R, + }, + { + type: 'vector', + name: 'Middle Finger 3', + native: 'Środkowy 3', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_srodkowy_2_R, + }, + { + type: 'vector', + name: 'Middle Finger 3', + native: 'Środkowy 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_srodkowy_3_R, + }, + { + type: 'vector', + name: 'Index Finger 1', + native: 'Wskazujący 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_wskazujacy_1_R, + }, + { + type: 'vector', + name: 'Index Finger 2', + native: 'Wskazujący 2', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_wskazujacy_2_R, + }, + { + type: 'vector', + name: 'Index Finger 3', + native: 'Wskazujący 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_wskazujacy_3_R, + }, + { + type: 'vector', + name: 'Thumb 0', + native: 'Kciuk 0', + min: validate_fingers.thumb.min.part_0, + max: validate_fingers.thumb.max.part_0, + refDict: IK_kciuk_0_R, + }, + { + type: 'vector', + name: 'Thumb 1', + native: 'Kciuk 1', + min: validate_fingers.thumb.min.part_1, + max: validate_fingers.thumb.max.part_1, + refDict: IK_kciuk_1_R, + }, + { + type: 'vector', + name: 'Thumb 2', + native: 'Kciuk 2', + min: validate_fingers.thumb.min.part_2, + max: validate_fingers.thumb.max.part_2, + refDict: IK_kciuk_2_R, + }, + ] + + let blocker = false + + useEffect( + () => { + + if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) { + dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) ) + if ( models_list.length === 0 ) { + blocker = true + } + } + + } + ) + + const bodyComparer = ( refs ) => { + + let vectors = {} + + console.log( refs ) + + Object.keys(refs[5]).map( + ( key ) => { + let singleFinger = { + scale: 0, + x: 0, + y: 0, + z: 0 + } + singleFinger['scale'] = 0.9 + singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value) + singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value) + singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value) + vectors[key] = singleFinger + } + ) + + return { + // fileName: refs[0].current.value, + 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, + vectors: vectors + } + } + + return ( + <> + + + ) +} + +export default RenderVectorSingleImageForm \ No newline at end of file diff --git a/src/pages/func_group/render/renderIndex.js b/src/pages/func_group/render/renderIndex.js index 989e616..11d7786 100644 --- a/src/pages/func_group/render/renderIndex.js +++ b/src/pages/func_group/render/renderIndex.js @@ -3,6 +3,10 @@ import React, { useState, useEffect } from 'react' import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload' import RenderSingleImageForm from '../../../components/forms/render_websocket/renderSingleImage' +import RenderSingleSetForm from '../../../components/forms/render_websocket/renderSingleSet' +import RenderAllForm from '../../../components/forms/render_websocket/renderAll' + +import RenderVectorSingleImageForm from '../../../components/forms/render_websocket/renderVectorImage' const __handleSwap = (name, movement) => { @@ -43,6 +47,15 @@ const RenderIndex = ( movement ) => {
+
+ +
+
+ +
+
+ +
) } diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index 093a2ff..f03c5ac 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -19,6 +19,7 @@ const initialState = { address: '', room_uuid: '', messages: [], + percents: 0.0, connected: false } @@ -32,6 +33,7 @@ const renderWebsocketSlice = createSlice( state.address = GeneralAddressWS + action.payload.address state.web_socket_address = state.address + state.room_uuid state.messages = [] + state.percents = 0.0 state.connected = true }, saveMessage(state, action) { @@ -39,6 +41,10 @@ const renderWebsocketSlice = createSlice( ...state.messages, action.payload.message ] + state.percents = action.payload.message.info + }, + resetMessages(state) { + state.messages = [] }, disconnect(state) { state.web_socket_address = ''