Foundry-VTT-Docker/resources/app/templates/scene/config.html

<form class="flexcol {{cssClasses}}" autocomplete="off">

    <!-- Configuration Tabs -->
    <nav class="sheet-tabs tabs" data-group="main" aria-role="{{localize 'SHEETS.FormNavLabel'}}">
        <a class="item" data-tab="basic"><i class="fas fa-image"></i> {{localize "SCENES.HeaderDetails"}}</a>
        <a class="item" data-tab="grid"><i class="fas fa-ruler"></i> {{localize "SCENES.HeaderGrid"}}</a>
        <a class="item" data-tab="lighting"><i class="fas fas fa-lightbulb"></i> {{localize "SCENES.HeaderVision"}}</a>
        <a class="item" data-tab="ambience"><i class="fas fa-cloud-sun"></i> {{localize "SCENES.HeaderAmbience"}}</a>
    </nav>

    <!-- Basic Tab -->
    <div class="tab" data-group="main" data-tab="basic">
        <div class="form-group">
            <label>{{localize "SCENES.SceneName"}}</label>
            <div class="form-fields">
                <input type="text" name="name" placeholder="{{localize 'Name'}}" value="{{data.name}}"/>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.Accessibility"}}</label>
            <div class="form-fields">
                <label class="checkbox">
                    {{localize "SCENES.ShowNav"}}
                    <input type="checkbox" name="navigation" {{checked data.navigation}}>
                </label>
                <select name="ownership.default" data-dtype="Number">
                    {{selectOptions ownerships selected=data.ownership.default localize=true}}
                </select>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.NavName"}}</label>
            <div class="form-fields">
                <input type="text" name="navName" value="{{data.navName}}"/>
            </div>
            <p class="notes">{{localize "SCENES.NavNameHint"}}</p>
        </div>
        <hr>

        <div class="form-group">
            <label>{{localize "SCENES.BackgroundImage"}}</label>
            <div class="form-fields">
                <file-picker name="background.src" type="imagevideo" value="{{data.background.src}}"></file-picker>
            </div>
            <p class="notes">{{localize "SCENES.BackgroundImageHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.ForegroundImage"}}</label>
            <div class="form-fields">
                <file-picker name="foreground" type="imagevideo" value="{{data.foreground}}"></file-picker>
            </div>
            <p class="notes">{{localize "SCENES.ForegroundImageHint"}}</p>
        </div>
        <hr>

        <div class="form-group">
            <label>{{localize "SCENES.BackgroundColor"}}</label>
            <div class="form-fields">
                <color-picker name="backgroundColor" value="{{data.backgroundColor}}" placeholder="#999999"></color-picker>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.ForegroundElevation"}}</label>
            <div class="form-fields">
                {{numberInput foregroundElevation name="foregroundElevation" min=1 step=1}}
            </div>
            <p class="notes">{{localize "SCENES.ForegroundElevationHint"}}</p>
        </div>

        <div class="form-group initial-position">
            <label>{{localize "SCENES.InitialView"}}</label>
            <div class="form-fields">
                <button class="capture-position" type="button" data-tooltip="{{ localize "SCENES.InitialViewButton" }}">
                    <i class="fas fa-crop-alt fa-fw"></i>
                </button>
                <label>X</label>
                <input type="number" name="initial.x" placeholder="0" value="{{data.initial.x}}" step="1"/>
                <label>Y</label>
                <input type="number" name="initial.y" placeholder="0" value="{{data.initial.y}}" step="1"/>
                <label>{{localize "SCENES.ZoomLower"}}</label>
                <input type="number" name="initial.scale" placeholder="1" value="{{data.initial.scale}}" step="any"/>
            </div>
            <p class="notes">{{localize "SCENES.InitialViewHint"}}</p>
        </div>
    </div>

    <!-- Grid Tab -->
    <div class="tab" data-group="main" data-tab="grid">
        <div class="form-group">
            <label>{{localize "SCENES.GridType"}}</label>
            <div class="form-fields">
                <button type="button" class="grid-config" data-tooltip="{{ localize "SCENES.GridConfigTool" }}">
                    <i class="fas fa-ruler-combined"></i>
                </button>
                <select name="grid.type" data-dtype="Number">
                    {{ selectOptions gridTypes selected=data.grid.type localize=true }}
                </select>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.GridSize"}} <span class="units">({{localize "SCENES.Pixels"}})</span></label>
            <div class="form-fields">
                {{numberInput data.grid.size name="grid.size" placeholder=(localize "SCENES.Pixels") min=minGrid step=1}}
            </div>
            <p class="notes">{{localize "SCENES.GridSizeHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.Dimensions"}} <span class="units">({{localize "SCENES.Pixels"}})</span></label>
            <div class="form-fields">
                <label>{{localize "Width"}}</label>
                {{numberInput data.width name="width"}}
                <button type="button" class="dimension-link" data-tooltip="{{ localize 'SCENES.DimensionLinked' }}">
                    <i class="fas fa-link-simple"></i>
                </button>
                <label>{{localize "Height"}}</label>
                {{numberInput data.height name="height"}}
            </div>
            <p class="notes">{{localize "SCENES.DimensionsHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.Padding"}}</label>
            <div class="form-fields">
                <range-picker name="padding" value="{{data.padding}}" min="0" max="0.5" step="0.05"></range-picker>
            </div>
            <p class="notes">{{localize "SCENES.PaddingHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.ShiftBG"}} <span class="units">({{localize "SCENES.Pixels"}})</span></label>
            <div class="form-fields">
                <label class="grid-label">{{localize "SCENES.ShiftHorizontal"}}</label>
                {{numberInput data.background.offsetX name="background.offsetX" placeholder=(localize "SCENES.Pixels")}}
                <label class="grid-label">{{localize "SCENES.ShiftVertical"}}</label>
                {{numberInput data.background.offsetY name="background.offsetY" placeholder=(localize "SCENES.Pixels")}}
            </div>
        </div>
        <hr>

        <div class="form-group">
            <label>{{localize "SCENES.GridScale"}}</label>
            <div class="form-fields">
                <label class="grid-label">{{localize "SCENES.GridDistance"}}</label>
                {{numberInput data.grid.distance name="grid.distance" placeholder=1}}
                <label class="grid-label">{{localize "SCENES.GridUnits"}}</label>
                <input type="text" name="grid.units" placeholder="{{localize "None"}}" value="{{data.grid.units}}"/>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.GridStyle"}}</label>
            <div class="form-fields">
                <select name="grid.style">
                    {{ selectOptions gridStyles selected=data.grid.style labelAttr="label" localize=true }}
                </select>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.GridThickness"}}</label>
            <div class="form-fields">
                {{numberInput data.grid.thickness name="grid.thickness" placeholder=1}}
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.GridColor"}}</label>
            <div class="form-fields">
                <color-picker name="grid.color" value="{{data.grid.color}}" placeholder="#000000"></color-picker>
            </div>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.GridOpacity"}}</label>
            <div class="form-fields">
                <range-picker name="grid.alpha" value="{{data.grid.alpha}}" min="0" max="1" step="0.05"></range-picker>
            </div>
        </div>
    </div>

    <!-- Lighting and Vision -->
    <div class="tab" data-group="main" data-tab="lighting">
        <div class="form-group">
            <label>{{localize "SCENES.TokenVision"}}</label>
            <input type="checkbox" name="tokenVision" {{checked data.tokenVision}}/>
            <p class="notes">{{localize "SCENES.TokenVisionHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.FogExplore"}}</label>
            <input type="checkbox" name="fog.exploration" {{checked data.fog.exploration}}/>
            <p class="notes">{{localize "SCENES.FogExploreHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.FogOverlay"}}</label>
            <div class="form-fields">
                <file-picker name="fog.overlay" type="imagevideo" value="{{data.fog.overlay}}"></file-picker>
            </div>
            <p class="notes">{{localize "SCENES.FogOverlayHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.FogUnexploredColor"}}</label>
            <div class="form-fields">
                <color-picker name="fog.colors.unexplored" value="{{data.fog.colors.unexplored}}"></color-picker>
            </div>
            <p class="notes">{{localize "SCENES.FogUnexploredColorHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.FogExploredColor"}}</label>
            <div class="form-fields">
                <color-picker name="fog.colors.explored" value="{{data.fog.colors.explored}}"></color-picker>
            </div>
            <p class="notes">{{localize "SCENES.FogExploredColorHint"}}</p>
        </div>
        <hr>

        <div class="form-group">
            <label>{{localize "SCENES.GlobalIllum"}}</label>
            <input type="checkbox" name="environment.globalLight.enabled" {{checked data.environment.globalLight.enabled}}/>
            <p class="notes">{{localize "SCENES.GlobalIllumHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.GlobalLightThreshold"}}</label>
            <div class="form-fields">
                <range-picker name="environment.globalLight.darkness.max"
                              value="{{data.environment.globalLight.darkness.max}}"
                              min="0" max="1" step="0.05"></range-picker>
            </div>
            <p class="notes">{{localize "SCENES.GlobalLightThresholdHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.Darkness"}}</label>
            <div class="form-fields">
                <range-picker name="environment.darknessLevel" value="{{data.environment.darknessLevel}}"
                              min="0" max="1" step="0.05" {{disabled data.environment.darknessLock}}></range-picker>
            </div>
            <p class="notes">{{localize "SCENES.DarknessHint"}}</p>
        </div>

        <div class="form-group">
            <label>{{localize "SCENES.ENVIRONMENT.DarknessLock"}}</label>
            <input type="checkbox" name="environment.darknessLock" {{checked data.environment.darknessLock}}/>
            <p class="notes">{{localize "SCENES.ENVIRONMENT.DarknessLockHint"}}</p>
        </div>
    </div>

    <!-- Ambience and Atmosphere -->
    {{> "templates/scene/parts/scene-ambience.html"}}

    <!-- Form Submission -->
    <footer class="sheet-footer">
        <button type="reset" {{#unless isEnvironment}}class="hidden"{{/unless}}>
        <i class="fas fa-undo"></i> {{ localize "SCENES.ENVIRONMENT.ResetEnvironment" }}
        </button>
        <button type="submit">
            <i class="far fa-save"></i> {{ localize "SETTINGS.Save" }}
        </button>
    </footer>
</form>