1. IP addresses are NOT logged in this forum so there's no point asking. Members are encouraged to install GOM or HOLA or TUNNELBEAR for an added layer of protection.

    The SEX forum is HERE so please stop asking.

A comprehensive Catalog example with Button view, Tree view and Search

Discussion in 'ChioCS Media and Graphic' started by ChioCS, Jun 20, 2015.

  1. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    [​IMG]

    In this example we are showing you the configuration using a village as the prime component. You can apply the concept to a wide range of application, some of them are

    Hotels
    Buildings
    Supermarket
    Shops
    Businesses etc... or even your personal inventory.

    Catalogs are independent sets of files that can be viewed anywhere from a PC to mobile devices. If you do have a big Touch Screen Panel to attract your audience in public areas, you can set it up by following the Noticeboard village example. For creating the Catalogs, it uses the same Noticeboard files, so there are minimum re-configuration involved.

    You can view this sample http://www.chiocs.net/catalog/village.ntc from Catalog Explorer.
     
  2. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    [size=+1]Creating the Project[/size]

    In this project we are setting it up for 3 different views and therefore we adopts a more comprehensive approach by setting up a proper header information for each Catalog file as well as the corresponding 'ntb'. We will also show you how you can set up multiple languages for searching.

    [size=+1]Basis[/size]

    In this village there are five major components (Home, Road, Crop, Public, Journey), each contains it's own sub-components. Which you can create many layers down, but in this example we show you a layer.

    So, there are various task to do

    1. Categorising your catalogs for searching
    2. Planning where to upload the completed catalogs ( your websites )
    3. Creating the individual catalog for all the 5 components
    4. Publish
    5. Setting up the button view
    6. Setting up the tree view
    7. Setting up the search
     
    Last edited: Jun 21, 2015
  3. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    [size=+1]Creating the Project Information[/size]

    Catalog Explorer uses this information for various purposes. First and foremost, to save as favorite it gets the icon and name from the project information stored inside the catalog file. Secondly to facilitate searching, you has to include it's location and categories.

    Creating the icon

    You can create your icon by using other graphic tools, otherwise you can use Noticeboard to create a simple icon. So, launch Noticeboard.

    Add a window, draw a rectangle path and click the Pointer, select the round rectangle from the property panel or any other shapes. To learn more about creating vector shape click here. Adjust the width and height, 250 pixels in width or height is sufficient. Convert to shape and apply the necessary gradients or colors of your choice. Save the shape to an image file from the File menu. Click new from the File menu, add a window, drag and drop the shape back into the window and drop your picture, combine it to form the icon. Save it to an image file (icon).

    To learn more about creating the Project Information click here

    Name

    In the search panel, it shows both the name and description, you should get ready an unique name for each catalog.

    Location ( only Ascii character, non Ascii are not supported at the moment )

    The location information is hierarchical. Just like a country, you have the name of the country at the top followed by states/province, city, district, road, street, unit etc... from major to minor. Catalog Explorer uses these to build the corresponding structure for searching.

    Village
    English Chinese
    Home Road Crop Public Journey
    ( the individual addresses )

    In order to create for multiple languages, you need a set of catalogs for each language.

    Categories

    Like location it is implemented to walk through each category from top to bottom. Therefore the major categories start from the top followed by the minor sub-categories.

    Top -> Second --> Third

    Home -> Utility Food Room Yard ( Houses --> Types )
    Travel -> Beijing Totown
    Food -> Shop
    Festivals -> Mooncake
    Amenities -> health Road Market Recreation School
    Surrounding -> River Bridge Lane
    Crop -> Harvest Planting Other

    These categories may not mirror the major components, in fact you should diversified them for searching, like duplicating some of them to appears under different categories.
     
    Last edited: Jun 21, 2015
  4. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Planning where to upload the completed catalogs

    In our website we create these folders. All images into the images folder, all completed catalogs under the 5 major components are publish into their corresponding language folders. All others into others folder.

    [​IMG]
     
  5. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Creating the individual catalog for all the 5 components

    Let's start by creating the noticeboard file (ntb).

    Launch Noticeboard, add a window, the panel width for this village project is between 1024 to 1200 pixels, the height varies according to its requirements and the number of panels each has. After your populate the window with your content, open up the project information and fill in the necessary information. Save to a ntb file.

    To learn how to create a window click here

    To create the catalog file (ntc), launch Noticeboard and click the shell icon, which will show you a screen with an empty Catalog Shell. Drop your ntb file into the shell and save to a ntc file.

    Example biscuitShop.ntc

    [​IMG] [​IMG]
     
    Last edited: Jun 21, 2015
  6. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Publishing

    After you have created all the individual catalogs. You can start to publish to your website. If you have a ftp account, it will copy the published files into your website folder. In any case, it saved a copy on your ProgramData/Chio CS/Catalog/Publish folder.

    In this village example, we wanted the searches in 2 different languages, but the content of the individual catalog remains the save. Therefore we only need to edit the project information and changes it from English to Chinese. We do it by duplicating the publish ntc file and then edit it in the catalog screen. And copy these versions to their respective web folders.

    [​IMG]

    Read more about publishing click here.
     
  7. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Setting up the button view

    [​IMG]

    This button view is access from the village.ntc, so unless you like to allows the user to save as favorite, it is not necessary to create the project information. Opens up Noticeboard, add a window and change the type to 'button', from the property panel choose 'tile' and set the columns to 3, set the size of your button. For button, you do not need to bother about the window width or height, Catalog Explorer will fill up the whole width or height of your mobile devices. Drop all your icons that you have created. Name them accordingly, if you have not as this name will be used as the caption for the button. Save to ntb. Switch to the Catalog screen and drop this ntb file into the empty shell.

    Opens up the property panel in the Catalog screen. Click a button, and drop the corresponding ntc file into the expanded button to link it. On the property panel, enter the web folder where this ntc file will be located. Click the back button and repeat for all the remaining buttons. Save.
     
  8. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Setting up Tree View

    [​IMG]

    The 5 components are configured differently to demonstrate to you the layout features of Catalog.
     
  9. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Home

    [​IMG] [​IMG] [​IMG]

    [​IMG] [​IMG]

    To create the catalog for Home, as shown in the first 2 diagrams. First, we created 2 windows filled with text and graphic of identical width. The last diagram shows you the property of the sliding images. For that we add a set, set the desired dimension and change to layout order to stack ( as shown on the top left hand corner of the property panel).

    [​IMG]

    Next, we create a separate ntb for the home scroll. It has a window type 'Scroll' and an orientation 'Horizontal', since it is horizontal, we can set the desired height. This height will be used in both portrait and landscape ( as width ), it will be compared to the window items and uses whichever is greater. If you have applied a scale it uses the scaled dimension.
     
  10. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    [​IMG]

    Earlier on, we would have created all the necessary ntbs for all 5 components. So, now the task is to create the home catalog and drop them into their respective places.

    Launch Noticeboard, change to the catalog screen. Drop hometop/bottom.ntb into the empty shell and then homescroll.ntb and the those ntbs as shown in the home catalog picture.

    For the scroll items, as in the button example abive, link each icon to it's respective ntc file.
     
    Last edited: Jun 23, 2015
  11. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    After your saved the catalog.

    [​IMG]

    It looks good in portrait but not landscape.

    [​IMG] [​IMG]

    Open up the catalog, and edit it in the Noticeboard screen, add 3 empty windows as shown.

    [​IMG]

    In Catalog, an empty window can act as a command panel, our intention is to stack those panels below it, therefore set the property of the first and second filler as follows. And the last, set the command to break.

    [​IMG]

    A scroll panel or a button panel will automatically break the stack command. So now it looks good in landscape.

    [​IMG]

    We are done.
     
  12. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Crop

    [​IMG]


    [​IMG] [​IMG]

    For Crop, we have a slider as well as a perch scroll for the top panel.

    [​IMG]

    Similarly to slider, a perch scroll is implemented using a set. Instead of a stack, change it to Vertical.

    [​IMG]

    There are 4 movies and we have created 4 icons, click on each icon and drop your movie file into it. Enter it's web address.

    That's it.
     
    Last edited: Jun 23, 2015
  13. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Road

    [​IMG]

    We did not create any additional icons for this catalog. It consist of 2 panels, and the top panel has 5 boxes each link to a sub components within road.
     
  14. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Public

    [​IMG] [​IMG] [​IMG]

    There are 5 sub catalogs. We play each one of them, takes a screen shot, scaled it and use those images to create the catalog. In the empty catalog screen, just drop these images one by one into the shell and link these images to it's respective ntc files.
     
  15. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Journey

    [​IMG] [​IMG]

    A sample with a window and 3 scrolls. The icons are link to other catalogs. While the scrolls are just scrollable pictures for easy viewing.
     
  16. ChioCS

    ChioCS Advertiser Old Timer

    Joined:
    Oct 13, 2010
    Messages:
    303
    Likes Received:
    20
    Trophy Points:
    0
    Setting up for Searching

    The www.chiocs.net/catalog/village.ntc is the start off point to begin searching. That is, in the project information, location is check and a web address is provided. When Catalog Explorer encounter a 'location' being set in the project information, the search icon will be displayed, allowing the user to begin searching.

    [​IMG]

    In this web address, you should only upload those participating ntc files and images into it. When the search icon is activated, Catalog Explorer will look into this web address folder and scoop up the images and ntc files in this folder. The images will be used as 'category icon' if it matches the name of the category defined in the project information of any participating catalog file.

    Since our next level is setup for languages, we have 2 files uploaded into this folder ( villageE.ntc & villageC.ntc ).

    [​IMG]

    The above is villageE.ntc, a basic catalog with just a line of text. It serve as a command to tell Catalog Explorer where to locate the next batches of ntc files, as defined in the project information. In this folder, we placed the 5 ntc files that belong to the 5 major components.

    [​IMG]

    In these web addresses, we have the catalogs for each set of component upload to their respective folder.
     
  17. tank007

    tank007 Alfrescian Old Timer

    Joined:
    Sep 5, 2015
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    great, thanks for your pictures.
     

Share This Page