HowToUsePreview - cwtickle/danoniplus-docs GitHub Wiki

English | Japanese

| < How to make chart overview | How to use "Dancing☆Onigiri Preview" | How to publish your work data on the Web > |

How to use "Dancing☆Onigiri Preview"

How to create a chart from the preview site

1. Create chart data from the editor

2-1. Paste chart data and settings into text area

  • Paste the text data output from the editor into the text area.
  • If you put chart settings, you can make detailed settings, but at least put the keymode you want to create in the "Keymode(difData)" field.
  • If you specify "difData" as the chart settings, you do not need to fill in the "Keymode(difData)" field.

2-2. Upload a chart file (optional)

  • If you already have a music file (external text), upload it from the chart File field.
  • However, the "musicUrl" setting should be removed from the file.

3. Uploading a music file

  • Upload a music file from the Music File field. Files up to 64 MB can be uploaded.
    Supports mp3, ogg, oga, mp4, m4a, aac, flac, js(base64) files.

4. Select the target version (optional)

  • Selecting the version reflected on your site will launch Dancing☆Onigiri in the preview site. There is no need to press "Send" as it will be loaded when you select the version.

5. If you want to replace the chart (after the second time)

  • Select and paste the chart in the text area to rewrite the text. After this, press "Send" to load the data.
  • Uploaded data will be kept as long as you do not close the screen.
    However, the data is deleted every day at 6:00 (GMT+9), so basically it cannot be used across days.

6. Download as file (optional)

  • You can create and download an html file from the created chart data.
    You can download the html file containing the chart data from "Download As File".
  • The uploaded file will work if you place it on the "tmp" folder as shown below.
  • The files used here such as "danoni_main.js" and "danoni_main.css" are from "cwtickle.github.io". Please note that these files are automatically updated with each new version, so if you are using custom Js, etc., please be careful. Also, the file cannot be used in a non-networkable environment, in which case, please download the complete source separately.
  • In that case, please download the complete source file separately.
<script src="https://cwtickle.github.io/danoniplus/js/danoni_main.js" charset="UTF-8"></script>

Screen image after loading

HTML template specification (embedded chart data format)

  • The HTML template that can be downloaded in 6. above can be replaced.
  • With a few modifications to the HTML files currently in use, HTML can be created from the preview site.

Example

  • If you put <<DOS_DATA>> in the chart description, the part will be replaced with the chart data.
<input type="hidden" name="dos" id="dos" value='

<<DOS_DATA>>

'>

Replacement string

String Content to replace
<<DOS_DATA>> chart data
<<MUSIC_TITLE>> Music Name
<<ARTIST_NAME>> Music provider name

Advanced Settings

  • The following settings are provided to reproduce site-specific settings as much as possible.
  • This will affect the operation of the unit. Note that it may not work in some cases.

1. Upload custom JS/CSS files and common configuration files (optional)

  • If you wish to use your own site-specific settings, you can upload them from the Custom JS file and Custom CSS file fields.
  • Common settings file (danoni_setting.js) can also be uploaded in the custom JS file.

2. image file upload (optional)

  • If you want to try out image files used for background/mask motion, etc., you can upload them from the Image Files section. Uploading multiple files is supported.
    Supports png, jpg, jpeg, gif, svg, webp files.
  • On the chart side (background/mask motion), you do not need to be aware of paths. You can directly specify the file name.
|backtitle_data=
200,0,c.png,,20,20,200,200,0.5,leftToRightFade,120
200,1,iyo.png,,220,220,200,200,1,spinY,120
300,0
320,1,iyo.png,,220,220,200,200,0,leftToRightFade,120
|

3. Preload Values / Preload JS Files

  • If you are doing any processing before danoni_main.js, this setting may help.
  • In "Preload Values", you can define the individual hidden elements used in each page of the site, separated by commas.
  • Specify files to be loaded before danoni_main.js in "Preload JS Files".

Verify operation with a specific version

  • Basically, it is the same as the above method for creating a chart.
  • After pasting the chart data, select the version you want to verify, and it will run with the target version.
    You can check the release details from the "Release" link next to the selected version. (Japanese only).
  • For older versions, the width may not automatically expand. If this is the case, try changing the "Width" item.

Preview Site Constraints

  • If you paste the chart directly, backquotes (`) are automatically replaced by *bkquo*.
  • Data saving by work is disabled only for custom key type's settings by work.
  • If you are using ver19.3.0 or earlier, you will not be able to upload custom CSS or chart files due to lack of functionality.
  • Since versions of ver0 often do not work in the usual way, we have inserted the initial settings in advance on the preview site.

Changelog in Preview site

Update Date Update Details
2024-03-24 ⭐ Supports automatic escaping of back quotes and single quotes.
Custom key type's definitions listed on this page embedded in preview site. (v31.3.1 or later only)
2024-03-23 ⭐ Support for creating Kirizma, Punching◇Panels (v31.3.1 or later only)
⭐ Added Preload Values / Preload JS Files setting (v19.4.1 or later only)
2024-03-20 🛠️ Responsive support, PHP8 support, partially revised layout
2024-03-13 ⭐ Support for saving settings except custom key type's definitions for local storage data by work.
2024-03-12 ⭐ Added support for uploading groups of image files (v19.4.1 or later only)
🛠️ Added Cancel button to address problem with canceling uploaded files in Firefox.
🛠️ Added Reset button for uploaded files.
🐞 Fixed an issue with wrong path for the second and later file names when downloading files.
2024-03-09 ⭐ Support for uploading HTML template files (latest version only).
🛠️ Extended allowed sound file extensions to mp3, ogg, oga, mp4, m4a, aac, flac, js(base64).
🛠️ Extended music file limit from 16MB to 64MB.
🛠️ Improved to retain width setting internally in v27.1.0 and later versions.
2024-03-08 ⭐ Support for reading "Fauna One", "Merriweather", "Montserrat", "Noto Sans JP", and "Raleway" from Google Fonts.
⭐ Changed to be able to save local storage by keymode.
🛠️ Changed to erase local storage data by work on each screen reload.
🛠️ Changed process so that the latest version is automatically launched from the first access.
🛠️ Improved processing to allow editing of text in the chart input area.
2024-03-06 ⭐ Support for uploading sound files and custom JS files and specifying initial options (v19.3.0 or earlier).
🐞 Fixed an issue that prevents uploading if the sound file name contains "&".
2024-03-02 🛠️ Changed to allow adding a version for testing (x.y.z-a1 format).
2024-02-27 🛠️ Added the ability to select and activate experimental functions (only since v19.4.1, add script column to be added).
2024-01-31 ⭐ Added file download function (latest version only).
2024-01-18 ⭐ Changed uploadable music files to include custom JS files converted to base64 (v19.4.1 or later only).
⭐ Support for uploading external chart file (v19.4.1 or later only).
2023-11-18 ⭐ Support for uploading custom JS/CSS files (v19.4.1 or later only).
2023-11-15 ⭐ Support for uploading the music file (v19.4.1 or later only).
2023-10-21 🛠️ Changed to automatically reload with each version change.
🛠️ Changed settings to block automatic saving to local storage.
2023-10-17 - First release

| < How to make chart overview | How to use "Dancing☆Onigiri Preview" | How to publish your work data on the Web > |

⚠️ **GitHub.com Fallback** ⚠️