Kwik

Navigation :

Last Modified: 2024-04-10

Asset and Component Releation

graph RL


subgraph editor
  tool[video replacement tool]
  tool -.- default([defautprops])
  readAssetFunc[readAsset]
end

subgraph App.bookX
  subgraph assets
    short_ballsCollision.mp3
    video.mp4
    json[(assets.json for editor)]
  end

  subgraph components.pageX
    audio_short_ballsCollision.lua
    subgraph layers
      bg.lua
      imageOne.lua -.- layerProps([props table])
      imageOne_video.lua -.- videoProps([props table])
    end
  end
end

readAssetFunc -. 1 traverse with lfs .-> App.bookX
readAssetFunc -. 2 generate .-> json
YourInput -. 3 selecting layer <br> and video .-> tool
tool -. 4-1 read/write .- json
json -. 4-2 link for publish .- video.mp4
tool -. 5 render when publshing .-> imageOne_video.lua

subgraph photoshop
  kwik([kwik plugin])
end
generativeAI[[Generative AI]]

kwik -. images .-> assets
kwik -. lua files .-> layers

generativeAI -. images audios videos .-> assets

assets.json from the lua table editor.assets

{
  audios = {},
  fonts = {},
  -- images = {}
  particles = {},
  sprites = {},
  videos = {
    {
    name = "videoA.mp4",
    path = "videos",
    links = {{page= "page01", layers = {"imageOne"}},
            {page= "page02", layers = {"iamgeTwo"}}}
    },
  },
}

Four ways to compose layers with assets.

plugin in photoshop > editor > layer replacement
vs code to compose index.lua manually
vs code to compose assets.json
httYac to compose index.lua

plugin in photoshop > editor > layer replacement

Kwik plugin in Photoshop to publish images and lua files
put media files into App.bookX/assets folder
use Kwik Visual Editor
1. select a layer
2. select a layer replacement tool (ex video tool)
3. save the props of video replacement
  the selected layer is linked to the selected media
4. pubish

//TODO screenshots

//TODO readAsset to merge/validate assets.json with /components/pageX/index.lua?

editor logic

assets.json is generated with readAsset()
//TBI it appends a layer’s name to links table when user set an asset to a layer replacement
pageX/index.lua and layers/layer_xxx.lua are updated for the component

vs code to compose index.lua manually

put media files into App.bookX/assets folder

assets.json will be generated automatically by editor

vs code to compose App/booxX/components/pageX/index.lua

add a layer element to components.layers table with a class (ex “video”)

local scene = require('controller.scene').new(sceneName, {
    name = "page1",
    components = {
      layers = {
            {  bg={
                              } },
            {  layerOne={ class={"video"} } },
      },
      audios = {},
      groups = {},
      timers = {},
      variables = {},
      page = { }
    },
    commands = { "eventOne", "eventTwo", "act01" },
    onInit = function(scene) print("onInit") end
})

App/booX/comonents/pageX/layers

add the lua files with the props

layerOne.lua

local layerProps = {
  blendMode = "normal",
  height    =  1280 - 0,
  width     = 1920 - 0 ,
  kind      = pixel,
  name      = "bg",
  type      = "png",
  x         = 1920 + (0 -1920)/2,
  y         = 0 + (1280 - 0)/2,
  alpha     = 100/100,
  }

layerOne_video.lua

local props = {
  actionName    = "{{actionName}}",
  delay         = {{delay}},
  iterations    = {{iterations}},
  name          = "{{name}}",
}
return require("components.kwik.layer_video").new(props)

editor logic

when Solar2D simulator refreshes automatically, and then editor read pageX/index.lua for updating assets.json

readAsset() uses lfs to read media files in App.bookX/assets folder, and generate layer names of links table for assets.json out of pageX/index.lua

vs code to compose assets.json

you can scafold .lua files with the asset command/bat. The asset_lua_generator(.command/.bat) generates lua files into the following directories with assets.json/yml/lua

App/booxX/components/pageX/index.lua
App/booX/comonents/pageX/layers/layerX.lua

App/booX/comonents/pageX/layers/layerX_xxx.lua

assets.lua

{
  audios = {},
  fonts = {},
  -- images = {}
  particles = {},
  sprites = {},
  videos = {
    {
    name = "videoA.mp4",
    path = "videos",
    links = {{page= "page01", layers = {"imageOne"}},
            {page= "page02", layers = {"iamgeTwo"}}}
    },
  },
}

put media files into App.bookX/assets folder
prepare assets.json (yml, lua are supported) to spefify layers with media files
scafold with the asset_lua_generator in the vs code terminal
edit each lua manually for positions and props
you may use common/align.lua for auto layout
or use editor/httpYac to modify the props of layers and components
// TODO Move/Transform tool in editor
// TODO asset_lua_generator

note

if you don’t use kwik plugin in Photoshop, scafolding with assets.json will help you work wtih media files

if layes are not found in page/index.lua, sset_lua_generator will add them to index.lua

you can use asset_lua_generator after publshing images/lua files from Kwik plugin in Photoshop, and then manually associateing layers and media files for replacements

if you run asset_lua_generator for the second time, it will not overwirte existing lua files. It will scafold a new lua file for a new component which is not found in pageX/index.lua

httpYac to compose index.lua

put media files into App.bookX/assets folder

put (create) a layer and layer_xxx lua files with httpYac

## PUT

### creates a new lua file in App directory if not exist. scafolding a lua file

@host=http://localhost:9090

GET /app
###
GET /book
PUT /book
GET /book/page01

### update index.lua too
PUT /book/page01/newLayer
PUT /book/page01/newLayer/?class=video

POST/book/page01/newLayer
Content-Type: application/yaml
{
  alpha=0.5
  x=display.contentCenterX
  y=display.contentCenterY
  width=100
  height=100
}

post(update) a layer with class


GET /book/assets

POST /book/page/newLayer/?class=video

url: video.mp4

POST /book/page/newLayer/?class=video

url:  https://kwiksher.com/tutorials/Video/kwikplant.mp4

//TODO update assets.json

memo

      selectors.tree new, modiy, delete (hide filter for selectbox)
      show (doGet)  > assetsTable
        /book/assets
        /book/assets/audios
        /book/assets/audios/short
        /book/assets/audios/long
        /book/assets/audios/sync
        /book/assets/images
        /book/assets/sprites
        /book/assets/videos


        lua table (asset.json) will be saved into asset folder

        file info(fixed props) // should we reference props table in App/bookX/components/pageX?
                               // yes, they are tangible props of a component in a page
          - audio_props.lua
          ```
            audioProps = {
              language    = nil,
              folder = nil,
              filename = "alphabet.mp3",
              sentenceDir = "alphabet",
            }

            textProps = {
              filename = "alphabet.txt",
            }
          ```

         - spritesheet_props.lua
          ```
          {
              filename = "butflysprite.png",
              sheetInfo = {
                width = 188,
                height = 188,
                sheetWidth = 376,
                sheetHeight = 188,
              }
          }
          ```

         - video_props.lua
         ```
         ```


      doPut
        assets audio, video, spritesheet, synctext
        fetch it from url
          openapi plugin whisper with timecode? ⭐️
        dummy assets from sample and rename to use it

      doPost for an asset to preview?
        this needs a position to tell where to insert it in layers'tree so use

          ```
          POST /book/page/newLayer/?class=video

          file: video.mp4

          ```

          save it to App/book/models/assets.json

          lfs to traverse files in asset folder  except images. This table is also updated from replacement tools
          for instance, user selects a video replacement and choose a videoA.mp4 to layerOne on page1,

            - page1/layerA_video.jspn

            - assets.json
              ```
              {
                audios = {},
                fonts = {},
                -- images = {}
                particles = {},
                sprites = {},
                videos = {
                  {
                    name = "videoA.mp4",
                    path = "videos",
                    links = {{page= "page01", layers = {"imageOne"}},
                            {page= "page02", layers = {"iamgeTwo"}}}
                  },
                },
              }
              ```

          editor > assets
            - select

              videoA.mp4 layers = page1/layerOne,  page2/layerTwo

              option only current page

            - add

                a new layer is added to index.lua with the asset class with deafult props on a current page

            - modify

               edit and save properties

            - delete
              remove layers, option to delete from a disk

    doPost
      for transition2.to, it needs a generic form

      PUT to set a class for a layer
        - add it to index.lua, model.json
        - scafold layer_class.lua with a template

        it entry exists, and no params, get values from controller (controlProps) which has been updated by POST?

      POST to add properties
        GUI

      if it is not one of kwik's classes, first create a new custom class

        PUT components/custom/newClass

        this class.lua does not have a template, props is a lua table that can be encoded into json