comments 2

CH5: Back to Basics

Now that we’ve built the sample project and loaded it to a touchpanel successfully, let’s break it! I’m going to be referencing Using the Crestron Template Project to dive deeper into the code.

Folder Structure

I think it will be handy to call out what each folder in the template project is meant to hold.

app – This is where the code for the project goes. There’s a project-config.json file that we’ll look at in a bit. The framework files live within the template folder, and our specific project files go in the project folder. This is where we’ll put most of our HTML, JavaScript, and CSS.

config – It looks like there’s a Contract Editor file in here. We probably won’t mess with this until much later.

dist – This is the output directory. When we build and deploy our touchpanel file, it’s saved here.

node_modules – Here are the 30,000 or so library files. This folder is huge.

shell-utilities – I think these are scripts used by the NPM Scripts to do things like generate new pages, export the project, etc. We probably won’t dig into this too much and only stick to the NPM Scripts listed in the package.json file.

Start the Development Server

Open the app\project-config.json file, and lets make some changes. In addition to the highlighted changes, we’re going to slim down themes to just light-theme, and pages to just page1.

{
  "projectName": "Basic CH5",
  "version": "0.0.2",
  "faviconPath": "favicon.ico",
  "menuOrientation": "horizontal",
  "selectedTheme": "light-theme",
  "useWebXPanel": false,
  "themes": [
    {
      "name": "light-theme",
      "path": "./assets/theme/light.css",
      "brandLogo": {
        "url": "./app/project/assets/img/contoso.png",
        "alt": "Crestron Logo",
        "receiveStateUrl": ""
      },
      "backgroundProperties": {
        "url": [
          "./app/template/assets/img/ch5-stone-light-bg.jpg"
        ]
      }
    }
  ],
  "config": {
    "controlSystem": {
    }
  },
  "header": {
    "display": true,
    "displayInfo": true,
    "$component": ""
  },
  "footer": {
    "display": true,
    "$component": ""
  },
  "content": {
    "$defaultView": "page1",
    "triggerViewProperties": {
      "gestureable": false
    },
    "pages": [
      {
        "pageName": "page1",
        "fullPath": "./app/project/components/pages/page1/",
        "fileName": "page1.html",
        "standAloneView": false,
        "pageProperties": {
          "class": ""
        },
        "navigation": {
          "sequence": 1,
          "label": "menu.page1",
          "isI18nLabel": true,
          "iconClass": "",
          "iconUrl": "./app/project/assets/img/Home_Dark.png",
          "iconPosition": "bottom"
        }
      }
    ],
    "widgets": [
      {
        "widgetName": "pagedisplay",
        "fullPath": "./app/project/components/widgets/pagedisplay/",
        "fileName": "pagedisplay.html",
        "widgetProperties": {}
      }
    ]
  }
}

Run the start NPM Script to get the development server going. Now when we make changes to our project, it should automatically refresh the browser. I did notice that making changes to app\project-config.json would cause the server to reload, but I didn’t see any of the changes happen. I had to restart the start script to get it to update.

Let’s also modify app\project\assets\data\translation\en.json (phew!):

{
  "app": {
    "title": "Basic CH5"
  },
  "page": {
    "title": "Page"
  },
  "menu": {
    "page1": "Home"
  },
  "lang": "English"
}

If we check our browser window, we’ve got a slightly different look from the default (hopefully enough to avoid copyright infringement):

Wireframe Mock-up

Here’s the idea I have for our page, 3 buttons–that when pressed–give you some positive feedback:

So we’ll need 3 buttons and a text field. Here’s where the Showcase Application can be handy to reference which controls are available and what they look like. Let’s update app\project\components\pages\page1\page1.html:

<section id="page1-page" class="details-container" aria-labelledby="Page 1">
    <div class="greeting">
        <div></div>
        <div>
            <ch5-button type="default" label="1" id="btn1"
                shape="rectangle" size="large"
                sendEventOnClick="1" receiveStateSelected="1"></ch5-button>
            <ch5-button type="default" label="2" id="btn2"
                shape="rectangle" size="large"
                sendEventOnClick="2" receiveStateSelected="2"></ch5-button>
            <ch5-button type="default" label="3" id="btn3"
                shape="rectangle" size="large"
                sendEventOnClick="3" receiveStateSelected="3"></ch5-button>
        </div>
        <div>
            <p data-ch5-textcontent="1">Your Message Here</p>
        </div>
        <div></div>
    </div>
</section>

And we’ll update app\project\components\pages\page1\page1.scss to style the page a little differently:

#page1-page {
    .greeting {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 2em;
        justify-items: center;
    }
}

Your browser should have refreshed automatically and looks like this:

You can stop the test server now (hit Ctrl-C in the Terminal window in VS Code). Run the build:onestep script and load this project to the touchpanel. Now, we just need to connect the logic to a control system.

SIMPL Windows

Fire up SIMPL Windows and we’ll create a very basic program like this:

Now when you press the 3 buttons on the touchpanel, you can watch the presses and feedback happen in debugger:

Unfortunately, the buttons on the touchpanel end up being much smaller than I’d like:

Next Time

For the next part, I think we’ll look at developing a full touchpanel layout with different pages, visibility states, and better styling (that fits a TS-770 appropriately). And I also want to mess with the emulator so we can test the layout directly in the web browser first.

Thanks for reading!

2 Comments

    • Interesting, I didn’t know you had to use a contract with the list control. Is that because of the template index var?

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s