diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c3606a..3c06140 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## v1.1.0 (2024-07-02) +- Updated documentation + ## v1.0.0 (2023-11-23) - Initial release - New documentation diff --git a/README.md b/README.md index 699f328..9076ee2 100644 --- a/README.md +++ b/README.md @@ -113,14 +113,12 @@ To reset the saved skin, you can use the `Reset settings` button in the control > [!NOTE] > To debug Javascript and network errors, use the browser's developer tools console (F12). -### ⚪ Emulate hardware connection -To emulate a hardware connection, you can use the `Server connection` toggle in the control panel.
+### ⚪ Emulate Server connection +To emulate a hardware connection, you can use the `Toggle Server connection` button in the control panel.
This will toggle the `connected` class on the `container` element, which you can use to style and animate your skin accordingly.
Use this flag to set your skin in a "connected" state, meaning the UI successfully connects to the hardware. -### ⚪ Emulate Real-time data -You can use the `Real-time data` toggle in the control panel to emulate hardware data.
-This will trigger a simulated data stream that you can use to test your skin's UI.
+This will also trigger a simulated data stream that you can use to test your skin's UI.
Make sure to test your skin thoroughly with different combinations of settings, since they can change the behaviour of the UI. ### ⚪ Emulate animations @@ -526,6 +524,21 @@ const bindRealtimeData = () => { ```
+### `checkSource(): void` +Shortcut method to check if the CAN source is still available and update the most common channels based on the user's settings - RPM, VSS and CLT. + +This method is a wrapper around `useCanChannel` and should be called inside your `bindRealtimeData` method. It will update the `useCANForRPM`, `useCANForVSS` and `useCANForCLT` variables, which you can use to get the data from the correct data set. + +```js +const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + updateVSS(useCANForVSS ? canData.vss : safeReturn(basicData, 'kmh')) + updateCLT(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) +} +``` +
+ ### ⚡ Available data sets ### ⚪ **Basic** data set diff --git a/assets/client.js b/assets/client.js index 6cf0975..c932e98 100644 --- a/assets/client.js +++ b/assets/client.js @@ -1 +1 @@ -const resetData={canData:{rpm:0,vss:0,tps:0,map:0,clt:0,mat:0,oilPress:0,oilTemp:0,fuelPress:0,gear:"N",lambda:0,afr:0,batt:0,boost:0,odoNow:0,mapbar:0},basicData:{rpm:0,kmh:0,kmhF:0,clt:0,lvlFuel:0,lvlFuelF:0,turnLeft:1,turnRight:1,parkLights:1,fogLights:1,auxLights:1,highBeam:1,eBrake:1,battAlt:1,ECUErr:1,oilSwitch:1,rearDefrost:1,fan:1,openDoor:1,airbag:1,odoNow:0}};let canData=resetData.canData,basicData=resetData.basicData,isECUOnline=!1,isBasicOnline=!1,odoDebounce=!1,DASH_OPTIONS={...defaultOptions,...JSON.parse(localStorage.getItem(CONFIG.CONFIG_STORAGE_KEY))||{}},lastTime=0,tick=0,enableSimulator=!1;const COLORS=DASH_OPTIONS.theme.colors,elemCache={},root=document.documentElement,mainContainer=document.getElementById("container"),saveSettings=a=>{DASH_OPTIONS=JSON.parse(localStorage.getItem(CONFIG.CONFIG_STORAGE_KEY))||{},DASH_OPTIONS={...defaultOptions,...DASH_OPTIONS,...a},localStorage.setItem(CONFIG.CONFIG_STORAGE_KEY,JSON.stringify(DASH_OPTIONS))},disconnect=()=>{enableSimulator=!1,setTimeout((()=>{isECUOnline=!1,isBasicOnline=!1}),100),mainContainer.classList.remove("connected")},openConnection=a=>{enableSimulator=!0,isECUOnline=!0,isBasicOnline=!0,mainContainer.classList.add("connected"),requestAnimationFrame(a)},checkCache=(a,t)=>{const e="string"==typeof a?a:a.getAttribute("id");return elemCache[e]===t||(elemCache[e]=t,!1)},etoggle=(a,t)=>{a&&!checkCache(a,t)&&a.setAttribute("data-etoggle",1-t)},setText=(a,t)=>{a&&!checkCache(a,t)&&(a.textContent=t)},setRootCSS=(a,t)=>{a&&!checkCache(a,t)&&root.style.setProperty(a,t)},setGaugeValue=(a,t,e=null)=>{a&&a.value&&!checkCache(`${a.id}-now`,t)&&(e&&root.style.setProperty(`--${a.id}-bar`,e),a.value.textContent=t)},setIconOpacity=(a,t)=>setRootCSS(`--${a}-icon`,1-t),zeroFixed=a=>Math.round(a||0),oneFixed=a=>Math.round(10*(a||0))/10,twoFixed=a=>Math.round(100*(a||0))/100,mapFormat=a=>+a<1?`-${(""+a).substring(1,4)}`:(+a-1).toFixed(2),boostFormat=a=>+a<1?0:twoFixed(+a-1),safeReturn=(a,t,e=0)=>a[t]||e,mapBarFormat=a=>a<0?a/2:a/(2*DASH_OPTIONS.pBoost),setGaugeBar=(a,t,e=!1,o)=>{a&&!checkCache(`${a}-gauge-bar`,t)&&root.style.setProperty(`--${a}-gauge-bar`,e?+t/(o||DASH_OPTIONS[a])*100+"%":+t/(o||DASH_OPTIONS[a]))},setCLTBar=(a,t)=>setGaugeBar("clt",a,t),setMATBar=(a,t)=>setGaugeBar("mat",a,t),setOilPressBar=(a,t)=>setGaugeBar("pOil",a,t),setFuelPressBar=(a,t)=>setGaugeBar("pFuel",a,t),setBoostBar=(a,t)=>setGaugeBar("pBoost",a,t),setOilTempBar=(a,t)=>setGaugeBar("tOil",a,t),setFuelLevelBar=(a,t)=>setGaugeBar("lFuel",a,t,100),setBatteryBar=(a,t)=>setGaugeBar("batt",a,t),setSpeedBar=(a,t)=>setGaugeBar("spdM",a,t),setRPMBar=(a,t)=>setGaugeBar("rpmM",a,t,1e3*DASH_OPTIONS.rpmM),setTPSBar=(a,t)=>setGaugeBar("tps",a,t,100),setAFRBar=(a,t)=>setGaugeBar("afr",a,t,20),setLambdaBar=(a,t)=>setGaugeBar("lambda",a,t,2),fuelLevelFormat=(a,t)=>{const e=safeReturn(a,t);return zeroFixed(e>100?100:e<0?0:e)},loadOdo=(a,t,e,o=!1)=>{const s=DASH_OPTIONS.kmTrip+e,r=DASH_OPTIONS.kmTotal+e;setText(t,zeroFixed(s)),setText(a,zeroFixed(+DASH_OPTIONS.tKm+r)),o&&saveSettings({kmTrip:s,kmTotal:r})},updateOdo=(a,t,e)=>{0===DASH_OPTIONS.kmTrip&&setText(t,0),0===e||odoDebounce||isNaN(e)||(odoDebounce=!0,loadOdo(a,t,e,!0),setTimeout((()=>{odoDebounce=!1}),1e3))},resetOdo=()=>saveSettings({kmTrip:0}),useCanChannel=(a=null)=>isECUOnline&&DASH_OPTIONS.sCan<2&&(!a||DASH_OPTIONS[a]>1),randomStatus=a=>Math.floor(20*Math.random())>18?!a:a,simulateGear=a=>a>2?a-2:["P","N","R"][a],simulator=a=>{if(a-lastTime>33&&enableSimulator){tick=tick>999?0:tick+1;const e=tick>499?(1e3-tick)/500:tick/500;canData={rpm:e*+DASH_OPTIONS.rpmM*1e3,vss:e*+DASH_OPTIONS.spdM,tps:(100*e).toFixed(1),map:(e*(+DASH_OPTIONS.pBoost+1)).toFixed(2),clt:(e*+DASH_OPTIONS.clt).toFixed(0),mat:(e*+DASH_OPTIONS.mat).toFixed(0),oilPress:(e*+DASH_OPTIONS.pOil).toFixed(1),oilTemp:(e*+DASH_OPTIONS.tOil).toFixed(0),fuelPress:(e*+DASH_OPTIONS.pFuel).toFixed(1),gear:(t=zeroFixed(10*e),t>2?t-2:["P","N","R"][t]),boost:e*+DASH_OPTIONS.pBoost,batt:(e*+DASH_OPTIONS.batt).toFixed(1),lambda:(2*e).toFixed(2),afr:(8+12*e).toFixed(2),odoNow:tick%250==0?1:0},basicData={rpm:canData.rpm,kmh:canData.vss,kmhF:canData.vss,clt:canData.clt,lvlFuel:100*e,lvlFuelF:100*e,odoNow:canData.odoNow,turnLeft:randomStatus(basicData.turnLeft),turnRight:randomStatus(basicData.turnRight),parkLights:randomStatus(basicData.parkLights),fogLights:randomStatus(basicData.fogLights),auxLights:randomStatus(basicData.auxLights),highBeam:randomStatus(basicData.highBeam),eBrake:randomStatus(basicData.eBrake),battAlt:randomStatus(basicData.battAlt),ECUErr:randomStatus(basicData.ECUErr),oilSwitch:randomStatus(basicData.oilSwitch),rearDefrost:randomStatus(basicData.rearDefrost),fan:randomStatus(basicData.fan),openDoor:randomStatus(basicData.openDoor),airbag:randomStatus(basicData.airbag)},lastTime=a}var t;enableSimulator||(canData=resetData.canData,basicData=resetData.basicData,tick=0),requestAnimationFrame(simulator)};requestAnimationFrame(simulator);const toggleSimulator=()=>{if(enableSimulator)return enableSimulator=!1,void disconnect();enableSimulator=!0,openConnection((()=>null))};window.addEventListener("load",(()=>{window.addEventListener("message",(a=>{switch(a.data.action){case"odoreset":saveSettings({kmTrip:0});break;case"toggleSimulator":toggleSimulator();break;case"animIn":setTimeout((()=>openConnection((()=>null))),6500),mainContainer.classList.replace("anim-out","anim-in");break;case"animOut":disconnect(),mainContainer.classList.replace("anim-in","anim-out");break;default:break}}),!1)})); +const resetData={canData:{rpm:0,vss:0,tps:0,map:0,clt:0,mat:0,oilPress:0,oilTemp:0,fuelPress:0,gear:"N",lambda:0,afr:0,batt:0,boost:0,odoNow:0,mapbar:0,afrbar:0,oilPressBar:0,fuelPressBar:0},basicData:{rpm:0,kmh:0,kmhF:0,clt:0,lvlFuel:0,lvlFuelF:0,turnLeft:1,turnRight:1,parkLights:1,fogLights:1,auxLights:1,highBeam:1,eBrake:1,battAlt:1,ECUErr:1,oilSwitch:1,rearDefrost:1,fan:1,openDoor:1,airbag:1,odoNow:0}};let canData=resetData.canData,basicData=resetData.basicData,isECUOnline=!1,isBasicOnline=!1,odoDebounce=!1,DASH_OPTIONS={...defaultOptions,...JSON.parse(localStorage.getItem(CONFIG.CONFIG_STORAGE_KEY))||{}},lastTime=0,tick=0,enableSimulator=!1,useCAN=!1,useCANForRPM=!1,useCANForVSS=!1,useCANForCLT=!1;const COLORS=DASH_OPTIONS.theme.colors,elemCache={},root=document.documentElement,mainContainer=document.getElementById("container"),iconStyle=+DASH_OPTIONS.icon,saveSettings=a=>{DASH_OPTIONS=JSON.parse(localStorage.getItem(CONFIG.CONFIG_STORAGE_KEY))||{},DASH_OPTIONS={...defaultOptions,...DASH_OPTIONS,...a},localStorage.setItem(CONFIG.CONFIG_STORAGE_KEY,JSON.stringify(DASH_OPTIONS))},disconnect=()=>{enableSimulator=!1,setTimeout((()=>{isECUOnline=!1,isBasicOnline=!1}),100),mainContainer.classList.remove("connected")},openConnection=a=>{enableSimulator=!0,isECUOnline=!0,isBasicOnline=!0,mainContainer.classList.add("connected"),requestAnimationFrame(a)},checkCache=(a,e)=>{const t="string"==typeof a?a:a.getAttribute("id");return elemCache[t]===e||(elemCache[t]=e,!1)},etoggle=(a,e)=>{a&&!checkCache(a,e)&&a.setAttribute("data-etoggle",1-e)},setText=(a,e)=>{a&&!checkCache(a,e)&&(a.textContent=e)},setRootCSS=(a,e)=>{a&&!checkCache(a,e)&&root.style.setProperty(a,e)},setGaugeValue=(a,e,t=null)=>{a&&a.value&&!checkCache(`${a.id}-now`,e)&&(t&&root.style.setProperty(`--${a.id}-bar`,t),a.value.textContent=e)},setSVGGaugeValue=(a,e,t)=>{a&&e&&!checkCache(e,t)&&a.setValue(t)},setIconOpacity=(a,e)=>setRootCSS(`--${a}-icon`,1-e),zeroFixed=a=>Math.round(a||0),oneFixed=a=>Math.round(10*(a||0))/10,twoFixed=a=>Math.round(100*(a||0))/100,mapFormat=a=>+a<1?`-${(""+a).substring(1,4)}`:(+a-1).toFixed(2),boostFormat=a=>+a<1?0:twoFixed(+a-1),gtZero=a=>+a<0?0:a,safeReturn=(a,e,t=0)=>a[e]||t,mapBarFormat=a=>a<0?a/2:a/(2*DASH_OPTIONS.pBoost),setGaugeBar=(a,e,t=!1,s)=>{a&&!checkCache(`${a}-gauge-bar`,e)&&root.style.setProperty(`--${a}-gauge-bar`,t?+e/(s||DASH_OPTIONS[a])*100+"%":+e/(s||DASH_OPTIONS[a]))},setCLTBar=(a,e)=>setGaugeBar("clt",a,e),setMATBar=(a,e)=>setGaugeBar("mat",a,e),setOilPressBar=(a,e)=>setGaugeBar("pOil",a,e),setFuelPressBar=(a,e)=>setGaugeBar("pFuel",a,e),setBoostBar=(a,e)=>setGaugeBar("pBoost",a,e),setOilTempBar=(a,e)=>setGaugeBar("tOil",a,e),setFuelLevelBar=(a,e)=>setGaugeBar("lFuel",a,e,100),setBatteryBar=(a,e)=>setGaugeBar("batt",a,e),setSpeedBar=(a,e)=>setGaugeBar("spdM",a,e),setRPMBar=(a,e)=>setGaugeBar("rpmM",a,e,1e3*DASH_OPTIONS.rpmM),setTPSBar=(a,e)=>setGaugeBar("tps",a,e,100),setAFRBar=(a,e)=>setGaugeBar("afr",a,e,20),setLambdaBar=(a,e)=>setGaugeBar("lambda",a,e,2),fuelLevelFormat=(a,e,t=100)=>{const s=safeReturn(a,e);return zeroFixed(s>t?t:s<0?0:s)},loadOdo=(a,e,t,s=!1)=>{const o=DASH_OPTIONS.kmTrip+t,r=DASH_OPTIONS.kmTotal+t;setText(e,zeroFixed(o)),setText(a,zeroFixed(+DASH_OPTIONS.tKm+r)),s&&saveSettings({kmTrip:o,kmTotal:r})},updateOdo=(a,e,t)=>{0===DASH_OPTIONS.kmTrip&&setText(e,0),0===t||odoDebounce||isNaN(t)||(odoDebounce=!0,loadOdo(a,e,t,!0),setTimeout((()=>{odoDebounce=!1}),1e3))},resetOdo=()=>saveSettings({kmTrip:0}),useCanChannel=(a=null)=>isECUOnline&&DASH_OPTIONS.sCan<2&&(!a||DASH_OPTIONS[a]>1),randomStatus=a=>Math.floor(20*Math.random())>18?!a:a,simulateGear=a=>a>2?a-2:["P","N","R"][a],simulator=a=>{if(a-lastTime>33&&enableSimulator){tick=tick>999?0:tick+1;const t=tick>499?(1e3-tick)/500:tick/500;canData={rpm:t*+DASH_OPTIONS.rpmM*1e3,vss:t*+DASH_OPTIONS.spdM,tps:(100*t).toFixed(1),map:(t*(+DASH_OPTIONS.pBoost+1)).toFixed(2),clt:(t*+DASH_OPTIONS.clt).toFixed(0),mat:(t*+DASH_OPTIONS.mat).toFixed(0),oilPress:(t*+DASH_OPTIONS.pOil).toFixed(1),oilTemp:(t*+DASH_OPTIONS.tOil).toFixed(0),fuelPress:(t*+DASH_OPTIONS.pFuel).toFixed(1),gear:(e=zeroFixed(10*t),e>2?e-2:["P","N","R"][e]),boost:t*+DASH_OPTIONS.pBoost,batt:(t*+DASH_OPTIONS.batt).toFixed(1),lambda:(2*t).toFixed(2),afr:(8+12*t).toFixed(2),odoNow:tick%250==0?1:0,mapbar:3*t-1,afrbar:100*t,oilPressBar:1*t,fuelPressBar:1*t},basicData={rpm:canData.rpm,kmh:canData.vss,kmhF:canData.vss,clt:canData.clt,lvlFuel:100*t,lvlFuelF:100*t,odoNow:canData.odoNow,turnLeft:randomStatus(basicData.turnLeft),turnRight:randomStatus(basicData.turnRight),parkLights:randomStatus(basicData.parkLights),fogLights:randomStatus(basicData.fogLights),auxLights:randomStatus(basicData.auxLights),highBeam:randomStatus(basicData.highBeam),eBrake:randomStatus(basicData.eBrake),battAlt:randomStatus(basicData.battAlt),ECUErr:randomStatus(basicData.ECUErr),oilSwitch:randomStatus(basicData.oilSwitch),rearDefrost:randomStatus(basicData.rearDefrost),fan:randomStatus(basicData.fan),openDoor:randomStatus(basicData.openDoor),airbag:randomStatus(basicData.airbag)},lastTime=a}var e;enableSimulator||(canData=resetData.canData,basicData=resetData.basicData,tick=0),requestAnimationFrame(simulator)};requestAnimationFrame(simulator);const toggleSimulator=()=>{if(enableSimulator)return enableSimulator=!1,void disconnect();enableSimulator=!0,openConnection((()=>null))},switchIcons=a=>{for(let e=0;e[useCAN,useCANForRPM,useCANForVSS,useCANForCLT]=[useCanChannel(),useCanChannel("sRpm"),useCanChannel("sVss"),useCanChannel("sClt")],userBackground=()=>DASH_OPTIONS.bgImage?`${CONFIG.USER_IMAGE_PATH}${DASH_OPTIONS.bgImage}`:null;window.addEventListener("load",(()=>{window.addEventListener("message",(a=>{switch(a.data.action){case"odoreset":saveSettings({kmTrip:0});break;case"toggleSimulator":toggleSimulator();break;case"animIn":setTimeout((()=>openConnection((()=>null))),6500),mainContainer.classList.replace("anim-out","anim-in");break;case"animOut":disconnect(),mainContainer.classList.replace("anim-in","anim-out");break;default:break}}),!1)})); diff --git a/assets/defaultSettings.js b/assets/defaultSettings.js index 4abf96a..de6aabc 100644 --- a/assets/defaultSettings.js +++ b/assets/defaultSettings.js @@ -1 +1 @@ -const CONFIG={EXAMPLE_PATH:"./community",BASE_PATH:"./base/",CONFIG_STORAGE_KEY:"config",DEV_PATH_KEY:"devpath"},defaultOptions={rpmM:8,sLigt:"5250",redline:"5500",icon:1,clt:"110",mat:"110",pOil:"10",tOil:"120",pFuel:"6",pBoost:"2",tKm:"0",sCan:1,aSpd:1,sRpm:2,sVss:1,sClt:2,theme:{colors:{cMain:"#00d3ff",cSec:"#e43f01",cRed:"#b70000",cBg:"#000000",cRpm:"#00d3ff"},active:"base"},kmTrip:0,kmTotal:0,batt:"20",spdM:"300"}; +const CONFIG={EXAMPLE_PATH:"./community",BASE_PATH:"./base/",CONFIG_STORAGE_KEY:"config",DEV_PATH_KEY:"devpath"},defaultOptions={rpmM:8,sLigt:"5250",redline:"5500",icon:1,clt:"110",mat:"110",pOil:"10",tOil:"120",pFuel:"6",pBoost:"2",tKm:"0",sCan:1,aSpd:1,sRpm:2,sVss:1,sClt:2,theme:{colors:{cMain:"#00d3ff",cSec:"#e43f01",cRed:"#b70000",cBg:"#000000",cRpm:"#00d3ff"},active:"base"},kmTrip:0,kmTotal:0,batt:"20",spdM:"300",demo:0,bgImage:null,inVideo:null,inMsg:null,oilSwM:2,thVar:1}; diff --git a/assets/fonts/7segment.ttf b/assets/fonts/7segment.ttf new file mode 100644 index 0000000..a6e1730 Binary files /dev/null and b/assets/fonts/7segment.ttf differ diff --git a/assets/svgGauges.js b/assets/svgGauges.js new file mode 100644 index 0000000..e8ca0b2 --- /dev/null +++ b/assets/svgGauges.js @@ -0,0 +1 @@ +!function(e,t){let n=function(e,t){function n(e){let t=e.duration,n=1,a=60*t,i=e.start||0,o=e.end,u=o-i,r=e.step,s=e.easing||function(e){return(e/=.5)<1?.5*Math.pow(e,3):.5*(Math.pow(e-2,3)+2)};l(function e(){let t=n/a,o=u*s(t)+i;r(o,n),n+=1,t<1&&l(e)})}let a=e.document,i=Array.prototype.slice,l=e.requestAnimationFrame||e.mozRequestAnimationFrame||e.webkitRequestAnimationFrame||e.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)};return function(){function e(){let e=arguments[0],t=i.call(arguments,1);return t.forEach(function(t){for(k in t)t.hasOwnProperty(k)&&(e[k]=t[k])}),e}function t(e,t,n){let i=a.createElementNS(s,e);for(let e in t)i.setAttribute(e,t[e]);return n&&n.forEach(function(e){i.appendChild(e)}),i}function l(e,t){return e*t/100}function o(e,t,n){let a=Number(e);return a>n?n:a--e*e*e+1}))},getValue:function(){return A}},function(e){f=t("text",{x:50,y:50,fill:"#999",class:y,"font-size":"100%","font-family":"sans-serif","font-weight":"normal","text-anchor":"middle","alignment-baseline":"middle","dominant-baseline":"central"}),m=t("path",{class:k,fill:"none",stroke:"#666","stroke-width":2.5,d:u(x,b,b)});let n=l(100,360-Math.abs(b-C)),a=t("svg",{viewBox:q||"0 0 100 100",class:V},[t("path",{class:M,fill:"none",stroke:"#eee","stroke-width":2,d:u(x,b,C,n<=180?0:1)}),f,m]);e.appendChild(a)}(h),g.setValue(A),g}}()}(e);"function"==typeof define&&define.amd?define(function(){return n}):"object"==typeof module&&module.exports?module.exports=n:e.Gauge=n}("undefined"==typeof window?this:window); diff --git a/base/script.js b/base/script.js index b878561..1e9885e 100644 --- a/base/script.js +++ b/base/script.js @@ -15,7 +15,6 @@ const callback = () => { const { cMain, cSec, cRed } = COLORS const { aSpd, redline, icon } = DASH_OPTIONS const maxRPM = 8000; - let [useCAN, useCANForRPM, useCANForVSS, useCANForCLT] = [false, false, false, false] // Set static parameters setRootCSS('--background-color', cMain); @@ -40,14 +39,6 @@ const callback = () => { setRootCSS('--kmh-deg', `${(155 + ((val/160)*230))}deg`) } - // Cache the settings for channel sources locally - const checkSource = () => [useCAN, useCANForRPM, useCANForVSS, useCANForCLT] = [ - useCanChannel(), - useCanChannel('sRpm'), - useCanChannel('sVss'), - useCanChannel('sClt'), - ] - // Bind the realtime data to the DOM const bindRealtimeData = () => { // Check if the source has changed and update the cache diff --git a/community/147/147.cdr b/community/147/147.cdr new file mode 100644 index 0000000..d82d1b8 Binary files /dev/null and b/community/147/147.cdr differ diff --git "a/community/147/C\303\263pia_de_seguran\303\247a_de_147.cdr" "b/community/147/C\303\263pia_de_seguran\303\247a_de_147.cdr" new file mode 100644 index 0000000..65fa021 Binary files /dev/null and "b/community/147/C\303\263pia_de_seguran\303\247a_de_147.cdr" differ diff --git a/community/digifiz/img/bottom-mask.png b/community/digifiz/img/bottom-mask.png new file mode 100644 index 0000000..9bca7fc Binary files /dev/null and b/community/digifiz/img/bottom-mask.png differ diff --git a/community/digifiz/img/clt-meter.svg b/community/digifiz/img/clt-meter.svg new file mode 100644 index 0000000..0eaf8be --- /dev/null +++ b/community/digifiz/img/clt-meter.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/community/digifiz/img/rpm-bar.png b/community/digifiz/img/rpm-bar.png new file mode 100644 index 0000000..e432e1c Binary files /dev/null and b/community/digifiz/img/rpm-bar.png differ diff --git a/community/digifiz/img/rpm-mask.svg b/community/digifiz/img/rpm-mask.svg new file mode 100644 index 0000000..4966dea --- /dev/null +++ b/community/digifiz/img/rpm-mask.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/community/digifiz/img/spd-bg.svg b/community/digifiz/img/spd-bg.svg new file mode 100644 index 0000000..eeb4563 --- /dev/null +++ b/community/digifiz/img/spd-bg.svg @@ -0,0 +1,5 @@ + + + + diff --git a/community/digifiz/img/turbo-meter.svg b/community/digifiz/img/turbo-meter.svg new file mode 100644 index 0000000..ffadae6 --- /dev/null +++ b/community/digifiz/img/turbo-meter.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/community/digifiz/index.html b/community/digifiz/index.html new file mode 100644 index 0000000..6d40680 --- /dev/null +++ b/community/digifiz/index.html @@ -0,0 +1,148 @@ + + + + + + Dashboard + + + + + +
+ +
+
+
+ RPM BAR +
+ RPM +
+ +
+
255
+ tach +
+ +
+
+
+ BAR +
+ clt +
+ +
+
+
+ BAR +
+ boost +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
288888
+
8.88
+
88888
+
88
+
8
+
+ bottom +
+ +
+ + + + + + + diff --git a/community/digifiz/script.js b/community/digifiz/script.js new file mode 100644 index 0000000..a84c50f --- /dev/null +++ b/community/digifiz/script.js @@ -0,0 +1,61 @@ +const callback = function(){ + const signals = [ + 'turnLeft', 'turnRight', 'battAlt', 'eBrake', 'highBeam', + 'parkLights', 'fogLights', 'auxLights', 'defrost', 'oilSwitch' + ]; + const elems = [ + ...signals, 'container', 'tachNum', 'kmTrip', 'kmTotal', 'fuelLevel', + 'lambda', 'gear' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, tachNum, lambda, fuelLevel, kmTrip, kmTotal, gear, + } = elems; + const { pBoost, clt } = DASH_OPTIONS; + + const updateRPM = (currRpm) => { + setRootCSS('--rpm', (zeroFixed(((currRpm / 8000) * 772) / 10) * 10)+'px'); + } + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (useCAN) { + setText(lambda, canData.lambda) + setBoostBar(gtZero(canData.boost)) + setRootCSS('--pBoost-gauge-bar', '-'+(gtZero((canData.boost / pBoost) * 100))+'%') + setText(gear, canData.gear) + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + setText(tachNum, zeroFixed(useCANForVSS ? canData.vss : basicData.kmhF)); + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + setRootCSS('--clt-gauge-bar', '-'+(gtZero((useCANForCLT ? canData.clt : basicData.clt) / clt) * 100)+'%') + + if (isBasicOnline) { + setText(fuelLevel, fuelLevelFormat(basicData, 'lvlFuelF', 99)) + + for(let i = 0; i < signals.length; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + requestAnimationFrame(bindRealtimeData); + } + + const resetNumbers = () => { + setText(tachNum, 0); + setText(lambda, '0.00'); + setText(fuelLevel, 0); + setText(gear, 0); + loadOdo(kmTotal, kmTrip, 0); + } + + container.classList.add('anim-in'); + + setTimeout(() => resetNumbers(), 2500); + setTimeout(() => openConnection(bindRealtimeData), 4500); +}; + +window.onload = function(){ + requestAnimationFrame(callback); +}; diff --git a/community/digifiz/style.css b/community/digifiz/style.css new file mode 100644 index 0000000..bff77b7 --- /dev/null +++ b/community/digifiz/style.css @@ -0,0 +1,501 @@ +@font-face { + font-family: "Digital"; + font-style: normal; + font-weight: normal; + src: url('../../assets/fonts/7segment.ttf') format('truetype'); +} + +@font-face { + font-family: "DigitalAlpha"; + font-style: normal; + font-weight: normal; + src: url('../../assets/fonts/7segment.ttf') format('truetype'); +} + +@font-face { + font-family: "CPMono"; + font-style: normal; + font-weight: 400; + src: local('ChivoMono Light'), local('ChivoMono-Light'), url('../../assets/fonts/ChivoMono-Light.ttf') format('opentype'); +} + +@font-face { + font-family: "Rubik"; + font-style: normal; + font-weight: 400; + src: local("Rubik Regular"), local("Rubik-Regular"), + url("../../assets/fonts/Rubik-Regular.ttf") format("truetype"); +} + +:root { + --main-color: #EBD62F; + --rpm: 0px; + --lcd-bg-color: #1b2908; + --pBoost-gauge-bar: 0%; + --clt-gauge-bar: 0%; +} + +body, +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + background-color: #000; + color: #999; + font-family: "Rubik", sans-serif; + border: none; + margin: 0; + padding: 0; +} + +#container { + height: 100vh; + width: 100vw; + left: 0; + border: none; + overflow: hidden; + max-height: 500px; + position: relative; + display: block; + top: 0; + opacity: 0.01; + transform-origin: center center; +} + +#rpm { + width: 825px; + height: 342px; + position: absolute; + top: 10px; + left: 90px; +} + +#rpm #shape { + width: 772px; + height: 256px; + clip-path: polygon( + 772px 32px, + 772px 0px, + 676px 0px, + 621px 1px, + 566px 2px, + 548px 3px, + 526px 4px, + 502px 6px, + 487px 8px, + 473px 10px, + 460px 12px, + 446px 15px, + 433px 18px, + 419px 21px, + 405px 25px, + 390px 30px, + 375px 35px, + 358px 41px, + 341px 47px, + 319px 55px, + 297px 64px, + 276px 74px, + 254px 84px, + 232px 95px, + 211px 106px, + 189px 117px, + 168px 129px, + 146px 140px, + 20px 213px, + 0px 225px, + 0px 256px, + 73px 213px, + 147px 172px, + 184px 151px, + 222px 131px, + 280px 103px, + 294px 97px, + 321px 86px, + 345px 77px, + 379px 65px, + 389px 62px, + 410px 56px, + 420px 53px, + 439px 48px, + 449px 46px, + 459px 44px, + 478px 41px, + 498px 38px, + 508px 37px, + 518px 36px, + 551px 34px, + 574px 33px, + 627px 32px, + 641px 32px, + 676px 32px, + 772px 32px + ); + background-color: var(--lcd-bg-color); +} + +#rpm #shape #redline { + position: absolute; + top: 0; + left: 0; + width: 780px; + height: 260px; + background-color: var(--lcd-bg-color); + z-index: 2; +} + +#rpm #shape img { + top: 0; + left: 0; + z-index: 1; + position: absolute; + width: 768px; + height: 260px; +} + +#rpm #rpm-mask { + position: absolute; + top: 0; + left: 0; + width: 778px; + height: 272px; +} + +#clt, +#boost { + width: 92px; + height: 218px; + position: absolute; + top: 52px; +} + +#clt { + right: 34px; +} + +#cltBar, +#boostBar { + position: absolute; + width: 32px; + height: 218px; + overflow: hidden; + top: 0; + right: 12px; + background-color: var(--lcd-bg-color); + z-index: 1; +} + +#clt > img, +#boost > img { + float: right; + position: relative; + z-index: 2; +} + +#boost { + right: 160px; +} + +#cltBar .valueBar, +#boostBar .valueBar { + z-index: 2; + position: absolute; + height: 220px; + width: 34px; + background-color: var(--lcd-bg-color); +} + +#cltBar img, +#boostBar img { + transform: rotate(-90deg); + position: absolute; + bottom: 274px; + right: 0; + transform-origin: right bottom; + width: 780px; + height: 40px; + z-index: 1; +} + +#boostBar img { + bottom: 304px; +} + +#cltBar .valueBar { + transform: translateY(-3px); +} + +#boostBar .valueBar { + transform: translateY(-3px); +} + +#iconsLine { + height: 76px; +} + +#iconsLine svg { + shape-rendering: auto; + text-rendering: optimizeSpeed; + image-rendering: optimizeSpeed; + fill-rule: evenodd; +} + +#iconsLine svg g, +#iconsLine svg .disabled { + opacity: 0.15 +} + +g[data-etoggle="1"] { + opacity: 1 !important; +} + +.str0 { + stroke: #999; + stroke-width: 199.961; +} +.fil7 { + fill: none; +} +.fil8 { + fill: #007bff; +} +.fil0 { + fill: #64a621; +} +.fil3 { + fill: #cf8804; +} +.fil4 { + fill: #cf8804; +} +.fil6 { + fill: #d23e35; +} +.fil9 { + fill: #e7ffcc; +} +.fil1 { + fill: #fbff00; +} +.fil2 { + fill: #fbff00; +} + +#bottom-mask { + margin: 0 28px; + width: 1222px; + height: 103px; +} + +#tach { + top: 138px; + position: absolute; + width: 34%; + left: 41%; + font-family: 'Digital'; + color: var(--main-color); +} + +#tachNum { + display: block; + position: absolute; + z-index: 12; + font-size: 172px; + margin: 9px 0 0 0px; + text-align: right; + line-height: 132px; + top: 0; + transform: scaleX(1.2) skew(3deg); + right: 150px; + width: 306px; + opacity: 0.01; +} + +#bottom { + position: absolute; + width: 1280px; + height: 186px; + bottom: 0; +} + +#infoLine { + position: absolute; + bottom: 0px; + left: 0; + height: 60px; + font-family: 'DigitalAlpha'; + font-size: 72px; + color: var(--main-color); + opacity: 0.01; +} + +#infoLine > div { + position: absolute; + bottom: 0; + right: 0; + transform: scaleX(1.3); + transform-origin: left top; + text-align: right; + overflow: hidden; +} + +#kmTotal { + left: 20px; + font-size: 60px; + width: 194px; +} + +#lambda { + left: 426px; + width: 135px; + letter-spacing: 4px; +} + +#kmTrip { + left: 723px; + width: 198px; +} + +#fuelLevel { + left: 1033px; + width: 80px; +} + +#gear { + left: 1196px; + color: #d41d13; + width: 38px; +} + + + +/* FUNCTIONS */ + +#container.connected #rpm #shape #redline { + animation: none; + opacity: 1; + transform: translateX(var(--rpm)); +} + +#container.connected #cltBar .valueBar { + animation: none; + opacity: 1; + transform: translateY(var(--clt-gauge-bar)); +} + +#container.connected #boostBar .valueBar { + animation: none; + opacity: 1; + transform: translateY(var(--pBoost-gauge-bar)); +} + +img[data-etoggle="1"] { + opacity: 1 !important; +} + +/* ANIMATIONS */ + +#container, +#rpm #shape #redline { + will-change: transform; +} + +.anim-in #rpm #shape #redline { + animation-name: rpm; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 3s; + animation-delay: 1.5s; +} + +.anim-in #cltBar .valueBar, +.anim-in #boostBar .valueBar { + animation-name: gauges; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 3s; + animation-delay: 1.5s; +} + +.anim-in #tachNum, +.anim-in #infoLine { + animation-name: fade-in; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 0.5s; + animation-delay: 1s; +} + +#container.anim-in { + animation-name: fade-in; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 1s; +} + +#container.anim-out { + opacity: 1; + animation-name: anim-out; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 3s; +} + +@keyframes rpm { + 1% { + transform: translateX(0px); + } + 33% { + transform: translateX(770px); + } + 66% { + transform: translateX(770px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes gauges { + 1% { + transform: translateY(0px); + } + 33% { + transform: translateY(-220px); + } + 66% { + transform: translateY(-220px); + } + 100% { + transform: translateY(0px); + } +} + +@keyframes fade-in { + 1% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes anim-out { + 1% { + transform: scale(1); + } + 50% { + transform: scale(0.7) translate(0, 0); + } + 100% { + transform: scale(0.7) translate(0, -1000px); + } +} diff --git a/community/gm-retro1/img/battery.svg b/community/gm-retro1/img/battery.svg new file mode 100644 index 0000000..f0daa5f --- /dev/null +++ b/community/gm-retro1/img/battery.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/clt.svg b/community/gm-retro1/img/clt.svg new file mode 100644 index 0000000..74b4b1f --- /dev/null +++ b/community/gm-retro1/img/clt.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/gm-retro1/img/door.svg b/community/gm-retro1/img/door.svg new file mode 100644 index 0000000..6636ce1 --- /dev/null +++ b/community/gm-retro1/img/door.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/community/gm-retro1/img/fuel.svg b/community/gm-retro1/img/fuel.svg new file mode 100644 index 0000000..98bb56a --- /dev/null +++ b/community/gm-retro1/img/fuel.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge-indicator.svg b/community/gm-retro1/img/gauge-indicator.svg new file mode 100644 index 0000000..6f50517 --- /dev/null +++ b/community/gm-retro1/img/gauge-indicator.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/community/gm-retro1/img/gauge1-top.svg b/community/gm-retro1/img/gauge1-top.svg new file mode 100644 index 0000000..a860d5f --- /dev/null +++ b/community/gm-retro1/img/gauge1-top.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge1-var.svg b/community/gm-retro1/img/gauge1-var.svg new file mode 100644 index 0000000..4d0a566 --- /dev/null +++ b/community/gm-retro1/img/gauge1-var.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge2-top.svg b/community/gm-retro1/img/gauge2-top.svg new file mode 100644 index 0000000..9f12792 --- /dev/null +++ b/community/gm-retro1/img/gauge2-top.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge2-var.svg b/community/gm-retro1/img/gauge2-var.svg new file mode 100644 index 0000000..f7c5ff3 --- /dev/null +++ b/community/gm-retro1/img/gauge2-var.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge3-top.svg b/community/gm-retro1/img/gauge3-top.svg new file mode 100644 index 0000000..d8b8ee0 --- /dev/null +++ b/community/gm-retro1/img/gauge3-top.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge3-var.svg b/community/gm-retro1/img/gauge3-var.svg new file mode 100644 index 0000000..12d762f --- /dev/null +++ b/community/gm-retro1/img/gauge3-var.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge4-top.svg b/community/gm-retro1/img/gauge4-top.svg new file mode 100644 index 0000000..0d3db93 --- /dev/null +++ b/community/gm-retro1/img/gauge4-top.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/gm-retro1/img/gauge4-var.svg b/community/gm-retro1/img/gauge4-var.svg new file mode 100644 index 0000000..2712dca --- /dev/null +++ b/community/gm-retro1/img/gauge4-var.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/gm-retro1/img/handbrake.svg b/community/gm-retro1/img/handbrake.svg new file mode 100644 index 0000000..5524e7a --- /dev/null +++ b/community/gm-retro1/img/handbrake.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/community/gm-retro1/img/hheadlight.svg b/community/gm-retro1/img/hheadlight.svg new file mode 100644 index 0000000..cc01ced --- /dev/null +++ b/community/gm-retro1/img/hheadlight.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/gm-retro1/img/letters.svg b/community/gm-retro1/img/letters.svg new file mode 100644 index 0000000..78823b9 --- /dev/null +++ b/community/gm-retro1/img/letters.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/odo-left.svg b/community/gm-retro1/img/odo-left.svg new file mode 100644 index 0000000..ee2949a --- /dev/null +++ b/community/gm-retro1/img/odo-left.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/odo-right.svg b/community/gm-retro1/img/odo-right.svg new file mode 100644 index 0000000..13d5fd4 --- /dev/null +++ b/community/gm-retro1/img/odo-right.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/oil.svg b/community/gm-retro1/img/oil.svg new file mode 100644 index 0000000..be64ed6 --- /dev/null +++ b/community/gm-retro1/img/oil.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/rpm-mask.png b/community/gm-retro1/img/rpm-mask.png new file mode 100644 index 0000000..0b3684c Binary files /dev/null and b/community/gm-retro1/img/rpm-mask.png differ diff --git a/community/gm-retro1/img/rpm-mask.svg b/community/gm-retro1/img/rpm-mask.svg new file mode 100644 index 0000000..bd56380 --- /dev/null +++ b/community/gm-retro1/img/rpm-mask.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/img/turn-left.svg b/community/gm-retro1/img/turn-left.svg new file mode 100644 index 0000000..cff094c --- /dev/null +++ b/community/gm-retro1/img/turn-left.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/community/gm-retro1/img/turn-right.svg b/community/gm-retro1/img/turn-right.svg new file mode 100644 index 0000000..c250cdb --- /dev/null +++ b/community/gm-retro1/img/turn-right.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/community/gm-retro1/img/vss-bg.svg b/community/gm-retro1/img/vss-bg.svg new file mode 100644 index 0000000..da76f9f --- /dev/null +++ b/community/gm-retro1/img/vss-bg.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/community/gm-retro1/index.html b/community/gm-retro1/index.html new file mode 100644 index 0000000..1d4158b --- /dev/null +++ b/community/gm-retro1/index.html @@ -0,0 +1,145 @@ + + + + + + Dashboard + + + + + + +
+
+
+
+ + + + + + +
+
+
+
+ + + + + + +
+
+
+
+ + + + + + +
+
+
+
+ + + + + + +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+
128
+ + +
+
000000
+
0000
+ + +
+
+
+
+
+ +
+
+
+
+
+
+ + + + + +
+
+ + + + + +
+
+ +
+
+ +
+
+
+ +
+ +
+ + + + + + + + diff --git a/community/gm-retro1/script.js b/community/gm-retro1/script.js new file mode 100644 index 0000000..5422a6c --- /dev/null +++ b/community/gm-retro1/script.js @@ -0,0 +1,66 @@ +let callback = function(){ + const container = document.getElementById("container"); + const kmh = document.getElementById("kmh"); + const turnLeft = document.getElementById("turnLeft"); + const turnRight = document.getElementById("turnRight"); + const eBrake = document.getElementById("eBrake"); + const highBeam = document.getElementById("highBeam"); + const parkLights = document.getElementById("parkLights"); + const fogLights = document.getElementById("fogLights"); + const DOOR = document.getElementById("DOOR"); + const FAN = document.getElementById("FAN"); + const kmtrip = document.getElementById("km-trip") + const kmtotal = document.getElementById("km-total") + let maxRpm = 7000; + + const updateRPM = (rpm) => setRootCSS('--rpm', (zeroFixed(((rpm || 0)/maxRpm)*106)-8)+'deg'); + const setKmhDeg = ([val, valf]) => setText(kmh, zeroFixed(DASH_OPTIONS.aSpd < 2 ? (valf || val) : val)); + + function updateData() { + if (useCanChannel()) { + updateRPM(canData['rpm']); + setRootCSS('--batt-bar', `${(((canData['batt'] - 8) / 8) * 225)}px`); + setRootCSS('--oil-bar', `${((canData['oilPress'] / DASH_OPTIONS.pOil) * 225)}px`); + } + + updateRPM(useCanChannel('sRpm') ? canData['rpm'] : safeReturn(basicData, 'rpm')) + setKmhDeg(useCanChannel('sVss') ? [canData['vss']] : [basicData['kmh'], basicData['kmhF']]) + setRootCSS('--water-bar', `${(((useCanChannel('sClt') ? canData['clt'] : basicData['clt']) / DASH_OPTIONS.clt) * 225)}px`) + updateOdo(kmtotal, kmtrip, useCanChannel('sVss') ? canData['odoNow'] : basicData['odoNow']) + + if (Object.keys(basicData).length !== 0) { + setRootCSS('--comb-bar', ((basicData['lvlFuelF'] / 100) * 225)+'px'); + etoggle(turnLeft, basicData['turnLeft']); + etoggle(turnRight, basicData['turnRight']); + etoggle(eBrake, basicData['eBrake']); + etoggle(highBeam, basicData['highBeam']); + etoggle(parkLights, basicData['parkLights']); + etoggle(fogLights, basicData['fogLights']); + etoggle(DOOR, basicData['openDoor']); + etoggle(FAN, basicData['fan']); + } + requestAnimationFrame(updateData); + } + + container.classList.add('anim-in'); + setTimeout(function(){ + container.classList.add('anim-step2'); + etoggle(eBrake, 0); + etoggle(INJ, 0); + setTimeout(function(){ + container.classList.add('anim-step3'); + setTimeout(() => setText(kmh, 288), 2200); + setTimeout(function(){ + etoggle(eBrake, 1); + etoggle(INJ, 1); + setText(kmh, 0); + loadOdo(kmtotal, kmtrip, 0); + openConnection(updateData); + }, 3500) + }, 400) + }, 2500) + }; + + window.onload = function(){ + requestAnimationFrame(callback); + }; diff --git a/community/gm-retro1/style.css b/community/gm-retro1/style.css new file mode 100644 index 0000000..53fa106 --- /dev/null +++ b/community/gm-retro1/style.css @@ -0,0 +1,592 @@ +@font-face { + font-family: 'Digital'; + font-style: normal; + font-weight: normal; + src: url('../../assets/fonts/7segment.ttf') format('truetype'); +} + +:root { + --oil-bar: 0px; + --batt-bar: 0px; + --water-bar: 0px; + --comb-bar: 0px; + --rpm: -8deg; +} + +body,html { + height:100%; + width:100%; + overflow:hidden; +} + +body { + background-color: #000; + color: #999; + border: none; + margin: 0; + padding: 0; +} + +img { + position: relative; + z-index: 10; + height: auto; + width: 100px; +} + +.alignRight { + text-align: right; +} + +path.dial, svg > text { + display: none; +} + +#container { + height: 100vh; + width: 100vw; + left: 0px; + border: none; + overflow:hidden; + max-height: 500px; + position: relative; + padding: 0; + box-sizing: border-box; + opacity: 0; + background-color: #000; + transform-origin: center center; +} + +#container .block { + height: 100%; + width: 312px; + display: block; + position: absolute; + left: 32px; + top: 32px; +} + +#container .block:nth-child(3) { + left: auto; + right: 32px; +} + +#container .block.center-block { + width: 407px; + left: calc(50% - 203px); + text-align: center; +} + +.block.center-block > img { + height: 47px; + width: 54px; + align-self: center; + margin: 0 auto 10px auto; +} + +.block .gaugeHolder { + width: 100%; + height: 60px; + background-color: #1F1F1F; + overflow: hidden; + position: relative; + border-radius: 12px; + display: block; +} + +.block .gaugeHolder:after, +.block .bigCenterGauge:before { + content: ""; + background-color: #111; + position:absolute; + bottom: 8px; + right: 0; + left: 8px; + top: 0; + border-radius: 8px; + z-index: 1; +} + +.bigCenterGauge .vssDigits { + font-family: 'Digital'; + font-weight: 400; + position: absolute; + color: #FFEF82; + z-index: 12; + font-size: 148px; + transform: skew(-6deg) scale(1.15, 1); + margin: 20px 0 0 33px; + text-align: right; + width: 282px; + opacity: 0; + letter-spacing: 6px; +} + +.block:nth-child(3) .gaugeHolder:after { + right: 8px; + left: 0; +} + +.block.center-block .gaugeHolder:after { + right: 8px; + left: 8px; + bottom: unset; + width: unset; + height: 165px; + z-index: 0; +} + +.block .bigGauge, +.block .bigCenterGauge { + height: 302px; + margin-bottom: 50px; +} + +.block .bigCenterGauge { + justify-content: space-between; + -direction: column; +} + +.bigCenterGauge .vssBg { + width: 307px; + height: 118px; + margin: 30px 0 0 50px; + opacity: 0; +} + +.bigCenterGauge .letters { + width: 209px; + height: 14px; + margin-top: 45px; +} + +.bigCenterGauge .odoHolder { + margin: 20px auto 0 auto; + width: calc(100% - 40px); + position: relative; +} + +.odoHolder .odoLeft { + width: 170px; + height: 40px; + left: 0; + margin-right: 38px; +} + +.odoHolder .odoRight { + width: 153px; + height: 40px; +} + +.odoHolder .odoLeftDigits, +.odoHolder .odoRightDigits { + font-family: 'Digital', sans-serif; + position: absolute; + color: #ada682; + z-index: 12; + font-size: 32px; + letter-spacing: 8px; + margin: 6px 0 0 6px; + opacity: 0; + top: 3px; + height: 30px; + width: 152px; + text-align: right; + overflow: hidden; + transform: scaleX(1.2); +} + +.odoHolder .odoLeftDigits { + left: 0; + margin: 0 0 0 3px; +} +.odoHolder .odoRightDigits { + right: 0; + margin: 0; + letter-spacing: 19px; +} + +.odoHolder .odoRightDigits b { + font-weight: normal; + color: #000; +} + +.bigGauge .rpmMask { + width: 272px; + height: 263px; + margin: 20px 16px 10px 15px; + z-index: 14; + position: relative; +} + +.bigGauge .rpmGauge { + position: absolute; + top: 20px; + left: 15px; + width: 272px; + height: 263px; + z-index: 12; + overflow: hidden; + background: #252900; + opacity: 0; +} + +.bigGauge .rpmGauge #rpm { + content: ""; + height: 500px; + width: 500px; + background: #feee81; + position: absolute; + right: 30px; + top: 236px; + transform-origin: top right; + transform: rotate(var(--rpm)) skew(40deg, 0deg); + opacity: 0; +} + +.bigGauge .rpmGauge .value { + stroke-width: 6.5px; + stroke-dasharray: 1.5, 0.4; +} + +.block:nth-child(1) .bigGauge { + padding: 0 0 10px 10px; + box-sizing: border-box; +} + +.bigGauge .leftGauge { + display: block; + height: 60px; + background-color: #252900; + width: 100%; + border-radius: 8px; + z-index: 10; + overflow: hidden; + position: relative; + opacity: 0; + margin: 4px 0 16px 0; +} + +.bigGauge .leftGauge > * { + opacity: 0; +} + +.bigGauge .leftGauge:before { + content: ""; + position: absolute; + height: 100%; + top: 0; + left: 0; + width: 70px; + background-color: #181b00; +} + +.bigGauge .leftGauge > svg { + height: 60px; + width: auto; + z-index: 10; +} + +svg .gaugeIndicator { + fill: #cc2900; +} + +.combLevelGauge svg .gaugeIndicator { + fill: #E6851C; +} + +.bigGauge .leftGauge > img { + height: auto; + position: absolute; + margin-left: 7px; +} + +.bigGauge .leftGauge.oilPressureGauge > img { + width: 179px; + margin-left: 53px; + margin-top: 1px; +} + +.bigGauge .leftGauge.battLevelGauge > img { + width: 207px; + margin-top: 8px +} + +.bigGauge .leftGauge.waterTempGauge > img { + width: 215px; + margin-left: 8px; +} + +.bigGauge .leftGauge.combLevelGauge > img { + width: 225px; + margin-top: 4px; +} + +.bigGauge .leftGauge .gaugeBar { + position: absolute; + width: 100%; + height: 49px; + bottom: 0; + left: 73px; + background-size: 225px auto; + background-repeat: no-repeat; + background-position: left top; + transform: translate3d(0px, 0px, 0px); + clip: rect(0px 0px 60px 0px); + opacity: 1; +} + +.bigGauge .leftGauge .icon { + height: 30px; + width: 40px; + position: absolute; + top: 18px; + left: 13px; + margin: 0; + text-align: center; +} + +.bigGauge .leftGauge .icon > img { + height: 24px; + width: auto; + max-width: 30px; +} + + +.bigGauge .leftGauge.battLevelGauge > .gaugeBar { + height: 43px; +} + +.bigGauge .leftGauge.waterTempGauge > .gaugeBar { + height: 59px; + background-size: 226px auto; +} + +.bigGauge .leftGauge.combLevelGauge > .gaugeBar { + height: 46px; +} + +#container.connected .bigGauge .leftGauge.oilPressureGauge > .gaugeBar { + clip: rect(0px var(--oil-bar) 60px 0px); + animation: none; +} + +#container.connected .bigGauge .leftGauge.battLevelGauge > .gaugeBar { + clip: rect(0px var(--batt-bar) 60px 0px); + animation: none; +} + +#container.connected .bigGauge .leftGauge.waterTempGauge > .gaugeBar { + clip: rect(0px var(--water-bar) 60px 0px); + animation: none; +} + +#container.connected .bigGauge .leftGauge.combLevelGauge > .gaugeBar { + clip: rect(0px var(--comb-bar) 60px 0px); + animation: none; +} + +#container.connected:not(.anim-out) .bigGauge .rpmGauge #rpm { + animation: none; + transform: rotate(var(--rpm)) skew(40deg, 0deg); + opacity: 1; +} + +.block .bigCenterGauge:before { + content: ""; + z-index: 0; + right: 8px; + left: 8px; + background-color: #1A1A1A; +} + +.gaugeHolder .footerGauge { + height: 26px; + border-radius: 2px; + z-index: 10; + margin-left: 8px; + padding: 13px 0; + display: inline-block; + text-align: center; + opacity: 0; + width: 49px; + position: relative; +} + +.gaugeHolder .footerGauge { + transition: opacity 0.3s; +} + +.gaugeHolder .footerGauge img, +.gaugeHolder .footerGauge svg path { + transition: fill 0.3s; +} + +[data-etoggle="1"].footerGauge.blueBlock .bottomIcon, +[data-etoggle="1"].footerGauge.greenBlock .bottomIcon, +[data-etoggle="1"].footerGauge.redBlock .bottomIcon { + fill: #000; + opacity: 0.7; +} + +[data-etoggle="1"].footerGauge.blueBlock { + background-color: #0066ff; + box-shadow: 0 0 20px #0066ff; +} + +[data-etoggle="1"].footerGauge.greenBlock { + background-color: #55a200; + box-shadow: 0 0 20px #55a200; +} + +[data-etoggle="1"].footerGauge.redBlock { + background-color: #bf2701; + box-shadow: 0 0 20px #bf2701; +} + +[data-etoggle="1"].footerGauge { + opacity: 1 !important; +} + +.block:nth-child(1) .gaugeHolder .footerGauge:first-child { + /* margin-left: 18px; */ + border-radius: 8px 2px 2px 8px; +} + +.gaugeHolder .footerGauge img, +.gaugeHolder .footerGauge svg { + width: auto; + height: 26px; + max-width: 30px; + margin: auto; +} + +.gaugeHolder .footerGauge .bottomIcon { + fill: #FFF; +} + +.block:nth-child(3) .gaugeHolder .footerGauge { + margin-left: 0; + margin-right: 8px; +} + +.block:nth-child(3) .gaugeHolder .footerGauge:last-child { + margin-right: 8px; + border-radius: 2px 8px 8px 2px; +} + +#highBeam, +#turnLeft, +#turnRight, +#eBrake { + opacity: 0.15; +} + +.bottomLine { + position: absolute; + height: 4px; + left: 0; + right: 0; + top: 360px; + background: #111; + border-top: solid #1F1F1F 2px; +} + +@media only screen and (max-width: 1160px) { + +} + +.useGpu { + will-change: transform, opacity; +} + +#container.anim-in { + animation: fade-in-center 2s ease 1 forwards; +} + +#container.anim-step2 .bigGauge .leftGauge, +#container.anim-step2 .bigCenterGauge .vssBg, +#container.anim-step2 .bigGauge .rpmGauge { + animation: fade-in 0.5s ease 1 forwards; +} + +#container.anim-step3 .bigCenterGauge .vssDigits, +#container.anim-step3 .odoHolder .odoLeftDigits, +#container.anim-step3 .odoHolder .odoRightDigits, +#container.anim-step3 .bigGauge .leftGauge > * { + animation: fade-in 0.5s ease 1 forwards; +} + +#container.anim-step3 .bigGauge .leftGauge .gaugeBar { + animation: grow-in 3.5s linear 1 forwards; +} + +.anim-step3 .bigGauge .rpmGauge #rpm { + animation: rotate 3.5s linear 1 forwards; +} + +@keyframes fade-in-center { + 1% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes fade-in { + 1% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes fade-out { + 1% { opacity: 1; } + 100% { opacity: 0; } +} + +@keyframes grow-in { + 1% { clip: rect(0px 0px 60px 0px) } + 70% { clip: rect(0px 225px 60px 0px) } + 99% { clip: rect(0px 225px 60px 0px) } + 100% { clip: rect(0px 0px 60px 0px) } +} + +@keyframes rotate { + 1% { transform: rotate(-8deg) skew(40deg, 0deg); opacity: 1; } + 70% { transform: rotate(98deg) skew(40deg, 0deg); opacity: 1; } + 99% { transform: rotate(98deg) skew(40deg, 0deg); opacity: 1; } + 100% { transform: rotate(-8deg) skew(40deg, 0deg); opacity: 1; } +} + +#container.anim-out, +#container.anim-out .bigGauge .rpmMask, +#container.anim-out .bigGauge .leftGauge, +#container.anim-out .bigCenterGauge .vssBg, +#container.anim-out .bigGauge .rpmGauge, +#container.anim-out .bigCenterGauge .vssDigits, +#container.anim-out .odoHolder .odoLeftDigits, +#container.anim-out .odoHolder .odoRightDigits, +#container.anim-out .bigGauge .leftGauge, +#container.anim-out .bigGauge .leftGauge .gaugeBar { + opacity: 1; + animation: fade-out 0.5s linear 1 forwards; +} + +#container.anim-out { + animation-delay: 3s +} + +#container.anim-out .bigGauge .rpmMask, +#container.anim-out .bigGauge .leftGauge, +#container.anim-out .bigCenterGauge .vssBg, +#container.anim-out .bigGauge .rpmGauge { + animation-delay: 2s +} + +#container.anim-out .bigCenterGauge .vssDigits, +#container.anim-out .odoHolder .odoLeftDigits, +#container.anim-out .odoHolder .odoRightDigits, +#container.anim-out .bigGauge .leftGauge > * { + animation-delay: 1s +} + +#container.anim-out #rpm { + opacity: 0; + animation: none; +} diff --git "a/community/golgti/C\303\263pia_de_seguran\303\247a_de_golGTI.cdr" "b/community/golgti/C\303\263pia_de_seguran\303\247a_de_golGTI.cdr" new file mode 100644 index 0000000..a993a9c Binary files /dev/null and "b/community/golgti/C\303\263pia_de_seguran\303\247a_de_golGTI.cdr" differ diff --git a/community/golgti/assets/center.png b/community/golgti/assets/center.png new file mode 100644 index 0000000..21590c5 Binary files /dev/null and b/community/golgti/assets/center.png differ diff --git a/community/golgti/assets/font/Digital.ttf b/community/golgti/assets/font/Digital.ttf new file mode 100644 index 0000000..748fe55 Binary files /dev/null and b/community/golgti/assets/font/Digital.ttf differ diff --git a/community/golgti/assets/font/MonoNumbers.ttf b/community/golgti/assets/font/MonoNumbers.ttf new file mode 100644 index 0000000..6ac3ac3 Binary files /dev/null and b/community/golgti/assets/font/MonoNumbers.ttf differ diff --git a/community/golgti/assets/ledama.png b/community/golgti/assets/ledama.png new file mode 100644 index 0000000..2635b0d Binary files /dev/null and b/community/golgti/assets/ledama.png differ diff --git a/community/golgti/assets/ledazl.png b/community/golgti/assets/ledazl.png new file mode 100644 index 0000000..aebda32 Binary files /dev/null and b/community/golgti/assets/ledazl.png differ diff --git a/community/golgti/assets/ledverd.png b/community/golgti/assets/ledverd.png new file mode 100644 index 0000000..6994d95 Binary files /dev/null and b/community/golgti/assets/ledverd.png differ diff --git a/community/golgti/assets/ledverm.png b/community/golgti/assets/ledverm.png new file mode 100644 index 0000000..8c11c8a Binary files /dev/null and b/community/golgti/assets/ledverm.png differ diff --git a/community/golgti/assets/pontg.png b/community/golgti/assets/pontg.png new file mode 100644 index 0000000..640337c Binary files /dev/null and b/community/golgti/assets/pontg.png differ diff --git a/community/golgti/assets/pontp.png b/community/golgti/assets/pontp.png new file mode 100644 index 0000000..e508ced Binary files /dev/null and b/community/golgti/assets/pontp.png differ diff --git a/community/golgti/assets/rpmg.png b/community/golgti/assets/rpmg.png new file mode 100644 index 0000000..0546bb3 Binary files /dev/null and b/community/golgti/assets/rpmg.png differ diff --git "a/community/golgti/assets/sem compress\303\243o/center.png" "b/community/golgti/assets/sem compress\303\243o/center.png" new file mode 100644 index 0000000..fe3a753 Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/center.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/ledama.png" "b/community/golgti/assets/sem compress\303\243o/ledama.png" new file mode 100644 index 0000000..51ace86 Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/ledama.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/ledazl.png" "b/community/golgti/assets/sem compress\303\243o/ledazl.png" new file mode 100644 index 0000000..1e4a637 Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/ledazl.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/ledverd.png" "b/community/golgti/assets/sem compress\303\243o/ledverd.png" new file mode 100644 index 0000000..07c7dca Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/ledverd.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/ledverm.png" "b/community/golgti/assets/sem compress\303\243o/ledverm.png" new file mode 100644 index 0000000..2510957 Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/ledverm.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/pontg.png" "b/community/golgti/assets/sem compress\303\243o/pontg.png" new file mode 100644 index 0000000..b1e64ef Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/pontg.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/pontp.png" "b/community/golgti/assets/sem compress\303\243o/pontp.png" new file mode 100644 index 0000000..b2ef116 Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/pontp.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/rpmg.png" "b/community/golgti/assets/sem compress\303\243o/rpmg.png" new file mode 100644 index 0000000..8a4e804 Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/rpmg.png" differ diff --git "a/community/golgti/assets/sem compress\303\243o/spd.png" "b/community/golgti/assets/sem compress\303\243o/spd.png" new file mode 100644 index 0000000..387a3eb Binary files /dev/null and "b/community/golgti/assets/sem compress\303\243o/spd.png" differ diff --git a/community/golgti/assets/spd.png b/community/golgti/assets/spd.png new file mode 100644 index 0000000..c21a5f5 Binary files /dev/null and b/community/golgti/assets/spd.png differ diff --git a/community/golgti/exemp 2.png b/community/golgti/exemp 2.png new file mode 100644 index 0000000..004fe70 Binary files /dev/null and b/community/golgti/exemp 2.png differ diff --git a/community/golgti/golGTI.cdr b/community/golgti/golGTI.cdr new file mode 100644 index 0000000..be85a11 Binary files /dev/null and b/community/golgti/golGTI.cdr differ diff --git a/community/golgti/index.html b/community/golgti/index.html new file mode 100644 index 0000000..442ffe0 --- /dev/null +++ b/community/golgti/index.html @@ -0,0 +1,75 @@ + + + + + + + + GOLGTI + + + +
+
+
+ + + - - - + + - - - + + - - - + + - - - + + - - - + + - - - + + - - - + + - - - +
+ ECUErr + turn + oilSwitch + eBrake + battAlt + highBeam + parkLights +
+
+ + + + + + + +
+
+
+ + + + +
+
+ km total + 000000 + trip + 000000 + + +
+
+ + + +
+ + + \ No newline at end of file diff --git a/community/golgti/painel gol.png b/community/golgti/painel gol.png new file mode 100644 index 0000000..60a9b17 Binary files /dev/null and b/community/golgti/painel gol.png differ diff --git a/community/golgti/painl 320.png b/community/golgti/painl 320.png new file mode 100644 index 0000000..bf69622 Binary files /dev/null and b/community/golgti/painl 320.png differ diff --git a/community/golgti/script.js b/community/golgti/script.js new file mode 100644 index 0000000..7809b68 --- /dev/null +++ b/community/golgti/script.js @@ -0,0 +1,100 @@ +const callback = () => { + // Variables, constants and DOM elements + const signals = [ + 'battAlt', 'eBrake', 'highBeam', 'parkLights', 'fogLights', 'auxLights', + 'openDoor', 'oilSwitch', 'ECUErr', 'fuelLight', 'turn' + ]; + const elems = [ + ...signals, 'container', 'speedo', 'rpm', 'kmTrip', 'kmTotal', 'fuelLevel', + 'battLevel', 'fuelPressure', 'lambda', 'oilPressure', 'mapBoost', 'cltNow' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, speedo, rpm, kmTrip, kmTotal, battLevel, + fuelPressure, lambda, oilPressure, mapBoost, boost, fuelLevel, cltNow + } = elems; + const { clt } = DASH_OPTIONS + const maxRPM = 9000; + const signalsLen = signals.length - 2 + + + + loadOdo(kmTotal, kmTrip, 0) + + const updateKMH = (val) => { + setText(speedo, zeroFixed(val)) + } + + const updateRPM = (value) => { + setText(rpm, zeroFixed(value)) + if (+value > maxRPM || +value < 0) return + setRootCSS('--rpm-deg', `${(260 + ((+value / maxRPM) * 200))}deg`) + } + + const setKmhDeg = (val) => { + if (+val > 320 || +val < 0) return + if (+val > 20) setRootCSS('--kmh-deg', `${(207 + ((+val / 100) * 90))}deg`) + } + + const setFuelDeg = (val) => { + if (+val > 100 || +val < 0) return + setRootCSS('--fuel-deg', `-${(20.5 + ((+val / 100) * 44))}deg`) + } + + const setCLTDeg = (val) => { + if (+val > clt || +val < 0) return + setRootCSS('--clt-deg', `${(19.5 + ((+val / 100) * 40))}deg`) + } + + const setBoostDeg = (val) => { + if (+val > mapBoost || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / mapBoost) * 100) + 271)}deg`) + } + + const setOilPressDeg = (val) => { + if (+val > oilPressure || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / oilPressure) * 100) + 271)}deg`) + } + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (isBasicOnline) { + setFuelDeg(safeReturn(basicData, 'lvlFuelF')) + etoggle(elems.fuelLight, safeReturn(basicData, 'lvlFuelF') > 15 ? 1 : 0) + etoggle(elems.turn, (+basicData.turnLeft === 0 || +basicData.turnRight === 0) ? 0 : 1) + + for (let i = 0; i < signalsLen; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + + if (useCAN) { + setText(mapBoost, mapFormat(canData.map)) + setText(fuelPressure, canData.fuelPress) + setText(battLevel, canData.batt) + setText(lambda, canData.lambda) + setText(oilPressure, canData.oilPress) + setText(tps, canData.tps + '%') + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + updateKMH(useCANForVSS ? canData.vss : basicData.kmh) + setKmhDeg(useCANForVSS ? canData.vss : basicData.kmh) + setBoostDeg(canData.boost) + setCLTDeg(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + + requestAnimationFrame(bindRealtimeData); + + } + + setTimeout(() => openConnection(bindRealtimeData), 6000) + + + + container.classList.add('anim-in') +}; + +window.onload = () => callback() diff --git a/community/golgti/style.css b/community/golgti/style.css new file mode 100644 index 0000000..3ef003f --- /dev/null +++ b/community/golgti/style.css @@ -0,0 +1,417 @@ +:root { + --rpm-deg: 260deg; + --fuel-deg: -20.5deg; + --clt-deg: 19.5deg; + --kmh-deg: 226deg; +} + + +@font-face { + font-family: 'Digital'; + src: url(./assets/font/Digital.ttf); +} + + +body, +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + background-color: #000; + color: #eee; + border: none; + margin: 0; + padding: 0; + text-rendering: optimizeSpeed; + scale: 1.0; +} + +.oilFuelCoolGauge, +.center, +.speedGauge { + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%); + opacity: 0; + animation: gauges 2s ease-in-out forwards; +} + +.oilFuelCoolGauge { + top: 50%; + left: 21%; +} + +.center { + top: 50%; + left: 50%; + z-index: 1; +} + +.speedGauge { + top: 50%; + left: 79%; +} + +/* Ponteiros */ +.ponteiroRpm { + width: 12%; + top: 31%; + left: 50%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--rpm-deg)); + transform-origin: center 85%; + animation: ponteiroRpm 2s ease-in-out; + opacity: 1 !important; +} + +.ponteiroSpeed { + width: 12%; + top: 31%; + left: 50%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--kmh-deg)); + transform-origin: center 85%; + animation: ponteiroSpeed 2s ease-in-out; + opacity: 1 !important; +} + +.ponteiroFuel { + top: 90%; + left: 49.5%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--fuel-deg)); + transform-origin: center -395%; + animation: ponteiroFuel 2s ease-in-out; + opacity: 1 !important; +} + +.ponteiroCoolant { + top: 90%; + left: 49.5%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--clt-deg)); + transform-origin: center -395%; + animation: ponteiroCoolant 2s ease-in-out; + opacity: 1 !important; +} + +.oilPressTitle { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1rem; + color: #F80000; + position: absolute; + top: 79%; + left: 50%; + transform: translate(-50%, -50%); +} + +.oilPressNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 23%; + left: 28%; + transform: translate(-50%, -50%); +} + +.fuelPressNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 23%; + left: 73%; + transform: translate(-50%, -50%); +} + +.battNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 78.6%; + left: 72%; + transform: translate(-50%, -50%); +} + +.rpmNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 92%; + left: 73%; + transform: translate(-50%, -50%); +} + +.speedNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 92%; + left: 28%; + transform: translate(-50%, -50%); +} + +.tpsNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 9.6%; + left: 73%; + transform: translate(-50%, -50%); +} + +.lbdNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 9.6%; + left: 28%; + transform: translate(-50%, -50%); +} + + +.bstNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 78.6%; + left: 28%; + transform: translate(-50%, -50%); +} + +.absolute { + position: absolute; +} + +.farolBaixo { + top: 41%; + left: 80%; +} + +.farolete { + top: 41%; + left: 43.5%; +} + +.luzOleo { + top: 41%; + left: 62%; +} + +.luzhandbrake { + top: 50.5%; + left: 62%; +} + +.luzBatt { + top: 41%; + left: 25.5%; +} + +.engCheck { + top: 50.5%; + left: 25.5%; +} + +.luzSetas { + top: 41%; + left: 7.2%; +} + +.luzFarolAlto { + top: 41%; + left: 7.2%; +} + +.triptext { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + position: absolute; + text-align: center; + color: #F80000; + top: 62%; + left: 50%; + font-size: 0.8rem; + transform: translate(-50%, -50%); +} + +.trip { + font-family: 'Digital'; + position: absolute; + text-align: center; + color: #F80000; + top: 67%; + left: 50%; + font-size: 0.9rem; + transform: translate(-50%, -50%); +} + +.kmtotaltext { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + position: absolute; + text-align: center; + color: #F80000; + top: 32%; + left: 50%; + font-size: 0.8rem; + transform: translate(-50%, -50%); +} + +.kmtotal { + font-family: 'Digital'; + position: absolute; + text-align: center; + color: #F80000; + top: 38%; + left: 50%; + font-size: 1.2rem; + transform: translate(-50%, -50%); +} + +.totais { + text-align: right; +} + +@keyframes gauges { + 0% { + opacity: 1; + } + + 100% { + opacity: 1; + } +} + +@keyframes ponteiroRpm { + 0% { + transform: translate(-50%, -50%) rotate(260deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(459deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(260deg); + } +} + +@keyframes ponteiroSpeed { + 0% { + transform: translate(-50%, -50%) rotate(226deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(496deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(226deg); + } +} + +@keyframes ponteiroFuel { + 0% { + transform: translate(-50%, -50%) rotate(-20.5deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(-64deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(-20.5deg); + } +} + +@keyframes ponteiroCoolant { + 0% { + transform: translate(-50%, -50%) rotate(19.5deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(64deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(19.5deg); + } +} + +#container { + display: block; + position: relative; + height: 100%; + width: 100%; + top: 1px; + left: 0px; + border: none; + overflow: hidden; + transform: scale(1); + max-height: 500px; +} + +#leds span img { + opacity: 0; + transition: 0.3s; +} + +#leds span[data-etoggle="1"] img { + transition: 0.3s; + opacity: 1 !important; +} + +.engCheckIcon { + width: 12%; + top: 62.4%; + left: 26%; +} + +.eBrakeIcon { + width: 12%; + top: 62.4%; + left: 62.3%; +} + +.battIcon { + width: 11%; + top: 31.6%; + left: 26%; +} + +.oilIcon { + width: 12%; + top: 32%; + left: 62.3%; +} + +.headlightIcon { + width: 12%; + top: 32%; + left: 44.3%; +} + +.hheadlightIcon { + width: 11%; + top: 31%; + left: 80.3%; +} + +.turnIcon { + width: 12%; + top: 32%; + left: 8.3%; +} \ No newline at end of file diff --git a/community/gtr34/assets/big-needle.png b/community/gtr34/assets/big-needle.png new file mode 100644 index 0000000..016e04b Binary files /dev/null and b/community/gtr34/assets/big-needle.png differ diff --git a/community/gtr34/assets/cltgauge.png b/community/gtr34/assets/cltgauge.png new file mode 100644 index 0000000..0fcc1d7 Binary files /dev/null and b/community/gtr34/assets/cltgauge.png differ diff --git a/community/gtr34/assets/fuelgauge.png b/community/gtr34/assets/fuelgauge.png new file mode 100644 index 0000000..5b1dedb Binary files /dev/null and b/community/gtr34/assets/fuelgauge.png differ diff --git a/community/gtr34/assets/kmhgauge.png b/community/gtr34/assets/kmhgauge.png new file mode 100644 index 0000000..f343e52 Binary files /dev/null and b/community/gtr34/assets/kmhgauge.png differ diff --git a/community/gtr34/assets/r34intro.mp4 b/community/gtr34/assets/r34intro.mp4 new file mode 100644 index 0000000..d9c36f0 Binary files /dev/null and b/community/gtr34/assets/r34intro.mp4 differ diff --git a/community/gtr34/assets/rpmgauge.png b/community/gtr34/assets/rpmgauge.png new file mode 100644 index 0000000..35d5a9c Binary files /dev/null and b/community/gtr34/assets/rpmgauge.png differ diff --git a/community/gtr34/assets/script.js b/community/gtr34/assets/script.js new file mode 100644 index 0000000..69a25e9 --- /dev/null +++ b/community/gtr34/assets/script.js @@ -0,0 +1,68 @@ +const callback = () => { + const signals = [ + 'turnLeft', 'turnRight', 'battAlt', 'eBrake', 'highBeam', 'parkLights', + 'fogLights', 'auxLights', 'openDoor', 'fan', 'oilSwitch', 'ECUErr' + ]; + const elems = [...signals, 'container', 'kmTrip', 'kmTotal', 'introVideo'] + .reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { container, kmTrip, kmTotal, introVideo } = elems; + const { clt } = DASH_OPTIONS + const maxRPM = 11000; + + loadOdo(kmTotal, kmTrip, 0) + + const updateRPM = (value) => { + if (+value > maxRPM) return + if (+value < 1001) setRootCSS('--rpm-deg', `${(((+value / 1000) * 10))}deg`) + if (+value > 1000 && +value < 3001) setRootCSS('--rpm-deg', `${((((+value - 1000) / 2000) * 30) + 10)}deg`) + if (+value > 3000) setRootCSS('--rpm-deg', `${((((+value - 3000) / 8000) * 210) + 40)}deg`) + } + + const setKmhDeg = (val) => { + if (checkCache('kmh-deg', val) || val > 320) return + setRootCSS('--kmh-deg', `${(((val / 320) * 246) + 2)}deg`) + } + + const updateSmallNeedle = (val, max, elem) => { + setRootCSS(elem, '-' + (((val / max) * 81) + 3) + 'deg'); + } + + const updateOilPressure = (val) => { + if (val > 8 || val < 0) return + setRootCSS('--oil-pressure-deg', (88 - ((val / 8) * 88)) + 'deg'); + } + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (useCAN) { + updateOilPressure(canData.oilPress) + } + + if (isBasicOnline) { + updateSmallNeedle(fuelLevelFormat(basicData, 'lvlFuelF'), 100, '--fuel-deg') + + for (let i = 0; i < signals.length; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + setKmhDeg(useCANForVSS ? canData.vss : safeReturn(basicData, 'kmh')) + updateSmallNeedle(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt'), clt, '--coolant-deg') + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + requestAnimationFrame(bindRealtimeData); + } + + switchIcons(document.querySelectorAll('#top-info img')) + + introVideo.onended = () => { + introVideo.parentNode.removeChild(introVideo) + container.classList.add('anim-in') + setTimeout(() => openConnection(bindRealtimeData), 5000) + } + introVideo.play() +}; + +window.onload = () => callback() diff --git a/community/gtr34/assets/sm-needle.png b/community/gtr34/assets/sm-needle.png new file mode 100644 index 0000000..d380d29 Binary files /dev/null and b/community/gtr34/assets/sm-needle.png differ diff --git a/community/gtr34/assets/style.css b/community/gtr34/assets/style.css new file mode 100644 index 0000000..df28ee2 --- /dev/null +++ b/community/gtr34/assets/style.css @@ -0,0 +1,413 @@ +@font-face { + font-family: 'Digital'; + font-style: normal; + font-weight: normal; + src: url('../../../assets/fonts/7segment.ttf') format('truetype'); +} + +:root { + --rpm-deg: 0deg; + --kmh-deg: 2deg; + --fuel-deg: -3deg; + --coolant-deg: -3deg; + --oil-pressure-deg: 88deg; +} + +body, +html, +#components { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + background-color: #000; + color: #eee; + border: none; + margin: 0; + padding: 0; + text-rendering: optimizeSpeed; +} + +#container { + opacity: 0.01; + transform-origin: center center; + height: 100vh; + width: 100vw; +} + +.anim-out .circle, +.anim-out #center-mask, +.anim-out #bottom-odo { + opacity: 1; + transform: scale(1); + animation-name: fade-out; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-duration: 0.7s; +} + +.anim-out #center-mask { + animation-delay: 2s; +} + +#top-info .icons span { + opacity: 0.15; + position: absolute; +} + +#top-info .icons span[data-etoggle="1"] { + opacity: 1 !important; +} + +#top-info { + width: 100%; + position: absolute; + height: 100%; +} + +#top-info section { + position: absolute; + width: 100%; + height: 100%; +} + +.fixed { + position: absolute; +} + +.icons img { + width: 30px; + position: absolute; +} + +#turnLeft img { + top: 24px; + left: 50vw; + margin-left: -100px; +} + +#turnRight img { + top: 24px; + left: 50vw; + margin-left: 70px; +} + +#eBrake img { + top: 210px; + left: 85vw; +} + +#battAlt img { + top: 210px; + left: 91vw; +} + +#ECUErr img { + top: 210px; + left: 7vw; +} + +#oilSwitch img { + top: 210px; + left: 13vw; + width: 45px; +} + +#openDoor img { + top: 104px; + left: 16vw; +} + +#fan img { + top: 160px; + left: 15vw; +} + +#parkLights img { + top: 164px; + left: 10vw; + width: 40px; +} + +#auxLights img { + top: 104px; + left: 81vw; +} + +#fogLights img { + top: 160px; + left: 83vw; +} + +#highBeam img { + top: 160px; + left: 87vw; +} + +.oilIndicator { + bottom: 5px; + left: 98px; + height: 80px; + width: 160px; + position: absolute; + overflow: hidden; + z-index: 2; + display: none; +} + +.oilNeedle { + transform: rotate(var(--oil-pressure-deg)); + height: 120px; + width: 120px; + position: absolute; + top: -80px; + left: 20px; +} + +.rpmGauge { + position: absolute; + height: 356px; + width: 356px; + top: 5vh; + left: 20vw; +} + +.rpmGauge .bg { + position: absolute; + display: block; + height: 356px; + width: 356px; +} + +.rpmNeedle { + position: absolute; + z-index: 3; + transform-origin: 127px 29px; + transform: rotate(var(--rpm-deg)); + top: 152px; + left: 50px; + width: 165px; + height: 118px; +} + +.kmhGauge { + position: absolute; + height: 356px; + width: 356px; + top: 5vh; + right: 20vw; +} + +.kmhGauge .bg { + position: absolute; + display: block; + height: 356px; + width: 356px; +} + +.speedNeedle { + position: absolute; + z-index: 3; + transform-origin: 127px 29px; + transform: rotate(var(--kmh-deg)); + top: 152px; + left: 50px; + width: 165px; + height: 118px; +} + +.cltGauge { + position: absolute; + height: 200px; + width: 200px; + top: 50vh; + left: 5vw; +} + +.cltGauge .bg { + position: absolute; + display: block; + height: 200px; + width: 200px; +} + +.cltNeedle { + position: absolute; + z-index: 3; + top: 69px; + transform: rotate(var(--coolant-deg)); + left: 39px; + transform-origin: 33px 31px; +} + +.fuelGauge { + position: absolute; + height: 200px; + width: 200px; + top: 50vh; + right: 5vw; +} + +.fuelGauge .bg { + position: absolute; + display: block; + height: 200px; + width: 200px; +} + +.fuelNeedle { + position: absolute; + z-index: 3; + top: 69px; + transform: scaleX(-1) rotate(var(--fuel-deg)); + right: 7px; + transform-origin: 33px 31px; +} + +#kmTotal { + position: absolute; + bottom: 33px; + left: 95px; + width: 164px; + height: 40px; + font-family: 'Digital'; + z-index: 2; + color: #000; + font-size: 30px; + text-align: right; + letter-spacing: 4px; + overflow: hidden; +} + +#all-icons { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; + display: none; +} + +#container.connected #all-icons, +#container.connected .oilIndicator { + display: block; +} + +#loader { + position: absolute; + z-index: 3; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +#loader video { + height: 300px; + width: 1000px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; +} + +#components .bg { + opacity: 0.01; +} + +#container.anim-in { + animation: 1s fade-in linear forwards; +} + +#container.anim-in #components .bg { + animation: 1s fade-in 3.5s linear forwards; +} + +.anim-in .rpmNeedle, +.anim-in .speedNeedle { + animation: 2.5s verify-big-marker 1s ease-in-out; +} + +.anim-in .cltNeedle { + animation: 2.5s verify-coolant-marker 1s ease-in-out; +} + +.anim-in .fuelNeedle { + animation: 2.5s verify-fuel-marker 1s ease-in-out; +} + +#container.anim-out { + opacity: 1; + animation-name: anim-out; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 3s; +} + +@keyframes fade-in { + 1% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes verify-big-marker { + 0% { + transform: rotate(2deg); + } + + 50% { + transform: rotate(249deg); + } + + 100% { + transform: rotate(2deg); + } +} + +@keyframes verify-coolant-marker { + 0% { + transform: rotate(-3deg); + } + + 50% { + transform: rotate(-84deg); + } + + 100% { + transform: rotate(-3deg); + } +} + +@keyframes verify-fuel-marker { + 0% { + transform: rotate(3deg) scaleX(-1); + } + + 50% { + transform: rotate(84deg) scaleX(-1); + } + + 100% { + transform: rotate(3deg) scaleX(-1); + } +} + +@keyframes anim-out { + 1% { + transform: scale(1); + } + 50% { + transform: scale(0.7) translate(0, 0); + } + 100% { + transform: scale(0.7) translate(0, -1000px); + } + } diff --git a/community/gtr34/index.html b/community/gtr34/index.html new file mode 100644 index 0000000..07ee175 --- /dev/null +++ b/community/gtr34/index.html @@ -0,0 +1,72 @@ + + + + + + + BNR34 + + + + + + + +
+
+
+
+ +
+ + +
+
+ +
000000
+ +
+
+ + +
+
+ + +
+
+
+
+
+ turnLeft + ECUErr + battAlt + eBrake + oilSwitch + openDoor + turnRight +
+
+ highBeam + parkLights + fogLights + auxLights + fan +
+
+
+
+ +
+ +
+ + + + + + + + diff --git "a/community/gtr35/C\303\263pia_de_seguran\303\247a_de_GTR35.cdr" "b/community/gtr35/C\303\263pia_de_seguran\303\247a_de_GTR35.cdr" new file mode 100644 index 0000000..3099869 Binary files /dev/null and "b/community/gtr35/C\303\263pia_de_seguran\303\247a_de_GTR35.cdr" differ diff --git a/community/gtr35/GTR35.cdr b/community/gtr35/GTR35.cdr new file mode 100644 index 0000000..db3612a Binary files /dev/null and b/community/gtr35/GTR35.cdr differ diff --git a/community/gtr35/assets/3g.png b/community/gtr35/assets/3g.png new file mode 100644 index 0000000..69bef22 Binary files /dev/null and b/community/gtr35/assets/3g.png differ diff --git a/community/gtr35/assets/font/Digital.ttf b/community/gtr35/assets/font/Digital.ttf new file mode 100644 index 0000000..748fe55 Binary files /dev/null and b/community/gtr35/assets/font/Digital.ttf differ diff --git a/community/gtr35/assets/font/MonoNumbers.ttf b/community/gtr35/assets/font/MonoNumbers.ttf new file mode 100644 index 0000000..6ac3ac3 Binary files /dev/null and b/community/gtr35/assets/font/MonoNumbers.ttf differ diff --git a/community/gtr35/assets/font/Rubik-Bold.ttf b/community/gtr35/assets/font/Rubik-Bold.ttf new file mode 100644 index 0000000..1a9693d Binary files /dev/null and b/community/gtr35/assets/font/Rubik-Bold.ttf differ diff --git a/community/gtr35/assets/originais/3g.png b/community/gtr35/assets/originais/3g.png new file mode 100644 index 0000000..8bae09e Binary files /dev/null and b/community/gtr35/assets/originais/3g.png differ diff --git a/community/gtr35/assets/originais/ponteiro.png b/community/gtr35/assets/originais/ponteiro.png new file mode 100644 index 0000000..f07a4fd Binary files /dev/null and b/community/gtr35/assets/originais/ponteiro.png differ diff --git a/community/gtr35/assets/originais/pontm.png b/community/gtr35/assets/originais/pontm.png new file mode 100644 index 0000000..53a4858 Binary files /dev/null and b/community/gtr35/assets/originais/pontm.png differ diff --git a/community/gtr35/assets/originais/pontp.png b/community/gtr35/assets/originais/pontp.png new file mode 100644 index 0000000..11f5b56 Binary files /dev/null and b/community/gtr35/assets/originais/pontp.png differ diff --git a/community/gtr35/assets/originais/rpmg.png b/community/gtr35/assets/originais/rpmg.png new file mode 100644 index 0000000..4f75d87 Binary files /dev/null and b/community/gtr35/assets/originais/rpmg.png differ diff --git a/community/gtr35/assets/originais/speeg.png b/community/gtr35/assets/originais/speeg.png new file mode 100644 index 0000000..4489bf0 Binary files /dev/null and b/community/gtr35/assets/originais/speeg.png differ diff --git a/community/gtr35/assets/ponteiro.png b/community/gtr35/assets/ponteiro.png new file mode 100644 index 0000000..63f0606 Binary files /dev/null and b/community/gtr35/assets/ponteiro.png differ diff --git a/community/gtr35/assets/pontm.png b/community/gtr35/assets/pontm.png new file mode 100644 index 0000000..190517f Binary files /dev/null and b/community/gtr35/assets/pontm.png differ diff --git a/community/gtr35/assets/pontp.png b/community/gtr35/assets/pontp.png new file mode 100644 index 0000000..ef442ba Binary files /dev/null and b/community/gtr35/assets/pontp.png differ diff --git a/community/gtr35/assets/rpmg.png b/community/gtr35/assets/rpmg.png new file mode 100644 index 0000000..40e660c Binary files /dev/null and b/community/gtr35/assets/rpmg.png differ diff --git a/community/gtr35/assets/speeg.png b/community/gtr35/assets/speeg.png new file mode 100644 index 0000000..d4a9f1d Binary files /dev/null and b/community/gtr35/assets/speeg.png differ diff --git a/community/gtr35/index.html b/community/gtr35/index.html new file mode 100644 index 0000000..087d243 --- /dev/null +++ b/community/gtr35/index.html @@ -0,0 +1,63 @@ + + + + + + + + GTR 35 + + + +
+
+ +
+ --- + + +
+ +
+ + + km + 000000 + trp + 000000 + Lbd + 0.00 + Tps + 0.0 +
+ +
+ + + + n +
+ +
+ + + + + + + + +
+
+ + + +
+ + + \ No newline at end of file diff --git a/community/gtr35/script.js b/community/gtr35/script.js new file mode 100644 index 0000000..7050a19 --- /dev/null +++ b/community/gtr35/script.js @@ -0,0 +1,102 @@ +const callback = () => { + // Variables, constants and DOM elements + const signals = [ + 'turnLeft', 'turnRight', 'battAlt', 'eBrake', 'highBeam', 'parkLights', 'fogLights', 'auxLights', + 'openDoor', 'oilSwitch', 'ECUErr', 'fuelLight', 'turn' + ]; + const elems = [ + ...signals, 'container', 'speedo', 'rpm', 'kmTrip', 'kmTotal', 'fuelLevel', + 'battLevel', 'fuelPressure', 'lambda', 'oilPressure', 'mapBoost', 'cltNow' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, speedo, rpm, kmTrip, kmTotal, battLevel, + fuelPressure, lambda, oilPressure, mapBoost, boost, fuelLevel, cltNow + } = elems; + const { clt } = DASH_OPTIONS + const maxRPM = 9000; + const signalsLen = signals.length - 2 + + + + loadOdo(kmTotal, kmTrip, 0) + + const updateKMH = (val) => { + setText(speedo, zeroFixed(val)) + } + + const updateRPM = (value) => { + setText(rpm, zeroFixed(value)) + if (+value > maxRPM || +value < 0) return + setRootCSS('--rpm-deg', `${(220 + ((+value / maxRPM) * 245))}deg`) + } + + const setKmhDeg = (val) => { + if (+val > 340 || +val < 0) return + if (+val > 0 && +val <= 100) setRootCSS('--kmh-deg', `${(139 + ((+val / 100) * 101))}deg`) + if (+val > 100 && +val <= 340) setRootCSS('--kmh-deg', `${(170 + ((+val / 100) * 68))}deg`) + } + + const setFuelDeg = (val) => { + if (+val > 100 || +val < 0) return + setRootCSS('--fuel-deg', `${(232 + ((+val / 100) * 76))}deg`) + } + + const setCLTDeg = (val) => { + if (+val > clt || +val < 0) return + setRootCSS('--clt-deg', `${(232 + ((+val / 100) * 70))}deg`) + } + + const setBoostDeg = (val) => { + if (+val > mapBoost || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / mapBoost) * 100) + 271)}deg`) + } + + const setOilPressDeg = (val) => { + if (+val > oilPressure || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / oilPressure) * 100) + 271)}deg`) + } + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (isBasicOnline) { + setFuelDeg(safeReturn(basicData, 'lvlFuelF')) + etoggle(elems.fuelLight, safeReturn(basicData, 'lvlFuelF') > 15 ? 1 : 0) + etoggle(elems.turn, (+basicData.turnLeft === 0 || +basicData.turnRight === 0) ? 0 : 1) + + for (let i = 0; i < signalsLen; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + + if (useCAN) { + setText(mapBoost, mapFormat(canData.map)) + setText(fuelPressure, canData.fuelPress) + setText(battLevel, canData.batt) + setText(lambda, canData.lambda) + setText(oilPressure, canData.oilPress) + setText(gear, canData['gear']) + setText(tps, canData.tps + '%') + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + updateKMH(useCANForVSS ? canData.vss : basicData.kmh) + setKmhDeg(useCANForVSS ? canData.vss : basicData.kmh) + setBoostDeg(canData.boost) + setCLTDeg(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + + requestAnimationFrame(bindRealtimeData); + + } + + setTimeout(() => openConnection(bindRealtimeData), 6000) + + + switchIcons(document.querySelectorAll('.icons img')) + container.classList.add('anim-in') +}; + +window.onload = () => callback() diff --git a/community/gtr35/style.css b/community/gtr35/style.css new file mode 100644 index 0000000..97b967b --- /dev/null +++ b/community/gtr35/style.css @@ -0,0 +1,493 @@ +:root { + --rpm-deg: 220deg; + --fuel-deg: 232deg; + --clt-deg: 232deg; + --kmh-deg: 139deg; +} + + +@font-face { + font-family: 'Digital'; + src: url(./assets/font/Digital.ttf); +} + +@font-face { + font-family: 'Rubik'; + src: url(./assets/font/Rubik-Bold.ttf); +} + + +body, +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + background-color: #000; + color: #eee; + border: none; + margin: 0; + padding: 0; + text-rendering: optimizeSpeed; + scale: 1.0; +} + +.oilFuelCoolGauge, +.rpmGauge, +.speedGauge { + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%); + opacity: 0; + animation: gauges 2s ease-in-out forwards; +} + +.oilFuelCoolGauge { + top: 50%; + left: 81%; + animation: slideRightFuel 0.7s ease-in-out forwards; + opacity: 0; +} + +.rpmGauge { + animation: slideRightRpm 0.7s ease-in-out forwards; + animation-delay: 0.5s; + top: 50%; + left: 50%; + z-index: 1; + filter: drop-shadow(2px 0px 6px black); + opacity: 0; +} + +.speedGauge { + animation: slideRightSpeed 0.7s ease-in-out forwards; + animation-delay: 1s; + top: 50%; + left: 20%; + opacity: 0; +} + +.gearNumber { + font-family: "Digital"; + color: black; + font-size: 5rem; + position: absolute; + top: 15%; + text-align: center; + right: 64%; + text-transform: uppercase; +} + +/* Ponteiros */ +.ponteiroRpm { + /* width: 13%; */ + top: 32%; + left: 50%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(220deg); + transform: translate(-50%, -50%) rotate(var(--rpm-deg)); + transform-origin: center 85%; + animation: ponteiros 1s ease-in-out forwards; + opacity: 0; + filter: drop-shadow(2px 0px 6px black); + animation-delay: 2s; +} + +.ponteiroSpeed { + /* width: 12%; */ + top: 32%; + left: 50%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(139deg); + transform: translate(-50%, -50%) rotate(var(--kmh-deg)); + transform-origin: center 85%; + animation: ponteiros 1s ease-in-out forwards; + opacity: 0; + filter: drop-shadow(2px 0px 6px black); + animation-delay: 2s; +} + +.ponteiroFuel { + top: 67.5%; + left: 36.5%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--fuel-deg)); + transform-origin: center 75%; + animation: ponteiros 1s ease-in-out forwards; + opacity: 0; + filter: drop-shadow(2px 0px 6px black); + animation-delay: 2s; +} + +.ponteiroCoolant { + top: 42.5%; + left: 82.5%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--clt-deg)); + transform-origin: center 75%; + animation: ponteiros 1s ease-in-out forwards; + opacity: 0; + filter: drop-shadow(2px 0px 6px black); + animation-delay: 2s; +} + +.oilPressTitle { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1rem; + color: #F80000; + position: absolute; + top: 79%; + left: 50%; + transform: translate(-50%, -50%); +} + +.oilPressNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 23%; + left: 28%; + transform: translate(-50%, -50%); +} + +.fuelPressNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 23%; + left: 73%; + transform: translate(-50%, -50%); +} + +.battNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 78.6%; + left: 72%; + transform: translate(-50%, -50%); +} + +.rpmNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 92%; + left: 73%; + transform: translate(-50%, -50%); +} + +.speedNumber { + font-family: "Rubik"; + font-size: 2rem; + color: #ffffff; + position: absolute; + top: 50%; + left: 73%; + transform: translate(-50%, -50%); +} + +.tpsText { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 0.8rem; + font-weight: 600; + color: #000; + position: absolute; + top: 74%; + left: 44%; + transform: translate(-50%, -50%); +} + +.tpsNumber { + font-family: "Digital"; + font-size: 1rem; + color: #000; + position: absolute; + top: 75%; + left: 53.5%; + transform: translate(-50%, -50%); +} + +.lbdText { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 0.8rem; + font-weight: 600; + color: #000; + position: absolute; + top: 68%; + left: 44%; + transform: translate(-50%, -50%); +} + +.lbdNumber { + font-family: "Digital"; + font-size: 1rem; + color: #000; + position: absolute; + top: 69%; + left: 52%; + transform: translate(-50%, -50%); +} + + +.bstNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.4rem; + color: #F80000; + position: absolute; + top: 78.6%; + left: 28%; + transform: translate(-50%, -50%); +} + +.absolute { + position: absolute; +} + +.farolBaixo { + top: 41%; + left: 80%; +} + +.farolete { + top: 41%; + left: 43.5%; +} + +.luzOleo { + top: 41%; + left: 62%; +} + +.luzhandbrake { + top: 50.5%; + left: 62%; +} + +.luzBatt { + top: 41%; + left: 25.5%; +} + +.engCheck { + top: 50.5%; + left: 25.5%; +} + +.luzSetas { + top: 41%; + left: 7.2%; +} + +.luzFarolAlto { + top: 41%; + left: 7.2%; +} + +.triptext { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + position: absolute; + text-align: center; + color: #000000; + font-weight: 600; + top: 57%; + left: 67%; + font-size: 0.8rem; + transform: translate(-50%, -50%); +} + +.trip { + font-family: 'Digital'; + text-align: left; + position: absolute; + color: #000000; + top: 58%; + left: 78%; + font-size: 1rem; + transform: translate(-50%, -50%); +} + +.kmtotaltext { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + position: absolute; + font-weight: 600; + color: #000000; + top: 52%; + left: 67%; + font-size: 0.8rem; + transform: translate(-50%, -50%); + +} + +.kmtotal { + font-family: 'Digital'; + position: absolute; + color: #000000; + top: 53%; + left: 78%; + transform: translate(-50%, -50%); + + font-size: 1rem; +} + +.totais { + text-align: right; +} + +@keyframes slideRightRpm { + 0% { + left: -24%; + opacity: 0; + } + + 100% { + left: 50%; + opacity: 1; + } +} + +@keyframes slideRightFuel { + 0% { + left: -24%; + opacity: 0; + } + + 100% { + left: 81%; + opacity: 1; + } +} + +@keyframes slideRightSpeed { + 0% { + left: -24%; + opacity: 0; + } + + 100% { + left: 20%; + opacity: 1; + } +} + +@keyframes ponteiros { + 0% { + opacity: 1; + } + + 10% { + opacity: 0; + } + + 20% { + opacity: 1; + } + + 30% { + opacity: 0; + } + + 40% { + opacity: 1; + } + + 50% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + + +#container { + display: block; + position: relative; + height: 100%; + width: 100%; + top: 1px; + left: 0px; + border: none; + overflow: hidden; + transform: scale(1); + max-height: 500px; +} + +#leds span img { + opacity: 0; + transition: 0.3s; +} + +#leds span[data-etoggle="1"] img { + transition: 0.3s; + opacity: 1; +} + +.icons span { + opacity: 0.1; + will-change: opacity; +} + +.icons span[data-etoggle="1"], +.turn-arrows[data-etoggle="1"] { + opacity: 1 !important; +} + +.engCheckIcon { + width: 3%; + top: 83.4%; + left: 64%; +} + +.eBrakeIcon { + width: 3%; + top: 77%; + left: 3.3%; +} + +.battIcon { + width: 3%; + top: 80.6%; + left: 32%; +} + +.oilIcon { + width: 3%; + top: 17%; + left: 3.3%; +} + +.headlightIcon { + width: 3%; + top: 77%; + left: 83.3%; +} + +.hheadlightIcon { + width: 3%; + top: 17%; + left: 83.3%; +} + +.turnLicon { + width: 3%; + top: 4%; + left: 33.3%; +} + +.turnRicon { + width: 3%; + top: 4%; + left: 63.3%; +} \ No newline at end of file diff --git a/community/nfsu2/img/cat-bg.png b/community/nfsu2/img/cat-bg.png new file mode 100644 index 0000000..bbeceb9 Binary files /dev/null and b/community/nfsu2/img/cat-bg.png differ diff --git a/community/nfsu2/img/default_bg.jpg b/community/nfsu2/img/default_bg.jpg new file mode 100644 index 0000000..bde0ebe Binary files /dev/null and b/community/nfsu2/img/default_bg.jpg differ diff --git a/community/nfsu2/img/mask.png b/community/nfsu2/img/mask.png new file mode 100644 index 0000000..abe14c1 Binary files /dev/null and b/community/nfsu2/img/mask.png differ diff --git a/community/nfsu2/img/needle.png b/community/nfsu2/img/needle.png new file mode 100644 index 0000000..5b6fa4c Binary files /dev/null and b/community/nfsu2/img/needle.png differ diff --git a/community/nfsu2/index.html b/community/nfsu2/index.html new file mode 100644 index 0000000..884764e --- /dev/null +++ b/community/nfsu2/index.html @@ -0,0 +1,70 @@ + + + + + + Dashboard + + + + + + +
+
+
+
+
+
+
0
+
N
+
0
+
+ needle +
+
+ needle +
+ gauge-bg +
+ +
+
+ turnLeft + ECUErr + battAlt + eBrake + turnRight +
+
+ parkLights + fogLights + auxLights + fan +
+
+ oilSwitch + openDoor + highBeam +
+
+ +
+
+
KM0
+
+
+
TRIP0
+
+
+ + custom-bg +
+ + + + + + + + diff --git a/community/nfsu2/script.js b/community/nfsu2/script.js new file mode 100644 index 0000000..37418d7 --- /dev/null +++ b/community/nfsu2/script.js @@ -0,0 +1,71 @@ +const callback = function(){ + const signals = [ + 'turnLeft', 'turnRight', 'battAlt', 'eBrake', 'highBeam', 'parkLights', + 'fogLights', 'auxLights', 'openDoor', 'fan', 'oilSwitch', 'ECUErr' + ]; + const elems = [ + ...signals, 'container', 'speedo', 'kmTrip', 'kmTotal', 'gear', 'cltNum', + 'customBg' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, speedo, rpm, kmTrip, kmTotal, gear, cltNum, customBg + } = elems; + const { cMain, cRed } = COLORS; + const { clt, redline, bgImage } = DASH_OPTIONS; + const cltMax = parseInt(clt, 10); + let combLvl = 0; + + setRootCSS('--main-color', cMain) + customBg.src = userBackground() || 'img/default_bg.jpg'; + + const updateRPM = (currRpm) => { + if (+currRpm > 8000) return; + setRootCSS('--rpm', (((currRpm / 8000) * 230)) + 'deg'); + } + + const updateClt = (currClt) => { + setRootCSS('--clt-needle', (((currClt / cltMax) * 193) + 40) + 'deg'); + setText(cltNum, zeroFixed(currClt)); + } + + const updateFuelLevel = (currFuel) => { + setRootCSS('--fuel-needle', ((currFuel / 100) * 118) + 'deg'); + } + + function updateData() { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + combLvl = fuelLevelFormat(basicData, 'lvlFuelF'); + + if (useCAN) { + setText(gear, canData.gear); + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + setText(speedo, zeroFixed(useCANForVSS ? canData.vss : basicData.kmhF)); + updateClt(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + if (isBasicOnline) { + updateFuelLevel(fuelLevelFormat(basicData, 'lvlFuelF')) + + for(let i = 0; i < signals.length; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + requestAnimationFrame(updateData); + } + + loadOdo(kmTotal, kmTrip, 0); + container.classList.add('anim-in'); + switchIcons(document.querySelectorAll('#top-info img')) + + setTimeout(function() { + openConnection(updateData); + }, 4500); +}; + +window.onload = function(){ + requestAnimationFrame(callback); +}; diff --git a/community/nfsu2/style.css b/community/nfsu2/style.css new file mode 100644 index 0000000..818d25d --- /dev/null +++ b/community/nfsu2/style.css @@ -0,0 +1,434 @@ +@font-face { + font-family: 'MonoNumbers'; + font-style: light; + font-weight: 400; + src: local('ChivoMono Light'), local('ChivoMono-Light'), url('../../assets/fonts/ChivoMono-Light.ttf') format('opentype'); +} + + +@font-face { + font-family: "Rubik"; + font-style: normal; + font-weight: 400; + src: local("Rubik Regular"), local("Rubik-Regular"), + url("../assets/fonts/Rubik-Regular.ttf") format("truetype"); +} + +:root { + --main-color: #00ff00; + --fuel-color: #ffffff55; + --rpm: 0deg; + --clt-needle: 40deg; + --fuel-needle: 0deg; +} + +body, +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + background-color: #000; + color: #EEE; + font-family: "Rubik", sans-serif; + border: none; + margin: 0; + padding: 0; +} + +#container { + height: 100vh; + width: 100vw; + left: 0; + border: none; + overflow: hidden; + max-height: 500px; + position: relative; + display: block; + top: 0; + opacity: 1; + transform-origin: center center; +} + +#mainGauge { + width: 599px; + height: 450px; + position: absolute; + top: 16px; + right: 24px; + z-index: 2; + opacity: 0.01; + will-change: transform, opacity; +} + +#mainGauge > div { + position: absolute; + z-index: 4; +} + +#gaugeBg { + width: 599px; + height: 450px; + position: relative; + display: block; + z-index: 2; +} + +div#fuelGauge { + width: 437px; + height: 245px; + clip-path: polygon( + 236px 0px, + 263px 1px, + 289px 6px, + 314px 13px, + 338px 23px, + 344px 24px, + 361px 24px, + 368px 25px, + 377px 29px, + 390px 39px, + 407px 53px, + 423px 69px, + 434px 83px, + 436px 95px, + 426px 131px, + 425px 133px, + 424px 135px, + 422px 136px, + 421px 136px, + 420px 135px, + 413px 124px, + 405px 112px, + 396px 101px, + 387px 91px, + 377px 82px, + 367px 73px, + 356px 65px, + 344px 57px, + 332px 50px, + 320px 44px, + 307px 39px, + 293px 35px, + 279px 32px, + 265px 29px, + 251px 28px, + 236px 27px, + 215px 28px, + 194px 31px, + 174px 36px, + 155px 43px, + 136px 52px, + 119px 63px, + 103px 74px, + 88px 88px, + 75px 103px, + 63px 119px, + 52px 136px, + 44px 154px, + 37px 173px, + 31px 193px, + 28px 214px, + 27px 235px, + 27px 245px, + 14px 236px, + 0px 229px, + 2px 206px, + 6px 183px, + 12px 161px, + 20px 140px, + 30px 120px, + 42px 101px, + 56px 83px, + 71px 67px, + 88px 52px, + 106px 39px, + 125px 28px, + 145px 18px, + 167px 10px, + 189px 5px, + 212px 1px, + 236px 0px + ); + position: absolute; + z-index: 1; + top: 11px; + right: 13px; + transform: scale(1.04); + background: var(--fuel-color) +} + +#customBg { + height: 100%; + width: 100%; + position: absolute; + z-index: 0; + opacity: 0.01; + will-change: transform, opacity; +} + +#tab { + position: absolute; + width: 130px; + height: 100px; + background: var(--main-color); + right: -14px; + top: 30px; + transform: rotate(23deg); +} + +#fuelLevel { + width: 450px; + height: 400px; + position: absolute; + background: var(--main-color); + top: 234px; + right: 0px; + transform-origin: 55% top; + transform: rotate(var(--fuel-needle)); +} + +#speedo { + width: 106px; + height: 80px; + top: 266px; + right: 62px; + font-size: 58px; + text-align: center; + font-family: MonoNumbers; + transform: scaleX(1.2); +} + +#gear { + width: 106px; + height: 60px; + top: 196px; + right: 22px; + font-size: 58px; + text-align: center; +} + +#cltNeedle { + height: 197px; + width: 40px; + transform-origin: center center; + bottom: 0; + left: 81px; + transform: rotate(var(--clt-needle)); +} + +#cltNeedle img { + height: 40px; + position: absolute; + bottom: 12px; + left: 0; +} + +#cltNum { + padding: 2px 4px; + background: #000000CC; + border-radius: 6px; + font-weight: bold; + font-size: 28px; + bottom: 26px; + left: 70px; + text-align: center; + width: 50px; +} + +#rpmNeedle { + height: 400px; + width: 57px; + transform-origin: center center; + bottom: 0; + right: 185px; + transform: rotate(var(--rpm)); +} + +#rpmNeedle img { + position: absolute; + bottom: 30px; + left: 0; +} + +#top-info { + position: absolute; + width: 90%; + height: 166px; + top: 16px; + right: 0; + box-sizing: border-box; + z-index: 20; + opacity: 0.01; +} + +#top-info .icons { + position: absolute; + text-align: center; + width: 40%; + top: 0; + left: 30%; +} + +#top-info .icons.bottom { + bottom: 0; + top: auto; +} + +#top-info .icons.center { + bottom: 56px; + top: auto; +} + +#top-info .icons span { + height: 35px; + width: 55px; + opacity: 0; + padding: 10px 0px; + display: inline-block; + will-change: opacity; + background: #000B; + border-radius: 50px; + margin: 0 3px; +} + +#top-info .icons #oilSwitch img { + max-width: 45px; +} + +#top-info .icons span[data-etoggle="1"] { + opacity: 1 !important; +} + +#top-info .icons span img { + width: auto; + height: 35px; + max-width: 38px; + line-height: 40px; + display: inline-block; +} + +#bottom-odo { + font-size: 20px; + height: 80px; + width: 160px; + z-index: 10; + position: absolute; + right: 496px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 0.01; + top: 185px; +} + +#bottom-odo > div { + text-align: left; + align-items: center; + align-content: center; + background: #000B; + border-radius: 10px; + padding: 0px 8px; + width: 140px; + margin: 2px 0; + display: flex; + justify-content: space-between; +} + +#bottom-odo > div > div { + + display: flex; + justify-content: space-between; + flex-direction: row; + flex: 1; +} + +#bottom-odo span { + margin: 4px; + font-weight: 700; +} + +#bottom-odo span:last-child { + letter-spacing: 2px; +} + +.anim-in #mainGauge { + animation-name: grow-in; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-duration: 0.5s; + animation-delay: 2.5s; +} + +.anim-in #customBg { + animation-name: fade-in-zoom; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-duration: 2.5s; +} + +.anim-in #top-info, +.anim-in #bottom-odo { + animation-name: fade-in; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-duration: 0.6s; + animation-delay: 3s; +} + +.anim-out #mainGauge { + opacity: 1; + animation-name: fade-out; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-duration: 0.5s; + animation-delay: 0s; +} + +.anim-out #customBg { + opacity: 1; + animation-name: fade-out-zoom; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-duration: 2.5s; + animation-delay: 1s; +} + +.anim-out #top-info, +.anim-out #bottom-odo { + opacity: 1; + animation-name: fade-out; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + animation-duration: 0.6s; + animation-delay: 0.5s; +} + +/* ANIMATION */ +@keyframes fade-out-zoom { + 1% { opacity: 1; transform: scale(1); } + 100% { opacity: 0; transform: scale(2); } +} + +@keyframes fade-in-zoom { + 1% { opacity: 0; transform: scale(2); } + 100% { opacity: 1; transform: scale(1); } +} + +@keyframes grow-in { + 1% { opacity: 0; transform: scale(0.2); } + 100% { opacity: 1; transform: scale(1); } +} + +@keyframes fade-in { + 1% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes fade-out { + 1% { opacity: 1; } + 100% { opacity: 0; } +} diff --git "a/community/opala92/C\303\263pia_de_seguran\303\247a_de_opala92.cdr" "b/community/opala92/C\303\263pia_de_seguran\303\247a_de_opala92.cdr" new file mode 100644 index 0000000..5fb7f33 Binary files /dev/null and "b/community/opala92/C\303\263pia_de_seguran\303\247a_de_opala92.cdr" differ diff --git a/community/opala92/opala92.cdr b/community/opala92/opala92.cdr new file mode 100644 index 0000000..47cf698 Binary files /dev/null and b/community/opala92/opala92.cdr differ diff --git a/community/porsche911/assets/cluster/dark/add-on.png b/community/porsche911/assets/cluster/dark/add-on.png new file mode 100644 index 0000000..533ab41 Binary files /dev/null and b/community/porsche911/assets/cluster/dark/add-on.png differ diff --git a/community/porsche911/assets/cluster/dark/booster.png b/community/porsche911/assets/cluster/dark/booster.png new file mode 100644 index 0000000..0a676ad Binary files /dev/null and b/community/porsche911/assets/cluster/dark/booster.png differ diff --git a/community/porsche911/assets/cluster/dark/clusterFuelTemp.png b/community/porsche911/assets/cluster/dark/clusterFuelTemp.png new file mode 100644 index 0000000..f2bf4d7 Binary files /dev/null and b/community/porsche911/assets/cluster/dark/clusterFuelTemp.png differ diff --git a/community/porsche911/assets/cluster/dark/clusterRpm.png b/community/porsche911/assets/cluster/dark/clusterRpm.png new file mode 100644 index 0000000..9b705d7 Binary files /dev/null and b/community/porsche911/assets/cluster/dark/clusterRpm.png differ diff --git a/community/porsche911/assets/cluster/dark/clusterSpeed.png b/community/porsche911/assets/cluster/dark/clusterSpeed.png new file mode 100644 index 0000000..110e71e Binary files /dev/null and b/community/porsche911/assets/cluster/dark/clusterSpeed.png differ diff --git a/community/porsche911/assets/cluster/dark/olipress.png b/community/porsche911/assets/cluster/dark/olipress.png new file mode 100644 index 0000000..73c3781 Binary files /dev/null and b/community/porsche911/assets/cluster/dark/olipress.png differ diff --git a/community/porsche911/assets/cluster/ponteiro.png b/community/porsche911/assets/cluster/ponteiro.png new file mode 100644 index 0000000..60fc71a Binary files /dev/null and b/community/porsche911/assets/cluster/ponteiro.png differ diff --git a/community/porsche911/assets/cluster/transparent/booster.png b/community/porsche911/assets/cluster/transparent/booster.png new file mode 100644 index 0000000..979c828 Binary files /dev/null and b/community/porsche911/assets/cluster/transparent/booster.png differ diff --git a/community/porsche911/assets/cluster/transparent/clusterFuelTemp.png b/community/porsche911/assets/cluster/transparent/clusterFuelTemp.png new file mode 100644 index 0000000..ad4c4e6 Binary files /dev/null and b/community/porsche911/assets/cluster/transparent/clusterFuelTemp.png differ diff --git a/community/porsche911/assets/cluster/transparent/clusterRpm.png b/community/porsche911/assets/cluster/transparent/clusterRpm.png new file mode 100644 index 0000000..073a661 Binary files /dev/null and b/community/porsche911/assets/cluster/transparent/clusterRpm.png differ diff --git a/community/porsche911/assets/cluster/transparent/clusterSpeed.png b/community/porsche911/assets/cluster/transparent/clusterSpeed.png new file mode 100644 index 0000000..1261b29 Binary files /dev/null and b/community/porsche911/assets/cluster/transparent/clusterSpeed.png differ diff --git a/community/porsche911/assets/cluster/transparent/olipress.png b/community/porsche911/assets/cluster/transparent/olipress.png new file mode 100644 index 0000000..361c487 Binary files /dev/null and b/community/porsche911/assets/cluster/transparent/olipress.png differ diff --git a/community/porsche911/assets/cluster/white/add-on.png b/community/porsche911/assets/cluster/white/add-on.png new file mode 100644 index 0000000..7502d71 Binary files /dev/null and b/community/porsche911/assets/cluster/white/add-on.png differ diff --git a/community/porsche911/assets/cluster/white/booster.png b/community/porsche911/assets/cluster/white/booster.png new file mode 100644 index 0000000..a8964c0 Binary files /dev/null and b/community/porsche911/assets/cluster/white/booster.png differ diff --git a/community/porsche911/assets/cluster/white/clusterFuelTemp.png b/community/porsche911/assets/cluster/white/clusterFuelTemp.png new file mode 100644 index 0000000..2cc40cc Binary files /dev/null and b/community/porsche911/assets/cluster/white/clusterFuelTemp.png differ diff --git a/community/porsche911/assets/cluster/white/clusterRpm.png b/community/porsche911/assets/cluster/white/clusterRpm.png new file mode 100644 index 0000000..b025ebe Binary files /dev/null and b/community/porsche911/assets/cluster/white/clusterRpm.png differ diff --git a/community/porsche911/assets/cluster/white/clusterSpeed.png b/community/porsche911/assets/cluster/white/clusterSpeed.png new file mode 100644 index 0000000..3e4628a Binary files /dev/null and b/community/porsche911/assets/cluster/white/clusterSpeed.png differ diff --git a/community/porsche911/assets/cluster/white/olipress.png b/community/porsche911/assets/cluster/white/olipress.png new file mode 100644 index 0000000..6d5a7b3 Binary files /dev/null and b/community/porsche911/assets/cluster/white/olipress.png differ diff --git a/community/porsche911/assets/porsche 911.cdr b/community/porsche911/assets/porsche 911.cdr new file mode 100644 index 0000000..d0b6b1b Binary files /dev/null and b/community/porsche911/assets/porsche 911.cdr differ diff --git a/community/porsche911/index.html b/community/porsche911/index.html new file mode 100644 index 0000000..cef36f2 --- /dev/null +++ b/community/porsche911/index.html @@ -0,0 +1,99 @@ + + + + + + + 911 + + + + + + +
+
+ + + + + + + + + + + + + km/h + - - - + + Km total + 000000 + + Trip + 000000 + Lambda + 1.00 + Tps +
+ -- + % +
+
+
+
+
+ turnLeft + ECUErr + battAlt + eBrake + oilSwitch + highBeam + parkLights + fogLights + auxLights + fan + openDoor + turnRight +
+
+
+ + + + + +
+ + + \ No newline at end of file diff --git a/community/porsche911/script.js b/community/porsche911/script.js new file mode 100644 index 0000000..f0bc82f --- /dev/null +++ b/community/porsche911/script.js @@ -0,0 +1,98 @@ +const callback = () => { + // Variables, constants and DOM elements + const signals = [ + 'battAlt', 'eBrake', 'highBeam', 'parkLights', 'fogLights', 'auxLights', + 'openDoor', 'oilSwitch', 'ECUErr', 'fuelLight', 'turn' + ]; + const elems = [ + ...signals, 'container', 'speedo', 'rpm', 'kmTrip', 'kmTotal', 'fuelLevel', + 'battLevel', 'fuelPressure', 'lambda', 'oilPressure', 'mapBoost', 'cltNow' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, speedo, rpm, kmTrip, kmTotal, battLevel, + fuelPressure, lambda, oilPressure, mapBoost, boost, fuelLevel, cltNow + } = elems; + const { clt } = DASH_OPTIONS + const maxRPM = 8000; + const signalsLen = signals.length - 2 + + loadOdo(kmTotal, kmTrip, 0) + + const updateKMH = (val) => { + setText(speedo, zeroFixed(val)) + } + + const updateRPM = (value) => { + if (+value > maxRPM || +value < 0) return + setRootCSS('--rpm-deg', `${(((+value / maxRPM) * 230) + 247)}deg`) + } + + console.log(canData) + console.log(basicData) + + const setKmhDeg = (val) => { + if (+val > 250 || +val < 0) return + if (+val > 0 && +val < 100) setRootCSS('--kmh-deg', `${(((+val / 100) * 100) + 229)}deg`) + if (+val > 101 && +val < 301) setRootCSS('--kmh-deg', `${(((+val / 230) * 105) + 282)}deg`) + } + + const setFuelDeg = (val) => { + if (+val > 100 || +val < 0) return + setRootCSS('--fuel-deg', `${(139 - ((+val / 100) * 95))}deg`) + } + + const setCLTDeg = (val) => { + if (+val > clt || +val < 0) return + setRootCSS('--clt-deg', `${(((+val / clt) * 100) + 315)}deg`) + } + + const setBoostDeg = (val) => { + if (+val > mapBoost || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / mapBoost) * 100) + 271)}deg`) + } + + const setOilPressDeg = (val) => { + if (+val > oilPressure || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / oilPressure) * 100) + 271)}deg`) + } + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (isBasicOnline) { + setFuelDeg(safeReturn(basicData, 'lvlFuelF')) + etoggle(elems.fuelLight, safeReturn(basicData, 'lvlFuelF') > 15 ? 1 : 0) + etoggle(elems.turn, (+basicData.turnLeft === 0 || +basicData.turnRight === 0) ? 0 : 1) + + for (let i = 0; i < signalsLen; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + if (useCAN) { + setText(mapBoost, mapFormat(canData.map)) + setText(fuelPressure, canData.fuelPress) + setText(battLevel, canData.batt) + setText(lambda, canData.lambda) + setText(oilPressure, canData.oilPress) + setText(tps, canData.tps) + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + updateKMH(useCANForVSS ? canData.vss : basicData.kmh) + setKmhDeg(useCANForVSS ? canData.vss : basicData.kmh) + setBoostDeg(canData.boost) + setCLTDeg(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + + requestAnimationFrame(bindRealtimeData); + } + + setTimeout(() => openConnection(bindRealtimeData), 6000) + + switchIcons(document.querySelectorAll('#top-info img')) + container.classList.add('anim-in') +}; + +window.onload = () => callback() diff --git a/community/porsche911/style.css b/community/porsche911/style.css new file mode 100644 index 0000000..8a65630 --- /dev/null +++ b/community/porsche911/style.css @@ -0,0 +1,502 @@ +:root { + --rpm-deg: 247deg; + --kmh-deg: 230deg; + --fuel-deg: 139deg; + --clt-deg: 315deg; + --oilPres-deg: 450deg; + --booster-deg: 271deg; +} + +body, +html { + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + background-color: #000; + color: #eee; + border: none; + margin: 0; + padding: 0; + text-rendering: optimizeSpeed; + scale: 1.0; +} + +.main { + scale: 1.13; +} + +.dark { + +} + +.light {} + +.add-on { + display: block; +} + +.add-on#AddOnleft { + width: auto; + max-width: 212px; + position: absolute; + top: 66vh; + left: 15vw; + transform: translate(-50%, -50%); + animation: showThree 2s ease-in-out; +} + +.add-on#AddOnright { + width: auto; + max-width: 212px; + position: absolute; + top: 66vh; + left: 85vw; + transform: translate(-50%, -50%); + animation: showThree 2s ease-in-out; +} + +.leftV { + width: 24%; + max-width: 292px; + position: absolute; + top: 56.6vh; + left: 29vw; + transform: translate(-50%, -50%); + animation: showTwo 2s ease-in-out; + filter: drop-shadow(#000 0px 0px 20px); +} + +.centerV { + width: 28%; + max-width: 356px; + position: absolute; + top: 50vh; + left: 50vw; + transform: translate(-50%, -50%); + filter: drop-shadow(#000 0px 0px 20px); + animation: showFirst 1s ease-in-out; +} + +.rightV { + width: 24%; + max-width: 292px; + position: absolute; + top: 56.6vh; + left: 71vw; + transform: translate(-50%, -50%); + animation: showTwo 2s ease-in-out; + filter: drop-shadow(#000 0px 0px 20px); +} + + +.ponteiroSpeed { + transform: translate(-50%, -50%) rotate(var(--kmh-deg)); + transform-origin: center 85%; + width: 4%; + max-width: 42px; + position: absolute; + top: 44.7vh; + left: 28.8vw; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.ponteiroRpm { + transform: translate(-50%, -50%) rotate(var(--rpm-deg)); + transform-origin: center 85%; + width: 4%; + max-width: 158px; + position: absolute; + top: 35vh; + left: 50vw; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.ponteiroFuel { + transform: translate(-50%, -50%) rotate(var(--fuel-deg)); + transform-origin: center 85%; + width: 4%; + max-width: 28px; + position: absolute; + top: 48.5vh; + left: 74.8vw; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.ponteiroOilPress { + transform: translate(-50%, -50%) rotate(var(--oilPres-deg)); + transform-origin: center 85%; + width: 4%; + max-width: 32px; + position: absolute; + top: 57.5vh; + left: 84.8vw; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.ponteiroBooster { + transform: translate(-50%, -50%) rotate(var(--booster-deg)); + transform-origin: center 85%; + width: 4%; + max-width: 32px; + position: absolute; + top: 57.5vh; + left: 15.2vw; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.ponteiroTemp { + transform: translate(-50%, -50%) rotate(var(--clt-deg)); + transform-origin: center 85%; + width: 4%; + max-width: 28px; + position: absolute; + top: 38.1vh; + left: 71vw; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.speedText { + position: absolute; + left: 200vw; + color: #eee; + top: 61vh; + left: 50vw; + font-size: 20px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.speedNumber { + position: absolute; + color: #eee; + top: 70vh; + left: 50vw; + font-size: 55px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; + +} + +.rpmText { + position: absolute; + left: 200vw; + color: #eee; + top: 61vh; + left: 47vw; + font-size: 55px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.rpmNumber { + position: absolute; + left: 200vw; + color: #eee; + top: 61vh; + left: 47vw; + font-size: 55px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + + +.lambda-text { + position: absolute; + color: #eee; + top: 74vh; + left: 13vw; + font-size: 16px; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.lambda { + position: absolute; + color: #eee; + top: 78vh; + left: 13.3vw; + font-size: 24px; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.tps-text { + position: absolute; + color: #eee; + top: 74vh; + left: 84vw; + font-size: 16px; + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.tps { + text-align: center; + position: absolute; + color: #eee; + top: 80vh; + left: 85.3vw; + font-size: 24px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.kmtripText { + text-align: center; + position: absolute; + color: #eee; + top: 73vh; + left: 70.8vw; + font-size: 16px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} +.kmtrip { + text-align: center; + position: absolute; + color: #eee; + top: 78vh; + left: 70.8vw; + font-size: 24px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + +.kmTotalText { + text-align: center; + position: absolute; + color: #eee; + top: 73vh; + left: 28.8vw; + font-size: 16px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} +.kmTotal { + text-align: center; + position: absolute; + color: #eee; + top: 78vh; + left: 28.8vw; + font-size: 24px; + transform: translate(-50%, -50%); + animation: ponteiros 1s ease-in-out; + animation-delay: 2s; + opacity: 0; + animation-fill-mode: forwards; +} + + + +#top-info .icons { + /* position: absolute; + text-align: center; + width: 50%; + top: 4%; + left: 25%; */ + flex-wrap: nowrap; + display: flex; + flex-direction: row; + position: absolute; + text-align: center; + width: 70%; + top: 4%; + left: 15%; +} + +#top-info .icons.bottom { + bottom: 4%; + top: auto; +} + +#top-info .icons span { + height: 35px; + align-items: center; + margin: 0; + width: calc(75% / 6); + opacity: 0.1; + padding: 0; + display: inline-block; + will-change: opacity; +} + +#top-info .icons #OIL img { + max-width: 45px; +} + +#top-info .icons span[data-etoggle="1"], +.turn-arrows[data-etoggle="1"] { + opacity: 1 !important; +} + +#top-info .icons span img { + width: auto; + height: 35px; + max-width: 38px; + line-height: 40px; + display: inline-block; + align-self: center; +} + +#top-info .icons .icons-divider { + width: 240px; +} + +#top-info .icons .icons-divider img { + width: 50px; + max-width: inherit; + max-height: 50px; +} + +.anim-in #top-gauges, +.anim-in .toplines { + animation-delay: 2s; +} + +.anim-in #top-info { + animation-delay: 4s; +} + +.anim-in #centerLeftWidget { + animation-delay: 3.5s; +} + +.anim-in #bottom-odo, +.anim-in .circle .bignumber { + animation-delay: 2.5s; +} + +.anim-in .navcursor, +.anim-in #bottomanimation { + animation-delay: 5s; +} + +.anim-in #bottom-odo, +.anim-in .navcursor, +.anim-in #bottomanimation, +.anim-in #centerLeftWidget, +.anim-in .circle .bignumber { + animation-name: fade-in; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-duration: 1s; +} + +.anim-in #top-info, +.anim-in #top-gauges, +.anim-in .toplines, +.anim-in #main-gauges { + animation-name: zoom-in; + animation-timing-function: cubic-bezier(0, 1, 1, 1); + animation-fill-mode: forwards; + animation-duration: 1s; +} + +.anim-in .numbers>div { + animation-name: fade-in; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-duration: 0.5s; +} + +.anim-in .rpmbar, +.anim-in .kmhbar { + animation-name: slide; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-duration: 1s; + animation-delay: 1s; + transform: translateY(310px); +} + +@keyframes showFirst { + 0% { + width: 0px; + } + + 100% { + width: 100%; + } +} + +@keyframes showTwo { + 0% { + width: 0px; + } + + 100% { + width: 100%; + } +} + +@keyframes showThree { + 0% { + width: 0px; + } + + 100% { + width: 100%; + } +} + +@keyframes ponteiros { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/community/s2000/img/bottom.png b/community/s2000/img/bottom.png new file mode 100644 index 0000000..8a8f235 Binary files /dev/null and b/community/s2000/img/bottom.png differ diff --git a/community/s2000/img/brake.svg b/community/s2000/img/brake.svg new file mode 100644 index 0000000..483ab1d --- /dev/null +++ b/community/s2000/img/brake.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/community/s2000/img/clt-gauge.svg b/community/s2000/img/clt-gauge.svg new file mode 100644 index 0000000..e3b3f89 --- /dev/null +++ b/community/s2000/img/clt-gauge.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/community/s2000/img/fuel-gauge.svg b/community/s2000/img/fuel-gauge.svg new file mode 100644 index 0000000..78cc26b --- /dev/null +++ b/community/s2000/img/fuel-gauge.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/community/s2000/img/hbeam.svg b/community/s2000/img/hbeam.svg new file mode 100644 index 0000000..200c605 --- /dev/null +++ b/community/s2000/img/hbeam.svg @@ -0,0 +1,4 @@ + + + diff --git a/community/s2000/img/rpm-mask.svg b/community/s2000/img/rpm-mask.svg new file mode 100644 index 0000000..c81a199 --- /dev/null +++ b/community/s2000/img/rpm-mask.svg @@ -0,0 +1,4 @@ + + + + diff --git a/community/s2000/img/rpm-stripes.svg b/community/s2000/img/rpm-stripes.svg new file mode 100644 index 0000000..696084c --- /dev/null +++ b/community/s2000/img/rpm-stripes.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/community/s2000/img/tach-mask.svg b/community/s2000/img/tach-mask.svg new file mode 100644 index 0000000..ffba64b --- /dev/null +++ b/community/s2000/img/tach-mask.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + diff --git a/community/s2000/img/turn.svg b/community/s2000/img/turn.svg new file mode 100644 index 0000000..14103a0 --- /dev/null +++ b/community/s2000/img/turn.svg @@ -0,0 +1,5 @@ + + + diff --git a/community/s2000/index.html b/community/s2000/index.html new file mode 100644 index 0000000..b444600 --- /dev/null +++ b/community/s2000/index.html @@ -0,0 +1,82 @@ + + + + + + Dashboard + + + + + +
+ +
+
+
+ RPM +
+ RPM +
+ +
+
+
+
0
+
0
+
0
+
+
+
0
+
0
+
+
+
0.00
+
+ tach +
+ +
+ turn-left + turn-right +
+ +
+ hbeam +
+ +
+
+ clt +
+ +
+
+ fuel +
+ +
+
+ brake + battery + oil + injection +
+
+ headlight + fan + door + pump +
+ bottom +
+ +
+ + + + + + + + diff --git a/community/s2000/script.js b/community/s2000/script.js new file mode 100644 index 0000000..b6bd217 --- /dev/null +++ b/community/s2000/script.js @@ -0,0 +1,94 @@ +const callback = function(){ + const elems = {}; + [ + 'container', 'tachNum', 'cltArc', 'fuelArc', 'batt', 'mat', 'tps', 'kmtrip', 'kmtotal', 'boost', 'turnL', 'turnR', 'hBeam', 'brake', 'battery', 'oil', 'injection', 'headlight', 'fan', 'door', 'pump' + ].map((id) => elems[id] = document.getElementById(id)); + const { + container, tachNum, cltArc, fuelArc, batt, mat, tps, kmtrip, kmtotal, boost, turnL, turnR, hBeam, brake, battery, oil, injection, headlight, fan, door, pump + } = elems; + const { cMain, cRed } = COLORS; + const cltMax = parseInt(DASH_OPTIONS.clt, 10); + let combLvl = 0; + + setRootCSS('--main-color', cMain) + + const combGauge = Gauge(fuelArc, { + max: 100, + min: 0, + dialStartAngle: -8, + dialEndAngle: 190, + value: 100, + showValue: false, + } + ); + + const cltGauge = Gauge(cltArc, { + max: cltMax, + min: 0, + dialStartAngle: -8, + dialEndAngle: 190, + value: cltMax, + showValue: false, + } + ); + + function updateRPM(currRpm) { + setRootCSS('--rpm', `${(((currRpm / 9000) * 104) + 4)}deg`); + setRootCSS('--rpm-color', ((currRpm / 1) < (DASH_OPTIONS.redline / 1) ? cMain : cRed)); + } + + function updateData() { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + combLvl = fuelLevelFormat(basicData, 'lvlFuelF'); + + if (useCAN) { + setText(boost, boostFormat(canData['map'])); + setText(batt, canData['batt']); + setText(mat, canData['mat']); + setText(tps, zeroFixed(canData['tps'])); + } + + updateRPM(useCANForRPM ? canData['rpm'] : safeReturn(basicData, 'rpm')) + setText(tachNum, zeroFixed(useCANForVSS ? canData['vss'] : basicData['kmhF'])); + setSVGGaugeValue(combGauge, 'comb-gauge', combLvl); + setSVGGaugeValue(cltGauge, 'clt-gauge', useCANForCLT ? canData['clt'] : safeReturn(basicData, 'clt')); + updateOdo(kmtotal, kmtrip, useCANForVSS ? canData['odoNow'] : basicData['odoNow']) + + if (isBasicOnline) { + etoggle(turnL, basicData['turnLeft']); + etoggle(turnR, basicData['turnRight']); + etoggle(battery, basicData['battAlt']); + etoggle(brake, basicData['eBrake']); + etoggle(hBeam, basicData['highBeam']); + etoggle(headlight, basicData['parkLights']); + etoggle(injection, basicData['ECUErr']); + etoggle(door, basicData['openDoor']); + etoggle(fan, basicData['fan']); + etoggle(pump, combLvl < 20 ? 0 : 1); + etoggle(oil, basicData['oilSwitch']); + } + + requestAnimationFrame(updateData); + } + + loadOdo(kmtotal, kmtrip, 0); + container.classList.add('anim-in'); + + function animateVSS(num) { + setText(tachNum, num); + if (num < 1) return; + setTimeout(function() { animateVSS(num - 111) }, 300); + } + + setTimeout(function() { animateVSS(999); }, 2200); + setTimeout(function() { + combGauge.setValue(0); + cltGauge.setValue(0); + openConnection(updateData); + }, 5500); +}; + +window.onload = function(){ + requestAnimationFrame(callback); +}; diff --git a/community/s2000/style.css b/community/s2000/style.css new file mode 100644 index 0000000..ded81df --- /dev/null +++ b/community/s2000/style.css @@ -0,0 +1,453 @@ +@font-face { + font-family: 'Digital'; + font-style: normal; + font-weight: normal; + src: url('../../assets/fonts/7segment.ttf') format('truetype'); +} + +@font-face { + font-family: 'CPMono'; + font-style: normal; + font-weight: 400; + src: local('CPMono Plain'), local('CPMono-Plain'), url('../../assets/fonts/CPMono-Plain.otf') format('opentype'); +} + +@font-face { + font-family: 'Rubik'; + font-style: normal; + font-weight: 400; + src: local('Rubik Regular'), local('Rubik-Regular'), url('../../assets/fonts/Rubik-Regular.ttf') format('truetype'); +} + + +:root { + --main-color: #FFA700; + --rpm: 8deg; + --rpm-color: var(--main-color); + --icon-default-opacity: 0.1; +} + + +body,html { + height:100%; + width:100%; + overflow:hidden; +} + +body { + background-color: #000; + color: #999; + font-family: 'Rubik', sans-serif; + border: none; + margin: 0; + padding: 0; +} + +#container { + height: 100vh; + width: 100vw; + left: 0; + border: none; + overflow:hidden; + max-height: 500px; + position: relative; + display: block; + top: 0; + opacity: 0.01; + transform-origin: center center; +} + +#rpm { + width:825px; + height: 342px; + position: absolute; + top: 20px; + left: 20px; +} + +#rpm #shape { + width:825px; + height: 342px; + clip-path: polygon(825px 24px, 798px 86px, 798px 86px, 765.136px 78.328px, 731.408px 72.144px, 696.912px 67.496px, 661.744px 64.432px, 626px 63px, 626px 63px, 609px 63px, 592px 63px, 575px 64px, 549px 66px, 63.77% 19.93%, 500px 72px, 56.97% 22.75%, 434px 86px, 390px 99px, 334px 120px, 285px 143px, 237.375px 169.125px, 194.368px 198.72px, 155.069px 231.075px, 119.736px 265.92px, 88.627px 302.985px, 62px 342px, 0px 342px, 0px 342px, 27.883px 295.827px, 60.944px 251.736px, 98.901px 210.069px, 141.472px 171.168px, 188.375px 135.375px, 239.328px 103.032px, 294.049px 74.481px, 352.256px 50.064px, 413.667px 30.123px, 447px 22px, 478px 15px, 508.592px 9.6px, 537px 5px, 69.10% 0.55%, 72.61% 0.08%, 74.43% 0.04%, 630px 1.84889e-31px, 630px 0px, 80.73% 0.03%, 700px 2px, 726.152px 4.288px, 751.056px 7.584px, 775.384px 11.936px, 799.808px 17.392px, 825px 24px); + background-color: #39250c; +} + +#rpm #shape #needle { + display: block; + position: absolute; + top: 412px; + left: -401px; + width: 1000px; + height: 5000px; + background-color: var(--rpm-color); + transform-origin: 920px 100px; + transform: rotate(7deg); + z-index: 1; +} + +#rpm #shape img { + top: 0; + left: 0; + z-index: 2; + position: absolute; +} + +#rpm #rpm-mask { + position: absolute; + top: 2px; + right: 0; + width: 760px; + height: 341px; +} + +#clt, #fuel { + width: 268px; + height: 116px; + position: absolute; +} + +#clt { + top: 114px; + right: 140px; +} + +#cltArc, #fuelArc { + position: absolute; + width: 268px; + height: 112px; + overflow: hidden; + top: 0; + left: 0; +} + +#cltArc > .gauge > .dial, +#fuelArc > .gauge > .dial { + stroke: none; + stroke-width: 0; + fill: none; +} + +#cltArc > .gauge > .value, +#fuelArc > .gauge > .value { + stroke: var(--main-color); + stroke-width: 12px; + fill: none; + stroke-dasharray: 3 0.9; +} + +#cltArc > svg, +#fuelArc > svg { + transform: scale(1.07, 0.95) translateY(-9px); + transform-origin: center top; +} + +#clt-gauge { + display: block; + margin: 0 0 0 2px; +} + +#fuel { + top: 246px; + right: 20px; +} + +#fuel-gauge { + display: block; + margin: 0 0 0 1px; +} + +#bottom-mask { + margin: 0 15px; +} + +#tach { + top: 154px; + position: absolute; + width: 39%; + left: 28%; + font-family: 'Digital'; + color: var(--main-color); +} + +#tachNum { + display: block; + font-weight: 400; + position: absolute; + z-index: 12; + font-size: 162px; + margin: 0; + text-align: right; + width: 258px; + line-height: 120px; + top: 9px; + right: 107px; + transform: scaleX(1.2); +} + +#tach-mask { + display: block; + position: relative; + width: 502px; + height: 208px; +} + +#tachMini, #tachTrip, #tachBoost { + position: absolute; + height: 35px; + bottom: 37px; + z-index: 10; + overflow: hidden; + font-size: 32px; + letter-spacing: 4px; + text-align: right; + left: 116px; + padding: 0 4px 0 0; + opacity: 0.01; +} + +#tachMini > div { + display: inline-block; + width: 105px; + position: relative; + margin: 0 28px 0 0; +} + +#tachMini > div::before { + content: "BAT"; + font-family: 'Rubik'; + letter-spacing: 0; + font-size: 17px; + display: block; + position: absolute; + top: 1px; + left: 5px; + border-bottom: 2px solid var(--main-color); + height: 24px; +} + +#tachMini > div:last-child { + margin: 0; +} + +#tachMini #mat::before { + content: "IAT" +} + +#tachMini #tps::before { + content: "TPS" +} + +#tachTrip { + bottom: 0; + width: 74%; +} + +#tachBoost { + left: 5px; + height: 71px; + bottom: 0; +} + +#tachBoost > div { + display: inline-block; + width: 88px; + position: relative; + /*! letter-spacing: -8px; */ +} + +#tachBoost > div::before { + content: "BOOST"; + font-family: 'Rubik'; + letter-spacing: 0; + font-size: 17px; + display: block; + border-bottom: 2px solid var(--main-color); + height: 24px; + text-align: left; + width: 56px; + margin: 0 0 10px 0; +} + +#kmtrip, #kmtotal { + width: 46%; + display: inline-block; + float: left; +} + +#kmtotal { + margin: 0 0 0 28px; + position: relative; +} + +#kmtotal::before { + content: "TRIP \A A"; + font-family: 'Rubik'; + letter-spacing: 0; + font-size: 16px; + display: block; + position: absolute; + top: 2px; + left: 5px; + white-space: pre; + text-align: left; + line-height: 14px; +} + +#turnIcons { + position: absolute; + top: 164px; + left: 34%; + width: 32.5%; +} + +#turnIcons > img { + width: 38px; + height: 42px; + float: left; + position: relative; + opacity: var(--icon-default-opacity); +} + +#turnIcons > img:last-child { + float: right; + transform: scaleX(-1); +} + +#hBeamIcon { + position: absolute; + top: 320px; + left: 900px; + width: 45px; + height: 32px; +} + +#hBeamIcon > img { + width: 45px; + height: 32px; + opacity: var(--icon-default-opacity); +} + +#bottom { + position: absolute; + width: 1280px; + height: 106px; + bottom: 0; + opacity: 0.01; +} + +#bottomIconsLeft, #bottomIconsRight { + position: absolute; + top: 23px; + left: 260px; + width: 800px; + height: 28px; +} + +#bottomIconsRight { + left: inherit; + right: 150px; + width: 220px; +} + +#bottomIconsLeft > img, +#bottomIconsRight > img { + max-width: 46px; + height: 28px; + float: left; + position: relative; + margin: 0 12px; + opacity: var(--icon-default-opacity); +} + +#battery { + width: 34px; +} + +#headlight { + width: 40px; +} + + +/* FUNCTIONS */ + +#container.connected #rpm #shape #needle { + animation: none; + opacity: 1; + transform: rotate(var(--rpm)); +} + +img[data-etoggle="1"] { + opacity: 1 !important; +} + + +/* ANIMATIONS */ + +#container, +#rpm #shape #needle { + will-change: transform, opacity; +} + +.anim-in #rpm #shape #needle { + animation-name: rotate; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 3s; + animation-delay: 2s; +} + +.anim-in #tachMini, +.anim-in #tachTrip, +.anim-in #tachBoost { + animation-name: fade-in; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 0.5s; + animation-delay: 4.5s; +} + +.anim-in #bottom { + animation-name: fade-in; + animation-timing-function: linear; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 0.5s; + animation-delay: 5s; +} + +#container.anim-in { + animation-name: fade-in; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 1.5s; +} + +#container.anim-out { + opacity: 1; + animation-name: anim-out; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 2s; +} + +@keyframes rotate { + 1% { transform: rotate(7deg); } + 40% { transform: rotate(112deg); } + 60% { transform: rotate(112deg); } + 100% { transform: rotate(7deg); } +} + +@keyframes fade-in { + 1% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes anim-out { + 1% { transform: scale(1); } + 50% { transform: scale(0.7) translate(0, 0); } + 100% { transform: scale(0.7) translate(0, -1000px); } +} diff --git a/community/scale/img/gaugebg.png b/community/scale/img/gaugebg.png index 07f6a66..bd9cfcc 100644 Binary files a/community/scale/img/gaugebg.png and b/community/scale/img/gaugebg.png differ diff --git a/community/scale/index.html b/community/scale/index.html index 260953f..53e88de 100644 --- a/community/scale/index.html +++ b/community/scale/index.html @@ -1,40 +1,42 @@ - + - Scale + Dashboard +
+
- + - +
- turnLeft - ECUErr - battAlt - eBrake - oilSwitch - turnRight + + + + + +
- highBeam - parkLights - fogLights - auxLights - fan - openDoor + + + + + +
@@ -42,15 +44,15 @@
- fuel -
00%
+ +
00%
- clt -
00°C
+ +
00°C
@@ -68,7 +70,7 @@
-
0
+
0
gaugebg
@@ -81,61 +83,66 @@
BATT
- 0 + 0

VOLTS

FUEL
- 0 + 0

BAR

LAMBDA
- 0 + 0

LAMBDA

BOOST
- 0 + 0

BAR

OIL
- 0 + 0

BAR

MAT
- 0 + 0

°C

- - - - - - + + + + + + + +
-
TRIP0km
+
TRIP0km
-
TOTAL0km
+
TOTAL0km
+
+ - + + diff --git a/community/scale/script.js b/community/scale/script.js index f29c59b..aaad049 100644 --- a/community/scale/script.js +++ b/community/scale/script.js @@ -1,13 +1,9 @@ -const { cMain, cSec } = COLORS -const { aSpd, clt, icon, rpmM } = DASH_OPTIONS -const maxRpm = rpmM * 1000 - const linearRPM = () => { let elemHolder = document.getElementById("rpmnumbers") - elemHolder.classList.add(`rpm-max-${rpmM}`) - for (let index = rpmM; index >= 0; index--) { + elemHolder.classList.add(`rpm-max-${DASH_OPTIONS.rpmM}`) + for (let index = DASH_OPTIONS.rpmM; index >= 0; index--) { let numHolder = document.createElement("div") - numHolder.setAttribute('style', `animation-delay: ${((index+15)*0.2)}s; transform: translateX(${(index/rpmM) * -180}px);`) + numHolder.setAttribute('style', `animation-delay: ${((index+15)*0.2)}s; transform: translateX(${(index/DASH_OPTIONS.rpmM) * -180}px);`) numHolder.textContent = index elemHolder.appendChild(numHolder) } @@ -33,37 +29,43 @@ const bottomLines = () => { } } -const useColorIcons = () => { - if (icon === 1) return - const icons = document.querySelectorAll('#top-info img') - for (let i = 0; i < icons.length; i++) { - icons[i].src = icons[i].src.replace('icons', 'icons_color') - } -} - const callback = () => { - const signals = [ - 'turnLeft', 'turnRight', 'battAlt', 'eBrake', 'highBeam', 'parkLights', - 'fogLights', 'auxLights', 'openDoor', 'fan', 'oilSwitch', 'ECUErr' - ]; - const elems = [ - ...signals, 'container', 'speedo', 'kmTrip', 'kmTotal', 'fuelLevel', ,'mat', - 'battLevel', 'fuelPressure', 'lambda', 'oilPressure', 'mapBoost', 'cltNow', 'gear' - ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); - const { - container, speedo, kmTrip, kmTotal, battLevel, gear, mat, - fuelPressure, lambda, oilPressure, mapBoost, fuelLevel, cltNow - } = elems; - let kmhbar = 294 - let [useCAN, useCANForRPM, useCANForVSS, useCANForCLT] = [false, false, false, false] - linearRPM() linearKMH() bottomLines() - useColorIcons() - loadOdo(kmTotal, kmTrip, 0) - setRootCSS('--main-color', cMain) - setRootCSS('--second-color', cSec) + const container = document.getElementById("container") + const kmh = document.getElementById("kmh") + const gear = document.getElementById("gear") + const comb = document.getElementById("comb-now") + const clt = document.getElementById("clt-now") + const setaesq = document.getElementById("SETAESQ") + const setadir = document.getElementById("SETADIR") + const battAlt = document.getElementById("battAlt") + const eBrake = document.getElementById("eBrake") + const highBeam = document.getElementById("highBeam") + const parkLights = document.getElementById("parkLights") + const fogLights = document.getElementById("fogLights") + const NEBLINA = document.getElementById("NEBLINA") + const DOOR = document.getElementById("DOOR") + const FAN = document.getElementById("FAN") + const OIL = document.getElementById("OIL") + const ECUERR = document.getElementById("INJ") + const batlevel = document.getElementById("batt-level") + const kmtrip = document.getElementById("km-trip") + const kmtotal = document.getElementById("km-total") + const afrnow = document.getElementById("afr-now") + const mapnow = document.getElementById("map-now") + const matnow = document.getElementById("mat-now") + const oilPressnow = document.getElementById("oil-press-now") + const fuelPressnow = document.getElementById("comb-press-now") + const boost = document.getElementById("boost") + const mainColor = COLORS.cMain + const secondColor = COLORS.cSec + const maxRpm = DASH_OPTIONS.rpmM * 1000 + let kmhbar = 294 + + setRootCSS('--main-color', mainColor) + setRootCSS('--second-color', secondColor) const updateRPM = (rpm) => { setRootCSS('--rpm-deg', `${(294 - (((rpm || 0) / maxRpm) * 294))}px`) @@ -71,7 +73,7 @@ const callback = () => { const setKmhDeg = ([val, valf]) => { kmhbar = 294 - setText(speedo, zeroFixed(aSpd < 2 ? (valf || val) : val)) + setText(kmh, zeroFixed(DASH_OPTIONS.aSpd < 2 ? (valf || val) : val)) if (val <= 60 && val >= 0) { kmhbar = (val/60)*125 } if (val <= 140 && val > 60) { kmhbar = 125 + (((val-60)/80)*83) } if (val <= 260 && val > 140) { kmhbar = 208 + (((val-140)/120)*86) } @@ -80,47 +82,50 @@ const callback = () => { const getTopBarValues = (val) => `${(291 - (val * 291))}px` - const checkSource = () => [useCAN, useCANForRPM, useCANForVSS, useCANForCLT] = [ - useCanChannel(), - useCanChannel('sRpm'), - useCanChannel('sVss'), - useCanChannel('sClt'), - ] - - const bindRealtimeData = () => { + const updateData = () => { if (!checkCache('useCAN', useCanChannel())) checkSource(); if (useCAN) { - setText(gear, canData.gear) - setText(mat, canData.mat); - setText(mapBoost, mapFormat(canData.map)) - setText(fuelPressure, canData.fuelPress) - setText(battLevel, canData.batt) - setText(lambda, canData.lambda) - setText(oilPressure, canData.oilPress) + setText(boost, mapFormat(canData['map'])) + setText(fuelPressnow, canData['fuelPress']) + setText(batlevel, canData['batt']) + setText(afrnow, canData['lambda']) + setText(oilPressnow, canData['oilPress']) + setText(gear, canData['gear']) + setText(mapnow, mapFormat(canData['map'])) + setText(matnow, canData['mat']); } - if (isBasicOnline) { - setText(fuelLevel, fuelLevelFormat(basicData, 'lvlFuel')) - setRootCSS('--lFuel-gauge-bar', getTopBarValues(safeReturn(basicData, 'lvlFuel')/100)) + updateRPM(useCANForRPM ? canData['rpm'] : safeReturn(basicData, 'rpm')) + setKmhDeg(useCANForVSS ? [canData['vss']] : [basicData['kmh'], basicData['kmhF']]) + setRootCSS('--clt-gauge-bar', useCANForCLT ? getTopBarValues(canData['clt']/DASH_OPTIONS.clt) : getTopBarValues(safeReturn(basicData, 'clt')/DASH_OPTIONS.clt)) + setText(clt, useCANForCLT ? zeroFixed(canData['clt']) : zeroFixed(safeReturn(basicData, 'clt'))) + updateOdo(kmtotal, kmtrip, useCANForVSS ? canData['odoNow'] : basicData['odoNow']) - for(let i = 0; i < signals.length; i++) { - etoggle(elems[signals[i]], basicData[signals[i]]) - } + if (isBasicOnline) { + setText(comb, fuelLevelFormat(basicData, 'lvlFuelF')) + setRootCSS('--comb-gauge-bar', getTopBarValues(safeReturn(basicData, 'lvlFuelF')/100)) + + etoggle(setaesq, basicData['turnLeft']) + etoggle(setadir, basicData['turnRight']) + etoggle(battAlt, basicData['battAlt']) + etoggle(eBrake, basicData['eBrake']) + etoggle(highBeam, basicData['highBeam']) + etoggle(parkLights, basicData['parkLights']) + etoggle(fogLights, basicData['fogLights']) + etoggle(NEBLINA, basicData['auxLights']) + etoggle(DOOR, basicData['openDoor']) + etoggle(FAN, basicData['fan']) + etoggle(OIL, basicData['oilSwitch']) + etoggle(ECUERR, basicData['ECUErr']) } - - updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) - setKmhDeg(useCANForVSS ? [canData.vss] : [basicData.kmh, basicData.kmhF]) - setRootCSS('--clt-gauge-bar', getTopBarValues((useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) / clt)) - setText(cltNow, useCANForCLT ? canData.clt : zeroFixed(safeReturn(basicData, 'clt'))) - updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) - - requestAnimationFrame(bindRealtimeData); + requestAnimationFrame(updateData); } - setTimeout(() => openConnection(bindRealtimeData), 5000) - + switchIcons(document.querySelectorAll('#top-info img')) + setTimeout(() => openConnection(updateData), 5000) container.classList.add('anim-in') + loadOdo(kmtotal, kmtrip, 0) }; window.onload = () => callback() diff --git a/community/scale/style.css b/community/scale/style.css index 6476d45..d7d8835 100644 --- a/community/scale/style.css +++ b/community/scale/style.css @@ -1,38 +1,42 @@ @font-face { - font-family: "Rubik"; + font-family: 'Rubik'; font-style: medium; font-weight: 600; - src: local("Rubik Medium"), local("Rubik-Medium"), - url("../../assets/fonts/Rubik-Medium.ttf") format("truetype"); + src: local('Rubik Medium'), local('Rubik-Medium'), url('../../assets/fonts/Rubik-Medium.ttf') format('truetype'); } @font-face { - font-family: "ChivoMono"; + font-family: 'CPMono'; font-style: light; - font-weight: 400; - src: local("ChivoMono Plain"), local("ChivoMono-Regular"), - url("../../assets/fonts/ChivoMono-Regular.ttf") format("opentype"); + font-weight: 300; + src: local('CPMono Light'), local('CPMono-Light'), url('../../assets/fonts/CPMono-Light.otf') format('opentype'); } @font-face { - font-family: "Saira"; + font-family: 'Saira'; font-style: bold; font-weight: 700; - src: local("Saira Bold"), local("Saira-Bold"), - url("../../assets/fonts/Saira-Bold.ttf") format("truetype"); + src: local('Saira Bold'), local('Saira-Bold'), url('../../assets/fonts/Saira-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'MonoNumbers'; + font-style: light; + font-weight: 400; + src: local('ChivoMono Light'), local('ChivoMono-Light'), url('../../assets/fonts/ChivoMono-Light.ttf') format('opentype'); } :root { - --lFuel-gauge-bar: 291px; + --comb-gauge-bar: 291px; --clt-gauge-bar: 291px; --rpm-deg: 294px; --kmh-deg: 294px; --main-color: #00d3ff; --second-color: #00d3ff; + --tps-gauge-bar: 11270; } -body, -html { +body, html { height: 100%; width: 100%; overflow: hidden; @@ -40,14 +44,18 @@ html { body { background-color: #000; - color: #eee; - font-family: "Rubik", sans-serif; + color: #EEE; + font-family: 'Rubik', sans-serif; border: none; margin: 0; padding: 0; text-rendering: optimizeSpeed; } +u, a, b, i { + text-decoration: none; +} + .bgcolor { width: 340px; height: 60px; @@ -72,22 +80,22 @@ body { display: block; } -.rpmbar, -.kmhbar { +.rpmbar, .kmhbar { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transform-origin: bottom; - background-color: #fff; + background-color: #FFF; border-top: 4px solid white; z-index: 1; } #container.connected .bgcolor, #container.connected .rpmbar, -#container.connected .kmhbar { +#container.connected .kmhbar +{ background-color: var(--main-color); opacity: 1; animation: none; @@ -126,22 +134,14 @@ body { z-index: 10; } -.numbers { - position: absolute; - width: 100%; - height: 100%; - z-index: 12; -} -#kmhnumbers, -#right-gauge .bignumber { - transform: scaleX(-1); -} +.numbers {position: absolute;width: 100%;height: 100%;z-index: 12;} +#kmhnumbers, #right-gauge .bignumber {transform: scaleX(-1);} .numbers > div { position: relative; font-size: 28px; text-shadow: 1px 1px 3px #000; - font-family: "Saira"; + font-family: 'Saira'; font-weight: 700; width: 20px; text-align: center; @@ -181,11 +181,15 @@ body { width: 160px; text-align: center; text-shadow: 0px 0px 10px #000; - font-family: "Saira"; + font-family: 'Saira'; font-weight: 700; line-height: 80px; } +#right-gauge .bignumber { + +} + #bottomanimation { width: 20%; left: 40%; @@ -240,7 +244,7 @@ body { background-color: var(--main-color); transform-origin: right; transform: translateX(291px); - border-left: 4px solid #fff; + border-left: 4px solid #FFF; } #top-gauges .gauge-mini .value { @@ -251,6 +255,7 @@ body { position: absolute; top: 32px; right: 65px; + font-family: 'Saira'; } #top-gauges .gauge-mini .value img { @@ -259,12 +264,13 @@ body { } #top-gauges .gauge-mini .value div { - font-size: 24px; + font-size: 22px; margin: 0 4px; } #top-gauges .gauge-mini .value span { - font-family: "ChivoMono"; + font-family: 'MonoNumbers'; + font-weight: 700; font-size: 26px; } @@ -287,7 +293,7 @@ body { } #top-gauges #left-gauge-mini > span div { - transform: translateX(var(--lFuel-gauge-bar)); + transform: translateX(var(--comb-gauge-bar)); } #centerLeftWidget { @@ -296,8 +302,9 @@ body { width: 100%; height: 72px; display: block; - top: 190px; + top: 186px; opacity: 1; + } #centerLeftWidget .mini-gauge { @@ -321,7 +328,7 @@ body { border-top: none; border-bottom: none; overflow: hidden; - height: 68px; + height: 80px; display: flex; flex-direction: column; flex: 1; @@ -331,74 +338,51 @@ body { border-right: none; } -#centerLeftWidget .micro-gauges .micro-gauge > div { +#centerLeftWidget .micro-gauges .micro-gauge>div { font-weight: 600; position: relative; color: #777; text-align: center; } -#centerLeftWidget .micro-gauges .micro-gauge > div:after, -#centerLeftWidget .micro-gauges .micro-gauge > p:after { +#centerLeftWidget .micro-gauges .micro-gauge>div:after, +#centerLeftWidget .micro-gauges .micro-gauge>p:after { left: inherit; right: -9px; } -#centerLeftWidget .micro-gauges .micro-gauge > p:before, -#centerLeftWidget .micro-gauges .micro-gauge > p:after { +#centerLeftWidget .micro-gauges .micro-gauge>p:before, +#centerLeftWidget .micro-gauges .micro-gauge>p:after { bottom: -10px; top: inherit; } -#centerLeftWidget .micro-gauges .micro-gauge > p { +#centerLeftWidget .micro-gauges .micro-gauge>p { margin: 0; position: relative; color: #777; } -#centerLeftWidget .micro-gauges .micro-gauge > span { - font-family: "Saira"; - font-size: 32px; - line-height: 36px; - color: #ffffff; +#centerLeftWidget .micro-gauges .micro-gauge>span { + font-family: 'MonoNumbers'; + font-size: 30px; + line-height: 44px; + color: #FFFFFF; + font-weight: 700; } /* svg colors */ -.str0 { - stroke: white; - stroke-width: 0.7; - stroke-linecap: round; - stroke-linejoin: round; - stroke-miterlimit: 22.9256; -} -.fil0 { - fill: none; -} -.fil2 { - fill: white; - fill-opacity: 0.3; -} -.fil1 { - fill: black; - fill-opacity: 0.5; -} -.fil3 { - fill: white; - fill-opacity: 0.5; -} -.fil4 { - fill: black; - fill-opacity: 0.6; -} -.fil5 { - fill: #00ccff; -} -.fil6 { - fill: #fff; -} +.str0 {stroke:white;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256} +.fil0 {fill:none} +.fil2 {fill:white;fill-opacity:0.3} +.fil1 {fill:black;fill-opacity:0.5} +.fil3 {fill:white;fill-opacity:0.5} +.fil4 {fill:black;fill-opacity:0.6} +.fil5 {fill:#00CCFF} +.fil6 {fill:#FFF} .mainColorFill { - fill: var(--main-color); + fill: var(--main-color) } .secondColorFill { @@ -406,12 +390,8 @@ body { } /* animation variants */ -#container.connected .str5 { - stroke: #4d4d4d; -} -#container.connected .str6 { - stroke: var(--main-color); -} +#container.connected .str5 { stroke:#4D4D4D; } +#container.connected .str6 { stroke:var(--main-color); } #container { display: block; @@ -435,6 +415,7 @@ body { right: 0; box-sizing: border-box; z-index: 20; + } #top-info .icons { @@ -458,6 +439,7 @@ body { opacity: 0.1; padding: 0; display: inline-block; + } #top-info .icons #OIL img { @@ -501,9 +483,10 @@ body { flex-direction: row; justify-content: space-between; align-items: center; + } -#bottom-odo > div { +#bottom-odo>div { display: flex; text-align: center; align-items: center; @@ -512,12 +495,12 @@ body { } #bottom-odo span { - font-family: "Saira"; + font-family: 'Saira'; font-size: 20px; line-height: 30px; letter-spacing: 1px; margin: 0 5px; - color: #fff; + color: #FFF; font-weight: 700; } @@ -565,6 +548,7 @@ body { opacity: 1; left: 10px; top: 70px; + } .circle > img { @@ -604,6 +588,7 @@ body { will-change: transform, opacity; } + .anim-in #top-gauges, .anim-in .toplines { animation-delay: 2s; @@ -643,7 +628,7 @@ body { .anim-in .toplines, .anim-in #main-gauges { animation-name: zoom-in; - animation-timing-function: cubic-bezier(0, 1, 1, 1); + animation-timing-function: cubic-bezier(0,1,1,1); animation-fill-mode: forwards; animation-duration: 1s; } @@ -690,7 +675,8 @@ body { } .anim-out .circle .numbers, -.anim-out .circle .bignumber { +.anim-out .circle .bignumber +{ animation-delay: 1s; } @@ -700,7 +686,8 @@ body { .anim-out #bottom-odo, .anim-out .navcursor, -.anim-out #bottomanimation { +.anim-out #bottomanimation +{ animation-delay: 1.5s; } @@ -726,7 +713,10 @@ body { animation-duration: 1s; } + + /* KEYFRAMES */ + @keyframes fade-in { 1% { opacity: 0.01; diff --git a/community/simple/index.html b/community/simple/index.html index 4deb201..fef894d 100644 --- a/community/simple/index.html +++ b/community/simple/index.html @@ -1,266 +1,267 @@ - + - Simple + Dashboard - +
-
-
- - - - - - - - - - +
+
+ + + + + + + + + + + +
+ + + + + + + + + + -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + +
+
-
-
- - - - - - - - - - - - -
-
- - - - - -
+
+
+ + + + + + + + + + + + +
+
+ + + + +
+
-
-
-
- turnLeft - ECUErr - battAlt - eBrake - oilSwitch - openDoor - turnRight +
+
+
+ turnLeft + ECUErr + battAlt + eBrake + oilSwitch + openDoor + turnRight
-
- highBeam - parkLights - fogLights - auxLights - fan +
+ highBeam + parkLights + fogLights + auxLights + fan
-
+
-
-
-
- - - - - - - - - - - - - - - - - -
--%
-
-
- - - - - - - - - - - - - - - - - -
--°C
-
+
+
+
+ + + + + + + + + + + + + + + + + +
--%
-
- -
-
-
-
FUEL
- -- -

BAR

-
-
-
OIL
- -- -

BAR

-
-
-
BAT
- --- -

V

-
-
-
LAMBDA
- --- -
+
+ + + + + + + + + + + + + + + + + +
--°C
-
-
-
---
-
- - - - - -

TPS

- -
--
-
%
- +
+
+
+
FUEL
+ -- +

BAR

-
-
-
---
-
- - - - - -

BOOST

- -
---
-
bar
- +
+
OIL
+ -- +

BAR

+
+
+
BAT
+ --- +

V

+
+
+
LAMBDA
+ ---
+
-
-
-
TRIP---km
+
+
+
---
+
+ + + + + +

TPS

+ +
--
+
%
+
-
-
TOTAL---km
+
+
+
---
+
+ + + + + +

BOOST

+ +
---
+
bar
+
+
-
- - - - - - +
+
+
TRIP---km
+
+
TOTAL---km
+
+
+ +
+ + + + + + +
+ - + diff --git a/community/simple/script.js b/community/simple/script.js index 135df9e..56542fd 100644 --- a/community/simple/script.js +++ b/community/simple/script.js @@ -16,7 +16,6 @@ const callback = () => { const rpmGauge = document.getElementById(`rpm${rpmM}`) const maxRpm = rpmM * 1000 const circularGaugeDashOffset = 11270; - let [useCAN, useCANForRPM, useCANForVSS, useCANForCLT] = [false, false, false, false] rpmGauge.style.display = 'block'; setRootCSS('--main-color', cMain); @@ -42,13 +41,6 @@ const callback = () => { ) ) - const checkSource = () => [useCAN, useCANForRPM, useCANForVSS, useCANForCLT] = [ - useCanChannel(), - useCanChannel('sRpm'), - useCanChannel('sVss'), - useCanChannel('sClt'), - ] - const updateData = () => { if (!checkCache('useCAN', useCanChannel())) checkSource(); @@ -70,8 +62,8 @@ const callback = () => { updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) if (isBasicOnline) { - setText(fuelLevel, fuelLevelFormat(basicData, 'lvlFuel')) - setFuelLevelBar(safeReturn(basicData, 'lvlFuel')) + setText(fuelLevel, fuelLevelFormat(basicData, 'lvlFuelF')) + setFuelLevelBar(safeReturn(basicData, 'lvlFuelF')) for(let i = 0; i < signals.length; i++) { etoggle(elems[signals[i]], basicData[signals[i]]) @@ -81,16 +73,8 @@ const callback = () => { requestAnimationFrame(updateData); } - (() => { - if (icon === 1) return - const icons = document.querySelectorAll('#top-info img') - for (let i = 0; i < icons.length; i++) { - icons[i].src = icons[i].src.replace('icons', 'icons_color') - } - })() - + switchIcons(document.querySelectorAll('#top-info img')) setTimeout(() => openConnection(updateData), 6500) - container.classList.add('anim-in') }; diff --git a/community/simple/style.css b/community/simple/style.css index 8a0e665..a0c715c 100644 --- a/community/simple/style.css +++ b/community/simple/style.css @@ -1,22 +1,20 @@ @font-face { - font-family: "Rubik"; + font-family: 'Rubik'; font-style: medium; font-weight: 600; - src: local("Rubik Medium"), local("Rubik-Medium"), - url("../../assets/fonts/Rubik-Medium.ttf") format("truetype"); + src: local('Rubik Medium'), local('Rubik-Medium'), url('../../assets/fonts/Rubik-Medium.ttf') format('truetype'); } @font-face { - font-family: "ChivoMono"; + font-family: 'CPMono'; font-style: light; - font-weight: 400; - src: local("ChivoMono Light"), local("ChivoMono-Light"), - url("../../assets/fonts/ChivoMono-Light.ttf") format("opentype"); + font-weight: 300; + src: local('ChivoMono Light'), local('ChivoMono-Light'), url('../../assets/fonts/ChivoMono-Light.ttf') format('opentype'); } :root { --rpm-bar: 0; - --rpm-color: #00d3ff; + --rpm-color: #333; --lFuel-gauge-bar: 0; --clt-gauge-bar: 0; --mat-gauge-bar: 0; @@ -24,7 +22,7 @@ --rpm-deg: 9deg; --kmh-deg: 9deg; --main-color: #00d3ff; - --second-color: #00d3ff; + --second-color: #333; --tps-gauge-bar: 11270; } @@ -279,7 +277,7 @@ i { } #bottom-odo span { - font-family: "ChivoMono"; + font-family: "CPMono"; font-size: 22px; line-height: 30px; letter-spacing: 1px; @@ -503,7 +501,7 @@ i { #side-gauges .centerComponent .value { top: 50%; font-size: 70px; - font-family: "ChivoMono"; + font-family: "CPMono"; font-weight: 400; letter-spacing: -4px; margin: -49px 0 0 0; @@ -555,7 +553,7 @@ i { } #side-gauges .centerComponent .centerGauge span div:first-child { - font-family: "ChivoMono"; + font-family: "CPMono"; font-weight: 400; letter-spacing: 1px; } @@ -624,7 +622,7 @@ i { } #centerRightWidget .mini-gauge .current-value > span { - font-family: "ChivoMono"; + font-family: "CPMono"; font-size: 18px; margin: 0 2px 0 0; } @@ -697,7 +695,7 @@ i { } #centerLeftWidget .micro-gauges .micro-gauge > span { - font-family: "ChivoMono"; + font-family: "CPMono"; font-size: 32px; color: #ffffff; display: inline-block; @@ -735,7 +733,7 @@ i { animation-timing-function: ease; animation-fill-mode: forwards; animation-duration: 1.5s; - animation-delay: 7s; + animation-delay: 6s; } .anim-in #left-gauge.circle .needle svg, @@ -762,7 +760,7 @@ i { animation-timing-function: ease-out; animation-fill-mode: forwards; animation-duration: 1s; - animation-delay: 6s; + animation-delay: 5s; } [class*="gastep"] { @@ -774,38 +772,38 @@ i { animation-name: fade-in; animation-timing-function: linear; animation-fill-mode: forwards; - animation-duration: 0.45s; + animation-duration: 2s; } .gastep1 { animation-delay: 1s; } .gastep2 { - animation-delay: 1.5s; + animation-delay: 1.2s; } .gastep3 { - animation-delay: 2s; + animation-delay: 1.4s; } .gastep4 { - animation-delay: 2.5s; + animation-delay: 1.6s; } .gastep5 { - animation-delay: 3s; + animation-delay: 1.8s; } .gastep6 { - animation-delay: 3.5s; + animation-delay: 2.0s; } .gastep7 { - animation-delay: 4s; + animation-delay: 2.2s; } .gastep8 { - animation-delay: 4.5s; + animation-delay: 2.4s; } .gastep9 { - animation-delay: 5s; + animation-delay: 2.6s; } .gastep10 { - animation-delay: 5.5s; + animation-delay: 2.8s; } .anim-out .circle, diff --git a/community/sti/assets/STI.cdr b/community/sti/assets/STI.cdr new file mode 100644 index 0000000..6de0c0e Binary files /dev/null and b/community/sti/assets/STI.cdr differ diff --git a/community/sti/assets/font/Digital.ttf b/community/sti/assets/font/Digital.ttf new file mode 100644 index 0000000..748fe55 Binary files /dev/null and b/community/sti/assets/font/Digital.ttf differ diff --git a/community/sti/assets/font/MonoNumbers.ttf b/community/sti/assets/font/MonoNumbers.ttf new file mode 100644 index 0000000..6ac3ac3 Binary files /dev/null and b/community/sti/assets/font/MonoNumbers.ttf differ diff --git a/community/sti/assets/ofc.png b/community/sti/assets/ofc.png new file mode 100644 index 0000000..fe88f71 Binary files /dev/null and b/community/sti/assets/ofc.png differ diff --git a/community/sti/assets/ponN.png b/community/sti/assets/ponN.png new file mode 100644 index 0000000..ab8ea1b Binary files /dev/null and b/community/sti/assets/ponN.png differ diff --git a/community/sti/assets/ponP.png b/community/sti/assets/ponP.png new file mode 100644 index 0000000..0ea5c4d Binary files /dev/null and b/community/sti/assets/ponP.png differ diff --git a/community/sti/assets/rpm.png b/community/sti/assets/rpm.png new file mode 100644 index 0000000..e506246 Binary files /dev/null and b/community/sti/assets/rpm.png differ diff --git a/community/sti/assets/speed.png b/community/sti/assets/speed.png new file mode 100644 index 0000000..db10486 Binary files /dev/null and b/community/sti/assets/speed.png differ diff --git a/community/sti/index.html b/community/sti/index.html new file mode 100644 index 0000000..ef5d390 --- /dev/null +++ b/community/sti/index.html @@ -0,0 +1,76 @@ + + + + + + + + STI + + + + +
+
+
+ + + + Km/h + - - - + + Tps + - - - + + Lbd + - - - + + Map + - - - +
+
+
Oil Press.
+
---bar
+ + + +
+
+ + +
+ + 000000 + + 000000 +
+
+
+
+
+ turnLeft + ECUErr + battAlt + eBrake + oilSwitch + highBeam + + parkLights + fogLights + auxLights + fan + openDoor + turnRight +
+
+
+
+ + + +
+ + + \ No newline at end of file diff --git a/community/sti/script.js b/community/sti/script.js new file mode 100644 index 0000000..a70b7ce --- /dev/null +++ b/community/sti/script.js @@ -0,0 +1,96 @@ +const callback = () => { + // Variables, constants and DOM elements + const signals = [ + 'battAlt', 'eBrake', 'highBeam', 'parkLights', 'fogLights', 'auxLights', + 'openDoor', 'oilSwitch', 'ECUErr', 'fuelLight', 'turn' + ]; + const elems = [ + ...signals, 'container', 'speedo', 'rpm', 'kmTrip', 'kmTotal', 'fuelLevel', + 'battLevel', 'fuelPressure', 'lambda', 'oilPressure', 'mapBoost', 'cltNow' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, speedo, rpm, kmTrip, kmTotal, battLevel, + fuelPressure, lambda, oilPressure, mapBoost, boost, fuelLevel, cltNow + } = elems; + const { clt } = DASH_OPTIONS + const maxRPM = 9000; + const signalsLen = signals.length - 2 + + kmTotal.toString().padStart(6, '0'); + loadOdo(kmTotal, kmTrip, 0) + const updateKMH = (val) => { + setText(speedo, zeroFixed(val)) + } + + const updateRPM = (value) => { + if (+value > maxRPM || +value < 0) return + setRootCSS('--rpm-deg', `${(((+value / maxRPM) * 285) + 233)}deg`) + } + + const setKmhDeg = (val) => { + if (+val > 260 || +val < 0) return + if (+val > 0 && +val < 20) setRootCSS('--kmh-deg', `${(((+val / 100) * 45) + 235)}deg`) + if (+val > 20 && +val < 260) setRootCSS('--kmh-deg', `${(((+val / 100) * 100) + 224)}deg`) + } + + const setFuelDeg = (val) => { + if (+val > 100 || +val < 0) return + setRootCSS('--fuel-deg', `-${(132 - ((+val / 100) * 84))}deg`) + } + + const setCLTDeg = (val) => { + if (+val > clt || +val < 0) return + setRootCSS('--clt-deg', `${(132 - ((+val / 100) * 78))}deg`) + } + + const setBoostDeg = (val) => { + if (+val > mapBoost || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / mapBoost) * 100) + 271)}deg`) + } + + const setOilPressDeg = (val) => { + if (+val > oilPressure || +val < 0) return + setRootCSS('--boost-deg', `${(((+val / oilPressure) * 100) + 271)}deg`) + } + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (isBasicOnline) { + setFuelDeg(safeReturn(basicData, 'lvlFuelF')) + etoggle(elems.fuelLight, safeReturn(basicData, 'lvlFuelF') > 15 ? 1 : 0) + etoggle(elems.turn, (+basicData.turnLeft === 0 || +basicData.turnRight === 0) ? 0 : 1) + + for (let i = 0; i < signalsLen; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + if (useCAN) { + setText(mapBoost, mapFormat(canData.map)) + setText(fuelPressure, canData.fuelPress) + setText(battLevel, canData.batt) + setText(lambda, canData.lambda) + setText(oilPressure, canData.oilPress) + setText(tps, canData.tps + '%') + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + updateKMH(useCANForVSS ? canData.vss : basicData.kmh) + setKmhDeg(useCANForVSS ? canData.vss : basicData.kmh) + setBoostDeg(canData.boost) + setCLTDeg(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + + requestAnimationFrame(bindRealtimeData); + + } + + setTimeout(() => openConnection(bindRealtimeData), 6000) + + switchIcons(document.querySelectorAll('#top-info img')) + container.classList.add('anim-in') +}; + +window.onload = () => callback() diff --git a/community/sti/style.css b/community/sti/style.css new file mode 100644 index 0000000..27a75b9 --- /dev/null +++ b/community/sti/style.css @@ -0,0 +1,384 @@ +:root { + --rpm-deg: 232deg; + --fuel-deg: 226deg; + --clt-deg: 132deg; + --kmh-deg: 236deg; +} + + +@font-face { + font-family: 'Digital'; + src: url(./assets/font/Digital.ttf); +} + + +body, +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + background-color: #000; + color: #eee; + border: none; + margin: 0; + padding: 0; + text-rendering: optimizeSpeed; + scale: 1.0; +} + +.oilFuelCoolGauge, +.rpmGauge, +.speedGauge { + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%); + opacity: 0; + animation: gauges 2s ease-in-out forwards; +} + +.oilFuelCoolGauge { + top: 50%; + left: 21%; +} + +.rpmGauge { + top: 50%; + left: 50%; + z-index: 1; +} + +.speedGauge { + top: 50%; + left: 79%; +} + +/* Ponteiros */ +.ponteiroRpm { + top: 29%; + left: 50%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--rpm-deg)); + transform-origin: center 85%; + animation: ponteiroRpm 2s ease-in-out; + opacity: 1 !important; +} + +.ponteiroSpeed { + width: 14%; + top: 33%; + left: 50%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--kmh-deg)); + transform-origin: center 85%; + animation: ponteiroSpeed 2s ease-in-out; + opacity: 1 !important; +} + +.ponteiroFuel { + top: 42%; + left: 32%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--fuel-deg)); + transform-origin: center 75%; + animation: ponteiroFuel 2s ease-in-out; + opacity: 1 !important; +} + +.ponteiroCoolant { + top: 42%; + left: 68%; + position: absolute; + scale: 1.0; + transform: translate(-50%, -50%) rotate(var(--clt-deg)); + transform-origin: center 75%; + animation: ponteiroCoolant 2s ease-in-out; + opacity: 1 !important; +} + +.oilPressTitle { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1rem; + color: #F80000; + position: absolute; + top: 79%; + left: 50%; + transform: translate(-50%, -50%); +} +.oilPressNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 2rem; + color: #F80000; + position: absolute; + top: 87%; + left: 50%; + transform: translate(-50%, -50%); +} + +.speedTitle { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1rem; + color: #F80000; + position: absolute; + top: 92%; + left: 7%; + transform: translate(-50%, -50%); +} + +.speedNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.6rem; + color: #F80000; + position: absolute; + top: 94%; + left: 18%; + transform: translate(-50%, -50%); +} + +.tpsTitle { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1rem; + color: #F80000; + position: absolute; + top: 92%; + left: 29%; + transform: translate(-50%, -50%); +} + +.tpsNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.6rem; + color: #F80000; + position: absolute; + top: 94%; + left: 40%; + transform: translate(-50%, -50%); +} + +.lbdTitle { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1rem; + color: #F80000; + position: absolute; + top: 92%; + left: 56%; + transform: translate(-50%, -50%); +} + +.lbdNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.6rem; + color: #F80000; + position: absolute; + top: 94%; + left: 66%; + transform: translate(-50%, -50%); +} + +.bstTitle { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1rem; + color: #F80000; + position: absolute; + top: 92%; + left: 79%; + transform: translate(-50%, -50%); +} + +.bstNumber { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 1.6rem; + color: #F80000; + position: absolute; + top: 94%; + left: 91%; + transform: translate(-50%, -50%); +} + +.trip { + width: 62.67px; + text-align: right; + position: absolute; + font-family: 'Digital'; + font-size: 0.8rem; + color: #F80000; + top: 77.5%; + left: 45%; +} + +.kmtotal { + width: 86.87px; + text-align: right; + position: absolute; + font-family: 'Digital'; + font-size: 1.1rem; + color: #F80000; + top: 83%; + left: 37.5%; +} + +.totais { + text-align: right; +} + +@keyframes gauges { + 0% { + opacity: 1; + } + + 100% { + opacity: 1; + } +} + +@keyframes ponteiroRpm { + 0% { + transform: translate(-50%, -50%) rotate(232deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(486deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(232deg); + } +} + +@keyframes ponteiroSpeed { + 0% { + transform: translate(-50%, -50%) rotate(236deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(486deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(236deg); + } +} + +@keyframes ponteiroFuel { + 0% { + transform: translate(-50%, -50%) rotate(226deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(312deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(226deg); + } +} + +@keyframes ponteiroCoolant { + 0% { + transform: translate(-50%, -50%) rotate(132deg); + } + + 50% { + transform: translate(-50%, -50%) rotate(49deg); + } + + 100% { + transform: translate(-50%, -50%) rotate(132deg); + } +} + +#container { + display: block; + position: relative; + height: 100%; + width: 100%; + top: 1px; + left: 0px; + border: none; + overflow: hidden; + transform: scale(1); + max-height: 500px; +} + +#top-info .icons { + /* position: absolute; + text-align: center; + width: 50%; + top: 4%; + left: 25%; */ + flex-wrap: nowrap; + display: flex; + flex-direction: row; + position: absolute; + text-align: center; + width: 81%; + top: 4%; + left: 9.5%; +} + +#top-info .icons.bottom { + bottom: 4%; + top: auto; +} + +#top-info .icons span { + height: 35px; + align-items: center; + margin: 0; + width: calc(75% / 6); + opacity: 0.1; + padding: 0; + display: inline-block; + will-change: opacity; +} + +#top-info .icons #OIL img { + max-width: 45px; +} + +#top-info .icons span[data-etoggle="1"], +.turn-arrows[data-etoggle="1"] { + opacity: 1 !important; +} + +#top-info .icons span img { + width: auto; + height: 35px; + max-width: 38px; + line-height: 40px; + display: inline-block; + align-self: center; +} + +#top-info .icons .icons-divider { + width: 240px; +} + +#top-info .icons .icons-divider img { + width: 50px; + max-width: inherit; + max-height: 50px; +} + +.anim-in #top-gauges, +.anim-in .toplines { + animation-delay: 2s; +} + +.anim-in #top-info { + animation-delay: 4s; +} + +.anim-in #top-info, +.anim-in #top-gauges, +.anim-in .toplines, +.anim-in #main-gauges { + animation-name: zoom-in; + animation-timing-function: cubic-bezier(0, 1, 1, 1); + animation-duration: 1s; +} \ No newline at end of file diff --git a/community/uno-exp/assets/bg1.png b/community/uno-exp/assets/bg1.png new file mode 100644 index 0000000..5d5232a Binary files /dev/null and b/community/uno-exp/assets/bg1.png differ diff --git a/community/uno-exp/assets/bg2.png b/community/uno-exp/assets/bg2.png new file mode 100644 index 0000000..3676bf9 Binary files /dev/null and b/community/uno-exp/assets/bg2.png differ diff --git a/community/uno-exp/assets/bg3.png b/community/uno-exp/assets/bg3.png new file mode 100644 index 0000000..6205e85 Binary files /dev/null and b/community/uno-exp/assets/bg3.png differ diff --git a/community/uno-exp/assets/bg4.png b/community/uno-exp/assets/bg4.png new file mode 100644 index 0000000..6e36881 Binary files /dev/null and b/community/uno-exp/assets/bg4.png differ diff --git a/community/uno-exp/assets/script.js b/community/uno-exp/assets/script.js new file mode 100644 index 0000000..7270dee --- /dev/null +++ b/community/uno-exp/assets/script.js @@ -0,0 +1,66 @@ +const callback = () => { + // Variables, constants and DOM elements + const signals = [ + 'battAlt', 'eBrake', 'highBeam', 'parkLights', 'fogLights', 'auxLights', + 'openDoor', 'oilSwitch', 'ECUErr', 'fuelLight', 'turn' + ]; + const elems = [ + ...signals, 'container', 'kmTrip', 'kmTotal' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, kmTrip, kmTotal, + } = elems; + const { clt } = DASH_OPTIONS + const maxRPM = 8000; + const signalsLen = signals.length - 2 + + loadOdo(kmTotal, kmTrip, 0) + + const updateRPM = (value) => { + if (+value > maxRPM || +value < 0) return + setRootCSS('--rpm-deg', `${(((+value / maxRPM) * 168))}deg`) + } + + const setKmhDeg = (val) => { + if (+val > 200 || +val < 0) return + setRootCSS('--kmh-deg', `${(((+val / 200) * 202))}deg`) + } + + const setFuelDeg = (val) => { + if (+val > 100 || +val < 0) return + setRootCSS('--fuel-deg', `${(((+val / 100) * 145))}deg`) + } + + const setCLTDeg = (val) => { + if (+val > clt || +val < 0) return + setRootCSS('--clt-deg', `-${(((+val / clt) * 148))}deg`) + } + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (isBasicOnline) { + setFuelDeg(safeReturn(basicData, 'lvlFuelF')) + etoggle(elems.fuelLight, safeReturn(basicData, 'lvlFuelF') > 15 ? 1 : 0) + etoggle(elems.turn, (+basicData.turnLeft === 0 || +basicData.turnRight === 0) ? 0 : 1) + + for (let i = 0; i < signalsLen; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + setKmhDeg(useCANForVSS ? canData.vss : basicData.kmh) + setCLTDeg(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + requestAnimationFrame(bindRealtimeData); + } + + setTimeout(() => openConnection(bindRealtimeData), 6000) + + switchIcons(document.querySelectorAll('#top-info img')) + container.classList.add('anim-in') +}; + +window.onload = () => callback() diff --git a/community/uno-exp/assets/style.css b/community/uno-exp/assets/style.css new file mode 100644 index 0000000..d51bd5a --- /dev/null +++ b/community/uno-exp/assets/style.css @@ -0,0 +1,344 @@ +@font-face { + font-family: 'Digital'; + font-style: normal; + font-weight: normal; + src: url('../../../assets/fonts/7segment.ttf') format('truetype'); +} + +body, +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +#top-info span { + opacity: 0.15; +} + +#top-info span[data-etoggle="1"] { + opacity: 1 !important; +} + +body { + background-color: #000; + color: #eee; + border: none; + margin: 0; + padding: 0; + text-rendering: optimizeSpeed; +} + +:root { + --rpm-deg: 1deg; + --kmh-deg: 0deg; + --fuel-deg: 0deg; + --clt-deg: 0deg; +} + +#container { + transform-origin: center center; + height: 100vh; + width: 100vw; +} + +.digital-word { + font-family: 'Digital'; + z-index: 4; +} + +.absolute { + width: 1280px; + height: 480px; + position: absolute; +} + +.icon { + position: fixed; + max-width: 40px; + height: 24px; +} + +.fuel { + top: 385px; + left: 24%; +} + +.bat { + top: 385px; + left: 15%; +} + +.oil { + top: 385px; + left: 19%; +} + +.clt { + top: 95px; + left: 270px; +} + +.turn { + top: 70px; + left: 46%; +} + +.handBrake { + top: 70px; + right: 24%; +} + +.headlight { + top: 115px; + left: 20%; +} + +.hheadlight { + top: 70px; + left: 25%; +} + +.milha { + top: 75px; + left: 20%; +} + +.neblina { + top: 90px; + left: 15%; +} + +.door { + top: 100px; + right: 20%; + height: 30px; +} + +.kmtotal { + position: absolute; + color: black; + top: 279px; + right: 19%; + text-align: right; + width: 87px; + overflow: hidden; + margin: 0 120px 0 0; +} + +.kmtrip { + position: absolute; + color: black; + top: 301px; + right: 19%; + text-align: right; + width: 87px; + overflow: hidden; + margin: 0 120px 0 0; +} + +.ECUErr { + top: 385px; + left: 41%; +} + +.kmtotaltxt { + position: absolute; + color: black; + top: 302px; + right: 19%; + font-size: 10px; + font-family: Arial; + z-index: 4; + margin: 0 211px 0 0; +} + +.kmtriptxt { + position: absolute; + color: black; + top: 280px; + right: 19%; + font-size: 10px; + font-family: Arial; + z-index: 4; + margin: 0 203px 0 0; +} + +.ponteiroPequeno1 { + top: -7px; + width: 192px; + left: 35px; + transform: rotate(var(--fuel-deg)); + animation: 3s rotate-verify-pequeno 1s ease-in-out; +} + +.ponteiroPequeno2 { + position: fixed; + top: -7px; + width: 192px; + right: 26px; + transform: rotate(var(--clt-deg)); + animation: 3s rotate-verify-reverse 1s ease-in-out; +} + +.ponteiroMedio { + position: fixed; + top: -56px; + width: 277px; + left: 19%; + transform: rotate(var(--rpm-deg)); + animation: 3s rotate-verify-medio 1s ease-in-out; + margin: 0 0 0 34px; +} + +.ponteiroGrande { + position: fixed; + top: -20px; + width: 333px; + right: 19%; + transform: rotate(var(--kmh-deg)); + animation: 3s rotate-verify-grande 1s ease-in-out; + margin: 0 42px 0 0; +} + +.splitBg { + height: 365px; + width: 86%; + left: 7%; + position: absolute; + top: 60px; + z-index: -1; +} + +.splitBg img { + position: absolute; + z-index: 5; +} + +.splitBg .bg1 { + left: 0; + top: 94px; + z-index: 1; +} + +.splitBg .bg2 { + left: 19%; + top: 6px; + z-index: 2; +} + +.splitBg .bg3 { + top: 0; + right: 19%; + z-index: 3; +} + +.splitBg .bg4 { + top: 94px; + right: 0; + z-index: 1; +} + +#bgSet, .splitBg { + opacity: 0.01; +} + +.anim-in .splitBg { + animation: 1s fade-in linear forwards; +} + +.anim-in #bgSet { + animation: 2s fade-in 4s linear forwards; +} + +#container.anim-out #bgSet, +#container.anim-out .splitBg { + opacity: 1; +} + +#container.anim-out { + opacity: 1; + animation-name: anim-out; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-iteration-count: 1; + animation-duration: 3s; +} + +@keyframes fade-in { + 1% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes rotate-verify-pequeno { + 1% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(145deg); + } + + 100% { + transform: rotate(0deg); + } +} + +@keyframes rotate-verify-medio { + 1% { + transform: rotate(1deg); + } + + 50% { + transform: rotate(168deg); + } + + 100% { + transform: rotate(1deg); + } +} + +@keyframes rotate-verify-grande { + 1% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(203deg); + } + + 100% { + transform: rotate(0deg); + } +} + +@keyframes rotate-verify-reverse { + 1% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(-148deg); + } + + 100% { + transform: rotate(0deg); + } +} + +@keyframes anim-out { + 1% { + transform: scale(1); + } + 50% { + transform: scale(0.7) translate(0, 0); + } + 100% { + transform: scale(0.7) translate(0, -1000px); + } +} diff --git a/community/uno-exp/assets/svgs/ponteiroGrande.svg b/community/uno-exp/assets/svgs/ponteiroGrande.svg new file mode 100644 index 0000000..07f05c0 --- /dev/null +++ b/community/uno-exp/assets/svgs/ponteiroGrande.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/community/uno-exp/assets/svgs/ponteiroMedio.svg b/community/uno-exp/assets/svgs/ponteiroMedio.svg new file mode 100644 index 0000000..fb166d9 --- /dev/null +++ b/community/uno-exp/assets/svgs/ponteiroMedio.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/community/uno-exp/assets/svgs/ponteiroPequeno.svg b/community/uno-exp/assets/svgs/ponteiroPequeno.svg new file mode 100644 index 0000000..8902824 --- /dev/null +++ b/community/uno-exp/assets/svgs/ponteiroPequeno.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/community/uno-exp/assets/svgs/ponteiroPequenoclt.svg b/community/uno-exp/assets/svgs/ponteiroPequenoclt.svg new file mode 100644 index 0000000..e62fddb --- /dev/null +++ b/community/uno-exp/assets/svgs/ponteiroPequenoclt.svg @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/community/uno-exp/index.html b/community/uno-exp/index.html new file mode 100644 index 0000000..8bf7dc3 --- /dev/null +++ b/community/uno-exp/index.html @@ -0,0 +1,52 @@ + + + + + + + Uno way + + + + +
+ +
+ + + + + 000000 + 000000 + KM + TRIP +
+ + + + +
+
+ +
+ + + + + + + + + + + +
+
+ + + + + + + + diff --git a/community/uno-turbo/assets/css/style.css b/community/uno-turbo/assets/css/style.css new file mode 100644 index 0000000..ae491bd --- /dev/null +++ b/community/uno-turbo/assets/css/style.css @@ -0,0 +1,293 @@ +* { + margin: 0; + padding: 0; + color: white; +} + +body { + background: rgb(32, 30, 30); +} + +main { + background-color: black; +} + +:root { + --rpm-path: 0%; + --fuel-path: 0%; + --clt-path: 0%; + --boost-path: 0%; + --oilp-path: 90%; + --oilt-path: 90%; +} + +.fil1 {fill:#006633} +.fil3 {fill:#003399} +.fil2 {fill:#00CCFF} +.fil0 {fill:#33CC66} +.fil7 {fill:#990000} +.fil6 {fill:red} +.fil5 {fill:#FF9933} +.fil9 {fill:#FF9933} +.fil4 {fill:yellow} +.fil8 {fill:yellow} + +.leds { + top: 269px; + left: 460px; + position: absolute; + width: 719px; + height: 199px; +} + +.leds svg g { + opacity: 0; +} + +.leds svg [data-etoggle="1"] { + opacity: 1 !important; +} + + +.digital-word { + font-family: 'Digital'; +} + +@font-face { + font-family: 'Digital'; + src: url('../../../../assets/fonts/7segment.ttf') format('truetype'); +} + +main { + height: 480px; + width: 1280px; + position: relative; + margin: 0 auto; +} + +.contagiros { + position: absolute; + clip-path: inset(0% var(--rpm-path) 0% 0%); + animation: contagiros 4s ease-in-out; + width: 1280px; + height: 480px; +} + +.fundoContaGiros { + position: fixed; +} + +.fundoOdometro { + position: fixed; +} + +.fundoTrip { + position: fixed; +} + +.odometroWrite { + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 50%; + left: 11.5%; + position: fixed; +} + +.odometroNumber { + text-align: center; + font-size: 23px; + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 262px; + left: 88px; + position: absolute; + width: 200px; +} + +.tripWrite { + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 71%; + left: 13.5%; + position: fixed; +} + +.tripNumber { + text-align: center; + font-size: 23px; + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 368px; + left: 88px; + position: absolute; + width: 200px; +} + +.kmhWrite { + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 42%; + left: 13.5%; + position: fixed; +} + +.rpmWrite { + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 16%; + left: 81.5%; + position: fixed; +} + +/* Sensores */ + + +.barFuel { + position: absolute; + animation: loadBars 4s ease-in-out; + top: 0; + left: 0; + width: 1280px; + height: 480px; + clip-path: inset(var(--fuel-path) 0 0 0); +} + +.connected .barFuel, +.connected .barOleotemp, +.connected .barOleopresure, +.connected .barCoolant, +.connected .contagiros { + animation: none; +} + +.barCoolant { + position: absolute; + animation: loadBars 4s ease-in-out; + width: 1280px; + height: 480px; + top: 0; + left: 0; + clip-path: inset(var(--clt-path) 0 0 0); +} + +.barOleopresure { + position: absolute; + animation: loadBars 4s ease-in-out; + width: 1280px; + height: 480px; + top: 0; + left: 0; + clip-path: inset(var(--oilp-path) 0 0 0); +} + +.barOleotemp { + position: absolute; + animation: loadBars 4s ease-in-out; + width: 1280px; + height: 480px; + top: 0; + left: 0; + clip-path: inset(var(--oilt-path) 0 0 0); +} + +/* fim sensores */ + +/* Boost */ +.BarBoost { + position: absolute; + animation: contagiros 4s ease-in-out; + width: 1280px; + height: 480px; +} + +.fundoBoost { + position: absolute; + width: 1280px; + height: 480px; +} + +.SpoonBoost { + position: fixed; +} + +/* fim boost */ + +.sinueta { + position: fixed; +} + +.sinuetaTextOne { + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 336px; + left: 979px; + position: absolute; +} + +.sinuetaTextTwo { + font-weight: 700; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + top: 336px; + left: 1068px; + position: absolute; +} + +/* Velocimetro */ +.NumVelocimetro { + text-align: right; + color: #EA603C; + font-size: 12em; + top: 30px; + left: 174px; + position: absolute; + transform: skew(-10deg, 0deg) scaleY(0.95); + width: 360px; +} + +.fundoCompleto { + width: 1280px; + height: 480px; + top: 0; + left: 0; + position: absolute; +} + +.fundoVelocimetro { + position: fixed; +} + +.icones { + position: absolute; + width: 1280px; + height: 480px; + top: 0; + left: 0; +} + +.lamp { + position: fixed; +} + +@keyframes contagiros { + 0% { + clip-path: polygon(0 0, 0 100%, 0% 100%, 0% 0); + } + + 100% { + clip-path: polygon(0 0, 0 100%, 115% 100%, 95% 0); + } +} + +@keyframes loadBars { + 0% { + clip-path: inset(100% 0 0 0); + } + + 50% { + clip-path: inset(50% 0 0 0); + } + + 100% { + clip-path: inset(0% 0 0 0); + } +} diff --git a/community/uno-turbo/assets/img/fundoPanel.png b/community/uno-turbo/assets/img/fundoPanel.png new file mode 100644 index 0000000..eaf0f43 Binary files /dev/null and b/community/uno-turbo/assets/img/fundoPanel.png differ diff --git a/community/uno-turbo/assets/js/script.js b/community/uno-turbo/assets/js/script.js new file mode 100644 index 0000000..f12791a --- /dev/null +++ b/community/uno-turbo/assets/js/script.js @@ -0,0 +1,71 @@ +const callback = () => { + // Variables, constants and DOM elements + const signals = [ + 'battAlt', 'eBrake', 'highBeam', 'parkLights', 'fogLights', 'auxLights', + 'openDoor', 'oilSwitch', 'ECUErr', 'fuelLight', 'turn' + ]; + const elems = [ + ...signals, 'container', 'speedo', 'kmTrip', 'kmTotal' + ].reduce((acc, id) => ({ ...acc, [id]: document.getElementById(id) }), {}); + const { + container, speedo, kmTrip, kmTotal + } = elems; + const { clt } = DASH_OPTIONS + const maxRPM = 7000 + const signalsLen = signals.length - 2 + + loadOdo(kmTotal, kmTrip, 0) + + const updateRPM = (val) => { + if (+val > maxRPM) return + setRootCSS('--rpm-path', `${51 - ((+val / maxRPM) * 41)}%`) + } + + const updateKMH = (val) => { + setText(speedo, zeroFixed(val)) + } + + const updateBoost = (val) => { + if (+val > 1) return + setRootCSS('--boost-path', `${(+val / 1) * 100}%`) + } + + const updateCLT = (val) => { + if (+val > clt || +val < 0) return + setRootCSS('--clt-path', `${84 - ((+val / clt) * 29)}%`) + } + + const updateFuel = (val) => { + if (+val > 100 || +val < 0) return + setRootCSS('--fuel-path', `${84 - ((+val / 100) * 29)}%`) + } + + + const bindRealtimeData = () => { + if (!checkCache('useCAN', useCanChannel())) checkSource(); + + if (isBasicOnline) { + updateFuel(safeReturn(basicData, 'lvlFuelF')) + + etoggle(elems.fuelLight, safeReturn(basicData, 'lvlFuelF') > 15 ? 1 : 0) + etoggle(elems.turn, (+basicData.turnLeft === 0 || +basicData.turnRight === 0) ? 0 : 1) + + for (let i = 0; i < signalsLen; i++) { + etoggle(elems[signals[i]], basicData[signals[i]]) + } + } + + updateRPM(useCANForRPM ? canData.rpm : safeReturn(basicData, 'rpm')) + updateKMH(useCANForVSS ? canData.vss : basicData.kmh) + updateCLT(useCANForCLT ? canData.clt : safeReturn(basicData, 'clt')) + updateOdo(kmTotal, kmTrip, useCANForVSS ? canData.odoNow : basicData.odoNow) + + requestAnimationFrame(bindRealtimeData); + } + + setTimeout(() => openConnection(bindRealtimeData), 6500) + + container.classList.add('anim-in') +}; + +window.onload = () => callback() diff --git a/community/uno-turbo/assets/svgs/BarBoost.svg b/community/uno-turbo/assets/svgs/BarBoost.svg new file mode 100644 index 0000000..edb9359 --- /dev/null +++ b/community/uno-turbo/assets/svgs/BarBoost.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/uno-turbo/assets/svgs/ContaGiros.svg b/community/uno-turbo/assets/svgs/ContaGiros.svg new file mode 100644 index 0000000..b18a409 --- /dev/null +++ b/community/uno-turbo/assets/svgs/ContaGiros.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/uno-turbo/assets/svgs/barCoolant.svg b/community/uno-turbo/assets/svgs/barCoolant.svg new file mode 100644 index 0000000..c66b454 --- /dev/null +++ b/community/uno-turbo/assets/svgs/barCoolant.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/uno-turbo/assets/svgs/barFuel.svg b/community/uno-turbo/assets/svgs/barFuel.svg new file mode 100644 index 0000000..c287fc8 --- /dev/null +++ b/community/uno-turbo/assets/svgs/barFuel.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/uno-turbo/assets/svgs/barOleopresure.svg b/community/uno-turbo/assets/svgs/barOleopresure.svg new file mode 100644 index 0000000..9463e95 --- /dev/null +++ b/community/uno-turbo/assets/svgs/barOleopresure.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/uno-turbo/assets/svgs/barOleotemp.svg b/community/uno-turbo/assets/svgs/barOleotemp.svg new file mode 100644 index 0000000..5372f51 --- /dev/null +++ b/community/uno-turbo/assets/svgs/barOleotemp.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + diff --git a/community/uno-turbo/assets/svgs/fundoBoost.svg b/community/uno-turbo/assets/svgs/fundoBoost.svg new file mode 100644 index 0000000..d6ab78d --- /dev/null +++ b/community/uno-turbo/assets/svgs/fundoBoost.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/community/uno-turbo/assets/svgs/icones.svg b/community/uno-turbo/assets/svgs/icones.svg new file mode 100644 index 0000000..af86e4d --- /dev/null +++ b/community/uno-turbo/assets/svgs/icones.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + P + + + + + + ! + + + + + + + + + + + + + + + + + + + + + + diff --git a/community/uno-turbo/index.html b/community/uno-turbo/index.html new file mode 100644 index 0000000..7f8968b --- /dev/null +++ b/community/uno-turbo/index.html @@ -0,0 +1,97 @@ + + + + + + + + UnoDigital + + + +
+
+ + + + + Odometro + Trip + 288 + + + + + + bar 1.8 + bar 2.0 +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + diff --git a/community/uno-turbo/unoeupanel b/community/uno-turbo/unoeupanel new file mode 160000 index 0000000..35fa481 --- /dev/null +++ b/community/uno-turbo/unoeupanel @@ -0,0 +1 @@ +Subproject commit 35fa4816e0b24bd55423dd7b5d135f826685f333