From e68a60eb1e07dddf04ac92652ed32c177d324a92 Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Wed, 25 Sep 2024 14:18:51 +0700 Subject: [PATCH 01/13] update feral file artwork library --- artist-docs/feralfile-artwork-library.md | 257 +++++++++++++++++++++++ 1 file changed, 257 insertions(+) create mode 100644 artist-docs/feralfile-artwork-library.md diff --git a/artist-docs/feralfile-artwork-library.md b/artist-docs/feralfile-artwork-library.md new file mode 100644 index 0000000..3fc2095 --- /dev/null +++ b/artist-docs/feralfile-artwork-library.md @@ -0,0 +1,257 @@ +# Feral File Artwork Library + +###### tags: `Feral File` `operation` + + +## Feral File Variables + +For Feral File generative artworks, it **injects** pre-defined variables then the collector click to view the software artwork in in frame. This helps artists be able to make variants to their artworks. The variables are: +- `blockchain` - (bitmark | ethereum | tezos) +- `contract` - contract address if any. empty for bitmark +- `token_id` - a unique id of a token in the blockchain. It is hex in bitmark and decimal in tezos and ethereum +- `token_id_hash` - the sha256 hash of a token ID. + +### Token ID + +By the design of token contract, it requires a unique id for each tokens. However, in our exhibition structure, we have multiple series and each series would have its own artwork with a same index starts from 0. This brings duplication of token IDs to a contract if we simply use the index as token ID. To avoid confliction, we create a function to generate deterministic unique token id by combining series id and token indexes. + +### Token ID Hash + +It is the sha256 hash of a token ID. The value of the hash is 32 bytes and represented in hex. Here is an example of the hash +``` +0x0aaa657eb7727d08721d447e53ae2959a5a4c6e4a061cc21724a6f759d025d4b +``` +which is a 64-length hex string and is prefixed with `0x`. + +## Deterministic Randomness + +To provide randomness to generative artworks, we create a snippet to offer a random function based on sfc32. The function takes `token_id_hash` (defined above) as the seed of the randomness. This ensures that the randomness is deterministic. If the `token_id_hash` is not given, the snippet will create a random hash so we can test loacally. + +:::success +We use sfc32 in our random function. sfc stands for "Small Fast Counter". It runs very fast in JS. It is part of [PractRand](http://pracrand.sourceforge.net) random number testing suite. +::: + +### Code + +```htmlmixed + +``` + +### Usage + +After you load the snippet, simply call `ffrand` to get a random number. + +```htmlmixed + +``` + +:::warning +If you would like to design the randomness by yourself, please ensure the random value is deterministic by a given `token_id_hash`. Otherwise, the artwork would be different by each page reloads. +::: + +## Artwork Library + +With this parameters from FF, we come up with a library that can get provenance from our indexer. Thus, for software artwork developer's, they can create artwork variants by integrating this library. + +Learning from fxhash, this library is designed to be a simple snippet script (library) that can be put on the top of generative artworks. + +In this snippet script, we only use XHR(XMLHttpRequest). It is because the library does not require any other third-party libraries. This minimize the dependencies of artworks for artists. + + +### Function + +Here lists supported functions + +- Get blockchain height (integer) +- Get provenance (array) + +### Usage + +Attach the script in HEAD. And call to `ffinit` on page loaded. + +```htmlembedded + + + + + + + + + +``` + +In your script, you are able to get these events: +- provenance-request-error +- provenance-ready +- blockchain-info-request-error +- blockchain-info-ready + +Example: + +```javascript! + +``` + +### Provenance Data Example + +```json! +[ + { + "type": "transfer", + "owner": "KT1GbyoDi7H1sfXmimXpptZJuCdHMh66WS9u", + "blockchain": "tezos", + "blockNumber": 2498727, + "timestamp": "2022-07-02T05:29:14Z", + "txid": "ooHk3jYeGuSM2ruCPUog5QprLqphjDrNnDNUBoY2UZDWbm14Unf", + "txURL": "https://tzkt.io/ooHk3jYeGuSM2ruCPUog5QprLqphjDrNnDNUBoY2UZDWbm14Unf" + }, + { + "type": "mint", + "owner": "tz1Ne3XbbFpWAZjPf8QJy5fbuRWpcwUyg42X", + "blockNumber": 2498678, + "timestamp": "2022-07-02T05:04:44Z", + "txid": "oo3X4Fy9RADVk6JVcKS1BeJLjB6bRzwTxLKvbBjFDBdPabHrcmJ", + "txURL": "https://tzkt.io/oo3X4Fy9RADVk6JVcKS1BeJLjB6bRzwTxLKvbBjFDBdPabHrcmJ" + } +] + +``` + +## Artwork Attributes +To provide function tracking artwork attributes, we create a snippet to offer a `$feralfile` namespace and 2 functions `$feralfile.features(array_of_attributes)` to input artwork attributes and `$feralfile.getFeatures()` to get saved attributes based on artwork information + +### Code + +```htmlmixed + +``` +### Usage +After you load the snippet, simply call `$feralfile.features()` to set attributes. + +```htmlmixed + + + + + + + + + + + +``` + +### TODO + +- Refactor API calls +- Merge events +- Select to enable watching + +## Reference + +### Source Code + +#### IPFS Link + +- [V1 - ipfs://QmTBGnS8GdZ1LFFgJzZoM4ArMmxwsrTnEmtEcgLH1h2d1w](https://ipfs.bitmark.com/ipfs/QmTBGnS8GdZ1LFFgJzZoM4ArMmxwsrTnEmtEcgLH1h2d1w) +- [V2 - ipfs://QmcrNv6RihePaRSX7ce5vg9ubtzdz6hjWicqB97uJhGqRk](https://ipfs.bitmark.com/ipfs/QmcrNv6RihePaRSX7ce5vg9ubtzdz6hjWicqB97uJhGqRk) +- [V2 staging - ipfs://QmavGeGEmnfuYPNY1YhNaygj1zN8Z3wk1HrEAnXdu5wSmt](https://ipfs.bitmark.com/ipfs/QmavGeGEmnfuYPNY1YhNaygj1zN8Z3wk1HrEAnXdu5wSmt) +- [V3 - ipfs://QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho](https://ipfs.bitmark.com/ipfs/QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho) \ No newline at end of file From 49bfc725170a7685672dee8ebf2070a23a3342ed Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Wed, 25 Sep 2024 14:52:24 +0700 Subject: [PATCH 02/13] add resize event handling --- artist-docs/feralfile-artwork-library.md | 105 +++++++++++------------ 1 file changed, 50 insertions(+), 55 deletions(-) diff --git a/artist-docs/feralfile-artwork-library.md b/artist-docs/feralfile-artwork-library.md index 3fc2095..323675c 100644 --- a/artist-docs/feralfile-artwork-library.md +++ b/artist-docs/feralfile-artwork-library.md @@ -33,7 +33,7 @@ We use sfc32 in our random function. sfc stands for "Small Fast Counter". It run ### Code -```htmlmixed +```javascript ``` ### Usage -After you load the snippet, simply call `ffrand` to get a random number. +After loading the snippet, call `ffrand` to get a random number. -```htmlmixed +```javascript ``` :::warning -If you would like to design the randomness by yourself, please ensure the random value is deterministic by a given `token_id_hash`. Otherwise, the artwork would be different by each page reloads. +If designing your randomness, ensure it remains deterministic by a given `token_id_hash`; otherwise, the artwork may change with each page reload. ::: ## Artwork Library -With this parameters from FF, we come up with a library that can get provenance from our indexer. Thus, for software artwork developer's, they can create artwork variants by integrating this library. +With these parameters, the Feral File library retrieves provenance from our indexer, enabling software artwork developers to create variants by integrating this library. Inspired by fxhash, this library is designed as a simple snippet that can be included at the top of generative artworks. -Learning from fxhash, this library is designed to be a simple snippet script (library) that can be put on the top of generative artworks. +### Functionality -In this snippet script, we only use XHR(XMLHttpRequest). It is because the library does not require any other third-party libraries. This minimize the dependencies of artworks for artists. - - -### Function - -Here lists supported functions +Supported functions: - Get blockchain height (integer) - Get provenance (array) ### Usage -Attach the script in HEAD. And call to `ffinit` on page loaded. +Include the script in the HEAD section and call `ffinit` when the page loads. -```htmlembedded +```html @@ -125,39 +120,39 @@ Attach the script in HEAD. And call to `ffinit` on page loaded. ``` -In your script, you are able to get these events: +You can listen to these events in your script: - provenance-request-error - provenance-ready - blockchain-info-request-error - blockchain-info-ready - + Example: -```javascript! - +```javascript + ``` ### Provenance Data Example -```json! +```json [ { "type": "transfer", @@ -177,15 +172,15 @@ Example: "txURL": "https://tzkt.io/oo3X4Fy9RADVk6JVcKS1BeJLjB6bRzwTxLKvbBjFDBdPabHrcmJ" } ] - ``` ## Artwork Attributes -To provide function tracking artwork attributes, we create a snippet to offer a `$feralfile` namespace and 2 functions `$feralfile.features(array_of_attributes)` to input artwork attributes and `$feralfile.getFeatures()` to get saved attributes based on artwork information + +To track artwork attributes, a snippet provides the `$feralfile` namespace with two functions: `$feralfile.features(array_of_attributes)` to input attributes and `$feralfile.getFeatures()` to retrieve saved attributes based on the artwork information. ### Code -```htmlmixed +```javascript ``` + ### Usage -After you load the snippet, simply call `$feralfile.features()` to set attributes. -```htmlmixed +Load the snippet and call `$feralfile.features()` to set attributes. + +```html @@ -239,19 +236,17 @@ After you load the snippet, simply call `$feralfile.features()` to set attribute ``` -### TODO - -- Refactor API calls -- Merge events -- Select to enable watching - ## Reference ### Source Code -#### IPFS Link +#### IPFS Links - [V1 - ipfs://QmTBGnS8GdZ1LFFgJzZoM4ArMmxwsrTnEmtEcgLH1h2d1w](https://ipfs.bitmark.com/ipfs/QmTBGnS8GdZ1LFFgJzZoM4ArMmxwsrTnEmtEcgLH1h2d1w) - [V2 - ipfs://QmcrNv6RihePaRSX7ce5vg9ubtzdz6hjWicqB97uJhGqRk](https://ipfs.bitmark.com/ipfs/QmcrNv6RihePaRSX7ce5vg9ubtzdz6hjWicqB97uJhGqRk) - [V2 staging - ipfs://QmavGeGEmnfuYPNY1YhNaygj1zN8Z3wk1HrEAnXdu5wSmt](https://ipfs.bitmark.com/ipfs/QmavGeGEmnfuYPNY1YhNaygj1zN8Z3wk1HrEAnXdu5wSmt) -- [V3 - ipfs://QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho](https://ipfs.bitmark.com/ipfs/QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho) \ No newline at end of file +- [V3 - ipfs://QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho](https://ipfs.bitmark.com/ipfs/QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho) + +### Resize Event Handling + +The artwork should handle window resize events properly. Resize events occur when displaying artwork on phones or TVs, especially when changing orientation. If the window size changes during artwork display, ensure it triggers a redraw with the new canvas size. Since artworks are displayed in an iframe, resizing the parent window will trigger the resize event on your artwork. Reference: [MDN - Window Resize Event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event). \ No newline at end of file From 0ac5ab967d50412a7a7f2f0bd434936638508a00 Mon Sep 17 00:00:00 2001 From: anhthuqs99 Date: Tue, 1 Oct 2024 15:37:15 +0700 Subject: [PATCH 03/13] update docs content link --- agreements/ff-collector-rights/en_US.md | 2 +- agreements/ff-tos/en_US.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/agreements/ff-collector-rights/en_US.md b/agreements/ff-collector-rights/en_US.md index 9d2eeff..467b51d 100644 --- a/agreements/ff-collector-rights/en_US.md +++ b/agreements/ff-collector-rights/en_US.md @@ -38,4 +38,4 @@ Feral File protects artists by forefronting their rights, just like we forefront Your rights are guaranteed in perpetuity until you resell or transfer ownership of the work. --- -*You can review the full terms and conditions of your rights in the [Art Transfer Agreement](https://feralfile.com/legal/art-transfer-agreement) and [Terms for Artists and Collectors](https://feralfile.com/legal/terms-of-artist-collector).* +*You can review the full terms and conditions of your rights in the [Art Transfer Agreement](https://feralfile.com/legal/art-transfer-agreement) and [Terms for Artists and Collectors](https://feralfile.com/legal/terms-artists-and-collectors).* diff --git a/agreements/ff-tos/en_US.md b/agreements/ff-tos/en_US.md index a71038f..46e7619 100644 --- a/agreements/ff-tos/en_US.md +++ b/agreements/ff-tos/en_US.md @@ -2,7 +2,7 @@ **Last Updated: 20-SEP 2024** -This Agreement is between you and Bitmark Inc. (“we” “us” “our” “Feral File”) and sets forth the terms and conditions that apply to your access and use of the Feral File website and service located at the [https://feralfile.com](https://feralfile.com) domain and subdomains (the "Website"). Please note that this Agreement only applies to this Website and does not apply to the use of Feral File’s blockchain digital property registry and lever system for the offer of artwork for sale or the purchase of artwork. Agreements specific to those activities are listed [here](https://feralfile.com/legal/terms-of-artist-collector). +This Agreement is between you and Bitmark Inc. (“we” “us” “our” “Feral File”) and sets forth the terms and conditions that apply to your access and use of the Feral File website and service located at the [https://feralfile.com](https://feralfile.com) domain and subdomains (the "Website"). Please note that this Agreement only applies to this Website and does not apply to the use of Feral File’s blockchain digital property registry and lever system for the offer of artwork for sale or the purchase of artwork. Agreements specific to those activities are listed [here](https://feralfile.com/legal/terms-artists-and-collectors). ## 1\. Accepting the Terms From f42fe1981abbde93e41eeaaf70ef18ce414198b4 Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Wed, 2 Oct 2024 09:20:20 +0700 Subject: [PATCH 04/13] Create sideload-samsung.md --- artist-docs/sideload-samsung.md | 127 ++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 artist-docs/sideload-samsung.md diff --git a/artist-docs/sideload-samsung.md b/artist-docs/sideload-samsung.md new file mode 100644 index 0000000..4037e26 --- /dev/null +++ b/artist-docs/sideload-samsung.md @@ -0,0 +1,127 @@ +# Install the Feral File app on Your Samsung Tizen TV + +## What You'll Need: + +- **Samsung Tizen TV or The Frame TV** +- **A Computer** (Windows or Mac) +- **Internet Connection** on both your TV and computer + +--- + +## Step-by-Step Guide + +### **1. Download the App File** +- Ask the developer for latest version of the TPK file. + +### **2. Install Tizen Studio on Your Computer** + +- **Download Tizen Studio**, a program that helps install apps on your TV: + - [Download Tizen Studio](https://developer.samsung.com/smarttv/develop/getting-started/setting-up-sdk/installing-tv-sdk.html) +- **Install Tizen Studio** by following these steps: + - Run the downloaded installer file. + - Follow the on-screen instructions. + - **Important:** When prompted, select the **"TV Extension"** to ensure compatibility with your TV. + +### **3. Enable Developer Mode on Your TV** + +- **Turn on your TV** and navigate to the **"Apps"** section. +- **Open the Apps Settings:** + - Press the **number keys** on your remote to enter **"12345"**. + - This should open the **Developer Mode** window. + +### **4. Set Up Developer Mode** + +- **Enable Developer Mode:** + - In the Developer Mode window, switch **"Developer Mode"** to **"ON"**. +- **Enter Your Computer's IP Address:** + - **Find your computer's IP address:** + - **On Windows:** + - Press `Win + R`, type `cmd`, and press Enter to open Command Prompt. + - Type `ipconfig` and press Enter. + - Look for "IPv4 Address" under your active network connection. + - **On Mac:** + - Go to `System Preferences` > `Network`. + - Select your active network connection and look for the IP address. + - **Enter this IP address** into the Developer Mode settings on your TV. +- **Restart Your TV** to apply the changes. + +### **5. Connect Your Computer to the TV Using Tizen Studio** + +- **Open Tizen Studio** on your computer. +- **Launch Device Manager:** + - Click on **"Tools"** in the top menu. + - Select **"Device Manager"** from the dropdown. +- **Add Your TV as a Device:** + - In Device Manager, click the **"+"** button or **"Add Device"**. + - **Enter your TV's IP address** (you can find this in your TV's network settings under `Settings` > `Network` > `Network Status`). + - Give your device a name (e.g., "My Samsung TV") and click **"Add"**. +- **Connect to Your TV:** + - Once added, right-click on your TV in the device list and select **"Connect"**. + - If prompted, accept any connection permissions on your TV. + +### **6. Create a Samsung Certificate** +- **Launch Certificate Manager:** + - Click the Add Certificate (+) button and select Samsung. + - Device Type: select TV, click Next, + - Create a Certificate Profile + - Create an Author Certificate: click Next, then input all mandatory fields, then click Next + - Log in to your Samsung account. (You may need to create a Samsung account if you do not have it yet) + - Select a path to back up your certificate. + - Create a Distributor Certificate: your TV's UUID should be selected + - Click Next, then Finish. +Ensure that the new certificate profile is selected in the Tizen Certificate Manager. + +### **7. Install the App on Your TV** + +- **Install the App via Device Manager:** + - Right-click on your connected TV in Device Manager. + - Select **"Install Application"** or **"Install App"**. + - Browse to the location where you saved the `.tpk` file in Step 1. + - Select the file and click **"Open"**. +- **Wait for Installation to Complete:** + - The installation process will begin. + - Once finished, you should see a success message. + +If it fails to install, you may need to install with command line +- **Install the App via command line:** + - Open Command Prompt (in Mac it is Terminal) + - Type, and enter these one by one: + +`export PATH=$PATH:/Users/.../tizen-studio/tools/ide/bin` + +`export PATH=$PATH:/Users/.../tizen-studio/tools` + +`tizen install -s 192.168.31.199:26101 -n /Users/.../com.bitmark.feralfile.display-1.0.0.tpk` + + Which + `/Users/.../tizen-studio/` is your tizen studio folder path. + + `192.168.31.199:26101` is ip and port of your TV, you can see it in Device Manager. + + `Users/.../com.bitmark.feralfile.display-1.0.0.tpk` is path and file name of app file we gave you. + + +### **8. Launch the App on Your TV** + +- **Go to the Apps Section:** + - On your TV, navigate back to the **"Apps"** menu. +- **Find Your App:** + - Look for the new app you just installed. + - It might be at the end of your apps list or under a section like **"Downloaded Apps"**. +- **Open and Enjoy:** + - Select the app to launch it. + - Enjoy your new app! + +--- + +## **Troubleshooting Tips** + +- **Connection Issues:** + - Ensure both your TV and computer are connected to the same network. + - Double-check IP addresses entered on both devices. +- **Cannot Find the App After Installation:** + - Restart your TV and check the Apps menu again. +- **Installation Failed:** + - Make sure Developer Mode is enabled. + - Check that you're using the correct `.tpk` file. + - Ensure your TV model supports the app. From 5fb089794e420cb2913de4a7d7ae8d446ee1345d Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Thu, 3 Oct 2024 14:58:02 +0700 Subject: [PATCH 05/13] update Feral File artwork library, add sections for display_mode and resize event --- artist-docs/feralfile-artwork-library.md | 303 ++++++++++++++++------- 1 file changed, 209 insertions(+), 94 deletions(-) diff --git a/artist-docs/feralfile-artwork-library.md b/artist-docs/feralfile-artwork-library.md index 323675c..8853c90 100644 --- a/artist-docs/feralfile-artwork-library.md +++ b/artist-docs/feralfile-artwork-library.md @@ -2,93 +2,94 @@ ###### tags: `Feral File` `operation` - ## Feral File Variables -For Feral File generative artworks, it **injects** pre-defined variables then the collector click to view the software artwork in in frame. This helps artists be able to make variants to their artworks. The variables are: -- `blockchain` - (bitmark | ethereum | tezos) -- `contract` - contract address if any. empty for bitmark -- `token_id` - a unique id of a token in the blockchain. It is hex in bitmark and decimal in tezos and ethereum -- `token_id_hash` - the sha256 hash of a token ID. - -### Token ID +For Feral File generative artworks, pre-defined variables are **injected** when the collector clicks to view the software artwork in a frame. This helps artists create variants of their artworks. The variables are: -By the design of token contract, it requires a unique id for each tokens. However, in our exhibition structure, we have multiple series and each series would have its own artwork with a same index starts from 0. This brings duplication of token IDs to a contract if we simply use the index as token ID. To avoid confliction, we create a function to generate deterministic unique token id by combining series id and token indexes. +- `blockchain` - (`ethereum` | `tezos`) +- `contract` - Contract address if any +- `token_id` - A unique ID of a token in the blockchain. It is decimal in Tezos and Ethereum +- `edition_number` - The edition number of the artwork +- `artwork_number` - The artwork number within the series -### Token ID Hash +These variables are passed as URL parameters to the artwork. Here is an example of the parameters passed in the URL to the artwork: -It is the sha256 hash of a token ID. The value of the hash is 32 bytes and represented in hex. Here is an example of the hash ``` -0x0aaa657eb7727d08721d447e53ae2959a5a4c6e4a061cc21724a6f759d025d4b +https://cdn.feralfileassets.com/previews/ccd387c2-4762-4037-8752-bbc223957199/1727153365/index.html?edition_number=1&artwork_number=2&blockchain=ethereum&contract=0x5D303A17883C442603B8afb54921d1b7DCc0C831&token_id=27351590983062365677486503722577408930064250723080863920865112148460960306241&display_mode=crop ``` -which is a 64-length hex string and is prefixed with `0x`. -## Deterministic Randomness +### Token ID -To provide randomness to generative artworks, we create a snippet to offer a random function based on sfc32. The function takes `token_id_hash` (defined above) as the seed of the randomness. This ensures that the randomness is deterministic. If the `token_id_hash` is not given, the snippet will create a random hash so we can test loacally. +By design, token contracts require a unique ID for each token. However, in our exhibition structure, we have multiple series, and each series has its own artwork with an index starting from 0. This can cause duplication of token IDs in a contract if we simply use the index as the token ID. To avoid conflicts, we generate deterministic unique token IDs by combining the series ID and token indexes. The resulting `token_id` is passed as a URL parameter to the artwork and can be used as a random seed. -:::success -We use sfc32 in our random function. sfc stands for "Small Fast Counter". It runs very fast in JS. It is part of [PractRand](http://pracrand.sourceforge.net) random number testing suite. -::: +## Deterministic Randomness + +To provide randomness to generative artworks, we offer a random function based on `sfc32`. The function takes `token_id` (passed as a URL parameter) as the seed of the randomness. This ensures that the randomness is deterministic. If the `token_id` is not given, the snippet will create a random one so you can test locally. ### Code ```javascript - ``` ### Usage -After loading the snippet, call `ffrand` to get a random number. +After loading the snippet, call `ffrand()` to get a random number. ```javascript ``` :::warning -If designing your randomness, ensure it remains deterministic by a given `token_id_hash`; otherwise, the artwork may change with each page reload. +When designing your randomness, ensure it remains deterministic based on the given `token_id`; otherwise, the artwork may change with each page reload. ::: ## Artwork Library @@ -104,7 +105,7 @@ Supported functions: ### Usage -Include the script in the HEAD section and call `ffinit` when the page loads. +Include the script in the `` section and call `ffinit()` when the page loads. ```html @@ -115,16 +116,19 @@ Include the script in the HEAD section and call `ffinit` when the page loads. type="text/javascript"> - + + + ``` You can listen to these events in your script: -- provenance-request-error -- provenance-ready -- blockchain-info-request-error -- blockchain-info-ready + +- `provenance-request-error` +- `provenance-ready` +- `blockchain-info-request-error` +- `blockchain-info-ready` Example: @@ -132,20 +136,20 @@ Example: ``` @@ -183,13 +187,14 @@ To track artwork attributes, a snippet provides the `$feralfile` namespace with ```javascript ``` @@ -209,26 +214,11 @@ Load the snippet and call `$feralfile.features()` to set attributes. @@ -236,6 +226,128 @@ Load the snippet and call `$feralfile.features()` to set attributes. ``` +## Display Mode Adjustment + +To ensure artworks display correctly across different devices and screen sizes, we have introduced a `display_mode` URL query parameter. The Feral File apps (mobile and TV) and the Feral File website will include this parameter when loading the artwork. The parameter can have two values: `crop` or `fit`. + +Example URL: + +``` +https://artwork_cdn_url?display_mode=crop +``` + +### Implementation + +Your artwork should read the `display_mode` parameter from the URL and adjust the visual content accordingly: + +- **`display_mode=crop`**: The artwork should scale and crop its content to fill the entire viewport, possibly cutting off parts of the content if necessary to maintain aspect ratio. + +- **`display_mode=fit`**: The artwork should scale its content to fit entirely within the viewport, ensuring that all content is visible, potentially adding padding or black bars if the aspect ratios do not match. + +### Code Example + +```javascript + +``` + +### Guidelines + +- **Responsive Design**: Ensure that your artwork adapts to different screen sizes and aspect ratios. +- **Initialization**: Adjust the display mode when the artwork initializes, before rendering any frames. +- **Testing**: Test your artwork in both modes (`crop` and `fit`) on various devices (desktop, mobile, TV) to verify that it displays correctly. +- **Aspect Ratios**: Be mindful of how your artwork's aspect ratio interacts with the viewport's aspect ratio in both modes. +- **Scaling and Positioning**: Use appropriate scaling and positioning techniques (e.g., CSS transforms, canvas scaling) to achieve the desired visual effect. + +## Resize Event Handling + +The artwork should handle window resize events properly. Resize events occur when displaying artwork on phones or TVs, especially when changing orientation or when the user adjusts the window size. If the window size changes during artwork display, ensure it triggers a redraw or re-layout with the new canvas size. + +Since artworks are displayed in an iframe, resizing the parent window will trigger the resize event on your artwork. + +### Implementation + +Add an event listener for the `resize` event and adjust your artwork accordingly. + +```javascript + +``` + +### Guidelines + +- **Efficient Redrawing**: Optimize your resize handling to avoid performance issues. For example, use a debounce function if the resize event triggers too frequently. +- **Consistent Experience**: Ensure that resizing does not disrupt the user's experience or the artwork's state unless intended. +- **Testing**: Test your artwork's resize behavior on different devices and browsers to ensure compatibility. +- **Canvas Scaling**: If using canvas, remember to update both the element's width and height attributes as well as the style to ensure proper scaling. + +Reference: [MDN - Window Resize Event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event). + ## Reference ### Source Code @@ -247,6 +359,9 @@ Load the snippet and call `$feralfile.features()` to set attributes. - [V2 staging - ipfs://QmavGeGEmnfuYPNY1YhNaygj1zN8Z3wk1HrEAnXdu5wSmt](https://ipfs.bitmark.com/ipfs/QmavGeGEmnfuYPNY1YhNaygj1zN8Z3wk1HrEAnXdu5wSmt) - [V3 - ipfs://QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho](https://ipfs.bitmark.com/ipfs/QmakVUXKyHF5cddi6owHLbCib7wbU36nY2JoQiNkE7eSho) -### Resize Event Handling +### Additional Notes -The artwork should handle window resize events properly. Resize events occur when displaying artwork on phones or TVs, especially when changing orientation. If the window size changes during artwork display, ensure it triggers a redraw with the new canvas size. Since artworks are displayed in an iframe, resizing the parent window will trigger the resize event on your artwork. Reference: [MDN - Window Resize Event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event). \ No newline at end of file +- **External Dependencies**: When creating your artwork, ensure that all external dependencies are properly included and accessible. +- **Performance**: Be cautious with performance on devices with limited resources, such as mobile phones and TVs. +- **Animation Frame**: Consider using `requestAnimationFrame` for animations to optimize performance. +- **Testing**: Always test your artwork thoroughly in the environments where it will be displayed (desktop browsers, mobile browsers, mobile apps, TV apps). \ No newline at end of file From 2807187633f068e86f9a761f915d49322c134235 Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Thu, 3 Oct 2024 15:15:18 +0700 Subject: [PATCH 06/13] Remove code snippet --- artist-docs/feralfile-artwork-library.md | 48 +----------------------- 1 file changed, 1 insertion(+), 47 deletions(-) diff --git a/artist-docs/feralfile-artwork-library.md b/artist-docs/feralfile-artwork-library.md index 8853c90..4c777ff 100644 --- a/artist-docs/feralfile-artwork-library.md +++ b/artist-docs/feralfile-artwork-library.md @@ -244,52 +244,6 @@ Your artwork should read the `display_mode` parameter from the URL and adjust th - **`display_mode=fit`**: The artwork should scale its content to fit entirely within the viewport, ensuring that all content is visible, potentially adding padding or black bars if the aspect ratios do not match. -### Code Example - -```javascript - -``` - ### Guidelines - **Responsive Design**: Ensure that your artwork adapts to different screen sizes and aspect ratios. @@ -364,4 +318,4 @@ Reference: [MDN - Window Resize Event](https://developer.mozilla.org/en-US/docs/ - **External Dependencies**: When creating your artwork, ensure that all external dependencies are properly included and accessible. - **Performance**: Be cautious with performance on devices with limited resources, such as mobile phones and TVs. - **Animation Frame**: Consider using `requestAnimationFrame` for animations to optimize performance. -- **Testing**: Always test your artwork thoroughly in the environments where it will be displayed (desktop browsers, mobile browsers, mobile apps, TV apps). \ No newline at end of file +- **Testing**: Test your artwork thoroughly in the environments where it will be displayed (desktop browsers, mobile browsers, mobile apps, TV apps). \ No newline at end of file From d1b2e7bd9c86e43acdc6cb8e53f269935600a023 Mon Sep 17 00:00:00 2001 From: Sean Moss-Pultz Date: Sat, 5 Oct 2024 21:51:12 -0700 Subject: [PATCH 07/13] added release notes for the past month. --- app/release_notes/production/changelog.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/app/release_notes/production/changelog.md b/app/release_notes/production/changelog.md index da6d076..83f4666 100644 --- a/app/release_notes/production/changelog.md +++ b/app/release_notes/production/changelog.md @@ -1,3 +1,25 @@ +[#] 0.53.14 - Sep 26, 2024 + +- We changed the Daily to show at 6AM local time. +- We’ve fixed the issue where some users were getting stuck on the loading screen when opening the app. We apologize for any inconvenience this may have caused—thanks for your patience! + +[#] 0.53.10 - Sep 15, 2024 + +- Added Japanese support +- Improved startup performance + + +[#] 0.53.07 - Sep 2, 2024 + +Welcome to Feral File Membership. + +Moving forward, all members have access to a new feature called the Feral File Daily. + +As a curated feature, the Daily lets you display one new artwork every day. It works on any compatible smart TV. + +Over our six-year existence, we’ve compiled an incredible exhibition history which now includes 15,000+ unique artworks. The Daily will draw from this archive, while also spotlighting artworks from recently-launched exhibitions. + + [#] 0.47.0 - Jan 12, 2024 ### Autonomy renamed Feral File to includes all the same features plus news ways to organize, explore, and stream digital art. From e3089617e511d22b9c69fecb1f71f18578d8f7a1 Mon Sep 17 00:00:00 2001 From: longbmk <109057362+longbmk@users.noreply.github.com> Date: Tue, 8 Oct 2024 10:54:24 +0700 Subject: [PATCH 08/13] Update iOS to 0.53.16 and Android to 0.53.14 --- app/versions.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/versions.json b/app/versions.json index 233a163..839ea31 100644 --- a/app/versions.json +++ b/app/versions.json @@ -1,6 +1,6 @@ { "productionIOS": { - "requiredVersion": "0.53.11", + "requiredVersion": "0.53.16", "link": "https://apps.apple.com/us/app/autonomy-app/id1544022728" }, "devIOS": { @@ -8,7 +8,7 @@ "link": "https://install.appcenter.ms/orgs/support-zzd0-28/apps/autonomy-1/distribution_groups/testers" }, "productionAndroid": { - "requiredVersion": "0.53.10", + "requiredVersion": "0.53.14", "link": "https://play.google.com/store/apps/details?id=com.bitmark.autonomy_client" }, "devAndroid": { From 866628bd070b46495e7157c9845b3f2bced04047 Mon Sep 17 00:00:00 2001 From: longbmk <109057362+longbmk@users.noreply.github.com> Date: Mon, 14 Oct 2024 11:42:23 +0700 Subject: [PATCH 09/13] Force update iOS to 0.53.17(4) --- app/versions.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/versions.json b/app/versions.json index 839ea31..5a609c7 100644 --- a/app/versions.json +++ b/app/versions.json @@ -1,6 +1,6 @@ { "productionIOS": { - "requiredVersion": "0.53.16", + "requiredVersion": "0.53.17", "link": "https://apps.apple.com/us/app/autonomy-app/id1544022728" }, "devIOS": { From 6e77db249461b5a33277089cf856453815d6de4c Mon Sep 17 00:00:00 2001 From: phuoc Date: Wed, 16 Oct 2024 10:47:36 +0700 Subject: [PATCH 10/13] app config: certificate for feralfile-membership-purchase.pages.dev Signed-off-by: phuoc --- configs/app.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/configs/app.json b/configs/app.json index 3607914..e2e667f 100644 --- a/configs/app.json +++ b/configs/app.json @@ -113,7 +113,8 @@ "C3 5E 95 D8 97 98 C2 81 A9 34 5F FA B0 EC F2 6F 4B 7D 1B 72", "DF 85 1C EE 81 FA 39 8E 54 E9 8E 9B BB 00 A7 DD D8 7B EC 0C", "49 EE 12 48 B5 B8 06 39 66 BC 8F 4F 1F FC 6D BE DD 06 35 99", - "1E A8 0A 38 31 6B BA 28 D7 52 26 11 AC 32 F6 2A CA B1 B0 2C" + "1E A8 0A 38 31 6B BA 28 D7 52 26 11 AC 32 F6 2A CA B1 B0 2C", + "10 64 22 A5 F9 8F C6 FE 1D E9 DF 22 7D D0 4F E2 8F D7 FD 95" ] }, "john_gerrard": { From bd050bd080a177230bc859c6e43df7adf36f9745 Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Wed, 16 Oct 2024 14:39:19 +0700 Subject: [PATCH 11/13] ci: add github action to deploy the remote config --- .github/workflows/cloudflare-pages-deploy.yml | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 .github/workflows/cloudflare-pages-deploy.yml diff --git a/.github/workflows/cloudflare-pages-deploy.yml b/.github/workflows/cloudflare-pages-deploy.yml new file mode 100644 index 0000000..b0b8d98 --- /dev/null +++ b/.github/workflows/cloudflare-pages-deploy.yml @@ -0,0 +1,38 @@ +name: Deploy Remote Configs + +on: + workflow_dispatch: + inputs: + environment: + description: 'Deployment Environment' + required: true + default: 'Production' + type: choice + options: + - Production + - Development + +jobs: + deploy: + runs-on: ubuntu-latest + name: Deploy + environment: ${{ github.event.inputs.environment }} + steps: + - name: Checkout configs folder + uses: actions/checkout@v4 + with: + sparse-checkout: | + configs + sparse-checkout-cone-mode: false + + - name: Create version.json + run: | + echo "{\"commit\": \"${{ github.sha }}\", \"environment\": \"${{ github.event.inputs.environment }}\"}" > configs/version.json + + - name: Deploy to Cloudflare Pages + uses: cloudflare/wrangler-action@v3 + with: + apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} + accountId: ${{ vars.CLOUDFLARE_ACCOUNT_ID }} + projectName: remote-configs + directory: configs From 065f3533a38ae25fab591c3b0412f6546bce3da4 Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Wed, 16 Oct 2024 14:43:11 +0700 Subject: [PATCH 12/13] ci: update command to deploy pages --- .github/workflows/cloudflare-pages-deploy.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/cloudflare-pages-deploy.yml b/.github/workflows/cloudflare-pages-deploy.yml index b0b8d98..226d989 100644 --- a/.github/workflows/cloudflare-pages-deploy.yml +++ b/.github/workflows/cloudflare-pages-deploy.yml @@ -34,5 +34,4 @@ jobs: with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ vars.CLOUDFLARE_ACCOUNT_ID }} - projectName: remote-configs - directory: configs + command: pages deploy configs --project-name=remote-configs From 3160f97fba7ba222bfcc119a15c6951dcfdfe9b6 Mon Sep 17 00:00:00 2001 From: Anh Nguyen Date: Wed, 16 Oct 2024 14:54:42 +0700 Subject: [PATCH 13/13] ci: make the project name configurable --- .github/workflows/cloudflare-pages-deploy.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cloudflare-pages-deploy.yml b/.github/workflows/cloudflare-pages-deploy.yml index 226d989..b542197 100644 --- a/.github/workflows/cloudflare-pages-deploy.yml +++ b/.github/workflows/cloudflare-pages-deploy.yml @@ -34,4 +34,4 @@ jobs: with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ vars.CLOUDFLARE_ACCOUNT_ID }} - command: pages deploy configs --project-name=remote-configs + command: pages deploy configs --project-name=${{ vars.CLOUDFLARE_PROJECT_NAME }}