#JSON-UI General

1 messages · Page 55 of 1

patent bramble
#

Each time I look at it is more confusing than the last

manic dragon
#

Ig just copy the entire file then and modify parts of it to see the change

patent bramble
#

Like for example that screen content trick you showed me was nowhere

patent bramble
#

Welp

#

I guess that's that

#

I know modifications can only affect controls iirc

manic dragon
manic dragon
patent bramble
#

I have fragmented parts of everything

#

Just no complete picture

#

I don't like changing UI I don't have to as that's just as bad to me as texture packs that insert all vanilla textures only to change a few

#

compatibility and all that I guess

#

If I can just get an example of changing a vanilla screen I think I could learn a lot quicker

manic dragon
patent bramble
#

I know what most of the basics do

#

It's just applying them in context

#

I remember seeing something like this

rn_image_picker_lib_temp_bf36950e-fd50-4a03-ac6a-1f989046175c.jpg
#

But I need to browse the wiki again for the exact format

#

Then I just make that new control right?

rn_image_picker_lib_temp_cdb22dc4-63f1-44e2-9f9f-08bb8634d411.jpg
#

@manic dragon

manic dragon
# patent bramble I remember seeing something like this

If you select the operation to be "replace" then you also need to specify which control to replace. So you specify that name in control_name
value will be the code you want to put in that place. Can be an object or array of objects

patent bramble
#

So I'm doing it right or wrong?

#

Can you tell I hate this?

#

Im too broke to commission anyone to make the pack for me so suffering it is

manic dragon
patent bramble
#

I think my control name is right here?

#

Wait no nevermind

#

Cause this would replace just the panel

#

Which can't be modified position and anchor-wise

#

I swear to jebus Im gonna get myself put in the emergency ward for thinking so hard I lose consciousness

#

Why'd they have to use json

#

Any other medium would have been 10x better

#

I'll take assembly code atp

manic dragon
patent bramble
#

Isnt this the cheaty way?

manic dragon
#

wdym

patent bramble
#

I wont learn by taking shortcuts

#

As much as this makes me want to drop myself off a 2 story building I have to learn

#

Full ore UI implementation isn't coming from at least another half decade so

#

I don't have much choice

#

I need to stop having these ideas

#

Every time I want to do something like this. I end up quitting a couple days later because JsonUI is the single most difficult "programming" challenge I've ever tackled

#

I can write a hello world program in assembly code but not this

#

What is wrong with me?

#

Im just going to do it the lazy way and copy the entire file

burnt osprey
#

it is not that hard

patent bramble
#

Clearly it is to me

#

Cause apparently I'm restarted

torpid remnant
#

😔

patent bramble
#

Also why do we not have a reload resources button?

#

I have to take off and put back on the pack every time

burnt osprey
#

if you're working in a world you can use the dev rp folder or something

patent bramble
#

Start_screen

#

I quit
-# for like the 14th time this year

burnt osprey
#

uh oh sorry then no idea
most of my rp stuff is server and so

610E00D9-A2FD-42AA-8034-9730F04211EE.png
patent bramble
#

I tried the full file and nothing I do changes anything

#

I could delete every reference of the play button in the UI and it would SOMEHOW still be there

#

Maybe im just not built for development

burnt osprey
#

I am sure there must be existing addons or ui online which you could check for examples or refs

patent bramble
#

I have

#

So many of them

#

They're all the doing the same thing and yet when I do it
NOTHING HAPPENS

#

I need to stop im just making myself look like a clown with all this venting

#

Last I checked that only works on worlds

#

Besides I've already deleted everything

burnt osprey
#

What are you trying to change exactly

patent bramble
#

Move
the play button
to the left
of the screen

#

Turning the whole menu into a sidebar rather than front and center

#

But Nooooooo
Json UI has to just be special

#

Im leaving, Im making a fool of myself

torpid remnant
# 
{
 "main_buttons_panel": {"ignored": true},
 "start_screen_content": {
  "modifications": [
    {
      "array_name": "controls",
      "operation": "insert_front",
      "value": [
        {
          "stacked_rows": {
            "type": "stack_panel",
            "size": [200, "100%c"],
            "offset": ["1%", 0],
            "anchor_from": "left_middle",
            "anchor_to": "left_middle",
            "controls": [
              {
                "play_button@common_buttons.light_text_button": {
                  "size": ["100%", 25],
                  "$pressed_button_name": "$play_button_target",
                  "$button_text": "menu.play",
                  "button_mappings": [
                    {
                      "from_button_id": "button.menu_select",
                      "to_button_id": "$pressed_button_name",
                      "mapping_type": "pressed"
                    },
                    {
                      "from_button_id": "button.menu_ok",
                      "to_button_id": "$pressed_button_name",
                      "mapping_type": "pressed"
                    },
                    {
                      "to_button_id": "play_button.is_hovered",
                      "mapping_type": "pressed"
                    }
                  ]
                }
              },
              {
                "settings_button@common_buttons.light_text_button": {
                  "size": ["100%", 25],
                  "$pressed_button_name": "button.menu_settings",
                  "$button_text": "menu.settings"
                }
              },
              {
                "store_button@common_buttons.light_text_button": {
                  "size": ["100%", 25],
                  "$pressed_button_name": "button.menu_store",
                  "$button_text": "menu.store"
                }
              }
            ]
          }
        }
      ]
    }
  ]
 }
}
weak cape
#

Have you thought about a place where you save all your encountered knowledge? Notes app or a book?

burnt osprey
#

so true
and the search bar of this discord server is so helpful, found my 90% answers here hehe

burnt osprey
# patent bramble Im leaving, Im making a fool of myself

is this what you're trying to achieve?

{
  "namespace": "start",

  "main_buttons_stack_panel": {
    "type": "panel",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "[email protected]_button_stack": {
          "size": [ 150, 32 ],
          "anchor_from": "left_middle",
          "anchor_to":   "top_left",
          "offset": [ 0, -100 ]
        }
      },
      {
        "[email protected]_buttons_panel": {
          "$play_button_visible": false,
          "anchor_from": "left_middle",
          "anchor_to":   "top_left",
          "offset": [ 0, -64 ]
        }
      }
    ]
  }
}
10214759-9462-45B0-91CE-3F1B059D2C82.png
patent bramble
candid shadow
patent bramble
#

I've never heard of "floating_play"

burnt osprey
candid shadow
patent bramble
#

I thought you had to use modifications to edit existing elements?

burnt osprey
#

you can give it so it doesnt collide with mojang's own play control

patent bramble
#

This is probably why I've been so confused

#

I thought that
"Hey so this is an already existing element so to modify it, I would need to use a modifications array targeting the controls of that element"

candid shadow
patent bramble
#

I guess the name is partially misleading

candid shadow
candid shadow
#

Or even replace

patent bramble
#

This is exactly why I need a teacher cause the wiki doesn't mention this at all

#

It teaches you how to make custom elements

#

Not how to edit existing ones

candid shadow
#

I recommend the bedrock wiki, I learnt Json UI from there

patent bramble
#

So I'm not as much as a dumbah as I thought?

candid shadow
patent bramble
#

Maybe there is hope for me still

candid shadow
burnt osprey
#

it does require a LOT of patience though

patent bramble
#

Like today

#

I tried so much

candid shadow
#

And the game will treat the file as if it doesn't exist

hoary skiff
#

How do yall make button on hud screen clickable

#

doesn't pass through the background

hoary skiff
#

Nvm found it

#

prevent_touch_input

candid shadow
#

Does anyone why the smithing table screen doesn't react to property modifications at all? I don't get any error either.

{
  "namespace": "smithing_table_2_pocket",

  //-------------------
  // Right Panel
  //-------------------

  "right_panel":{
    "visible": false,
    "$cell_texture":"textures/ui/smithing/cell_smithing",
    "$background_texture":"textures/ui/smithing/screen_background_smithing",
    "$title_background_texture":"textures/ui/smithing/title_background_smithing",
    "modifications":[
      {
        "array_name":"controls",
        "operation":"remove",
        "control_name": "right_navigation_tabs"
      }
    ]
  },

  "upgrade_label":{
    "color":[0.102,0.106,0.118]
  },

  "arrow_icon":{
    "texture": "textures/ui/smithing/arrow_smithing"
  },

  //-----------------
  // Left Panel
  //-----------------

  "left_panel/gamepad_helpers_and_tabs_holder":{
    "modifications":[
      {
        "array_name":"controls",
        "operation":"remove",
        "control_name": "left_navigation_tabs"
      }
    ]
  }
}```
#

I even tried modifying smithing_table_screen_pocket.json, but still nothing

#

I remember someone suggesting me to interfere with the entry points smithing_table.json, but changing the conditions at which a screen renders doesn't change anything

#

oh that's why... I wrote smithing_table_screen_2.json instead of smithing_table_2_screen.json for the file's name... Well I guess a 2 week dilemma has been resolved

clever maple
#

Does anyone know how to make the textField bigger?

night holly
clever maple
#

For like this

image.png
#

And this

image.png
night holly
#

oh the stretching is just a json ui moment

#

you can make the panel bigger on the y?

clever maple
#

can I not just make the textfield bigger?

night holly
#

well yeah but bigger how

clever maple
#

in the y direction like you said

night holly
#

think its a variable in this case lemme take a quick look

clever maple
#

Ok thanks

night holly
# clever maple Ok thanks 
  "namespace": "server_form",

    "generated_contents": {
    "factory":{
      "name": "buttons",
      "control_ids": {
        "label": "@server_form.custom_label",
        "toggle": "@server_form.custom_toggle",
        "slider": "@server_form.custom_slider",
        "step_slider": "@server_form.custom_step_slider",
        "dropdown": "@server_form.custom_dropdown",
        "input": "@server_form.multiline_input",
        "header": "@server_form.custom_header",
        "divider": "@settings_common.option_group_section_divider"
      }
    }
  },

  "[email protected]_panel": {
    "size": ["100%", "100%c + 6px"],
    "controls": [
      {
        "input_box@input_box": {}
      }
    ]
  },

  "[email protected]_text_edit_box": {
    "$option_label": "#custom_text",
    "size": [ "100%", 60 ],
    "$text_edit_box_placeholder_content_binding_name": "#custom_placeholder_text",
    "$text_edit_box_placeholder_content_binding_type": "collection",
    "$text_edit_box_grid_collection_name": "custom_form",
    "max_length": 100,
    "$text_edit_box_content_binding_type": "collection",
    "$text_edit_box_content_binding_name": "#custom_input_text",
    "$option_binding_name": "#custom_input_text",
    "$text_box_enabled_binding_name": "#custom_input_enabled",
    "$text_box_name": "custom_input"
  }
}```
#

try that out

#

i believe this is what you were trying to achieve?

image.png
clever maple
#

yes thanks

night holly
#

you can extend "max_length": 100, to whatever character length u want (not sure if theres a limit)

oak verge
#

it allows more text by default

clever maple
#

you mean UI?

clever maple
night holly
#

you can try using scrollable_multiline_text_edit_box instead

clever maple
#

insteadof @common.empty_panel?
so like @common.scrollable_multiline_text_edit_box

night holly
#

in the bottom part, that empty panel is purely for padding, the + 6px can be altered if you want more space between that and other elements. you want to edit this part:

"[email protected]_multiline_text_edit_box": {

#

so like this ```{
"namespace": "server_form",

"generated_contents": {
"factory":{
  "name": "buttons",
  "control_ids": {
    "label": "@server_form.custom_label",
    "toggle": "@server_form.custom_toggle",
    "slider": "@server_form.custom_slider",
    "step_slider": "@server_form.custom_step_slider",
    "dropdown": "@server_form.custom_dropdown",
    "input": "@server_form.multiline_input",
    "header": "@server_form.custom_header",
    "divider": "@settings_common.option_group_section_divider"
  }
}

},

"[email protected]_panel": {
"size": ["100%", "100%c + 6px"],
"controls": [
{
"input_box@input_box": {}
}
]
},

"[email protected]_multiline_text_edit_box": {
"$option_label": "#custom_text",
"size": [ "100%", 60 ],
"$text_edit_box_placeholder_content_binding_name": "#custom_placeholder_text",
"$text_edit_box_placeholder_content_binding_type": "collection",
"$text_edit_box_grid_collection_name": "custom_form",
"max_length": 500,
"$text_edit_box_content_binding_type": "collection",
"$text_edit_box_content_binding_name": "#custom_input_text",
"$option_binding_name": "#custom_input_text",
"$text_box_enabled_binding_name": "#custom_input_enabled",
"$text_box_name": "custom_input"
}
}

#

it doesnt actually have a scroll bar built in i dont think, but it does scroll

clever maple
#

I cant click on the textfield anymore

night holly
#

weird it works for me

#

idk how fleshed out these components are for other platforms tho

clever maple
night holly
#

not sure tbh, thats just the way it was setup in the common files

clever maple
#

hmm Ok I removed it for now but thanks anyway

mint charm
#

how bad does it look?

image.png
oblique gust
#

Wanna ask how do they make hud screen controllable and still showing even if form screen is active

#

Like you can still touch dpad/joystick/move camera while interacting to form ui

#

I reviewed it here but I still don't get it how some properties work:

    "[email protected]_screen": {
"is_showing_menu": "(not ($touch and (not $is_pregame)))",
        "absorbs_input": "(not ($touch and (not $is_pregame)))",
        "render_only_when_topmost": "(not ($touch and (not $is_pregame)))",
        "low_frequency_rendering": true,
        "render_game_behind": true,
        "$is_full_screen_layout": true,
        "$screen_background_control": "common.empty_panel",
        "$screen_bg_content": "common.empty_panel",
        "$screen_animations": [],
        "$background_animations": [],
        "button_mappings": [
            {
                "from_button_id": "button.menu_cancel",
                "to_button_id": "button.menu_exit",
                "mapping_type": "global"
            }
        ]
    },
#

This is source code from custom buttons addon I saw

oblique gust
#

Also adjust the icon size or font size, it's distracting and doesn't group with the text

clever maple
night holly
#

You’ll need to look at how the placeholder text is applied, best to root around in the files where these come from, ui common, settings common etc

clever maple
#

ok

patent bramble
#

@burnt osprey
I'm actually getting somewhere for once

rn_image_picker_lib_temp_6876ead2-192b-4213-9bb6-af0e9e15c4f2.jpg
#

Does anyone know what that realms button on the main menu is called?

rn_image_picker_lib_temp_29c7cac8-686c-4318-903e-2e0a1e46b219.jpg
#

I cant seem to find it

#

And am I able to change it to default panel color?

burnt osprey
#

realms_button

patent bramble
#

Why am I enjoying this?

#

This feels wrong but right at the same time

patent bramble
#

It's giving me that "realms server" thing

burnt osprey
#

send code please

patent bramble
#

Also am I crazy or is the realms texture like a pixel larger?

#

I would prefer to change it to be like the others but no clue how yet

burnt osprey
#

Mm

#

did you hide the original buttons

patent bramble
#

I moved them

#

The only "unique" 1 is play

#

Can you tell what im going for at least?

rn_image_picker_lib_temp_b7dfb410-96fd-441f-bcca-e86d2de953c1.jpg
#

@burnt osprey
Would it just be easier to make my own non-templated buttons and figure out how to do bindings manually?

burnt osprey
patent bramble
#

I've just noticed that they seem to be varied in since so why not use the common library?

burnt osprey
#

just put each button in your own panel

patent bramble
#

"eclipse_start@common_ui":{
"type":"button"
}

patent bramble
#

Cause dont I need the vanilla refs?

burnt osprey
#

you don't need to copy vanilla definitions into your pack

patent bramble
#

I mean like the @vanilla_control_name

burnt osprey
# patent bramble Can you give me an example? 
{
  "namespace": "start",
  "main_buttons_stack_panel": {
    "type": "panel",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "play_holder": {
          "type": "panel",
          "size": [ 150, 30 ],
          "anchor_from": "left_middle",
          "anchor_to": "top_left",
          "offset": [ 10, -50 ],
          "controls": [
            { "[email protected]_button": {} }
          ]
        }
      }
    ]
  }
}```
patent bramble
#

And this would fix the weird sizing issues?

burnt osprey
#

you can modify the size

patent bramble
#

I meant like when I referenced the vanilla assets they were all like 1 pixel off
This is suppose to be uniform

rn_image_picker_lib_temp_945dc52a-7bdd-450e-9037-2e03897f84a9.jpg
burnt osprey
#

try size: ["100%", "100%"] on the holder

patent bramble
#

That's kinda stupid to me icl

burnt osprey
patent bramble
#

So what does this nested controls method actually change about how the game reads these?

mint charm
#

@manic dragon One question, regarding forms, what would be the problem if the buttons for controller players couldn't be pressed?

manic dragon
#

If focus isn't enabled
Basically "focus_enabled": true is not in the button

patent bramble
#

I'm so confused

#

When I changed eclipse_play
The size changed but for the others they stayed the same

burnt osprey
#

First, it changes who owns the layout
Second, did you apply the size override to play only? because it has to go on every button.

patent bramble
mint charm
#

You sound like the gpt chat of the json when someone asks you something.

#

You know a lot

burnt osprey
patent bramble
#

Why did you anchor to and from differently again?

#

Its back to normal but the sizes are still wierd

rn_image_picker_lib_temp_b9e6e982-e0b1-47fb-b56b-ab08da178098.jpg
weak cape
#

how do you feel @manic dragon

manic dragon
#

I'm gonna start selling subscriptions soon xD

weak cape
#

lol

candid shadow
mint charm
#

Hey, a question, to obtain the UUID of the entity, I know it can be done directly from a script, but isn't there a faster way to do it from json?

jolly rock
#

No

manic dragon
placid geode
mint charm
oak verge
patent bramble
#

Bindings are what control where UI leads right?

west dawn
#

it is mainly used for handling and manipulating data

patent bramble
#

I thought maybe I just remake the buttons from the ground up instead of using inheritance

#

Ignore the original menu (my new layout is on the left)
every single button seems to have its own size

rn_image_picker_lib_temp_598a7fa7-b9c3-4a9e-ba97-783d359d232b.jpg
#

Also ignore profile I just haven't moved it yet

#

I don't know what could be causing this as I've tried explicit size

west dawn
patent bramble
west dawn
#

Depending on how it set up, the size can also be constrained by the child elements. Meaning that maybe its something with the text

patent bramble
#

Tbh this kinda confusion is the whole reason I gave up so quickly before

#

Makes a perfectly structured UI:
Minecraft: "no :)"

west dawn
#

Well looks like they are regretting that decision as well

patent bramble
#

Let's hope ore UI will be better

candid shadow
hoary skiff
#

How to override the animation type of screen

manic dragon
hoary skiff
cyan flint
#

How do I hide elements based on their collection index?

jolly rock
#

Get the #collection_index

#

And

#

source: (not (#collection_index = 0))
target: #visible

hoary skiff
#

Do we can edit the panorama screen

clever vapor
hoary skiff
#

thanks

candid shadow
#

Is it possible to swap the values in a array binding. Like if #equip_grid_dimensions gives me [x,y] can I manipulate it so that it gives me [y,x] instead?

clever vapor
#

you can't even get the values as seperate

candid shadow
#

I guess it's a no then, thanks

hoary skiff
#

Is it possible to make horizontal scrollable panel

manic dragon
hoary skiff
#

I see, they just put the elements under scrollbar box to act like horizontal scroll

night holly
#

Had this issue for ages but just never bothered to ask, anyone that makes use of preserved title text, have you ever noticed that you can only run it once every 20 ticks or so? otherwise the game just never registers the change/update? I dont know if it might be due to me using it on such a large scale for my hud, but its super annoying for stuff you want to update fast

plush spruce
night holly
#

gotcha, but the issue is somin youve also seen?

plush spruce
#

it likes to pick and choose

night holly
#

I seee yea that sounds about right lol, ty

plush spruce
#

np

plush spruce
# night holly I seee yea that sounds about right lol, ty

i use this system if it might help you

export function addUi(player, updateKey, content, delay = 0) {
    const task = () => {

        // Get existing data or start fresh
        const rawData = player.getDynamicProperty("ui_queue") || "{}";
        const queue = JSON.parse(rawData);

        // Set the new content (overwrites same key, preserves others)
        queue[updateKey] = `${updateKey}${content}`;

        // Save back to the player
        player.setDynamicProperty("ui_queue", JSON.stringify(queue));
    };

    if (delay > 0) {
        system.runTimeout(task, delay);
    } else {
        task();
    }
}

export function showUi(player) {
    const playerData = getPlayerData(player);

    const uiLines = [
        `update:one: ${convertText(`${formatWithCommas(playerData.gems)}`, "lightblue")}`, //Gems
        `update:two:§a$§f${convertText(metricNumbers(playerData.balance), "white")}`, //Balance
        `update:three: ${convertText(`${formatWithCommas(playerData.minedust)}`, "purple")}`, //Minedust
        `update:four: Quests to-do`, //Quests
        `update:five:${convertText(`${(playerData.sell_multiplier).toFixed(2)}x`, "grey")}`, //Multiplier
        `update:six: ${convertText(`Backpack:`, "grey")} ${convertText(`${playerData.backpack}`, "white")}${convertText(`/`, "grey")}${convertText(`${playerData.backpack_max}`, "darkgrey")}`, //Backpack
    ];

    const rawQueue = player.getDynamicProperty("ui_queue");
    let extraLines = [];
    if (rawQueue) {
        try { extraLines = Object.values(JSON.parse(rawQueue)); } catch (e) { }
        player.setDynamicProperty("ui_queue", undefined);
    }

    const finalQueue = [...uiLines, ...extraLines];
    finalQueue.forEach((content, index) => {
        system.runTimeout(() => {
            player.onScreenDisplay.setTitle(content);
        }, index);
    });
}
#

basically the UiLines are garunteed to run, then addUi adds it to the uiQueue

#

so it will run in the next available tick

night holly
#

I see yeah that definitely simplifies the issue, ill take a look, thanks for the example :D

simple cairn
#

hello. is there a chance to make the glyph or custom font smaller?

image.png
manic dragon
simple cairn
#

i will try

zinc nebula
#

why do this wont work?

  "centered_gui_elements_at_bottom_middle_touch": {
    "controls": [
      {
        "hud_icon_touch_no_bar@hud_icon_touch": {
          "offset": [ 0, 7 ],
          "bindings": [
            {
              "binding_type": "view",
              "source_property_name": "#no_bar",
              "target_property_name": "#visible"
            }
          ]
        }
      },
      {
        "hud_icon_touch@hud_icon_touch": {
          "bindings": [
            {
              "binding_type": "view",
              "source_property_name": "(not #no_bar)",
              "target_property_name": "#visible"
            }
          ]
        }
      },
      {
        "experience_bar_touch@experience_bar_touch": {
          "bindings": [
            {
              "binding_type": "view",
              "source_property_name": "(not #no_bar)",
              "target_property_name": "#visible"
            }
          ]
        }
      },
      { "hotbar@hotbar_only": {}}
    ],
    "bindings": [
      { "binding_name": "#exp_progress" },
      { "binding_name": "#level_number" },
      {
        "binding_type": "view",
        "source_property_name": "((#level_number = '0') and (#exp_progress = 1.0))",
        "target_property_name": "#no_bar"
      }
    ]
  }
#

previously its like this and it works

  "centered_gui_elements_at_bottom_middle": {
    "controls": [
      {
        "1": {
          "type": "panel",
          "controls": [
            { "hud_icon_touch@hud_icon": { "offset": [ 0, 7 ] }}
          ],
          "bindings": [
            { "binding_name": "#exp_progress" },
            { "binding_name": "#level_number" },
            {
              "binding_type": "view",
              "source_property_name": "((#level_number = '0') and (#exp_progress = 1.00))",
              "target_property_name": "#visible"
            }
          ]
        }
      },
      {
        "2": {
          "type": "panel",
          "controls": [
            { "hud_icon_touch@hud_icon": {}},
            { "experience_bar_touch@experience_bar_touch": {}}
          ],
          "bindings": [
            { "binding_name": "#exp_progress" },
            { "binding_name": "#level_number" },
            {
              "binding_type": "view",
              "source_property_name": "(not ((#level_number = '0') and (#exp_progress = 1.00)))",
              "target_property_name": "#visible"
            }
          ]
        }
      },
      { "hotbar@hotbar_only": {}}
    ]
  },
mint charm
#

Without resizing the PNG image?

#

đŸ„Č

manic dragon
#

Well somewhat possible I'd say. You have to render it as a separate label and scale the label using font_scale_factor

mint charm
#

That's new to me.

candid shadow
#

Can I make it so that a grid doesn't add padding between the controls, no matter the size it has? So instead of resizing the controls to include padding between them, it keeps them united and then it anchors them to wherever I want (in this case center)

jolly rock
#

Is anyone else having this problem? When I modify hud_screen, the effects render stops working completely until I restart the game

#

(I'm not modifying the render)

oak verge
jolly rock
#

OOh thanks

jolly rock
#

Its possible to cancel a screen?

#

Like mob_effect_screen?

placid geode
manic dragon
jolly rock
#

I mean, players cant open it by pressing "z".

zinc nebula
manic dragon
plush spruce
#

Does anyone know how to add an image/loading screen on the players screen based on like action or title text

#

nvm figured it out:)

jolly rock
rocky quail
#

or map it to an invalid button

# 
      
      "button_mappings": [ {
        "from_button_id": "button.mobeffects",
        "to_button_id": "button.no_data",
        "mapping_type": "global"
      }]
limpid reef
#

Do you mean the flashy green bar?

sinful violet
# limpid reef That’s sick

Pls help me doesn’t work


"flag_hover_button": {
      "type": "collection_panel",
      "size": [ "100%", "100%" ],
      "collection_name": "form_buttons",
      "bindings": [
      {
        "binding_name": "#form_button_length",
        "binding_name_override": "#collection_length"
      }
    ],
        "$id|default": "0",
        "$flag|default": "§f§l§a§g§",
  "controls": [
    {
      "[email protected]_text": {
        "ignored": "$default_state",
        "property_bag": {
          "#hover_text": ""
        },
        "bindings": [
            {
                "binding_type": "collection_details",
                "binding_collection_name": "form_buttons"
            },
            {
                "binding_type": "collection",
                "binding_collection_name": "form_buttons",
                "binding_condition": "none",
                "binding_name": "#form_button_text",
                "binding_name_override": "#form_button_text"
            },
                        {
                "binding_type": "view",
                "source_property_name": "(not(#form_button_text - ($flag + $id + '§r') = #form_button_text))",
                "target_property_name": "#hover_text"
            }
        ]
      }
    }
  ]
},

"hover_button@common_buttons.light_content_button": {
  "size": [ "100%", "100%" ],
  "$pressed_button_name|default": "button.menu_select",
  "$default_button_texture": "textures/ui/empty",
  "$hover_button_texture": "textures/ui/empty",
  "$pressed_button_texture": "textures/ui/empty",
  "$default_state_border_visible": false,
  "$hover_state_border_visible": false,
  "$pressed_state_border_visible": false,
  "sound_volume": 0,
  "sound_pitch": 0,
  "controls": [
      {
          "hover@my_gui.flag_hover_button": {
              "$id": "$hover_id"
          }
      }
  ]
}
manic dragon
limpid reef
sinful violet
#

Qui utilise form boutton text

#

Et un flag pour différencier

#
  • id
zinc nebula
mint charm
mint charm
jolly rock
candid shadow
#

How the heck didn't anyone tell me that "default" and "100%" aren't the same thing for size? The wiki says otherwise

image.png
jolly rock
#

In the text, for example, default is responsible for adapting the size to the size of the text

candid shadow
limpid reef
#

Default is only useful for text

candid shadow
oak verge
limpid reef
#

Ok*

limpid reef
hexed briar
#

EPIC RAP BATTLE OF HISTORY
#size_binding_x & #size_binding_y in server form
VS
MY GAME

polar frigate
#

Uh.. since when we have crosshair renderer got separated from hud file bao_ext_toldyouso why does this even such a thing ._.

SmartSelect_20260526_070024_EX_File_Manager.jpg
manic dragon
jolly rock
#

Any opinions? Custom effects ui

image-3.webp image-4.webp
#

Maybe add padding between the effects

keen marsh
#

That's pretty sick

#

Lowkey didn't even realise it was custom

jolly rock
#

Thank you, that's flattering

candid shadow
manic dragon
#

Probably. I forgot what it was :)

crimson heath
#

Hello everyone, I have a question, does creating your own hud require digging in JSON files or is there a simpler way such as a website where you can customise the arrangement of everything?

hexed briar
#

it just crashes my game the moment i accidentally put a invaild value smh

#

even having a property bag or a way to set the default value of it so it shouldn't crash, does in fact. not work.

manic dragon
hexed briar
#

yeah.

manic dragon
#

It crashes if there isn't any size set. Even setting size: [0, 0] works. I'm using this in a lot of places and works properly

sinful violet
manic dragon
#

Not related tho
But if you want to render custom blocks you need the item renderer, there's plenty of example codes in this channel. You should search for it, and you will need the aux id for that block

sinful violet
#

Okay

weak cape
#

I could be mistaken as there are people vibecoding such projects and never reaching it to the masses

sinful violet
crimson heath
hoary skiff
#

Coding json ui is pure imagination

warm hedge
hexed briar
candid shadow
hexed briar
manic dragon
#

I set size to 0 for whichever binding I'm working with. e.g- If I modify #size_binding_x, the I set size x to 0 and y to some fixed value and vice versa. iirc 100% works too (I used it in Animated Bar)

hexed briar
#

I don't usually set any default sizing since i know it's going to be something i do not have to unless if necessary.

#

i like my code clean not spaghetti tbh

manic dragon
#

yeah I get that. But the size binding needs the size property defined explicitly
So I add that when I work with these bindings

candid shadow
#

Ok so remember when I said that using "default" in grids made it so that the grid inherits its child controls sizes? Well now, it displays the first item in the grid only

#

I LOVE JSON UI

sinful violet
candid shadow
sinful violet
undone marsh
#

it's better than ore ui performance wise atleast

manic dragon
#

The performance isn't that big of an issue for me. I just want it to be customizable. Just have to wait & see...

candid shadow
#

My other request is it to be client-sided

lone carbon
#

can multiple screens be rendered on top of one another with JSON UI? If yes, how would I go about making that work?

mint charm
#

which is worse

#

Toxic girlfriend or Json UI?

weak cape
#

JSON ui

lone carbon
#

100% toxic gf

#

at least you know when something is wrong with that

weak cape
#

You mean toxic gf is worse?

zinc nebula
limpid reef
mint charm
#

One question, can you change the color of the scroll?

tepid ember
# 
    "exp_progress_bar_and_hotbar/resizing_hotbar_locator_bar/locator_bar":{
        "anchor_from":"top_middle",
        "anchor_to":"top_middle",
        "offset": [0,-460]
    },```

How do I place the locator bar in the top_middle area, at the very top of the screen? Because when I do it that way and adjust the game's GUI scale, it goes off-screen.
mint charm
sinful violet
weak cape
#

Why he lookin kinda fried

undone marsh
#

i don't get the json ui hate ngl

manic dragon
#

ngl it's hard to build intuition at first
But it gets easier

weak cape
undone marsh
#

once you understand json ui then you're good to go

undone marsh
weak cape
#

JSON UI is not officially documented, doesn't support DDUI, has alot of vurnelabilities, bugs that you have no way to figure out using logs. And much more things that are wrong with it

#

While yes, JSON UI is "better" compared to current OreUI, it is still bad

weak cape
undone marsh
#

i just stated my opinion

#

🙏

#

brother wrote a whole paragraph

weak cape
#

yeah cuz you replied 😭

undone marsh
#

fair

#

didn't they make official docs this year

manic dragon
#

Still incomplete...

weak cape
#

đŸ—Łïž undefined

candid shadow
undone marsh
#

y'all just haters fr

weak cape
candid shadow
weak cape
plush spruce
#

the docs are indeed ass

torpid remnant
#

the descriptions for the properties are interesting but that's about it

tepid ember
#

Is it possible to pass a dynamic value to #ignored? For example, sending a title that says true or false, or any value that makes it work dynamically? Because from what I've seen, when ignored is active, it doesn't execute the code, while visible still executes it, but makes it invisible.

manic dragon
#

Nope

blazing sonnet
#

Is it possible to modify this UI?

IMG-20260527-WA0030.jpg
tepid ember
#

Is there any way I can get the factory index? For example, I set up a factory to generate 10 apples and changed the position of the first and last apple. I'm trying to replicate the hearts from vanilla Minecraft, but I found that the textures are too close together, forming a double black pixel. So I thought about separating the initial and final parts, but I don't know how to get the factory index to do that.

placid geode
tepid ember
placid geode
#

{
"binding_type": "collection_details",
"binding_collection_name": "<your_collection_name>"
}

#

add that binding wherever you want to use #collection_index

# 
[
{
"binding_type": "collection_details",
"binding_collection_name": "<your_collection_name>"
}
{
"binding_type": "view",
"source_property_name": "(#collection_index < 6)",
"target_property_name": "#visible"
}
]
tepid ember
placid geode
#

it's the "collection_name" property you set on the collection_panel or stack_panel

#

in your case you didnt set one

#

so just add "collection_name": "custom_collection" on your stack_panel/collection_panel element and use that collection name

tepid ember
tepid ember
placid geode
placid geode
tepid ember
#

That's good to know.

limpid reef
#

How can we use a factory with custom data?

manic dragon
night holly
#

on the topic of factories, im trying to make indexable toggles, but idk what else im supposed to declare here lol. If i add a factory can that still even be indexed? as opposed to using a collection panel

        "type": "stack_panel",
        "collection_name": "custom_form",
        "orientation": "horizontal",
        "size": [ "100% - 94px", 12 ],
        "offset": [ -20, 9.5 ],
        "anchor_from": "top_right",
        "anchor_to": "top_right",
        "controls": [
            {
                "toggle_1@custom_toggles.category_toggle": { "collection_index": 0 }
            },
            {
                "padding@category_padding": { }
            },
            {
                "toggle_2@custom_toggles.category_toggle": { "collection_index": 1 }
            }
        ]
    },```
#

shouldve added more context but this is for server form modals

manic dragon
#

Factories automatically index the generated content if that's what you mean

night holly
#

well i need to create multiple factories for different scrolling stacks, but that obviously gets pretty heavy on load times, so im trying to make it better by hardcoding some of them into indexs. would you say then if i call the collection panel from inside the factory, would somin like that work?

        "factory": {
            "name": "buttons",
            "control_ids": {
                "toggle": "@form.category_toggles"
            }
        }
    },```
manic dragon
night holly
#

I still need them to return data script api side tho

#

idk im so clueless in anything other than actionform lmao

#

theyre basically just button mapped to act like clickable buttons, and act as categories you can click to switch between menus, there wont be anymore than 10, hence why i was hoping to hardcode them and cut down load delays as modal forms seem to be pretty damn intensive

manic dragon
night holly
#

oh youre completely right im an idiot i had the toggles parent scaling by the child that had 100% 😭

#

yeah that works anyways awesome thanks for the help

limpid reef
# manic dragon Meaning?

What are the use cases of factories besides generating already existing collections like form buttons ?

manic dragon
#

A good example would be chat msgs

tepid ember
#

Is this correct? I wanted it to move up and down hearts.

 "heart_bob_up": {
        "anim_type": "offset",
        "easing": "in_out_sine",
        "from": [0, 0],
        "to": [0, -20],
        "duration": 10,
        "next": "@dz_core_elements_image_factory.heart_bob_down"
    },
    "heart_bob_down": {
        "anim_type": "offset",
        "easing": "in_out_sine",
        "from": [0, -20],
        "to": [0, 0],
        "duration": 10,
        "next": "@dz_core_elements_image_factory.heart_bob_up"
    }```
#

I tried calling it that way and it didn't work.

    "core_elements_image_health": {
        "type": "image",
        "texture": "textures/ui/destinyz/player/hud/heart",
        "offset": "@dz_core_elements_image_factory.heart_bob_up",
        // "anims":["@dz_core_elements_image_factory.heart_bob_up"],
        "size": [
            8,
            7
        ],
        "layer": 999,
        "controls": [
            {
                "health_empty": {
                    "type": "image",
                    "layer": -1,
                    "texture": "textures/ui/destinyz/player/hud/heart_background",
                    "size": [
                        9,
                        9
                    ]
                }
            }
        ]
    }
manic dragon
tepid ember
manic dragon
#

That's why

#

Wrap the image inside a panel and then apply the offset

tepid ember
# manic dragon That's why

Hmm, so it's not possible? Do you know of any way I could generate multiple hearts together and apply an animation similar to vanilla Minecraft?

manic dragon
#

Why would it not be possible. Keep your stack panel but instead of adding the images directly in the stack panel, create a panel for each image and add those to the stack panel. The images will be inside the panels

#

Then your animations will work

tepid ember
tepid ember
manic dragon
limpid reef
tepid ember
limpid reef
#

How can I make a factory generate 5 items ?

manic dragon
limpid reef
tepid ember
#

@limpid reef
its exemple

   "core_elements_image_factory": {
       "type": "stack_panel",
       "orientation": "horizontal",
       "size": [
           "100%",
           "100%"
       ],
       "collection_name": "core_elements_controller",
       "factory": {
           "name": "label_factory",
           "control_name": "@dz_core_elements_image_factory.core_elements_controller",
           "max_children_size": 10
       },
       "property_bag": {
           "#length": 10
       },
       "bindings": [
           {
               "binding_type": "view",
               "source_property_name": "#length",
               "target_property_name": "#collection_length"
           }
       ]
   },```
limpid reef
#

Thank you guys

tepid ember
candid shadow
limpid reef
manic dragon
candid shadow
candid shadow
tepid ember
#

Yes, it's true, once you understand how things work, you end up getting the hang of it.

manic dragon
tepid ember
#

Did you see the dynamic interface I made? @manic dragon

manic dragon
#

Which one?

tepid ember
#

If you could look at my code and suggest how I could improve its performance, I've tried several ways but haven't been able to reach a satisfactory result.

manic dragon
#

I might've missed it somehow. I can probably do that when I have time. Currently a bit busy with some work

tepid ember
#

Oh yeah, thanks for your help today.

gloomy sluice
#

how can I do my UIs not be modified by Gui Scale settings?

jolly rock
#

Cant

#

Or use %

dusty rune
#

is it possible to make image fills up the screen no matter the gui scale you choose?

manic dragon
dusty rune
#

thank you OtaconYes

static veldt
#

Hello

#

Could someone help me add a cookbook to my UI? I really need this help. I would be very grateful to anyone who can provide it. 🙂

river flower
patent bramble
#

Can we grab data with Json UI like charge time for a held item?

#

Curious if I can make a bow charge progress bar slightly above / below the crosshair

dreamy pulsar
#

is scroll ui bugged or am i losing my mind

#

almost definitely losing my mind but

dreamy pulsar
#

then use json ui to display texture based on the title

placid geode
#

oh i see

dreamy pulsar
#

yea #1510435721553383574

#

like it appears it just doesnt

#

do the whole thing its supposed to specifically do

#

almost definitely an issue on my part

placid geode
#

yea

manic dragon
#

@placid geode could you check your DM please?

gloomy sluice
stark trench
#

i’m new here, can you guys help me add hover text to this button?

{
  "default_styled_button_text_label": {
    "color": "$light_button_default_text_color",
    "modifications": [
      {
        "array_name": "bindings",
        "operation": "remove",
        "where": {
          "binding_name_override": "#color"
        }
      }
    ]
  }
}
#

i have no idea how to do it

candid shadow
#

Apparently I've learned that using the "debug" property has a significant impact on performance

candid shadow
#

and also, why for most of the things are "pressed" and "hover" controls swapped?

weak cape
weak cape
candid shadow
#

This applies to textures as well

weak cape
#

That is often intentional

#

The pressed texture is often unnecessary to change and the hover one would be enough.

candid shadow
candid shadow
weak cape
#

What terms?

hexed briar
candid shadow
#

hover and pressed: the texture called "pressed" gets used when the control is hovered, and the texture called "hovered" gets used in the pressed state

candid shadow
hexed briar
#

I done alot especially pre-game UIs so i know what those are.

#

Yeah i know it's pretty annoying.

#

In which i ended up making my own things (i.e buttons, toggles, sliders etc) anyways.

#

so i know which one i modify and can optimize it.

fossil prism
#

Hi everyone, I'm trying to hide a mark texture when the entity's health drops to a certain threshold. Does anyone know how to do that?

image.png
hollow tapir
#

I think u must use /title command and mix it with #title_text @fossil prism

#

That's the only way to communicate with json UI for now

fossil prism
hollow tapir
mint charm
placid geode
#

I found something useful: dividing one string by another string returns the number of occurrences of string_divisor in string_dividend

# 
    "test_label": {
        "type": "label",
        "text": "#output",
        "property_bag": {"#test": "hi hi :)"},
        "bindings": [
            {
                "binding_type": "view",
                "source_property_name": "('output: ' + (#test / 'hi'))", // output: 2
                "target_property_name": "#output"
            },
            {
                "binding_type": "view",
                "source_property_name": "('output: ' + (#test / ':)'))", // output: 1
                "target_property_name": "#out"
            },
            {
                "binding_type": "view",
                "source_property_name": "('output: ' + (#test / 'bao'))", // output: 0
                "target_property_name": "#put"
            }
        ]
    }
}```
winged flicker
#

Hello ! Does anyone know hot to use an url to display an image in a chest screen for example ? I know it is possible in server form but I haven’t succeeded to reproduct that in a chest screeen

manic dragon
candid shadow
#

Thank you so much cuz I never understood factories

narrow goblet
#

guys i have a question, how are the json uis triggered. like for eg cartography_table.json being triggered by the interaction of a player and a carto table. and i wanna see if there is a mechanic to trigger a custom json ui to a custom block

manic dragon
narrow goblet
#

if im not mistaken, we cant really store items inside data forms right?

manic dragon
#

Not as easily as chest UIs. And interaction is very limited too

narrow goblet
#

yep

winged flicker
#

Hello ! Does anyone know how to use an url to display an image in a chest screen for example ? I know it is possible in server form but I haven’t succeeded to reproduct that in a chest screeen

manic dragon
#

Afaik you can't

mint charm
cyan flint
#

I want to hide chat messages with a certain prefix, but setting their visibility to false still effects the max children...

manic dragon
cyan flint
#

How do I trigger the animation conditionally?

cyan flint
manic dragon
#

You'd generate an element conditionally that'll have the animation

cyan flint
#

Like adding a modification to the chat grid item, introducing the factory, and making that factory visible under a specific condition, so it creates the animation?

manic dragon
#

If I put it simply, your generated chat msg should contain a factory anywhere inside. That factory will generate a panel or something else that will have the destroy animation

#

For the use of factory, see the tutorial page

cyan flint
#

ok tysm

alpine basalt
wooden sluice
#

does anyone know if its possible to pull every single texture from a typeid?

#

or is there some resource with every typeid that goes with every texture

#

i am trying to make an auction system where the player can list an item, but i did not want to have to save every texture from the game itself or make a system within javascript to convert.

#

i was thinking about aux id, but i am unsure how i would do it

wooden sluice
alpine basalt
wooden sluice
sinful violet
candid shadow
#

Can I bind the visibility of an element in enchanting_screen_pocket.json to whether the item that the player tries to enchant can be enchanted or not (whether it's because the item can't have enchantments or because it's already enchanted)?

alpine basalt
#

I can have it appear on the screen easily

#

it is binding

candid shadow
jolly rock
mint charm
#

ask

#

is this true?

#

JSON UI is being deprecated in favor of Ore UI. Mojang has confirmed that any add-ons that use JSON UI will eventually stop working in the coming years. Unlike JSON UI, Ore UI is hardcoded and cannot be modified by resource packs.

#

???

jolly rock
#

In the future Ore UI will have support for custom addons, not for now, and the most likely thing, as you say, is that in the future the addons with json ui will stop working, but by then it is most likely that it will already be possible to use ore ui

mint charm
#

uh

jolly rock
#

Take your time

mint charm
#

yeah

jolly rock
#

I think the change is between 1 and 3 years

mint charm
#

well, there I said in a few years, I hope it's not too soon

cyan flint
#

How do i create a conditional animation?

mint charm
#

with a cup of coffee and a little time

wooden sluice
# 
"bindings": [
                                    {
                                      "binding_name": "#form_button_texture",
                                      "binding_name_override": "#texture",
                                      "binding_type": "collection",
                                      "binding_collection_name": "form_buttons"
                                    },
                                    {
                                      "binding_name": "#form_button_texture_file_system",
                                      "binding_name_override": "#texture_file_system",
                                      "binding_type": "collection",
                                      "binding_collection_name": "form_buttons"
                                    },
                                    {
                                      "binding_type": "view",
                                      "source_property_name": "(not ((#texture = '') or (#texture = 'loading')))",
                                      "target_property_name": "#visible"
                                    }
                                  ]

with the button icon bindings of a server form, does anyone know if you can change the pink unknown texture to your own?

#

perhaps with {
"binding_type": "view",
"source_property_name": "(not ((#texture = '') or (#texture = 'loading')))",
"target_property_name": "#visible"
}
i could use a property bag to set the texture no?

ripe spruce
#

is there any way i can make the hotbar bigger than it is? even after using the extra large ui option can i make it bigger and how

glass valley
#

How do I add animations to elements created using the title preservation feature? The animation starts playing immediately when I join the game.

vernal imp
#

horizontal scroll, with scroll box track is Crazy

vernal imp
#

is it possible to make toggle have pressed_state visual?? i ask gemini, use button and change mapping "consume_event": false, for toggle??

patent bramble
#

Would it be possible to unlock the hotbar from the HUD screen so I can move it freely? (Each slot individually)

weak cape
#

Yes

candid shadow
#

Not sure if this is already a standard, but I think it would be great if all JSON UI resource pack developers had a flag global variable so that other pack creators can make different property values depending on whether that global variable is true or not. Without the pack, it would be false, else true

jolly rock
#

I think this is what you want

manic dragon
candid shadow
candid shadow
#

For example, some of my buttons overlap with the ones in déesse ui

manic dragon
#

Still you might have to make multiple variations of the same element (e.g button) to change its position. Overlaps like these can happen a lot and too many cases to hardcode imo

I'd consider giving the user option to change positions themselves. Even that has its own issues

austere flicker
#

anyone knows an addon that makes playername tag background transparent

oak verge
#

can we add custom color codes §

manic dragon
oak verge
#

Thought as much, just seen some color codes in the global variables and i thought they were used for that

wooden sluice
candid shadow
hoary skiff
#

Global vars are fast for changing values for many properties in any file/path at the same time

#

But I think it's still limited, coz there's a lot of customization and adjustments you need per element, not every element needs the same value