Coding project Judas and kevin


#1

Kevin is trying to learn to code so I challenged him to make a specific improvement to the viewer.
Regardless of weather this change is adopted we want to try to make it
for the hell of it
I want a new check box in the edit.js entity properties.
I want this check box to make an animation play forever.
Previously I asked @chris how to make this happen and you simply have to change a false to true.
Should be fairly straightforward for a coder to do this.
But kevin and I are enthusiastic idiots.

What we have done is look at edit.js we found no reference to animation is playing
step 2 we looked at the script includes in edit.js and we found one of the library files called entity property dialogue box. which has a decoration of animation is playing on line 28
however when u look at animation is playing check box on line 61 it references a properties.animation is playing

when you look at the properties declarations there is no reference to loop = true or false
so were stuck.

Can we have a clue , is it tied to a json reference if so where and how do we proceed …


#2

Prepare your dilithium crystal-thingy-majigs… Err wrong thing, I mean…

The specific setting you are looking for is animationSettings. under this you can find loop.

Entity also has the following animation related variables

animationURL: String url to anim,
animationPlaying: boolean, (this seems redundant, but i havent tested enough)
animationSettings: AnimationSetting Object

AnimationSetting Object contains

fps: number, speed of the animation
firstFrame: first frame to be played 
lastFrame: last frame to be played before loop or hold or stop.
frameIndex: int (current running frame)
running: boolean
hold: boolean
loop: boolean
startAutomatically: boolean

Basically the animation system is based on having a “single” bundled animation with all the possible animations, on the object and just alternating the firstFrame/ lastFrame.

Unfortunately:

This is related.
https://alphas.highfidelity.io/t/animation-settings-and-scripts/6027

Basically as of the moment you need to convert animation String information into a json object using the JSON helper.

Otherwise it would be as simple as:

properties = Entities.getEntityProperties(entityID);
properties.animationSettings.loop = false
Entities.editEntity(entityID, properties)

For now we have to do it using

 Entities.editEntity(entityID, {
            animationSettings: '{ "fps": 13, "firstFrame": 0, "lastFrame": 100, "frameIndex": 0, "running": true, "hold": false, "loop": false, "startAutomatically":true}'
          });

if animationSettings is not defined, then there is no animation playing.


#3

Thanks for the reply but you may have missed what i was getting at.
Were looking to create a new check box in the entity properties that automatically changes
"startAutomatically":false}
to
"startAutomatically":true}’’


#4

Where does this code physically exist in what .js file specifically?
Entities.editEntity(entityID, {
animationSettings: ‘{ “fps”: 13, “firstFrame”: 0, “lastFrame”: 100, “frameIndex”: 0, “running”: true, “hold”: false, “loop”: false, “startAutomatically”:true}’
});


#5

@KevinM​Thomas Example was from my teleporter script I was using: http://www.norteclabs.com/HF/labs/teleporter/teleporter.js which is available in Earth.

@Judas if you are talking about the Edit.js UI improvements, (specifically the checkbox you mention) its an HTML entity that triggers a JS event: same concepts still apply:
specifically https://github.com/highfidelity/hifi/blob/master/examples/html/entityProperties.html
Practically all UI windows launched through scripts are done through .html :slight_smile:

So to add it youd need to work on properties from line 413 (this is selected object) and manipulate it on html events around #property-model-animation-settings


#6

Thanks @Menithal if you picture us both with pipes and beards stood scratching our heads and muttering to eachother
we may be goin forwards again much like a child learning to ride a bicycle


#7
<div class="model-section property">
            <span class="label">Animation Loop</span>
            <span class="value">
                <input type='checkbox' id="property-model-animation-playing">
            </span>
        </div>

We have added this to the html file you referernced. How do we now edit that loop value to TRUE rather than false? How do we make this so?


#8

are you guys looking for a spoiler solution or just clues still?

in case clues – your overall task is a little more complicated than it might seem since it involves:

  • knowing the current state of startAutomatically
  • which could be true, false, undefined or other (eg: junk values, “Error parsing JSON,” etc.)…
  • and doesn’t exist anywhere very concrete (instead it’s embedded into animationSettings string value)
  • reflecting that current state onto the checkbox
  • … just trace backwards in the code from elVisible.checked = ... for ideas…
  • updating the current state as the checkbox is checked/unchecked
  • which is the complicated part; you’ll probably want to think of animationSettings in terms of its HTML input box – using that input box’s .value as both your data source and data destination.
  • update pseudocode: ob = JSON.parse(...); ob.startAutomatically = checkbox.checked; animationsettings.value = JSON.stringify(ob)

#9

Remember to also update the property-model-animation-playing to property-model-animation-loop. Otherwise you are triggering playing’s event.

Notice: pseudocode:

Heres a list of things you have to do:

  1. Get the HTML element as a Javascript object, Similar to line 280 ( document.getElementById is quite standard JS method, )

  2. You have to bind an Event listener to a change event to the javascript object, similar to elAnimationLoop.addEventListener(‘change’, function() )

  3. You have to create a new property updater for animations Settings, similar to lines 31-36, but instead as a new function that only affects animationSettings properties (something akin to)

    function createAnimationSettingsUpdateFunction( settings ){
    return function() {
    EventBridge.emitWebEvent(
    JSON.stringify({ “type”:“update”, “properties”:{“animationSettings”: settings }})
    );
    };
    }

and then calling in the checked event

createAnimationSettingsUpdateFunction( { animationLoop:  elAnimationLoop.checked } )

#10

I want clues kev wants thoys to do it all for him :smiley:


#11

Could we please have a live stream of you two trying to figure it out? :stuck_out_tongue:


#12

that was suppose to play from 4.41


#13

@thoys would be helpful. I did attempt to mod the entityProperties.html file however it is not connected. I reached out to @Menithal with my updated file and will try to learn.


#14

#15

in case curious to see what the parsing/stringifying situation would basically look like without the WebWindow aspect, here’s a quick example of using two helper functions to achieve something like animationSetting.fps += 1.


#16