0 Replies Latest reply on Feb 24, 2016 6:18 AM by Pedro Cortez Marques

    Vertical text on iconbutton solution

    Pedro Cortez Marques Level 3

      I posted this on another forum, but I think it could help also someone here.

      It works well on Bridge also.

      If some one need to have Japanese or Chinese or Korean text vertical buttons this can be done.

      Of course you can also use other alphabets.

       

      In this case:

      • If you try to change the size of the font, the size of the button will adapt automatically.
      • If you change the text, the size of the button will adapt automatically.
      • I have also put the value of the margin you want between the text and the button limits.

      There are several variations you can adapt, like the colors, the rollover line width and color, etc.

       

       

      Here is the code:

       

       

      var w = new Window("dialog");  
      b = w.add ('iconbutton',undefined,undefined, {style:'toolbutton', margin:6}); // you can change here the margin text<>button  
      b.size = [20,200];  
      b.textPen = b.graphics.newPen(b.graphics.PenType.SOLID_COLOR, [0,0,0,1], 2); // text color [R/255, G/255, B/255, alpha/255]  
      b.fillBrush = b.graphics.newBrush( b.graphics.BrushType.SOLID_COLOR, [1, 1, 1, 1] ); // background color [R/255, G/255, B/255, alpha/255]  
      b.graphics.font = ScriptUI.newFont ('Trebuchet MS', 'Regular', 24); // "Regular", "Bold", "Italic", "BoldItalic".  
      b.text = "縦書きのテキスト";  
      var string_arr = String(b.text).split('');  
      var letterSize = [0,0];  
      // this part will get measured each single letter to decide what has the most larger width and its height  
      for (var a in string_arr) {  
          var newLetterSize = b.graphics.measureString(string_arr [a], b.graphics.font);  
          if (letterSize[0] < newLetterSize[0]) letterSize[0] = newLetterSize[0];  
          letterSize[1] =  newLetterSize[1];  
      }  
      b.size = [letterSize[0] + b.properties.margin*2, letterSize[1]*string_arr.length +  b.properties.margin*2];  
        
      b.onDraw = function (event) {  
          with( this ) {  
              graphics.drawOSControl();  
              graphics.rectPath(0,0,size[0],size[1]);  
              graphics.fillPath(fillBrush);  
              // the rollover events (I decided to put a line around but it could be also a background color change  
              if (event.mouseOver) {
                  graphics.newPath();
                  graphics.rectPath(0,0,size[0],size[1]);  
                  graphics.fillPath(graphics.newBrush(graphics.BrushType.SOLID_COLOR, [0.5, 0.5, 0.5, 0.25] ));  
                  graphics.strokePath(textPen);  
              } else {
                  graphics.newPath();
                  graphics.rectPath(0,0,size[0],size[1]);  
                  graphics.fillPath(graphics.newBrush(graphics.BrushType.SOLID_COLOR, [0.5, 0.5, 0.5, 0] ));  
                  graphics.strokePath(graphics.newPen(graphics.PenType.SOLID_COLOR, [0,0,0,0], 2));  
              }  
              if ( text ) {  
                  var string_arr = String(text).split('');  
                  for (var a in string_arr) {  
                      var letterSize = graphics.measureString(string_arr [a], graphics.font);  
                      graphics.drawString( string_arr [a], textPen, (size[0]-letterSize[0])/2, letterSize[1]*a + properties.margin, graphics.font);  
                  }  
              }  
          }  
      }  
        
      b.onClick = function () {  
          w.close();  
      }  
      
      
      w.show();  
        
      // This other events are also available to use inside the onDraw function  
      //~ mouseOver  
      //~ leftButtonPressed   
      //~ middleButtonPressed   
      //~ rightButtonPressed   
      //~ hasFocus   
      //~ shiftKeyPressed   
      //~ ctrlKeyPressed   
      //~ cmdKeyPressed   
      //~ optKeyPressed   
      //~ altKeyPressed   
      //~ numLockKeyPressed   
      //~ capsLockKeyPressed