User Tools

Site Tools


Sidebar

Privacy Policy

News

Version 2.50 is out since Jan 1st 2022


Frequently Asked Questions


Namespaces

Note for contributors

If you wish to create a new page in the DroidScript wiki, please click on the most appropriate namespace above and follow the notes for contributors there.

Because of spam, it has been necessary to add a CAPTCHA to the registration form and the save option for editing pages. You will not need to prove you are human if you are logged in, so please register.

Please feel free to improve any existing page, as well as adding new pages to increase the sum of public knowledge about DroidScript.

Formatting Syntax

sample_code:colorpicker

Colorpicker

With the Colorpicker you can change the Textcolor or the Backgroundcolor of controls in your app. The user can so easy modify the look of the app. You can also get the Hex-Colorcode of any Color as String in your Clipboard or in a Textedit. Thats usefull if you write some code and you want to know the Hex-Colorcode of any Color.

Save the DlgColorpicker.js in the Droidscriptfolder where you need the file.
You can call the dialog after you load the Script into your app at the OnStart() Event.

DlgColorpicker.js
/********************************************************************
 * ColorPicker
 ====================================================================
 * Creation date: 24-01-2015 by octazid
 *                inspired by a sample app from Schnee Wittchen
 *                in the Droidscript Google Group
 * Last update: 24-01-2015 by octazid  
 ====================================================================
 * Simple dialog to create and select a Hex-Colorcode
 * or to change the colors of controls
 ********************************************************************/
 
var colorTrs   = "FF";
var colorRed   = "FF";
var colorGreen = "FF";
var colorBlue  = "FF";
var trans = 0;
 
 
//*** Create Colorpicker Dialog***//
function ColorPicker(Callback, Textfield, Clipboard)
{
  var self = this;
  this.callback = Callback || function(){};
  this.Cpdlg = app.CreateDialog("Colorpicker");
  this.Cptextfield = Textfield || "";
  this.Cpclipboard = Clipboard || false;
  this.Cplay = app.CreateLayout( "Linear", "FillXY" );
  this.color = app.CreateText("",0.9,0.05,"AutoScale");
  this.color.SetText("#" + colorTrs + colorRed + colorGreen + colorBlue);
  this.color.SetTextColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
  this.color.SetTextSize(18);
  this.color.parent = self;
  this.Cplay.AddChild(this.color);
  this.img = app.CreateImage(null, 0.4, 0.05);
  this.img.parent = self;
  this.img.SetColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
  this.img.SetMargins(0.01, 0.0015, 0.01, 0);
  this.Cplay.AddChild(this.img) ;
  this.laySkb = app.CreateLayout("Linear", "VCenter, FillX");
  this.laySkb.SetMargins(0.01, 0.01, 0.01, 0.01);
  this.laySkb.SetBackColor("#FF000000");
  this.txtTrs = app.CreateText( "Transparency: " + trans);
  this.txtTrs.parent = self;
  this.laySkb.AddChild( this.txtTrs );
  this.skbTrs = app.CreateSeekBar( 0.9, -1 );
  this.skbTrs.parent = self;
  this.skbTrs.SetRange( 255 );
  this.skbTrs.SetValue( parseInt(colorTrs, 16) );
  this.skbTrs.SetOnTouch( skbTrs_OnTouch );
  this.skbTrs.SetBackGradientRadial(0, 0, 1.0,"#00FFFFFF", "#AAFFFFFF");
  this.laySkb.AddChild( this.skbTrs );
  this.txtRed = app.CreateText("Red: " + parseInt(colorRed, 16));
  this.txtRed.parent = self;
  this.laySkb.AddChild( this.txtRed );
  this.skbRed = app.CreateSeekBar( 0.9, -1 );
  this.skbRed.parent = self;
  this.skbRed.SetRange( 255 );
  this.skbRed.SetValue( parseInt(colorRed, 16) );
  this.skbRed.SetOnTouch( skbRed_OnTouch );
  this.skbRed.SetBackGradientRadial(0, 0, 1.0,"#00FF0000", "#AAFF0000");
  this.laySkb.AddChild( this.skbRed );
  this.txtGreen = app.CreateText( "Green: " + parseInt(colorGreen, 16));
  this.txtGreen.parent = self;
  this.laySkb.AddChild( this.txtGreen );
  this.skbGreen = app.CreateSeekBar( 0.9, -1 );
  this.skbGreen.parent = self;
  this.skbGreen.SetRange( 255 );
  this.skbGreen.SetValue( parseInt(colorGreen, 16) );
  this.skbGreen.SetOnTouch( skbGreen_OnTouch );
  this.skbGreen.SetBackGradientRadial(0, 0, 1.0,"#0000FF00", "#AA00FF00");
  this.laySkb.AddChild( this.skbGreen );
  this.txtBlue = app.CreateText( "Blue: " + parseInt(colorBlue, 16));
  this.txtBlue.parent = self;
  this.laySkb.AddChild( this.txtBlue );
  this.skbBlue = app.CreateSeekBar( 0.9, -1 );
  this.skbBlue.parent = self;
  this.skbBlue.SetRange( 255 );
  this.skbBlue.SetValue( parseInt(colorBlue, 16) );
  this.skbBlue.SetOnTouch( skbBlue_OnTouch );
  this.skbBlue.SetMargins(0,0,0,0.015);
  this.skbBlue.SetBackGradientRadial(0, 0, 1.0,"#000000FF", "#AA0000FF");
  this.laySkb.AddChild( this.skbBlue ); 
  this.Cplay.AddChild( this.laySkb ) ;
  this.Cpbtnlay = app.CreateLayout( "Linear", "Horizontal,FillXY" );
  this.Cpbtnlay.SetMargins(0.01, 0.01, 0.01, 0.01) ;
  this.Cpbtn = app.CreateButton("OK", 0.45);
  this.Cpbtn.parent = self;
  this.Cpbtn.SetOnTouch(Cpbtn_OnTouch);
  this.Cpbtnlay.AddChild(this.Cpbtn);
  this.CpbtnClose = app.CreateButton("Close",0.45);
  this.CpbtnClose.parent = self;
  this.CpbtnClose.SetOnTouch(Cpbtn_OnTouch);
  this.Cpbtnlay.AddChild(this.CpbtnClose);
  this.Cplay.AddChild(this.Cpbtnlay)
  this.Cpdlg.AddLayout(this.Cplay);
  this.GetColor = function(){return self.color.GetText();}
  this.Show = function(){self.Cpdlg.Show();}
  this.Hide = function(){self.Cpdlg.Hide();}
}//function ColorPicker()
 
// OnTouch events for color seekbars
//----------Transparency------------
function skbTrs_OnTouch(value)
{
    var par = this.parent;
    colorTrs = ("0"+(Math.round( value ).toString(16))).slice(-2).toUpperCase() ;
    trans = parseInt(Math.round(value)/2.55-100);
    if (trans.toString().length > 1){trans = trans.toString().substring(1);}
    par.txtTrs.SetText("Transparency: " + trans);
    par.color.SetText("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.color.SetTextColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.img.SetColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
}
 
//----------Color Red------------
function skbRed_OnTouch(value)
{
    var par = this.parent;
    colorRed = ("0"+(Math.round( value ).toString(16))).slice(-2).toUpperCase() ;
    par.txtRed.SetText("Red: " + parseInt(colorRed, 16));
    par.color.SetText("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.color.SetTextColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.img.SetColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
}
 
//----------Color Green------------
function skbGreen_OnTouch( value )
{
    var par = this.parent;  
    colorGreen = ("0"+(Math.round( value ).toString(16))).slice(-2).toUpperCase() ;
    par.txtGreen.SetText("Green: " + parseInt(colorGreen, 16));
    par.color.SetText("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.color.SetTextColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.img.SetColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
}
 
//----------Color Blue------------
function skbBlue_OnTouch( value )
{
    var par = this.parent;
    colorBlue = ("0"+(Math.round( value ).toString(16))).slice(-2).toUpperCase() ;
    par.txtBlue.SetText("Blue: " + parseInt(colorBlue, 16));
    par.color.SetText("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.color.SetTextColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
    par.img.SetColor("#" + colorTrs + colorRed + colorGreen + colorBlue);
}
 
//Called if a button is touched
function Cpbtn_OnTouch()
{
  var par = this.parent;
  var col = par.color.GetText();
  var txtfld = par.Cptextfield;
  var clp = par.Cpclipboard
  par.Hide();
  if(this.GetText() == "OK") par.callback(col, txtfld, clp);
}//function Cpbtn_OnTouch
 
//-----3 Callback functions - called if Ok is pressed-----
function GetString(color, textfield, clipboard)
{
    if (clipboard) app.SetClipboardText(color);
        if (textfield != "")
        {
            if (textfield.GetType()=="TextEdit")
            {
            textfield.InsertText( "\"" + color + "\"", textfield.GetCursorPos());
            }
        }
}//function GetString
 
function SetText(color, textfield, clipboard)
//Note: Dont work with list control
{
    if (clipboard) app.SetClipboardText(color);
    textfield.SetTextColor(color);
}//function SetText
 
function SetBackground(color, textfield, clipboard)
{
    if (clipboard) app.SetClipboardText(color);
    textfield.SetBackColor(color);
}//function SetBackground

In your app you have to do just four things,

1. Load the Script with

  app.LoadScript("DlgColorpicker.js")

2. Create a Button to call the Dialog and add it to the layout

  //Create a Button and add it to layout.
  btn = app.CreateButton("Get Hex-Colorcode");
  lay.AddChild( btn );
  btn.SetOnTouch(btn_OnTouch);

3. Create a Textedit for the Hex-Colorcode-Result of the Dialog

  //Create a Textedit and add it to Layout
  edt = app.CreateTextEdit("",0.7,-1);
  lay.AddChild( edt );

4. Write a function to call the Dialog

  function btn_OnTouch()
  {
      pick = new ColorPicker(GetString, edt);
      pick.Show();   
  }

Or you can use this Example with all other functions.

exampleapp.js
//Called when application is started
function OnStart()
{
    app.LoadScript("DlgColorpicker.js")
    //Create a layout with objects vertically centered.
    lay = app.CreateLayout("linear", "VCenter,FillXY");    
 
    //Create a Button and add it to layout.
    btn = app.CreateButton("Get Hex-Colorcode");
    lay.AddChild( btn );
    btn.SetOnTouch(btn_OnTouch);
    //Create a Textedit and add it to Layout
    edt = app.CreateTextEdit("",0.7,-1);
    lay.AddChild( edt );
 
    //Create a Button and add it to layout.
    btn2 = app.CreateButton("Change Textcolor");
    btn2.SetMargins(0,0.05,0,0);
    lay.AddChild( btn2 );
    btn2.SetOnTouch(btn2_OnTouch);
    //Create a Spinner and add it to layout.
    spin = app.CreateSpinner("Change Textcolor, Item2, Item3",0.7,-1);
    lay.AddChild( spin );
 
    //Create a Button and add it to layout.
    btn3 = app.CreateButton("Change Backcolor");
    btn3.SetMargins(0,0.05,0,0)
    lay.AddChild( btn3 );
    btn3.SetOnTouch(btn3_OnTouch);
    //Create a list and add it to layout.
    lst = app.CreateList("Change Backcolor, Item2, Item3",0.7,-1);
    lay.AddChild( lst );
 
    //Add layout to app.    
    app.AddLayout( lay );
 
}//function Onstart()
 
 
 
function btn_OnTouch()
{
    // use GetString as first parameter to return the Hex-Colorcode as String
    // if edt as second parameter is a Textedit, it writes the
    // Colorcode within " (double quotes) at the Cursorposition
    // use true or false as third optional parameter to put the 
    // colorcode in the clipboard (standard is false)
  //pick = new ColorPicker(GetString, edt);
 
    // or Write this to copy the code just in the clipboard
    // write null as second parameter and it do not paste 
    // any text in the textedit
    // the Clipboardtext is without " (double quotes)
    pick = new ColorPicker(GetString, null, true);
 
    // Show the Picker
    pick.Show();   
 
}//function btn_OnTouch()
 
 
function btn2_OnTouch()
{
    // use SetText as first parameter 
    // to Set the Textcolor of the contol
    pick = new ColorPicker(SetText, spin, true);
    pick.Show();   
}//function btn_OnTouch()
 
 
function btn3_OnTouch()
{
   // Use SetBackground as first parameter 
   // to set the Backgroundcolor of the control
   pick = new ColorPicker(SetBackground, lst, true);
   pick.Show();   
}//function btn_OnTouch()
sample_code/colorpicker.txt · Last modified: 2015/02/05 20:06 (external edit)