7 |
8 |
9 |
40 |
--------------------------------------------------------------------------------
/UI/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | import router from './router/router.js';
4 | import store from './store';
5 |
6 | createApp(App).use(store).use(router).mount('#app');
7 |
--------------------------------------------------------------------------------
/UI/src/router/router.js:
--------------------------------------------------------------------------------
1 | import { createMemoryHistory, createRouter } from 'vue-router';
2 | import Home from '../views/Home.vue';
3 | import Displays from '../views/Displays.vue';
4 |
5 | const routes = [
6 | {
7 | path: '/',
8 | name: 'Home',
9 | component: Home,
10 | },
11 | {
12 | path: '/Displays',
13 | name: 'Displays',
14 | component: Displays,
15 | },
16 | ];
17 |
18 | const router = createRouter({
19 | history: createMemoryHistory(),
20 | routes,
21 | });
22 |
23 | export default router;
24 |
--------------------------------------------------------------------------------
/UI/src/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'vuex';
2 | import counter from './modules/counter';
3 | import displays from './modules/displays';
4 | import crestron from './plugins/crestron';
5 |
6 | export default createStore({
7 | state() {
8 | return {
9 | systemName: '',
10 | };
11 | },
12 | mutations: {
13 | setSystemName(state, systemName) {
14 | state.systemName = systemName;
15 | },
16 | },
17 | modules: {
18 | counter: counter,
19 | displays: displays,
20 | },
21 | plugins: [crestron()],
22 | });
23 |
--------------------------------------------------------------------------------
/UI/src/store/modules/counter.js:
--------------------------------------------------------------------------------
1 | const counter = {
2 | namespaced: true,
3 | state() {
4 | return {
5 | value: 0,
6 | };
7 | },
8 | mutations: {
9 | setCounter(state, value) {
10 | state.value = value;
11 | },
12 | incrementCounter(state) {
13 | // Empty Mutation for Vuex
14 | },
15 | decrementCounter(state) {
16 | // Empty Mutation for Vuex
17 | },
18 | },
19 | actions: {},
20 | getters: {},
21 | };
22 |
23 | export default counter;
24 |
--------------------------------------------------------------------------------
/UI/src/store/modules/displays.js:
--------------------------------------------------------------------------------
1 | const displays = {
2 | namespaced: true,
3 | state() {
4 | return {
5 | displayList: {
6 | display_1: {
7 | id: 'display_1',
8 | name: 'Left Display',
9 | power: false,
10 | },
11 | display_2: {
12 | id: 'display_2',
13 | name: 'Right Display',
14 | power: false,
15 | },
16 | },
17 | };
18 | },
19 | mutations: {
20 | setPowerFeedback(state, { id, power }) {
21 | state.displayList[id].power = power;
22 | },
23 | setPower(state, { id, power }) {
24 | // Empty mutation for Vuex
25 | },
26 | },
27 | actions: {},
28 | getters: {},
29 | };
30 |
31 | export default displays;
32 |
--------------------------------------------------------------------------------
/UI/src/store/plugins/crestron.js:
--------------------------------------------------------------------------------
1 | // External Imports
2 | import * as CrComLib from '@crestron/ch5-crcomlib/build_bundles/amd/cr-com-lib'; // The Crestron Communication Library
3 | import debounce from 'lodash/debounce'; // A function for debouncing a changing variable
4 | import eruda from 'eruda'; // On-screen console for debugging on a panel
5 |
6 | // Project Imports
7 | import processFeedback from './crestron/processFeedback'; // Process Feedback Joins into changes of the store
8 | import processMutation from './crestron/processMutation';
9 |
10 | // This function is run by Vuex when it creates the plugin. The vuex store is passed
11 | // in to the function so that the plugin can access the store.
12 | export default function createCrestronPlugin() {
13 | return (store) => {
14 | // Eruda is an on-screen javascript console for troubleshooting when loaded to the panel.
15 | // This line uses an environment variable to only initialize eruda if you have compiled
16 | // the project in development mode, so that you can compile for production and not leave
17 | // the console on screen.
18 | if (process.env.NODE_ENV === 'development') {
19 | eruda.init();
20 | }
21 |
22 | // Check the CrComLib to make sure the project is on a touchscreen
23 | if (CrComLib.isCrestronTouchscreen()) {
24 | // These make some of the CrComLib functions accessible to the global window namespace
25 | // You can leave them in place and pretty much ignore them.
26 | window.bridgeReceiveIntegerFromNative =
27 | CrComLib.bridgeReceiveIntegerFromNative;
28 | window.bridgeReceiveBooleanFromNative =
29 | CrComLib.bridgeReceiveBooleanFromNative;
30 | window.bridgeReceiveStringFromNative =
31 | CrComLib.bridgeReceiveStringFromNative;
32 | window.bridgeReceiveObjectFromNative =
33 | CrComLib.bridgeReceiveObjectFromNative;
34 |
35 | // A function to debounce change in online state to prevent multiple triggers
36 | // The actual online state bool flickers a bit on transition
37 | let changeOnlineState = debounce(function (state) {
38 | console.log(
39 | `Debounced CrestronPanel ${state ? 'Online' : 'Offline'}`
40 | );
41 | }, 500);
42 |
43 | // Subscribe to the Control system online state feedback
44 | // and send it to the changeOnlineState function which debounces it
45 | // No action is taken based on the online state in this project, this is
46 | // just an example of subscribing to a named join and debouncing the variable
47 | // The console logs are left in place so you can see how it works in eruda.
48 | CrComLib.subscribeState(
49 | 'b',
50 | 'Csig.All_Control_Systems_Online_fb',
51 | (state) => {
52 | console.log(
53 | `Raw CrestronPanel ${state ? 'Online' : 'Offline'}`
54 | );
55 | changeOnlineState(state);
56 | }
57 | );
58 |
59 | // Subscribe to the Vuex mutations. Every mutation that hits the Vuex store
60 | // will pass through the processMutation function, where it will be parsed and
61 | // Turned into join numbers.
62 | store.subscribe((mutation, state) => {
63 | processMutation(store, mutation);
64 | });
65 |
66 | // Subscribe to CrComLib feedback. All joins on the panel will be subscribed to
67 | // and turned into store mutations
68 | processFeedback(store);
69 | }
70 | };
71 | }
72 |
--------------------------------------------------------------------------------
/UI/src/store/plugins/crestron/processFeedback.js:
--------------------------------------------------------------------------------
1 | import * as CrComLib from '@crestron/ch5-crcomlib/build_bundles/amd/cr-com-lib';
2 |
3 | // This object contains a list of feedback joins and callback functions that should
4 | // be executed whenever the value changes
5 | // The callback function should only change values within the Vuex store, and then
6 | // The rest of the program can react to the data in the store changing.
7 | let feedbackJoins = {
8 | digital: [
9 | {
10 | join: 11,
11 | callback: function (store, boolValue) {
12 | // The callback function is called anytime the digital signal changes,
13 | // whether it's going to high or to low. In this particular callback,
14 | // The value is only checked when it is high, to set the power on feedback
15 | // to true.
16 | if (boolValue) {
17 | store.commit('displays/setPowerFeedback', {
18 | id: 'display_1',
19 | power: true,
20 | });
21 | }
22 | },
23 | },
24 | {
25 | join: 12,
26 | callback: function (store, boolValue) {
27 | // This is the power off feedback join, again checking to see if it
28 | // is high before committing the mutation. If you wanted, you could
29 | // use a single join for this, and commit on high and low.
30 | if (boolValue) {
31 | store.commit('displays/setPowerFeedback', {
32 | id: 'display_1',
33 | power: false,
34 | });
35 | }
36 | },
37 | },
38 | {
39 | join: 13,
40 | callback: function (store, boolValue) {
41 | // For display_2, this example does exactly that. A single digital join
42 | // is used for power state, instead of one join for power on and another join
43 | // for power off
44 | if (boolValue) {
45 | store.commit('displays/setPowerFeedback', {
46 | id: 'display_2',
47 | power: true,
48 | });
49 | } else {
50 | store.commit('displays/setPowerFeedback', {
51 | id: 'display_2',
52 | power: false,
53 | });
54 | }
55 | },
56 | },
57 | ],
58 | analog: [
59 | {
60 | join: 1,
61 | callback: function (store, analogValue) {
62 | store.commit('counter/setCounter', analogValue);
63 | },
64 | },
65 | ],
66 | serial: [
67 | {
68 | join: 1,
69 | callback: function (store, serialValue) {
70 | store.commit('setSystemName', serialValue);
71 | },
72 | },
73 | ],
74 | };
75 |
76 | // This function uses the feedbackJoins array created above
77 | // to subscribe to all of the states, and set up the callbacks
78 | // to be invoked.
79 | export default function processFeedback(store) {
80 | feedbackJoins.digital.forEach((digital) => {
81 | CrComLib.subscribeState(
82 | 'b',
83 | digital.join.toString(),
84 | function (boolValue) {
85 | digital.callback(store, boolValue);
86 | }
87 | );
88 | });
89 | feedbackJoins.analog.forEach((analog) => {
90 | CrComLib.subscribeState(
91 | 'n',
92 | analog.join.toString(),
93 | function (analogValue) {
94 | analog.callback(store, analogValue);
95 | }
96 | );
97 | });
98 | feedbackJoins.serial.forEach((serial) => {
99 | CrComLib.subscribeState(
100 | 's',
101 | serial.join.toString(),
102 | function (serialValue) {
103 | serial.callback(store, serialValue);
104 | }
105 | );
106 | });
107 | }
108 |
--------------------------------------------------------------------------------
/UI/src/store/plugins/crestron/processMutation.js:
--------------------------------------------------------------------------------
1 | import * as CrComLib from '@crestron/ch5-crcomlib/build_bundles/amd/cr-com-lib';
2 |
3 | // This function emulates a quick button press, with the button going high
4 | // and the immediately low.
5 | function pulse(join) {
6 | CrComLib.publishEvent('b', join, true); // Press
7 | CrComLib.publishEvent('b', join, false); // Release
8 | }
9 |
10 | export default function processMutation(store, mutation) {
11 | // Logging the mutation done here just to show an example of how eruda can be
12 | // used to debug issues on the panel.
13 | console.log(mutation);
14 |
15 | // Switch/Case on the mutation type lets us handle each mutation individually
16 | // This can easily get out of hand for a system with a lot of mutations or
17 | // commands that need to be sent back to the system. Consider carefully how
18 | // you structure your code to minimize code bloat in this function.
19 | switch (mutation.type) {
20 | case 'counter/incrementCounter': {
21 | // Pulse join 1 to increment the counter
22 | pulse(1);
23 | break;
24 | }
25 | case 'counter/decrementCounter': {
26 | /// Pulse join 2 to decrement the counter
27 | pulse(2);
28 | break;
29 | }
30 | case 'displays/setPower': {
31 | // The mutation payload is a single object that uses destructuring
32 | // to include however many properties you need. The payload for the
33 | // setPower function includes an id and a power boolean.
34 | switch (mutation.payload.id) {
35 | case 'display_1': {
36 | if (mutation.payload.power) {
37 | pulse(11);
38 | } else {
39 | pulse(12);
40 | }
41 | break;
42 | }
43 | case 'display_2': {
44 | if (mutation.payload.power) {
45 | pulse(13);
46 | } else {
47 | pulse(14);
48 | }
49 | break;
50 | }
51 | }
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/UI/src/styles/imports/_colors.scss:
--------------------------------------------------------------------------------
1 | // Sass variables declared here will be available in all
60 |
--------------------------------------------------------------------------------
/UI/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |