diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 5409461..da0f4bd 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -23,6 +23,7 @@ jobs: rm -rf .github && cd src && cordova platform add android --verbose && + cordova plugin add cordova-plugin-x-toast && cordova plugin add cordova-plugin-screen-pinning --verbose && cordova build --verbose" diff --git a/README.md b/README.md index bae4b9a..338efed 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,7 @@ logo
- -screenshot_of_app - +screenshot_of_app Simple little paint application for kids. @@ -35,11 +33,11 @@ If you're curious or want to make your own custom tweaks, you can build BabbyPai 3. Now you're ready to prepare the environment and build the APK for Android: ```bash docker run --rm -i -v $PWD:/workspace -w /workspace --privileged ghcr.io/alexjyong/babbypaint:main sh -c " - rm -rf .github && - cd src && - cordova platform add android --verbose && - cordova plugin add cordova-plugin-screen-pinning --verbose && - cordova build --verbose" + cd src && + cordova platform add android --verbose && + cordova plugin add cordova-plugin-x-toast && + cordova plugin add cordova-plugin-screen-pinning --verbose && + cordova build --verbose" ``` 4. Once the build process finishes, you’ll have your APK ready in the `/src/platforms/android/app/build/outputs/apk/` directory. diff --git a/src/config.xml b/src/config.xml index 0e83faa..58fe3b0 100644 --- a/src/config.xml +++ b/src/config.xml @@ -1,5 +1,5 @@ - + BabbyPaint Simple Paint app for kids diff --git a/src/package-lock.json b/src/package-lock.json index ec0e6e7..1fe57cc 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -10,7 +10,8 @@ "license": "Apache-2.0", "devDependencies": { "cordova-android": "^13.0.0", - "cordova-plugin-screen-pinning": "^1.1.3" + "cordova-plugin-screen-pinning": "^1.1.3", + "cordova-plugin-x-toast": "^2.7.3" } }, "node_modules/@netflix/nerror": { @@ -234,6 +235,18 @@ "integrity": "sha512-tFSmFtkyFHNAhDvyBDR6TOG+rGzg2fZx1B3FX6ugSGC3olmt6UDAPputXaSbGU3oHg96stxdgKVaInGw8xOZ4Q==", "dev": true }, + "node_modules/cordova-plugin-x-toast": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/cordova-plugin-x-toast/-/cordova-plugin-x-toast-2.7.3.tgz", + "integrity": "sha512-+1aV7wJZpJdeZKTbBiagGawAJq7LOA4TFD6Et1uyTz+OUr3F4url8mXS+qLsag6kBCRftWg9WTA2bZTZv4tBjw==", + "dev": true, + "engines": [ + { + "name": "cordova", + "version": ">=3.0.0" + } + ] + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", diff --git a/src/package.json b/src/package.json index 2c1914e..d3eabeb 100644 --- a/src/package.json +++ b/src/package.json @@ -1,7 +1,7 @@ { "name": "dev.alexjyong.babbypaint", "displayName": "BabbyPaint", - "version": "0.0.2", + "version": "0.0.3", "description": "A simple paint app for kids", "main": "index.js", "scripts": { @@ -14,11 +14,13 @@ "license": "Apache-2.0", "devDependencies": { "cordova-android": "^13.0.0", - "cordova-plugin-screen-pinning": "^1.1.3" + "cordova-plugin-screen-pinning": "^1.1.3", + "cordova-plugin-x-toast": "^2.7.3" }, "cordova": { "plugins": { - "cordova-plugin-screen-pinning": {} + "cordova-plugin-screen-pinning": {}, + "cordova-plugin-x-toast": {} }, "platforms": [ "android" diff --git a/src/www/css/index.css b/src/www/css/index.css index 0c67d84..42329fc 100644 --- a/src/www/css/index.css +++ b/src/www/css/index.css @@ -29,7 +29,6 @@ canvas { background: #FFF; border-radius: 5px; box-shadow: 0 4px 0 0 #E0E0E0; - cursor: url(../img/cursor.png), crosshair; max-width: 90%; max-height: 60%; display: block; @@ -107,6 +106,63 @@ button.utility:hover { background: #56A64C; } +/* FAB container */ +.fab-container { + position: fixed; + right: 20px; + bottom: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +/* Main FAB button */ +/* General FAB styling */ +.fab { + position: fixed; + bottom: 20px; + right: 20px; + width: 56px; + height: 56px; + border-radius: 50%; + background-color: #68B25B; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 3px 0 0 #6A845F; + cursor: pointer; + transition: transform 0.3s; +} + +/* Sub-FAB styling */ +.sub-fab { + position: fixed; + bottom: 80px; /* Adjust this to control distance from the main FAB */ + right: 20px; + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #68B25B; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 3px 0 0 #6A845F; + cursor: pointer; + transform: scale(0); /* Initially hidden */ + opacity: 0; /* Initially invisible */ + pointer-events: none; /* Disable click events initially */ + transition: transform 0.3s, opacity 0.3s; +} + +/* FAB buttons when expanded */ +.fab.expanded + .sub-fab { + transform: scale(1); + opacity: 1; + pointer-events: all; /* Enable click events */ +} + /* Responsive adjustments */ @media only screen and (orientation: landscape) { .app-container { diff --git a/src/www/index.html b/src/www/index.html index 7c95db8..d87ca3c 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -8,8 +8,8 @@ Babby Paint! 🖌️ - - + +
@@ -25,11 +25,14 @@
  • - +
    + +
    + +
    - - + diff --git a/src/www/js/index.js b/src/www/js/index.js index d195d10..c8fac8a 100644 --- a/src/www/js/index.js +++ b/src/www/js/index.js @@ -8,6 +8,7 @@ var mouseDown = false; var lockButton = $('#lockButton'); var clearButton = $('#clearButton'); +var fabButton = $('#fabButton'); // Main FAB button var isLocked = false; // Function to resize the canvas @@ -117,13 +118,21 @@ var tapCountLock = 0; // Lock button event lockButton.on('click', function() { - if (!isLocked){ cordova.plugins.screenPinning.enterPinnedMode( function () { console.log("Pinned mode activated!"); isLocked = true; - lockButton.text('Tap 4 times quickly to unlock'); + + window.plugins.toast.hide(); + window.plugins.toast.showWithOptions( + { + message: "Tap 4 times quickly to unlock", + duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself. + position: "top" + } + ); + lockButton.text('Unlock app'); }, function (errorMessage) { console.log("Error activating pinned mode:", errorMessage); @@ -137,7 +146,14 @@ lockButton.on('click', function() { // On the first tap, skip comparison logic but update the button text immediately if (lastTapLock === 0 || currentTime - lastTapLock >= 1000) { tapCountLock = 1; // First tap starts the counting at 1 - lockButton.text('Tap 3 more times quickly to unlock'); // Immediate feedback on first tap + window.plugins.toast.hide(); + window.plugins.toast.showWithOptions( + { + message: "Tap 3 more times quickly to unlock", + duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself. + position: "top" + } + ); } else { tapCountLock++; if (tapCountLock >= 4) { @@ -146,7 +162,7 @@ lockButton.on('click', function() { console.log("Pinned mode deactivated!"); isLocked = false; tapCountLock = 0; - lockButton.text('Lock'); + lockButton.text('Lock app'); }, function (errorMessage) { console.log("Error deactivating pinned mode:", errorMessage); @@ -155,26 +171,33 @@ lockButton.on('click', function() { lastTapLock = 0; tapCountLock = 0; } else { - lockButton.text(`Tap ${4 - tapCountLock} more times quickly to unlock`); + var message = ""; + if (3 - tapCountLock == 2) { + message = `Tap 1 more time quickly to unlock.`; + } + else { + message = `Tap ${4 - tapCountLock} more times quickly to unlock.` + } + window.plugins.toast.hide(); + window.plugins.toast.showWithOptions( + { + message: message, + duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself. + position: "top" + } + ); } } lastTapLock = currentTime; - // Set a timeout to reset the button text after 1000 ms (1 second) of inactivity - resetLockTextTimeout = setTimeout(function() { - lockButton.text('Lock'); - }, 1000); - } - }); +// Clear canvas on 3 button click var resetClearTextTimeout; var lastTapClear = 0; var tapCountClear = 0; - -// Clear canvas on 3 button click clearButton.on('click', function() { clearTimeout(resetClearTextTimeout); // Clear any existing timeout var currentTime = Date.now(); @@ -190,7 +213,13 @@ clearButton.on('click', function() { tapCountClear = 0; clearButton.text('Clear Canvas'); } else { - clearButton.text(`Tap ${3 - tapCountClear} more times quickly to clear`); + if (3 - tapCountClear == 2) { + clearButton.text(`Tap 1 more time quickly to clear`); + } + else { + clearButton.text(`Tap ${3 - tapCountClear} more times quickly to clear`); + } + } } @@ -202,3 +231,11 @@ clearButton.on('click', function() { }, 1000); }); +// Toggle FAB expansion to show or hide the lock button +fabButton.on('click', function() { + console.log('FAB clicked'); + $(this).toggleClass('expanded'); + $('.sub-fab').toggleClass('expanded'); + console.log('FAB class:', $(this).attr('class')); + console.log('Sub-FAB class:', $('.sub-fab').attr('class')); +});