SOURCE CODE

Tambah menu dan fungsi pada google sheet

Clear Function

// CLEAR

function clearCell(){

var ss = SpreadsheetApp.getActiveSpreadsheet();

var formS = ss.getSheetByName("pelataanDSKPN");

var rangeToClear = ["C20", "C22", "C24", "C26", "C28", "C30", "C32",];

for (var i=0; i<rangeToClear.length; i++){

formS.getRange(rangeToClear[i]).clearContent();

}

}

Save

//SAVE

function submitData(){

var ss = SpreadsheetApp.getActiveSpreadsheet();

var formS = ss.getSheetByName("pelataanDSKPN");

var dataS = ss.getSheetByName("dataPelataan");

var values = [[formS.getRange("A1").getValue(),

formS.getRange("C20").getValue(),

formS.getRange("C22").getValue(),

formS.getRange("C24").getValue(),

formS.getRange("C26").getValue(),]];

dataS.getRange(dataS.getLastRow()+1, 1, 1, 5).setValues(values);

clearCell();

}

Search

// SEARCH

var SEARCH_COL_IDX = 0;

var RETURN_COL_IDX = 0;


function search() {


var ss = SpreadsheetApp.getActiveSpreadsheet();

var formS = ss.getSheetByName("pelataanDSKPN");

var str = formS.getRange("A1").getValue();

var values = ss.getSheetByName("dataPelataan").getDataRange().getValues();

for (var i = 0;i < values.length; i++){

var row = values[i];

if (row[SEARCH_COL_IDX] == str) {

formS.getRange("C20").setValue(row[1]);

formS.getRange("C22").setValue(row[2]);

formS.getRange("C24").setValue(row[3]);

formS.getRange("C26").setValue(row[4]);

formS.getRange("C28").setValue(row[5]);

return row[RETURN_COL_IDX];

}

}

}

Update

//UPDATE

function update() {

var ss = SpreadsheetApp.getActiveSpreadsheet();

var formS = ss.getSheetByName("pelataanDSKPN");

var dataS = ss.getSheetByName("dataPelataan");

var str = formS.getRange("A1").getValue();

var values = ss.getSheetByName("dataPelataan").getDataRange().getValues();

for (var i = 0; i < values.length; i++) {

var row = values[i];

if (row[SEARCH_COL_IDX] == str) {

var INT_R = i+1

var values1 = [[formS.getRange("A1").getValue(),

formS.getRange("C20").getValue(),

formS.getRange("C22").getValue(),

formS.getRange("C24").getValue(),

formS.getRange("C26").getValue(),

formS.getRange("C28").getValue(),]];

dataS.getRange(INT_R, 1, 1, 181).setValues(values1);

SpreadsheetApp.getUi().alert(' "Data Telah Dikemas Kini" ');

}

}

}

Delete

// DELETE

function Delete() {

var ss = SpreadsheetApp.getActiveSpreadsheet();

var formS = ss.getSheetByName("pelataanDSKPN");

var dataS = ss.getSheetByName("dataPelataan");

var ui = SpreadsheetApp.getUi();

var response = ui.alert(' "Adakah Anda Pasti Untuk Padam ?" ',ui.ButtonSet.YES_NO);

//Process user response

if (response == ui.Button.YES) {

var str = formS.getRange("A1").getValue();

var values = ss.getSheetByName("dataPelataan").getDataRange().getValues();

for (var i = 0; i < values.length; i++) {

var row = values[i];

if (row[SEARCH_COL_IDX] == str) {

var INT_R = i+1

dataS.deleteRow(INT_R) ;


//ClearCell();

formS.getRange("C20").clearContent();

formS.getRange("C22").clearContent();

formS.getRange("C24").clearContent();

formS.getRange("C26").clearContent();

formS.getRange("C28").clearContent();

}

}

}

}

UI Menu Bar

//UI MENU BAR

function onOpen(e){

SpreadsheetApp.getUi()

.createMenu('Pelataan DSKPN')

.addItem('Search','search')

.addItem('Save','submitData')

.addItem('Update','update')

.addItem('Delete','Delete')

.addItem('Clear','clearCell')

.addSeparator()

.addToUi();

}

Tambah datetime pada skrin OBS.

perlu dalam format .lua, boleh download pada button yang disediakan.

--[[ OBS Studio datetime script


This script transforms a text source into a digital clock. The datetime format

is configurable and uses the same syntax than the Lua os.date() call.

]]


obs = obslua

source_name = ""

datetime_format = ""


activated = false



-- Function to set the time text

function set_datetime_text(source, format)

local text = os.date(format)

local settings = obs.obs_data_create()


obs.obs_data_set_string(settings, "text", text)

obs.obs_source_update(source, settings)

obs.obs_data_release(settings)

end


function timer_callback()

local source = obs.obs_get_source_by_name(source_name)

if source ~= nil then

set_datetime_text(source, datetime_format)

obs.obs_source_release(source)

end

end


function activate(activating)

if activated == activating then

return

end


activated = activating


if activating then

obs.timer_add(timer_callback, 1000)

else

obs.timer_remove(timer_callback)

end

end


-- Called when a source is activated/deactivated

function activate_signal(cd, activating)

local source = obs.calldata_source(cd, "source")

if source ~= nil then

local name = obs.obs_source_get_name(source)

if (name == source_name) then

activate(activating)

end

end

end


function source_activated(cd)

activate_signal(cd, true)

end


function source_deactivated(cd)

activate_signal(cd, false)

end


function reset()

activate(false)

local source = obs.obs_get_source_by_name(source_name)

if source ~= nil then

local active = obs.obs_source_showing(source)

obs.obs_source_release(source)

activate(active)

end

end


----------------------------------------------------------


function script_description()

return "Sets a text source to act as a clock when the source is active.\

\

The datetime format can use the following tags:\

\

%a abbreviated weekday name (e.g., Wed)\

%A full weekday name (e.g., Wednesday)\

%b abbreviated month name (e.g., Sep)\

%B full month name (e.g., September)\

%c date and time (e.g., 09/16/98 23:48:10)\

%d day of the month (16) [01-31]\

%H hour, using a 24-hour clock (23) [00-23]\

%I hour, using a 12-hour clock (11) [01-12]\

%M minute (48) [00-59]\

%m month (09) [01-12]\

%p either \"am\" or \"pm\" (pm)\

%S second (10) [00-61]\

%w weekday (3) [0-6 = Sunday-Saturday]\

%x date (e.g., 09/16/98)\

%X time (e.g., 23:48:10)\

%Y full year (1998)\

%y two-digit year (98) [00-99]\

%% the character `%´"

end


function script_properties()

local props = obs.obs_properties_create()


obs.obs_properties_add_text(props, "format", "Datetime format", obs.OBS_TEXT_DEFAULT)


local p = obs.obs_properties_add_list(props, "source", "Text Source", obs.OBS_COMBO_TYPE_EDITABLE, obs.OBS_COMBO_FORMAT_STRING)

local sources = obs.obs_enum_sources()

if sources ~= nil then

for _, source in ipairs(sources) do

source_id = obs.obs_source_get_id(source)

if source_id == "text_gdiplus" or source_id == "text_ft2_source" then

local name = obs.obs_source_get_name(source)

obs.obs_property_list_add_string(p, name, name)

end

end

end

obs.source_list_release(sources)


return props

end


function script_defaults(settings)

obs.obs_data_set_default_string(settings, "format", "%X")

end


function script_update(settings)

activate(false)


source_name = obs.obs_data_get_string(settings, "source")

datetime_format = obs.obs_data_get_string(settings, "format")


reset()

end


function script_load(settings)

local sh = obs.obs_get_signal_handler()

obs.signal_handler_connect(sh, "source_show", source_activated)

obs.signal_handler_connect(sh, "source_hide", source_deactivated)

end


Cara masukkan datetime ke dalam OBS

Sources > tambah Text (GDI+) > Bagi nama source > Klik OK > Taip dummy ayat dan set saiz font serta warna > Klik OK > Tools > Scripts > Tekan + > pilih datetime.lua > Pilih text format > Pilih text tadi > Close > Text tadi akan bertukar kepada format yang kita telah tetapkan

Coding

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");


* {

box-sizing: border-box;

}

body {

font-family: "Muli", sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow: visible;

margin: 0;

}


.container {

display: flex;

width: 90vw;

}


.panel {

background-size: auto 100%;

background-position: center;

background-repeat: no-repeat;

height: 90vh;

border-radius: 50px;

color: #ffffff;

cursor: pointer;

flex: 0.5;

margin: 10px;

position: relative;

transition: flex 0.7s ease-in;

}


.panel h3 {

font-size: 24px;

position: absolute;

bottom: 20px;

left: 20px;

margin: 0;

opacity: 0;

}


.panel.active {

flex: 5;

}


.panel.active h3 {

opacity: 1;

transition: opacity 0.3s ease-in 0.4s;

}


@media (max-width: 480px) {

.container {

width: 100vw;

}


.panel:nth-of-type(4),

.panel:nth-of-type(5) {

display: none;

}

}


</style>

<title>Expanding Cards</title>

</head>

<body>

<div class="container">

<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">

<h3>Explore The World</h3>

</div>

<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">

<h3>Wild Forest</h3>

</div>

<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">

<h3>Sunny Beach</h3>

</div>

<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">

<h3>City on Winter</h3>

</div>

<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">

<h3>Mountains - Clouds</h3>

</div>

</div>

<script>

const panels = document.querySelectorAll('.panel')


panels.forEach(panel => {

panel.addEventListener('click', () => {

removeActiveClasses()

panel.classList.add('active')

})

})


function removeActiveClasses() {

panels.forEach(panel => {

panel.classList.remove('active')

})

}

</script>

</body>

</html>