Customizing Radio Frames
Customize your community's radio frames!
Video Tutorial:
Selecting Custom Frames
Custom radio frames can be selected in the radio settings menu. Custom frames allow your community to create more UI options for each department!
The drop-down menu will appear in your settings menu if you have one or more options available to you.

Restricting Custom Frames
Restrict radio frames by department, job, or job grade, and set admin command permissions. Compatible with ESX, QBCore, or as a standalone.
You can use CMS to automatically manage in-game ACE permissions, and even sync them with Discord roles!
Example: SAHP
department members with police job grades 1-3 can use frames:
default
signalpro
voxguard
hi-vis
Customizing Radio Frames
Navigate to the
sonoranradio\skins
directory.Locate a skin folder, which will contain 2-4 images and a
skin.json
file, displaying different frames.Observe the images, which include handheld, mobile, aircraft, and possibly HUD radio types.
Create a new skin folder and add your own frame images in the format you've observed in Step 3.
Copy over and modify an existing
skin.json
file to maintain format consistency.In the
skin.json
file, specify the radio name and configure the frame types and body settings.Configure the skin
In the
skin.json
file, define the images for each radio type.Enable debug mode by setting
Config.debug
totrue
in yourconfig.lua
file.Use the in-game frame placement menu for easy adjustments.

Frame Types
The following are valid as values for type
:
portable
- Used for handheld radiosvehicle
- Used for mobile radios installed in a vehiclehud
- Top-down view of a portable radio
With vehicle
type frames, you can additionally customize the vehicleClasses
property to whitelist the frame to specific vehicle types.
For example, our default
skin whitelists one frame to aircraft only: "vehicleClasses": [15, 16]
. See available vehicle classes here.
Body Settings
In
body
, specify the image filename for each radio type. For instance, useradio-portable.png
for a portable radio.Additionally, set the
width
value to define the image's display width in-game.
Controls
Assign actions to buttons at specific positions on the radio image.
Example: Align a panic button hitbox with the panic button on the image, so clicking it in-game triggers a panic action.
Available action types:
power
,next_preset
,prev_preset
,panic
,home
,hide
.
Screen and Mini-Screen
Specify the position and width of the radio frame screen in Sonoran Radio to display information. Modify values under screen
or miniScreen
for HUD-type frames.
For HUD
-type frames, controls
can be left blank.
Screen Styles
If you would like to use a text-style display instead of the normal radio screen, you can set the style
to text
. For example:
"screen": {
"style": "text",
"bottom": 17.625,
"height": 7.875,
"left": 5.125,
"right": 5.875,
"scale": 0.65
}


Example File
Below is an example of a skin.json
file:
Frame Placement Menu
The frame placement menu offers rapid configuration of the screen size, location, and button placements.
With debug mode enabled, open the menu by clicking on the icon in the top right of your screen.
Select the skin ID and frame that you wish to edit. Then, select each property and utilize the arrow keys to adjust the configuration.
Once complete, save your changes using the Save skin.json
button.

Last updated
Was this helpful?