SkipNight UI for Rust

A UI skip night plugin with completely customisable interfaces

Total Downloads: 870 - First Release: Jun 6, 2017 - Last Update: Jun 18, 2017

5/5, 8 likes
  1. k1lly0u
    Optional Dependencies:
    http://oxidemod.org/plugins/imagelibrary.2193/
    Configuration File:
    Yes
    A UI skip night plugin that you have complete control over the UI interface. Create many different styles of UI easily and switch between them using the UI setup in the config.
    Comes with 3 pre-designed UI panels!

    Untitled-2.png
    Untitled-3.png
    Untitled-2.png

    * ImageLibrary is required if you wish to display images in your UI

    Chat Command
    /voteday - Used to cast your vote
    /voteday open - Force open a vote (Requires permission skipnightui.admin)
    /voteday close - Close an open vote (Requires permission skipnightui.admin)

    Config
    Code (C#):
    {
      "Message Colors": { // Colors for chat messages
        "Primary": "#ce422b",
        "Secondary": "#939393"
      },
      "Options": { // Options regarding votes
        "Duration the vote will be open": 240,
        "Required vote percentage": 40.0, // Example requires 40% of current online players to vote
        "Time the vote will open": 18.0,
        "Time to set on successful vote": 8.0
      }
      "UI Configuration Name": "Design_2", // The UI configuration you want to run. You can switch out the design at any time by changing this to a different "UI Configuration" name
      "UI Configurations": { // The various UI configurations
        "Design_1": {
          "Image Elements": [],
          "Main Container Size": {
            "Horizontal End": 62.5,
            "Horizontal Start": 37.5,
            "Vertical End": 98.0,
            "Vertical Start": 93.0
          },
          "Panel Elements": [
            {
              "Background Alpha": 0.7,
              "Background Color (Hex)": "#4c4c4c",
              "Size": {
                "Horizontal End": 100.0,
                "Horizontal Start": 0.0,
                "Vertical End": 100.0,
                "Vertical Start": 0.0
              }
            }
          ],
          "Text Elements": [
            {
              "Size": {
                "Horizontal End": 100.0,
                "Horizontal Start": 2.0,
                "Vertical End": 100.0,
                "Vertical Start": 0.0
              },
              "Text": {
                "Alignment": "MiddleLeft",
                "Color (Hex)": "#ce422b",
                "Size": 15,
                "Text": "Skip Night"
              }
            }
          ],
          "Time Progress Elements": [
            {
              "Bar Alpha (Solid)": 0.0,
              "Bar Color (Solid)": "",
              "Progress Type": "Text",
              "Size": {
                "Horizontal End": 95.0,
                "Horizontal Start": 80.0,
                "Vertical End": 90.0,
                "Vertical Start": 10.0
              },
              "Text Options (Text)": {
                "Alignment": "MiddleRight",
                "Color (Hex)": "",
                "Size": 14,
                "Text": ""
              },
              "URL or Image filename (Graphic)": ""
            }
          ],
          "Vote Progress Elements": [
            {
              "Bar Alpha (Solid)": 1.0,
              "Bar Color (Solid)": "#EBB146",
              "Progress Type": "Solid",
              "Size": {
                "Horizontal End": 80.0,
                "Horizontal Start": 25.0,
                "Vertical End": 85.0,
                "Vertical Start": 15.0
              },
              "Text Options (Text)": null,
              "URL or Image filename (Graphic)": ""
            },
            {
              "Bar Alpha (Solid)": 0.0,
              "Bar Color (Solid)": "",
              "Progress Type": "Text",
              "Size": {
                "Horizontal End": 80.0,
                "Horizontal Start": 25.0,
                "Vertical End": 85.0,
                "Vertical Start": 15.0
              },
              "Text Options (Text)": {
                "Alignment": "MiddleCenter",
                "Color (Hex)": "",
                "Size": 14,
                "Text": "{currentAmount} / {requiredAmount}"
              },
              "URL or Image filename (Graphic)": ""
            }
          ]
        },
        "Design_2": {
          "Image Elements": [
            {
              "Size": {
                "Horizontal End": 13.5,
                "Horizontal Start": 7.0,
                "Vertical End": 33.0,
                "Vertical Start": 10.0
              },
              "URL or Image filename": "https://www.chaoscode.io/oxide/Images/timericon.png"
            }
          ],
          "Main Container Size": {
            "Horizontal End": 60.0,
            "Horizontal Start": 40.0,
            "Vertical End": 95.0,
            "Vertical Start": 85.0
          },
          "Panel Elements": [
            {
              "Background Alpha": 0.85,
              "Background Color (Hex)": "#191919",
              "Size": {
                "Horizontal End": 100.0,
                "Horizontal Start": 0.0,
                "Vertical End": 100.0,
                "Vertical Start": 0.0
              }
            }
          ],
          "Text Elements": [
            {
              "Size": {
                "Horizontal End": 80.0,
                "Horizontal Start": 20.0,
                "Vertical End": 96.0,
                "Vertical Start": 70.0
              },
              "Text": {
                "Alignment": "MiddleCenter",
                "Color (Hex)": "#C4FF00",
                "Size": 14,
                "Text": "Skip the Night"
              }
            }
          ],
          "Time Progress Elements": [
            {
              "Bar Alpha (Solid)": 0.0,
              "Bar Color (Solid)": "",
              "Progress Type": "Graphic",
              "Size": {
                "Horizontal End": 90.0,
                "Horizontal Start": 20.0,
                "Vertical End": 28.0,
                "Vertical Start": 15.0
              },
              "Text Options (Text)": null,
              "URL or Image filename (Graphic)": "https://www.chaoscode.io/oxide/Images/progressbar.png"
            }
          ],
          "Vote Progress Elements": [
            {
              "Bar Alpha (Solid)": 1.0,
              "Bar Color (Solid)": "#4ca5ff",
              "Progress Type": "Solid",
              "Size": {
                "Horizontal End": 95.0,
                "Horizontal Start": 5.0,
                "Vertical End": 68.0,
                "Vertical Start": 40.0
              },
              "Text Options (Text)": null,
              "URL or Image filename (Graphic)": ""
            },
            {
              "Bar Alpha (Solid)": 0.0,
              "Bar Color (Solid)": "",
              "Progress Type": "Text",
              "Size": {
                "Horizontal End": 95.0,
                "Horizontal Start": 5.0,
                "Vertical End": 68.0,
                "Vertical Start": 40.0
              },
              "Text Options (Text)": {
                "Alignment": "MiddleCenter",
                "Color (Hex)": "",
                "Size": 14,
                "Text": "{currentAmount} / {requiredAmount}"
              },
              "URL or Image filename (Graphic)": ""
            }
          ]
        },
        "Design_3": {
          "Image Elements": [
            {
              "Size": {
                "Horizontal End": 98.0,
                "Horizontal Start": 75.0,
                "Vertical End": 95.0,
                "Vertical Start": 5.0
              },
              "URL or Image filename": "https://images.vexels.com/media/users/3/132347/isolated/preview/be0aa6f53b4ac58a4a3612d6dc7a7854-stopwatch-timer-icon-by-vexels.png"
            }
          ],
          "Main Container Size": {
            "Horizontal End": 60.0,
            "Horizontal Start": 40.0,
            "Vertical End": 98.0,
            "Vertical Start": 90.0
          },
          "Panel Elements": [
            {
              "Background Alpha": 0.85,
              "Background Color (Hex)": "#191919",
              "Size": {
                "Horizontal End": 72.0,
                "Horizontal Start": 0.0,
                "Vertical End": 100.0,
                "Vertical Start": 55.0
              }
            },
            {
              "Background Alpha": 0.85,
              "Background Color (Hex)": "#191919",
              "Size": {
                "Horizontal End": 100.0,
                "Horizontal Start": 73.25,
                "Vertical End": 100.0,
                "Vertical Start": 0.0
              }
            },
            {
              "Background Alpha": 0.85,
              "Background Color (Hex)": "#191919",
              "Size": {
                "Horizontal End": 72.0,
                "Horizontal Start": 0.0,
                "Vertical End": 50.0,
                "Vertical Start": 0.0
              }
            }
          ],
          "Text Elements": [
            {
              "Size": {
                "Horizontal End": 72.0,
                "Horizontal Start": 0.0,
                "Vertical End": 100.0,
                "Vertical Start": 55.0
              },
              "Text": {
                "Alignment": "MiddleCenter",
                "Color (Hex)": "#ce422b",
                "Size": 14,
                "Text": "Skip night by typing /voteday"
              }
            }
          ],
          "Time Progress Elements": [
            {
              "Bar Alpha (Solid)": 0.0,
              "Bar Color (Solid)": "",
              "Progress Type": "Text",
              "Size": {
                "Horizontal End": 100.0,
                "Horizontal Start": 73.0,
                "Vertical End": 100.0,
                "Vertical Start": 0.0
              },
              "Text Options (Text)": {
                "Alignment": "MiddleCenter",
                "Color (Hex)": "",
                "Size": 16,
                "Text": ""
              },
              "URL or Image filename (Graphic)": ""
            }
          ],
          "Vote Progress Elements": [
            {
              "Bar Alpha (Solid)": 1.0,
              "Bar Color (Solid)": "#585858",
              "Progress Type": "Solid",
              "Size": {
                "Horizontal End": 70.0,
                "Horizontal Start": 2.0,
                "Vertical End": 45.0,
                "Vertical Start": 5.0
              },
              "Text Options (Text)": null,
              "URL or Image filename (Graphic)": ""
            },
            {
              "Bar Alpha (Solid)": 0.0,
              "Bar Color (Solid)": "",
              "Progress Type": "Text",
              "Size": {
                "Horizontal End": 70.0,
                "Horizontal Start": 2.0,
                "Vertical End": 45.0,
                "Vertical Start": 5.0
              },
              "Text Options (Text)": {
                "Alignment": "MiddleCenter",
                "Color (Hex)": "",
                "Size": 14,
                "Text": "{currentAmount} / {requiredAmount}"
              },
              "URL or Image filename (Graphic)": ""
            }
          ]
        }
      }
    }
    Creating a new UI (Poor explanation inbound :p)
    For this example I will use the pre-made design "Design_1". To make this easy for yourself it would be best you copy on of the existing designs and modify it to suit your needs. There will be alot of trial and error to get your design looking the way you want so be prepared

    Sizing - Sizes are in percent. Horizontal size is the percentage of the screen from the left hand side, where as Vertical size is the percentage of the screen from the bottom.

    The "Main Container Size" (Image.1 below) is based on the size on your screen, however, all the various elements will be "children" of the "Main Container". This means that the size (percentage) that is set for them will be from the sides of the main container (Image.2 below).

    Code (C#):

    "Design_1": { // This is the name of your design. You can add as many designs as you want
          "Image Elements": [], // Here we can add images to our design. This design has no images so this will be left blank

          "Main Container Size": { // The main container size if the overall size of your UI (See Image.1)
            "Horizontal End": 62.5, // Percentage of total screen size from the left
            "Horizontal Start": 37.5, // Percentage of total screen size from the left
            "Vertical End": 98.0, // Percentage of total screen size from the bottom
            "Vertical Start": 93.0 // Percentage of total screen size from the bottom
          },

          "Panel Elements": [ // Panel elements are essentially boxes that you can color. For this design I fill the entire parent element with color by setting a panel to fill the space
            {
              "Background Alpha": 0.7,
              "Background Color (Hex)": "#4c4c4c",
              "Size": {
                "Horizontal End": 100.0, // 100% of the parent size
                "Horizontal Start": 0.0, // 0% of the parent size
                "Vertical End": 100.0,
                "Vertical Start": 0.0
              }
            }
          ],

          "Text Elements": [ // Here is add the text "Skip Night", for this I have come inwards 2% from the left hand side of the container, and filled the rest of the container. I have set the alignment to "MiddleLeft" which will center my text vertically, but move it to the very left of the element.
            {
              "Size": {
                "Horizontal End": 100.0,
                "Horizontal Start": 2.0, // Starts at 2% from the left of the parent container
                "Vertical End": 100.0,
                "Vertical Start": 0.0
              },
              "Text": {
                "Alignment": "MiddleLeft", // Force the alignment to the left hand side
                "Color (Hex)": "#ce422b",
                "Size": 15,
                "Text": "Skip Night" // The text I want to display
              }
            }
          ],

          "Time Progress Elements": [ // For this UI I am simply using a clock type countdown, I only need 1 "Time Progress" element to achieve this. I have set the "Progress Type" to "Text" (See Progress Types below), and have aligned it to the right hand side
            {
              "Bar Alpha (Solid)": 0.0, // Used for the Solid type
              "Bar Color (Solid)": "", // Used for the Solid type
              "Progress Type": "Text", // Set the type to text
              "Size": {
                "Horizontal End": 95.0, // Ends at 95% distance from the left side of the parent container
                "Horizontal Start": 80.0,
                "Vertical End": 90.0,
                "Vertical Start": 10.0
              },
              "Text Options (Text)": {
                "Alignment": "MiddleRight", // Align my text to the right hand side
                "Color (Hex)": "",
                "Size": 14,
                "Text": "" // I am using the clock so it is not necessary to set text in this case
              },
              "URL or Image filename (Graphic)": "" // Used for the Graphic type
            }
          ],

          "Vote Progress Elements": [ // Vote progress elements display how far along the vote is to being completed. This design use's 2 progress types. The 1st is a solid color bar, and the 2nd is a text overlay
            { // The first part is the solid bar
              "Bar Alpha (Solid)": 1.0, // Set the alpha for the bar
              "Bar Color (Solid)": "#EBB146", // Set the color of the bar
              "Progress Type": "Solid", // Set the type to "Solid"
              "Size": {
                "Horizontal End": 80.0, // Set the max size to 80% of the parent container
                "Horizontal Start": 25.0, // Set the starting size to 25% of the parent
                "Vertical End": 85.0,
                "Vertical Start": 15.0
              },
              "Text Options (Text)": null, // No text for this element
              "URL or Image filename (Graphic)": "" // Not using any graphics for this element
            },
            { // The second part is a text overlay
              "Bar Alpha (Solid)": 0.0,
              "Bar Color (Solid)": "",
              "Progress Type": "Text", // Set the type to text
              "Size": {
                "Horizontal End": 80.0, // Set the same sizes as the solid bar
                "Horizontal Start": 25.0,
                "Vertical End": 85.0,
                "Vertical Start": 15.0
              },
              "Text Options (Text)": { // I am using text so the following is necessary
                "Alignment": "MiddleCenter", // Align it to the center of the solid bar
                "Color (Hex)": "",
                "Size": 14,
                "Text": "{currentAmount} / {requiredAmount}" // These 2 words will be replaced with the current vote count, and the required vote count
              },
              "URL or Image filename (Graphic)": "" // Not using a graphic for this one
            }
          ]
        },
     
    Progress Types
    These are various types of progression meters. You have 3 types to choose from and each have their own options to adjust.
    Solid - This creates a solid bar of color
    Graphic - This utilises a image as the progress bar
    Text - Display text

    Alignments
    Alignments are used for text based elements. You can position your text differently in its own text element by adjusting this.
    The various types are: LowerCenter, LowerLeft, LowerRight, MiddleCenter, MiddleLeft, MiddleRight, UpperCenter, UpperLeft, UpperRight

    Note
    The order of generation is as follows;
    Panel Elements
    Image Elements
    Text Elements
    Vote Progress Elements
    Time Progress Elements

    Each of the elements of those types are created in order of which you set them in the config. This allows you, for example, to set progress text over the top of a progress bar. You would not be able to create a standard text element over the top of a progress bar as standard text is generated first.

    Make note of this when laying out your elements

    Image.1

    mainsizes.png
    Image.2
    childsizes.png
    Fujikura likes this.