Skip to content

Writing your module

Jump to bottom
DeerisLeGris edited this page Jan 10, 2018 · 4 revisions

Writing your module

Theme

Now it's time to set the data of your theme: you have just to modify theme.json and add a background picture in your folder !

  • Firstly, add a background image for your theme in the folder (or create a folder in the module folder with any name you want and add your background in it): you have the choice for the name and the resolution of your background - JPG or PNG files type are recommended -

  • And then, add this content in the "theme.json" file and modify it:
{
  "BackgroundImagePath": "background_theme.jpg",

  "MainColor": {
    "R": 80,
    "G": 80,
    "B": 80,
    "A": 200
  },
  "MainColorFont": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 255
  },
  "SecondaryColor": {
    "R": 46,
    "G": 46,
    "B": 46,
    "A": 255
  },
  "SecondaryColorFont": {
    "R": 200,
    "G": 200,
    "B": 200,
    "A": 255
  },
  "ToolbarColor": {
    "R": 62,
    "G": 33,
    "B": 89,
    "A": 40
  },
  "ToolbarColorFont": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 230
  },
  "ToolbarRoundButtonColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 230
  },
  "ToolbarRoundButtonColorFont": {
    "R": 62,
    "G": 33,
    "B": 89,
    "A": 250
  },
  "AddonDefaultColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 1
  },
  "AddonDefaultFontColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 1
  },
  "RoundNotificationColor": {
    "R": 255,
    "G": 255,
    "B": 255,
    "A": 1
  }
}

BackgroundImagePath: path of your background image (for this example, it's "background_theme.jpg" because the image is in the root of the theme folder)

R (color parameter): red color in RGBA

G (color parameter): green color in RGBA

B (color parameter): blue color in RGBA

A (color parameter): alpha (transparency) color in RGBA

Addon

Now it's time to add the files (JavaScript, HTML pages etc...) of your addon and write the main.js !

  • Firstly, add this content in the "main.js" file and modify it:
//This is the default function executed (example: in the modules manager)
function main()
{

    //This function send a information notification text to the console
    sceelibs.consoleManager.sendConsoleInformationNotification("My module work !");

}

//This function is executed when the editor code view is ready - you can remove it if it's unnecessary for your module -
function onEditorViewReady()
{

}

//This function is executed when the editor start - you can remove it if it's unnecessary for your module -
function onEditorStart()
{

}

//This function is executed when the widget of your module is pinned or initialized by the editor - you can remove it if it's unnecessary for your module -
function whenModuleIsPinned()
{
    
}
  • If you want to create a widget for your module (you have set CanBePinnedToToolBar to true in the infos.json), so create the "widget.json" file in your module folder, and add this content and modify it:
[
  {
    "Type": 0,
    "WidgetName": "button_test",
    "FunctionName": "main",
    "IconButton": ""
  },
  {
    "Type": 1,
    "WidgetName": "textbox_test",
    "FunctionName": "main",
    "PlaceHolderText": "Default text !"
  }
]

You can add many widget controls as you want (or remove one of them in this example) !

Type: 0 = button control and 1 = textbox control

WidgetName: the identification name of your widget control (for control it in the code)

FunctionName: the function executed when you push the button or press enter in the textbox control

PlaceHolderText (only for textbox): the default text in your textbox control

IconButton (only for button): the Segoe MDL2 icon of your button (here the cheat sheet http://modernicons.io/segoe-mdl2/cheatsheet/ )

Serris Code Editor wiki

Clone this wiki locally