Switch - bellinux/pcode GitHub Wiki

The Switch component provides a customizable switch interface. It allows users to create interactive switches with customizable styles, text labels, and callbacks for state changes.

• JavaScript
• Python

JavaScript

Import the Component

import Switch from './js/switch.js';

Create the Switch

To create a switch, instantiate the Switch class with optional configuration parameters. By default, the switch will be initialized in the 'off' state.

const switchInstance = new Switch({
    onText: 'ON', 
    offText: 'OFF', 
    width: 90, 
    height: 180,
    top: 30,
    left: 30,
    fontSize: 20,
    onTurnedOn: () => console.log('Switch turned ON'),
    onTurnedOff: () => console.log('Switch turned OFF'),
    styleOff: { backgroundColor: 'grey' },
    styleOn: { backgroundColor: 'green' }
});

Customizing Styles

You can customize the styles of the switch container, knob, and text elements using the respective setStyleContainer, setStyleKnob, and setStyleTextElement methods.

switchInstance.setStyleContainer({ backgroundColor: 'blue', borderRadius: '15px' });
switchInstance.setStyleKnob({ backgroundColor: 'white', boxShadow: '0 0 5px rgba(0,0,0,0.3)' });
switchInstance.setStyleTextElement({ color: 'black', fontWeight: 'bold' });

Setting Text Labels

Set custom text labels for the 'on' and 'off' states using the setOnOffText method.

switchInstance.setOnOffText('1', 'O');

Setting Position

Adjust the position of the switch on the screen using the setPosition method.

switchInstance.setPosition(100, 50);

Handling State Changes

Register callbacks for when the switch is turned on or off using the onTurnedOn and onTurnedOff methods.

switchInstance.onTurnedOn(() => console.log('Switch is now ON'));
switchInstance.onTurnedOff(() => console.log('Switch is now OFF'));

Removing the Switch

Remove the switch from the DOM using the remove method when it is no longer needed.

switchInstance.remove();

Python

Import the Component

from switch import Switch

Create the Switch

To create a switch, instantiate the Switch class with optional configuration parameters. By default, the switch will be initialized in the 'off' state.

# Example configuration
config = {
    'onText': 'ON',
    'offText': 'OFF',
    'width': 90,
    'height': 180,
    'top': 30,
    'left': 30,
    'fontSize': 20,
    'onTurnedOn': lambda: print('Switch turned ON'),
    'onTurnedOff': lambda: print('Switch turned OFF'),
    'styleOff': {'backgroundColor': 'grey'},
    'styleOn': {'backgroundColor': 'green'}
}

switch_instance = Switch(config)

Customizing Styles

You can customize the styles of the switch container, knob, and text elements using the respective setStyleContainer, setStyleKnob, and setStyleTextElement methods.

switch_instance.setStyleContainer({'backgroundColor': 'blue', 'borderRadius': '15px'})
switch_instance.setStyleKnob({'backgroundColor': 'white', 'boxShadow': '0 0 5px rgba(0,0,0,0.3)'})
switch_instance.setStyleTextElement({'color': 'black', 'fontWeight': 'bold'})

Setting Text Labels

Set custom text labels for the 'on' and 'off' states using the setOnOffText method.

switch_instance.setOnOffText('1', '0')

Setting Position

Adjust the position of the switch on the screen using the setPosition method.

switch_instance.setPosition(100, 50)

Handling State Changes

Register callbacks for when the switch is turned on or off using the onTurnedOn and onTurnedOff methods.

switch_instance.onTurnedOn(lambda: print('Switch is now ON'))
switch_instance.onTurnedOff(lambda: print('Switch is now OFF'))

Removing the Switch

Remove the switch from the DOM using the remove method when it is no longer needed.

switch_instance.remove()