React -> big upgrades && big fixes

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 { renderWebsocketSelector } from '../../redux/slices/renderWebsocketSlice'
-import { connect, saveMessage, disconnect } 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 (
+        <div style={ { width: '300px', height: '20px' } }>
+            <div style={ { width: '100%', height: '100%', marginBottom: '-20px', textAlign: 'center' } }>
+                {
+                    typeof percents === 'number'
+                    ? 'Progress: ' + percents + '%'
+                    : percents
+                }
+            </div>
+            <div style={ { width: '100%', height: '100%', backgroundColor: 'white' } }>
+                {
+                    typeof percents === 'number'
+                    ? <div style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }>
+                      </div>
+                    : <div style={ { width: '100%', height: '100%', backgroundColor: 'green' } }>
+                      </div>
+                }
+            </div>
+        </div>
+    )
+
+}
+
+
+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 }
             />
+            <ProgressBar />
             {
                 connected
                 ? 
@@ -138,24 +177,54 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => {
                         Connect
                     </button>
             }
+            <div>
             {
                 messages.map( (item) => {
                         return (
-                            <>
+                            <div>
-                                <div>
+                                <>
-                                    { item.info }
+                                    {
-                                </div>
+                                        Object.keys(item).map( (key) => {
-                                <div>
+
-                                    { item.details }
+                                                if ( key == 'details' ) {
-                                </div>
+                                                    return (
-                                <div>
+                                                        <>
-                                    { item.group }
+                                                            {
-                                </div>
+                                                                Object.keys(item[key]).map( (keyTwo) => {
-                            </>
+                                                                        return (
+                                                                            <div>
+                                                                                { '    ' + keyTwo + ': ' + item[key][keyTwo] + ' ' }
+                                                                            </div>
+                                                                        )
+                                                                    }
+                                                                )
+                                                            }
+                                                        </>
+                                                    )
+                                                } else if ( key === 'image' ) {
+                                                    return (
+                                                        <img 
+                                                            src={ 'data:image/png;base64, ' + item[key] }
+                                                            style={ { width: '300px', height: '200px' } }
+                                                        />
+                                                    )
+                                                } else {
+                                                    return (
+                                                        <>
+                                                        { key + ': ' + item[key] + ' ' }
+                                                        </>
+                                                    )
+                                                }
+                                            } 
+                                        )
+                                    }
+                                </>
+                            </div>
                         )
                     }
                 )
             }
+            </div>
         </>
     )
 }

src/components/forms/formGenerator.js

@@ -93,6 +93,14 @@ export const FormGenerator = ({
                                 key={key}
                             />
                         )
+                    } else if (input.type === 'vector') {
+                        return (
+                            <VectorInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
                     }
                 })
             }
@@ -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 (
+        <>
+            <div style={ labelStyle }>
+                { label + ': ' }
+            </div>
+            <input
+                key={key}
+                style={ style }
+                id={ name }
+                name={ name }
+                min={min}
+                max={max}
+                defaultValue={ defaultValue }
+                step={step}
+                ref={reference}
+                type='range'
+                onChange={ event => setValue( event.target.value ) }
+            />
+            <div style={ valueStyle }>
+                { value + ' ' + unit }
+            </div>
+        </>
+    )
+
+}
+
+/**
+ * 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 (
+        <div style={ { display: 'flex', width: '' } }>
+            <div style={ { width: '300px' } }>
+                { input.name }
+            </div>
+            {
+                Object.keys(input.refDict).map( (key) => {
+
+                        let name = input.name + key + info.action + info.endpoint + 'Input'
+                        return (
+                            <div style={ { display: 'flex', width: '150px' } }>
+                                <RangeGenerator 
+                                    key={key}
+                                    label={key}
+                                    labelStyle={ { width: '40px' } }
+                                    valueStyle={ { width: '100px' } }
+                                    style={ { width: '80px' } }
+                                    name={name}
+                                    unit={ '' }
+                                    min={input.min[key]}
+                                    max={input.max[key]}
+                                    defaultValue={input.min[key]}
+                                    step={0.1}
+                                    reference={input.refDict[key]}
+                                />
+                            </div>
+                        )
+                    }
+                )
+            }
+        </div>
+    )
+}
+
+
 export default FormGenerator

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 (
+        <>
+            <AbstractWebsocket 
+                addressWS={ '/all/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </>
+    )
+}
+
+export default RenderAllForm

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 (
+        <>
+            <AbstractWebsocket 
+                addressWS={ '/single/set/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </>
+    )
+}
+
+export default RenderSingleSetForm

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 (
+        <>
+            <AbstractWebsocket 
+                addressWS={ '/vector/single/image/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </>
+    )
+}
+
+export default RenderVectorSingleImageForm

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 ) => {
             <div style={ __handleSwap( 'render_single_image', movement ) }>
                 <RenderSingleImageForm />
             </div>
+            <div style={ __handleSwap( 'render_single_set', movement ) }>
+                <RenderSingleSetForm />
+            </div>
+            <div style={ __handleSwap( 'render_all', movement ) }>
+                <RenderAllForm />
+            </div>
+            <div style={ __handleSwap( 'render_image_by_vector', movement ) }>
+                <RenderVectorSingleImageForm />
+            </div>
         </div>
     )
 }

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 = ''