User Tools

Site Tools


sample_code:colorpicker

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
sample_code:colorpicker [2015/01/25 14:33]
octazid Created
sample_code:colorpicker [2015/02/05 20:06] (current)
Line 1: Line 1:
 ======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.\\ \\
 {{:pics:colorpicker.png?400|}} {{:pics:colorpicker.png?400|}}
  
-text comming soon...+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. 
 + 
 +<code Javascript 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 
 +</code> 
 + 
 +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. 
 +<code Javascript 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() 
 +</code>
  
sample_code/colorpicker.1422196410.txt.gz · Last modified: 2015/01/25 22:33 (external edit)