These adverts are supporting the forum's costs and the products/services are not endorsed by the forum owners.
First have you tried?
Log in to Search the Forum for help!
Learn more about using FreeStyler at the FreeStyler WIKI HERE
Learn more about DMX in General at The DMX Wiki HERE

if all else fails and you need a fixture consider the fixture building service HERE

Touchscreen setup grid and new buttons

Discuss the latest developments or get support for them HERE.
Post Reply
User avatar
GaryBonaducci
DJ
Posts: 138
Joined: March 30th, 2009, 4:34 am
FreeStyler Version: 3.3.7
I Use FreeStyler for: DJ

Touchscreen setup grid and new buttons

Post by GaryBonaducci »

Positioning buttons for the touchscreen interface in the "userinterface 2" mode can be a little difficult because there's so much freedom to where you can place the buttons. I've created an 1024x768 bitmap that contains gridlines to help align buttons during the setup process. The red grid is for FreeStyler's rectangular buttons; The green grid is for FreeStyler's square buttons. The two blue lines show the screen center.

To use the file:
1) Navigate to "C:\Program FIles\FreeStyler\Images\Touch" (or "C:\Program Files (x86)\FreeStyler\Images\Touch" for 64-bit Vista).
2) Locate the "background.bmp" file, and rename it to a temporary name such as "background-original.bmp".
3) Download and unzip my bitmap file.
4) Rename my file to "background.bmp", and place it in the "Touch" folder.
5) When you restart FreeStyler, the new "background.bmp" file should be in the background of the touchscreen.

The two grids on my bitmap are necessary because FreeStyler's rectangular and square buttons don't share dimensions. I have also created a set of buttons based on a 64-pixel grid: Square 64px by 64px buttons, and rectangular 128px by 64px buttons. I'll upload them later. They work well with FreeStyler, but one problem is that they're larger than the existing buttons. This means using these buttons I created will make you lose screen space. I'll be working on smaller buttons later this week, and when I get those done, I'll upload both sets.

ETA: By the way, I believe you will need to be running version 3.2 for this "background.bmp" file swap to work.
You do not have the required permissions to view the files attached to this post.


User avatar
LJ_krede.dk
Moderator
Posts: 1028
Joined: October 29th, 2007, 8:01 pm
FreeStyler Version: 3.3.7
I Use FreeStyler for: Where do I start?

Re: Touchscreen setup grid and new buttons

Post by LJ_krede.dk »

Thank you very much... Most helpfull image you have done
GaryBonaducci wrote:ETA: By the way, I believe you will need to be running version 3.2 for this "background.bmp" file swap to work.
Correct!, it is only for the 3.2 version (and later when this happens)
/LJ_krede.dk
Aalborg, Denmark
Moderator, Supporter and Bug report manager for the FreeStyler community
Found a bug? Submit a Bug Report
User avatar
GaryBonaducci
DJ
Posts: 138
Joined: March 30th, 2009, 4:34 am
FreeStyler Version: 3.3.7
I Use FreeStyler for: DJ

Re: Touchscreen setup grid and new buttons

Post by GaryBonaducci »

I'm happy to see you find it useful, LJ! :)

---

Here is a new set of buttons. As mentioned earlier, they are based on a 64-pixel dimension: 64px-by-128px rectangular buttons and 64px-by-64px square buttons. Version 3.2 is required to use these buttons.

The rectangular button design looks very similar to the existing FreeStyler buttons. However, instead of using black "Enttec keyboard" style buttons for the four "Custom" square buttons, I continued the "iPhone" style from the rectangular buttons. These square buttons no longer fit side-to-side next to each other like a keypad--they have a black margin like the rectangular ones. This was done quite frankly because I am not using an Enttec controller and had no need for the buttons to look that way. If there is any interest, I can recreate the buttons to appear like keypad buttons.

Before experimenting with these buttons, make a Backup! These buttons are all slightly larger than FreeStyler's original buttons and so if you have an existing layout, it might not look good or even layout properly with these new button bitmaps.

Follow these steps to install:

1) BACKUP FREESTYLER! Because touchscreen setup does not have a way to save or undo changes to your touchscreens, there is no way to get back your old screen other than a Restore.

2) Exit FreeStyler.

3) Navigate to the "\Images" folder in your FreeStyler program folder.

4) Rename the "Touch" subfolder to "Touch - Original"

5) Download and unzip the attached file named "Touch - iPhone.zip". It contains a folder named "Touch - iPhone" that contains the new button bitmaps.

6) Place this folder of bitmaps into FreeStyler's "\Images" folder, and rename it to "Touch".

7) When you restart FreeStyler and have the touchscreen active, you will see the new buttons in place of the original buttons. The background will be a 32-by-32 pixel grid on a light blue background. These buttons are slightly bigger than the original FreeStyler buttons, so you will probably need to reposition them.

8) When you are done repositioning the new buttons, you won't need the gridlines anymore. Exit FreeStyler. Navigate to FreeStyler's "Touch" folder. Delete the file "background.bmp". Duplicate the file "background - black.bmp", and rename it "background.bmp". This is a simple 1024-by-768 bitmap that's solid black to match the button's background color.

9) Restart FreeStyler. A black background should be in place.

To undo these changes, you must use FreeStyler's Restore function.

---

NOTES:

1) Even though FreeStyler has only four "Custom" buttons, there's a whole set of square buttons available in eleven color pairs.

2) Both the rectangular and square buttons have "ON" and "OFF" states that follow FreeStyler's default scheme: A button that is "OFF" is bright, and a button that is "ON" (or active) is dim.

I find this button behavior a bit odd--it should work the other way around whereby a button that is "OFF" is dark, and a button that is "ON" (or active) should be bright. But one problem with this is that in FreeStyler, most buttons are normally "OFF". So following this logic would mean a lot of dark buttons on your console--Not really exciting to look at or impressive to show any bystanders. So, instead of changing the button's Brightness, an alternative solution is to change its Color. Then instead of Bright/Dark states to indicate OFF/ON, we can use a ColorA/ColorB scheme to indicate button state.

To use the other square button colors for Custom buttons, or to change the button action from Bright/Dark to ColorA/ColorB, one has to understand how the button filenames corresponds the button names and its state (on or off) within FreeStyer. In the touchscreen window, a right-click on any button opens up a menu where the programmer/interface designer can select the buttons color and shape. Apparently (someone correct me if I'm wrong), it appears that the selection in the pop-up menu is "hard-wired" to the filenames in the "Touch" folder:

Code: Select all

 Menu Name     OFF state        ON state
 ---------    -----------     ------------
    Gray        gray.bmp        gray2.bmp
   White       white.bmp       white2.bmp
   Black       black.bmp       black2.bmp
    Red         red.bmp         red2.bmp
   Orange      orange.bmp      orange2.bmp
   Yellow      yellow.bmp      yellow2.bmp
   Green       green.bmp       green2.bmp
    Blue        blue.bmp        blue2.bmp
  Darkblue    darkblue.bmp    darkblue2.bmp
    Pink        pink.bmp        pink2.bmp
   Purple      purple.bmp      purple2.bmp
  Custom1     custom11.bmp    custom21.bmp
  Custom2     custom12.bmp    custom22.bmp
  Custom3     custom13.bmp    custom23.bmp
  Custom4     custom14.bmp    custom24.bmp
Thus, when one uses a right-click to make a button "Orange", FreeStyler reads the two files "orange.bmp" and "orange2.bmp" to draw the button in its OFF and ON states. To create FreeStyler's default button behavior, "orange.bmp" is bright orange and "orange2.bmp" is dark orange. So to get the button to behave where an "OFF" Orange button is dark and an "ON" button is bright, one has to swap the filenames for each file color pair. In the same fashion, to change the Custom button colors simply duplicate any of the "64x64" bitmaps and rename the new file to the corresponding button filename. Finally, to get buttons to have a ColorA/ColorB behavior, replace the "color2.bmp" file for any color with a button that has the color you want to represent the "ON" state.

3) These buttons were designed to replace the default FreeStyler touchscreen buttons with minimal changes to dimensions. Therefore, they share a weakness with the regular FreeStyler buttons: They may not be wide enough to display a long Sequence name. The Cue palette is able to display sequence names up to about 24 characters in length; These touchscreen buttons can only display about 18 characters before they bleed over the sides. I have another design in the works that have buttons about 180px wide. FreeStyler automatically centers the text on each bitmap, so a button with this width solves the problem without any changes to coding necessary.

4) An alternative to buttons that change brightness or color to indicate its state are buttons that change its shape. For example, buttons that look like a toggle switch or push button. I haven't given serious thought to trying this yet.

I have a screencap of my "Next Generation" FreeStyler touchscreen below. It's based on Star Trek's LCARS interface and has buttons that change color versus changing brightness. And yes, it works!! :D
You do not have the required permissions to view the files attached to this post.
User avatar
djSupport
Hosts the Freestyler Forum and is an Admin!
Posts: 1901
Joined: July 9th, 2007, 6:57 pm
FreeStyler Version: Forum la
I Use FreeStyler for: Just for the Fun of it.
Contact:

Re: Touchscreen setup grid and new buttons

Post by djSupport »

GaryBonaducci wrote: I have a screencap of my "Next Generation" FreeStyler touchscreen below. It's based on Star Trek's LCARS interface and has buttons that change color versus changing brightness. And yes, it works!! :D
Fantastic look... :D
Heather Trott, You Babe! I Drive a Dacia Duster and Explore! Check it out
User avatar
dmxlighting
FS is my life
Posts: 1025
Joined: August 11th, 2008, 11:46 pm
FreeStyler Version: beta
I Use FreeStyler for: Where do I start?

Re: Touchscreen setup grid and new buttons

Post by dmxlighting »

Hi Gary

You may have started something here!
Nice ideas!
Freestyler DMX - Pissing over the competition since 199x
What do you want for free ?

Freelance Lighting Programmer / Sound Engineer / Designer / Installer and General All Round AV Expert
User avatar
GaryBonaducci
DJ
Posts: 138
Joined: March 30th, 2009, 4:34 am
FreeStyler Version: 3.3.7
I Use FreeStyler for: DJ

Re: Touchscreen setup grid and new buttons

Post by GaryBonaducci »

Thanks for the feedback! :mrgreen:

---

Attached below is a ZIPped file that contains the bitmaps needed to create the Star Trek "LCARS" interface I have shown above. This mod only works with the current release, version 3.2! This interface also is intended to work best as a playback setup where Cues and Overrides are primarily used to create lighting effects. It is formatted for a 1028 x 768 display.

IMPORTANT! Before trying this out, create TWO backups:
1) Use FreeStyler's "File > Backup/Restore" function to create a backup, and
2) Duplicate the entire "\FreeStyler\Images\Touch" folder, and rename it "Touch - Original".
Without making these two backups, you will not be able to undo any of the changes below and revert to your current touchscreen setup!!

Follow these steps to install and setup the LCARS interface:

1) Create your two backups! Use FreeStyler's Backup function to create a regular backup. Then, navigate to the "\FreeStyler\Images" folder, and duplicate the "Touch" folder. Rename the duplicate folder to "Touch - Original".

2) Exit FreeStyler.

3) Download and unzip the attached file. It contains a folder called "Touch - LCARS" that contains 33 bitmap images.

4) Place the unzipped "Touch - LCARS" folder into the "\FreeStyler\Images" folder.

5) Delete the bitmaps in the "\FreeStyler\Images\Touch" folder. (You backed up the contents earlier, didn't you?)

6) Copy the thirty-three (33) bitmap files from the "Touch - LCARS" folder into the "Touch" folder.

7) Start FreeStyler.

8) On the touchscreen interface, you should see a new background image plus any previously placed buttons. It is easiest to layout the LCARS interface from scratch, so use the "Remove All Buttons" command to clear the screen.

9) When the screen is cleared of all buttons, you will see a layout pattern plus instructions in yellow "Post-It" notes. These instructions will tell you which buttons should be place in each area. Additionally, the appropriate "colors" for the buttons in each area is listed.

FYI, here's a breakdown of the new buttons used in this layout:
Gray, White, and Black buttons = 202 x 36 pixel buttons
Red, Yellow, Orange, Green, Blue, and Darkblue buttons = 128 x 48 pixel buttons
Pink and Purple buttons = 128 x 36 pixel buttons
Custom buttons = 120 x 40 pixel buttons

10) When all the buttons have been laid out, exit FreeStyler. Navigate to the "\FreeStyler\Images\Touch" folder. Delete the file "background.bmp". Duplicate the file "background - full.bmp", and rename it to "background.bmp".

11) Start FreeStyler, and the finished touchscreen background should appear. You may need to shift around a few of the buttons a pixel or two to get it aligned perfectly.

---

NOTES:

1) This interface design primarily uses the main buttons available on the "Cues" and "Override Buttons" windows. It is probably not appropriate for all users. See the screencap in my previous post to get an idea of which buttons are available.

2) There is an issue where the Sequence buttons labels don't update when the Cuelist Buttons are pressed. I'm pretty sure I already submitted a Bug Report for this. But if I have not, then expect Raph to yell at me again. :D

3) The Orange, Green, Blue, and Darkblue buttons all turn yellow when in the "On" state; the Red and "Purple" button (which is actually red in color) turn green when in the "On" state.

4) That's all I can think of right now! It's late and I need to work tomorrow.... Have fun with it, and if you try it out please leave me some feedback! :D
You do not have the required permissions to view the files attached to this post.
serlichman
Knows how to turn Lights ON
Posts: 1
Joined: October 15th, 2011, 4:11 pm
FreeStyler Version: 3.4
I Use FreeStyler for: Stage Show

Re: Touchscreen setup grid and new buttons

Post by serlichman »

I tried the steps here, and it doesn't seem to work in the latest version. I would really like to use custom buttons on the Touchscreen 2 interface. I'm not sure where FS is pulling button BMP's from. I know it used to be under the Touch directory, but I actually deleted that directory as a test, and FS still used it's button shapes. Are these now embedded in the program and no longer accessible to change?
Thanks,
Scott
Prokuniev
Knows how to turn Lights ON
Posts: 3
Joined: March 5th, 2018, 12:29 pm
FreeStyler Version: 4.1.5
I Use FreeStyler for: Home Lighting Control

Re: Touchscreen setup grid and new buttons

Post by Prokuniev »

Hi,
Indeed, it doesn’t work anymore.
Is there a solution ?
Can this be solved in a future update ?
Thank you.
oldschool87
Knows how to turn Lights ON
Posts: 4
Joined: March 23rd, 2020, 9:19 am
I Use FreeStyler for: Nightclub Lighting

Re: Touchscreen setup grid and new buttons

Post by oldschool87 »

There is a possibility of use animated gif for custom buttons? Or i can use only .bmp image?
Post Reply

Return to “FreeStyler 3rd Party Addons and utilities”